@handamade/psi-mcp 0.4.0

package/dist/psi-index.json

@@ -0,0 +1,2018 @@
+{
+ "version": "0.4.0",
+ "themes": [
+  "light",
+  "dark",
+  "acme",
+  "ember"
+ ],
+ "components": [
+  {
+   "name": "Button",
+   "description": "",
+   "props": [
+    {
+     "name": "variant",
+     "type": "\"accent\" | \"accent-subtle\" | \"neutral\" | \"neutral-subtle\" | \"ghost\" | \"danger\" | \"danger-subtle\" | \"outline\"",
+     "required": false,
+     "default": "neutral",
+     "description": "Visual variant."
+    },
+    {
+     "name": "size",
+     "type": "24 | 32 | 40 | 48",
+     "required": false,
+     "default": 32,
+     "description": "Height in px (24 | 32 | 40 | 48)."
+    },
+    {
+     "name": "href",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Render as an anchor with this href (D33). disabled → aria-disabled,\nno href attribute, pointer-events: none."
+    },
+    {
+     "name": "target",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Anchor target; only used with href."
+    },
+    {
+     "name": "rel",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Anchor rel; only used with href."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLButtonElement | HTMLAnchorElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the underlying element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Button\n\n\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `variant` | `\"accent\" \\| \"accent-subtle\" \\| \"neutral\" \\| \"neutral-subtle\" \\| \"ghost\" \\| \"danger\" \\| \"danger-subtle\" \\| \"outline\"` | neutral | no | Visual variant. |\n| `size` | `24 \\| 32 \\| 40 \\| 48` | 32 | no | Height in px (24 \\| 32 \\| 40 \\| 48). |\n| `href` | `string` | — | no | Render as an anchor with this href (D33). disabled → aria-disabled, no href attribute, pointer-events: none. |\n| `target` | `string` | — | no | Anchor target; only used with href. |\n| `rel` | `string` | — | no | Anchor rel; only used with href. |\n| `ref` | `Ref<HTMLButtonElement \\| HTMLAnchorElement>` | — | no | Forwarded ref to the underlying 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| Enter / Space | Activates the button. |\n| Tab | Focusable; visible focus ring via :focus-visible. |\n\nWith href it renders an <a>; disabled anchors get aria-disabled, lose the href attribute, and suppress activation (D33).\n\n## Theming\n\nOverride `--psi-button-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).\n\n## Variant guidance\n\n- **accent** — Primary action, draws attention. Submit, CTA, main action in a group.\n- **accent-subtle** — Accent tone, lower visual weight. Selected state, active filter, soft CTA.\n- **neutral** — Default, structurally present. Secondary actions, toolbar buttons.\n- **neutral-subtle** — Minimal chrome. Inline actions, table row actions.\n- **ghost** — No visible container until hover. Icon-only triggers, compact toolbars.\n- **outline** — Bordered ghost — visible structure, no fill until hover. Marketing CTA, download button; hover fills accent.\n- **danger** — Destructive action. Delete, remove, disconnect.\n- **danger-subtle** — Destructive context, low urgency. Warning badges, soft destructive hints.\n- **success | warning** — Status communication (Tag only). Status badges, labels.\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"
+  },
+  {
+   "name": "IconButton",
+   "description": "",
+   "props": [
+    {
+     "name": "variant",
+     "type": "\"accent\" | \"neutral\" | \"ghost\" | \"danger\"",
+     "required": false,
+     "default": "neutral",
+     "description": "Visual variant."
+    },
+    {
+     "name": "size",
+     "type": "24 | 32 | 40 | 48",
+     "required": false,
+     "default": 32,
+     "description": "Square size in px (24 | 32 | 40 | 48)."
+    },
+    {
+     "name": "href",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Render as an anchor with this href (D33). disabled → aria-disabled,\nno href attribute, pointer-events: none."
+    },
+    {
+     "name": "target",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Anchor target; only used with href."
+    },
+    {
+     "name": "rel",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Anchor rel; only used with href."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLButtonElement | HTMLAnchorElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the underlying element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# IconButton\n\n\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `variant` | `\"accent\" \\| \"neutral\" \\| \"ghost\" \\| \"danger\"` | neutral | no | Visual variant. |\n| `size` | `24 \\| 32 \\| 40 \\| 48` | 32 | no | Square size in px (24 \\| 32 \\| 40 \\| 48). |\n| `href` | `string` | — | no | Render as an anchor with this href (D33). disabled → aria-disabled, no href attribute, pointer-events: none. |\n| `target` | `string` | — | no | Anchor target; only used with href. |\n| `rel` | `string` | — | no | Anchor rel; only used with href. |\n| `ref` | `Ref<HTMLButtonElement \\| HTMLAnchorElement>` | — | no | Forwarded ref to the underlying 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| Enter / Space | Activates. |\n\nRequires an accessible name — pass aria-label. IconButton does not hide its icon for you; mark the icon aria-hidden yourself.\n\n## Theming\n\nOverride `--psi-button-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).\n\n## Variant guidance\n\n- **accent** — Primary action, draws attention. Submit, CTA, main action in a group.\n- **accent-subtle** — Accent tone, lower visual weight. Selected state, active filter, soft CTA.\n- **neutral** — Default, structurally present. Secondary actions, toolbar buttons.\n- **neutral-subtle** — Minimal chrome. Inline actions, table row actions.\n- **ghost** — No visible container until hover. Icon-only triggers, compact toolbars.\n- **outline** — Bordered ghost — visible structure, no fill until hover. Marketing CTA, download button; hover fills accent.\n- **danger** — Destructive action. Delete, remove, disconnect.\n- **danger-subtle** — Destructive context, low urgency. Warning badges, soft destructive hints.\n- **success | warning** — Status communication (Tag only). Status badges, labels.\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"
+  },
+  {
+   "name": "Card",
+   "description": "",
+   "props": [
+    {
+     "name": "variant",
+     "type": "\"stacked\" | \"featured\"",
+     "required": false,
+     "default": "stacked",
+     "description": "stacked = media above body; featured = media beside body (~1.6fr/1fr), stacks under md."
+    },
+    {
+     "name": "media",
+     "type": "ReactNode",
+     "required": false,
+     "default": null,
+     "description": "Media slot rendered edge-to-edge (img, AspectRatio, …)."
+    },
+    {
+     "name": "hoverLift",
+     "type": "boolean",
+     "required": false,
+     "default": false,
+     "description": "Lift on hover: translateY(-6px) over --psi-duration-350."
+    },
+    {
+     "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."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Card\n\n\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `variant` | `\"stacked\" \\| \"featured\"` | stacked | no | stacked = media above body; featured = media beside body (~1.6fr/1fr), stacks under md. |\n| `media` | `ReactNode` | — | no | Media slot rendered edge-to-edge (img, AspectRatio, …). |\n| `hoverLift` | `boolean` | false | no | Lift on hover: translateY(-6px) over --psi-duration-350. |\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## Theming\n\nOverride `--psi-card-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).\n\n## Variant guidance\n\n- **accent** — Primary action, draws attention. Submit, CTA, main action in a group.\n- **accent-subtle** — Accent tone, lower visual weight. Selected state, active filter, soft CTA.\n- **neutral** — Default, structurally present. Secondary actions, toolbar buttons.\n- **neutral-subtle** — Minimal chrome. Inline actions, table row actions.\n- **ghost** — No visible container until hover. Icon-only triggers, compact toolbars.\n- **outline** — Bordered ghost — visible structure, no fill until hover. Marketing CTA, download button; hover fills accent.\n- **danger** — Destructive action. Delete, remove, disconnect.\n- **danger-subtle** — Destructive context, low urgency. Warning badges, soft destructive hints.\n- **success | warning** — Status communication (Tag only). Status badges, labels.\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"
+  },
+  {
+   "name": "Input",
+   "description": "",
+   "props": [
+    {
+     "name": "size",
+     "type": "24 | 32 | 40 | 48",
+     "required": false,
+     "default": 32,
+     "description": "Height in px (24 | 32 | 40 | 48)."
+    },
+    {
+     "name": "error",
+     "type": "boolean",
+     "required": false,
+     "default": false,
+     "description": "Show error styling."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLInputElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the underlying `<input>` element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Input\n\n\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `size` | `24 \\| 32 \\| 40 \\| 48` | 32 | no | Height in px (24 \\| 32 \\| 40 \\| 48). |\n| `error` | `boolean` | false | no | Show error styling. |\n| `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input>` 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 | Focuses the native <input>; focus ring on the field. |\n\nerror sets a red border only — pair with aria-invalid and aria-describedby pointing at your error text.\n\n## Theming\n\nOverride `--psi-input-*` 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"
+  },
+  {
+   "name": "Select",
+   "description": "",
+   "props": [
+    {
+     "name": "size",
+     "type": "24 | 32 | 40 | 48",
+     "required": false,
+     "default": 32,
+     "description": "Height in px (24 | 32 | 40 | 48). Replaces the native `size` attribute\n(which sets the visible option-row count on a listbox-style `<select>`)\nwith the design system's control height in pixels."
+    },
+    {
+     "name": "error",
+     "type": "boolean",
+     "required": false,
+     "default": false,
+     "description": "Show error styling."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLSelectElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the underlying `<select>` element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Select\n\n\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `size` | `24 \\| 32 \\| 40 \\| 48` | 32 | no | Height in px (24 \\| 32 \\| 40 \\| 48). Replaces the native `size` attribute (which sets the visible option-row count on a listbox-style `<select>`) with the design system's control height in pixels. |\n| `error` | `boolean` | false | no | Show error styling. |\n| `ref` | `Ref<HTMLSelectElement>` | — | no | Forwarded ref to the underlying `<select>` 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 | Focuses the native <select>. |\n| Arrow keys / typeahead | Native option navigation. |\n\nerror: same contract as Input.\n\n## Theming\n\nOverride `--psi-select-*` 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"
+  },
+  {
+   "name": "Checkbox",
+   "description": "",
+   "props": [
+    {
+     "name": "children",
+     "type": "ReactNode",
+     "required": false,
+     "default": null,
+     "description": "Label text."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLInputElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the underlying `<input type=\"checkbox\">` element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Checkbox\n\n\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; 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"
+  },
+  {
+   "name": "Switch",
+   "description": "",
+   "props": [
+    {
+     "name": "children",
+     "type": "ReactNode",
+     "required": false,
+     "default": null,
+     "description": "Label text."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLInputElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the underlying `<input type=\"checkbox\" role=\"switch\">` element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Switch\n\n\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\" role=\"switch\">` 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 checkbox input with role=\"switch\"; announced as a switch, not a checkbox. |\n\n\n## Theming\n\nOverride `--psi-switch-*` 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"
+  },
+  {
+   "name": "Tag",
+   "description": "",
+   "props": [
+    {
+     "name": "variant",
+     "type": "\"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\"",
+     "required": false,
+     "default": "neutral",
+     "description": "Semantic color variant."
+    },
+    {
+     "name": "subtle",
+     "type": "boolean",
+     "required": false,
+     "default": false,
+     "description": "Use tinted background with semantic foreground."
+    },
+    {
+     "name": "onDismiss",
+     "type": "(() => void)",
+     "required": false,
+     "default": null,
+     "description": "When provided, renders a dismiss button that calls this handler."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLSpanElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the underlying `<span>` element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Tag\n\n\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `variant` | `\"neutral\" \\| \"accent\" \\| \"success\" \\| \"warning\" \\| \"danger\"` | neutral | no | Semantic color variant. |\n| `subtle` | `boolean` | false | no | Use tinted background with semantic foreground. |\n| `onDismiss` | `(() => void)` | — | no | When provided, renders a dismiss button that calls this handler. |\n| `ref` | `Ref<HTMLSpanElement>` | — | no | Forwarded ref to the underlying `<span>` 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| Enter / Space (dismiss button) | onDismiss renders a real <button>; keyboard-dismissible. |\n\nPassive label otherwise; not in the tab order without onDismiss.\n\n## Theming\n\nOverride `--psi-tag-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).\n\n## Variant guidance\n\n- **accent** — Primary action, draws attention. Submit, CTA, main action in a group.\n- **accent-subtle** — Accent tone, lower visual weight. Selected state, active filter, soft CTA.\n- **neutral** — Default, structurally present. Secondary actions, toolbar buttons.\n- **neutral-subtle** — Minimal chrome. Inline actions, table row actions.\n- **ghost** — No visible container until hover. Icon-only triggers, compact toolbars.\n- **outline** — Bordered ghost — visible structure, no fill until hover. Marketing CTA, download button; hover fills accent.\n- **danger** — Destructive action. Delete, remove, disconnect.\n- **danger-subtle** — Destructive context, low urgency. Warning badges, soft destructive hints.\n- **success | warning** — Status communication (Tag only). Status badges, labels.\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"
+  },
+  {
+   "name": "Tooltip",
+   "description": "",
+   "props": [
+    {
+     "name": "content",
+     "type": "ReactNode",
+     "required": true,
+     "default": null,
+     "description": "Tooltip content."
+    },
+    {
+     "name": "children",
+     "type": "ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>",
+     "required": true,
+     "default": null,
+     "description": "The trigger element (must accept ref, onMouseEnter/Leave, onFocus/Blur)."
+    },
+    {
+     "name": "placement",
+     "type": "\"top\" | \"bottom\" | \"left\" | \"right\"",
+     "required": false,
+     "default": "top",
+     "description": "Preferred placement."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# Tooltip\n\n\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; 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"
+  },
+  {
+   "name": "NavBar",
+   "description": "",
+   "props": [
+    {
+     "name": "brand",
+     "type": "ReactNode",
+     "required": false,
+     "default": null,
+     "description": "Brand slot (wordmark / logo link), leading edge."
+    },
+    {
+     "name": "actions",
+     "type": "ReactNode",
+     "required": false,
+     "default": null,
+     "description": "Trailing actions slot (theme switch, CTA)."
+    },
+    {
+     "name": "children",
+     "type": "ReactNode",
+     "required": false,
+     "default": null,
+     "description": "Nav links."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the header element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# NavBar\n\n\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `brand` | `ReactNode` | — | no | Brand slot (wordmark / logo link), leading edge. |\n| `actions` | `ReactNode` | — | no | Trailing actions slot (theme switch, CTA). |\n| `children` | `ReactNode` | — | no | Nav links. |\n| `ref` | `Ref<HTMLElement>` | — | no | Forwarded ref to the header element. |\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Theming\n\nOverride `--psi-navbar-*` 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"
+  },
+  {
+   "name": "AspectRatio",
+   "description": "",
+   "props": [
+    {
+     "name": "ratio",
+     "type": "number",
+     "required": true,
+     "default": null,
+     "description": "Width/height ratio, e.g. 16/10 or 4/5."
+    },
+    {
+     "name": "ref",
+     "type": "Ref<HTMLDivElement>",
+     "required": false,
+     "default": null,
+     "description": "Forwarded ref to the frame element."
+    },
+    {
+     "name": "className",
+     "type": "string",
+     "required": false,
+     "default": null,
+     "description": "Additional CSS class name(s) merged onto the component's root element."
+    }
+   ],
+   "doc": "<!-- Generated by emit-docs.ts — do not edit. -->\n# AspectRatio\n\n\n\n## Props\n\n| Prop | Type | Default | Required | Description |\n|---|---|---|---|---|\n| `ratio` | `number` | — | yes | Width/height ratio, e.g. 16/10 or 4/5. |\n| `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the frame element. |\n| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |\n\n## Theming\n\nOverride `--psi-aspect-ratio-*` 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"
+  }
+ ],
+ "tokens": [
+  {
+   "name": "bgPrimary",
+   "formula": "slot(canvas)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.95,
+      "c": 0.005,
+      "h": 250
+     },
+     "hex": "#eceff2"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.15,
+      "c": 0.01,
+      "h": 250
+     },
+     "hex": "#080c0f"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.96,
+      "c": 0.01,
+      "h": 80
+     },
+     "hex": "#f5f1ea"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.147,
+      "c": 0.004,
+      "h": 49
+     },
+     "hex": "#0c0a09"
+    }
+   }
+  },
+  {
+   "name": "bgSecondary",
+   "formula": "slot(canvas) → L delta(0.03)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.98,
+      "c": 0.005,
+      "h": 250
+     },
+     "hex": "#f6f9fc"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.2,
+      "c": 0.015,
+      "h": 250
+     },
+     "hex": "#11171d"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.99,
+      "c": 0.0089453125,
+      "h": 80
+     },
+     "hex": "#fffbf5"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.16199999999999998,
+      "c": 0.007,
+      "h": 49
+     },
+     "hex": "#100d0b"
+    }
+   }
+  },
+  {
+   "name": "fgPrimary",
+   "formula": "slot(ink) → L set(0.3), C set(0.03)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 250
+     },
+     "hex": "#222f3c"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.93,
+      "c": 0.01,
+      "h": 250
+     },
+     "hex": "#e3e8ee"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 30
+     },
+     "hex": "#3c2825"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.949,
+      "c": 0.011,
+      "h": 72
+     },
+     "hex": "#f3ede6"
+    }
+   }
+  },
+  {
+   "name": "fgSecondary",
+   "formula": "ref(fgPrimary) → alpha(0.7)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 250,
+      "alpha": 0.7
+     },
+     "hex": "#222f3c"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.93,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.7
+     },
+     "hex": "#e3e8ee"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 30,
+      "alpha": 0.7
+     },
+     "hex": "#3c2825"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.949,
+      "c": 0.011,
+      "h": 72,
+      "alpha": 0.7
+     },
+     "hex": "#f3ede6"
+    }
+   }
+  },
+  {
+   "name": "fgTertiary",
+   "formula": "ref(fgPrimary) → alpha(0.5)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 250,
+      "alpha": 0.5
+     },
+     "hex": "#222f3c"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.93,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.5
+     },
+     "hex": "#e3e8ee"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 30,
+      "alpha": 0.5
+     },
+     "hex": "#3c2825"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.949,
+      "c": 0.011,
+      "h": 72,
+      "alpha": 0.5
+     },
+     "hex": "#f3ede6"
+    }
+   }
+  },
+  {
+   "name": "fgQuaternary",
+   "formula": "ref(fgPrimary) → alpha(0.3)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 250,
+      "alpha": 0.3
+     },
+     "hex": "#222f3c"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.93,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.3
+     },
+     "hex": "#e3e8ee"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 30,
+      "alpha": 0.3
+     },
+     "hex": "#3c2825"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.949,
+      "c": 0.011,
+      "h": 72,
+      "alpha": 0.3
+     },
+     "hex": "#f3ede6"
+    }
+   }
+  },
+  {
+   "name": "fgPrimaryInverted",
+   "formula": "slot(canvas)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.95,
+      "c": 0.005,
+      "h": 250
+     },
+     "hex": "#eceff2"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.15,
+      "c": 0.02,
+      "h": 250
+     },
+     "hex": "#050c13"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.96,
+      "c": 0.01,
+      "h": 80
+     },
+     "hex": "#f5f1ea"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.15,
+      "c": 0.011,
+      "h": 72
+     },
+     "hex": "#0e0a06"
+    }
+   }
+  },
+  {
+   "name": "fgStaticWhite",
+   "formula": "slot(canvas) → L set(1), C set(0)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 1,
+      "c": 0,
+      "h": 250
+     },
+     "hex": "#ffffff"
+    },
+    "dark": {
+     "oklch": {
+      "l": 1,
+      "c": 0,
+      "h": 250
+     },
+     "hex": "#ffffff"
+    },
+    "acme": {
+     "oklch": {
+      "l": 1,
+      "c": 0,
+      "h": 80
+     },
+     "hex": "#ffffff"
+    },
+    "ember": {
+     "oklch": {
+      "l": 1,
+      "c": 0,
+      "h": 49
+     },
+     "hex": "#ffffff"
+    }
+   }
+  },
+  {
+   "name": "fgStaticBlack",
+   "formula": "slot(ink) → L set(0.25), C cap(0.03)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.25,
+      "c": 0.02,
+      "h": 250
+     },
+     "hex": "#1a222b"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.25,
+      "c": 0.02,
+      "h": 250
+     },
+     "hex": "#1a222b"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.25,
+      "c": 0.015,
+      "h": 30
+     },
+     "hex": "#281f1d"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.25,
+      "c": 0.011,
+      "h": 72
+     },
+     "hex": "#25211c"
+    }
+   }
+  },
+  {
+   "name": "fgOnAccent",
+   "formula": "ref(fgStaticWhite)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 1,
+      "c": 0,
+      "h": 250
+     },
+     "hex": "#ffffff"
+    },
+    "dark": {
+     "oklch": {
+      "l": 1,
+      "c": 0,
+      "h": 250
+     },
+     "hex": "#ffffff"
+    },
+    "acme": {
+     "oklch": {
+      "l": 1,
+      "c": 0,
+      "h": 80
+     },
+     "hex": "#ffffff"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.25,
+      "c": 0.011,
+      "h": 72
+     },
+     "hex": "#25211c"
+    }
+   }
+  },
+  {
+   "name": "fgAccent",
+   "formula": "slot(accent) → L set(0.48), C cap(0.23)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.195772705078125,
+      "h": 260
+     },
+     "hex": "#0053c9"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1286,
+      "h": 260
+     },
+     "hex": "#7daeff"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.19250488281250003,
+      "h": 30
+     },
+     "hex": "#b10b00"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.15596191406249998,
+      "h": 40
+     },
+     "hex": "#ff885d"
+    }
+   }
+  },
+  {
+   "name": "fgSuccess",
+   "formula": "slot(success) → L set(0.48), C cap(0.1187)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.118642041015625,
+      "h": 155
+     },
+     "hex": "#00703e"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.18540771484375002,
+      "h": 155
+     },
+     "hex": "#00cf77"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.108573486328125,
+      "h": 160
+     },
+     "hex": "#007048"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.18540771484375002,
+      "h": 155
+     },
+     "hex": "#00cf77"
+    }
+   }
+  },
+  {
+   "name": "fgWarning",
+   "formula": "slot(warning) → L set(0.48), C cap(0.1013)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.101250537109375,
+      "h": 75
+     },
+     "hex": "#7e5400"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1582,
+      "h": 75
+     },
+     "hex": "#e79d00"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.098351953125,
+      "h": 85
+     },
+     "hex": "#775800"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1582,
+      "h": 75
+     },
+     "hex": "#e79d00"
+    }
+   }
+  },
+  {
+   "name": "fgDanger",
+   "formula": "slot(danger) → L set(0.48), C cap(0.1946)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.194552490234375,
+      "h": 25
+     },
+     "hex": "#b1001b"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1505,
+      "h": 25
+     },
+     "hex": "#ff847d"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.1919,
+      "h": 15
+     },
+     "hex": "#af0039"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1505,
+      "h": 25
+     },
+     "hex": "#ff847d"
+    }
+   }
+  },
+  {
+   "name": "fillNeutral1",
+   "formula": "slot(canvas) → L delta(0.016), C delta(-0.001)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.966,
+      "c": 0.004,
+      "h": 250
+     },
+     "hex": "#f2f4f6"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.18,
+      "c": 0.012,
+      "h": 250
+     },
+     "hex": "#0e1217"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.976,
+      "c": 0.009000000000000001,
+      "h": 80
+     },
+     "hex": "#faf7f0"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.18,
+      "c": 0.012,
+      "h": 72
+     },
+     "hex": "#15110c"
+    }
+   }
+  },
+  {
+   "name": "fillNeutral2",
+   "formula": "slot(canvas)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.95,
+      "c": 0.005,
+      "h": 250
+     },
+     "hex": "#eceff2"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.2,
+      "c": 0.015,
+      "h": 250
+     },
+     "hex": "#11171d"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.96,
+      "c": 0.01,
+      "h": 80
+     },
+     "hex": "#f5f1ea"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.2,
+      "c": 0.015,
+      "h": 72
+     },
+     "hex": "#1a150f"
+    }
+   }
+  },
+  {
+   "name": "fillNeutral3",
+   "formula": "slot(canvas) → L delta(-0.017), C delta(0.001)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.9329999999999999,
+      "c": 0.006,
+      "h": 250
+     },
+     "hex": "#e6e9ed"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.23,
+      "c": 0.018,
+      "h": 250
+     },
+     "hex": "#171e25"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.943,
+      "c": 0.011,
+      "h": 80
+     },
+     "hex": "#f0ebe4"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.23,
+      "c": 0.018,
+      "h": 72
+     },
+     "hex": "#221c14"
+    }
+   }
+  },
+  {
+   "name": "fillNeutral4",
+   "formula": "slot(canvas) → L delta(-0.034), C delta(0.002)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.9159999999999999,
+      "c": 0.007,
+      "h": 250
+     },
+     "hex": "#e0e4e8"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.26,
+      "c": 0.02,
+      "h": 250
+     },
+     "hex": "#1d252d"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.9259999999999999,
+      "c": 0.012,
+      "h": 80
+     },
+     "hex": "#ebe6de"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.26,
+      "c": 0.02,
+      "h": 72
+     },
+     "hex": "#2a2319"
+    }
+   }
+  },
+  {
+   "name": "fillNeutral5",
+   "formula": "slot(canvas) → L delta(-0.032), C delta(0.003)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.9179999999999999,
+      "c": 0.008,
+      "h": 250
+     },
+     "hex": "#e0e4e9"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.29,
+      "c": 0.022,
+      "h": 250
+     },
+     "hex": "#232c36"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.9279999999999999,
+      "c": 0.013000000000000001,
+      "h": 80
+     },
+     "hex": "#ece6de"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.29,
+      "c": 0.022,
+      "h": 72
+     },
+     "hex": "#322a1f"
+    }
+   }
+  },
+  {
+   "name": "fillNeutral6",
+   "formula": "slot(canvas) → L delta(-0.048), C delta(0.004)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.9019999999999999,
+      "c": 0.009000000000000001,
+      "h": 250
+     },
+     "hex": "#dadfe4"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.32,
+      "c": 0.025,
+      "h": 250
+     },
+     "hex": "#29343f"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.9119999999999999,
+      "c": 0.014,
+      "h": 80
+     },
+     "hex": "#e7e1d8"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.32,
+      "c": 0.025,
+      "h": 72
+     },
+     "hex": "#3b3125"
+    }
+   }
+  },
+  {
+   "name": "fillAccent",
+   "formula": "slot(accent)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.55,
+      "c": 0.21,
+      "h": 260
+     },
+     "hex": "#1368e9"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.55,
+      "c": 0.21,
+      "h": 260
+     },
+     "hex": "#1368e9"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.55,
+      "c": 0.2,
+      "h": 30
+     },
+     "hex": "#cc2a1b"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.724,
+      "c": 0.1768271484375,
+      "h": 40
+     },
+     "hex": "#ff7847"
+    }
+   }
+  },
+  {
+   "name": "fillSuccess",
+   "formula": "slot(success) → C cap(0.1285)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.52,
+      "c": 0.1285,
+      "h": 155
+     },
+     "hex": "#007e46"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.52,
+      "c": 0.1285,
+      "h": 155
+     },
+     "hex": "#007e46"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.52,
+      "c": 0.1176,
+      "h": 160
+     },
+     "hex": "#007d51"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.52,
+      "c": 0.1285,
+      "h": 155
+     },
+     "hex": "#007e46"
+    }
+   }
+  },
+  {
+   "name": "fillWarning",
+   "formula": "slot(warning)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1582,
+      "h": 75
+     },
+     "hex": "#e79d00"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1582,
+      "h": 75
+     },
+     "hex": "#e79d00"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.78,
+      "c": 0.15,
+      "h": 85
+     },
+     "hex": "#e3ae28"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1582,
+      "h": 75
+     },
+     "hex": "#e79d00"
+    }
+   }
+  },
+  {
+   "name": "fillDanger",
+   "formula": "slot(danger)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.55,
+      "c": 0.22,
+      "h": 25
+     },
+     "hex": "#d40924"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.55,
+      "c": 0.22,
+      "h": 25
+     },
+     "hex": "#d40924"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.55,
+      "c": 0.21986572265625,
+      "h": 15
+     },
+     "hex": "#d20046"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.55,
+      "c": 0.22,
+      "h": 25
+     },
+     "hex": "#d40924"
+    }
+   }
+  },
+  {
+   "name": "fillTintAccent",
+   "formula": "ref(fgAccent) → alpha(0.12)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.195772705078125,
+      "h": 260,
+      "alpha": 0.12
+     },
+     "hex": "#0053c9"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1286,
+      "h": 260,
+      "alpha": 0.15
+     },
+     "hex": "#7daeff"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.19250488281250003,
+      "h": 30,
+      "alpha": 0.12
+     },
+     "hex": "#b10b00"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.15596191406249998,
+      "h": 40,
+      "alpha": 0.15
+     },
+     "hex": "#ff885d"
+    }
+   }
+  },
+  {
+   "name": "fillTintSuccess",
+   "formula": "ref(fgSuccess) → alpha(0.12)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.118642041015625,
+      "h": 155,
+      "alpha": 0.12
+     },
+     "hex": "#00703e"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.18540771484375002,
+      "h": 155,
+      "alpha": 0.15
+     },
+     "hex": "#00cf77"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.108573486328125,
+      "h": 160,
+      "alpha": 0.12
+     },
+     "hex": "#007048"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.18540771484375002,
+      "h": 155,
+      "alpha": 0.15
+     },
+     "hex": "#00cf77"
+    }
+   }
+  },
+  {
+   "name": "fillTintWarning",
+   "formula": "ref(fgWarning) → alpha(0.12)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.101250537109375,
+      "h": 75,
+      "alpha": 0.12
+     },
+     "hex": "#7e5400"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1582,
+      "h": 75,
+      "alpha": 0.15
+     },
+     "hex": "#e79d00"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.098351953125,
+      "h": 85,
+      "alpha": 0.12
+     },
+     "hex": "#775800"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1582,
+      "h": 75,
+      "alpha": 0.15
+     },
+     "hex": "#e79d00"
+    }
+   }
+  },
+  {
+   "name": "fillTintDanger",
+   "formula": "ref(fgDanger) → alpha(0.12)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.194552490234375,
+      "h": 25,
+      "alpha": 0.12
+     },
+     "hex": "#b1001b"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1505,
+      "h": 25,
+      "alpha": 0.15
+     },
+     "hex": "#ff847d"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.1919,
+      "h": 15,
+      "alpha": 0.12
+     },
+     "hex": "#af0039"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1505,
+      "h": 25,
+      "alpha": 0.15
+     },
+     "hex": "#ff847d"
+    }
+   }
+  },
+  {
+   "name": "borderFaint",
+   "formula": "ref(fgPrimary) → alpha(0.08)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 250,
+      "alpha": 0.08
+     },
+     "hex": "#222f3c"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.93,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.08
+     },
+     "hex": "#e3e8ee"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 30,
+      "alpha": 0.08
+     },
+     "hex": "#3c2825"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.949,
+      "c": 0.011,
+      "h": 72,
+      "alpha": 0.08
+     },
+     "hex": "#f3ede6"
+    }
+   }
+  },
+  {
+   "name": "borderNeutral",
+   "formula": "ref(fgPrimary) → alpha(0.15)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 250,
+      "alpha": 0.15
+     },
+     "hex": "#222f3c"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.93,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.15
+     },
+     "hex": "#e3e8ee"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 30,
+      "alpha": 0.15
+     },
+     "hex": "#3c2825"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.949,
+      "c": 0.011,
+      "h": 72,
+      "alpha": 0.15
+     },
+     "hex": "#f3ede6"
+    }
+   }
+  },
+  {
+   "name": "borderStrong",
+   "formula": "ref(fgPrimary) → alpha(0.3)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 250,
+      "alpha": 0.3
+     },
+     "hex": "#222f3c"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.93,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.3
+     },
+     "hex": "#e3e8ee"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.3,
+      "c": 0.03,
+      "h": 30,
+      "alpha": 0.3
+     },
+     "hex": "#3c2825"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.949,
+      "c": 0.011,
+      "h": 72,
+      "alpha": 0.3
+     },
+     "hex": "#f3ede6"
+    }
+   }
+  },
+  {
+   "name": "borderFocus",
+   "formula": "ref(fgAccent)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.195772705078125,
+      "h": 260
+     },
+     "hex": "#0053c9"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.1286,
+      "h": 260
+     },
+     "hex": "#7daeff"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.48,
+      "c": 0.19250488281250003,
+      "h": 30
+     },
+     "hex": "#b10b00"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.75,
+      "c": 0.15596191406249998,
+      "h": 40
+     },
+     "hex": "#ff885d"
+    }
+   }
+  },
+  {
+   "name": "scrimSoft",
+   "formula": "ref(bgPrimary) → alpha(0.25)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.95,
+      "c": 0.005,
+      "h": 250,
+      "alpha": 0.25
+     },
+     "hex": "#eceff2"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.15,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.25
+     },
+     "hex": "#080c0f"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.96,
+      "c": 0.01,
+      "h": 80,
+      "alpha": 0.25
+     },
+     "hex": "#f5f1ea"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.147,
+      "c": 0.004,
+      "h": 49,
+      "alpha": 0.25
+     },
+     "hex": "#0c0a09"
+    }
+   }
+  },
+  {
+   "name": "scrimMedium",
+   "formula": "ref(bgPrimary) → alpha(0.35)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.95,
+      "c": 0.005,
+      "h": 250,
+      "alpha": 0.35
+     },
+     "hex": "#eceff2"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.15,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.35
+     },
+     "hex": "#080c0f"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.96,
+      "c": 0.01,
+      "h": 80,
+      "alpha": 0.35
+     },
+     "hex": "#f5f1ea"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.147,
+      "c": 0.004,
+      "h": 49,
+      "alpha": 0.35
+     },
+     "hex": "#0c0a09"
+    }
+   }
+  },
+  {
+   "name": "scrimHeavy",
+   "formula": "ref(bgPrimary) → alpha(0.82)",
+   "values": {
+    "light": {
+     "oklch": {
+      "l": 0.95,
+      "c": 0.005,
+      "h": 250,
+      "alpha": 0.82
+     },
+     "hex": "#eceff2"
+    },
+    "dark": {
+     "oklch": {
+      "l": 0.15,
+      "c": 0.01,
+      "h": 250,
+      "alpha": 0.82
+     },
+     "hex": "#080c0f"
+    },
+    "acme": {
+     "oklch": {
+      "l": 0.96,
+      "c": 0.01,
+      "h": 80,
+      "alpha": 0.82
+     },
+     "hex": "#f5f1ea"
+    },
+    "ember": {
+     "oklch": {
+      "l": 0.147,
+      "c": 0.004,
+      "h": 49,
+      "alpha": 0.82
+     },
+     "hex": "#0c0a09"
+    }
+   }
+  }
+ ],
+ "scales": {
+  "space": [
+   0,
+   2,
+   4,
+   6,
+   8,
+   12,
+   16,
+   20,
+   24,
+   32,
+   40,
+   48,
+   64,
+   80,
+   96,
+   120,
+   144
+  ],
+  "size": [
+   24,
+   32,
+   40,
+   48
+  ],
+  "radius": [
+   4,
+   6,
+   8,
+   12
+  ],
+  "motion": {
+   "durations": [
+    150,
+    200,
+    350,
+    450,
+    600
+   ],
+   "easings": {
+    "standard": "ease",
+    "in-out": "ease-in-out",
+    "soft": "cubic-bezier(0.2, 0.6, 0.2, 1)"
+   }
+  },
+  "layout": {
+   "breakpoints": {
+    "sm": 560,
+    "md": 960
+   },
+   "container": {
+    "max": 1312,
+    "gutter": 40,
+    "gutterNarrow": 24
+   },
+   "zIndex": {
+    "nav": 100,
+    "overlay": 1000,
+    "tooltip": 1100
+   }
+  }
+ },
+ "topics": {
+  "variants": [
+   {
+    "variant": "accent",
+    "intent": "Primary action, draws attention",
+    "typicalUse": "Submit, CTA, main action in a group"
+   },
+   {
+    "variant": "accent-subtle",
+    "intent": "Accent tone, lower visual weight",
+    "typicalUse": "Selected state, active filter, soft CTA"
+   },
+   {
+    "variant": "neutral",
+    "intent": "Default, structurally present",
+    "typicalUse": "Secondary actions, toolbar buttons"
+   },
+   {
+    "variant": "neutral-subtle",
+    "intent": "Minimal chrome",
+    "typicalUse": "Inline actions, table row actions"
+   },
+   {
+    "variant": "ghost",
+    "intent": "No visible container until hover",
+    "typicalUse": "Icon-only triggers, compact toolbars"
+   },
+   {
+    "variant": "outline",
+    "intent": "Bordered ghost — visible structure, no fill until hover",
+    "typicalUse": "Marketing CTA, download button; hover fills accent"
+   },
+   {
+    "variant": "danger",
+    "intent": "Destructive action",
+    "typicalUse": "Delete, remove, disconnect"
+   },
+   {
+    "variant": "danger-subtle",
+    "intent": "Destructive context, low urgency",
+    "typicalUse": "Warning badges, soft destructive hints"
+   },
+   {
+    "variant": "success | warning",
+    "intent": "Status communication (Tag only)",
+    "typicalUse": "Status badges, labels"
+   }
+  ],
+  "rules": [
+   "One accent per visual group; everything else neutral or ghost.",
+   "danger only for actions with real consequences.",
+   "Sizes are px numbers (24|32|40|48), never S/M/L.",
+   "Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.",
+   "Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.",
+   "--psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono)."
+  ],
+  "states": {
+   "hover": "L - 0.04",
+   "active": "L - 0.08",
+   "disabled": "element opacity 0.4 (keeps hue)",
+   "focus": "2px ring var(--psi-{component}-focus-ring)"
+  },
+  "typographyDefaults": {
+   "body": "16-24-regular",
+   "compactUI": "14-20-regular",
+   "heading": "24-32-medium",
+   "caption": "12-16-regular"
+  },
+  "fonts": {
+   "roles": [
+    "sans",
+    "serif",
+    "mono",
+    "display"
+   ],
+   "note": "Font roles are brand-level (D29). The DS ships no font files: consumers load each brand's webfonts themselves.",
+   "brands": {
+    "ember": {
+     "archivo": "800,900 (display/sans)",
+     "ibmPlexSerif": "400 (serif)",
+     "ibmPlexMono": "400,500 (mono)"
+    }
+   },
+   "scope": "Brand font stacks fully apply when data-psi-theme is on the root <html> element (the standard consumer setup). In nested subtree theming, --psi-text-*/--psi-display-* combos keep the default stacks: custom properties substitute at :root."
+  },
+  "motion": {
+   "durations": [
+    150,
+    200,
+    350,
+    450,
+    600
+   ],
+   "easings": {
+    "standard": "ease",
+    "in-out": "ease-in-out",
+    "soft": "cubic-bezier(0.2, 0.6, 0.2, 1)"
+   },
+   "reducedMotion": "All --psi-duration-* zero under prefers-reduced-motion (D30). Always drive transitions/animations with duration tokens; never hardcode times.",
+   "recipes": {
+    "pulseDown": "App-level keyframe (the DS ships none): @keyframes pulse-down { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } } — drive with var(--psi-ease-in-out)."
+   }
+  },
+  "layout": {
+   "breakpoints": {
+    "sm": 560,
+    "md": 960
+   },
+   "note": "Breakpoints are build-time constants (D31): import { breakpoints } from '@handamade/psi-tokens/types'. CSS vars cannot drive @media.",
+   "container": "Use .psi-container — max-width 1312px, gutter 40px stepping to 24px under md.",
+   "zIndex": {
+    "nav": 100,
+    "overlay": 1000,
+    "tooltip": 1100
+   }
+  },
+  "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.",
+   "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": {
+   "accentRule": "Tags are passive labels and do not count against 'one accent per visual group' — that rule governs interactive emphasis (buttons/CTAs). D40.",
+   "badges": {
+    "highlight": "accent-subtle",
+    "meta": "neutral-subtle",
+    "status": "success | warning | danger"
+   }
+  },
+  "getting-started": {
+   "install": "npm install @handamade/psi-tokens @handamade/psi-react",
+   "cssImports": [
+    "@handamade/psi-tokens/base.css",
+    "@handamade/psi-tokens/<theme>.css — one per theme you use (light|dark|acme|ember)",
+    "@handamade/psi-tokens/components.css",
+    "@handamade/psi-tokens/utilities.css — REQUIRED: .psi-container + reduced-motion zeroing"
+   ],
+   "themeAttribute": "Set data-psi-theme=\"light|dark|acme|ember\" on <html> or a subtree root.",
+   "rules": "Sizes are px numbers (24 | 32 | 40 | 48), never S/M/L. Variants are flat (accent, accent-subtle, neutral, neutral-subtle, ghost, danger, danger-subtle, outline); one accent per visual group (Tags exempt, D40); danger only for destructive actions. Never hardcode colors — bind var(--psi-*)."
+  }
+ }
+}