@eocrm/design-system 0.6.24 → 0.7.0

package/docs/components/Calendar.md

@@ -71,7 +71,7 @@ const [view, setView] = useState<CalendarView>('month');
 - On a multi-day bar the band repeats on **every** segment, including ones that continue from a previous week. It marks the event's state, not its start.
 - Controlled cursor via `value` / `onChange`, or uncontrolled via `defaultValue`. Controlled view via `view` / `onViewChange`, or uncontrolled via `defaultView`.
 - Overlapping timed events in week/day views render as a Google-Calendar-style cascade: each lane is offset to the right by a small constant step but every block extends to the column's right edge, with later lanes overlaying earlier ones via `z-index`. Hovering or keyboard-focusing a block lifts it to full width on top of all neighbours. A horizontal "now" line marks the current time in today's column.
-- Locale-aware via `useLocale()`; override with `locale` prop. UI strings (`today`, `viewMonth`, etc.) come from the i18n provider (`useTranslation`) — override them with `<I18nProvider overrides={{ calendar: { today: '…' } }}>`. There is no `labels` prop. For Russian copy and dates: `<I18nProvider locale="ru"><Calendar locale="ru-RU" … /></I18nProvider>`.
+- Locale-aware via `useLocale()`; override with `locale` prop. UI strings (`today`, `viewMonth`, etc.) come from the i18n provider (`useTranslation`) — override them with `<I18nProvider overrides={{ calendar: { today: '…' } }}>`. There is no `labels` prop. For Russian copy and dates: `<I18nProvider locale="ru" messages={ru}><Calendar locale="ru-RU" … /></I18nProvider>`.
 - Read-mostly **by default**: `onDayClick` and `onEventClick` callbacks; opt into editing by wiring `onEventMove` / `onEventResize` (see _Drag to move and resize_ below). `onDayClick` fires across all views — month-cell click, "+N more" chip, keyboard activation (Enter/Space) on a focused cell, and (in week/day views) clicks on the empty hour-grid space of a day column. No built-in popover or modal — wire your own detail UI.
 - ARIA: month view is `role="grid" aria-readonly="true"`; arrow keys move focus, PageUp/PageDown navigates months, Enter/Space calls `onDayClick`. Week/day views are also `role="grid"` with `role="row"` + `role="columnheader"` headers and standard sequential tab order for event blocks — `aria-readonly="true"` there too, until a drag handler is wired (see below). Agenda view exposes the visible week as `role="list"` with each day group as a `role="listitem"` and the day label as an `<h3>` heading inside — screen readers announce the date grouping before reading each event row. **Known v3 gap:** in week/day views, `onDayClick` on empty hour-grid space is **mouse-only** (no keyboard equivalent). Consumers needing keyboard activation should drive their detail UI through the focusable event chips via `onEventClick`.
 

package/docs/components/Sticky.md

@@ -35,7 +35,7 @@ Pins its box to the top of the scroll container while the page scrolls past —
 
 <!-- props:end -->
 
-- Sticky defaults are emitted by the global token entry, so a consumer `:root` override loaded after `@eocrm/design-system/styles/tokens.scss` wins predictably. Override `--sticky-top-topbar` to match custom application chrome.
+- Sticky defaults are emitted by the global token entry, so a consumer `:root` override loaded after `@eocrm/design-system/styles/tokens.css` wins predictably. Override `--sticky-top-topbar` to match custom application chrome.
 - Inside a `<Split>` aside, pair with `align="stretch"` (else the content-height aside track gives nowhere to pin).
 - As a `<Split collapseBelow>` aside, it automatically becomes a plain block (no pin, no `scroll` cap/inner scroll) while the Split is stacked — no consumer shim needed. Applies only when the `Sticky` is the `aside` itself.
 

package/docs/i18n.md

@@ -4,19 +4,24 @@ How library strings are translated, and how to pair `I18nProvider` with `LocaleP
 
 Every user-facing string the library renders — visible text, aria-labels, placeholders, default empty/loading copy — flows through a single React Context. Wrap your app once; every component picks up the right copy. There are NO `labels` / `cancelLabel` / `searchPlaceholder` props on any component.
 
+English is built in. Every other locale's catalogue is passed in with `messages`, so an English-only app never bundles Russian:
+
 ```tsx
