@hirobius/design-system 0.18.0 → 0.19.0

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.
Files changed (85) hide show
  1. package/CONSUMING.md +150 -0
  2. package/DESIGN.md +220 -0
  3. package/README.md +14 -2
  4. package/dist/chunks/{activity-feed-C8_e-Btq.js → activity-feed-DIMeUJpW.js} +4907 -2912
  5. package/dist/chunks/{form-DnGRy27o.js → form-BvNNnJ0t.js} +2 -2
  6. package/dist/form.js +5 -5
  7. package/dist/hirobius-ui.js +1986 -2529
  8. package/dist/icons.js +53 -0
  9. package/dist/manifest.js +15 -14
  10. package/dist/patterns.js +292 -101
  11. package/dist/static.css +3 -3
  12. package/dist/styles.css +1 -1
  13. package/dist/tokens.css +1 -1
  14. package/dist/types/src/app/components/alert-dialog.d.ts +9 -1
  15. package/dist/types/src/app/components/alert.d.ts +4 -0
  16. package/dist/types/src/app/components/avatar.d.ts +4 -0
  17. package/dist/types/src/app/components/badge.d.ts +4 -0
  18. package/dist/types/src/app/components/box.d.ts +5 -0
  19. package/dist/types/src/app/components/breadcrumb.d.ts +4 -0
  20. package/dist/types/src/app/components/button-group.d.ts +4 -0
  21. package/dist/types/src/app/components/button.d.ts +3 -0
  22. package/dist/types/src/app/components/card.d.ts +9 -0
  23. package/dist/types/src/app/components/checkbox.d.ts +4 -0
  24. package/dist/types/src/app/components/combobox.d.ts +10 -0
  25. package/dist/types/src/app/components/command-palette.d.ts +3 -1
  26. package/dist/types/src/app/components/container.d.ts +5 -0
  27. package/dist/types/src/app/components/context-menu.d.ts +25 -2
  28. package/dist/types/src/app/components/data-table-section.d.ts +45 -0
  29. package/dist/types/src/app/components/destructive-section.d.ts +32 -0
  30. package/dist/types/src/app/components/dialog.d.ts +20 -2
  31. package/dist/types/src/app/components/disclosure.d.ts +3 -0
  32. package/dist/types/src/app/components/divider.d.ts +4 -0
  33. package/dist/types/src/app/components/empty-state.d.ts +4 -0
  34. package/dist/types/src/app/components/field.d.ts +4 -0
  35. package/dist/types/src/app/components/form-actions.d.ts +26 -0
  36. package/dist/types/src/app/components/grid.d.ts +4 -0
  37. package/dist/types/src/app/components/hds-tooltip.d.ts +14 -2
  38. package/dist/types/src/app/components/hover-card.d.ts +16 -1
  39. package/dist/types/src/app/components/icon.d.ts +4 -0
  40. package/dist/types/src/app/components/inline-link.d.ts +4 -0
  41. package/dist/types/src/app/components/input.d.ts +5 -0
  42. package/dist/types/src/app/components/kbd.d.ts +3 -0
  43. package/dist/types/src/app/components/menu.d.ts +26 -2
  44. package/dist/types/src/app/components/metric-tiles.d.ts +40 -0
  45. package/dist/types/src/app/components/page-header.d.ts +34 -0
  46. package/dist/types/src/app/components/pagination.d.ts +3 -0
  47. package/dist/types/src/app/components/popover.d.ts +14 -2
  48. package/dist/types/src/app/components/progress.d.ts +4 -0
  49. package/dist/types/src/app/components/radio.d.ts +5 -0
  50. package/dist/types/src/app/components/select.d.ts +16 -0
  51. package/dist/types/src/app/components/skeleton.d.ts +4 -0
  52. package/dist/types/src/app/components/slider.d.ts +3 -0
  53. package/dist/types/src/app/components/spinner.d.ts +4 -0
  54. package/dist/types/src/app/components/stack.d.ts +4 -0
  55. package/dist/types/src/app/components/stat.d.ts +4 -0
  56. package/dist/types/src/app/components/status-tile.d.ts +4 -0
  57. package/dist/types/src/app/components/table.d.ts +36 -4
  58. package/dist/types/src/app/components/tabs.d.ts +4 -0
  59. package/dist/types/src/app/components/tag.d.ts +3 -0
  60. package/dist/types/src/app/components/text.d.ts +4 -0
  61. package/dist/types/src/app/components/textarea.d.ts +3 -0
  62. package/dist/types/src/app/components/toast.d.ts +4 -0
  63. package/dist/types/src/app/components/toggle.d.ts +4 -0
  64. package/dist/types/src/app/components/tooltip.d.ts +1 -1
  65. package/dist/types/src/app/components/visually-hidden.d.ts +3 -0
  66. package/dist/types/src/app/context/hds-portal.d.ts +52 -0
  67. package/dist/types/src/app/context/hds-theme.d.ts +10 -0
  68. package/dist/types/src/app/data/manifest-types.d.ts +27 -0
  69. package/dist/types/src/app/design-system/generated-token-refs.d.ts +2 -0
  70. package/dist/types/src/icons.d.ts +13 -0
  71. package/dist/types/src/index.d.ts +20 -1
  72. package/dist/types/src/patterns.d.ts +5 -0
  73. package/dist/variables.css +4 -0
  74. package/docs/CONSUMING.md +758 -0
  75. package/hirobius.tokens.json +17 -0
  76. package/llms.txt +261 -0
  77. package/package.json +21 -4
  78. package/public/hds-manifest.json +1545 -89
  79. package/public/llms/components.txt +1090 -0
  80. package/public/llms/layout.txt +54 -0
  81. package/public/llms/scroll.txt +22 -0
  82. package/public/llms/tokens.txt +32 -0
  83. package/public/llms-full.txt +1561 -0
  84. package/public/llms.txt +261 -0
  85. package/src/app/data/component-api.json +6156 -0
