@handamade/psi-mcp 0.9.0 → 0.10.0

package/README.md

@@ -1,6 +1,6 @@
 # @handamade/psi-mcp
 
-MCP server and agent-context generator for the Psi (Ψ) design system. Documents the system — the 18 React 19 components, 13 composition patterns (D47) that recipe them together with gap-annotated compose trees, every semantic token with its OKLCH derivation formula resolved across all four themes, and the usage guidance — through two read-only tools. It does not write code.
+MCP server and agent-context generator for the Psi (Ψ) design system. Documents the system — the 25 React 19 components, 13 composition patterns (D47) that recipe them together with gap-annotated compose trees, every semantic token with its OKLCH derivation formula resolved across all four themes, and the usage guidance — through two read-only tools. It does not write code.
 
 ## Connect
 

package/dist/psi-index.json

@@ -1,5 +1,5 @@
 {
- "version": "0.9.0",
+ "version": "0.10.0",
  "themes": [
   "light",
   "dark",
@@ -481,6 +481,13 @@
      "default": null,
      "description": "Label text."
     },
+    {
+     "name": "aria-label",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Accessible name when there is no visible label — a table's row-selection\ncheckbox, say. Optional, unlike IconButton's required form (D60): a\nlabelled checkbox is still the common case."
+    },
     {
      "name": "ref",
      "type": "Ref<HTMLInputElement>",
@@ -497,7 +504,7 @@
     }
    ],
    "slots": [],
