@hirobius/design-system 0.16.0 → 0.18.0

package/README.md

@@ -1,20 +1,20 @@
 # Hirobius Design System
 
-A publishable React + TypeScript component library backed by a governed design-token pipeline, published to npm as `@hirobius/design-system`.
+[![CI](https://github.com/hirobius/hds/actions/workflows/ci.yml/badge.svg)](https://github.com/hirobius/hds/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/@hirobius/design-system)](https://www.npmjs.com/package/@hirobius/design-system) [![Storybook](https://img.shields.io/badge/Storybook-live-ff4785)](https://hirobius-design-system.vercel.app)
 
-<!--
-  PLACEHOLDER — ADRIAN TO WRITE (hds front-door PR).
-  If you want the README to mention the July–September 2026 pause, put one or
-  two sentences here in your own words, then delete this comment. Leaving the
-  comment in place publishes nothing. Do not restore the old status line this
-  PR removed: CI, release, and Chromatic triggers were restored in #204.
--->
+React + TypeScript component library on a governed design-token pipeline. Live Storybook: **<https://hirobius-design-system.vercel.app>**
+
+```bash
+pnpm add @hirobius/design-system
+```
+
+[![Buttons under the Brand and Theme dials: base and accent-lilac, light and dark](docs/images/storybook-brand-theme-dials.png)](https://hirobius-design-system.vercel.app)
 
 <!-- auto:start:front-door-counts -->
 
 - **109** public component modules, exported from `src/index.ts`
-- **359** DTCG tokens in `hirobius.tokens.json`, compiled to CSS variables and TypeScript constants
-- **454** Storybook stories in **115** story files, reviewed visually in Chromatic
+- **379** DTCG tokens in `hirobius.tokens.json`, compiled to CSS variables and TypeScript constants
+- **455** Storybook stories in **115** story files
 
 <!-- auto:end:front-door-counts -->
 
@@ -23,6 +23,22 @@ A publishable React + TypeScript component library backed by a governed design-t
 
 The counts are generated from source by `pnpm readme:counts`, which `pnpm tokens` also runs. `scripts/__tests__/front-door.test.mjs` fails if this README claims more than the source has.
 
+## In use
+
+<!-- auto:start:consumer-usage -->
+
+The Ops dashboard (`hirobius/ops`) is the only verified component-level consumer: **35** of its source files import from `@hirobius/design-system`, using **25** distinct components. The two screenshots below are Ops pages rendered from its `main` (measured at commit `01fce2f`).
+
+Other consumers: the split into product apps and token-level sites is not yet confirmed, so it is not stated here.
+
+[![Ops library page](docs/images/ops-library.png)](docs/images/ops-library.png)
+
+[![Ops fleet audit page](docs/images/ops-fleet-audit.png)](docs/images/ops-fleet-audit.png)
+
+<!-- auto:end:consumer-usage -->
+
+The numbers come from `pnpm consumer:usage --root <ops checkout>`, which measures that checkout and records its commit in `docs/data/consumer-usage.json`; without a root it reuses the committed snapshot. `scripts/__tests__/consumer-usage.test.mjs` fails if this section drifts from that snapshot. The product-app and token-level-site split is a declared figure in that file and stays out of this section until `consumersConfirmed` there is set to true.
+
 ## Using the published package
 
 Installing HDS in another project? It ships to the **public npm registry** as
@@ -125,7 +141,7 @@ Core verification commands:
 ```bash
 pnpm typecheck
 pnpm lint
-pnpm exec vitest run   # unit + contract tests, as the pre-push hook and CI run them
+pnpm test              # pretest gates + unit + contract tests, exactly as the pre-push hook and CI run them
 pnpm tokens:verify
 pnpm check:size
 pnpm build-storybook
@@ -147,62 +163,18 @@ Source-of-truth files:
 - `DESIGN.md` — lean visual spec for agents and engineers.
 - `DESIGN-HANDOFF.md` — verbose visual mirror for handoff and review.
 
-<!-- design-links:start (generated by `pnpm figma:links`; edit the @figma JSDoc tag, not this section) -->
-
-## Design ↔ Code links
-
-Each component has one Figma source: `figmaUrl` in `public/hds-manifest.json`, which `pnpm manifest:generate` sets from the `@figma` tag in the component JSDoc. `pnpm figma:links` keeps this table current and Storybook reads the same field (`parameters.design`). The Figma-side links (dev resources and component descriptions) exist only once someone runs their steps in [`figma/README.md`](figma/README.md).
-
-**44 of 140** components link a Figma node.
-
-| Component          | Figma node                                                                                         | Story                                                                      | Source                                                            |
-| ------------------ | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------- |
-| `Alert`            | [33:34](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34)   | [alert.stories.tsx](src/stories/alert.stories.tsx)                         | [alert.tsx](src/app/components/alert.tsx)                         |
-| `Avatar`           | [34:18](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18)   | [avatar.stories.tsx](src/stories/avatar.stories.tsx)                       | [avatar.tsx](src/app/components/avatar.tsx)                       |
-| `Badge`            | [31:15](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15)   | [badge.stories.tsx](src/stories/badge.stories.tsx)                         | [badge.tsx](src/app/components/badge.tsx)                         |
-| `Breadcrumb`       | [86:159](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159) | [breadcrumb.stories.tsx](src/stories/breadcrumb.stories.tsx)               | [breadcrumb.tsx](src/app/components/breadcrumb.tsx)               |
-| `Button`           | [28:138](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138) | [button.stories.tsx](src/stories/button.stories.tsx)                       | [button.tsx](src/app/components/button.tsx)                       |
-| `Callout`          | [88:85](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85)   | [callout.stories.tsx](src/stories/callout.stories.tsx)                     | [callout.tsx](src/app/components/callout.tsx)                     |
-| `Card`             | [39:11](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11)   | [card.stories.tsx](src/stories/card.stories.tsx)                           | [card.tsx](src/app/components/card.tsx)                           |
-| `CodeBlock`        | [89:154](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154) | [code-block.stories.tsx](src/stories/code-block.stories.tsx)               | [code-block.tsx](src/app/components/code-block.tsx)               |
-| `Combobox`         | [82:237](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237) | [combobox.stories.tsx](src/stories/combobox.stories.tsx)                   | [combobox.tsx](src/app/components/combobox.tsx)                   |
-| `Dialog`           | [93:27](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27)   | [dialog.stories.tsx](src/stories/dialog.stories.tsx)                       | [dialog.tsx](src/app/components/dialog.tsx)                       |
-| `Disclosure`       | [88:453](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453) | [disclosure.stories.tsx](src/stories/disclosure.stories.tsx)               | [disclosure.tsx](src/app/components/disclosure.tsx)               |
-| `Divider`          | [89:26](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26)   | [divider.stories.tsx](src/stories/divider.stories.tsx)                     | [divider.tsx](src/app/components/divider.tsx)                     |
-| `EmptyState`       | [88:352](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352) | [empty-state.stories.tsx](src/stories/empty-state.stories.tsx)             | [empty-state.tsx](src/app/components/empty-state.tsx)             |
-| `Field`            | [85:81](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81)   | [field.stories.tsx](src/stories/field.stories.tsx)                         | [field.tsx](src/app/components/field.tsx)                         |
-| `Form`             | [85:94](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94)   | [form.stories.tsx](src/stories/form.stories.tsx)                           | [form.tsx](src/app/components/form.tsx)                           |
-| `HdsCheckbox`      | [35:29](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29)   | [checkbox.stories.tsx](src/stories/checkbox.stories.tsx)                   | [checkbox.tsx](src/app/components/checkbox.tsx)                   |
-| `HdsRadio`         | [36:17](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17)   | [radio.stories.tsx](src/stories/radio.stories.tsx)                         | [radio.tsx](src/app/components/radio.tsx)                         |
-| `HdsSelect`        | [82:49](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49)   | [select.stories.tsx](src/stories/select.stories.tsx)                       | [select.tsx](src/app/components/select.tsx)                       |
-| `HdsSlider`        | [82:265](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265) | [slider.stories.tsx](src/stories/slider.stories.tsx)                       | [slider.tsx](src/app/components/slider.tsx)                       |
-| `HdsToggle`        | [37:19](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19)   | [toggle.stories.tsx](src/stories/toggle.stories.tsx)                       | [toggle.tsx](src/app/components/toggle.tsx)                       |
-| `IconButton`       | [40:39](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39)   | [icon-button.stories.tsx](src/stories/icon-button.stories.tsx)             | [icon-button.tsx](src/app/components/icon-button.tsx)             |
-| `InlineCode`       | [89:155](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155) | [inline-code.stories.tsx](src/stories/inline-code.stories.tsx)             | [inline-code.tsx](src/app/components/inline-code.tsx)             |
-| `InlineLink`       | [89:161](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161) | [inline-link.stories.tsx](src/stories/inline-link.stories.tsx)             | [inline-link.tsx](src/app/components/inline-link.tsx)             |
-| `Input`            | [38:20](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20)   | [input.stories.tsx](src/stories/input.stories.tsx)                         | [input.tsx](src/app/components/input.tsx)                         |
-| `Menu`             | [93:59](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59)   | [menu.stories.tsx](src/stories/menu.stories.tsx)                           | [menu.tsx](src/app/components/menu.tsx)                           |
-| `NavGroup`         | [86:304](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304) | [nav-group.stories.tsx](src/stories/nav-group.stories.tsx)                 | [nav-group.tsx](src/app/components/nav-group.tsx)                 |
-| `NavItem`          | [86:258](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258) | [nav-item.stories.tsx](src/stories/nav-item.stories.tsx)                   | [nav-item.tsx](src/app/components/nav-item.tsx)                   |
-| `Pagination`       | [86:194](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194) | [pagination.stories.tsx](src/stories/pagination.stories.tsx)               | [pagination.tsx](src/app/components/pagination.tsx)               |
-| `Popover`          | [93:32](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32)   | [popover.stories.tsx](src/stories/popover.stories.tsx)                     | [popover.tsx](src/app/components/popover.tsx)                     |
-| `Progress`         | [88:91](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91)   | [progress.stories.tsx](src/stories/progress.stories.tsx)                   | [progress.tsx](src/app/components/progress.tsx)                   |
-| `SegmentedControl` | [82:334](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334) | [segmented-control.stories.tsx](src/stories/segmented-control.stories.tsx) | [segmented-control.tsx](src/app/components/segmented-control.tsx) |
-| `SideNav`          | [86:332](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332) | [side-nav.stories.tsx](src/stories/side-nav.stories.tsx)                   | [side-nav.tsx](src/app/components/side-nav.tsx)                   |
-| `Skeleton`         | [88:95](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95)   | [skeleton.stories.tsx](src/stories/skeleton.stories.tsx)                   | [skeleton.tsx](src/app/components/skeleton.tsx)                   |
-| `Spinner`          | [88:106](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106) | [spinner.stories.tsx](src/stories/spinner.stories.tsx)                     | [spinner.tsx](src/app/components/spinner.tsx)                     |
-| `Stat`             | [88:247](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247) | [stat.stories.tsx](src/stories/stat.stories.tsx)                           | [stat.tsx](src/app/components/stat.tsx)                           |
-| `StatusListItem`   | [88:350](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350) | [status-list-item.stories.tsx](src/stories/status-list-item.stories.tsx)   | [status-list-item.tsx](src/app/components/status-list-item.tsx)   |
-| `StatusTile`       | [88:292](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292) | [status-tile.stories.tsx](src/stories/status-tile.stories.tsx)             | [status-tile.tsx](src/app/components/status-tile.tsx)             |
-| `StepperField`     | [82:425](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425) | [stepper-field.stories.tsx](src/stories/stepper-field.stories.tsx)         | [stepper-field.tsx](src/app/components/stepper-field.tsx)         |
-| `Surface`          | [89:27](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27)   | [surface.stories.tsx](src/stories/surface.stories.tsx)                     | [surface.tsx](src/app/components/surface.tsx)                     |
-| `Table`            | [89:300](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300) | [table.stories.tsx](src/stories/table.stories.tsx)                         | [table.tsx](src/app/components/table.tsx)                         |
-| `Tabs`             | [86:89](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89)   | [tabs.stories.tsx](src/stories/tabs.stories.tsx)                           | [tabs.tsx](src/app/components/tabs.tsx)                           |
-| `Tag`              | [32:11](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11)   | [tag.stories.tsx](src/stories/tag.stories.tsx)                             | [tag.tsx](src/app/components/tag.tsx)                             |
-| `Textarea`         | [85:14](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14)   | [textarea.stories.tsx](src/stories/textarea.stories.tsx)                   | [textarea.tsx](src/app/components/textarea.tsx)                   |
-| `ToastProvider`    | [93:367](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367) | [toast.stories.tsx](src/stories/toast.stories.tsx)                         | [toast.tsx](src/app/components/toast.tsx)                         |
-
-<!-- design-links:end -->
+Component-by-component Figma links live in [docs/DESIGN_LINKS.md](docs/DESIGN_LINKS.md), generated by `pnpm figma:links`.
+
+## Accessibility
+
+What CI and the hooks check today, and nothing more:
+
+- **Contrast:** `scripts/check-contrast.mjs` enforces WCAG AA contrast on the core token pairs, in light and dark. It runs in CI and the pre-commit hook.
+- **Lint:** `jsx-a11y` rules run inside ESLint with zero warnings allowed.
+- **Focus:** `scripts/check-focus-states.mjs` (`pnpm check:focus`) audits focus styles on interactive components. It runs in the agent gate and on demand, not in the main CI workflow, and currently reports 1 violation (`src/app/components/asset-img.tsx`).
+- **Storybook:** the `addon-a11y` panel shows axe results for each story while you review it. It reports; it does not gate.
+
+There is no automated screen-reader testing.
 
 ## Visual direction: Editorial Enterprise
 
@@ -218,9 +190,9 @@ The governing direction is "Editorial Enterprise" — enterprise rigor with edit
 The gates are deterministic and need no browser or live site:
 
 - **pre-commit** (`.husky/pre-commit`): secrets scan, Prettier on staged files, typecheck, zero-warning ESLint, and token validity and contrast.
-- **pre-push** (`.husky/pre-push`): Vitest unit and contract tests, then the consumer smoke build (library build, subpath resolution, publint, consumer typecheck).
+- **pre-push** (`.husky/pre-push`): `pnpm test` (the pretest gates, then Vitest unit and contract tests), then the consumer smoke build (library build, subpath resolution, publint, consumer typecheck).
 - **CI** (`.github/workflows/ci.yml`): typecheck, zero-warning ESLint, token validity and contrast, Vitest, and the consumer smoke build, plus bundle budgets and a Storybook build.
-- **Visual review:** Storybook is the visual verification surface, and Chromatic (`.github/workflows/chromatic.yml`) runs it on pull requests. The earlier browser test suite drove a docs site that no longer exists; it is archived in `tests-archive/`.
+- **Visual review:** Storybook is the visual verification surface, reviewed by hand. The earlier browser test suite drove a docs site that no longer exists and was removed (ADR-018).
 
 `CLAUDE.md` is the operating contract for agents working in this repo.
 

package/codemods/patterns-subpath.mjs

@@ -0,0 +1,254 @@
+#!/usr/bin/env node
+/**
+ * patterns-subpath codemod (hds#316, follows hds#254)
+ *
+ * Rewrites `import { Page } from '@hirobius/design-system'` to
+ * `import { Page } from '@hirobius/design-system/patterns'` for every
+ * pattern-tier component whose root re-export is deprecated. Other named
+ * imports stay on the root. Aliases, `type` modifiers and multi-line layout
+ * are preserved; an existing `/patterns` import of the same kind is extended
+ * instead of duplicated.
+ *
+ *   node codemods/patterns-subpath.mjs [--root <dir>] [--check] [--dry-run]
+ *
+ *   --root <dir>  directory to scan (default: current directory)
+ *   --check       write nothing; exit 1 when a rewrite is needed or a root namespace
+ *                 import (`import * as X`, `export *`) needs a manual look
+ *   --dry-run     write nothing; print each import line before (-) and after (+), exit 0
+ *
+ * The name list is codemods/patterns-subpath.names.json, generated from
+ * src/index.ts by `pnpm codemod:names`.
+ */
+import { readFileSync, readdirSync, realpathSync, statSync, writeFileSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT_PKG = '@hirobius/design-system';
+const SUBPATH = `${ROOT_PKG}/patterns`;
+const HERE = dirname(fileURLToPath(import.meta.url));
+const EXTS = new Set(['.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.mts', '.cts']);
+const SKIP_DIRS = new Set([
+  'node_modules',
+  'dist',
+  'build',
+  '.git',
+  '.next',
+  '.vercel',
+  'coverage',
+  'storybook-static',
+]);
+
+export function loadPatternNames() {
+  const { names } = JSON.parse(readFileSync(join(HERE, 'patterns-subpath.names.json'), 'utf8'));
+  return new Set(names);
+}
+
+const esc = (pkg) => pkg.replace(/[/@]/g, '\\$&');
+// indent, import|export, type?, default?, { body }, quote, semicolon
+const namedRe = (pkg) =>
+  new RegExp(
+    `^([ \\t]*)(import|export)(\\s+type)?\\s*(?:([\\w$]+)\\s*,\\s*)?\\{([^}]*)\\}\\s*from\\s*(['"])${esc(pkg)}\\6(;?)`,
+    'gm',
+  );
+// `import * as X`, `import D, * as X`, `export * from`, `export * as X from` on the root
+const namespaceRe = new RegExp(
+  `^[ \\t]*(?:import\\s+(?:[\\w$]+\\s*,\\s*)?\\*\\s*as\\s+[\\w$]+|export\\s+\\*(?:\\s*as\\s+[\\w$]+)?)\\s*from\\s*['"]${esc(ROOT_PKG)}['"]`,
+  'gm',
+);
+
+const specName = (spec) =>
+  spec
+    .replace(/^type\s+/, '')
+    .split(/\s+as\s+/)[0]
+    .trim();
+const splitSpecs = (body) =>
+  body
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+
+/** Namespace imports and star re-exports of the root: names are not visible, so no rewrite. */
+export function findUnrewritable(source) {
+  return [...source.matchAll(namespaceRe)].map((m) => m[0].trim());
+}
+
+/** Renders one import/export statement. */
+function render({ indent, kw, typeKw, def, list, pkg, multiline, quote, semi }) {
+  const head = `${indent}${kw}${typeKw ? ' type' : ''} `;
+  const tail = ` from ${quote}${pkg}${quote}${semi}`;
+  if (list.length === 0) return `${head}${def}${tail}`;
+  const d = def ? `${def}, ` : '';
+  if (multiline)
+    return `${head}${d}{\n${list.map((s) => `${indent}  ${s},`).join('\n')}\n${indent}}${tail}`;
+  return `${head}${d}{ ${list.join(', ')} }${tail}`;
+}
+
+/**
+ * Pure transform of one file's source.
+ * @returns {{ source: string, changed: boolean, sites: number, moved: string[],
+ *   edits: {before: string, after: string}[] }}
+ */
+export function transformSource(source, names) {
+  const moved = [];
+  const edits = [];
+  const isType = (m) => !!m[3];
+  const parse = (m) => ({
+    indent: m[1],
+    kw: m[2],
+    typeKw: m[3],
+    def: m[4],
+    body: m[5],
+    quote: m[6],
+    semi: m[7],
+  });
+
+  // An existing `import { … } from '/patterns'` of each kind absorbs moved names.
+  const targets = {};
+  for (const m of source.matchAll(namedRe(SUBPATH))) {
+    if (m[2] !== 'import' || m[4]) continue;
+    targets[isType(m) ? 'type' : 'value'] ??= { m, add: [] };
+  }
+
+  const replacements = [];
+  for (const m of source.matchAll(namedRe(ROOT_PKG))) {
+    const p = parse(m);
+    const specs = splitSpecs(p.body);
+    const go = specs.filter((s) => names.has(specName(s)));
+    if (go.length === 0) continue;
+    moved.push(...go.map(specName));
+    const keep = specs.filter((s) => !go.includes(s));
+    const multiline = p.body.includes('\n');
+    const lines = [];
+    if (keep.length > 0 || p.def)
+      lines.push(render({ ...p, list: keep, pkg: ROOT_PKG, multiline }));
+    const target = p.kw === 'import' && targets[p.typeKw ? 'type' : 'value'];
+    if (target) target.add.push(...go);
+    else lines.push(render({ ...p, def: undefined, list: go, pkg: SUBPATH, multiline }));
+    replacements.push({ start: m.index, end: m.index + m[0].length, before: m[0], lines });
+  }
+
+  if (replacements.length === 0) return { source, changed: false, sites: 0, moved: [], edits: [] };
+
+  const sites = replacements.length;
+  for (const { m, add } of Object.values(targets)) {
+    if (add.length === 0) continue;
+    const p = parse(m);
+    const have = splitSpecs(p.body);
+    const merged = [...have, ...add.filter((n) => !have.includes(n))];
+    replacements.push({
+      start: m.index,
+      end: m.index + m[0].length,
+      before: m[0],
+      lines: [
+        render({
+          ...p,
+          def: undefined,
+          list: merged,
+          pkg: SUBPATH,
+          multiline: p.body.includes('\n'),
+        }),
+      ],
+    });
+  }
+
+  let out = source;
+  for (const r of replacements.sort((x, y) => y.start - x.start)) {
+    const after = r.lines.join('\n');
+    // A statement folded entirely into an existing import leaves nothing behind, not a blank line.
+    const end = after === '' && out[r.end] === '\n' ? r.end + 1 : r.end;
+    out = out.slice(0, r.start) + after + out.slice(end);
+    edits.unshift({ before: r.before, after });
+  }
+  return { source: out, changed: out !== source, sites, moved, edits };
+}
+
+function* walk(dir) {
+  for (const entry of readdirSync(dir)) {
+    if (SKIP_DIRS.has(entry)) continue;
+    const full = join(dir, entry);
+    const st = statSync(full);
+    if (st.isDirectory()) yield* walk(full);
+    else if (EXTS.has(full.slice(full.lastIndexOf('.')))) yield full;
+  }
+}
+
+/** Scan a directory. Writes only when `write` is true. */
+export function runCodemod({ root, write = false, names = loadPatternNames() }) {
+  const files = [];
+  const manual = [];
+  const moved = new Set();
+  let sites = 0;
+  for (const file of walk(root)) {
+    const src = readFileSync(file, 'utf8');
+    if (!src.includes(ROOT_PKG)) continue;
+    for (const stmt of findUnrewritable(src)) manual.push({ file: relative(root, file), stmt });
+    const r = transformSource(src, names);
+    if (!r.changed) continue;
+    files.push({ file: relative(root, file), sites: r.sites, moved: r.moved, edits: r.edits });
+    r.moved.forEach((n) => moved.add(n));
+    sites += r.sites;
+    if (write) writeFileSync(file, r.source);
+  }
+  return { files, sites, manual, names: [...moved].sort() };
+}
+
+function main(argv) {
+  const args = { root: process.cwd(), check: false, dryRun: false };
+  for (let i = 0; i < argv.length; i++) {
+    if (argv[i] === '--root') args.root = resolve(argv[++i] ?? '');
+    else if (argv[i] === '--check') args.check = true;
+    else if (argv[i] === '--dry-run') args.dryRun = true;
+    else {
+      console.error(
+        `unknown argument: ${argv[i]}\nusage: patterns-subpath [--root <dir>] [--check] [--dry-run]`,
+      );
+      return 2;
+    }
+  }
+  const write = !args.check && !args.dryRun;
+  const res = runCodemod({ root: args.root, write });
+  const summary = `${res.files.length} files, ${res.sites} import sites, ${res.names.length} names (${res.names.join(', ') || 'none'})`;
+  const manualLines = res.manual.map(
+    (m) => `  ${m.file}: ${m.stmt} (namespace import: move pattern names to '${SUBPATH}' by hand)`,
+  );
+  if (args.check) {
+    if (res.sites > 0 || res.manual.length > 0) {
+      console.error(`patterns-subpath: rewrite needed: ${summary}`);
+      for (const f of res.files) console.error(`  ${f.file}: ${f.moved.join(', ')}`);
+      for (const l of manualLines) console.error(l);
+      return 1;
+    }
+    console.log('patterns-subpath: nothing to rewrite');
+    return 0;
+  }
+  console.log(`patterns-subpath: ${write ? 'rewrote' : 'would rewrite'} ${summary}`);
+  for (const f of res.files) {
+    console.log(`  ${f.file}: ${f.moved.join(', ')}`);
+    if (args.dryRun)
+      for (const e of f.edits) {
+        for (const l of e.before.split('\n')) console.log(`- ${l}`);
+        for (const l of e.after.split('\n')) console.log(`+ ${l}`);
+      }
+  }
+  if (res.manual.length > 0) {
+    console.warn('patterns-subpath: cannot rewrite these, do them by hand:');
+    for (const l of manualLines) console.warn(l);
+  }
+  return 0;
+}
+
+// Compare real paths: npm/yarn link the bin and pnpm links the package directory, so
+// argv[1] is a symlink while import.meta.url is already resolved.
+const isEntry = (() => {
+  try {
+    return (
+      !!process.argv[1] &&
+      realpathSync(process.argv[1]) === realpathSync(fileURLToPath(import.meta.url))
+    );
+  } catch {
+    return false;
+  }
+})();
+if (isEntry) {
+  process.exit(main(process.argv.slice(2)));
+}

package/codemods/patterns-subpath.names.json

@@ -0,0 +1,26 @@
+{
+  "subpath": "@hirobius/design-system/patterns",
+  "names": [
+    "ActivityFeed",
+    "AppShell",
+    "AssetImg",
+    "Calendar",
+    "Carousel",
+    "CodeBlock",
+    "CommandPalette",
+    "DocLinkCard",
+    "ErrorPattern",
+    "FileInput",
+    "Form",
+    "Lightbox",
+    "NavItem",
+    "OverflowList",
+    "Page",
+    "Reveal",
+    "SideNav",
+    "Stepper",
+    "Toolbar",
+    "TopNav",
+    "TreeList"
+  ]
+}

package/dist/chunks/LanguageContext-CH_bwzCq.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as c, createContext as s, forwardRef as p, useState as v, useEffect as w, useCallback as u } from "react";
+const l = s(null);
+function E({ state: e, children: t }) {
+  return /* @__PURE__ */ r(l.Provider, { value: e, children: t });
+}
+function S() {
+  return c(l);
+}
+const x = p(
+  function({ to: t, children: n, ...i }, a) {
+    return /* @__PURE__ */ r("a", { ref: a, href: t, ...i, children: n });
+  }
+), d = s(null);
+function A({ adapter: e, children: t }) {
+  return /* @__PURE__ */ r(d.Provider, { value: e, children: t });
+}
+function P() {
+  const e = c(d);
+  return e || {
+    navigate: (t) => {
+      typeof window < "u" && window.location.assign(t);
+    },
+    currentPath: typeof window < "u" ? window.location.pathname : "/",
+    LinkComponent: x
+  };
+}
+const g = {
+  en: {
+    language: "en",
+    dir: "ltr",
+    label: "English",
+    nativeLabel: "English"
+  }
+}, f = s({
+  language: "en",
+  direction: "ltr",
+  isRtl: !1,
+  setLanguage: () => {
+  },
+  setDirection: () => {
+  },
+  toggleDirection: () => {
+  },
+  options: g
+});
+function b() {
+  try {
+    const e = localStorage.getItem("hds-direction");
+    if (e === "ltr" || e === "rtl") return e;
+  } catch {
+  }
+  return "ltr";
+}
+function R({ children: e }) {
+  const [t, n] = v(b), i = "en", a = t === "rtl";
+  w(() => {
+    try {
+      localStorage.setItem("hds-direction", t);
+    } catch {
+    }
+    document.documentElement.setAttribute("lang", "en"), document.documentElement.setAttribute("data-language", "en"), document.documentElement.setAttribute("dir", t), document.documentElement.setAttribute("data-reading-direction", t);
+  }, [t]);
+  const m = u((o) => {
+  }, []), L = u((o) => {
+    n(o);
+  }, []), h = u(() => {
+    n((o) => o === "ltr" ? "rtl" : "ltr");
+  }, []);
+  return /* @__PURE__ */ r(f.Provider, { value: { language: i, direction: t, isRtl: a, setLanguage: m, setDirection: L, toggleDirection: h, options: g }, children: e });
+}
+function H() {
+  return c(f);
+}
+export {
+  E as F,
+  A as H,
+  R as L,
+  P as a,
+  H as b,
+  S as u
+};

package/dist/chunks/TokenDisplayContext-evZi_214.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as r } from "react/jsx-runtime";
+import { useState as i, useContext as a, createContext as u } from "react";
+const o = u(void 0);
+function c({ children: s }) {
+  const [t, e] = i(!1);
+  return /* @__PURE__ */ r(o.Provider, { value: { showCss: t, setShowCss: e, toggleCss: () => e((n) => !n) }, children: s });
+}
+function f() {
+  const s = a(o);
+  return s || { showCss: !1, setShowCss: () => {
+  }, toggleCss: () => {
+  } };
+}
+export {
+  c as T,
+  f as u
+};