@@ -1023,6 +1023,18 @@
1023
1023
  }
1024
1024
  }
1025
1025
  },
1026
+ "scrim": {
1027
+ "$value": "{primitive.color.neutral.900}",
1028
+ "$description": "Opaque modal backdrop, near-black in both themes. Apply alpha in the class (bg-scrim/60), not here.",
1029
+ "$extensions": {
1030
+ "com.figma.variables": {
1031
+ "modes": {
1032
+ "Light": "{primitive.color.neutral.900}",
1033
+ "Dark": "{primitive.color.neutral.black}"
1034
+ }
1035
+ }
1036
+ }
1037
+ },
1026
1038
  "inverse": {
1027
1039
  "$value": "{primitive.color.neutral.black}",
1028
1040
  "$description": "Inverted background for contrast sections",
@@ -2490,6 +2502,11 @@
2490
2502
  "$value": "{semantic.color.surface.overlay}",
2491
2503
  "$description": "Popover/menu surface. shadcn role: popover."
2492
2504
  },
2505
+ "scrim": {
2506
+ "$type": "color",
2507
+ "$value": "{semantic.color.surface.scrim}",
2508
+ "$description": "Modal backdrop colour role. Apply alpha in the class, e.g. bg-scrim/60."
2509
+ },
2493
2510
  "popover-foreground": {
2494
2511
  "$type": "color",
2495
2512
  "$value": "{semantic.color.content.primary}",
package/llms.txt ADDED
@@ -0,0 +1,261 @@
1
+ # Hirobius Design System
2
+
3
+ Generated: 2026-09-30T14:27:19.090Z
4
+ Primary sources: `public/hds-manifest.json`, `src/app/data/component-api.json`, `hirobius.tokens.json`
5
+
6
+ ## System Architecture
7
+
8
+ - Engine: React + TypeScript
9
+ - Icons: Lucide React
10
+ - Tokens: W3C DTCG
11
+ - Styling: CSS Variables
12
+ - Token pipeline: `hirobius.tokens.json` -> `pnpm tokens` -> generated CSS vars + generated TS constants
13
+ - Docs pipeline: `public/hds-manifest.json` + `src/app/data/component-api.json` -> reflective docs pages
14
+ - AI entrypoint: read `public/llms.txt` before editing code
15
+
16
+ ## Phase Snapshot
17
+
18
+ - foundation. Foundations - 63% - Token architecture, CSS pipeline, accessibility, and primitive scales.
19
+ - 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
20
+ - components. Components - 75% - Accessible React UI built from foundations and mapped toward Figma parity.
21
+ - 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
22
+ - infrastructure-operations. Architecture - 55% - System delivery, Figma sync, automation, quality gates, and operational hygiene.
23
+ - 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
24
+
25
+ ## Component Inventory (Source Of Truth)
26
+
27
+ This file intentionally does not embed the full component list to avoid duplication and excess context.
28
+
29
+ - Canonical inventory + metadata: read `public/hds-manifest.json`.
30
+ - If you see references to `public/manifest.json`, treat it as an optional alias; in this repo prefer `public/hds-manifest.json`.
31
+
32
+ ## Component API (Source Of Truth)
33
+
34
+ This file intentionally does not embed prop tables or long-form API docs.
35
+
36
+ - Detailed prop types, unions, defaults, and descriptions: read `src/app/data/component-api.json`.
37
+ - Runtime behavior: read the actual component source under `src/app/components/` (and associated styles).
38
+
39
+ ## Which one when
40
+
41
+ One line per component that declares when to use it (`@usage` / `@useInstead` in its JSDoc). Full detail, including `usage.whenNot`, `keyboard` and `aiRules`, is in `public/hds-manifest.json` and `src/app/data/component-api.json`.
42
+
43
+ Alert: Show a persistent inline message with a severity, next to the content it concerns. Use instead: ToastProvider, Badge
44
+ Avatar: Show a person or entity as an image with an initials fallback. Use instead: Icon, Badge
45
+ Badge: Label a status, state or count with a compact neutral or semantic chip. Use instead: Tag, Alert
46
+ Box: Build one-off layout that no named layout primitive covers, using token keys through `sx`. Use instead: Stack, Grid, Container
47
+ Breadcrumb: Show where the current page sits in a hierarchy and link back up it. Use instead: Tabs, Pagination
48
+ Button: Trigger an action (submit, save, open a dialog) with a text label and optional icons; for an icon-only control pass iconOnly with iconLeft. Use instead: InlineLink
49
+ ButtonGroup: Attach related Buttons into one segmented row or column that reads as a single control. Use instead: SegmentedControl, Stack
50
+ Card: Group related content on a raised surface with header, body, footer and metric slots. Use instead: Surface, Card.Metric
51
+ CardMetric: Show one headline figure (a KPI, a count, a total) with its label inside a Card.
52
+ Checkbox: Let people tick one or more independent options, or a parent choice that is partly selected. Use instead: Toggle, Radio
53
+ Combobox: Pick one value from a long list of options, with a search field that filters as you type. Use instead: Select, Menu
54
+ Container: Constrain a page region to the content or maximum width and centre it. Use instead: Stack, Grid, Box
55
+ ContextMenu: Offer actions for an item on right-click, or the equivalent keyboard gesture. Use instead: Menu
56
+ Dialog: Interrupt the page with a modal that needs a decision or focused input before people continue. Use instead: HoverCard, Alert, ToastProvider
57
+ Disclosure: Hide optional explanatory content behind a heading that people can expand. Use instead: Tabs
58
+ Divider: Separate two regions of content with a thin semantic rule. Use instead: Stack, Surface
59
+ EmptyState: Say that a list, grid or section has no data yet, with a title and an optional description. Use instead: Skeleton, Alert
60
+ Field: Show a labelled read-only value, such as a name and its value in a detail view. Use instead: Input, Card.Metric
61
+ Grid: Lay out content in responsive columns with token-governed gaps, or align nested content with subgrid. Use instead: Stack, Box
62
+ HdsThemeProvider: Wrap an app or region once to set theme, density and other root attributes for everything inside it. Use instead: Surface
63
+ HoverCard: Preview extra detail about a link or mention when it is hovered or focused, without navigating. Use instead: Dialog, Tooltip
64
+ Icon: Draw a Lucide glyph at a size and colour from the design tokens. Use instead: Button, Avatar
65
+ IconButton: Trigger an action from a compact icon-only control, always with an accessible label. Use instead: Button
66
+ InlineLink: Link to a route or external URL from inside body copy. Use instead: Button, Text
67
+ Input: Collect a single line of text, a number, an email or a password, with label, helper and error slots. Use instead: Textarea, Select, Combobox
68
+ Kbd: Show a keyboard key or shortcut hint inline, as a native kbd element. Use instead: Text
69
+ Menu: Offer a list of actions from a trigger, closed until opened. Use instead: Select
70
+ Pagination: Move between pages of a long result set, with truncated page numbers. Use instead: Breadcrumb
71
+ Progress: Show how far a task has got, as a bar that is determinate or indeterminate. Use instead: Spinner, Skeleton
72
+ Radio: Choose exactly one option from a small set that should stay visible together. Use instead: Checkbox, Select, SegmentedControl
73
+ SegmentedControl: Switch between two to five mutually exclusive views or modes in a compact row. Use instead: Radio, Tabs, Select
74
+ Select: Choose one value from a short list of options in a form field. Use instead: Menu, Combobox
75
+ Skeleton: Reserve the shape of content that is still loading, so the layout does not jump. Use instead: Progress, Spinner
76
+ Slider: Pick a number within a known range by dragging, when the exact value matters less than the position. Use instead: Input
77
+ Spinner: Show that something is loading when the wait is short or has no measurable end. Use instead: Progress, Skeleton
78
+ Stack: Space a row or column of content with token gaps and simple flex alignment. Use instead: Grid, Surface
79
+ Stat: Show one standalone headline figure with its label and an optional sub-line. Use instead: Card.Metric, StatusTile
80
+ StatusTile: Show a titled status block with optional notes and a trailing badge or affordance. Use instead: Card.Metric, StatusListItem
81
+ Surface: Wrap content in a padded, background-bearing inset surface with no header or footer anatomy. Use instead: Card, Stack
82
+ Table: Show rows of structured data in aligned columns, with optional sorting. Use instead: Field, Stack
83
+ Tabs: Switch between panels of related content in the same place, one visible at a time. Use instead: SegmentedControl, Disclosure
84
+ Tag: Show an interactive filter or category chip that people can toggle. Use instead: Badge
85
+ Text: Set any text on the type ramp, with the element chosen by `as`. Use instead: InlineLink, Kbd
86
+ Textarea: Collect multi-line free text such as a message, note or description. Use instead: Input
87
+ ToastProvider: Confirm an action with a brief message that appears and dismisses itself, through useToast. Use instead: Alert, Dialog
88
+ Toggle: Switch one setting on or off, with the effect applying immediately. Use instead: Checkbox, Radio
89
+ VisuallyHidden: Give assistive technology a label or description that sighted people do not need to see. Use instead: Text
90
+
91
+ ## Tokens (Primary Source Of Truth)
92
+
93
+ - Primary token source of truth: `hirobius.tokens.json` (W3C DTCG).
94
+ - Prefer `semantic.*` and `component.*` tokens for product UI. Use `primitive.*` only when editing the token system itself.
95
+ - CSS variable naming convention: token path `semantic.color.surface.page` maps to `var(--semantic-color-surface-page)`.
96
+
97
+ ## Quick Token Reference
98
+
99
+ | Need | Token path examples | CSS var examples |
100
+ | --- | --- | --- |
101
+ | Page/background surfaces | `semantic.color.surface.page`, `semantic.color.surface.raised` | `--semantic-color-surface-page`, `--semantic-color-surface-raised` |
102
+ | Text/content colors | `semantic.color.content.primary`, `semantic.color.content.secondary` | `--semantic-color-content-primary`, `--semantic-color-content-secondary` |
103
+ | Borders/dividers | `semantic.color.border.default`, `semantic.color.border.interactive` | `--semantic-color-border-default`, `--semantic-color-border-interactive` |
104
+ | Feedback states | `semantic.color.feedback.error`, `semantic.color.feedback.success` | `--semantic-color-feedback-error`, `--semantic-color-feedback-success` |
105
+ | Spacing (semantic tiers) | `semantic.space.scale.xs`, `semantic.space.surface.padding`, `semantic.space.region.gutter` | use semantic tokens or `--hds-space-px12` style vars |
106
+ | Radius | `semantic.radius.action` | `--semantic-radius-action` |
107
+ | Motion | `semantic.motion.productive`, `semantic.motion.expressive`, `semantic.motion.exit` | use token refs; values are structured (duration/easing) |
108
+ | Typography | `semantic.typography.body`, `semantic.typography.h2`, `semantic.typography.caption` | use token refs; values are structured (family/size/weight/etc) |
109
+
110
+ ## How To Lay Out A Screen
111
+
112
+ Canonical skeleton, outermost to innermost:
113
+
114
+ 1. `Page` (or `Container`/`Center` for a full-bleed, non-page surface) for the outermost width constraint. Never import `Container` directly inside `src/app/pages/**` — use `Page`, which wraps it and owns vertical rhythm.
115
+ 2. `Stack` (vertical rhythm between sections) or `Grid` (two-dimensional/column layout) for the structural skeleton. One section = one Section/Stack — never add a second wrapper to fake a section boundary.
116
+ 3. Reach for a named every-layout primitive before hand-rolling flex/grid math for a common intent: `Cluster` (wrapping row of same-ish things), `Center` (centered max-width column with optional gutter), `Sidebar` (fixed-width rail + fluid content, no media query), `Switcher` (row that flips to a column below a threshold, no media query), `Cover` (full-height shell with a centered main region), `Frame` (aspect-ratio-locked clipped media box), `Bleed` (controlled negative margin to escape a parent padding).
117
+ 4. `Surface` for any background-bearing, padded wrapper (card, panel, inset). Never a raw element with backgroundColor + padding hand-rolled inline.
118
+ 5. Use the screen patterns (`@hirobius/design-system/patterns`) for the parts every screen repeats: `PageHeader` once at the top (breadcrumb, `heading2` title, status, actions), `MetricTiles` for any row of headline numbers, `FormActions` for a form footer (primary right-most and last in DOM order, destructive on the far left), `DataTableSection` for a titled table (toolbar slot, consumer row actions, empty state, scrolls on narrow widths without a caller `minWidth`), and `DestructiveSection` last for an irreversible action (danger button, then an `AlertDialog` confirm). Pick between `MetricTiles`, `Stat`, `Card.Metric` and `StatusTile`, and between `Card` and `Surface`, with the "Which one, when" table in `DESIGN.md`.
119
+ 6. `Box` `sx` LAST — only for genuinely one-off layout that no named primitive covers. `sx` spacing/color keys MUST be HDS token keys, never raw hex/px.
120
+
121
+ Negative rules (apply everywhere, checked by `scripts/audit-tokens.mjs --full`, `check-hardcoded-spacing.mjs`, `check-hardcoded-colors.mjs`):
122
+
123
+ - No inline margins on children to fake spacing between siblings — gap/spacing on the parent (Stack/Grid/Cluster/Switcher/Sidebar/Cover) owns rhythm, not margin on the child.
124
+ - No raw px or hex values in any layout or color prop — every spacing value comes from the semantic gap scale (`tight | normal | inset | spacious`, or a component/subgrid step) and every color comes from a `semantic.color.*` token.
125
+ - No repeated outlined cards as the default structure for roadmap/status/process/overview UI — use open bands, dividers, rails, disclosures, and whitespace instead.
126
+
127
+ Density: put `data-density="compact"` on the same `[data-hds]` scope element (or `<html>`) to tighten `semantic.space.scale.*`, surface padding and region gutter; `Table` follows it unless given a `density` prop.
128
+
129
+ Reference: `docs/architecture/variant-contract.md` for structural/semantic/size/density variance; `src/app/data/component-api.json` for every layout primitive's full prop table and `@ai-rules` guidance.
130
+
131
+ ## How To Build A Scroll-Driven Section
132
+
133
+ Canonical primitives, cheapest-first (CSS before JS, JS before an opt-in dependency):
134
+
135
+ 1. `Reveal` (CSS `animation-timeline: view()`) for fade/slide/scale-in-on-enter — zero JS, zero deps. Pick `animation` from `fade | fade-up | fade-down | scale`. Content is visible by DEFAULT; the effect applies only where `animation-timeline` is supported and the user has not requested reduced motion — never gate visibility behind either.
136
+ 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.
137
+ 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.
138
+ 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.
139
+ 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).
140
+
141
+ Negative rules:
142
+
143
+ - No hand-rolled IntersectionObserver reveal-on-scroll logic — use `Reveal`.
144
+ - No hand-rolled `position: sticky` scroll scenes — use `Pin`.
145
+ - No GSAP/ScrollTrigger or bespoke Lenis wiring inside `@hirobius/design-system` — those stay app-level/downstream, composed from `Reveal`/`Pin`/`useScrollProgress`/`SmoothScroll`.
146
+ - 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.
147
+
148
+ Reference: `src/app/components/reveal.tsx`, `src/app/components/pin.tsx`, `src/scroll/` (`use-scroll-progress.ts`, `smooth-scroll.tsx`), ADR-021, and `src/stories/patterns-scroll.stories.tsx` for golden-path examples.
149
+
150
+ ## HDS Card Anatomy (mandatory — every property is non-negotiable)
151
+
152
+ When building any card component or card-like surface, ALL of the following rules apply. There is no creative latitude here — deviation from any property is a bug.
153
+
154
+ | Property | Required value | Forbidden |
155
+ | --- | --- | --- |
156
+ | Background | `var(--semantic-color-surface-raised)` | Custom colors, gradients, tinted fills, any non-token value |
157
+ | Border | `1px solid var(--semantic-color-border-default)` | `box-shadow` as an elevation substitute |
158
+ | Border radius | `rounded-lg` (`role.radius` + 4 px: 12 px by default, follows the tenant) | `var(--component-card-radius)`, `rounded-full`, or any hard-coded value |
159
+ | Padding | `var(--semantic-space-surface-padding)` or `<Surface padding="component">` | Raw pixel values, Tailwind spacing classes, ad hoc insets |
160
+ | Shadow | Resting cards: none (`elevation.flat`). Interactive lifted state: `shadow.subtle` via `elevation.raised`. Never reach for shadow values directly — bind via `var(--semantic-elevation-{role}-shadow)` | Raw `box-shadow` values, `drop-shadow`, glow, or any depth effect not bound to a role token |
161
+ | Title | `hds.typeStyles.heading3` / `<Text variant="heading3">` | Any other type style for the primary card heading |
162
+ | Subtitle / meta | `hds.typeStyles.caption` / `<Text variant="caption">` + `var(--semantic-color-content-secondary)` | Primary color, body size, or custom color for secondary text |
163
+ | Hover (interactive cards only) | `transform: scale(1.02)` CSS transform | Background color change, fill swap, border color shift on hover |
164
+
165
+ **NEVER on any card surface:** gradient backgrounds, glow effects, frosted glass (`backdrop-filter: blur`), decorative overlays, gradient borders, colored or tinted card backgrounds, inner shadows, patterned backgrounds, AI-aesthetic shimmer or particle effects. Never reach for shadow values directly — bind to a `semantic.elevation.*` role bundle so surface + shadow + border stay coherent.
166
+
167
+ ## Elevation roles
168
+
169
+ | Surface | Role token | Background | Shadow | Border |
170
+ | --- | --- | --- | --- | --- |
171
+ | Card / panel resting | `semantic.elevation.flat` | `surface.page` | none | `border.subtle` 1px |
172
+ | Card / panel lifted (interactive only) | `semantic.elevation.raised` | `surface.raised` | `shadow.subtle` | none |
173
+ | Popover / dropdown / tooltip | `semantic.elevation.floating` | `surface.raised` | `shadow.floating` | none |
174
+ | Dialog / sheet / modal | `semantic.elevation.overlay` | `surface.overlay` | `shadow.overlay` | none |
175
+
176
+ Cards default to `elevation.flat`. Popovers/tooltips/dropdowns use `elevation.floating`. Dialogs/sheets use `elevation.overlay`. Interactive cards lift to `elevation.raised` on hover. Never combine `raised` with a border — depth is one mechanism (border OR shadow), not both stacked.
177
+
178
+ Overlays (Dialog, AlertDialog, Menu, ContextMenu, Popover, Select, HoverCard, Tooltip) portal into the nearest `data-hds` scope, so they inherit its theme (for example `<div data-hds data-theme="dark">`); pass `container` on the Content part to override.
179
+
180
+ ## Slices And Full Bundle
181
+
182
+ Load only what the task needs. Same text as this file, split by topic:
183
+
184
+ - `public/llms/layout.txt` - screen layout recipe, card anatomy, elevation roles
185
+ - `public/llms/tokens.txt` - token rules and the quick token reference
186
+ - `public/llms/scroll.txt` - scroll-driven section recipe
187
+ - `public/llms/components.txt` - component inventory pointer, API pointer, props digest
188
+
189
+ - `public/llms-full.txt` - this file + the full `DESIGN.md` + a compact props digest for every component.
190
+
191
+ Paths in this file that begin with `docs/architecture/`, `src/app/components/`, `src/scroll/`, `src/stories/` or under `scripts/`, or that name `public/manifest.json`, `DESIGN-HANDOFF.md`, `TOKEN_GOVERNANCE.md` or `SYSTEMS_REGISTRY.md` exist only in the source repo, not in the npm package. Everything under "Default context" below ships in the package.
192
+
193
+ ## Context Loading Rules (Credit Efficiency)
194
+
195
+ Default context (load first):
196
+
197
+ - `public/llms.txt`
198
+ - `public/hds-manifest.json`
199
+ - `src/app/data/component-api.json`
200
+ - `hirobius.tokens.json`
201
+ - `DESIGN.md`
202
+
203
+ On-demand only (load only if explicitly requested or the task clearly requires it):
204
+
205
+ - `DESIGN-HANDOFF.md`
206
+ - `TOKEN_GOVERNANCE.md`
207
+ - `SYSTEMS_REGISTRY.md`
208
+
209
+ ## Pattern Inventory
210
+
211
+ - DataTableSection
212
+ - DestructiveSection
213
+ - FormActions
214
+ - MetricTiles
215
+ - PageHeader
216
+
217
+ ## Icons
218
+
219
+ Icons come from the curated subpath `@hirobius/design-system/icons`; nothing extra to install.
220
+
221
+ ```tsx
222
+ import { IconButton } from '@hirobius/design-system';
223
+ import { Ellipsis } from '@hirobius/design-system/icons';
224
+
225
+ <IconButton icon={Ellipsis} label="Row actions" />
226
+ ```
227
+
228
+ Rule: icon-only actions (row menus, close, edit) use `IconButton`; do not hand-roll a button with a glyph or text "...".
229
+
230
+ Names: Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleAlert, CircleCheck, CircleHelp, Clock, Copy, Download, Ellipsis, EllipsisVertical, ExternalLink, Eye, EyeOff, FileText, Funnel, Heart, House, Image, Info, Link, Lock, LogIn, LogOut, Mail, Menu, Minus, Pencil, Plus, RefreshCw, Save, Search, Settings, Share, Star, Trash2, TriangleAlert, Upload, User, X
231
+
232
+ Legacy names map to canonical ones: MoreHorizontal -> Ellipsis, MoreVertical -> EllipsisVertical, AlertTriangle -> TriangleAlert, Home -> House, Filter -> Funnel.
233
+
234
+ Name collisions: `Calendar` and `Menu` share names with HDS components; alias the icon: `import { Calendar as CalendarIcon, Menu as MenuIcon } from '@hirobius/design-system/icons'`. For an icon outside the set, install `lucide-react@0.487.0` (same version keeps the `LucideIcon` type identical).
235
+
236
+ ## Token Rules
237
+
238
+ - Component inventory: read `public/hds-manifest.json`. Do not duplicate inventories in markdown.
239
+ - Component prop API: read `src/app/data/component-api.json`. Do not inline prop tables in `llms.txt`.
240
+ - Token source of truth: read `hirobius.tokens.json` (W3C DTCG). Prefer `semantic.*` and `component.*` tokens over `primitive.*` for product UI.
241
+ - CSS variables: token path `semantic.color.surface.page` maps to `var(--semantic-color-surface-page)` (see generated token refs).
242
+ - Docs: use `DESIGN.md` as the default lean visual spec. Load `DESIGN-HANDOFF.md` only on-demand.
243
+ - Load `TOKEN_GOVERNANCE.md` and `SYSTEMS_REGISTRY.md` only on-demand (when explicitly requested or required by the task).
244
+ - Read `public/llms.txt` before touching code so AI workflows start from the same system map as humans.
245
+
246
+ ## Agent Workflow
247
+
248
+ 1. Read `public/llms.txt` and the relevant source files.
249
+ 2. Check `public/hds-manifest.json` for component metadata and phase status.
250
+ 3. Check `src/app/data/component-api.json` for prop names, unions, defaults, and descriptions.
251
+ 4. Use `hirobius.tokens.json` (and generated CSS vars) for styling decisions, never raw hex or ad hoc values.
252
+ 5. Run `pnpm tokens:audit` or `pnpm build` after changes that affect docs, tokens, or manifests.
253
+
254
+ ## Key Files
255
+
256
+ - `public/hds-manifest.json` - canonical machine-readable system inventory, metadata, and token snapshot
257
+ - `src/app/data/component-api.json` - generated prop reference (source of truth for prop docs)
258
+ - `hirobius.tokens.json` - token source of truth (W3C DTCG)
259
+ - `public/llms.txt` - machine-readable AI context index
260
+ - `DESIGN.md` - lean agent-facing visual spec (default)
261
+ - `DESIGN-HANDOFF.md` - verbose visual language mirror (on-demand only)
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "author": "Adrian Milsap",
21
21
  "license": "SEE LICENSE IN NOTICE.md",
