@handamade/psi-mcp 0.26.0 → 0.27.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 50 React 19 components, 24 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 52 React 19 components, 24 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.26.0",
+ "version": "0.27.0",
  "themes": [
   "light",
   "dark",
@@ -242,6 +242,120 @@
    ],
    "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Panel\n\nElevated surface panel (D51): secondary background, faint hairline, radius-12 — the shared --psi-surface-* recipe Dialog's panel also binds. Not a Card: no media slot, no hover lift, opaque by design.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `children` | `ReactNode` | — | no | Panel contents. |\n| `padding` | `16 \\| 24` | 24 | no | Inner padding in px. |\n| `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the root 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| Tab | Skipped — Panel itself is not focusable; focus moves through its children. |\n\nPlain <div> container with no implicit role. Pass aria-* host props if the panel should announce as a region.\n\n## Theming\n\nOverride `--psi-panel-*` 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- Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"start\" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
   },
+  {
+   "name": "Stack",
+   "description": "A column with a gap from the space scale (D109): Toolbar's vertical counterpart, minus the wrap. A plain <div> with no role. It gives a pattern tree a layout context, which Panel and the psi-gap-* utilities do not.",
+   "props": [
+    {
+     "name": "children",
+     "type": "ReactNode",
+     "required": false,
+     "default": null,
+     "description": "Stack contents, laid out top to bottom."
+    },
+    {
+     "name": "gap",
+     "type": "4 | 8 | 12 | 16 | 24 | 32",
+     "required": false,
+     "default": 16,
+     "description": "Space between children in px, from the space scale."
+    },
+    {
+     "name": "align",
+     "type": "\"stretch\" | \"start\" | \"center\" | \"end\"",
+     "required": false,
+     "default": "stretch",
+     "description": "Cross-axis alignment. `stretch` (the default) makes each child full\nwidth; `start` keeps a Button or a short line at its own width."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLDivElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the root element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "slots": [
+    {
+     "name": "body",
+     "accepts": {},
+     "cardinality": "0..*",
+     "order": 1
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Stack\n\nA column with a gap from the space scale (D109): Toolbar's vertical counterpart, minus the wrap. A plain <div> with no role. It gives a pattern tree a layout context, which Panel and the psi-gap-* utilities do not.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `children` | `ReactNode` | — | no | Stack contents, laid out top to bottom. |\n| `gap` | `4 \\| 8 \\| 12 \\| 16 \\| 24 \\| 32` | 16 | no | Space between children in px, from the space scale. |\n| `align` | `\"stretch\" \\| \"start\" \\| \"center\" \\| \"end\"` | stretch | no | Cross-axis alignment. `stretch` (the default) makes each child full width; `start` keeps a Button or a short line at its own width. |\n| `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the root 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| Tab | Skipped — Stack itself is not focusable; focus moves through its children in source order. |\n\nPlain <div> with no role (D109): a column with a gap. Visual order is source order, so reading and focus order match.\n\n## Theming\n\nThis component has no `--psi-stack-*` 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- Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"start\" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+  },
+  {
+   "name": "Text",
+   "description": "A line or paragraph of text at one of Psi's text styles (D109). It gives a pattern tree an element per line, so a headline and its explanation do not run together. Margin 0: a Stack's gap does the spacing.",
+   "props": [
+    {
+     "name": "children",
+     "type": "ReactNode",
+     "required": false,
+     "default": null,
+     "description": "The text."
+    },
+    {
+     "name": "as",
+     "type": "\"p\" | \"span\" | \"div\" | \"h2\" | \"h3\" | \"h4\"",
+     "required": false,
+     "default": "p",
+     "description": "The element. A heading's level follows the document outline, its size\nthe design, so `as` and `size` are separate."
+    },
+    {
+     "name": "size",
+     "type": "12 | 14 | 16 | 18",
+     "required": false,
+     "default": 14,
+     "description": "Font size in px; each size carries its own line height."
+    },
+    {
+     "name": "weight",
+     "type": "\"regular\" | \"medium\"",
+     "required": false,
+     "default": "regular",
+     "description": ""
+    },
+    {
+     "name": "tone",
+     "type": "\"primary\" | \"secondary\"",
+     "required": false,
+     "default": "primary",
+     "description": "`secondary` for supporting text."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "slots": [
+    {
+     "name": "body",
+     "accepts": {},
+     "cardinality": "0..*",
+     "order": 1
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Text\n\nA line or paragraph of text at one of Psi's text styles (D109). It gives a pattern tree an element per line, so a headline and its explanation do not run together. Margin 0: a Stack's gap does the spacing.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `children` | `ReactNode` | — | no | The text. |\n| `as` | `\"p\" \\| \"span\" \\| \"div\" \\| \"h2\" \\| \"h3\" \\| \"h4\"` | p | no | The element. A heading's level follows the document outline, its size the design, so `as` and `size` are separate. |\n| `size` | `12 \\| 14 \\| 16 \\| 18` | 14 | no | Font size in px; each size carries its own line height. |\n| `weight` | `\"regular\" \\| \"medium\"` | regular | no |  |\n| `tone` | `\"primary\" \\| \"secondary\"` | primary | no | `secondary` for supporting text. |\n| `ref` | `Ref<HTMLElement>` | — | no | Forwarded ref to the 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| Tab | Not focusable. |\n\nRenders the element `as` names (p by default). Use h2–h4 for a heading at its outline level, whatever its `size`.\n\n## Theming\n\nOverride `--psi-text-*` 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- Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"start\" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
+  },
   {
    "name": "DescriptionList",
    "description": "Key/value display (D70): a `<dl>` of term/value pairs, the body `detail-drawer` has always described and never had a component for. No `size` prop — this is type, and the type scale is already expressed by --psi-text-*. Consumers restyle via the token family, not a prop.",
@@ -660,7 +774,7 @@
   },
   {
    "name": "Checkbox",
-   "description": "Native checkbox with a built-in label; for independent binary choices.",
+   "description": "Native checkbox with a built-in label; for independent binary choices. In an invalid group Field it is aria-invalid, and an unchecked box marked aria-invalid outlines in the error colour (D108).",
    "props": [
     {
      "name": "children",
@@ -699,7 +813,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| `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| `indeterminate` | `boolean` | — | no | The mixed state, e.g. a \"select all\" over a partial selection (D103). Sets the input's DOM property, which the platform exposes as aria-checked=\"mixed\", and draws a dash. Re-applied on every render, because a click clears the property before the consumer re-renders. When absent, the property is left alone, so a state set through the ref survives. |\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- Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"start\" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).\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. In an invalid group Field it is aria-invalid, and an unchecked box marked aria-invalid outlines in the error colour (D108).\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| `indeterminate` | `boolean` | — | no | The mixed state, e.g. a \"select all\" over a partial selection (D103). Sets the input's DOM property, which the platform exposes as aria-checked=\"mixed\", and draws a dash. Re-applied on every render, because a click clears the property before the consumer re-renders. When absent, the property is left alone, so a state set through the ref survives. |\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- Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"start\" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).\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",
@@ -1049,7 +1163,7 @@
      "type": "ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>",
      "required": true,
      "default": null,
-     "description": "The trigger element (must accept ref, onMouseEnter/Leave, onFocus/Blur)."
+     "description": "The trigger element (must accept onFocus/Blur)."
     },
     {
      "name": "placement",
@@ -1060,7 +1174,7 @@
     }
    ],
    "slots": [],
-   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Tooltip\n\nShort hover/focus hint attached to a single trigger element.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `content` | `ReactNode` | — | yes | Tooltip content. |\n| `children` | `ReactElement<Record<string, unknown>, string \\| JSXElementConstructor<any>>` | — | yes | The trigger element (must accept ref, onMouseEnter/Leave, onFocus/Blur). |\n| `placement` | `\"top\" \\| \"bottom\" \\| \"left\" \\| \"right\"` | top | no | Preferred placement. |\n\n## Keyboard & assistive tech\n\n| Keys | Behavior |\n|---|---|\n| Tab (focus trigger) | Shows immediately on focus (no delay). |\n| Escape | Dismisses while visible (WCAG 1.4.13). |\n\nHover opens after a short delay; content is linked via aria-describedby while visible. Trigger must accept onMouseEnter/Leave and onFocus/Blur props (cloned in automatically) — no ref forwarding required.\n\n## Theming\n\nOverride `--psi-tooltip-*` 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- Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"start\" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).\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# Tooltip\n\nShort hover/focus hint attached to a single trigger element.\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `content` | `ReactNode` | — | yes | Tooltip content. |\n| `children` | `ReactElement<Record<string, unknown>, string \\| JSXElementConstructor<any>>` | — | yes | The trigger element (must accept onFocus/Blur). |\n| `placement` | `\"top\" \\| \"bottom\" \\| \"left\" \\| \"right\"` | top | no | Preferred placement. |\n\n## Keyboard & assistive tech\n\n| Keys | Behavior |\n|---|---|\n| Tab (focus trigger) | Shows immediately on focus (no delay). |\n| Escape | Dismisses while visible (WCAG 1.4.13). |\n\nHover opens after a short delay; content is linked via aria-describedby while visible. Trigger must accept onMouseEnter/Leave and onFocus/Blur props (cloned in automatically) — no ref forwarding required.\n\n## Theming\n\nOverride `--psi-tooltip-*` 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- Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"start\" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).\n- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.\n"
   },
   {
    "name": "NavBar",
@@ -3988,6 +4102,48 @@
     }
    }
   },
+  {
+   "name": "borderControl",
+   "formula": "ref(fgPrimary) → alpha(0.55)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 250,
+      "alpha": 0.55
+     },
+     "hex": "#222f3c"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.93,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.4
+     },
+     "hex": "#e3e8ee"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 30,
+      "alpha": 0.55
+     },
+     "hex": "#3c2825"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.949,
+      "c": 0.011,
+      "h": 72,
+      "alpha": 0.4
+     },
+     "hex": "#f3ede6"
+    }
+   }
+  },
   {
    "name": "borderFocus",
    "formula": "ref(fgAccent)",
@@ -5076,14 +5232,39 @@
     },
     "slots": {
      "body": [
-      "{content:headline}",
-      "{content:explanation}",
       {
-       "component": "Button",
+       "component": "Stack",
        "props": {
-        "variant": "neutral"
+        "gap": 8,
+        "align": "start"
        },
-       "content": "reset-label"
+       "slots": {
+        "body": [
+         {
+          "component": "Text",
+          "props": {
+           "as": "h3",
+           "size": 16,
+           "weight": "medium"
+          },
+          "content": "headline"
+         },
+         {
+          "component": "Text",
+          "props": {
+           "tone": "secondary"
+          },
+          "content": "explanation"
+         },
+         {
+          "component": "Button",
+          "props": {
+           "variant": "neutral"
+          },
+          "content": "reset-label"
+         }
+        ]
+       }
       }
      ]
     }
@@ -5096,7 +5277,7 @@
    },
    "gaps": [],
    "blocked": false,
-   "preset": "<Panel\n  padding={24}\n>\n  [nothing matches these filters]\n  [say whether the dataset is empty or the filters are too narrow]\n  <Button variant=\"neutral\">Clear filters</Button>\n</Panel>\n"
+   "preset": "<Panel\n  padding={24}\n>\n  <Stack\n    align=\"start\"\n    gap={8}\n  >\n    <Text as=\"h3\" size={16} weight=\"medium\">[nothing matches these filters]</Text>\n    <Text tone=\"secondary\">[say whether the dataset is empty or the filters are too narrow]</Text>\n    <Button variant=\"neutral\">Clear filters</Button>\n  </Stack>\n</Panel>\n"
   },
   {
    "id": "feedback-form",
@@ -5116,75 +5297,92 @@
     "slots": {
      "body": [
       {
-       "component": "Field",
+       "component": "Stack",
        "props": {
-        "group": true,
-        "required": true,
-        "requiredText": "(Required)"
+        "gap": 24
        },
        "slots": {
-        "label": [
-         "{content:category-label}"
-        ],
         "body": [
          {
-          "component": "RadioGroup",
+          "component": "Field",
+          "props": {
+           "group": true,
+           "required": true,
+           "requiredText": "(Required)"
+          },
           "slots": {
+           "label": [
+            "{content:category-label}"
+           ],
            "body": [
             {
-             "component": "Radio",
-             "props": {
-              "value": "problem"
-             },
-             "content": "first-option"
-            },
+             "component": "RadioGroup",
+             "slots": {
+              "body": [
+               {
+                "component": "Radio",
+                "props": {
+                 "value": "problem"
+                },
+                "content": "first-option"
+               },
+               {
+                "component": "Radio",
+                "props": {
+                 "value": "idea"
+                },
+                "content": "second-option"
+               },
+               {
+                "component": "Radio",
+                "props": {
+                 "value": "other"
+                },
+                "content": "third-option"
+               }
+              ]
+             }
+            }
+           ]
+          }
+         },
+         {
+          "component": "Field",
+          "slots": {
+           "label": [
+            "{content:description-label}"
+           ],
+           "body": [
             {
-             "component": "Radio",
+             "component": "Textarea",
              "props": {
-              "value": "idea"
-             },
-             "content": "second-option"
-            },
+              "maxLength": 500,
+              "rows": 4
+             }
+            }
+           ],
+           "description": [
+            "{content:description-help}"
+           ]
+          }
+         },
+         {
+          "component": "Toolbar",
+          "slots": {
+           "body": [
             {
-             "component": "Radio",
+             "component": "Button",
              "props": {
-              "value": "other"
+              "type": "submit",
+              "variant": "accent"
              },
-             "content": "third-option"
+             "content": "submit-label"
             }
            ]
           }
          }
         ]
        }
-      },
-      {
-       "component": "Field",
-       "slots": {
-        "label": [
-         "{content:description-label}"
-        ],
-        "body": [
-         {
-          "component": "Textarea",
-          "props": {
-           "maxLength": 500,
-           "rows": 4
-          }
-         }
-        ],
-        "description": [
-         "{content:description-help}"
-        ]
-       }
-      },
-      {
-       "component": "Button",
-       "props": {
-        "type": "submit",
-        "variant": "accent"
-       },
-       "content": "submit-label"
       }
      ]
     }
