Generated by scripts/kit-inventory.mjs; regenerate after editing the
showcase registry or a contract doc. Do not hand-edit.
Scope. This inventory covers the playground's showcase registry
(45 component pages and 27 pattern pages, every route the sidebar,
landing cards and search derive from), the kit contract docs
(36 files under packages/ui/docs/), and the 266 generated
do-nots. It does not cover the design canon's prose (see
docs/design-language/), the app-patterns recipes, exported symbols
that have no showcase page, or anything in a consumer app. Ask it
"does the kit provide X", not "is X well designed".
Query: node scripts/kit-inventory.mjs --find <term> · drift: --check.
Conformance is existence, checked against the real source. The
kit's conformance spine is the existence law: the prop exists on the
component you import, the token resolves in the theme you run, the
route serves the page it names, read from the mounted source itself,
never from a paraphrase of it. This inventory and the consumer bin are
that law's instruments; anything judgmental beyond existence belongs
to a reading pass a person invokes (prompts/claims.md).
Components (45)#
Foundations#
The surfaces and glyphs everything else is built from.
| Page | Route | Contract doc | Note |
|---|---|---|---|
| Card | /components/card | packages/ui/docs/card.md | surfaces, shadows, skeleton |
| Icon | /components/icon | packages/ui/docs/icon.md | react-icons registry, one key per concept |
| Spinner / Skeleton | /components/spinner | packages/ui/docs/spinner.md | busy states, SkeletonGroup |
| PageSkeleton | /components/page-skeleton | packages/ui/docs/page-skeleton.md | the page-shaped Suspense fallback, promoted from speedway |
| CodeBlock | /components/code-block | packages/ui/docs/code-block.md | stored documents, copy, line numbers |
| StatTile | /components/stat-tile | packages/ui/docs/stat-tile.md | headline numbers, tones, trends |
| Stepper | /components/stepper | packages/ui/docs/stepper.md | the pipeline strip, promoted from three hand-builds |
| Kicker | /components/kicker | packages/ui/docs/kicker.md | the section-opener label, two sizes |
| Typography | /components/typography | docs/design-language/12-typography.md | the ramp, roles not sizes, ink ladder, mono cases |
Forms#
How a reader acts and enters: buttons, inputs, pickers, chips.
| Page | Route | Contract doc | Note |
|---|---|---|---|
| Button | /components/button | packages/ui/docs/button.md | variants, presets, promisify, badges |
| Input | /components/input | packages/ui/docs/input.md | surfaces, field dials, check + toggle |
| Select | /components/select | packages/ui/docs/select.md | keyboard nav, search, groups |
| SchemaForm | /components/schema-form | packages/ui/docs/schema-form.md | a form from a JSON Schema, one anatomy |
| Menus and pickers | /components/menus-and-pickers | none yet | which picker when: dropdown, select, facet, split, palette |
| Chip | /components/chip | packages/ui/docs/chip.md | selectable tokens |
| InlineEdit | /components/inline-edit | packages/ui/docs/inline-edit.md | click-to-edit text |
| Dropzone | /components/dropzone | packages/ui/docs/dropzone.md | upload entry |
Feedback#
How the app talks back: status, alerts, empty and loading states, dialogs.
| Page | Route | Contract doc | Note |
|---|---|---|---|
| StatusPill / StatusDot | /components/status | packages/ui/docs/status.md | the status vocabulary |
| PageInfo | /components/page-info | packages/ui/docs/page-info.md | the centered-message primitive |
| EmptyState | /components/empty-state | packages/ui/docs/empty-state.md | PageInfo preset |
| PageLoading / PageError | /components/page-states | none yet | loading, error, list states |
| Alert | /components/alert | packages/ui/docs/alert.md | toned banners, actions, markdown |
| Modal | /components/modal | packages/ui/docs/modal.md | registry, confirm, reactive bodies |
| Toast | /components/toast | packages/ui/docs/toast.md | pushAlert, custom controls |
| Tooltip | /components/tooltip | packages/ui/docs/tooltip.md | colors, rich preset, interactive |
Structure#
How a page is laid out: shells, titles, tabs, panels, prose.
| Page | Route | Contract doc | Note |
|---|---|---|---|
| Tabs | /components/tabs | packages/ui/docs/tabs.md | pipeline stages, status + detail slots |
| Dropdown | /components/dropdown | packages/ui/docs/dropdown.md | floating panels, any trigger |
| AppShell | /components/app-shell | packages/ui/docs/app-shell.md | sidebar + topbar chrome |
| PageTitle | /components/page-title | packages/ui/docs/page-title.md | page header row, back-link slot |
| Markdown | /components/markdown | packages/ui/docs/markdown.md | stored markdown, rendered with the kit |
| Breadcrumbs | /components/breadcrumbs | packages/ui/docs/breadcrumbs.md | the trail and the topbar crumb |
| ListItem | /components/list-item | packages/ui/docs/list-item.md | list-in-card rows, row-as-link |
| SidePanel | /components/side-panel | packages/ui/docs/side-panel.md | right column, esc-aware, resizable |
| Identity | /components/identity | packages/ui/docs/identity.md | IdentityRow, WorkspaceSwitcher |
Data#
How records are shown and filtered: tables, chips, toolbars.
| Page | Route | Contract doc | Note |
|---|---|---|---|
| Table | /components/table | packages/ui/docs/table.md | lean core, look contract, row expand |
| DataTable | /components/data-table | packages/ui/docs/table.md | sort, filters, selection, pager |
| Table hooks | /components/table-hooks | packages/ui/docs/table.md | Layer B: sort, search, filters, selection |
| FacetBar | /components/facet-bar | packages/ui/docs/table.md | standing facets, FilterableCell |
| FieldChip | /components/field-chip | packages/ui/docs/field-chip.md | field and file name tokens |
| Chip shapes, side by side | /components/chip-compare | packages/ui/docs/chip.md | Chip, FieldChip, the ruled lg frame, side by side |
| Three toolbars, side by side | /components/toolbar-compare | packages/ui/docs/table.md | kit FacetBar, walmart standing selects, speedway FilterBar |
Ergonomics#
The small conveniences: copy, timestamps, the hooks underneath.
| Page | Route | Contract doc | Note |
|---|---|---|---|
| CopyButton | /components/copy-button | packages/ui/docs/copy-button.md | one-click copy with acknowledgment |
| Interaction hooks | /components/hooks | none yet | keypress, debounce, storage, guards |
| Timestamp | /components/timestamp | packages/ui/docs/timestamp.md | relative time, absolute, formatters |
| Internals | /components/internals | none yet | renderNode, markdown-lite, accent, portal |
Patterns (27)#
Layout and navigation#
Dashboards. Headline numbers and split layouts for overview pages.
- Dashboard stat groups (
/patterns/dashboard-stats): headline numbers as stat tiles, auto-fit grid - Split cards (
/patterns/split-cards): two-pane split, hairline row dividers - Entrance cards (
/patterns/entrance-cards): one small card per destination, a sentence of purpose, the arrow in the toolbar
Structure. Page headers, sidebars, and title composites.
- Page title variants (
/patterns/page-title-variants): plain icon, themed chip, title-side status pill - Job title composite (
/patterns/job-title): mono run suffix, id copy affordance, status pill (D6, fresh) - Sidebar anatomy (
/patterns/sidebar-anatomy): grouped rail, known-only counts, identity footer
Loading. Skeletons matched to the shape and route they stand in for.
- Shape-matched skeleton (
/patterns/shape-matched-skeleton): page and placeholder share one container map - Route-matched boot skeletons (
/patterns/boot-skeletons): the boot frame dispatches on pathname
Overlays. Drawers, panels, and dialogs layered over the page.
- Claimable peek panel (
/patterns/peek-panel): one drawer slot, claim-and-evict semantics - Confirm-and-report action (
/patterns/confirm-and-report): close-then-toast: the dialog is gone before the request settles
Typography. Composites where two or more type roles meet on one shipping screen.
- Typography composites (
/patterns/typography-composites): title stacks, label and value grids, identity rows, message text
Workflows and activity#
Workflows. Progress and stage indication for multi-step jobs.
- Workflow stepper (
/patterns/workflow-stepper): numbered knobs, completion-colored connectors - Top loading bar (
/patterns/top-loading-bar): 90ms grace, eased trickle, completes on arrival
Activity. Timestamped feeds of what happened lately, capped and grouped.
- Recent activity feed card (
/patterns/recent-activity-feed): tone dots, day groups, connector line, load more
Forms and entry#
Forms. Upload and entry composites proven on shipping screens.
- Compact dropzone card (
/patterns/compact-dropzone): the dashed row on a borderless surface, files beneath - Searchable attach list (
/patterns/searchable-attach-list): search Input, running count, checkbox rows, scoped Attach
Module settings. The four V1 console modules rendered from their schemas by SchemaForm, with the app's slots stubbed.
- Module settings: content generation (
/patterns/module-content-generation): fields table with prompt and rules in the row, templates as presets, preview beside - Module settings: image generation (
/patterns/module-image-generation): generate or edit as mode cards, colour swatches, compact dropzone, a warning status line - Module settings: attribute normalization (
/patterns/module-attribute-normalization): rows seeded from the file, a fetched multiselect per row, coverage hints - Module settings: part type matching (
/patterns/module-part-type-matching): the smallest module: a checklist with sample hints, an admin-only field, a match preview
Bulk actions. Selection-driven toolbars that grow under a table once rows are picked.
- Bulk selection action bar (
/patterns/bulk-selection-bar): live count in the bar, action label carries the count
Data and access#
Auth and access. Signed-out shells, the account menu, and who holds which role.
- Auth card shell (
/patterns/auth-card-shell): centered card shell every signed-out screen wraps in - Account menu (
/patterns/account-menu): identity trigger, workspace line, colorless sign out - Member row with inline role control (
/patterns/member-row-inline-role): role Select, remove behind confirm, pending invite state
Data. Identity and file tokens that open a preview, and labeled data grids.
- Part identity trigger (
/patterns/part-identity): icon-led preview button, mono SKU peek link - File chip (
/patterns/file-chip): mid-truncated filename token, opens a preview - Attribute / spec grid (
/patterns/attribute-spec-grid): labeled dl grid, mono keys, critical + provenance rows
Admission rules, tested against the registry#
Five rules say where an entry belongs. Each was tested against the registry's actual categorization; a disagreement below is a finding to rule on (either the entry is misfiled or the rule is wrong), never a silent refile. The rules were derived from this same registry, so agreement proves the categorization is internally consistent and gives a future entry a placement rule; it is not evidence of predictive power on surfaces nobody has categorized yet.
- Component versus pattern. An entry with a kit export and a contract doc is a component page; an entry distilled from a shipping screen that composes two or more exports is a pattern, and patterns carry no contract doc of their own. Test: component pages missing a doc: Menus and pickers, Page States, Interaction hooks, Internals; no pattern carries one.
- A component's group is its primary verb, read from its name first. Draw goes to Foundations, enter or act to Forms, report back to Feedback, arrange the page to Structure, list records to Data, assist a value to Ergonomics. The name decides before the note, because a note may cite neighbours a comparison touches. Test (keyword form of the verb table): 45/45 agree.
- A pattern's section is the question it answers. Where content sits: Layout and navigation. When work advances: Workflows and activity. How data is entered: Forms and entry. Who acts or which record: Data and access. Test (keyword form): 27/27 agree.
- A pattern group names a shipping-screen shape, never a component family. Dashboards, Module settings and Bulk actions pass on sight; the Typography pattern group shares a component family's name and is admitted because its entries are composites proven on screens, which is the distinction that matters.
- One listing per route. Kinship across families rides
related, never a second listing. Test: no route is listed twice.
Do-nots#
266 rules live in docs/DO-NOTS.md, regenerated from the contract
docs' Banned sections, the canon, and the recipes. This inventory
indexes them for --find and does not repeat them.