22
22
  "private": false,
23
- "version": "0.18.0",
23
+ "version": "0.19.0",
24
24
  "engines": {
25
25
  "node": ">=20",
26
26
  "pnpm": ">=8"
@@ -91,6 +91,11 @@
91
91
  "import": "./dist/patterns.js",
92
92
  "default": "./dist/patterns.js"
93
93
  },
94
+ "./icons": {
95
+ "types": "./dist/types/src/icons.d.ts",
96
+ "import": "./dist/icons.js",
97
+ "default": "./dist/icons.js"
98
+ },
94
99
  "./package.json": "./package.json"
95
100
  },
96
101
  "files": [
@@ -98,6 +103,14 @@
98
103
  "NOTICE.md",
99
104
  "hirobius.tokens.json",
100
105
  "public/hds-manifest.json",
106
+ "llms.txt",
107
+ "public/llms.txt",
108
+ "public/llms-full.txt",
109
+ "public/llms/",
110
+ "DESIGN.md",
111
+ "CONSUMING.md",
112
+ "docs/CONSUMING.md",
113
+ "src/app/data/component-api.json",
101
114
  "codemods/patterns-subpath.mjs",
102
115
  "codemods/patterns-subpath.names.json"
103
116
  ],
@@ -265,6 +278,7 @@
265
278
  "check:brand": "node scripts/check-brand.mjs",
