@appinternalleads/ui 0.2.0

package/dist/cjs/ds/blockCatalog.js

@@ -0,0 +1,533 @@
+"use strict";
+/**
+ * **The Solarium Building Blocks catalogue — the single source of truth for the 51 blocks.**
+ *
+ * Pure data: no React, no import of the components themselves — and no text that reads like a hook
+ * call (the word "use", a capital, an opening parenthesis), because `tools/use-client.mjs` marks any
+ * module containing one as a client module, and this one must stay importable from a server
+ * component: the site's static params read it. The site's `/components/blocks` and
+ * `/playground/blocks` routes, their navigation, and the catalogue tests all read THIS list —
+ * adding a block here is what makes it discoverable, and there is no second list anywhere to keep
+ * in step. Storybook registers stories from `*.stories.tsx` as always; each entry names its story
+ * title so the site can link to it.
+ *
+ * A block is not a component FAMILY. Families (`COMPONENT_CATALOGUE`: Directory, Checklist,
+ * ThresholdFlow) own a portable document and a runtime; blocks are the reusable primitives they
+ * are built from, and ThresholdFlow is deliberately absent from this list.
+ *
+ * Source: `design_handoff_solarium_blocks_case_studies` — every ID below is the handoff's own.
+ * Reconciliation: `docs/HANDOFF-SOLARIUM-BLOCKS.md` §3. Solarium 0.2.0 (22 Sep 2026) dropped M1 and M12
+ * and added M14: 51 − 2 + 1 = 50. Batch 4 added C14, the people picker (block #51): 51.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BLOCK_CATALOGUE = exports.BLOCK_GROUPS = exports.BLOCKS_INTRODUCED = void 0;
+exports.getBlocks = getBlocks;
+exports.blockBySlug = blockBySlug;
+/** When the block catalogue shipped (YYYY-MM-DD) — compared with the families' `introduced`. */
+exports.BLOCKS_INTRODUCED = '2026-09-23';
+exports.BLOCK_GROUPS = [
+    { key: 'structure', label: 'Structure', blurb: 'Surfaces and layout — the shell, rows, grids and panels everything sits in.' },
+    { key: 'controls', label: 'Controls', blurb: 'Everything a person operates. Controlled: the host owns the value.' },
+    { key: 'display', label: 'Display', blurb: 'Status, numbers, people and media — read, not operated.' },
+    { key: 'sequence', label: 'Sequence', blurb: 'Progress through one thing. Always neutral, never hue-coded.' },
+    { key: 'overlay', label: 'Overlay', blurb: 'Layers above the page — focus-trapped, Escape-able, and returning focus.' },
+    { key: 'motion', label: 'Motion', blurb: 'Solarium 0.2.0: one duration (160ms), state transitions only — M1 and M12 dropped, M14 added. Reduced motion is decided once.' },
+];
+const S = (key, label) => ({ key, label });
+const DEFAULT = [S('default', 'Default')];
+exports.BLOCK_CATALOGUE = [
+    /* ── Structure ─────────────────────────────────────────────────────────── */
+    {
+        id: 'S1', slug: 'card-shell', name: 'Card shell', group: 'structure', status: 'implemented', origin: 'new',
+        exports: ['BlockCard'], storyTitle: 'Blocks/Display',
+        summary: 'Header · body · footer, in four states. Only the body changes between them. A summary card may drop the header.',
+        states: [S('ready', 'Ready'), S('loading', 'Loading'), S('empty', 'Empty'), S('error', 'Error'), S('headerless', 'No header')],
+        api: [
+            { prop: 'title / subtitle', type: 'string', note: 'The heading (level 2) and one line under it' },
+            { prop: 'icon · type · hue', type: 'IconName · DataType · Hue', note: 'Leading tile; hue from TYPE_HUE' },
+            { prop: 'meta', type: 'ReactNode', note: 'Right of the title — a chip, a count; never wraps' },
+            { prop: 'status', type: "'ready' | 'loading' | 'empty' | 'error'", note: 'Changes the body only' },
+            { prop: 'empty / error', type: '{ title; body; action? }', note: 'The body for those states' },
+            { prop: 'hint / actions', type: 'ReactNode', note: 'The footer; wraps at phone width' },
+            { prop: 'header', type: 'boolean', note: 'false: no header row; the title names the card (onboarding Completion)' },
+            { prop: 'flush', type: 'boolean', note: 'The body draws to the card edge — a mock app, a side panel (batch 3 Floating, Filter Panel)' },
+            { prop: 'footer', type: "'row' | 'stacked'", note: 'stacked: one full-width primary, the hint centred under it (batch 3 Password Expiry)' },
+        ],
+        a11y: ['Title is a level-2 heading', 'Loading body is a named progressbar', 'Error callout is role="alert"'],
+        profile: 'The loading skeleton is static (M11, no shimmer since 0.2.0); the body fades in on a status change.',
+    },
+    {
+        id: 'S2', slug: 'header-meta', name: 'Header meta', group: 'structure', status: 'implemented', origin: 'new',
+        exports: ['HeaderMeta'], storyTitle: 'Blocks/Display',
+        summary: 'A count, chip or timestamp at meta size — tabular, never wraps.',
+        states: [S('text', 'Timestamp'), S('chip', 'Chip')],
+        api: [{ prop: 'children', type: 'string | ReactNode', note: 'A string is drawn as meta text; anything else is placed as-is' }],
+        a11y: ['Plain text; tabular numerals so counts do not jitter'],
+    },
+    {
+        id: 'S3', slug: 'row', name: 'Row', group: 'structure', status: 'implemented', origin: 'existing',
+        exports: ['ListRow', 'ExternalLink'],
+        summary: 'Leading tile · title and subtitle · meta · one trailing element. ExternalLink makes the row a real link to a new tab.',
+        states: [S('default', 'Default'), S('pressable', 'Pressable'), S('link', 'Link row')],
+        api: [
+            { prop: 'icon / leading', type: 'IconName / ReactNode', note: 'The leading slot' },
+            { prop: 'title / meta / note', type: 'string / ReactNode', note: 'Title with up to two meta lines' },
+            { prop: 'trailing', type: 'ReactNode', note: 'One element on the right' },
+            { prop: 'onPress', type: '() => void', note: 'Makes the whole row a button' },
+            { prop: 'ExternalLink.href', type: 'string', note: 'A real <a target="_blank" rel="noopener noreferrer"> on web; Linking on native (onboarding Help Center)' },
+        ],
+        a11y: ['A pressable row is one button named by its title', 'A link row’s name ends with “(opens in a new tab)”'],
+    },
+    {
+        id: 'S4', slug: 'card-grid', name: 'Card grid', group: 'structure', status: 'implemented', origin: 'new',
+        exports: ['CardGrid', 'gridColumns'], storyTitle: 'Blocks/Layout',
+        summary: '1–3 columns, each at least 160px; an odd last tile never stretches.',
+        states: [S('three', 'Three cards'), S('five', 'Five cards')],
+        api: [
+            { prop: 'minItemWidth', type: 'number', note: 'Default 160' },
+            { prop: 'maxColumns', type: '1 | 2 | 3', note: 'Default 3' },
+            { prop: 'label', type: 'string', note: 'Names the grid and makes it a list' },
+        ],
+        a11y: ['With a label, a named list of listitems'],
+        density: 'Measures its own width, not the viewport, so it reflows inside a side panel.',
+    },
+    {
+        id: 'S5', slug: 'two-panel', name: 'Two-panel', group: 'structure', status: 'implemented', origin: 'new',
+        exports: ['TwoPanel', 'PanelItem', 'sidebarWidth'], storyTitle: 'Blocks/Layout',
+        summary: 'A sidebar (112–240px) beside a list; stacks below 560px of its own width.',
+        states: DEFAULT,
+        api: [
+            { prop: 'label', type: 'string', note: 'Names the sidebar navigation' },
+            { prop: 'sidebar', type: 'ReactNode', note: 'Usually PanelItems' },
+            { prop: 'PanelItem.selected / count', type: 'boolean / number', note: 'aria-current; a tabular count' },
+        ],
+        a11y: ['Sidebar is a named navigation region', 'The selected item is aria-current'],
+    },
+    {
+        id: 'S6', slug: 'divider', name: 'Divider', group: 'structure', status: 'implemented', origin: 'existing',
+        exports: [],
+        summary: 'A 1px line-soft rule, inset to the title. Never after the last row. A token, not a component.',
+        states: DEFAULT,
+        api: [{ prop: 'colors.hairline', type: 'token', note: 'From the DS context colours; or Box hairline={{ side }}' }],
+        a11y: ['Decorative — not in the accessibility tree'],
+    },
+    {
+        id: 'S7', slug: 'well', name: 'Well', group: 'structure', status: 'implemented', origin: 'existing',
+        exports: ['BrandPreview'], storyTitle: 'Blocks/Onboarding',
+        summary: 'A recessed surface for code, previews and callouts — and BrandPreview, the only place a user’s brand colours appear.',
+        states: [S('appbar', 'Preview · app bar'), S('email', 'Preview · email'), S('login', 'Preview · login'), S('invoice', 'Preview · invoice'), S('ticket', 'Preview · ticket')],
+        api: [
+            { prop: 'bg="surfaceSunken"', type: 'token', note: 'Box ground; radius blockRadii.mid' },
+            { prop: 'BrandPreview.kind', type: "'appbar' | 'email' | 'login' | 'invoice' | 'ticket'", note: 'Five mini mocks (onboarding B10)' },
+            { prop: 'BrandPreview.colors / font / logoUri', type: 'string[] / string / string', note: 'User data — text on it picks white or ink by contrast' },
+        ],
+        a11y: ['The well is decorative ground', 'BrandPreview is one image named “Preview: {brand}, {kind}”'],
+        profile: 'The preview cross-fades (M4) on every valid change.',
+    },
+    /* ── Controls ──────────────────────────────────────────────────────────── */
+    {
+        id: 'C1', slug: 'checkbox', name: 'Checkbox', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['Checkbox', 'CheckboxGroup'], storyTitle: 'Blocks/Controls',
+        summary: 'Checked, unchecked, indeterminate. A parent cycles mixed → all → none.',
+        states: [S('unchecked', 'Unchecked'), S('checked', 'Checked'), S('mixed', 'Mixed'), S('group', 'Group'), S('disabled', 'Disabled'), S('locked', 'Locked · optional')],
+        api: [
+            { prop: 'checked', type: "boolean | 'mixed'", note: 'Controlled' },
+            { prop: 'locked / describedBy', type: 'boolean / string', note: 'Always on: checked, disabled, muted; pair with "Always on" (onboarding Permissions)' },
+            { prop: 'labelSuffix', type: 'string', note: 'Muted words after the label — " (optional)"' },
+            { prop: 'onChange', type: '(next: boolean) => void', note: 'Pressing mixed reports true' },
+            { prop: 'label / description', type: 'string', note: 'The whole row is the target' },
+            { prop: 'CheckboxGroup', type: '{ options; value: T[]; onChange }', note: 'The parent is derived, never stored' },
+        ],
+        a11y: ['role="checkbox" with aria-checked, including "mixed"', 'Disabled stays visible (aria-disabled)'],
+        density: 'Row height follows density.controlH (max 44).',
+    },
+    {
+        id: 'C2', slug: 'radio', name: 'Radio', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['RadioGroup'], storyTitle: 'Blocks/Controls',
+        summary: 'Row + dot. Arrows move and select; one tab stop for the group.',
+        states: [S('default', 'Default'), S('none', 'Nothing chosen'), S('row', 'Row layout'), S('rows', 'Option rows'), S('disabled', 'Disabled')],
+        api: [
+            { prop: 'options', type: '{ value; label; description?; icon?; type? }[]', note: 'icon/type draw a leading tile (rows)' },
+            { prop: 'value / onChange', type: 'T | undefined / (T) => void', note: 'Controlled' },
+            { prop: 'row', type: 'boolean', note: 'Lay out in a wrapping row' },
+            { prop: 'variant', type: "'plain' | 'rows'", note: 'rows: bordered option rows with a fading 2px ring (onboarding B3)' },
+        ],
+        a11y: ['radiogroup / radio with aria-checked', 'Roving tabindex: Tab reaches the checked item', 'Arrows move and select, wrapping; Home/End jump'],
+        profile: 'The dot scales in at 160ms (M7); reduced motion jumps.',
+    },
+    {
+        id: 'C3', slug: 'switch', name: 'Switch', group: 'controls', status: 'implemented', origin: 'existing',
+        exports: ['Switch'], storyTitle: 'Blocks/Controls',
+        summary: 'Immediate effect, no Save. The on colour follows the profile.',
+        states: [S('on', 'On'), S('off', 'Off'), S('disabled', 'Disabled')],
+        api: [{ prop: 'value / onChange', type: 'boolean / (next) => void', note: 'Controlled' }, { prop: 'aria-label', type: 'string', note: 'Required — a switch has no visible label of its own' }],
+        a11y: ['role="switch" with its checked state', 'Off track is controlBorder (≥3:1, WCAG 1.4.11) in every profile'],
+        profile: 'On: the coral accent (0.2.0 retired the mint "blocks" profile).',
+    },
+    {
+        id: 'C4', slug: 'selectable-card', name: 'Selectable card', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['SelectableCardGroup', 'ToggleCardGroup'], storyTitle: 'Blocks/Controls',
+        summary: 'Cards as one radio group — or, as ToggleCardGroup, several on at once with a check and a max.',
+        states: [S('default', 'Default'), S('none', 'Nothing chosen'), S('multi', 'Multi-select'), S('max', 'Multi · at max')],
+        api: [
+            { prop: 'options', type: '{ value; title; description?; meta? }[]', note: '' },
+            { prop: 'value / onChange', type: 'T / (T) => void', note: 'Controlled' },
+            { prop: 'ToggleCardGroup.value / onChange', type: 'T[] / (T[]) => void', note: 'Multi-select (onboarding B4)' },
+            { prop: 'ToggleCardGroup.max', type: 'number', note: 'At max, unselected cards disable' },
+        ],
+        a11y: ['SelectableCardGroup: the same radiogroup contract as C2', 'ToggleCardGroup: toggle buttons with aria-pressed; disabled at max stays visible'],
+        profile: 'The ring fades and the check scales .6→1 at 160ms (M7).',
+    },
+    {
+        id: 'C5', slug: 'toggle-group', name: 'Toggle group', group: 'controls', status: 'implemented', origin: 'existing',
+        exports: ['SegmentedControl'],
+        summary: 'Segmented, single select. Past five options, use Select.',
+        states: DEFAULT,
+        api: [{ prop: 'options / value / onSelect', type: '{ value; label }[] / T / (T) => void', note: 'Controlled' }],
+        a11y: ['Each segment is a named button'],
+    },
+    {
+        id: 'C6', slug: 'select', name: 'Select', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['Select'], storyTitle: 'Blocks/Controls',
+        summary: 'A real <select> on the web; a field that opens a sheet of radios on native.',
+        states: [S('chosen', 'Chosen'), S('placeholder', 'Placeholder'), S('disabled', 'Disabled')],
+        api: [
+            { prop: 'options', type: '{ value; label }[]', note: '' },
+            { prop: 'value / onChange', type: 'T | undefined / (T) => void', note: 'Controlled' },
+            { prop: 'placeholder', type: 'string', note: 'A disabled first option on the web' },
+        ],
+        a11y: ['The platform select — its own keyboard, AT and mobile picker', 'Native: aria-haspopup="listbox"; a sheet of radios'],
+        density: 'Height is density.controlH.',
+    },
+    {
+        id: 'C7', slug: 'field', name: 'Field', group: 'controls', status: 'implemented', origin: 'existing',
+        exports: ['Input', 'AmountField', 'parseAmount'], storyTitle: 'Blocks/Controls',
+        summary: 'Prefix, suffix, read-only, disabled. Validate on blur. AmountField shows 2,000 at rest and the typed text while editing.',
+        states: [S('affixed', 'Prefix + suffix'), S('readonly', 'Read-only'), S('disabled', 'Disabled'), S('error', 'Error'), S('amount', 'Amount field')],
+        api: [
+            { prop: 'prefix / suffix', type: 'string', note: 'Never part of the value' },
+            { prop: 'readOnly', type: 'boolean', note: 'Well + mono; still selectable' },
+            { prop: 'disabled', type: 'boolean', note: 'Well + secondary ink; not editable' },
+            { prop: 'error', type: 'boolean', note: 'The error edge — apricot under Solarium' },
+            { prop: 'AmountField.value / onChange', type: 'number | null / (n) => void', note: 'Digits only, at most 9 (onboarding B7)' },
+        ],
+        a11y: ['A real text input; name it with the unit ("Amount in dollars")', 'aria-invalid / aria-describedby pass through', 'Focus never reformats the text — select-all-then-type replaces'],
+    },
+    {
+        id: 'C8', slug: 'number-stepper', name: 'Number stepper', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['NumberStepper'], storyTitle: 'Blocks/Controls',
+        summary: '− value +. Hold repeats; Home/End jump to the limits.',
+        states: [S('middle', 'Mid-range'), S('min', 'At minimum'), S('max', 'At maximum'), S('disabled', 'Disabled')],
+        api: [
+            { prop: 'value / onChange', type: 'number / (n) => void', note: 'Controlled' },
+            { prop: 'min / max / step', type: 'number', note: 'Buttons disable at the limits' },
+            { prop: 'format', type: '(n) => string', note: 'Words for AT: "4 seats"' },
+        ],
+        a11y: ['role="spinbutton" with aria-valuenow/min/max/text', 'ArrowUp/Down step; Home/End jump'],
+        density: 'Height is density.controlH.',
+    },
+    {
+        id: 'C9', slug: 'otp-input', name: 'One-time code', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['OtpInput'], storyTitle: 'Blocks/Controls',
+        summary: 'Six slots, 3–3. One real input underneath; paste fills every slot. Or six real inputs (mode="slots").',
+        states: [S('partial', 'Partly typed'), S('empty', 'Empty'), S('error', 'Error'), S('slots', 'Six inputs')],
+        api: [
+            { prop: 'value / onChange', type: 'string / (s) => void', note: 'Digits only' },
+            { prop: 'length / groups', type: 'number / number[]', note: 'Default 6 / [3, 3]' },
+            { prop: 'onComplete', type: '(code) => void', note: 'Fires once full' },
+            { prop: 'mode', type: "'single' | 'slots'", note: 'slots: one input per digit, "Digit n of 6" (onboarding Two Factor)' },
+            { prop: 'onSubmit / focusKey', type: '() => void / number', note: 'Enter; change focusKey to refocus slot 1' },
+        ],
+        a11y: ['single: ONE labelled input with autocomplete="one-time-code"; the slots are a drawing', 'slots: each input named "Digit n of 6"; ←/→ move, Backspace goes back, a paste fills all'],
+    },
+    {
+        id: 'C10', slug: 'dropzone', name: 'Dropzone', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['Dropzone', 'FileDrop', 'checkFile', 'FileUploadWidget'], storyTitle: 'Blocks/Onboarding',
+        summary: 'One file, five faces: empty, drag-over, uploading, uploaded, refused. A real file dialog and drag-and-drop on web.',
+        states: [S('empty', 'Empty'), S('uploading', 'Uploading'), S('filled', 'Uploaded'), S('file', 'File row'), S('invalid', 'Wrong type'), S('large', 'Too large')],
+        api: [
+            { prop: 'value', type: "{ status: 'empty' | 'uploading' | 'filled' | 'invalid'; file?; progress?; reason? }", note: 'Controlled — the engine owns the file' },
+            { prop: 'onFiles', type: '(files: PickedFile[]) => void', note: 'Picked or dropped; check with checkFile(file, { accept, maxSizeMB })' },
+            { prop: 'onPick', type: '() => Promise<PickedFile[]>', note: 'Native only — the host’s picker' },
+            { prop: 'variant', type: "'media' | 'file'", note: 'Thumbnail + Replace, or a file tile' },
+            { prop: 'FileUploadWidget', type: 'UploadOperations / FileUploadConfig', note: 'The multi-file input widget — see /components/input/file-upload' },
+        ],
+        a11y: ['The empty face is a named button that opens the file dialog', 'Uploading is aria-busy with a named progressbar', 'A refused file is role="alert" with the reason in words'],
+        profile: 'Faces cross-fade in one cell (M4); the upload bar tweens (M6).',
+        density: 'Min height 64 / 76 / 96.',
+    },
+    {
+        id: 'C11', slug: 'tag-input', name: 'Tag input', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['TagInput'], storyTitle: 'Blocks/Controls',
+        summary: 'Enter or comma adds; Backspace removes the last. At most five by default.',
+        states: [S('some', 'Two tags'), S('full', 'Full'), S('empty', 'Empty'), S('filled', 'Filled · duplicate')],
+        api: [
+            { prop: 'value / onChange', type: 'string[] / (tags) => void', note: 'Trimmed, case-insensitive dedupe' },
+            { prop: 'max', type: 'number', note: 'Default 5' },
+            { prop: 'variant', type: "'outline' | 'filled'", note: 'filled: 28px tags, M14, a live helper (onboarding Tag Creation)' },
+            { prop: 'draft / error / helper / disabled', type: 'string / string / string / boolean', note: 'filled: a duplicate stays in the field and error says so' },
+        ],
+        a11y: ['A named group; each chip has "Remove {tag}"', 'Backspace in an empty field removes the last chip'],
+    },
+    {
+        id: 'C12', slug: 'color-field', name: 'Colour field', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['ColorField', 'isHexColor'], storyTitle: 'Blocks/Controls',
+        summary: '#RRGGBB only, uppercase. The swatch is a colour picker (web: the browser\'s; native: a sheet of the hues). An invalid draft keeps the last good swatch; once touched it says how to fix it.',
+        states: [S('default', 'Default'), S('invalid', 'Touched and invalid')],
+        api: [
+            { prop: 'value / onChange', type: 'string / (hex) => void', note: 'onChange only for a complete #RRGGBB' },
+            { prop: 'text / onChangeText / touched', type: 'string / (raw, valid) => void / boolean', note: 'Let the caller own the raw draft (onboarding B2)' },
+            { prop: 'showLabel / fluid', type: 'boolean', note: 'Visible label; fill the column' },
+        ],
+        a11y: ['The swatch is the colour picker, named "{label} — pick a colour" (web: a real <input type="color">, keyboard-operable, coral ring on focus)', 'Touched and invalid: aria-invalid, the message linked by aria-describedby'],
+    },
+    {
+        id: 'C13', slug: 'button', name: 'Button', group: 'controls', status: 'implemented', origin: 'existing',
+        exports: ['Button'], storyTitle: 'Blocks/Controls',
+        summary: 'Primary, ghost, outline. One primary per view; press scales, never recolours.',
+        states: [S('primary', 'Primary'), S('ghost', 'Ghost'), S('busy', 'Busy'), S('disabled', 'Disabled')],
+        api: [{ prop: 'variant', type: "'primary' | 'secondary' | 'brand' | 'outline' | 'ghost' | 'danger'", note: '' }, { prop: 'size', type: "'xsmall' | 'small' | 'medium' | 'large'", note: '28 / 36 / 44 / 52 — xsmall is the small ghost' }, { prop: 'busy', type: 'boolean', note: 'aria-busy' }, { prop: 'aria-expanded / aria-controls', type: 'boolean / string', note: 'A disclosure button — "Filters · 2" (batch 3 Filter Panel)' }],
+        a11y: ['A named button; disabled stays visible (aria-disabled)', 'busy → aria-busy'],
+        profile: 'Primary fill: accentFill; hover deepens to accentInk. 8px corners, never a pill (0.2.0).',
+    },
+    {
+        id: 'C14', slug: 'combobox', name: 'Combobox · people picker', group: 'controls', status: 'implemented', origin: 'new',
+        exports: ['Combobox', 'useCombobox', 'ComboTrigger', 'ComboPanel', 'ComboSheet'], storyTitle: 'Components/Onboarding/C14 Combobox',
+        summary: 'Block #51 (batch 4, C14 PRD 2026-09-25): server-side, multi-select people search with a draft and one apply. Table and Grid\'s bulk Assign uses it bare.',
+        states: [S('default', 'Closed'), S('hasSelection', 'Has selection'), S('open', 'Suggestions'), S('results', 'Results'), S('noResults', 'No results'), S('atMax', 'At max'), S('searchError', 'Search error')],
+        api: [
+            { prop: 'value / onChange', type: 'Person[] / (value) => void', note: 'onChange fires after a successful apply' },
+            { prop: 'operations', type: '{ search, suggest, apply, debounce? }', note: 'search(q, cursor): 20 per page; 250ms debounce by default' },
+            { prop: 'applyLabel / placeholder / max / disabled', type: 'string / string / number / boolean', note: 'Default "Assign ({n})"; max 0 = no limit' },
+            { prop: 'bare / placement / align / toasts', type: "boolean / 'bottom' | 'top' / 'start' | 'end' / boolean", note: 'Integration props Table and Grid use' },
+            { prop: 'viewport', type: "'web' | 'mobile'", note: 'mobile: a full-screen sheet' },
+        ],
+        a11y: [
+            'The input is role="combobox" with aria-expanded, aria-controls, aria-activedescendant and aria-autocomplete="list"',
+            'The list is role="listbox" aria-multiselectable; rows are options with aria-selected (aria-disabled at max)',
+            '↑/↓ move, Space toggles the active row, Enter applies, Esc closes and returns focus to the trigger; the result count is announced',
+        ],
+        density: 'Control height from the density; rows stay 44px.',
+    },
+    /* ── Display ───────────────────────────────────────────────────────────── */
+    {
+        id: 'D1', slug: 'chip', name: 'Chip', group: 'display', status: 'implemented', origin: 'new',
+        exports: ['MetaChip', 'StateChip'], storyTitle: 'Blocks/Display',
+        summary: 'Status, count, field. Meaning in the label, not the colour. StateChip cross-fades its label (M9).',
+        states: [S('status', 'Status'), S('count', 'Count'), S('field', 'Field'), S('swap', 'Status chip · cross-fade')],
+        api: [
+            { prop: 'kind', type: "'status' | 'count' | 'field'", note: 'A discriminated union' },
+            { prop: 'status / type / hue', type: 'Status / DataType / Hue', note: 'Per kind' },
+            { prop: 'StateChip.tone', type: "'neutral' | 'success' | 'attention'", note: 'The header chip of every onboarding component (B8)' },
+            { prop: 'StateChip.dot', type: 'boolean', note: 'Default on for success/attention, off for neutral; batch 3 turns it on for a live neutral ("Now", "1 pending")' },
+        ],
+        a11y: ['The word carries the meaning; the dot is redundant'],
+        profile: 'StateChip: the new label fades in at 160ms (M9).',
+    },
+    {
+        id: 'D2', slug: 'dot', name: 'Dot', group: 'display', status: 'implemented', origin: 'new',
+        exports: ['Dot'], storyTitle: 'Blocks/Display',
+        summary: 'Status, unread, bullet. Always paired with a label.',
+        states: DEFAULT,
+        api: [{ prop: 'tone', type: "Status | 'unread' | 'bullet'", note: '' }, { prop: 'label', type: 'string', note: 'Required' }],
+        a11y: ['The label is required by the type — colour never carries meaning alone'],
+    },
+    {
+        id: 'D3', slug: 'progress-bar', name: 'Progress bar', group: 'display', status: 'implemented', origin: 'new',
+        exports: ['ProgressBar'], storyTitle: 'Blocks/Display',
+        summary: 'Mint under the limit; apricot at 80% and over, with the words "near limit". Fixed tones for uploads, shares and budgets.',
+        states: [S('low', '32%'), S('near', '86%'), S('custom', 'Custom format'), S('tones', 'Tones')],
+        api: [
+            { prop: 'value / max', type: 'number', note: 'Clamped' },
+            { prop: 'format', type: '(v, max) => string', note: 'Default n%' },
+            { prop: 'tone', type: "'limit' | 'accent' | 'neutral' | 'ink' | 'success' | 'attention'", note: 'accent 6px (upload), neutral 4px (share) — onboarding B5' },
+            { prop: 'bare / track', type: "boolean / 'band' | 'surface'", note: 'No label row; a white track inside a well' },
+        ],
+        a11y: ['role="progressbar" with aria-valuenow/max and aria-valuetext'],
+        profile: 'The fill tweens at 160ms (M6); reduced motion jumps.',
+    },
+    {
+        id: 'D4', slug: 'stat', name: 'Stat number', group: 'display', status: 'implemented', origin: 'existing',
+        exports: ['StatCard', 'TickNumber', 'StatWell'], storyTitle: 'Blocks/Display',
+        summary: 'A big tabular value and a muted label. TickNumber cross-fades a change (M5); StatWell sets a value against a total.',
+        states: [S('static', 'Stat'), S('tick', 'Cross-fade'), S('under', 'Stat well · under'), S('exact', 'Stat well · exact'), S('over', 'Stat well · over')],
+        api: [
+            { prop: 'label / value / meta', type: 'string / ReactNode', note: 'StatCard' },
+            { prop: 'TickNumber.value / label', type: 'number / string', note: 'Cross-fades on change' },
+            { prop: 'StatWell.value / total / format', type: 'number / number / (n) => string', note: 'Ink under, mint exact, apricot over (onboarding B9)' },
+        ],
+        a11y: ['TickNumber exposes only the current value', 'StatWell’s bar is a progressbar whose text says under / exact / over'],
+    },
+    {
+        id: 'D5', slug: 'avatar-group', name: 'Avatar group', group: 'display', status: 'implemented', origin: 'new',
+        exports: ['AvatarGroup'], storyTitle: 'Blocks/Display',
+        summary: '32px circles, −8px overlap, "+n" after three.',
+        states: [S('overflow', 'Five people'), S('few', 'Two people'), S('total', 'Three of 120 (band)')],
+        api: [
+            { prop: 'people', type: '{ id; name; initials }[]', note: '' }, { prop: 'max', type: 'number', note: 'Default 3' },
+            { prop: 'total', type: 'number', note: 'Everyone, when people lists only some — "+117" (batch 3 Event Reminder)' },
+            { prop: 'fill', type: "'well' | 'band'", note: 'band: line-soft ground, ink initials' },
+        ],
+        a11y: ['One image named for everyone: "Maya K., Jon L., Ana R. and 2 more"'],
+    },
+    {
+        id: 'D6', slug: 'icon-tile', name: 'Icon tile', group: 'display', status: 'implemented', origin: 'new',
+        exports: ['TypeTile'], storyTitle: 'Blocks/Display',
+        summary: 'Hue from the data type via TYPE_HUE; an override is warned about.',
+        states: [S('resting', 'Resting'), S('active', 'Active')],
+        api: [{ prop: 'type / hue', type: 'DataType / Hue', note: 'type preferred' }, { prop: 'icon / size / active', type: 'IconName / number / boolean', note: '' }],
+        a11y: ['Decorative beside its title; pass label when it stands alone'],
+    },
+    {
+        id: 'D7', slug: 'check-item', name: 'Check-list item', group: 'display', status: 'implemented', origin: 'new',
+        exports: ['CheckItem', 'CheckList'], storyTitle: 'Blocks/Display',
+        summary: 'Pass, pending, fail. Show fail only after submit.',
+        states: DEFAULT,
+        api: [{ prop: 'state', type: "'pass' | 'pending' | 'fail'", note: '' }],
+        a11y: ['Each state has its word ("Met", "Not yet", "Not met")', 'CheckList is a named list'],
+    },
+    {
+        id: 'D8', slug: 'code-block', name: 'Code block', group: 'display', status: 'implemented', origin: 'new',
+        exports: ['CodeBlock'], storyTitle: 'Blocks/Display',
+        summary: 'Mono in a well; long lines scroll inside. Copy → "Copied" for 1.6s.',
+        states: DEFAULT,
+        api: [{ prop: 'code / label', type: 'string', note: '' }, { prop: 'onCopy', type: '(code) => void | Promise', note: "The host's clipboard; the browser's by default" }],
+        a11y: ['The copy result is announced in a status region'],
+    },
+    {
+        id: 'D9', slug: 'callout', name: 'Callout', group: 'display', status: 'implemented', origin: 'new',
+        exports: ['Callout'], storyTitle: 'Blocks/Display',
+        summary: 'Says what happened and what to do. No red.',
+        states: [S('attention', 'Attention'), S('info', 'Info'), S('strong', 'Hard failure (bold)')],
+        api: [
+            { prop: 'tone', type: "'attention' | 'info'", note: '' }, { prop: 'alert', type: 'boolean', note: 'role="alert" for a just-happened failure' },
+            { prop: 'strong', type: 'boolean', note: 'A hard failure: the title at 700 (batch 3 decision §5.2) — still no red' },
+        ],
+        a11y: ['Silent by default; alert when it reports something that just happened'],
+    },
+    {
+        id: 'D10', slug: 'media-slot', name: 'Media slot', group: 'display', status: 'implemented', origin: 'new',
+        exports: ['MediaSlot'], storyTitle: 'Blocks/Display',
+        summary: 'A fixed ratio reserved before the media arrives; a QR also shows its key as text.',
+        states: DEFAULT,
+        api: [{ prop: 'ratio / label / caption', type: 'number / string / ReactNode', note: '' }],
+        a11y: ['A named image; the caption is the text form of the media'],
+    },
+    /* ── Sequence ──────────────────────────────────────────────────────────── */
+    {
+        id: 'Q1', slug: 'vertical-stepper', name: 'Vertical stepper', group: 'sequence', status: 'implemented', origin: 'new',
+        exports: ['VerticalStepper'], storyTitle: 'Blocks/Sequence',
+        summary: 'Done, current, pending, attention. Not Solarium’s hue-coded Step.',
+        states: DEFAULT,
+        api: [{ prop: 'steps', type: '{ id; label; detail?; state }[]', note: '' }],
+        a11y: ['A named list; each step names its state', 'The current step is aria-current="step"'],
+    },
+    {
+        id: 'Q2', slug: 'timeline', name: 'Horizontal timeline', group: 'sequence', status: 'implemented', origin: 'new',
+        exports: ['Timeline'], storyTitle: 'Blocks/Sequence',
+        summary: 'Columns at least 96px; scrolls inside and centres the current step. The track variant is batch 3’s delivery timeline.',
+        states: [S('wide', 'Wide'), S('narrow', 'Narrow (scrolls)'), S('track', 'Track'), S('delayed', 'Track · delayed')],
+        api: [
+            { prop: 'steps', type: '{ id; label; detail?; state; note? }[]', note: 'note: a bold apricot line — "Delayed" (track only)' },
+            { prop: 'variant', type: "'centred' | 'track'", note: 'track: 120px columns, labels left, an ink connector that fills (M6), attention as a 3px apricot ring' },
+        ],
+        a11y: ['The same list semantics as Q1, dates in each name'],
+    },
+    {
+        id: 'Q3', slug: 'dot-pager', name: 'Dot pager', group: 'sequence', status: 'implemented', origin: 'new',
+        exports: ['DotPager'], storyTitle: 'Blocks/Sequence',
+        summary: 'The active dot widens to 18px. Over seven pages, use the step counter. The accent tone is the carousel’s.',
+        states: [S('default', 'Neutral'), S('accent', 'Accent (carousel)')],
+        api: [
+            { prop: 'count / index / onChange', type: 'number / number / (i) => void', note: '' },
+            { prop: 'tone', type: "'neutral' | 'accent'", note: 'accent: 28×24 targets, 8px dot, active coral ×2.5 (onboarding B6)' },
+            { prop: 'itemLabel', type: '(i, n) => string', note: 'Default "Page n of m"' },
+        ],
+        a11y: ['Targets named "Page n of m" (or itemLabel); the active one aria-current'],
+        profile: 'The width change tweens at 160ms; reduced motion jumps.',
+    },
+    {
+        id: 'Q4', slug: 'step-counter', name: 'Step counter', group: 'sequence', status: 'implemented', origin: 'new',
+        exports: ['StepCounter'], storyTitle: 'Blocks/Sequence',
+        summary: '"Step 2 of 5 · Up next …"; the last step shows a mint "All set".',
+        states: [S('middle', 'Mid-way'), S('last', 'Last step')],
+        api: [{ prop: 'index / total / next', type: 'number / number / string', note: 'index is 0-based' }],
+        a11y: ['A polite status region'],
+    },
+    /* ── Overlay ───────────────────────────────────────────────────────────── */
+    {
+        id: 'O1', slug: 'toast', name: 'Toast', group: 'overlay', status: 'implemented', origin: 'existing',
+        exports: ['ToastProvider', 'useToast', 'NoticeToast'], storyTitle: 'Blocks/Overlay',
+        summary: 'Edge-anchored, leaves on its own, never for failures. Strings 2.2s; titled notices 5s.',
+        states: DEFAULT,
+        api: [{ prop: 'toast.show (from the useToast hook)', type: 'string | { title; body?; tone? }', note: 'One system, two shapes' }, { prop: 'dismiss', type: '() => void', note: '' }],
+        a11y: ['A polite status region — announced without taking focus', 'A dismiss button'],
+        profile: 'Fades in at 160ms — opacity only (M10, 0.2.0).',
+    },
+    {
+        id: 'O2', slug: 'collapsible', name: 'Collapsible', group: 'overlay', status: 'implemented', origin: 'new',
+        exports: ['Collapsible'], storyTitle: 'Blocks/Overlay',
+        summary: 'A row header with a chevron; the body stays mounted and is inert when closed.',
+        states: [S('closed', 'Closed'), S('open', 'Open'), S('plain', 'Plain row')],
+        api: [
+            { prop: 'title / subtitle', type: 'string', note: '' },
+            { prop: 'open / defaultOpen / onOpenChange', type: 'boolean / boolean / (open) => void', note: 'Controlled or not' },
+            { prop: 'variant / leading / meta', type: "'card' | 'plain' / ReactNode / ReactNode", note: 'plain: a role row inside a card, with a tile and a count (onboarding Permissions)' },
+        ],
+        a11y: ['aria-expanded and aria-controls on the header', 'The body is a named region; closed, it is inert and aria-hidden'],
+        profile: 'Height and chevron at 160ms (M3); reduced motion jumps.',
+    },
+    {
+        id: 'O3', slug: 'dropdown-menu', name: 'Dropdown menu', group: 'overlay', status: 'implemented', origin: 'new',
+        exports: ['Menu', 'ActionMenu'], storyTitle: 'Blocks/Overlay',
+        summary: 'At least 220 wide, 36px items, ✓ on the selected one. ActionMenu: an icon trigger, danger items that state their consequence.',
+        states: [S('choice', 'Single choice'), S('actions', 'Actions'), S('danger', 'Action menu · danger')],
+        api: [
+            { prop: 'items / value / onSelect', type: '{ value; label }[] / T / (T) => void', note: 'value makes it single-choice' },
+            { prop: 'ActionMenu.items', type: '{ value; label; detail?; tone?: "danger" }[]', note: 'Danger: apricot deep, a trash glyph, the consequence (onboarding Department Setup, Status Page)' },
+            { prop: 'ActionMenu.open / onOpenChange', type: 'boolean / (open) => void', note: 'Controlled, so a session can open with it showing' },
+            { prop: 'ActionMenu.trigger / side / align', type: "string / 'below' | 'above' / 'start' | 'end'", note: 'A text ghost trigger that opens upward — "Snooze" (batch 3 Event Reminder)' },
+        ],
+        a11y: ['Trigger: aria-haspopup="menu", aria-expanded', 'menuitemradio / menuitem; focus lands on the selection', 'Arrows, Home/End; Escape and Tab close; focus returns to the trigger'],
+    },
+    {
+        id: 'O4', slug: 'modal-popover-tooltip', name: 'Modal · Popover · Tooltip', group: 'overlay', status: 'implemented', origin: 'new',
+        exports: ['Modal', 'Popover', 'Tooltip'], storyTitle: 'Blocks/Overlay',
+        summary: 'Focus trap, Escape, focus return, verb buttons. Tooltip after 300ms.',
+        states: [S('modal', 'Modal'), S('popover', 'Popover'), S('tooltip', 'Tooltip')],
+        api: [{ prop: 'Modal.title / actions / returnFocus', type: 'string / ReactNode / () => void', note: '' }, { prop: 'Popover.trigger / label', type: 'string', note: '' }, { prop: 'Tooltip.children', type: '(triggerProps) => ReactNode', note: 'Describes a real control' }],
+        a11y: ['Modal: role="dialog", aria-modal, named by its title', 'Escape and the scrim close; focus returns', 'Tooltip: role="tooltip", aria-describedby; Escape hides'],
+    },
+    /* ── Motion ────────────────────────────────────────────────────────────── */
+    ...[
+        ['M2', 'exit', 'Exit', 'A row fades out; the node leaves only after the motion finishes.', ['usePresence'], 'state'],
+        ['M3', 'expand', 'Expand', 'A body grows while its chevron turns 180°.', ['useTween'], 'state'],
+        ['M4', 'swap', 'Swap', 'New content fades in within the same cell.', ['useSwap'], 'state'],
+        ['M5', 'tick', 'Value cross-fade', 'The old value fades out as the new one fades in, in one cell — no travel.', ['useTick', 'TickNumber'], 'state'],
+        ['M6', 'fill', 'Fill', 'A bar fills from the left; mint turns apricot near the limit.', ['useTween'], 'state'],
+        ['M7', 'select', 'Select', 'A radio dot scales in; a card’s ring appears.', ['useTween'], 'state'],
+        ['M8', 'button-phases', 'Button phases', 'Generate → Generating… → Done ✓ → idle; the label swaps.', ['useSwap'], 'state'],
+        ['M9', 'status', 'Status', 'Connect ↔ Connected — a status word cross-fades.', ['useSwap'], 'state'],
+        ['M10', 'slide-in', 'Overlay fade', 'A notice fades in — opacity only, no travel (0.2.0).', ['usePresence'], 'state'],
+        ['M11', 'skeleton', 'Skeleton', 'Static placeholder bars; the content fades in when it lands. No shimmer (0.2.0).', ['SkeletonBar'], 'state'],
+        ['M13', 'micro', 'Micro', 'Press feedback: a 0.98 scale.', ['useTween'], 'state'],
+        ['M14', 'list', 'List add / remove', 'A row added fades and settles; a row removed fades, then leaves.', ['usePresence'], 'list'],
+    ].map(([id, slug, name, summary, exports, speed]) => ({
+        id, slug: `motion-${slug}`, name: `${id} ${name}`, group: 'motion', status: 'implemented', origin: 'new',
+        exports: [...exports], storyTitle: 'Blocks/Motion', summary,
+        states: [S('play', 'Press to play')],
+        api: [{ prop: 'duration', type: `MOTION.${speed}`, note: 'Read from the motion tokens; never a literal' }],
+        a11y: ['Under reduced motion: no movement — fades in place, tweens jump'],
+        profile: speed === 'list' ? '--motion-list · 240ms' : '--motion-state · 160ms, cubic-bezier(.2,0,0,1)',
+    })),
+];
+/** The catalogue query the site runs — mirrors `getComponents`. */
+function getBlocks(opts = {}) {
+    return exports.BLOCK_CATALOGUE
+        .filter(b => !opts.group || b.group === opts.group)
+        .filter(b => !opts.status || b.status === opts.status);
+}
+function blockBySlug(slug) {
+    return exports.BLOCK_CATALOGUE.find(b => b.slug === slug);
+}
+//# sourceMappingURL=blockCatalog.js.map