Agent docs

Kit inventory

Everything the kit provides in one derived list, components, patterns, contracts and do-nots.

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.

PageRouteContract docNote
Card/components/cardpackages/ui/docs/card.mdsurfaces, shadows, skeleton
Icon/components/iconpackages/ui/docs/icon.mdreact-icons registry, one key per concept
Spinner / Skeleton/components/spinnerpackages/ui/docs/spinner.mdbusy states, SkeletonGroup
PageSkeleton/components/page-skeletonpackages/ui/docs/page-skeleton.mdthe page-shaped Suspense fallback, promoted from speedway
CodeBlock/components/code-blockpackages/ui/docs/code-block.mdstored documents, copy, line numbers
StatTile/components/stat-tilepackages/ui/docs/stat-tile.mdheadline numbers, tones, trends
Stepper/components/stepperpackages/ui/docs/stepper.mdthe pipeline strip, promoted from three hand-builds
Kicker/components/kickerpackages/ui/docs/kicker.mdthe section-opener label, two sizes
Typography/components/typographydocs/design-language/12-typography.mdthe ramp, roles not sizes, ink ladder, mono cases

Forms#

How a reader acts and enters: buttons, inputs, pickers, chips.

PageRouteContract docNote
Button/components/buttonpackages/ui/docs/button.mdvariants, presets, promisify, badges
Input/components/inputpackages/ui/docs/input.mdsurfaces, field dials, check + toggle
Select/components/selectpackages/ui/docs/select.mdkeyboard nav, search, groups
SchemaForm/components/schema-formpackages/ui/docs/schema-form.mda form from a JSON Schema, one anatomy
Menus and pickers/components/menus-and-pickersnone yetwhich picker when: dropdown, select, facet, split, palette
Chip/components/chippackages/ui/docs/chip.mdselectable tokens
InlineEdit/components/inline-editpackages/ui/docs/inline-edit.mdclick-to-edit text
Dropzone/components/dropzonepackages/ui/docs/dropzone.mdupload entry

Feedback#

How the app talks back: status, alerts, empty and loading states, dialogs.

PageRouteContract docNote
StatusPill / StatusDot/components/statuspackages/ui/docs/status.mdthe status vocabulary
PageInfo/components/page-infopackages/ui/docs/page-info.mdthe centered-message primitive
EmptyState/components/empty-statepackages/ui/docs/empty-state.mdPageInfo preset
PageLoading / PageError/components/page-statesnone yetloading, error, list states
Alert/components/alertpackages/ui/docs/alert.mdtoned banners, actions, markdown
Modal/components/modalpackages/ui/docs/modal.mdregistry, confirm, reactive bodies
Toast/components/toastpackages/ui/docs/toast.mdpushAlert, custom controls
Tooltip/components/tooltippackages/ui/docs/tooltip.mdcolors, rich preset, interactive

Structure#

How a page is laid out: shells, titles, tabs, panels, prose.

PageRouteContract docNote
Tabs/components/tabspackages/ui/docs/tabs.mdpipeline stages, status + detail slots
Dropdown/components/dropdownpackages/ui/docs/dropdown.mdfloating panels, any trigger
AppShell/components/app-shellpackages/ui/docs/app-shell.mdsidebar + topbar chrome
PageTitle/components/page-titlepackages/ui/docs/page-title.mdpage header row, back-link slot
Markdown/components/markdownpackages/ui/docs/markdown.mdstored markdown, rendered with the kit
Breadcrumbs/components/breadcrumbspackages/ui/docs/breadcrumbs.mdthe trail and the topbar crumb
ListItem/components/list-itempackages/ui/docs/list-item.mdlist-in-card rows, row-as-link
SidePanel/components/side-panelpackages/ui/docs/side-panel.mdright column, esc-aware, resizable
Identity/components/identitypackages/ui/docs/identity.mdIdentityRow, WorkspaceSwitcher

Data#

How records are shown and filtered: tables, chips, toolbars.

PageRouteContract docNote
Table/components/tablepackages/ui/docs/table.mdlean core, look contract, row expand
DataTable/components/data-tablepackages/ui/docs/table.mdsort, filters, selection, pager
Table hooks/components/table-hookspackages/ui/docs/table.mdLayer B: sort, search, filters, selection
FacetBar/components/facet-barpackages/ui/docs/table.mdstanding facets, FilterableCell
FieldChip/components/field-chippackages/ui/docs/field-chip.mdfield and file name tokens
Chip shapes, side by side/components/chip-comparepackages/ui/docs/chip.mdChip, FieldChip, the ruled lg frame, side by side
Three toolbars, side by side/components/toolbar-comparepackages/ui/docs/table.mdkit FacetBar, walmart standing selects, speedway FilterBar

Ergonomics#

The small conveniences: copy, timestamps, the hooks underneath.

PageRouteContract docNote
CopyButton/components/copy-buttonpackages/ui/docs/copy-button.mdone-click copy with acknowledgment
Interaction hooks/components/hooksnone yetkeypress, debounce, storage, guards
Timestamp/components/timestamppackages/ui/docs/timestamp.mdrelative time, absolute, formatters
Internals/components/internalsnone yetrenderNode, 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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

@versable-git/ui · reference, canon, and method, read in place