266
279
  "check:breakpoints": "node scripts/check-hardcoded-breakpoints.mjs",
267
280
  "check:colors": "node scripts/check-hardcoded-colors.mjs",
281
+ "check:contract-coverage": "node scripts/check-contract-coverage.mjs",
268
282
  "check:contrast": "node scripts/check-contrast.mjs",
269
283
  "check:css": "node scripts/check-css-integrity.mjs",
270
284
  "check:css-values": "node scripts/check-style-discipline.mjs --css-values-only",
@@ -311,6 +325,7 @@
311
325
  "check:style-props": "node scripts/check-style-discipline.mjs --style-props-only",
312
326
  "check:sync-map": "node scripts/check-sync-map.mjs",
313
327
  "check:status-claims": "node scripts/check-status-claims.mjs --check",
328
+ "eval:consistency": "node scripts/eval-consistency.mjs",
314
329
  "check:record-freshness": "node scripts/check-record-freshness.mjs",
315
330
  "check:tailwind": "pnpm lint --rule '{\"tailwindcss/no-custom-classname\":\"error\"}'",
316
331
  "check:tailwind-arbitrary": "pnpm lint --rule '{\"tailwindcss/no-arbitrary-value\":\"error\"}'",
@@ -355,12 +370,14 @@
355
370
  "lint": "eslint src scripts validators tests --max-warnings=0",
