banhaten 0.1.3 → 0.3.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.
- package/CHANGELOG.md +73 -0
- package/CONTRIBUTING.md +44 -0
- package/README.md +65 -13
- package/SECURITY.md +15 -0
- package/banhaten.config.example.json +0 -2
- package/docs/design-system/README.md +9 -0
- package/docs/design-system/adoption-quality-remediation.md +87 -0
- package/docs/design-system/agent-usage.md +13 -0
- package/docs/design-system/appearance-presets.md +6 -1
- package/docs/design-system/component-docs-pattern.md +81 -0
- package/docs/design-system/component-implementation-ownership-audit.md +244 -0
- package/docs/design-system/component-quality-audit-2026-08-20.md +223 -0
- package/docs/design-system/component-showcase-consistency-report.md +2 -0
- package/docs/design-system/component-token-consistency-audit.md +13 -3
- package/docs/design-system/components/README.md +4 -2
- package/docs/design-system/components/accordion.md +16 -0
- package/docs/design-system/components/activity-feed.md +17 -1
- package/docs/design-system/components/activity-heatmap.md +73 -0
- package/docs/design-system/components/alert-dialog.md +17 -0
- package/docs/design-system/components/alert.md +46 -14
- package/docs/design-system/components/aspect-ratio.md +15 -0
- package/docs/design-system/components/attribute.md +16 -0
- package/docs/design-system/components/autocomplete.md +19 -0
- package/docs/design-system/components/avatar.md +18 -0
- package/docs/design-system/components/badge.md +19 -0
- package/docs/design-system/components/banner.md +19 -1
- package/docs/design-system/components/breadcrumbs.md +17 -0
- package/docs/design-system/components/button-group.md +35 -0
- package/docs/design-system/components/button.md +18 -0
- package/docs/design-system/components/card.md +26 -1
- package/docs/design-system/components/carousel.md +20 -3
- package/docs/design-system/components/catalog-components.md +18 -1
- package/docs/design-system/components/chart.md +15 -0
- package/docs/design-system/components/checkbox.md +16 -0
- package/docs/design-system/components/collapsible.md +15 -0
- package/docs/design-system/components/command.md +15 -0
- package/docs/design-system/components/context-menu.md +15 -0
- package/docs/design-system/components/date-picker.md +21 -1
- package/docs/design-system/components/divider.md +16 -0
- package/docs/design-system/components/empty-state.md +17 -0
- package/docs/design-system/components/field.md +17 -0
- package/docs/design-system/components/file-upload.md +18 -0
- package/docs/design-system/components/hover-card.md +15 -0
- package/docs/design-system/components/input-group.md +17 -0
- package/docs/design-system/components/input-otp.md +18 -0
- package/docs/design-system/components/input.md +43 -7
- package/docs/design-system/components/item.md +72 -0
- package/docs/design-system/components/kbd.md +18 -0
- package/docs/design-system/components/label.md +16 -0
- package/docs/design-system/components/menu.md +17 -0
- package/docs/design-system/components/menubar.md +15 -0
- package/docs/design-system/components/modal.md +25 -4
- package/docs/design-system/components/native-select.md +18 -0
- package/docs/design-system/components/navigation-menu.md +15 -0
- package/docs/design-system/components/onboarding-step-list-item.md +16 -1
- package/docs/design-system/components/page-header.md +17 -1
- package/docs/design-system/components/pagination.md +31 -8
- package/docs/design-system/components/popover.md +19 -0
- package/docs/design-system/components/progress-slider.md +18 -0
- package/docs/design-system/components/progress.md +17 -0
- package/docs/design-system/components/radio-card.md +16 -0
- package/docs/design-system/components/radio-group.md +17 -0
- package/docs/design-system/components/resizable.md +15 -0
- package/docs/design-system/components/scroll-area.md +20 -1
- package/docs/design-system/components/segmented-control.md +71 -0
- package/docs/design-system/components/select.md +44 -7
- package/docs/design-system/components/sheet.md +17 -0
- package/docs/design-system/components/sidebar.md +17 -0
- package/docs/design-system/components/skeleton.md +18 -0
- package/docs/design-system/components/slideout.md +17 -0
- package/docs/design-system/components/slider.md +20 -0
- package/docs/design-system/components/social-button.md +21 -3
- package/docs/design-system/components/spinner.md +16 -0
- package/docs/design-system/components/steps.md +19 -0
- package/docs/design-system/components/table.md +36 -4
- package/docs/design-system/components/tabs.md +17 -0
- package/docs/design-system/components/tag.md +17 -0
- package/docs/design-system/components/textarea.md +16 -0
- package/docs/design-system/components/timeline.md +17 -0
- package/docs/design-system/components/toast.md +17 -0
- package/docs/design-system/components/toggle.md +17 -0
- package/docs/design-system/components/toolbar.md +21 -1
- package/docs/design-system/components/tooltip.md +18 -1
- package/docs/design-system/density-and-elevation.md +61 -0
- package/docs/design-system/direction-and-localization.md +23 -0
- package/docs/design-system/form-recipes.md +73 -0
- package/docs/design-system/gap-promotion-policy.md +21 -0
- package/docs/design-system/gap-promotion-report.md +100 -0
- package/docs/design-system/installation.md +68 -0
- package/docs/design-system/launch-comparison-shadcn.md +98 -0
- package/docs/design-system/registry-and-cli.md +30 -7
- package/docs/design-system/release-policy.md +30 -0
- package/docs/design-system/roadmap.md +14 -0
- package/docs/design-system/support-matrix.md +23 -0
- package/docs/design-system/tabs.md +1 -1
- package/docs/design-system/token-governance.md +23 -1
- package/package.json +30 -15
- package/registry/component-contract.json +40 -0
- package/registry/components/alert-dialog.tsx +2 -2
- package/registry/components/alert.tsx +101 -76
- package/registry/components/autocomplete.tsx +23 -9
- package/registry/components/avatar.tsx +14 -10
- package/registry/components/badge.tsx +18 -18
- package/registry/components/button-group.tsx +324 -5
- package/registry/components/button.tsx +38 -17
- package/registry/components/card.tsx +87 -62
- package/registry/components/carousel.tsx +67 -5
- package/registry/components/chart.tsx +36 -3
- package/registry/components/checkbox.tsx +3 -3
- package/registry/components/collapsible.tsx +1 -1
- package/registry/components/command.tsx +38 -4
- package/registry/components/context-menu.tsx +1 -1
- package/registry/components/date-picker.tsx +312 -135
- package/registry/components/expanded/ActivityFeed.tsx +9 -22
- package/registry/components/expanded/ActivityHeatmap.tsx +64 -0
- package/registry/components/expanded/Banner.tsx +3 -4
- package/registry/components/expanded/Breadcrumbs.tsx +8 -5
- package/registry/components/expanded/CatalogComponentsShowcase.tsx +16 -17
- package/registry/components/expanded/CatalogDivider.tsx +4 -3
- package/registry/components/expanded/EmptyState.tsx +1 -1
- package/registry/components/expanded/FileUpload.tsx +16 -7
- package/registry/components/expanded/OnboardingStepListItem.tsx +2 -6
- package/registry/components/expanded/PageHeader.tsx +47 -56
- package/registry/components/expanded/Slideout.tsx +29 -424
- package/registry/components/expanded/Steps.tsx +151 -13
- package/registry/components/expanded/Table.tsx +161 -82
- package/registry/components/expanded/Timeline.tsx +14 -27
- package/registry/components/expanded/activityFeed.css +9 -9
- package/registry/components/expanded/activityHeatmap.css +66 -0
- package/registry/components/expanded/banner.css +21 -11
- package/registry/components/expanded/breadcrumbs.css +2 -2
- package/registry/components/expanded/divider.css +1 -1
- package/registry/components/expanded/emptyState.css +1 -1
- package/registry/components/expanded/fileUpload.css +7 -7
- package/registry/components/expanded/onboardingStepListItem.css +2 -2
- package/registry/components/expanded/pageHeader.css +14 -11
- package/registry/components/expanded/slideout.css +10 -690
- package/registry/components/expanded/steps.css +78 -15
- package/registry/components/expanded/table.css +60 -69
- package/registry/components/expanded/timeline.css +19 -18
- package/registry/components/field.tsx +61 -8
- package/registry/components/input-content.ts +1 -0
- package/registry/components/input-otp.tsx +13 -3
- package/registry/components/input.tsx +68 -43
- package/registry/components/item.tsx +189 -0
- package/registry/components/kbd.tsx +111 -4
- package/registry/components/menu.tsx +87 -251
- package/registry/components/menubar.tsx +1 -1
- package/registry/components/modal.tsx +143 -103
- package/registry/components/native-select.tsx +2 -2
- package/registry/components/navigation-menu.tsx +1 -1
- package/registry/components/pagination.css +36 -0
- package/registry/components/pagination.tsx +88 -64
- package/registry/components/popover.tsx +162 -664
- package/registry/components/progress-slider.tsx +1 -1
- package/registry/components/radio-card.tsx +116 -87
- package/registry/components/resizable.tsx +36 -2
- package/registry/components/scroll-area.tsx +30 -6
- package/registry/components/segmented-control.tsx +87 -0
- package/registry/components/select-content.tsx +2 -2
- package/registry/components/select.tsx +86 -27
- package/registry/components/sheet.tsx +1 -1
- package/registry/components/sidebar.tsx +12 -6
- package/registry/components/skeleton.css +0 -3
- package/registry/components/social-button.tsx +59 -30
- package/registry/components/spinner.tsx +18 -55
- package/registry/components/table-elements.tsx +128 -0
- package/registry/components/tabs.css +1 -1
- package/registry/components/tabs.tsx +13 -14
- package/registry/components/tag.tsx +3 -3
- package/registry/components/textarea.tsx +3 -3
- package/registry/components/toast.tsx +16 -11
- package/registry/components/toggle.tsx +4 -4
- package/registry/components/toolbar.tsx +94 -22
- package/registry/components/tooltip.tsx +2 -2
- package/registry/examples/alert-demo.tsx +25 -5
- package/registry/examples/attribute-demo.tsx +1 -1
- package/registry/examples/autocomplete-demo.tsx +3 -3
- package/registry/examples/avatar-demo.tsx +14 -11
- package/registry/examples/badge-demo.tsx +1 -1
- package/registry/examples/button-demo.tsx +6 -6
- package/registry/examples/button-group-demo.tsx +23 -2
- package/registry/examples/card-demo.tsx +46 -8
- package/registry/examples/carousel-demo.tsx +20 -2
- package/registry/examples/chart-demo.tsx +1 -1
- package/registry/examples/checkbox-demo.tsx +5 -5
- package/registry/examples/collection-filter-bar-demo.tsx +135 -0
- package/registry/examples/command-demo.tsx +3 -3
- package/registry/examples/{expanded/command-bar-demo.tsx → command-palette-demo.tsx} +5 -15
- package/registry/examples/context-menu-demo.tsx +1 -1
- package/registry/examples/control-density-contract-demo.tsx +61 -0
- package/registry/examples/date-picker-demo.tsx +12 -12
- package/registry/examples/divider-demo.tsx +3 -3
- package/registry/examples/expanded/activity-heatmap-demo.tsx +29 -0
- package/registry/examples/expanded/banner-demo.tsx +1 -1
- package/registry/examples/expanded/breadcrumbs-demo.tsx +4 -4
- package/registry/examples/expanded/empty-state-demo.tsx +1 -1
- package/registry/examples/expanded/file-upload-demo.tsx +1 -1
- package/registry/examples/expanded/onboarding-step-demo.tsx +1 -1
- package/registry/examples/expanded/slideout-demo.tsx +2 -2
- package/registry/examples/expanded/steps-demo.tsx +1 -1
- package/registry/examples/expanded/tabs-demo.tsx +1 -1
- package/registry/examples/expanded/timeline-demo.tsx +1 -1
- package/registry/examples/hover-card-demo.tsx +2 -2
- package/registry/examples/input-demo.tsx +6 -6
- package/registry/examples/input-otp-demo.tsx +4 -4
- package/registry/examples/item-demo.tsx +46 -0
- package/registry/examples/kbd-demo.tsx +1 -1
- package/registry/examples/label-demo.tsx +1 -1
- package/registry/examples/menu-demo.tsx +1 -1
- package/registry/examples/modal-demo.tsx +67 -9
- package/registry/examples/navigation-menu-demo.tsx +1 -1
- package/registry/examples/pagination-demo.tsx +10 -7
- package/registry/examples/popover-demo.tsx +19 -19
- package/registry/examples/progress-demo.tsx +1 -1
- package/registry/examples/progress-slider-demo.tsx +1 -1
- package/registry/examples/radio-card-demo.tsx +4 -4
- package/registry/examples/radio-group-demo.tsx +2 -2
- package/registry/examples/resizable-demo.tsx +1 -1
- package/registry/examples/results-toolbar-demo.tsx +44 -0
- package/registry/examples/scroll-area-demo.tsx +3 -3
- package/registry/examples/segmented-control-demo.tsx +39 -0
- package/registry/examples/select-demo.tsx +1 -1
- package/registry/examples/sidebar-demo.tsx +5 -3
- package/registry/examples/slider-demo.tsx +3 -3
- package/registry/examples/social-button-demo.tsx +18 -8
- package/registry/examples/spinner-demo.tsx +13 -13
- package/registry/examples/tabs-demo.tsx +1 -1
- package/registry/examples/tag-demo.tsx +1 -1
- package/registry/examples/textarea-demo.tsx +4 -4
- package/registry/examples/toast-demo.tsx +1 -1
- package/registry/examples/toggle-demo.tsx +6 -6
- package/registry/examples/tooltip-demo.tsx +4 -4
- package/registry/guidance/USAGE.md +27 -0
- package/registry/hooks/use-direction.ts +193 -13
- package/registry/index.json +5668 -375
- package/registry/styles/globals.css +2404 -3999
- package/registry.json +156 -149
- package/schema/config.schema.json +11 -8
- package/schema/registry.schema.json +150 -45
- package/schema/tokens.schema.json +134 -34
- package/src/cli/command-line.js +194 -0
- package/src/cli/config-editors.js +9 -0
- package/src/cli/doctor.js +399 -0
- package/src/cli/file-transaction.js +295 -0
- package/src/cli/global-css.js +153 -0
- package/src/cli/index.js +567 -1613
- package/src/cli/install-plan.js +592 -0
- package/src/cli/install-receipt.js +171 -0
- package/src/cli/jsonc.js +203 -0
- package/src/cli/package-install-state.js +254 -0
- package/src/cli/package-manager.js +238 -0
- package/src/cli/package-plan.js +185 -0
- package/src/cli/package-version.js +97 -0
- package/src/cli/registry-query.js +207 -0
- package/src/cli/reporting.js +55 -0
- package/src/cli/schema-validation.js +19 -0
- package/src/cli/source-scanner.js +686 -0
- package/src/cli/vite-config.js +478 -0
- package/tokens/banhaten.tokens.json +4444 -331
- package/docs/design-system/components/command-bar.md +0 -57
- package/registry/components/expanded/BannerBoard.tsx +0 -225
- package/registry/components/expanded/CatalogTag.tsx +0 -85
- package/registry/components/expanded/CommandBar.tsx +0 -386
- package/registry/components/expanded/IconExplorer.tsx +0 -612
- package/registry/components/expanded/TimelineShowcase.tsx +0 -158
- package/registry/components/expanded/commandBar.css +0 -470
- package/registry/components/expanded/iconExplorer.css +0 -764
- package/registry/components/expanded/iconPacks.ts +0 -866
- package/registry/components/expanded/tag.css +0 -148
- package/registry/examples/expanded/icons-demo.tsx +0 -5
- package/tokens/Color mode.zip +0 -0
- package/tokens/Numbers.zip +0 -0
- package/tokens/Radius.zip +0 -0
- package/tokens/Theme.zip +0 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable Banhaten changes are recorded here. Releases follow the policy in `docs/design-system/release-policy.md`.
|
|
4
|
+
|
|
5
|
+
## 0.3.0 - 2026-08-21
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- `ActivityHeatmap`, a token-only expanded component with five intensity levels, accessible summary semantics, responsive overflow, inherited RTL behavior, registry metadata, documentation, and an installable example.
|
|
10
|
+
- Public `CardSurface`, semantic table-element exports, and `ProgressSteps` APIs for owned product composition without bypassing Banhaten primitives.
|
|
11
|
+
- An AST-backed component-ownership gate plus route-wide accessibility, inherited-RTL containment, and deterministic visual-regression coverage for every component page.
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Expanded components and all 38 audited playground backgrounds now compose Banhaten-owned controls; Alert, Page Header, and Slideout declare their new Button and Breadcrumbs registry dependencies.
|
|
16
|
+
- Direction inheritance, narrow-layout containment, focus behavior, and machine-readable RTL contracts were completed across the 68-component catalog.
|
|
17
|
+
- Elevation and color-mode sources were consolidated around shared semantic effects, and the canonical contrast audit was expanded to 910 passing scenarios.
|
|
18
|
+
- Page Header accepts `headingLevel`; Timeline labels and captions accept React nodes; horizontal timelines are keyboard-scrollable and standalone `TimelineItem` semantics are now caller-controlled.
|
|
19
|
+
|
|
20
|
+
### Fixed
|
|
21
|
+
|
|
22
|
+
- ARIA ownership, naming, focus, landmark, and relationship defects across Date Picker, Select, Command, Tabs, Field, Table, Menu, Carousel, Sidebar, Slideout, Timeline, and composed documentation examples.
|
|
23
|
+
- Contrast failures across component states and themes, including focus indicators, selected states, badges, tags, alerts, banners, toggles, social buttons, and tables.
|
|
24
|
+
- Inherited-RTL and 324px containment defects in activity, navigation, form, data-display, and expanded layout components.
|
|
25
|
+
|
|
26
|
+
### Migration
|
|
27
|
+
|
|
28
|
+
- `SidebarInset` now renders a neutral `div` instead of an implicit `main`. When the inset is the page landmark, render your own `<main>` through `<SidebarInset asChild><main>...</main></SidebarInset>`.
|
|
29
|
+
- `Slideout` is an explicitly named presentational region. Use `Sheet` or `Modal` when the experience requires a portal, overlay, focus trap, Escape dismissal, and focus return.
|
|
30
|
+
- A standalone `TimelineItem` no longer assumes `role="listitem"`; use it inside `Timeline` or pass an explicit role when composing your own list.
|
|
31
|
+
- Run `npx banhaten diff` before `npx banhaten update`, then review locally customized generated files before using `--force`.
|
|
32
|
+
|
|
33
|
+
## 0.2.0 - 2026-08-08
|
|
34
|
+
|
|
35
|
+
### Added
|
|
36
|
+
|
|
37
|
+
- Canonical JSON-driven token generation and strict component token enforcement.
|
|
38
|
+
- Color Contrast documentation covering every audited theme, mode, foreground, and background scenario.
|
|
39
|
+
- Item and Toggle Group primitives, inherited direction context, Arabic font installation, and named categorical chart tokens.
|
|
40
|
+
- Receipt-backed CLI drift protection, unified diffs, and isolated compilation for every registry component.
|
|
41
|
+
- Documentation search, token search/copy, stable component and pattern separation, and dedicated lab navigation.
|
|
42
|
+
- `SegmentedControl` and `KbdShortcut` primitives with accessibility, RTL, registry metadata, examples, and tests.
|
|
43
|
+
- Semantic `compact`, `default`, and `comfortable` density across Button, Input, Select, DatePicker, ButtonGroup, SegmentedControl, and Toolbar controls.
|
|
44
|
+
- Canonical collection-filter, results-toolbar, and control-density recipes with accessibility and visual-regression coverage.
|
|
45
|
+
- Install-time coding-agent guidance, a read-only `banhaten doctor` adoption audit, and recurring-gap promotion reporting.
|
|
46
|
+
|
|
47
|
+
### Changed
|
|
48
|
+
|
|
49
|
+
- Production components no longer invent demo content, fake actions, or fixed sample dates.
|
|
50
|
+
- Input and Select no longer invent optional leading, information, or trailing icons when those props are omitted; explicit flags retain the previous built-in adornments.
|
|
51
|
+
- Registry component metadata now publishes machine-readable prop types, rendered defaults, and descriptions for optional visual slots.
|
|
52
|
+
- Registry component token metadata is generated from source references.
|
|
53
|
+
- Pagination, OTP, Carousel, Alert, and Toast direction behavior now resolves from explicit props, provider context, or the nearest document boundary.
|
|
54
|
+
- The default appearance keeps blue brand roles but now composes all neutral surfaces, borders, content, and interaction roles from the reviewed gray ramp in light and dark modes.
|
|
55
|
+
- Registry metadata now declares capability defaults, recommended uses, avoid guidance, recipes, and deprecated props instead of inferring defaults from array order.
|
|
56
|
+
- Toolbar controls default to the shared 36px density; use `density="comfortable"` for the previous 40px toolbar height.
|
|
57
|
+
|
|
58
|
+
### Fixed
|
|
59
|
+
|
|
60
|
+
- Undefined token references, raw component values, inaccessible progress semantics, no-op controls, and the Arabic Pagination “Previous” label.
|
|
61
|
+
- Documentation section anchors, narrow Input preview overflow, Popover arrow sizing, Slideout icon geometry, and playground bundle chunking.
|
|
62
|
+
- High-severity playground advisories in Nano ID, PostCSS, and Undici through patched lockfile versions.
|
|
63
|
+
|
|
64
|
+
### Migration
|
|
65
|
+
|
|
66
|
+
- Prefer `density` over legacy component-specific sizes when controls share a row. Legacy size props continue to work.
|
|
67
|
+
- Replace Input `hasLeadingIcon` and `hasInformationIcon` with explicit `leadingIcon`/`trailingIcon`, or use `showAtSign`/`showInfo` for those exact affordances. The legacy flags remain supported for this deprecation window.
|
|
68
|
+
- Replace single-glyph Input shortcuts with `shortcutKeys={["Mod", "K"]}` or `KbdShortcut` for platform-aware keycaps.
|
|
69
|
+
- Run `npx banhaten init` to install `.banhaten/USAGE.md`, then run `npx banhaten doctor` and `npx banhaten diff` before updating consumer components.
|
|
70
|
+
|
|
71
|
+
## 0.1.3
|
|
72
|
+
|
|
73
|
+
- Pre-launch registry and documentation baseline.
|
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# Contributing to Banhaten
|
|
2
|
+
|
|
3
|
+
## Local checks
|
|
4
|
+
|
|
5
|
+
Use Node 18.18 or newer, install the root and playground dependencies, then run:
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm run check
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
The full check validates schemas, CLI behavior, token generation, token-only component styling, registry mirrors, isolated installs, documentation coverage, browser tests, and the production bundle.
|
|
12
|
+
|
|
13
|
+
## Component rules
|
|
14
|
+
|
|
15
|
+
- Build component styling from canonical `--bh-*` and `--shadow-*` tokens. Add
|
|
16
|
+
new values to the appropriate owned fragment under `tokens/source/` before
|
|
17
|
+
using them in component source.
|
|
18
|
+
- Keep product copy, sample dates, and product actions in examples rather than production defaults.
|
|
19
|
+
- Preserve inherited direction and use logical CSS properties. Test both LTR and RTL keyboard behavior.
|
|
20
|
+
- Use native semantics or proven accessible primitives, and document the public API, examples, tokens, RTL behavior, and accessibility contract.
|
|
21
|
+
- Keep stable primitives in Components, larger compositions in Patterns, and experiments in Lab.
|
|
22
|
+
|
|
23
|
+
## Generated artifacts
|
|
24
|
+
|
|
25
|
+
Edit the owned fragments under `tokens/source/` for structured tokens and
|
|
26
|
+
aliases, and edit `registry/catalog/components/<id>.json` for component registry
|
|
27
|
+
metadata. `tokens/banhaten.tokens.json` and `registry/index.json` are compiled
|
|
28
|
+
publication artifacts. Edit `tokens/banhaten.utilities.css` for authored
|
|
29
|
+
Tailwind mappings, keyframes, global rules, accessibility rules, and typography
|
|
30
|
+
utilities. The generated `registry/styles/globals.css` is rebuilt from the
|
|
31
|
+
compiled token catalog and that authored CSS source.
|
|
32
|
+
|
|
33
|
+
After token or registry metadata changes, run:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm run tokens:build
|
|
37
|
+
npm run components:tokens:metadata -- --write
|
|
38
|
+
npm run registry:export
|
|
39
|
+
npm run docs:normalize
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Do not hand-edit `tokens/banhaten.tokens.json`, `registry/index.json`,
|
|
43
|
+
`registry/styles/globals.css`, `registry.json`, or generated registry contract
|
|
44
|
+
tables.
|
package/README.md
CHANGED
|
@@ -26,6 +26,7 @@ bun install
|
|
|
26
26
|
|
|
27
27
|
- `banhaten.config.json` with schema-backed aliases.
|
|
28
28
|
- The base `cn` utility and `use-direction` hook.
|
|
29
|
+
- `.banhaten/USAGE.md` with agent-readable defaults, recipes, and component-selection rules.
|
|
29
30
|
- The generated Banhaten token stylesheet in your configured CSS file.
|
|
30
31
|
- Tailwind v4 and Vite alias setup when those files are detected.
|
|
31
32
|
- Required package dependencies.
|
|
@@ -35,36 +36,57 @@ bun install
|
|
|
35
36
|
## CLI
|
|
36
37
|
|
|
37
38
|
```bash
|
|
38
|
-
npx banhaten init [--cwd <path>] [--force] [--dry-run]
|
|
39
|
-
npx banhaten add <component...> [--cwd <path>] [--force] [--dry-run]
|
|
40
|
-
npx banhaten diff [component...] [--cwd <path>] [--
|
|
41
|
-
npx banhaten update [component...] [--cwd <path>] [--force] [--dry-run]
|
|
39
|
+
npx banhaten init [--cwd <path>] [--force] [--dry-run] [--json]
|
|
40
|
+
npx banhaten add <component...> [--cwd <path>] [--force] [--dry-run] [--json]
|
|
41
|
+
npx banhaten diff [component...] [--cwd <path>] [--json]
|
|
42
|
+
npx banhaten update [component...] [--cwd <path>] [--force] [--dry-run] [--json]
|
|
42
43
|
npx banhaten list [--json]
|
|
43
44
|
npx banhaten search <query> [--json]
|
|
44
45
|
npx banhaten docs <component> [--json]
|
|
45
46
|
npx banhaten view <component> [--file <registry-source>] [--json]
|
|
47
|
+
npx banhaten doctor [--cwd <path>] [--json]
|
|
46
48
|
npx banhaten version
|
|
47
49
|
```
|
|
48
50
|
|
|
51
|
+
The CLI validates each command before doing project work: unknown flags, missing
|
|
52
|
+
flag values, duplicate flags, and unexpected arguments fail without writing.
|
|
53
|
+
Mutating commands then compute one install plan from the configured destinations
|
|
54
|
+
and the existing TypeScript/Vite root aliases. An alias declared on only one side
|
|
55
|
+
is mirrored to the other; conflicting, ambiguous, or dynamic aliases stop before
|
|
56
|
+
files are staged. The install receipt records the resolved destinations so later
|
|
57
|
+
runs cannot silently create a second generated tree.
|
|
58
|
+
|
|
59
|
+
Dependency ranges follow a guarantee policy: every version admitted by the
|
|
60
|
+
consumer declaration must satisfy Banhaten's requirement. Broader semver ranges
|
|
61
|
+
are safely narrowed when possible and trigger an install hint; partial overlaps,
|
|
62
|
+
disjoint ranges, and opaque package protocols fail without writes. A lockfile is
|
|
63
|
+
never accepted instead of that manifest guarantee. When the manifest is already
|
|
64
|
+
safe, the CLI verifies the bounded installed resolution and npm lock state;
|
|
65
|
+
stale or unverifiable lock state keeps a project-rooted install action visible.
|
|
66
|
+
|
|
67
|
+
Command flags:
|
|
68
|
+
|
|
69
|
+
- `--cwd <path>` runs `init`, `add`, `diff`, `update`, or `doctor` against another project directory.
|
|
70
|
+
- `--dry-run` previews `init`, `add`, or `update` writes.
|
|
71
|
+
- `--force` replaces locally modified generated files after you review `banhaten diff`.
|
|
72
|
+
- `--json` prints machine-readable output for commands that show it above.
|
|
73
|
+
|
|
49
74
|
Global flags:
|
|
50
75
|
|
|
51
|
-
- `--
|
|
52
|
-
- `--dry-run` previews writes.
|
|
53
|
-
- `--force` rewrites generated files even when already current.
|
|
54
|
-
- `--json` prints machine-readable output where supported.
|
|
76
|
+
- `--help` or `-h` prints help.
|
|
55
77
|
- `--silent` or `-s` suppresses normal command output.
|
|
56
78
|
- `--yes` or `-y` is accepted for non-interactive scripts.
|
|
57
79
|
- `--version` or `-v` prints the CLI version.
|
|
58
80
|
|
|
59
81
|
## Generated File Ownership
|
|
60
82
|
|
|
61
|
-
Banhaten is a source registry.
|
|
83
|
+
Banhaten is a source registry. The install receipt records the exact generated hash for every managed file. Unmodified files update automatically; locally modified component files and token blocks are never replaced unless you pass `--force`.
|
|
62
84
|
|
|
63
85
|
Use `banhaten diff` before updating if you edit generated component files locally:
|
|
64
86
|
|
|
65
87
|
```bash
|
|
66
88
|
npx banhaten diff
|
|
67
|
-
npx banhaten update button
|
|
89
|
+
npx banhaten update button --force # only after reviewing intentional replacement
|
|
68
90
|
```
|
|
69
91
|
|
|
70
92
|
Keep product-specific composition outside generated files when possible. Use local wrapper components for app behavior and keep Banhaten files focused on tokens, layout, accessibility primitives, and direction behavior.
|
|
@@ -73,6 +95,13 @@ Keep product-specific composition outside generated files when possible. Use loc
|
|
|
73
95
|
|
|
74
96
|
Every component must style through Banhaten CSS variables, component aliases, or documented exception-ledger values. Raw colors, pixel values, opacity utilities, z-index utilities, durations, and shadow literals are blocked by the component token check.
|
|
75
97
|
|
|
98
|
+
Structured token values and aliases are authored in the owned fragments under
|
|
99
|
+
`tokens/source/`; `tokens/banhaten.tokens.json` is their compiled publication
|
|
100
|
+
artifact. Tailwind mappings, keyframes, global and accessibility rules, and
|
|
101
|
+
typography utilities are authored in `tokens/banhaten.utilities.css`.
|
|
102
|
+
`registry/styles/globals.css` is generated from the compiled token catalog and
|
|
103
|
+
the utility source; neither generated file should be edited directly.
|
|
104
|
+
|
|
76
105
|
Token modes:
|
|
77
106
|
|
|
78
107
|
- Color mode: light and dark.
|
|
@@ -80,6 +109,11 @@ Token modes:
|
|
|
80
109
|
- Radius mode: `default`, `rounded`, `sharp`.
|
|
81
110
|
- Direction: inherited LTR or RTL, with component-level `dir` support where needed.
|
|
82
111
|
|
|
112
|
+
The default appearance is the `blue` brand theme composed with the achromatic
|
|
113
|
+
`gray` neutral scale. This keeps page, card, border, and muted surfaces neutral
|
|
114
|
+
while links, focus states, and primary actions remain blue. The `gray` theme is
|
|
115
|
+
still a separate monochrome brand option; it changes the brand roles as well.
|
|
116
|
+
|
|
83
117
|
Example:
|
|
84
118
|
|
|
85
119
|
```tsx
|
|
@@ -95,23 +129,41 @@ Typography utilities are generated as `.bh-text-*` classes and map directly to t
|
|
|
95
129
|
|
|
96
130
|
## Registry Formats
|
|
97
131
|
|
|
98
|
-
Banhaten maintains
|
|
132
|
+
Banhaten maintains component-owned registry sources and two compiled
|
|
133
|
+
publication artifacts:
|
|
99
134
|
|
|
100
|
-
- `registry/
|
|
135
|
+
- `registry/catalog/components/<id>.json` owns each component contract, while
|
|
136
|
+
`registry/catalog/base.json` and `manifest.json` own the shared contract and
|
|
137
|
+
publication order.
|
|
138
|
+
- `registry/index.json` is the compiled Banhaten artifact used by the CLI. It
|
|
139
|
+
includes an exhaustive, module-aware `supportedExports` runtime contract plus
|
|
140
|
+
non-exhaustive `parts` anatomy, RTL behavior, examples, files, and
|
|
141
|
+
dependencies.
|
|
101
142
|
- `registry.json` is a generated shadcn-compatible export for tools that expect the public shadcn registry schema.
|
|
102
143
|
|
|
103
|
-
|
|
144
|
+
Compile both registry publication artifacts after authored catalog changes:
|
|
104
145
|
|
|
105
146
|
```bash
|
|
106
147
|
npm run registry:export
|
|
107
148
|
```
|
|
108
149
|
|
|
150
|
+
`supportedExports` is checked against the installed TypeScript modules during
|
|
151
|
+
`npm run registry:check`; a renamed, moved, added, or removed runtime export
|
|
152
|
+
fails the release gate. Run `npm run registry:exports` only after reviewing an
|
|
153
|
+
intentional public runtime API change. Type-only exports are outside this
|
|
154
|
+
manifest. `parts` remains an ordered composition aid and does not claim API
|
|
155
|
+
completeness.
|
|
156
|
+
|
|
109
157
|
## Documentation
|
|
110
158
|
|
|
111
159
|
Primary docs live in the playground and render live registry-backed previews, install commands, source snippets, API tables, registry files, RTL behavior, and copyable code panels.
|
|
112
160
|
|
|
113
161
|
Markdown docs live in `docs/design-system/components`. They are checked for install, API, examples, token contract, RTL rules, and accessibility sections.
|
|
114
162
|
|
|
163
|
+
Launch guides cover [installation](docs/design-system/installation.md), [direction and localization](docs/design-system/direction-and-localization.md), [form recipes](docs/design-system/form-recipes.md), [density and elevation](docs/design-system/density-and-elevation.md), the [support matrix](docs/design-system/support-matrix.md), and the [release policy](docs/design-system/release-policy.md).
|
|
164
|
+
|
|
165
|
+
The durable [launch comparison with shadcn/ui](docs/design-system/launch-comparison-shadcn.md) records every audited area, remediation, verification gate, the closed 910/910 contrast contract, and deliberate non-copying decisions.
|
|
166
|
+
|
|
115
167
|
Useful commands:
|
|
116
168
|
|
|
117
169
|
```bash
|
package/SECURITY.md
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# Security Policy
|
|
2
|
+
|
|
3
|
+
## Supported versions
|
|
4
|
+
|
|
5
|
+
Until Banhaten reaches 1.0, security fixes are applied to the latest published minor release. Consumers should keep the CLI and copied registry components current.
|
|
6
|
+
|
|
7
|
+
## Reporting a vulnerability
|
|
8
|
+
|
|
9
|
+
Report vulnerabilities privately through GitHub’s security-advisory workflow for this repository. Do not open a public issue containing exploit details, credentials, or consumer data.
|
|
10
|
+
|
|
11
|
+
Include the affected Banhaten version, component or CLI command, reproduction steps, impact, and any known mitigation. Maintainers will acknowledge a complete report, assess severity, and coordinate a fix and disclosure.
|
|
12
|
+
|
|
13
|
+
## Scope
|
|
14
|
+
|
|
15
|
+
The CLI, registry source, generated CSS, dependency declarations, documentation application, and release artifacts are in scope. Vulnerabilities in an upstream dependency should also be reported to that upstream project when appropriate.
|
|
@@ -3,8 +3,17 @@
|
|
|
3
3
|
Use these docs with the live playground.
|
|
4
4
|
|
|
5
5
|
- [Registry and CLI](./registry-and-cli.md): registry formats, generated-file ownership, CLI commands, and schema behavior.
|
|
6
|
+
- [Installation](./installation.md): Vite, Next.js/framework-neutral setup, fonts, direction, and safe updates.
|
|
6
7
|
- [Token Governance](./token-governance.md): token-only component rules, exception ledger, and public override surface.
|
|
7
8
|
- [Appearance Presets](./appearance-presets.md): theme and radius mode guidance.
|
|
9
|
+
- [Direction and Localization](./direction-and-localization.md): inherited LTR/RTL and product localization responsibilities.
|
|
10
|
+
- [Form Recipes](./form-recipes.md): accessible Field composition, validation, selection, dates, and RTL.
|
|
11
|
+
- [Density and Elevation](./density-and-elevation.md): supported size contracts and semantic shadow layers.
|
|
12
|
+
- [Support Matrix](./support-matrix.md): framework, runtime, browser, font, and package-manager baseline.
|
|
13
|
+
- [Release Policy](./release-policy.md): stability tiers, versioning, deprecation, and launch gates.
|
|
14
|
+
- [Roadmap](./roadmap.md): explicitly deferred product-specific components and promotion gates.
|
|
15
|
+
- [Launch Comparison](./launch-comparison-shadcn.md): the complete shadcn/ui benchmark, remediation register, and deliberate differences.
|
|
16
|
+
- [Component Docs Pattern](./component-docs-pattern.md): the Base / Anatomy / Alternatives shape every playground component page follows.
|
|
8
17
|
- [Components](./components/README.md): component markdown catalog.
|
|
9
18
|
- [Icon System](./icons.md): icon guidance and explorer notes.
|
|
10
19
|
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# Adoption Quality Remediation
|
|
2
|
+
|
|
3
|
+
This checklist turns the Field Index audit into an implementation program. The
|
|
4
|
+
work is ordered so application recipes depend on stable component contracts,
|
|
5
|
+
and enforcement depends on documented recipes.
|
|
6
|
+
|
|
7
|
+
## 1. Shared control density
|
|
8
|
+
|
|
9
|
+
- [x] Add the semantic densities `compact` (32px), `default` (36px), and
|
|
10
|
+
`comfortable` (40px) to Input, Select, Date Picker, Button, Button Group,
|
|
11
|
+
Segmented Control, and Toolbar controls.
|
|
12
|
+
- [x] Keep existing component-specific `size` props as compatibility aliases.
|
|
13
|
+
- [x] Add a cross-component conformance example and automated height checks.
|
|
14
|
+
- [x] Document the semantic density matrix and precedence rules.
|
|
15
|
+
|
|
16
|
+
Acceptance: controls using the same `density` render at the same physical
|
|
17
|
+
height, regardless of their legacy size names.
|
|
18
|
+
|
|
19
|
+
## 2. Truthful machine-readable defaults
|
|
20
|
+
|
|
21
|
+
- [x] Add explicit capability defaults to the registry schema.
|
|
22
|
+
- [x] Stop inferring defaults from the first capability value.
|
|
23
|
+
- [x] Record explicit defaults for the control family.
|
|
24
|
+
- [x] Validate that every recorded default belongs to its capability list.
|
|
25
|
+
|
|
26
|
+
Acceptance: generated API documentation agrees with runtime defaults.
|
|
27
|
+
|
|
28
|
+
## 3. Input icon and shortcut contracts
|
|
29
|
+
|
|
30
|
+
- [x] Replace ambiguous icon booleans with explicit `showAtSign` and `showInfo`
|
|
31
|
+
props while retaining deprecated aliases.
|
|
32
|
+
- [x] Add a reusable keyboard-shortcut composition to Kbd.
|
|
33
|
+
- [x] Make Input and Toolbar Search use the shared shortcut composition.
|
|
34
|
+
- [x] Document search fields and date fields without implicit icons.
|
|
35
|
+
|
|
36
|
+
Acceptance: a generic leading-icon request can no longer accidentally produce
|
|
37
|
+
an at-sign in new code, and shortcuts use consistent keycaps.
|
|
38
|
+
|
|
39
|
+
## 4. Segmented selection and application recipes
|
|
40
|
+
|
|
41
|
+
- [x] Add a content-width Segmented Control with an optional non-interactive
|
|
42
|
+
label segment.
|
|
43
|
+
- [x] Add a canonical Collection Filter Bar recipe.
|
|
44
|
+
- [x] Add a canonical Results Toolbar recipe with cards-per-row selection.
|
|
45
|
+
- [x] Cover responsive, LTR, and RTL compositions.
|
|
46
|
+
|
|
47
|
+
Acceptance: the controls visible in the Field Index screenshot can be composed
|
|
48
|
+
without raw heights, padding, radii, or bespoke segmented buttons.
|
|
49
|
+
|
|
50
|
+
## 5. Agent and consumer adoption contract
|
|
51
|
+
|
|
52
|
+
- [x] Install `.banhaten/USAGE.md` during `banhaten init`.
|
|
53
|
+
- [x] Add machine-readable recommendation and avoidance guidance to relevant
|
|
54
|
+
registry entries.
|
|
55
|
+
- [x] Add a read-only `banhaten doctor` command for version, drift, raw control
|
|
56
|
+
geometry, ambiguous icon props, and native-control diagnostics.
|
|
57
|
+
- [x] Test text and JSON doctor output.
|
|
58
|
+
|
|
59
|
+
Acceptance: an agent receives actionable rules before composing a page, and a
|
|
60
|
+
consumer can detect the most common forms of design-system drift.
|
|
61
|
+
|
|
62
|
+
## 6. Documentation reliability
|
|
63
|
+
|
|
64
|
+
- [x] Replace fixed multi-column component grids with container-safe layouts.
|
|
65
|
+
- [x] Make documentation section anchors compatible with the hash router.
|
|
66
|
+
- [x] Stabilize calendar tests by controlling the displayed month.
|
|
67
|
+
- [x] Add navigation and overflow regression tests.
|
|
68
|
+
|
|
69
|
+
Acceptance: documentation examples do not overlap and section links preserve
|
|
70
|
+
the active component page.
|
|
71
|
+
|
|
72
|
+
## 7. Visual and governance gates
|
|
73
|
+
|
|
74
|
+
- [x] Add visual baselines for the control family and the two golden recipes.
|
|
75
|
+
- [x] Add critical control-text contrast checks rather than relying only on the
|
|
76
|
+
frozen global contrast debt.
|
|
77
|
+
- [x] Generate a recurring-gap promotion report from background scenarios.
|
|
78
|
+
- [x] Document the promotion rule for gaps that recur in three or more
|
|
79
|
+
backgrounds.
|
|
80
|
+
|
|
81
|
+
Acceptance: component-family drift fails CI, critical controls have explicit
|
|
82
|
+
contrast protection, and recurring application gaps become owned system work.
|
|
83
|
+
|
|
84
|
+
## Validation
|
|
85
|
+
|
|
86
|
+
- [x] Registry, token, documentation, CLI, component, and browser checks pass.
|
|
87
|
+
- [x] The repository remains free of generated-artifact drift.
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Agent usage
|
|
2
|
+
|
|
3
|
+
`banhaten init` installs `.banhaten/USAGE.md` into every consumer project. Include that file in coding-agent context so generated and redesigned screens use registry defaults and recipes instead of reconstructing the visual language from memory.
|
|
4
|
+
|
|
5
|
+
The workflow is intentionally inspectable:
|
|
6
|
+
|
|
7
|
+
1. `banhaten search <need>` discovers the intended primitive.
|
|
8
|
+
2. `banhaten docs <component>` returns explicit defaults, fit guidance, avoid rules, and recipes.
|
|
9
|
+
3. `banhaten view <component>` exposes the installed source contract.
|
|
10
|
+
4. `banhaten doctor` reports installed-version drift, local managed-file drift, deprecated ambiguous props, raw geometry overrides, native date/select controls, and missing guidance.
|
|
11
|
+
5. `banhaten diff` previews registry updates without writing.
|
|
12
|
+
|
|
13
|
+
For collection screens, start with the filter-bar and results-toolbar recipes in [Form Recipes](./form-recipes.md). For mixed control rows, follow [Density and Elevation](./density-and-elevation.md).
|
|
@@ -131,7 +131,12 @@ The design system should use semantic tokens instead of importing naming pattern
|
|
|
131
131
|
|
|
132
132
|
Components consume semantic tokens and component-scoped aliases. They must not hard-code preset-specific values or Figma fallback literals in component source.
|
|
133
133
|
|
|
134
|
-
If a Figma reference exposes a literal color, size, radius, shadow, or opacity,
|
|
134
|
+
If a Figma reference exposes a literal color, size, radius, shadow, or opacity,
|
|
135
|
+
promote it into the appropriate owned fragment under `tokens/source/`, then
|
|
136
|
+
consume that token from the component. Reserve `tokens/banhaten.utilities.css`
|
|
137
|
+
for authored global CSS that cannot be represented as token data. Component
|
|
138
|
+
docs may record Figma references for audit and QA, but those literals are not
|
|
139
|
+
implementation fallbacks.
|
|
135
140
|
|
|
136
141
|
Good:
|
|
137
142
|
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# Component documentation pattern
|
|
2
|
+
|
|
3
|
+
Every component page in the playground renders through one shell so the docs
|
|
4
|
+
read the same way from component to component. A page is not "documented" until
|
|
5
|
+
it follows this shape.
|
|
6
|
+
|
|
7
|
+
## The shape
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
Header
|
|
11
|
+
Anchor nav
|
|
12
|
+
1. Base the component with no options applied
|
|
13
|
+
2. Anatomy live-measured specs, mapped back to tokens
|
|
14
|
+
3. Alternatives every supported variation, one card each
|
|
15
|
+
4. Installation / Usage / Composition / API / RTL / Live Variants
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Sections 4 and below are generated from `registry/index.json` by
|
|
19
|
+
`RegistryComponentDocs`. Sections 1 to 3 are authored per component.
|
|
20
|
+
|
|
21
|
+
## Writing a page
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { ComponentDocPage, type DocAlternative } from "./shared/component-doc-page"
|
|
25
|
+
|
|
26
|
+
export function BadgePage({ tokens }: { tokens: Record<string, string> }) {
|
|
27
|
+
return (
|
|
28
|
+
<ComponentDocPage
|
|
29
|
+
componentId="badge"
|
|
30
|
+
title="Badge"
|
|
31
|
+
description="…"
|
|
32
|
+
tokens={tokens}
|
|
33
|
+
base={{ children: <Badge>Badge</Badge>, code: baseCode }}
|
|
34
|
+
anatomy={{
|
|
35
|
+
options: [
|
|
36
|
+
{ id: "size", label: "Size", values: [{ id: "sm", label: "sm" }, { id: "lg", label: "lg" }] },
|
|
37
|
+
{ id: "type", label: "Type", values: […] },
|
|
38
|
+
],
|
|
39
|
+
render: (selection) => <Badge size={selection.size as "sm" | "lg"}>Badge</Badge>,
|
|
40
|
+
}}
|
|
41
|
+
alternatives={badgeAlternatives}
|
|
42
|
+
/>
|
|
43
|
+
)
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
`playground/src/pages/BadgePage.tsx` is the reference implementation.
|
|
48
|
+
|
|
49
|
+
## Anatomy
|
|
50
|
+
|
|
51
|
+
The inspector in `playground/src/pages/shared/anatomy/` measures the rendered
|
|
52
|
+
DOM rather than reading hand-written numbers, so a spec can never drift from the
|
|
53
|
+
component that ships.
|
|
54
|
+
|
|
55
|
+
- The **first** option group becomes the rows of the spec matrix. Every value in
|
|
56
|
+
it is rendered off-screen and measured, so the matrix shows all sizes at once.
|
|
57
|
+
- Remaining groups become scrub toggles.
|
|
58
|
+
- Hovering a spec value highlights the matching segment on the diagram; hovering
|
|
59
|
+
a row switches the diagram to that variant.
|
|
60
|
+
- Each measured value is reverse-mapped to the `--bh-*` token that produced it.
|
|
61
|
+
A value with no matching token renders in the warning color with a `!` — that
|
|
62
|
+
is a real finding, not a display bug: it means the component hard-codes a
|
|
63
|
+
length instead of using the scale.
|
|
64
|
+
- Rulers and offsets are logical, so the whole diagram mirrors correctly in RTL
|
|
65
|
+
while the measurements stay identical.
|
|
66
|
+
|
|
67
|
+
Pass `measureSelector` when the rendered root is a wrapper rather than the
|
|
68
|
+
component itself.
|
|
69
|
+
|
|
70
|
+
Omit `anatomy` only for components with no inline measurable root: portal-only
|
|
71
|
+
overlays and canvas-style components.
|
|
72
|
+
|
|
73
|
+
## Enforcement
|
|
74
|
+
|
|
75
|
+
`playground/e2e/docs-consistency.spec.ts` asserts that every component and
|
|
76
|
+
pattern page renders a Base section, an Alternatives section, and an Anatomy
|
|
77
|
+
inspector with at least one measured row, and logs no console errors.
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm --prefix playground run test:browser
|
|
81
|
+
```
|