@@ -5201,7 +5399,7 @@
    },
    "gaps": [],
    "blocked": false,
-   "preset": "<Panel\n  padding={24}\n>\n  <Field\n    group={true}\n    label=\"Category\"\n    required={true}\n    requiredText=\"(Required)\"\n  >\n    <RadioGroup>\n      <Radio value=\"problem\">Something is broken</Radio>\n      <Radio value=\"idea\">An idea</Radio>\n      <Radio value=\"other\">Something else</Radio>\n    </RadioGroup>\n  </Field>\n  <Field\n    description=\"[what happened, and what you expected]\"\n    label=\"Description\"\n  >\n    <Textarea maxLength={500} rows={4} />\n  </Field>\n  <Button type=\"submit\" variant=\"accent\">Send</Button>\n</Panel>\n"
+   "preset": "<Panel\n  padding={24}\n>\n  <Stack\n    gap={24}\n  >\n    <Field\n      group={true}\n      label=\"Category\"\n      required={true}\n      requiredText=\"(Required)\"\n    >\n      <RadioGroup>\n        <Radio value=\"problem\">Something is broken</Radio>\n        <Radio value=\"idea\">An idea</Radio>\n        <Radio value=\"other\">Something else</Radio>\n      </RadioGroup>\n    </Field>\n    <Field\n      description=\"[what happened, and what you expected]\"\n      label=\"Description\"\n    >\n      <Textarea maxLength={500} rows={4} />\n    </Field>\n    <Toolbar>\n      <Button type=\"submit\" variant=\"accent\">Send</Button>\n    </Toolbar>\n  </Stack>\n</Panel>\n"
   },
   {
    "id": "filter-form",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handamade/psi-mcp",
-  "version": "0.26.0",
+  "version": "0.27.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.26.0",
-    "@handamade/psi-react": "0.26.0"
+    "@handamade/psi-react": "0.27.0",
+    "@handamade/psi-tokens": "0.27.0"
   },
   "scripts": {
     "build": "tsx scripts/build-index.ts && tsc -p tsconfig.build.json"