356
371
  "lint:fix": "eslint src scripts validators tests --fix",
357
372
  "llms:generate": "node scripts/generate-llms-txt.mjs",
373
+ "skill:generate": "node scripts/generate-consumer-skill.mjs",
374
+ "check:consumer-skill": "node scripts/generate-consumer-skill.mjs --check",
358
375
  "manifest:generate": "node scripts/generate-manifest.mjs && node scripts/generate-component-api.mjs && node scripts/enrich-manifest.mjs",
359
376
  "manifest:project": "node scripts/generate-manifest-projection.mjs",
360
377
  "prebuild-storybook": "node scripts/generate-component-api.mjs",
361
378
  "prebuild:lib": "node scripts/generate-component-api.mjs",
362
379
  "prestorybook": "node scripts/generate-component-api.mjs",
363
- "pretest": "node scripts/validate-manifest.mjs && node scripts/check-manifest-drift.mjs && node scripts/check-manifest-schema-semver.mjs && node scripts/audit-component-integrity.mjs --completeness && node scripts/check-source-canon.mjs && node scripts/check-binding-drift.mjs && node scripts/check-registry.mjs && node scripts/check-tenant-tokens.mjs && node scripts/check-props-exports.mjs && knip --no-exit-code && node scripts/check-dark-alias-flip.mjs && node scripts/check-focus-states.mjs && node scripts/generate-staging-inventory.mjs --check",
380
+ "pretest": "node scripts/validate-manifest.mjs && node scripts/check-manifest-drift.mjs && node scripts/check-manifest-schema-semver.mjs && node scripts/audit-component-integrity.mjs --completeness && node scripts/check-source-canon.mjs && node scripts/check-binding-drift.mjs && node scripts/check-registry.mjs && node scripts/check-tenant-tokens.mjs && node scripts/check-props-exports.mjs && knip --no-exit-code && node scripts/check-dark-alias-flip.mjs && node scripts/check-focus-states.mjs && node scripts/generate-staging-inventory.mjs --check && node scripts/generate-consumer-skill.mjs --check",
364
381
  "pretypecheck": "node scripts/audit-tokens.mjs --report-only",