-   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Checkbox\n\nNative checkbox with a built-in label; for independent binary choices.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `children` | `ReactNode` | — | no | Label text. |\n| `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input type=\"checkbox\">` element. |\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Keyboard & assistive tech\n\n| Keys | Behavior |\n|---|---|\n| Space | Toggles. Native <input type=checkbox> underneath (visually hidden). |\n\n\n## Theming\n\nOverride `--psi-checkbox-*` custom properties at any scope.\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Checkbox\n\nNative checkbox with a built-in label; for independent binary choices.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `children` | `ReactNode` | — | no | Label text. |\n| `aria-label` | `string` | — | no | Accessible name when there is no visible label — a table's row-selection checkbox, say. Optional, unlike IconButton's required form (D60): a labelled checkbox is still the common case. |\n| `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input type=\"checkbox\">` element. |\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Keyboard & assistive tech\n\n| Keys | Behavior |\n|---|---|\n| Space | Toggles. Native <input type=checkbox> underneath (visually hidden). |\n\n\n## Theming\n\nOverride `--psi-checkbox-*` custom properties at any scope.\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
   },
   {
    "name": "Switch",
@@ -829,6 +836,256 @@
    "props": [],
    "slots": [],
    "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# MenuSeparator\n\nHairline rule between Menu item groups. No props by design (D53).\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n\n\n## Keyboard & assistive tech\n\n| Keys | Behavior |\n|---|---|\n\n\nNon-interactive rule with role=\"separator\" — exposed to assistive tech as a separator, never focusable, and skipped by roving navigation.\n\n## Theming\n\nThis component has no `--psi-menu-separator-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+  },
+  {
+   "name": "Table",
+   "description": "Data table on native table semantics. Holds no state: sorting, selection and pagination are the consumer's (D62, extending D50/D53).",
+   "props": [
+    {
+     "name": "size",
+     "type": "32 | 40 | 48",
+     "required": false,
+     "default": 40,
+     "description": "Row height in px."
+    },
+    {
+     "name": "stickyHeader",
+     "type": "boolean",
+     "required": false,
+     "default": null,
+     "description": "Pins the header while the body scrolls."
+    },
+    {
+     "name": "sortable",
+     "type": "boolean",
+     "required": false,
+     "default": false,
+     "description": "Enables the sort affordance on header cells that declare a `sortKey`."
+    },
+    {
+     "name": "sort",
+     "type": "TableSortState | null",
+     "required": false,
+     "default": null,
+     "description": "Controlled sort state; `null` when nothing is sorted."
+    },
+    {
+     "name": "onSortChange",
+     "type": "((sort: TableSortState) => void)",
+     "required": false,
+     "default": null,
+     "description": "Called when a header's sort control is activated. Optional in the type\nbecause `sortable` may be false; a discriminated union expressing the real\ncontract does not survive docgen's flat prop extraction, which would strip\nthese props from the manifest entirely (D62)."
+    },
+    {
+     "name": "selectable",
+     "type": "boolean",
+     "required": false,
+     "default": false,
+     "description": "Renders the row-selection checkbox column."
+    },
+    {
+     "name": "selected",
+     "type": "ReadonlySet<string>",
+     "required": false,
+     "default": "new Set<string>()",
+     "description": "Controlled selection, keyed by each `TableRow`'s `rowId`."
+    },
+    {
+     "name": "onSelectionChange",
+     "type": "((selected: ReadonlySet<string>) => void)",
+     "required": false,
+     "default": null,
+     "description": "Called with the next selection. See `onSortChange` on why it is optional."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLTableElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the underlying `<table>` element."
+    }
+   ],
+   "slots": [
+    {
+     "name": "body",
+     "accepts": {
+      "components": [
+       "TableHead",
+       "TableBody"
+      ]
+     },
+     "cardinality": "1..*",
+     "order": 1
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Table\n\nData table on native table semantics. Holds no state: sorting, selection and pagination are the consumer's (D62, extending D50/D53).\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `size` | `32 \\| 40 \\| 48` | 40 | no | Row height in px. |\n| `stickyHeader` | `boolean` | — | no | Pins the header while the body scrolls. |\n| `sortable` | `boolean` | false | no | Enables the sort affordance on header cells that declare a `sortKey`. |\n| `sort` | `TableSortState \\| null` | — | no | Controlled sort state; `null` when nothing is sorted. |\n| `onSortChange` | `((sort: TableSortState) => void)` | — | no | Called when a header's sort control is activated. Optional in the type because `sortable` may be false; a discriminated union expressing the real contract does not survive docgen's flat prop extraction, which would strip these props from the manifest entirely (D62). |\n| `selectable` | `boolean` | false | no | Renders the row-selection checkbox column. |\n| `selected` | `ReadonlySet<string>` | new Set<string>() | no | Controlled selection, keyed by each `TableRow`'s `rowId`. |\n| `onSelectionChange` | `((selected: ReadonlySet<string>) => void)` | — | no | Called with the next selection. See `onSortChange` on why it is optional. |\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n| `ref` | `Ref<HTMLTableElement>` | — | no | Forwarded ref to the underlying `<table>` element. |\n\n## Theming\n\nOverride `--psi-table-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+  },
+  {
+   "name": "TableHead",
+   "description": "`<thead>`. When the table is selectable, prepends the select-all cell to the FIRST header row so the header's column count matches the body's — the checkbox column is Table's, not the consumer's schema. Clones the row rather than rebuilding it, so the consumer's own props on that `TableRow` survive.",
+   "props": [
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "slots": [],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# TableHead\n\n`<thead>`. When the table is selectable, prepends the select-all cell to the FIRST header row so the header's column count matches the body's — the checkbox column is Table's, not the consumer's schema. Clones the row rather than rebuilding it, so the consumer's own props on that `TableRow` survive.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Theming\n\nThis component has no `--psi-table-head-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+  },
+  {
+   "name": "TableBody",
+   "description": "`<tbody>` wrapper.",
+   "props": [
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "slots": [],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# TableBody\n\n`<tbody>` wrapper.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Theming\n\nThis component has no `--psi-table-body-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+  },
+  {
+   "name": "TableRow",
+   "description": "`<tr>`. `rowId` is the key the `selected` set holds.",
+   "props": [
+    {
+     "name": "rowId",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Stable identity for selection. Required for selectable tables (D62)."
+    },
+    {
+     "name": "selectLabel",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Accessible name for this row's selection checkbox."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "slots": [],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# TableRow\n\n`<tr>`. `rowId` is the key the `selected` set holds.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `rowId` | `string` | — | no | Stable identity for selection. Required for selectable tables (D62). |\n| `selectLabel` | `string` | — | no | Accessible name for this row's selection checkbox. |\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Theming\n\nThis component has no `--psi-table-row-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+  },
+  {
+   "name": "TableHeaderCell",
+   "description": "`<th scope=\"col\">`. `aria-sort` belongs on the th, never on the inner button — assistive tech reads the sort state from the column header.",
+   "props": [
+    {
+     "name": "sortKey",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Sort key this column emits. Enables the sort control when the table is `sortable`."
+    },
+    {
+     "name": "numeric",
+     "type": "boolean",
+     "required": false,
+     "default": null,
+     "description": "Right-aligns and renders tabular figures (D62)."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "slots": [],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# TableHeaderCell\n\n`<th scope=\"col\">`. `aria-sort` belongs on the th, never on the inner button — assistive tech reads the sort state from the column header.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `sortKey` | `string` | — | no | Sort key this column emits. Enables the sort control when the table is `sortable`. |\n| `numeric` | `boolean` | — | no | Right-aligns and renders tabular figures (D62). |\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Theming\n\nThis component has no `--psi-table-header-cell-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+  },
+  {
+   "name": "TableCell",
+   "description": "`<td>`. `numeric` means right-aligned *and* tabular — a column that aligns but whose digits jitter between rows defeats the purpose.",
+   "props": [
+    {
+     "name": "numeric",
+     "type": "boolean",
+     "required": false,
+     "default": null,
+     "description": "Right-aligns and renders tabular figures (D62)."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "slots": [],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# TableCell\n\n`<td>`. `numeric` means right-aligned *and* tabular — a column that aligns but whose digits jitter between rows defeats the purpose.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `numeric` | `boolean` | — | no | Right-aligns and renders tabular figures (D62). |\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Theming\n\nThis component has no `--psi-table-cell-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+  },
+  {
+   "name": "Pagination",
+   "description": "Numbered pager with ellipsis truncation (D63). Standalone rather than a Table family member: `table-pagination` composes it as a Toolbar sibling of the page-size Select.",
+   "props": [
+    {
+     "name": "page",
+     "type": "number",
+     "required": true,
+     "default": null,
+     "description": "Current page, 1-based."
+    },
+    {
+     "name": "pageCount",
+     "type": "number",
+     "required": true,
+     "default": null,
+     "description": "Total number of pages."
+    },
+    {
+     "name": "onPageChange",
+     "type": "(page: number) => void",
+     "required": true,
+     "default": null,
+     "description": "Called with the requested page. Required — unlike Table's `onSortChange`/\n`onSelectionChange`, which are optional because `sortable`/`selectable`\ngate whether they're meaningful, `Pagination` has no such gating boolean:\nthe prop is unconditionally meaningful, so a `Pagination` without it is a\ndead control (final review finding, D62)."
+    },
+    {
+     "name": "siblingCount",
+     "type": "number",
+     "required": false,
+     "default": 1,
+     "description": "Pages shown either side of the current one before truncating."
+    },
+    {
+     "name": "aria-label",
+     "type": "string",
+     "required": false,
+     "default": "Pagination",
+     "description": "Accessible name for the nav landmark."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "slots": [],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Pagination\n\nNumbered pager with ellipsis truncation (D63). Standalone rather than a Table family member: `table-pagination` composes it as a Toolbar sibling of the page-size Select.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `page` | `number` | — | yes | Current page, 1-based. |\n| `pageCount` | `number` | — | yes | Total number of pages. |\n| `onPageChange` | `(page: number) => void` | — | yes | Called with the requested page. Required — unlike Table's `onSortChange`/ `onSelectionChange`, which are optional because `sortable`/`selectable` gate whether they're meaningful, `Pagination` has no such gating boolean: the prop is unconditionally meaningful, so a `Pagination` without it is a dead control (final review finding, D62). |\n| `siblingCount` | `number` | 1 | no | Pages shown either side of the current one before truncating. |\n| `aria-label` | `string` | Pagination | no | Accessible name for the nav landmark. |\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Theming\n\nThis component has no `--psi-pagination-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.\n\n\n\n## Rules\n\n- One accent per visual group; everything else neutral or ghost.\n- danger only for actions with real consequences.\n- Sizes are px numbers (24|32|40|48), never S/M/L.\n- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.\n- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.\n- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).\n- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
   }
  ],
  "tokens": [
@@ -2458,24 +2715,90 @@
      "sortable": true
     },
     "slots": {
-     "head": [
-      "{content:columns-note}"
-     ],
      "body": [
-      "{content:rows-note}"
+      {
+       "component": "TableHead",
+       "slots": {
+        "body": [
+         {
+          "component": "TableRow",
+          "slots": {
+           "body": [
+            {
+             "component": "TableHeaderCell",
+             "props": {
+              "sortKey": "date"
+             },
+             "content": "date-label"
+            },
+            {
+             "component": "TableHeaderCell",
+             "props": {
+              "sortKey": "payee"
+             },
+             "content": "payee-label"
+            },
+            {
+             "component": "TableHeaderCell",
+             "props": {
+              "sortKey": "amount",
+              "numeric": true
+             },
+             "content": "amount-label"
+            }
+           ]
+          }
+         }
+        ]
+       }
+      },
+      {
+       "component": "TableBody",
+       "slots": {
+        "body": [
+         {
+          "component": "TableRow",
+          "props": {
+           "rowId": "row-id"
+          },
+          "slots": {
+           "body": [
+            {
+             "component": "TableCell",
+             "content": "date-cell"
+            },
+            {
+             "component": "TableCell",
+             "content": "payee-cell"
+            },
+            {
+             "component": "TableCell",
+             "props": {
+              "numeric": true
+             },
+             "content": "amount-cell"
+            }
+           ]
+          }
+         }
+        ]
+       }
+      }
      ]
     }
    },
    "parameters": [],
    "content": {
-    "columns-note": "[one header cell per column; numeric columns align right]",
-    "rows-note": "[one row per record; put the row-actions menu in the last cell]"
+    "date-label": "Date",
+    "payee-label": "Payee",
+    "amount-label": "Amount",
+    "date-cell": "[one row per record]",
+    "payee-cell": "[put the row-actions menu in the last cell]",
+    "amount-cell": "[numeric columns align right and use tabular figures]"
    },
-   "gaps": [
-    "Table"
-   ],
-   "blocked": true,
-   "preset": null
+   "gaps": [],
+   "blocked": false,
+   "preset": "<Table\n  selectable={true}\n  sortable={true}\n>\n  <TableHead>\n    <TableRow>\n      <TableHeaderCell sortKey=\"date\">Date</TableHeaderCell>\n      <TableHeaderCell sortKey=\"payee\">Payee</TableHeaderCell>\n      <TableHeaderCell numeric={true} sortKey=\"amount\">Amount</TableHeaderCell>\n    </TableRow>\n  </TableHead>\n  <TableBody>\n    <TableRow\n      rowId=\"row-id\"\n    >\n      <TableCell>[one row per record]</TableCell>\n      <TableCell>[put the row-actions menu in the last cell]</TableCell>\n      <TableCell numeric={true}>[numeric columns align right and use tabular figures]</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>\n"
   },
   {
    "id": "date-range-filter",
@@ -2976,11 +3299,9 @@
    "content": {
     "page-size-label": "Rows per page"
    },
-   "gaps": [
-    "Pagination"
-   ],
-   "blocked": true,
-   "preset": null
+   "gaps": [],
+   "blocked": false,
+   "preset": "<Toolbar\n  gap={12}\n>\n  <Field\n    label=\"Rows per page\"\n  >\n    <Select size={32} />\n  </Field>\n  <Pagination />\n</Toolbar>\n"
   }
  ],
  "scales": {
@@ -3040,6 +3361,7 @@
     "gutterNarrow": 24
    },
    "zIndex": {
+    "sticky": 1,
     "nav": 100,
     "overlay": 1000,
     "tooltip": 1100
@@ -3171,6 +3493,7 @@
   },
   "recipes": {
    "mediaTint": "Apply .psi-media-tint to media elements; the brand defines --psi-media-tint (D35). Hover/focus reveals true color over --psi-duration-450 --psi-ease-soft.",
+   "tabularNumerals": "Apply .psi-tabular to numeric content for fixed-width digits; --psi-font-variant-numeric is tabular-nums (D62). Table's numeric columns bind the token directly rather than via the utility class.",
    "sectionHeader": "SectionHeader ships as a recipe, not a component (v1.2 non-goal): baseline-aligned flex row — mono annotation (--psi-text-mono-14-20-regular, --psi-fg-accent) + h2 (.psi-display-32-32-extrabold) + optional trailing meta, border-bottom 1px var(--psi-border-faint), padding-bottom var(--psi-space-20)."
   },
   "tags": {
@@ -3320,6 +3643,7 @@
      "gutterNarrow": 24
     },
     "zIndex": {
+     "sticky": 1,
      "nav": 100,
      "overlay": 1000,
      "tooltip": 1100

package/dist/store.js

@@ -3,28 +3,32 @@ const MAX_RESULTS = 20;
  * (~1.5k tokens)" (docs/superpowers/plans/2026-07-18-agent-access-plan.md),
  * asserted by __tests__/store.test.ts's "stays within the response budget". */
 const RESPONSE_BUDGET = 6000;
-/** Order the empty-query overview is filled in. Guidance first, catalog last,
- * because the two grow and cost very differently:
+/** How the empty-query overview divides its budget across kinds. Topics,
+ * patterns, and components grow and cost very differently:
  *
  *   topics   — a fixed, slow-growing set of terse briefs (~90 chars each).
  *              Carries the rules an agent cannot guess, `getting-started`
- *              (the five required CSS imports) above all.
- *   patterns — composition recipes; their stored summaries carry match
- *              phrases for keyword ranking and can run long, so the
- *              overview projects a trimmed copy (see overviewBrief) capped
- *              near topic size — the stored, untrimmed brief is still what
- *              score() ranks against.
+ *              (the five required CSS imports) above all. Takes its full
+ *              cost, unconditionally.
  *   components — verbose (up to 220 chars each) and the only axis that grows
  *              with every release. Also the axis a keyword query recovers
  *              best: search("menu") finds Menu; no query re-derives a house
- *              rule an agent doesn't know exists.
+ *              rule an agent doesn't know exists. Reserved a floor of
+ *              `COMPONENT_FLOOR` items before patterns spend the remainder,
+ *              so catalog growth cannot starve them below the floor.
+ *   patterns — composition recipes; their stored summaries carry match
+ *              phrases for keyword ranking and can run long, so the overview
+ *              projects a trimmed copy (see overviewBrief) at a *derived*
+ *              per-call cap — the largest that lets every pattern fit
+ *              alongside topics and the component floor. The stored,
+ *              untrimmed brief is still what score() ranks against.
  *
- * Capping by item *count* (the previous scheme) evicted the tail, and since
- * components were emitted first the tail was always topics — so registering
- * D53's Menu components silently dropped eight topics including
- * `getting-started`. Filling by serialized *length* in this order instead
- * degrades only the component tail, which is the cheap thing to lose. */
-const OVERVIEW_KIND_ORDER = ["topic", "pattern", "component"];
+ * Previously the overview filled topics, then patterns, then components
+ * until the budget ran out, so whichever kind was filled last absorbed all
+ * catalog growth — three more patterns was enough to starve components from
+ * six down to four (D61). Allocating by kind first means catalog growth
+ * shortens pattern summaries instead of evicting items off the tail. */
+const COMPONENT_FLOOR = 8;
 const TOPIC_SUMMARIES = {
     variants: "Variant intent and typical use for all 8 flat variants",
     rules: "House rules: accent budget, sizing, color binding",
@@ -61,12 +65,11 @@ function patternSummary(p) {
         summary += `, blocked (gaps: ${p.gaps.join(", ")})`;
     return summary;
 }
-/** Overview-only cap on the *intro* portion of a pattern summary (intent +
- * match phrases + parameter count), comparable to a topic brief (~100
- * bytes). The stored `Brief.summary` built by patternSummary() above stays
- * full-length — score() reads it for keyword ranking (the match phrases are
- * what let "delete confirmation" find destructive-confirm) — so this only
- * shapes a copy used when search("") projects the overview list.
+/** Most an overview pattern intro (intent + match phrases + parameter count)
+ * may cost. The effective limit is derived per-call (see the empty-query
+ * branch): patterns take whatever the budget leaves after topics and the
+ * component floor, so a growing catalog shortens summaries instead of
+ * evicting items (D61).
  *
  * The `, blocked (gaps: …)` tail is never subject to this cap: it is the
  * backlog signal this cycle exists to publish, and patternSummary() puts it
@@ -75,7 +78,7 @@ function patternSummary(p) {
  * 120 chars), which is exactly the bug this trims to avoid. So the overview
  * projects a pattern's summary from the underlying PatternEntry directly:
  * trim the intro, then always append the tail. */
-const OVERVIEW_PATTERN_INTRO_LIMIT = 100;
+const OVERVIEW_PATTERN_INTRO_MAX = 120;
 /** Trims `s` to at most `limit` chars, backing off to the last word boundary
  * and marking the cut with an ellipsis — never a mid-word fragment that
  * could read as a complete (if coincidental) match phrase. */
@@ -86,8 +89,8 @@ function truncateAtWord(s, limit) {
     const lastSpace = cut.lastIndexOf(" ");
     return `${lastSpace > 0 ? cut.slice(0, lastSpace) : cut}…`;
 }
-function overviewPatternSummary(p) {
-    const intro = truncateAtWord(`${p.intent} — ${p.match.join(", ")}, ${p.parameters.length} parameters`, OVERVIEW_PATTERN_INTRO_LIMIT);
+function overviewPatternSummary(p, limit) {
+    const intro = truncateAtWord(`${p.intent} — ${p.match.join(", ")}, ${p.parameters.length} parameters`, limit);
     return p.blocked ? `${intro}, blocked (gaps: ${p.gaps.join(", ")})` : intro;
 }
 export function createStore(index) {
@@ -98,14 +101,16 @@ export function createStore(index) {
      * already-assembled, full-length `Brief.summary` — so the `blocked (gaps:
      * …)` tail always survives the overview's trim. Always a shallow copy for
      * patterns: the stored brief kept in `briefs` (and used by score()) is
-     * never mutated. */
-    function overviewBrief(b) {
+     * never mutated. `limit` is derived per-call by the empty-query branch
+     * (D61), not a module constant, so a growing catalog shortens summaries
+     * instead of evicting items. */
+    function overviewBrief(b, limit) {
         if (b.kind !== "pattern")
             return b;
         const pattern = patternsById.get(b.title);
         if (!pattern)
             return b;
-        return { ...b, summary: overviewPatternSummary(pattern) };
+        return { ...b, summary: overviewPatternSummary(pattern, limit) };
     }
     const briefs = [
         ...index.components.map((c) => ({
@@ -150,14 +155,25 @@ export function createStore(index) {
     function search(query) {
         const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
         if (terms.length === 0) {
-            // Overview: topics, then patterns, then as many components as the
-            // response budget still affords (tokens are discoverable via query).
-            // Filled by serialized length, not item count, so the thing that gets
-            // dropped is always the component tail — never the guidance surface.
-            const candidates = OVERVIEW_KIND_ORDER.flatMap((kind) => briefs.filter((b) => b.kind === kind));
-            const out = [];
-            for (const brief of candidates) {
-                out.push(overviewBrief(brief));
+            // D61: allocate before filling. Topics take their full cost, components
+            // are reserved a floor, and patterns take the remainder via a derived
+            // cap — so catalog growth shortens summaries instead of evicting the
+            // tail. Whichever kind was filled last used to absorb all growth;
+            // that was the bug. (Tokens are omitted; they are discoverable via
+            // query.)
+            const topics = briefs.filter((b) => b.kind === "topic");
+            const patterns = briefs.filter((b) => b.kind === "pattern");
+            const components = briefs.filter((b) => b.kind === "component");
+            const reserve = JSON.stringify(components.slice(0, COMPONENT_FLOOR)).length;
+            const fits = (limit) => JSON.stringify([...topics, ...patterns.map((b) => overviewBrief(b, limit))]).length +
+                reserve <=
+                RESPONSE_BUDGET;
+            let limit = OVERVIEW_PATTERN_INTRO_MAX;
+            while (limit > 0 && !fits(limit))
+                limit -= 10;
+            const out = [...topics, ...patterns.map((b) => overviewBrief(b, limit))];
+            for (const component of components) {
+                out.push(component);
                 if (JSON.stringify(out).length > RESPONSE_BUDGET) {
                     out.pop();
                     break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handamade/psi-mcp",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "MIT",
   "description": "MCP server and agent-context generator for the Psi (Ψ) design system",
   "type": "module",
@@ -33,8 +33,8 @@
     "tsx": "^4.22.4",
     "typescript": "^5.7.0",
     "vitest": "^3.2.6",
-    "@handamade/psi-tokens": "0.9.0",
-    "@handamade/psi-react": "0.9.0"
+    "@handamade/psi-tokens": "0.10.0",
+    "@handamade/psi-react": "0.10.0"
   },
   "scripts": {
     "build": "tsx scripts/build-index.ts && tsc -p tsconfig.build.json"