@hareru/registry

Shared registry types, loaders, and CSS mode recommendation for Hareru UI.

Overview

@hareru/registry is the shared contract layer used by @hareru/mcp and @hareru/cli. It provides:

• Type definitions — ComponentEntry, TaskBundle, CssMode, ConsumerRulesJSON, StateDef, A11yDef, ExampleDef, SlotDef, SlotRole (slot contracts for compound components), and 10+ other types
• Artifact loaders — loadRegistry(), loadTokens(), loadSchema(), loadConsumerRules(), loadComponentSchema()
• Slot utilities — buildSlotTree(rootName, slots, notes?) renders a SlotDef[] as a formatted ASCII tree string. Optional notes are appended after the tree (e.g. Table's dual-parent note)
• CSS mode recommendation — recommendCssMode() shared function with CSS_MODES and CSS_MODE_DESCRIPTIONS

Installation

npm install @hareru/registry

Most users do not need to install this package directly. It is a dependency of @hareru/mcp and @hareru/cli.

Usage

import {
  loadRegistry,
  recommendCssMode,
  CSS_MODES,
  type ComponentEntry,
  type CssMode,
} from "@hareru/registry";

// Load the component registry
const registry = loadRegistry();
console.log(registry.components.length); // 51

// Recommend a CSS mode
const { mode, reason } = recommendCssMode({
  hasTailwind: true,
  componentCount: 10,
});
console.log(mode); // 'tailwind'

CSS Mode Recommendation

The recommendCssMode() function suggests the best CSS import strategy based on project context:

| Context | Recommended Mode | |---------|-----------------| | Tailwind CSS detected | tailwind | | 1–3 components used | per-component | | Existing CSS reset/framework | portable | | Default | standalone |

Links

• Documentation
• MCP Server
• CLI

License

MIT — Copyright (c) 2026 MUSUBI Inc.