365
382
  "preview:build": "vite build --config preview/vite.config.mjs",
366
383
  "promote": "node scripts/promote.mjs",
@@ -369,7 +386,7 @@
369
386
  "scaffold:component": "node scripts/scaffold-component.mjs",
370
387
  "scaffold:tenant": "node scripts/scaffold-tenant.mjs",
371
388
  "size-limit": "size-limit --config .size-limit.cjs",
372
- "smoke:consumer": "node scripts/smoke-consumer.mjs && node scripts/check-published-types.mjs && node scripts/check-rsc-directives.mjs",
389
+ "smoke:consumer": "node scripts/smoke-consumer.mjs && node scripts/check-published-types.mjs && node scripts/check-rsc-directives.mjs && node scripts/check-pack-contents.mjs",
373
390
  "storybook": "storybook dev -p 6006",
374
391
  "storybook:deploy": "node scripts/deploy-storybook.mjs",
375
392
  "sync": "node scripts/build-tokens.mjs && node scripts/audit-tokens.mjs --forbidden && node scripts/build-handoff.mjs && node scripts/build-design-md.mjs && node scripts/build-figma-variables.mjs",
@@ -381,7 +398,7 @@
381
398
  "test:figma": "npx tsx scripts/figma-sync.ts",
382
399
  "test:phase1": "node scripts/test-phase1.mjs",
383
400
  "test:watch": "vitest",
384
- "tokens": "node scripts/generate-manifest.mjs && node scripts/generate-component-api.mjs && node scripts/enrich-manifest.mjs && node scripts/build-tokens.mjs && node scripts/audit-tokens.mjs --forbidden && node scripts/check-typography-discipline.mjs --overrides-only && node scripts/build-handoff.mjs && node scripts/build-design-md.mjs && node scripts/generate-llms-txt.mjs && node scripts/build-readme-counts.mjs",
401
+ "tokens": "node scripts/generate-manifest.mjs && node scripts/generate-component-api.mjs && node scripts/enrich-manifest.mjs && node scripts/build-tokens.mjs && node scripts/audit-tokens.mjs --forbidden && node scripts/check-typography-discipline.mjs --overrides-only && node scripts/build-handoff.mjs && node scripts/build-design-md.mjs && node scripts/generate-llms-txt.mjs && node scripts/generate-consumer-skill.mjs && node scripts/build-readme-counts.mjs",
385
402
  "tokens:audit": "node scripts/audit-component-integrity.mjs --tokens",
386
403
  "tokens:build": "node scripts/build-hds-tokens.mjs",
387
404
  "tokens:index": "node scripts/build-token-index.mjs",