@hirobius/design-system 0.23.2 → 0.24.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,7 +10,7 @@ Canonical primitives, cheapest-first (CSS before JS, JS before an opt-in depende
10
10
  2. `Pin` (`position: sticky`) for a pinned scroll scene — the dependency-free basis for the "tall section + sticky child" pattern (GSAP's `pin: true`, done with zero JS). Give the pinned element a TALLER scrolling parent (e.g. `height: 300vh`) so it has room to travel; `top` is a CSS length offset, not a spacing token.
11
11
  3. `useScrollProgress` (from `@hirobius/design-system/scroll`) only when the 0→1 scroll value is needed in React — cross-element choreography, canvas/WebGL, or a Motion (`motion/react`) `useTransform` binding that CSS `animation-timeline` cannot express. Thin, SSR-guarded wrapper over Motion `useScroll`; adds no new dependency.
12
12
  4. `SmoothScroll` (from `@hirobius/design-system/scroll`, `lenis` as an OPTIONAL peer dep) only for opt-in momentum ("inertia") scrolling, mounted once at the app/site root. Never imported from the main barrel — consumers who skip it pay nothing. Reduced-motion-first: Lenis is not instantiated when the user prefers reduced motion, unless `ignoreReducedMotion` is set for a deliberate art-directed exception.
13
- 5. Do not adopt GSAP/ScrollTrigger, and do not wire Lenis directly outside `SmoothScroll`, inside the core library — the CSS + Motion stack above covers reveal/pin/scrub without new dependencies. Bespoke GSAP/Lenis/WebGL scenes stay app-level/downstream (marketing sites, the clients factory), composed from these primitives (ADR-021, #116).
13
+ 5. Do not adopt GSAP/ScrollTrigger, and do not wire Lenis directly outside `SmoothScroll`, inside the core library — the CSS + Motion stack above covers reveal/pin/scrub without new dependencies. Bespoke GSAP/Lenis/WebGL scenes stay app-level/downstream (marketing sites, the clients factory), composed from these primitives.
14
14
 
15
15
  Negative rules:
16
16
 
@@ -19,4 +19,4 @@ Negative rules:
19
19
  - No GSAP/ScrollTrigger or bespoke Lenis wiring inside `@hirobius/design-system` — those stay app-level/downstream, composed from `Reveal`/`Pin`/`useScrollProgress`/`SmoothScroll`.
20
20
  - Every scroll effect must degrade to fully visible/static content — never gate content visibility behind `animation-timeline` support or a scroll listener with no fallback.
21
21
 
22
- Reference: `src/app/components/reveal.tsx`, `src/app/components/pin.tsx`, `src/scroll/` (`use-scroll-progress.ts`, `smooth-scroll.tsx`), ADR-021, and the Reveal pattern page on the docs site (`/docs/patterns/reveal`) for golden-path examples.
22
+ Reference: `src/app/components/reveal.tsx`, `src/app/components/pin.tsx`, `src/scroll/` (`use-scroll-progress.ts`, `smooth-scroll.tsx`), and the Reveal pattern page on the docs site (`/docs/patterns/reveal`) for golden-path examples.
@@ -1,6 +1,6 @@
1
1
  # Hirobius Design System
2
2
 
3
- Generated: 2026-10-11T06:38:18.383Z
3
+ Generated: 2026-10-11T21:10:01.376Z
4
4
  Primary sources: `public/hds-manifest.json`, `src/app/data/component-api.json`, `hirobius.tokens.json`
5
5
 
6
6
  ## Agents Using The Package: Start Here
@@ -82,15 +82,6 @@ One answer per need. Use the components after the arrow; what follows "Not:" is
82
82
  - Docs pipeline: `public/hds-manifest.json` + `src/app/data/component-api.json` -> reflective docs pages
83
83
  - AI entrypoint: read `public/llms.txt` before editing code
84
84
 
85
- ## Phase Snapshot
86
-
87
- - foundation. Foundations - 63% - Token architecture, CSS pipeline, accessibility, and primitive scales.
88
- - Criteria: done: W3C DTCG three-tier token architecture; done: CSS variable pipeline + token verify; partial: Primitive scales complete (color, type, space); todo: Token audit clean
89
- - components. Components - 75% - Accessible React UI built from foundations and mapped toward Figma parity.
90
- - Criteria: done: Component inventory with typed props; done: Action system architecture (buttons, links, groups); done: Prop tables and API doc coverage; todo: Figma parity mapping
91
- - infrastructure-operations. Architecture - 55% - System delivery, Figma sync, automation, quality gates, and operational hygiene.
92
- - Criteria: done: System manifest + llms.txt AI context; done: Release gate + full audit gate; done: Documentation automation (AST pipeline, LLMS sync); partial: Payload sweep + orphan cleanup; partial: Motion system foundations; todo: Figma library generated from tokens; todo: Code Connect CI + reverse sync; partial: AST gatekeeper + token schema validation; partial: A11y CI + visual regression pipeline; partial: Operational feedback loop + AI retrospective
93
-
94
85
  ## Component Inventory (Source Of Truth)
95
86
 
96
87
  This file intentionally does not embed the full component list to avoid duplication and excess context.
@@ -107,7 +98,7 @@ This file intentionally does not embed prop tables or long-form API docs.
107
98
 
108
99
  ## Core set
109
100
 
110
- The 43 components of the ratified core set (hds#254, ADR-031): brand-neutral, composable, imported from the package root. Build a screen from these first. Each has `core: true` in `public/hds-manifest.json` and is marked `[core]` under "Which one when". Composed pattern modules (page shells, forms, code blocks, page sections) are imported from `@hirobius/design-system/patterns`.
101
+ The 43 components of the ratified core set: brand-neutral, composable, imported from the package root. Build a screen from these first. Each has `core: true` in `public/hds-manifest.json` and is marked `[core]` under "Which one when". Composed pattern modules (page shells, forms, code blocks, page sections) are imported from `@hirobius/design-system/patterns`.
111
102
 
112
103
  - Button (Actions)
113
104
  - Avatar (Display)
@@ -265,7 +256,7 @@ Canonical primitives, cheapest-first (CSS before JS, JS before an opt-in depende
265
256
  2. `Pin` (`position: sticky`) for a pinned scroll scene — the dependency-free basis for the "tall section + sticky child" pattern (GSAP's `pin: true`, done with zero JS). Give the pinned element a TALLER scrolling parent (e.g. `height: 300vh`) so it has room to travel; `top` is a CSS length offset, not a spacing token.
266
257
  3. `useScrollProgress` (from `@hirobius/design-system/scroll`) only when the 0→1 scroll value is needed in React — cross-element choreography, canvas/WebGL, or a Motion (`motion/react`) `useTransform` binding that CSS `animation-timeline` cannot express. Thin, SSR-guarded wrapper over Motion `useScroll`; adds no new dependency.
267
258
  4. `SmoothScroll` (from `@hirobius/design-system/scroll`, `lenis` as an OPTIONAL peer dep) only for opt-in momentum ("inertia") scrolling, mounted once at the app/site root. Never imported from the main barrel — consumers who skip it pay nothing. Reduced-motion-first: Lenis is not instantiated when the user prefers reduced motion, unless `ignoreReducedMotion` is set for a deliberate art-directed exception.
268
- 5. Do not adopt GSAP/ScrollTrigger, and do not wire Lenis directly outside `SmoothScroll`, inside the core library — the CSS + Motion stack above covers reveal/pin/scrub without new dependencies. Bespoke GSAP/Lenis/WebGL scenes stay app-level/downstream (marketing sites, the clients factory), composed from these primitives (ADR-021, #116).
259
+ 5. Do not adopt GSAP/ScrollTrigger, and do not wire Lenis directly outside `SmoothScroll`, inside the core library — the CSS + Motion stack above covers reveal/pin/scrub without new dependencies. Bespoke GSAP/Lenis/WebGL scenes stay app-level/downstream (marketing sites, the clients factory), composed from these primitives.
269
260
 
270
261
  Negative rules:
271
262
 
@@ -274,7 +265,7 @@ Negative rules:
274
265
  - No GSAP/ScrollTrigger or bespoke Lenis wiring inside `@hirobius/design-system` — those stay app-level/downstream, composed from `Reveal`/`Pin`/`useScrollProgress`/`SmoothScroll`.
275
266
  - Every scroll effect must degrade to fully visible/static content — never gate content visibility behind `animation-timeline` support or a scroll listener with no fallback.
276
267
 
277
- Reference: `src/app/components/reveal.tsx`, `src/app/components/pin.tsx`, `src/scroll/` (`use-scroll-progress.ts`, `smooth-scroll.tsx`), ADR-021, and the Reveal pattern page on the docs site (`/docs/patterns/reveal`) for golden-path examples.
268
+ Reference: `src/app/components/reveal.tsx`, `src/app/components/pin.tsx`, `src/scroll/` (`use-scroll-progress.ts`, `smooth-scroll.tsx`), and the Reveal pattern page on the docs site (`/docs/patterns/reveal`) for golden-path examples.
278
269
 
279
270
  ## HDS Card Anatomy (mandatory — every property is non-negotiable)
280
271
 
@@ -401,14 +392,14 @@ A machine- and human-readable specification of the Hirobius Design System for AI
401
392
 
402
393
  ## Overview
403
394
 
404
- Hirobius is a clean, systems-first visual language that bridges digital precision and physical fabrication through a high-contrast monochromatic neutral palette and a single accent that each tenant sets — a bright apple green by default. Its personality is disciplined, tactile, and quietly technical: structure is explicit, motion is purposeful, and visual noise is stripped away. Whitespace is treated as material, not leftover space, so every screen should feel deliberate, breathable, and exact.
395
+ Hirobius is a clean, structured visual language that bridges digital precision and physical fabrication through a high-contrast monochromatic neutral palette and a single accent that each tenant sets — a warm graphite by default. Its personality is disciplined, tactile, and quietly technical: structure is explicit, motion is purposeful, and visual noise is stripped away. Whitespace is treated as material, not leftover space, so every screen should feel deliberate, breathable, and exact.
405
396
 
406
397
  ## Colors
407
398
 
408
399
  <!-- auto:start:colors -->
409
400
  **One accent — one neutral system.**
410
401
 
411
- - **Accent** (`#66B239`): CTAs, active states, selected focus rings, and the single brand accent. `semantic.accent.rest` — a per-tenant knob, not a fixed hue (#208).
402
+ - **Accent** (`#433A3F`): CTAs, active states, selected focus rings, and the single brand accent. `semantic.accent.rest` — a per-tenant knob, not a fixed hue (#208).
412
403
  - **Neutral**: backgrounds, surfaces, borders, text. True monochromatic — `primitive.color.neutral.50` through `950`. Use `semantic.color.surface.*`, `semantic.color.content.*`, `semantic.color.border.*`; never reach directly for primitives in components.
413
404
  - **Feedback — Error** (`#B91C1C`): destructive confirms, error banners, validation failures. `semantic.color.feedback.error`.
414
405
  - **Feedback — Success** (`#047857`): positive confirmations, completed states. `semantic.color.feedback.success`.
@@ -421,10 +412,9 @@ Feedback hues are never decorative; do not use them as accents. Light and dark m
421
412
  ## Typography
422
413
 
423
414
  <!-- auto:start:typography -->
424
- HDS ships three typefaces — each with a distinct and exclusive role:
415
+ HDS ships two typefaces:
425
416
 
426
- - **Display / Heading font**: Plus Jakarta Sans. Bound exclusively to the `display` and `title` styles. Never used for body copy or UI labels.
427
- - **Body / UI font**: Plus Jakarta Sans. All prose, labels, small text, captions, and UI copy.
417
+ - **Text font**: Plus Jakarta Sans. Headings, prose, labels, captions, and UI copy; the type roles set size and weight.
428
418
  - **Mono font**: IBM Plex Mono. Reserved for tokens, code, technical callouts, and metric readouts.
429
419
 
430
420
  Weights declared: `400` regular, `500` medium, `700` bold. Heading styles (display · title) use `700` bold; body, UI, and caption use `400` regular / `500` medium.
@@ -460,7 +450,7 @@ Layout rhythm, padding, and gaps use the `semantic.space.scale.{xs…xl}` steps
460
450
 
461
451
  ## Layout contract (v1)
462
452
 
463
- Approved 2026-10-07. Data: `docs/guardrails/layout-contract.json`; gates: `pnpm check:layout-contract` and `pnpm check:spacing-scale` (warn mode; baseline in `docs/audits/layout-contract-baseline.md`).
453
+ Approved 2026-10-07 as the **target**; adoption is in progress, so some components below (Container, Sidebar, Switcher) still ship until they fold in. Data: `docs/guardrails/layout-contract.json`; gates: `pnpm check:layout-contract` and `pnpm check:spacing-scale` (warn mode; baseline in `docs/audits/layout-contract-baseline.md`).
464
454
 
465
455
  1. **Sizing.** Every component declares `fill` or `hug` on each axis. Leaves hug. Input, Textarea, Select, Combobox, Table, Progress and Divider fill width. One override prop, `width="hug|fill"`, on every component. Height always hugs; stretching is the parent's job (`align="stretch"`). No component sets `h-full`, `height: 100%` or `self-*` on its root.
466
456
  2. **Padding.** Only containers pad: Card, Surface, Alert, Callout, Dialog, Page. Compound parts (`Card.Header`, `Body`, `Footer`, `Metric`) have zero padding and the container's `gap` spaces them. Padding is `none | sm | md`, default `md`, density-aware. A padded container directly inside a padded container is an error unless the inner one is `padding="none"`.
@@ -604,7 +594,7 @@ Three more needs are props on an existing component, not components of their own
604
594
  ## Do's and Don'ts
605
595
 
606
596
  - Don't invent new corner behavior for interactive controls; buttons, inputs, disclosures, and similar action surfaces should follow the shared action radius (`semantic.radius.action`).
607
- - Don't introduce additional accent hues; Hirobius uses exactly one accent, resolved from `semantic.accent.rest`, over a true monochromatic neutral system. The accent is a per-tenant knob (#208) and defaults to a bright apple green — read the token, never assume a hue.
597
+ - Don't introduce additional accent hues; Hirobius uses exactly one accent, resolved from `semantic.accent.rest`, over a true monochromatic neutral system. The accent is a per-tenant knob and defaults to a warm graphite — read the token, never assume a hue.
608
598
  - Don't tint neutrals warm or cool; greys should remain genuinely neutral and high-contrast.
609
599
  - Don't reach for shadow values directly — bind to a `semantic.elevation.*` role so surface + shadow + border stay paired. Cards default to `flat` (border, no shadow). Popovers/tooltips/dropdowns use `floating`. Dialogs/sheets use `overlay`.
610
600
  - Don't hardcode colors, spacing, radius, or typography values when governed tokens already exist.
@@ -618,12 +608,12 @@ Three more needs are props on an existing component, not components of their own
618
608
 
619
609
  ## Open Questions
620
610
 
621
- Unresolved rules that the live repo cannot yet answer confidently are tracked in [`OPEN_DS_QUESTIONS.md`](OPEN_DS_QUESTIONS.md). Do not invent rules here to fill those gaps.
611
+ Unresolved rules that the live repo cannot yet answer confidently are tracked as GitHub issues. Do not invent rules here to fill those gaps.
622
612
 
623
613
  <!-- auto:start:build-meta -->
624
614
  ---
625
615
 
626
- > Generated from `hirobius.tokens.json` (400 tokens) and `public/hds-manifest.json` by `scripts/build-design-md.mjs`.
616
+ > Generated from `hirobius.tokens.json` (411 tokens) and `public/hds-manifest.json` by `scripts/build-design-md.mjs`.
627
617
  > Hand-edit `DESIGN.source.md`; this file (`DESIGN.md`) is overwritten by `pnpm tokens`.
628
618
  <!-- auto:end:build-meta -->
629
619
 
package/public/llms.txt CHANGED
@@ -1,6 +1,6 @@
1
1
  # Hirobius Design System
2
2
 
3
- Generated: 2026-10-11T06:38:18.383Z
3
+ Generated: 2026-10-11T20:46:31.293Z
4
4
  Primary sources: `public/hds-manifest.json`, `src/app/data/component-api.json`, `hirobius.tokens.json`
5
5
 
6
6
  ## Agents Using The Package: Start Here
@@ -82,15 +82,6 @@ One answer per need. Use the components after the arrow; what follows "Not:" is
82
82
  - Docs pipeline: `public/hds-manifest.json` + `src/app/data/component-api.json` -> reflective docs pages
83
83
  - AI entrypoint: read `public/llms.txt` before editing code
84
84
 
85
- ## Phase Snapshot
86
-
87
- - foundation. Foundations - 63% - Token architecture, CSS pipeline, accessibility, and primitive scales.
88
- - Criteria: done: W3C DTCG three-tier token architecture; done: CSS variable pipeline + token verify; partial: Primitive scales complete (color, type, space); todo: Token audit clean
89
- - components. Components - 75% - Accessible React UI built from foundations and mapped toward Figma parity.
90
- - Criteria: done: Component inventory with typed props; done: Action system architecture (buttons, links, groups); done: Prop tables and API doc coverage; todo: Figma parity mapping
91
- - infrastructure-operations. Architecture - 55% - System delivery, Figma sync, automation, quality gates, and operational hygiene.
92
- - Criteria: done: System manifest + llms.txt AI context; done: Release gate + full audit gate; done: Documentation automation (AST pipeline, LLMS sync); partial: Payload sweep + orphan cleanup; partial: Motion system foundations; todo: Figma library generated from tokens; todo: Code Connect CI + reverse sync; partial: AST gatekeeper + token schema validation; partial: A11y CI + visual regression pipeline; partial: Operational feedback loop + AI retrospective
93
-
94
85
  ## Component Inventory (Source Of Truth)
95
86
 
96
87
  This file intentionally does not embed the full component list to avoid duplication and excess context.
@@ -107,7 +98,7 @@ This file intentionally does not embed prop tables or long-form API docs.
107
98
 
108
99
  ## Core set
109
100
 
110
- The 43 components of the ratified core set (hds#254, ADR-031): brand-neutral, composable, imported from the package root. Build a screen from these first. Each has `core: true` in `public/hds-manifest.json` and is marked `[core]` under "Which one when". Composed pattern modules (page shells, forms, code blocks, page sections) are imported from `@hirobius/design-system/patterns`.
101
+ The 43 components of the ratified core set: brand-neutral, composable, imported from the package root. Build a screen from these first. Each has `core: true` in `public/hds-manifest.json` and is marked `[core]` under "Which one when". Composed pattern modules (page shells, forms, code blocks, page sections) are imported from `@hirobius/design-system/patterns`.
111
102
 
112
103
  - Button (Actions)
113
104
  - Avatar (Display)
@@ -265,7 +256,7 @@ Canonical primitives, cheapest-first (CSS before JS, JS before an opt-in depende
265
256
  2. `Pin` (`position: sticky`) for a pinned scroll scene — the dependency-free basis for the "tall section + sticky child" pattern (GSAP's `pin: true`, done with zero JS). Give the pinned element a TALLER scrolling parent (e.g. `height: 300vh`) so it has room to travel; `top` is a CSS length offset, not a spacing token.
266
257
  3. `useScrollProgress` (from `@hirobius/design-system/scroll`) only when the 0→1 scroll value is needed in React — cross-element choreography, canvas/WebGL, or a Motion (`motion/react`) `useTransform` binding that CSS `animation-timeline` cannot express. Thin, SSR-guarded wrapper over Motion `useScroll`; adds no new dependency.
267
258
  4. `SmoothScroll` (from `@hirobius/design-system/scroll`, `lenis` as an OPTIONAL peer dep) only for opt-in momentum ("inertia") scrolling, mounted once at the app/site root. Never imported from the main barrel — consumers who skip it pay nothing. Reduced-motion-first: Lenis is not instantiated when the user prefers reduced motion, unless `ignoreReducedMotion` is set for a deliberate art-directed exception.
268
- 5. Do not adopt GSAP/ScrollTrigger, and do not wire Lenis directly outside `SmoothScroll`, inside the core library — the CSS + Motion stack above covers reveal/pin/scrub without new dependencies. Bespoke GSAP/Lenis/WebGL scenes stay app-level/downstream (marketing sites, the clients factory), composed from these primitives (ADR-021, #116).
259
+ 5. Do not adopt GSAP/ScrollTrigger, and do not wire Lenis directly outside `SmoothScroll`, inside the core library — the CSS + Motion stack above covers reveal/pin/scrub without new dependencies. Bespoke GSAP/Lenis/WebGL scenes stay app-level/downstream (marketing sites, the clients factory), composed from these primitives.
269
260
 
270
261
  Negative rules:
271
262
 
@@ -274,7 +265,7 @@ Negative rules:
274
265
  - No GSAP/ScrollTrigger or bespoke Lenis wiring inside `@hirobius/design-system` — those stay app-level/downstream, composed from `Reveal`/`Pin`/`useScrollProgress`/`SmoothScroll`.
275
266
  - Every scroll effect must degrade to fully visible/static content — never gate content visibility behind `animation-timeline` support or a scroll listener with no fallback.
276
267
 
277
- Reference: `src/app/components/reveal.tsx`, `src/app/components/pin.tsx`, `src/scroll/` (`use-scroll-progress.ts`, `smooth-scroll.tsx`), ADR-021, and the Reveal pattern page on the docs site (`/docs/patterns/reveal`) for golden-path examples.
268
+ Reference: `src/app/components/reveal.tsx`, `src/app/components/pin.tsx`, `src/scroll/` (`use-scroll-progress.ts`, `smooth-scroll.tsx`), and the Reveal pattern page on the docs site (`/docs/patterns/reveal`) for golden-path examples.
278
269
 
279
270
  ## HDS Card Anatomy (mandatory — every property is non-negotiable)
280
271
 
@@ -1,5 +1,5 @@
1
1
  {
2
- "generatedAt": "2026-10-11T21:01:53.099Z",
2
+ "generatedAt": "2026-10-12T03:53:49.234Z",
3
3
  "source": "react-docgen-typescript@2.4.0",
4
4
  "components": {
5
5
  "Alert": {
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "package": "@hirobius/design-system",
3
- "latest": "0.23.2",
3
+ "latest": "0.24.1",
4
4
  "floor": "0.16.0",
5
5
  "versions": [
6
6
  {
@@ -72,6 +72,20 @@
72
72
  "bump": "patch",
73
73
  "breaking": 0,
74
74
  "summary": "2 that look different."
75
+ },
76
+ {
77
+ "version": "0.24.0",
78
+ "date": "2026-10-12",
79
+ "bump": "minor",
80
+ "breaking": 11,
81
+ "summary": "11 changes to make by hand (11 breaking) and 24 that look different."
82
+ },
83
+ {
84
+ "version": "0.24.1",
85
+ "date": "2026-10-12",
86
+ "bump": "patch",
87
+ "breaking": 0,
88
+ "summary": "16 that look different."
75
89
  }
76
90
  ],
77
91
  "deprecated": [