-import { I18nProvider } from '@eocrm/design-system';
+import { I18nProvider, ru } from '@eocrm/design-system';
 
-<I18nProvider locale="ru">
+<I18nProvider locale="ru" messages={ru}>
   <App />
 </I18nProvider>;
 ```
 
-**Overrides** are a deep-partial of the messages tree:
+A non-`en` `locale` without `messages` logs a `console.error` (in every environment) and renders English. `AppProvider` takes the same `messages` prop. In a Next.js app router, mount the provider from your own `'use client'` file — `ru` contains functions, which a Server Component cannot pass to a Client Component (see [setup.md](setup.md)).
+
+**Overrides** are a deep-partial of the messages tree, merged over `messages`:
 
 ```tsx
 <I18nProvider
   locale="ru"
+  messages={ru}
   overrides={{
     pagination: { next: 'Дальше' },
     badge: { modified: 'Изменено!' },
@@ -30,12 +35,12 @@ import { I18nProvider } from '@eocrm/design-system';
 - Missing locale keys do NOT fall back to `en` — `I18nProvider` uses the one locale catalogue and `useTranslation` warns and returns the literal key string. The real guard is the type: `en` and `ru` are both annotated `: Messages` (total, not partial), so a missing key is a `tsc` error and cannot ship.
 - No provider at all = `en` defaults.
 
-**Available locales:** `'en'` (default), `'ru'`. v1.
+**Available locales:** `'en'` (built in, default) and `'ru'` (`import { ru }`). Your own catalogue works too: `locale="de" messages={de}` where `de: Messages`.
 
 **`I18nProvider` vs `LocaleProvider` — pair them.** `I18nProvider` carries the message catalog (translated strings). `LocaleProvider` carries the BCP-47 tag used by `Intl.*` formatters inside Calendar / DatePicker / DateRangePicker (month names, weekday order, date-range formatting). They are independent — a Russian app should wrap with BOTH so visible strings AND Intl-rendered dates speak the right language:
 
 ```tsx
-<I18nProvider locale="ru">
+<I18nProvider locale="ru" messages={ru}>
   <LocaleProvider locale="ru-RU">
     <App />
   </LocaleProvider>

package/docs/setup.md

@@ -6,7 +6,7 @@ Two steps at your app root:
 
 ```tsx
 // 1. Import the stylesheet once (tokens, modern reset, base typography).
-import '@eocrm/design-system/styles/global.scss';
+import '@eocrm/design-system/styles/global.css';
 
 // 2. Wrap your tree in <AppProvider>.
 import { AppProvider } from '@eocrm/design-system';
@@ -18,7 +18,8 @@ import { AppProvider } from '@eocrm/design-system';
 
 `<AppProvider>` bundles the app-level contexts so you don't wire them by hand:
 
-- `locale` (`'en' | 'ru'`) — selects the built-in UI-string bundle.
+- `locale` (`'en'`, `'ru'` or any other code) — UI-string locale. English is built in; for any other locale pass `messages` (`import { ru } from '@eocrm/design-system'`, or your own `Messages` catalog). A non-`en` locale without `messages` logs an error and renders English.
+- `messages?` — the catalog for `locale`. Omitted ⇒ English.
 - `intlLocale?` (BCP-47, e.g. `'en-US'`) — locale for Intl formatting (Calendar, dates, numbers). Defaults to `locale`.
 - `translations?` — deep-partial overrides merged over the built-in strings (rebrand a few keys; memoize the object).
 - `toast?` — `<ToastViewport>` config, or `false` to mount it yourself. Omitted ⇒ mounted with defaults.
@@ -26,15 +27,40 @@ import { AppProvider } from '@eocrm/design-system';
 - `darkTokens?` — token overrides applied **only** in dark (forced + system), merged over `tokens` (e.g. a lighter accent on dark surfaces). Memoize it.
 
 ```tsx
+// import { ru } from '@eocrm/design-system'
 // Russian UI + a couple of rebranded strings + top-right toasts:
 const translations = useMemo(() => ({ alert: { dismiss: 'Скрыть' } }), []);
-<AppProvider locale="ru" translations={translations} toast={{ position: 'top-right' }}>
+<AppProvider
+  locale="ru"
+  messages={ru}
+  translations={translations}
+  toast={{ position: 'top-right' }}
+>
   <App />
 </AppProvider>;
 ```
 
 It composes `LocaleProvider` + `I18nProvider` and mounts the toast viewport. **Routing is yours** (`<AppProvider>` ships no router), and the stylesheet import above is still required. The individual providers (`LocaleProvider`, `I18nProvider`, `ToastViewport`) remain exported for advanced cases like pinning a subtree to a different locale.
 
+**Next.js app router (React Server Components):** the `ru` catalog contains functions, which a Server Component cannot pass to a Client Component. Mount the provider from your own `'use client'` file and use that from `layout.tsx`:
+
+```tsx
+// app/providers.tsx
+'use client';
+import { AppProvider, ru } from '@eocrm/design-system';
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <AppProvider locale="ru" messages={ru}>
+      {children}
+    </AppProvider>
+  );
+}
+
+// app/layout.tsx (Server Component): <body><Providers>{children}</Providers></body>
+```
+
+Plain components (`Button`, `Select`, `Badge`, …) can be rendered directly from Server Components. Compound parts (`Breadcrumb.Item`, `Modal.Header`, `Accordion.Item`, …) cannot — a client module can't be dotted into on the server, so `X.Item` is `undefined` there — so render compound components from a `'use client'` file. Controlled overlays (`Modal`, `Drawer`) also need state and a function `onOpenChange`, so they belong in a client component anyway.
+
 **When NOT to use:** for a per-subtree locale / i18n override, nest `LocaleProvider` / `I18nProvider` directly — `AppProvider` is the single app root, so don't nest a second one. For a tiny embed or isolated test that only needs strings, use `I18nProvider` alone (or pass `toast={false}`) to avoid the toast viewport.
 
 **Rebranding via tokens:**
@@ -48,4 +74,4 @@ const darkTokens = useMemo(() => ({ '--color-accent': '#a78bfa' }), []);
 </AppProvider>;
 ```
 
-`tokens` apply in light **and** dark; `darkTokens` refine the dark scope only. They're emitted as a single declarative `<style>` that layers over the [dark theme](theming.md#dark-theme) correctly, and they win over a `data-accent` preset's token blocks. One exception to "override the accent and everything follows": a preset may set the link colour apart from its accent (`tealpine`, `indigo` and `berry` do), so when rebranding the accent on top of a preset, also override `--color-link-fg` / `--color-link-fg-hover`. Any design token can be overridden — see the generated `@eocrm/design-tokens` Sass contract for the full CSS custom-property set. Contributors change shared values only in `packages/design-tokens/src/tokens.json`; `src/styles/tokens.scss` remains the stable consumer entry point.
+`tokens` apply in light **and** dark; `darkTokens` refine the dark scope only. They're emitted as a single declarative `<style>` that layers over the [dark theme](theming.md#dark-theme) correctly, and they win over a `data-accent` preset's token blocks. One exception to "override the accent and everything follows": a preset may set the link colour apart from its accent (`tealpine`, `indigo` and `berry` do), so when rebranding the accent on top of a preset, also override `--color-link-fg` / `--color-link-fg-hover`. Any design token can be overridden — see the generated `@eocrm/design-tokens` Sass contract for the full CSS custom-property set. Contributors change shared values only in `packages/design-tokens/src/tokens.json`; consumers import the compiled `@eocrm/design-system/styles/tokens.css`.

package/docs/theming.md

@@ -53,7 +53,7 @@ Inline this in your app's `<head>` **before** your bundle loads. It applies the
 
 ## Theming via component tokens
 
-Every component ships a `Component.tokens.scss` file alongside its `.module.scss`, defining `--<component>-<part>-<state>` CSS custom properties at `:root`. The `.module.scss` references those tokens instead of the global primitives. This lets consumers re-theme one component without affecting others.
+Every component defines `--<component>-<part>-<state>` CSS custom properties at `:root` (in the shipped CSS), and its styles reference those tokens instead of the global primitives. This lets consumers re-theme one component without affecting others.
 
 **Pattern:**
 
@@ -90,6 +90,6 @@ Every component ships a `Component.tokens.scss` file alongside its `.module.scss
 <Button style={{ '--button-bg': 'red' } as React.CSSProperties}>Delete</Button>
 ```
 
-The authoritative list of tokens per component lives in that component's `<Name>.tokens.scss` file. Read it to see what's available.
+A component's tokens are the `:root` block at the top of its shipped stylesheet, `dist/components/<Name>/<Name>.css` (e.g. `node_modules/@eocrm/design-system/dist/components/Button/Button.css`). They are plain `--<component>-*` custom properties, also inspectable in browser devtools on `:root`.
 
 **Deprecated:** `--color-badge-<tone>-bg/-fg` tokens are aliased to the new `--badge-bg-<tone>` / `--badge-fg-<tone>` tokens. They still work but will be removed in a future major version.

package/docs/tokens.md

@@ -1,6 +1,6 @@
 # Tokens (the only "values" you write)
 
-All available as CSS custom properties after you import `global.scss`:
+All available as CSS custom properties after you import `global.css`:
 
 | Family          | Tokens                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -22,7 +22,10 @@ All available as CSS custom properties after you import `global.scss`:
 | Motion          | `--transition-fast` (100ms) / `--transition-base` (140ms)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | Layer (z-index) | `--z-app-chrome` / `--z-dropdown` / `--z-popover` / `--z-flowcanvas-maximized` / `--z-modal` / `--z-overlay-floating` / `--z-toast` / `--z-tooltip`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
-**Focus rings are an `outline`, not a `box-shadow`.** Use the mixin —
+**Focus rings are an `outline`, not a `box-shadow`.** In your own styles, write
+`outline: var(--ring-width) solid var(--ring-accent); outline-offset: var(--ring-offset);`
+under `:focus-visible` — the `focus-ring` mixin below is library-internal and is
+not shipped (`mixins.scss` was removed in 0.7). Inside the library, use the mixin —
 `@include focus-ring;` or `@include focus-ring(var(--your-ring));` — which emits
 `outline: var(--ring-width) solid <colour>` plus `outline-offset:
 var(--ring-offset)`. Do **not** hand-roll `box-shadow: 0 0 0 var(--ring-width)

package/docs/typescript.md

@@ -6,4 +6,5 @@ Every prop and variant type is typed. If your editor shows no types:
 
 - Confirm `moduleResolution: "bundler"` (or `"node16"`) in your `tsconfig.json`.
 - Confirm your IDE's TS server is running.
-- The package's `types` field points at `./src/index.ts` — source distribution means the consumer's bundler compiles `.tsx`. Vite, Next.js, Webpack 5+ all support this; older configurations may need `transpilePackages: ['@eocrm/design-system']` (Next.js) or equivalent.
+- The package ships compiled ESM with `.d.ts` types (`types: ./dist/index.d.ts`); no `transpilePackages`, Sass or TSX loader config is needed.
+- If `tsc` rejects the side-effect `import '@eocrm/design-system/styles/global.css'` (TS2882), add `declare module '*.css';` to a `.d.ts` file — Vite's `vite/client` and Next's `next-env.d.ts` already declare it.

package/package.json

@@ -1,42 +1,34 @@
 {
   "name": "@eocrm/design-system",
-  "version": "0.6.24",
-  "description": "Design system for the EOCRM product — React 19 + SCSS modules + CSS custom properties.",
+  "version": "0.7.0",
+  "description": "Design system for the EOCRM product — React 19 + CSS custom properties.",
   "license": "Apache-2.0",
   "type": "module",
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "sideEffects": [
     "**/*.scss",
     "**/*.css"
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "default": "./src/index.ts"
+      "@eocrm/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
-    "./styles/global.scss": "./src/styles/global.scss",
-    "./styles/tokens.scss": "./src/styles/tokens.scss",
-    "./styles/reset.scss": "./src/styles/reset.scss",
-    "./styles/typography.scss": "./src/styles/typography.scss",
-    "./styles/mixins.scss": "./src/styles/mixins.scss",
+    "./styles/global.css": {
+      "@eocrm/source": "./src/styles/global.scss",
+      "default": "./dist/styles/global.css"
+    },
+    "./styles/tokens.css": "./dist/styles/tokens.css",
+    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "files": [
-    "src",
+    "dist",
     "AI-PRIMER.md",
-    "docs",
-    "!src/**/*.test.ts",
-    "!src/**/*.test.tsx",
-    "!src/**/*.test.js",
-    "!src/**/*.test.jsx",
-    "!src/**/*.spec.ts",
-    "!src/**/*.spec.tsx",
-    "!src/**/*.spec.js",
-    "!src/**/*.spec.jsx",
-    "!src/**/*.testutil.ts"
+    "docs"
   ],
   "publishConfig": {
     "access": "public"
@@ -50,10 +42,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@eocrm/design-tokens": "0.6.24",
     "@floating-ui/react-dom": "^2.1.8",
-    "@types/d3-scale": "^4.0.9",
-    "@types/d3-shape": "^3.2.0",
     "clsx": "^2.1.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
@@ -62,20 +51,29 @@
     "qrcode-generator": "^2.0.4"
   },
   "devDependencies": {
+    "@eocrm/design-tokens": "0.7.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.2.0",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^29.1.1",
     "postcss": "^8.5.25",
     "sass-embedded": "^1.100.0",
     "typescript": "^6.0.3",
+    "vite": "^8.3.5",
     "vitest": "^4.1.7"
   },
   "scripts": {
+    "prepack": "npm run build 1>&2",
     "typecheck": "tsc --noEmit",
+    "build": "vite build -c vite.lib.config.ts && tsc -p tsconfig.build.json && node scripts/build-styles.mjs && node scripts/fix-dts-specifiers.mjs",
     "test": "vitest run",
+    "size": "node scripts/size-guard.mjs",
+    "test:dist": "vitest run -c vitest.dist.config.ts",
     "test:watch": "vitest",
     "build:manifest": "node scripts/generate-manifest.mjs",
     "build:docs": "node scripts/generate-component-docs.mjs"

package/src/_meta/manifest.ts

@@ -1,294 +0,0 @@
-/**
- * Build-time helper that derives a dependency graph of every component
- * directory in `src/components/`. Output is committed as
- * `src/components.manifest.json` and consumed by:
- *
- * - the drift-detection Vitest test alongside this file
- * - the playground's `/components/dependencies` page
- * - (future) AI-PRIMER.md auto-generated architecture section
- *
- * The graph is computed from import statements — no per-component
- * metadata to maintain. A component is a "primitive" if it imports no
- * other components in this directory; "composition" otherwise.
- */
-
-import { readdirSync, readFileSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const COMPONENTS_DIR = join(__dirname, '..', 'components');
-
-export type ComponentTier = 'primitive' | 'composition';
-
-export interface ComponentManifestEntry {
-  /** `'primitive'` if no other library components are imported; `'composition'` otherwise. */
-  tier: ComponentTier;
-  /** Functional cluster — derived from `CLUSTERS` map below. `null` if not classified. */
-  cluster: string | null;
-  /** Sorted list of library components this one imports. Empty for primitives. */
-  composes: string[];
-  /** Sorted inverse — components that import this one. */
-  composedBy: string[];
-}
-
-export type ComponentManifest = Record<string, ComponentManifestEntry>;
-
-/**
- * Functional-cluster table. Mirrors the AI-PRIMER.md and AppShell sidebar
- * grouping. Update this when adding a component to keep the cluster
- * column accurate; the test alongside this file fails if a component is
- * unclassified.
- */
-const CLUSTERS: Record<string, string> = {
-  // Layout
-  Stack: 'Layout',
-  Cluster: 'Layout',
-  Constrain: 'Layout',
-  Indent: 'Layout',
-  AppLayout: 'Layout',
-  Divider: 'Layout',
-  Grid: 'Layout',
-  Split: 'Layout',
-  Sticky: 'Layout',
-  Masonry: 'Layout',
-  Card: 'Layout',
-  ScrollArea: 'Layout',
-  Page: 'Layout',
-  Screen: 'Layout',
-  PageHeader: 'Layout',
-
-  // Forms
-  Button: 'Forms',
-  SocialButton: 'Forms',
-  ButtonGroup: 'Forms',
-  Checkbox: 'Forms',
-  ColorPicker: 'Forms',
-  DatePicker: 'Forms',
-  DatePickers: 'Forms',
-  RelativeDateInput: 'Forms',
-  DateStrip: 'Forms',
-  SlotGrid: 'Forms',
-  DateRangePicker: 'Forms',
-  Field: 'Forms',
-  SettingRow: 'Forms',
-  FormRow: 'Forms',
-  FormSection: 'Forms',
-  FileUpload: 'Forms',
-  IconPicker: 'Forms',
-  ImageCrop: 'Forms',
-  Input: 'Forms',
-  Kanban: 'Forms',
-  LiquidEditor: 'Forms',
-  OtpInput: 'Forms',
-  PasswordInput: 'Forms',
-  PasswordStrengthMeter: 'Forms',
-  CurrencySelect: 'Forms',
-  MoneyInput: 'Forms',
-  PhoneInput: 'Forms',
-  Radio: 'Forms',
-  OptionsPicker: 'Forms',
-  EmojiPicker: 'Forms',
-  Select: 'Forms',
-  Slider: 'Forms',
-  Sortable: 'Forms',
-  SortableGroup: 'Forms',
-  CatalogPicker: 'Forms',
-  PillMenu: 'Forms',
-  Switch: 'Forms',
-  RichTextEditor: 'Forms',
-  Textarea: 'Forms',
-  TimeField: 'Forms',
-
-  // Display
-  Avatar: 'Display',
-  AgentAvatar: 'Display',
-  Image: 'Display',
-  QrCode: 'Display',
-  MediaTile: 'Display',
-  WidgetPreview: 'Display',
-  Badge: 'Display',
-  Dot: 'Display',
-  EntityChip: 'Display',
-  Timeline: 'Display',
-  StagePath: 'Display',
-  Thread: 'Display',
-  BrandIcon: 'Display',
-  Logo: 'Display',
-  DefinitionList: 'Display',
-  List: 'Display',
-  Calendar: 'Display',
-  CircularProgress: 'Display',
-  Code: 'Display',
-  CodeBlock: 'Display',
-  HighlightedText: 'Display',
-  CursorPagination: 'Display',
-  DashboardCanvas: 'Display',
-  DashboardWidget: 'Display',
-  StatGroup: 'Display',
-  Chart: 'Display',
-  FunnelChart: 'Display',
-  Sparkline: 'Display',
-  TreeView: 'Display',
-  DataTable: 'Display',
-  EmptyState: 'Display',
-  ErrorState: 'Display',
-  IconTile: 'Display',
-  FilterChip: 'Display',
-  FlowCanvas: 'Display',
-  Kbd: 'Display',
-  Pagination: 'Display',
-  PersonDisplay: 'Display',
-  Progress: 'Display',
-  Skeleton: 'Display',
-  Table: 'Display',
-  RichText: 'Display',
-  Text: 'Display',
-  Title: 'Display',
-
-  // Feedback
-  Alert: 'Feedback',
-  Banner: 'Feedback',
-  ChatBubble: 'Feedback',
-  ChatLauncher: 'Feedback',
-  Highlight: 'Feedback',
-  Toast: 'Feedback',
-
-  // Navigation
-  Accordion: 'Navigation',
-  Breadcrumb: 'Navigation',
-  Link: 'Navigation',
-  LinkCard: 'Navigation',
-  Rail: 'Navigation',
-  TableOfContents: 'Navigation',
-  Tabs: 'Navigation',
-  TopBar: 'Navigation',
-
-  // Overlays
-  ConfirmationPopover: 'Overlays',
-  Drawer: 'Overlays',
-  DropdownMenu: 'Overlays',
-  Lightbox: 'Overlays',
-  Modal: 'Overlays',
-  Popover: 'Overlays',
-  Tooltip: 'Overlays',
-  Tour: 'Overlays',
-
-  // Accessibility
-  VisuallyHidden: 'Accessibility',
-  LiveRegion: 'Accessibility',
-};
-
-// `(?:\.\./)+`, not a single `../`, since #509 — the other half of the flat-walk
-// bug. Once nested files are read, their imports are one level deeper, so
-// `from '../../RichTextEditor/…'` inside RichText/engine/ has to match too.
-// Widening the walk without widening this pattern still sees nothing.
-const FROM_PARENT_PATH = /from\s+['"](?:\.\.\/)+([A-Z][a-zA-Z0-9]+)(?:\/[^'"]*)?['"]/g;
-
-function listComponentDirs(): string[] {
-  return readdirSync(COMPONENTS_DIR, { withFileTypes: true })
-    .filter((entry) => entry.isDirectory())
-    .filter((entry) => !entry.name.startsWith('_'))
-    .map((entry) => entry.name)
-    .sort();
-}
-
-function collectSourceText(componentDir: string): string {
-  // Concatenate every non-test .tsx + .ts file UNDER the component dir so that
-  // sub-files (e.g. SVSquare.tsx inside ColorPicker/) contribute their imports
-  // to the parent component's dependency set.
-  //
-  // Recursive since #509. It said "every" and read one level, so nothing in a
-  // nested directory counted — RichText/engine/ holds 20 modules and none of
-  // them were ever parsed. That hid a real bidirectional dependency between
-  // RichText and RichTextEditor for as long as the acyclic gate has been green;
-  // the gate was not wrong, it was being fed half the source. Fixing the walk
-  // without first breaking that cycle turns the gate red.
-  const out: string[] = [];
-  const walk = (dir: string) => {
-    for (const entry of readdirSync(dir, { withFileTypes: true })) {
-      const path = join(dir, entry.name);
-      if (entry.isDirectory()) {
-        walk(path);
-      } else if (
-        (entry.name.endsWith('.tsx') || entry.name.endsWith('.ts')) &&
-        !entry.name.endsWith('.test.tsx') &&
-        !entry.name.endsWith('.test.ts')
-      ) {
-        out.push(readFileSync(path, 'utf-8'));
-      }
-    }
-  };
-  walk(componentDir);
-  return out.join('\n');
-}
-
-/**
- * The import-matching half of the walk, exposed so it can be asserted directly.
- *
- * The pattern has to accept more than one `../` (#509). Nothing in the tree
- * currently exercises that — the only nested directory, RichText/engine, had
- * its single upward import removed when the RichText <-> RichTextEditor cycle
- * was broken — so the manifest looks the same whether the pattern is right or
- * wrong. That is exactly the condition under which a fix rots.
- */
-export function collectImportsFrom(lines: string[]): string[] {
-  return extractParentImports(lines.join('\n'));
-}
-
-function extractParentImports(source: string): string[] {
-  const deps = new Set<string>();
-  for (const match of source.matchAll(FROM_PARENT_PATH)) {
-    deps.add(match[1]);
-  }
-  return [...deps];
-}
-
-/**
- * Build the full component manifest by walking every directory under
- * `src/components/` and parsing its source-file imports. Output is sorted
- * (component keys + composes / composedBy arrays) so the JSON is stable
- * across runs.
- */
-export function buildManifest(): ComponentManifest {
-  const names = listComponentDirs();
-  const knownComponents = new Set(names);
-  const manifest: ComponentManifest = {};
-
-  // First pass: populate `composes` for each component.
-  for (const name of names) {
-    const dir = join(COMPONENTS_DIR, name);
-    const src = collectSourceText(dir);
-    const imports = extractParentImports(src).filter((n) => knownComponents.has(n) && n !== name);
-    imports.sort();
-    manifest[name] = {
-      tier: imports.length === 0 ? 'primitive' : 'composition',
-      cluster: CLUSTERS[name] ?? null,
-      composes: imports,
-      composedBy: [],
-    };
-  }
-
-  // Second pass: invert the graph for `composedBy`.
-  for (const [name, entry] of Object.entries(manifest)) {
-    for (const dep of entry.composes) {
-      const target = manifest[dep];
-      if (target) {
-        target.composedBy.push(name);
-      }
-    }
-  }
-
-  // Sort composedBy lists for stable output.
-  for (const entry of Object.values(manifest)) {
-    entry.composedBy.sort();
-  }
-
-  // Return a key-sorted object so JSON.stringify gives deterministic output.
-  return Object.fromEntries(
-    Object.entries(manifest).sort(([a], [b]) => a.localeCompare(b)),
-  ) as ComponentManifest;
-}
-
-/** Path to the committed manifest JSON (relative to the design-system root). */
-export const MANIFEST_PATH = join(__dirname, '..', 'components.manifest.json');