@usetheo/ui 0.1.0-next.0

package/registry/r/sub-agent-dispatch.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sub-agent-dispatch",
+  "type": "registry:ui",
+  "title": "SubAgentDispatch",
+  "description": "Visualization for a Task() / sub-agent invocation.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/sub-agent-dispatch/sub-agent-dispatch.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/sub-agent-dispatch.tsx",
+      "content": "import { Bot, CornerDownRight, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type SubAgentState = \"spawning\" | \"running\" | \"completed\" | \"failed\" | \"cancelled\";\n\nexport interface SubAgentRun {\n  id: string;\n  /** Profile name (matches AgentProfile.name). */\n  agent: string;\n  /** Short task description given to the sub-agent. */\n  task: string;\n  state: SubAgentState;\n  /** Optional duration label. */\n  duration?: string;\n  /** Optional last status line (preview of the latest event). */\n  lastEvent?: string;\n  /** Optional result summary (one-liner). */\n  result?: ReactNode;\n}\n\ninterface SubAgentDispatchProps extends HTMLAttributes<HTMLElement> {\n  run: SubAgentRun;\n  /** When provided, renders a cancel button while the run is in flight. */\n  onCancel?: (id: string) => void;\n}\n\nconst STATE_CONFIG: Record<SubAgentState, { label: string; class: string }> = {\n  spawning: {\n    label: \"Spawning\",\n    class: \"border-primary/40 bg-primary/10 text-primary animate-pulse\",\n  },\n  running: { label: \"Running\", class: \"border-primary/40 bg-primary/15 text-primary\" },\n  completed: { label: \"Done\", class: \"border-success/40 bg-success/15 text-success\" },\n  failed: { label: \"Failed\", class: \"border-destructive/40 bg-destructive/15 text-destructive\" },\n  cancelled: { label: \"Cancelled\", class: \"border-border/40 bg-muted text-muted-foreground\" },\n};\n\n/**\n * SubAgentDispatch — visualization for a Task() / sub-agent invocation.\n *\n * Shows the agent name, the task summary, current state, an inline event\n * preview, and an optional result. Use inside the agent timeline to make\n * delegation visible.\n */\nconst SubAgentDispatch = forwardRef<HTMLElement, SubAgentDispatchProps>(\n  ({ className, run, onCancel, ...props }, ref) => {\n    const cfg = STATE_CONFIG[run.state];\n    const isLive = run.state === \"spawning\" || run.state === \"running\";\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"grid gap-2 rounded-lg border border-primary/30 border-l-2 border-l-primary bg-card px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <CornerDownRight className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <Bot className=\"size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <span className=\"font-medium font-mono text-code-sm text-foreground\">dispatch</span>\n            <span className=\"font-mono text-code-sm text-primary\">{run.agent}</span>\n            {run.duration ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                · {run.duration}\n              </span>\n            ) : null}\n          </div>\n          <span\n            className={cn(\n              \"inline-flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {isLive ? <Loader2 className=\"size-3 animate-spin\" aria-hidden=\"true\" /> : null}\n            {cfg.label}\n          </span>\n        </header>\n\n        <p className=\"text-body-sm text-foreground\">\n          <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            task\n          </span>\n          {run.task}\n        </p>\n\n        {run.lastEvent ? (\n          <p className=\"truncate font-mono text-code-sm text-muted-foreground\">\n            <span className=\"text-muted-foreground/60\">›</span> {run.lastEvent}\n          </p>\n        ) : null}\n\n        {run.result ? (\n          <p className=\"rounded-md bg-muted/40 px-3 py-2 text-body-sm text-foreground\">\n            <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              result\n            </span>\n            {run.result}\n          </p>\n        ) : null}\n\n        {isLive && onCancel ? (\n          <footer className=\"flex justify-end\">\n            <button\n              type=\"button\"\n              onClick={() => onCancel(run.id)}\n              className=\"rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              Cancel\n            </button>\n          </footer>\n        ) : null}\n      </article>\n    );\n  },\n);\nSubAgentDispatch.displayName = \"SubAgentDispatch\";\n\nexport { SubAgentDispatch };\n"
+    }
+  ]
+}

package/registry/r/switch.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "type": "registry:ui",
+  "title": "Switch",
+  "description": "Built on Radix Switch — accessible binary toggle with on / off states and disabled support.",
+  "dependencies": [
+    "@radix-ui/react-switch"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/switch/switch.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/switch.tsx",
+      "content": "import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Switch — built on Radix Switch. Used for binary toggles (autoaccept,\n * dark mode preview, feature flags).\n *\n * Off-state uses --muted, on-state uses --primary with a subtle glow shadow\n * to mark \"this is active\" in the violet brand language.\n */\nconst Switch = forwardRef<\n  ElementRef<typeof SwitchPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent\",\n      \"transition-[background-color,box-shadow] duration-base ease-out-soft\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      \"data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_0_8px_hsl(var(--primary)/0.35)]\",\n      \"data-[state=unchecked]:bg-muted\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SwitchPrimitive.Thumb\n      className={cn(\n        \"pointer-events-none block size-4 rounded-full bg-card shadow-sm\",\n        \"transition-transform duration-base ease-out-soft\",\n        \"data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5\",\n      )}\n    />\n  </SwitchPrimitive.Root>\n));\nSwitch.displayName = \"Switch\";\n\nexport { Switch };\n"
+    }
+  ]
+}

package/registry/r/system-prompt-editor.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "system-prompt-editor",
+  "type": "registry:ui",
+  "title": "SystemPromptEditor",
+  "description": "Surface the agent's system prompt with a clear",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/system-prompt-editor/system-prompt-editor.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/system-prompt-editor.tsx",
+      "content": "import { RotateCcw, Sparkles } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface SystemPromptEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Vendor / default system prompt (read-only). */\n  defaultPrompt: string;\n  /** Current override; pass empty string for \"use default\". */\n  override: string;\n  onOverrideChange: (next: string) => void;\n  /** Approximate token count for the active prompt. */\n  tokenEstimate?: number;\n  title?: ReactNode;\n}\n\n/**\n * SystemPromptEditor — surface the agent's system prompt with a clear\n * \"vendor default\" vs \"user override\" toggle.\n *\n * Behavior:\n *   - When override is empty, the textarea shows the default (greyed out,\n *     editable starts blank).\n *   - When user types, override takes effect.\n *   - \"Reset to default\" wipes the override.\n *\n * Critical for transparency: a user must be able to see and edit the prompt.\n */\nconst SystemPromptEditor = forwardRef<HTMLDivElement, SystemPromptEditorProps>(\n  (\n    {\n      className,\n      defaultPrompt,\n      override,\n      onOverrideChange,\n      tokenEstimate,\n      title = \"System prompt\",\n      ...props\n    },\n    ref,\n  ) => {\n    const usingOverride = override.length > 0;\n    const [showDefault, setShowDefault] = useState(false);\n\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n        <header className=\"flex items-center justify-between gap-3 border-border/40 border-b px-4 py-3\">\n          <div className=\"flex items-center gap-2\">\n            <Sparkles className=\"size-4 text-primary\" aria-hidden=\"true\" />\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            <span\n              className={cn(\n                \"inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-label uppercase tracking-wider\",\n                usingOverride\n                  ? \"border-primary/40 bg-primary/10 text-primary\"\n                  : \"border-border/40 bg-muted text-muted-foreground\",\n              )}\n            >\n              {usingOverride ? \"Override active\" : \"Vendor default\"}\n            </span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {tokenEstimate !== undefined ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                ~{tokenEstimate.toLocaleString()} tokens\n              </span>\n            ) : null}\n            <button\n              type=\"button\"\n              onClick={() => setShowDefault((v) => !v)}\n              className=\"rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              {showDefault ? \"Hide\" : \"Show\"} default\n            </button>\n            {usingOverride ? (\n              <button\n                type=\"button\"\n                onClick={() => onOverrideChange(\"\")}\n                className=\"inline-flex items-center gap-1 rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              >\n                <RotateCcw className=\"size-3\" /> Reset\n              </button>\n            ) : null}\n          </div>\n        </header>\n\n        {showDefault ? (\n          <pre className=\"max-h-48 overflow-auto border-border/40 border-b bg-muted/40 px-4 py-3 font-mono text-code-sm text-muted-foreground\">\n            {defaultPrompt}\n          </pre>\n        ) : null}\n\n        <textarea\n          value={override}\n          onChange={(e) => onOverrideChange(e.target.value)}\n          placeholder={\n            usingOverride ? \"\" : \"Leave empty to use the vendor default. Type here to override.\"\n          }\n          rows={8}\n          className={cn(\n            \"w-full resize-y bg-transparent px-4 py-3 font-mono text-code-md text-foreground\",\n            \"placeholder:text-muted-foreground\",\n            \"focus:outline-none\",\n          )}\n        />\n      </section>\n    );\n  },\n);\nSystemPromptEditor.displayName = \"SystemPromptEditor\";\n\nexport { SystemPromptEditor };\n"
+    }
+  ]
+}

package/registry/r/tabs.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "title": "Tabs",
+  "description": "Built on Radix Tabs with active-underline styling and focus-visible ring.",
+  "dependencies": [
+    "@radix-ui/react-tabs"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/tabs/tabs.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/tabs.tsx",
+      "content": "import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Tabs — built on Radix Tabs.\n *\n * Visual: underlined active tab in primary (violet), inactive in muted-foreground.\n * Used in project views (Overview / Deployments / Logs / Settings).\n */\n\nconst List = forwardRef<\n  ElementRef<typeof TabsPrimitive.List>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-10 items-center border-border/40 border-b text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nList.displayName = \"Tabs.List\";\n\nconst Trigger = forwardRef<\n  ElementRef<typeof TabsPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"relative inline-flex h-10 items-center justify-center whitespace-nowrap px-4\",\n      \"font-medium font-sans text-body-sm text-muted-foreground\",\n      \"transition-colors duration-base ease-out-soft\",\n      \"hover:text-foreground\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n      \"data-[state=active]:text-foreground\",\n      // Active underline using a pseudo-element via shadow\n      \"data-[state=active]:shadow-[inset_0_-2px_0_0_hsl(var(--primary))]\",\n      className,\n    )}\n    {...props}\n  />\n));\nTrigger.displayName = \"Tabs.Trigger\";\n\nconst Content = forwardRef<\n  ElementRef<typeof TabsPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    {...props}\n  />\n));\nContent.displayName = \"Tabs.Content\";\n\nconst Tabs = /*#__PURE__*/ Object.assign(TabsPrimitive.Root, {\n  List,\n  Trigger,\n  Content,\n});\n\nexport { Tabs };\n"
+    }
+  ]
+}

package/registry/r/tailwind-preset.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tailwind-preset",
+  "type": "registry:lib",
+  "title": "Theo UI Tailwind preset",
+  "description": "Type scale, fontFamily, colors and motion tokens consumed by every Theo UI component. Add to tailwind.config.ts#presets before installing any other component.",
+  "dependencies": [
+    "tailwindcss",
+    "tailwindcss-animate"
+  ],
+  "files": [
+    {
+      "path": "styles/tailwind-preset.ts",
+      "type": "registry:lib",
+      "target": "styles/tailwind-preset.ts",
+      "content": "/**\n * Theo UI Tailwind preset — Violet Forge identity.\n *\n * Single source of truth for the design system's utility-level tokens:\n *   - colors mapped to CSS variables (HSL split via `hsl(var(--x) / <alpha>)`)\n *   - Geist-inspired typescale (display / title / body / label / code tiers)\n *   - radii, shadows, motion timing & duration, keyframes\n *   - tailwindcss-animate plugin\n *\n * Consumed by:\n *   - `tailwind.config.ts` (this repo) via `presets: [theoUIPreset]`\n *   - registry/r/tailwind-preset.json (shipped to consumers via shadcn CLI)\n *\n * Consumers integrate as:\n *\n *   import type { Config } from \"tailwindcss\";\n *   import { theoUIPreset } from \"./styles/tailwind-preset\";\n *\n *   export default {\n *     darkMode: \"class\",\n *     content: [\"./src/**\\/*.{ts,tsx}\"],\n *     presets: [theoUIPreset],\n *   } satisfies Config;\n *\n * Note: `darkMode` and `content` are NOT in the preset — they are consumer\n * decisions. The preset only contains `theme.extend.*` and `plugins`.\n */\n\nimport type { Config } from \"tailwindcss\";\nimport animate from \"tailwindcss-animate\";\n\nconst hsl = (token: string) => `hsl(var(${token}) / <alpha-value>)`;\n\nexport const theoUIPreset: Partial<Config> = {\n  theme: {\n    container: {\n      center: true,\n      padding: \"1rem\",\n      screens: {\n        \"2xl\": \"1280px\",\n      },\n    },\n    extend: {\n      colors: {\n        background: hsl(\"--background\"),\n        foreground: hsl(\"--foreground\"),\n        card: {\n          DEFAULT: hsl(\"--card\"),\n          foreground: hsl(\"--card-foreground\"),\n        },\n        popover: {\n          DEFAULT: hsl(\"--popover\"),\n          foreground: hsl(\"--popover-foreground\"),\n        },\n        primary: {\n          DEFAULT: hsl(\"--primary\"),\n          deep: hsl(\"--primary-deep\"),\n          glow: hsl(\"--primary-glow\"),\n          foreground: hsl(\"--primary-foreground\"),\n        },\n        secondary: {\n          DEFAULT: hsl(\"--secondary\"),\n          foreground: hsl(\"--secondary-foreground\"),\n        },\n        accent: {\n          DEFAULT: hsl(\"--accent\"),\n          deep: hsl(\"--accent-deep\"),\n          foreground: hsl(\"--accent-foreground\"),\n        },\n        muted: {\n          DEFAULT: hsl(\"--muted\"),\n          foreground: hsl(\"--muted-foreground\"),\n        },\n        success: {\n          DEFAULT: hsl(\"--success\"),\n          foreground: hsl(\"--success-foreground\"),\n        },\n        warning: {\n          DEFAULT: hsl(\"--warning\"),\n          foreground: hsl(\"--warning-foreground\"),\n        },\n        destructive: {\n          DEFAULT: hsl(\"--destructive\"),\n          foreground: hsl(\"--destructive-foreground\"),\n        },\n        info: {\n          DEFAULT: hsl(\"--info\"),\n          foreground: hsl(\"--info-foreground\"),\n        },\n        border: hsl(\"--border\"),\n        input: hsl(\"--input\"),\n        ring: hsl(\"--ring\"),\n      },\n      fontFamily: {\n        display: \"var(--font-display)\",\n        sans: \"var(--font-body)\",\n        mono: \"var(--font-mono)\",\n      },\n      /* Geist-inspired Violet Forge typescale.\n       *\n       * Three strict weights: 400 (body), 500 (UI), 600 (display/headings).\n       * Letter-spacing scales with size — aggressive negative on display.\n       * Mirrors the Vercel/Geist vocabulary while keeping Theo's identity.\n       */\n      fontSize: {\n        // Display tier — aggressive compression, content-led headlines\n        \"display-2xl\": [\"64px\", { lineHeight: \"1\", letterSpacing: \"-0.0464em\", fontWeight: \"600\" }],\n        \"display-xl\": [\"48px\", { lineHeight: \"1.05\", letterSpacing: \"-0.05em\", fontWeight: \"600\" }],\n        \"display-lg\": [\"40px\", { lineHeight: \"1.1\", letterSpacing: \"-0.05em\", fontWeight: \"600\" }],\n        \"display-md\": [\"32px\", { lineHeight: \"1.2\", letterSpacing: \"-0.04em\", fontWeight: \"600\" }],\n        headline: [\"28px\", { lineHeight: \"1.25\", letterSpacing: \"-0.035em\", fontWeight: \"600\" }],\n        // Title tier — section / card heads\n        \"title-lg\": [\"24px\", { lineHeight: \"1.33\", letterSpacing: \"-0.04em\", fontWeight: \"600\" }],\n        \"title-md\": [\"20px\", { lineHeight: \"1.4\", letterSpacing: \"-0.03em\", fontWeight: \"600\" }],\n        // Body tier — reads at default weight, tight tracking still applies modestly\n        \"body-lg\": [\"18px\", { lineHeight: \"1.56\", letterSpacing: \"-0.01em\", fontWeight: \"400\" }],\n        \"body-md\": [\"15px\", { lineHeight: \"1.5\", letterSpacing: \"-0.005em\", fontWeight: \"400\" }],\n        \"body-sm\": [\"14px\", { lineHeight: \"1.43\", fontWeight: \"400\" }],\n        // Label tier — used on buttons, nav, secondary actions\n        label: [\"14px\", { lineHeight: \"1.43\", fontWeight: \"500\" }],\n        \"label-caps\": [\"12px\", { lineHeight: \"1.33\", letterSpacing: \"0.04em\", fontWeight: \"500\" }],\n        // Mono — code surfaces, technical labels\n        \"code-md\": [\"14px\", { lineHeight: \"1.5\", fontWeight: \"400\" }],\n        \"code-sm\": [\"13px\", { lineHeight: \"1.54\", fontWeight: \"500\" }],\n      },\n      borderRadius: {\n        none: \"var(--radius-none)\",\n        sm: \"var(--radius-sm)\",\n        md: \"var(--radius-md)\",\n        lg: \"var(--radius-lg)\",\n        xl: \"var(--radius-xl)\",\n        \"2xl\": \"var(--radius-2xl)\",\n        full: \"var(--radius-full)\",\n      },\n      boxShadow: {\n        sm: \"var(--shadow-sm)\",\n        md: \"var(--shadow-md)\",\n        lg: \"var(--shadow-lg)\",\n        glow: \"var(--shadow-glow)\",\n        \"glow-strong\": \"var(--shadow-glow-strong)\",\n      },\n      transitionTimingFunction: {\n        \"out-soft\": \"var(--ease-out-soft)\",\n        snap: \"var(--ease-snap)\",\n      },\n      transitionDuration: {\n        fast: \"var(--duration-fast)\",\n        base: \"var(--duration-base)\",\n        slow: \"var(--duration-slow)\",\n      },\n      keyframes: {\n        \"fade-in-up\": {\n          \"0%\": { opacity: \"0\", transform: \"translateY(8px)\" },\n          \"100%\": { opacity: \"1\", transform: \"translateY(0)\" },\n        },\n        \"pulse-glow\": {\n          \"0%, 100%\": { boxShadow: \"0 0 0 0 hsl(var(--primary) / 0.5)\" },\n          \"50%\": { boxShadow: \"0 0 0 8px hsl(var(--primary) / 0)\" },\n        },\n      },\n      animation: {\n        \"fade-in-up\": \"fade-in-up var(--duration-base) var(--ease-out-soft) both\",\n        \"pulse-glow\": \"pulse-glow 1.5s var(--ease-in-out) infinite\",\n      },\n    },\n  },\n  plugins: [animate],\n};\n"
+    }
+  ]
+}

package/registry/r/task-header.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "task-header",
+  "type": "registry:ui",
+  "title": "TaskHeader",
+  "description": "Title bar for a task pane — composite combining heading, status badge, and chevron menu.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "badge",
+    "cn",
+    "tailwind-preset",
+    "task-types"
+  ],
+  "files": [
+    {
+      "path": "components/composites/task-header/task-header.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/task-header.tsx",
+      "content": "import { ChevronDown } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { TaskStatus } from \"@/types/task\";\nimport { Badge } from \"@/components/ui/badge\";\n\nconst statusVariant: Record<\n  TaskStatus,\n  \"default\" | \"primary\" | \"warning\" | \"success\" | \"destructive\"\n> = {\n  idle: \"default\",\n  permission_required: \"warning\",\n  starting: \"primary\",\n  running: \"primary\",\n  verifying: \"primary\",\n  completed: \"success\",\n  failed: \"destructive\",\n};\nconst statusDot: Record<TaskStatus, \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"> = {\n  idle: \"muted\",\n  permission_required: \"warning\",\n  starting: \"primary\",\n  running: \"primary\",\n  verifying: \"primary\",\n  completed: \"success\",\n  failed: \"destructive\",\n};\nconst statusLabel: Record<TaskStatus, string> = {\n  idle: \"Idle\",\n  permission_required: \"Permission required\",\n  starting: \"Starting up\",\n  running: \"Running\",\n  verifying: \"Verifying\",\n  completed: \"Completed\",\n  failed: \"Failed\",\n};\n\ninterface TaskHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title: ReactNode;\n  status?: TaskStatus;\n  /**\n   * If provided, a chevron is shown next to the title and clicking it fires this callback.\n   * Used as the \"expand task metadata\" affordance in the Infra shell.\n   */\n  onToggle?: () => void;\n  /** Right-side actions (e.g. cancel task, close panel). */\n  actions?: ReactNode;\n}\n\n/**\n * TaskHeader — title bar for a task pane.\n *\n * Visual: display-md title with chevron + optional status badge with pulse + actions slot.\n */\nconst TaskHeader = forwardRef<HTMLElement, TaskHeaderProps>(\n  ({ className, title, status, onToggle, actions, ...props }, ref) => (\n    <header\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-between gap-3 rounded-xl border border-border/40 bg-card px-4 py-3\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <h2 className=\"truncate font-display text-title-lg tracking-tight\">{title}</h2>\n        {onToggle ? (\n          <button\n            type=\"button\"\n            onClick={onToggle}\n            aria-label=\"Toggle task details\"\n            className=\"rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <ChevronDown className=\"size-4\" />\n          </button>\n        ) : null}\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {status ? (\n          <Badge variant={statusVariant[status]}>\n            <Badge.Dot\n              tone={statusDot[status]}\n              pulse={status === \"running\" || status === \"starting\" || status === \"verifying\"}\n            />\n            {statusLabel[status]}\n          </Badge>\n        ) : null}\n        {actions}\n      </div>\n    </header>\n  ),\n);\nTaskHeader.displayName = \"TaskHeader\";\n\nexport { TaskHeader };\n"
+    }
+  ]
+}

package/registry/r/task-plan.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "task-plan",
+  "type": "registry:ui",
+  "title": "TaskPlan",
+  "description": "Hierarchical task plan, à la Claude \"plan mode\".",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/task-plan/task-plan.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/task-plan.tsx",
+      "content": "import { CheckCircle2, Circle, CircleDashed, CircleX, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type PlanNodeStatus = \"pending\" | \"running\" | \"done\" | \"skipped\" | \"failed\";\n\nexport interface PlanNode {\n  id: string;\n  label: string;\n  status: PlanNodeStatus;\n  /** Optional details / sub-explanation. */\n  detail?: string;\n  /** Sub-nodes (rendered indented). */\n  children?: PlanNode[];\n}\n\nconst STATUS_ICON = {\n  pending: CircleDashed,\n  running: Loader2,\n  done: CheckCircle2,\n  skipped: Circle,\n  failed: CircleX,\n} as const;\n\nconst STATUS_COLOR: Record<PlanNodeStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  done: \"text-success\",\n  skipped: \"text-muted-foreground/60\",\n  failed: \"text-destructive\",\n};\n\nconst LABEL_STYLE: Record<PlanNodeStatus, string> = {\n  pending: \"text-foreground\",\n  running: \"text-foreground\",\n  done: \"text-foreground line-through decoration-muted-foreground/40\",\n  skipped: \"text-muted-foreground line-through\",\n  failed: \"text-destructive\",\n};\n\ninterface TaskNodeProps extends HTMLAttributes<HTMLLIElement> {\n  node: PlanNode;\n  depth?: number;\n}\n\n/**\n * TaskNode — single row in a task plan. Renders its own children recursively\n * with increasing indentation.\n */\nconst TaskNode = forwardRef<HTMLLIElement, TaskNodeProps>(\n  ({ className, node, depth = 0, ...props }, ref) => {\n    const Icon = STATUS_ICON[node.status];\n    return (\n      <li\n        ref={ref}\n        className={cn(\"grid gap-1\", className)}\n        style={{ marginLeft: `${depth * 1.25}rem` }}\n        {...props}\n      >\n        <div className=\"grid grid-cols-[auto_1fr] items-baseline gap-2\">\n          <Icon\n            aria-hidden=\"true\"\n            className={cn(\n              \"mt-0.5 size-3.5 shrink-0\",\n              STATUS_COLOR[node.status],\n              node.status === \"running\" && \"animate-spin\",\n            )}\n          />\n          <div className=\"min-w-0\">\n            <p className={cn(\"text-body-sm\", LABEL_STYLE[node.status])}>{node.label}</p>\n            {node.detail ? (\n              <p className=\"text-body-sm text-muted-foreground\">{node.detail}</p>\n            ) : null}\n          </div>\n        </div>\n        {node.children && node.children.length > 0 ? (\n          <ul className=\"grid gap-1 border-border/30 border-l pl-2\">\n            {node.children.map((child) => (\n              <TaskNode key={child.id} node={child} depth={depth + 1} />\n            ))}\n          </ul>\n        ) : null}\n      </li>\n    );\n  },\n);\nTaskNode.displayName = \"TaskNode\";\n\ninterface TaskPlanProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  nodes: PlanNode[];\n  /** Header title. */\n  title?: ReactNode;\n  /** Summary line shown next to the title (e.g. \"3 of 7 done\"). */\n  summary?: ReactNode;\n}\n\n/**\n * TaskPlan — hierarchical task plan, à la Claude \"plan mode\".\n *\n * The agent emits a structured plan; the user sees each step progress from\n * pending → running → done (or failed/skipped). Children render with one\n * extra indent level and a left border to suggest hierarchy.\n */\nconst TaskPlan = forwardRef<HTMLElement, TaskPlanProps>(\n  ({ className, nodes, title = \"Plan\", summary, ...props }, ref) => {\n    const auto = nodes.length;\n    const done = nodes.filter((n) => n.status === \"done\").length;\n    const computedSummary = summary ?? (auto > 0 ? `${done} of ${auto} done` : \"no steps\");\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card p-4\", className)} {...props}>\n        <header className=\"mb-3 flex items-baseline justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n            {computedSummary}\n          </span>\n        </header>\n        <ul className=\"grid gap-1.5\">\n          {nodes.map((node) => (\n            <TaskNode key={node.id} node={node} />\n          ))}\n        </ul>\n      </section>\n    );\n  },\n);\nTaskPlan.displayName = \"TaskPlan\";\n\nexport { TaskNode, TaskPlan };\n"
+    }
+  ]
+}

package/registry/r/task-types.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "task-types",
+  "type": "registry:lib",
+  "title": "Theo UI task types",
+  "description": "Shared TypeScript types for task plans, steps, and progress state.",
+  "files": [
+    {
+      "path": "types/task.ts",
+      "type": "registry:lib",
+      "target": "types/task.ts",
+      "content": "export type TaskStatus =\n  | \"idle\"\n  | \"permission_required\"\n  | \"starting\"\n  | \"running\"\n  | \"verifying\"\n  | \"completed\"\n  | \"failed\";\n\nexport type TaskStepStatus = \"pending\" | \"running\" | \"done\" | \"skipped\";\n\nexport interface TaskStep {\n  id: string;\n  label: string;\n  status: TaskStepStatus;\n  /** 0..1 progress for in-flight steps. */\n  progress?: number;\n}\n"
+    }
+  ]
+}

package/registry/r/terminal-panel.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "terminal-panel",
+  "type": "registry:ui",
+  "title": "TerminalPanel",
+  "description": "Minimal terminal output viewer.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/terminal-panel/terminal-panel.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/terminal-panel.tsx",
+      "content": "import { Terminal as TerminalIcon } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\nexport interface TerminalLine {\n  id: string;\n  /**\n   * Visual kind: command (prompted), stdout, stderr, ok (success), prompt (active line).\n   */\n  kind?: \"command\" | \"stdout\" | \"stderr\" | \"ok\" | \"prompt\";\n  content: ReactNode;\n}\n\ninterface TerminalPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  lines: TerminalLine[];\n  /**\n   * Optional prompt prefix for commands, defaults to \"$\".\n   */\n  promptPrefix?: string;\n  /**\n   * Live-region politeness for screen readers. Use `\"polite\"` when streaming\n   * fresh output so assistive tech announces new lines without interrupting.\n   * Default `\"off\"` for static / historical views.\n   */\n  live?: \"off\" | \"polite\";\n}\n\nconst kindColor: Record<NonNullable<TerminalLine[\"kind\"]>, string> = {\n  command: \"text-foreground\",\n  stdout: \"text-muted-foreground\",\n  stderr: \"text-destructive\",\n  ok: \"text-success\",\n  prompt: \"text-primary\",\n};\n\n/**\n * TerminalPanel — minimal terminal output viewer.\n *\n * Visual: dark card with mono font, \"$ \" prefix on command lines, color-coded\n * stdout/stderr/success. No interactivity (read-only) — pair with your own\n * pty/xterm for live shells if needed.\n */\nconst TerminalPanel = forwardRef<HTMLDivElement, TerminalPanelProps>(\n  ({ className, title = \"Terminal\", lines, promptPrefix = \"$\", live = \"off\", ...props }, ref) => {\n    // T4.1 (MF-4): suppress own aria-live when nested in container live region.\n    const inLiveRegion = useInLiveRegion();\n    const effectiveLive = inLiveRegion ? \"off\" : live;\n    return (\n      <div\n        ref={ref}\n        className={cn(\"overflow-hidden rounded-xl border bg-card\", className)}\n        {...props}\n      >\n        <header className=\"flex items-center gap-2 border-border/40 border-b px-3 py-2\">\n          <TerminalIcon className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n        </header>\n        <ol\n          className=\"grid gap-0.5 px-3 py-2 font-mono text-code-sm\"\n          aria-live={effectiveLive}\n          aria-atomic=\"false\"\n        >\n          {lines.map((line) => {\n            const kind = line.kind ?? \"stdout\";\n            return (\n              <li key={line.id} className={cn(\"whitespace-pre-wrap\", kindColor[kind])}>\n                {kind === \"command\" ? (\n                  <>\n                    <span className=\"select-none text-primary\">{promptPrefix} </span>\n                    {line.content}\n                  </>\n                ) : kind === \"prompt\" ? (\n                  <span className=\"motion-safe:animate-pulse\">{line.content}</span>\n                ) : (\n                  line.content\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    );\n  },\n);\nTerminalPanel.displayName = \"TerminalPanel\";\n\nexport { TerminalPanel };\n"
+    }
+  ]
+}

package/registry/r/textarea.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea",
+  "type": "registry:ui",
+  "title": "Textarea",
+  "description": "Multi-line input mirror of Input.",
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/textarea/textarea.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/textarea.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\n/**\n * Textarea — multi-line input mirror of Input.\n *\n * Matches Input visuals (violet focus ring, --input border, --card bg).\n * Default minimum height of 96px; consumer can override via className.\n */\nconst Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, rows = 3, ...props }, ref) => (\n    <textarea\n      ref={ref}\n      rows={rows}\n      className={cn(\n        \"flex min-h-[6rem] w-full resize-y rounded-md border border-input bg-card px-3 py-2\",\n        \"text-body-md text-foreground placeholder:text-muted-foreground\",\n        \"transition-[box-shadow,border-color] duration-base ease-out-soft\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"focus-visible:border-primary\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n"
+    }
+  ]
+}

package/registry/r/theme-provider.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-provider",
+  "type": "registry:lib",
+  "title": "ThemeProvider",
+  "description": "Theme + dark mode provider with built-in Violet Forge, Classic Paper, and Aurora Terminal themes.",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tokens"
+  ],
+  "files": [
+    {
+      "path": "themes/types.ts",
+      "type": "registry:lib",
+      "target": "themes/types.ts",
+      "content": "/**\n * Theo UI — Theme types.\n *\n * A Theme is a frozen bundle of CSS-var values that the runtime can swap by\n * setting `data-theme=\"<name>\"` on `<html>`. The structure mirrors what lives\n * in tokens.css so themes can be merged without ambiguity.\n */\n\nexport type ThemeMode = \"light\" | \"dark\";\n\nexport interface ColorScale {\n  background: string;\n  foreground: string;\n  card: string;\n  \"card-foreground\": string;\n  popover: string;\n  \"popover-foreground\": string;\n  primary: string;\n  \"primary-deep\": string;\n  \"primary-glow\": string;\n  \"primary-foreground\": string;\n  secondary: string;\n  \"secondary-foreground\": string;\n  accent: string;\n  \"accent-deep\": string;\n  \"accent-foreground\": string;\n  muted: string;\n  \"muted-foreground\": string;\n  border: string;\n  input: string;\n  ring: string;\n  success: string;\n  \"success-foreground\": string;\n  warning: string;\n  \"warning-foreground\": string;\n  destructive: string;\n  \"destructive-foreground\": string;\n  info: string;\n  \"info-foreground\": string;\n}\n\nexport interface ThemeFonts {\n  /** Display headlines (h1-h3, hero text). */\n  display: string;\n  /** Body / UI text. */\n  body: string;\n  /** Code, mono, paths, timestamps. */\n  mono: string;\n}\n\nexport interface Theme {\n  /** Stable id, used in `data-theme`. */\n  name: string;\n  /** Human-readable label for theme switchers. */\n  label: string;\n  /** Optional short description shown in switchers. */\n  description?: string;\n  fonts: ThemeFonts;\n  light: ColorScale;\n  dark: ColorScale;\n  /**\n   * Optional URL(s) to fetch before applying. The provider injects a `<link>`\n   * tag once per URL to load remote fonts. Already-injected URLs are deduped.\n   */\n  fontUrls?: string[];\n}\n"
+    },
+    {
+      "path": "themes/violet-forge.ts",
+      "type": "registry:lib",
+      "target": "themes/violet-forge.ts",
+      "content": "import type { Theme } from \"@/themes/types\";\n\n/**\n * Violet Forge — the default Theo theme.\n *\n * Identity: Theo violet primary (#7C3AED), burnt sienna accent (#C96442),\n * Vercel-style neutral surfaces (pure white light / charcoal dark),\n * Geist Sans + Geist Mono throughout.\n *\n * Source of truth for `data-theme` overrides. Values mirror\n * src/styles/tokens.css for the default `:root`.\n */\nexport const violetForge: Theme = {\n  name: \"violet-forge\",\n  label: \"Violet Forge\",\n  description: \"Theo default — violet primary, burnt sienna accent, Geist Sans + Geist Mono.\",\n  fonts: {\n    display: '\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    body: '\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    mono: '\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace',\n  },\n  fontUrls: [\n    \"https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap\",\n  ],\n  light: {\n    background: \"0 0% 100%\",\n    foreground: \"0 0% 4%\",\n    card: \"0 0% 100%\",\n    \"card-foreground\": \"0 0% 4%\",\n    popover: \"0 0% 100%\",\n    \"popover-foreground\": \"0 0% 4%\",\n    primary: \"262 83% 58%\",\n    \"primary-deep\": \"263 70% 42%\",\n    \"primary-glow\": \"263 90% 76%\",\n    \"primary-foreground\": \"0 0% 100%\",\n    secondary: \"0 0% 96%\",\n    \"secondary-foreground\": \"0 0% 4%\",\n    accent: \"15 54% 53%\",\n    \"accent-deep\": \"15 55% 40%\",\n    \"accent-foreground\": \"0 0% 100%\",\n    muted: \"0 0% 96%\",\n    \"muted-foreground\": \"0 0% 45%\",\n    border: \"0 0% 91%\",\n    input: \"0 0% 91%\",\n    ring: \"262 83% 58%\",\n    success: \"142 71% 36%\",\n    \"success-foreground\": \"0 0% 100%\",\n    warning: \"33 92% 44%\",\n    \"warning-foreground\": \"0 0% 100%\",\n    destructive: \"0 72% 51%\",\n    \"destructive-foreground\": \"0 0% 100%\",\n    info: \"217 91% 60%\",\n    \"info-foreground\": \"0 0% 100%\",\n  },\n  dark: {\n    background: \"0 0% 4%\",\n    foreground: \"0 0% 96%\",\n    card: \"0 0% 7%\",\n    \"card-foreground\": \"0 0% 96%\",\n    popover: \"0 0% 9%\",\n    \"popover-foreground\": \"0 0% 96%\",\n    primary: \"262 83% 58%\",\n    \"primary-deep\": \"263 70% 42%\",\n    \"primary-glow\": \"263 90% 76%\",\n    \"primary-foreground\": \"0 0% 100%\",\n    secondary: \"0 0% 11%\",\n    \"secondary-foreground\": \"0 0% 96%\",\n    accent: \"15 54% 53%\",\n    \"accent-deep\": \"15 55% 40%\",\n    \"accent-foreground\": \"0 0% 100%\",\n    muted: \"0 0% 11%\",\n    \"muted-foreground\": \"0 0% 60%\",\n    border: \"0 0% 16%\",\n    input: \"0 0% 11%\",\n    ring: \"262 83% 58%\",\n    success: \"152 79% 52%\",\n    \"success-foreground\": \"0 0% 4%\",\n    warning: \"38 92% 50%\",\n    \"warning-foreground\": \"0 0% 4%\",\n    destructive: \"350 100% 65%\",\n    \"destructive-foreground\": \"0 0% 4%\",\n    info: \"213 100% 70%\",\n    \"info-foreground\": \"0 0% 4%\",\n  },\n};\n"
+    },
+    {
+      "path": "themes/classic-paper.ts",
+      "type": "registry:lib",
+      "target": "themes/classic-paper.ts",
+      "content": "import type { Theme } from \"@/themes/types\";\n\n/**\n * Classic Paper — light-primary with deep-navy dark mirror; Inter + JetBrains Mono.\n *\n * Identity: warm paper background, deep navy foreground, indigo primary\n * (closer to traditional dashboard SaaS), Inter throughout. Maximizes\n * legibility and familiarity — use when reading endurance > differentiation.\n *\n * Provides a full `dark` palette mirror so consumers toggling `.dark` still\n * get a coherent surface (it is not \"light-only\" by accident).\n */\nexport const classicPaper: Theme = {\n  name: \"classic-paper\",\n  label: \"Classic Paper\",\n  description: \"Inter + paper background. Maximum legibility, conservative.\",\n  fonts: {\n    display: '\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n    body: '\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n    mono: '\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace',\n  },\n  fontUrls: [\n    \"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap\",\n  ],\n  light: {\n    background: \"36 30% 98%\",\n    foreground: \"222 47% 11%\",\n    card: \"0 0% 100%\",\n    \"card-foreground\": \"222 47% 11%\",\n    popover: \"0 0% 100%\",\n    \"popover-foreground\": \"222 47% 11%\",\n    primary: \"221 83% 53%\",\n    \"primary-deep\": \"224 76% 38%\",\n    \"primary-glow\": \"217 91% 70%\",\n    \"primary-foreground\": \"0 0% 100%\",\n    secondary: \"210 40% 96%\",\n    \"secondary-foreground\": \"222 47% 11%\",\n    accent: \"37 92% 50%\",\n    \"accent-deep\": \"32 81% 40%\",\n    \"accent-foreground\": \"0 0% 100%\",\n    muted: \"210 40% 96%\",\n    \"muted-foreground\": \"215 16% 47%\",\n    border: \"214 32% 91%\",\n    input: \"214 32% 91%\",\n    ring: \"221 83% 53%\",\n    success: \"142 71% 36%\",\n    \"success-foreground\": \"0 0% 100%\",\n    warning: \"33 92% 44%\",\n    \"warning-foreground\": \"0 0% 100%\",\n    destructive: \"0 72% 51%\",\n    \"destructive-foreground\": \"0 0% 100%\",\n    info: \"217 91% 60%\",\n    \"info-foreground\": \"0 0% 100%\",\n  },\n  // Dark mirror — mainly the same hues with inverted lightness so the theme\n  // still feels coherent if a consumer toggles `.dark`.\n  dark: {\n    background: \"222 47% 8%\",\n    foreground: \"210 40% 98%\",\n    card: \"222 47% 11%\",\n    \"card-foreground\": \"210 40% 98%\",\n    popover: \"222 47% 11%\",\n    \"popover-foreground\": \"210 40% 98%\",\n    primary: \"217 91% 60%\",\n    \"primary-deep\": \"221 83% 45%\",\n    \"primary-glow\": \"213 100% 80%\",\n    \"primary-foreground\": \"222 47% 11%\",\n    secondary: \"217 19% 18%\",\n    \"secondary-foreground\": \"210 40% 98%\",\n    accent: \"37 92% 60%\",\n    \"accent-deep\": \"32 81% 45%\",\n    \"accent-foreground\": \"222 47% 11%\",\n    muted: \"217 19% 18%\",\n    \"muted-foreground\": \"215 20% 65%\",\n    border: \"217 19% 22%\",\n    input: \"217 19% 18%\",\n    ring: \"217 91% 60%\",\n    success: \"152 79% 52%\",\n    \"success-foreground\": \"222 47% 11%\",\n    warning: \"38 92% 50%\",\n    \"warning-foreground\": \"222 47% 11%\",\n    destructive: \"350 100% 65%\",\n    \"destructive-foreground\": \"222 47% 11%\",\n    info: \"213 100% 70%\",\n    \"info-foreground\": \"222 47% 11%\",\n  },\n};\n"
+    },
+    {
+      "path": "themes/aurora-terminal.ts",
+      "type": "registry:lib",
+      "target": "themes/aurora-terminal.ts",
+      "content": "import type { Theme } from \"@/themes/types\";\n\n/**\n * Aurora Terminal — dark-first, cyan-aurora primary, Geist Mono everywhere.\n *\n * Identity: deep oceanic background, cyan-aurora primary, aurora-pink accent.\n * Headers use Geist with heavier tracking; body uses Geist Mono for full\n * \"developer console\" feel. Suits CLI/devtools showcase.\n */\nexport const auroraTerminal: Theme = {\n  name: \"aurora-terminal\",\n  label: \"Aurora Terminal\",\n  description: \"Dark sci-fi developer console — cyan-aurora + Geist Mono body.\",\n  fonts: {\n    display: '\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    body: '\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    mono: '\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace',\n  },\n  fontUrls: [\n    \"https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap\",\n  ],\n  light: {\n    background: \"220 30% 96%\",\n    foreground: \"222 47% 11%\",\n    card: \"0 0% 100%\",\n    \"card-foreground\": \"222 47% 11%\",\n    popover: \"0 0% 100%\",\n    \"popover-foreground\": \"222 47% 11%\",\n    primary: \"178 78% 41%\",\n    \"primary-deep\": \"180 100% 25%\",\n    \"primary-glow\": \"180 89% 70%\",\n    \"primary-foreground\": \"222 47% 11%\",\n    secondary: \"210 40% 96%\",\n    \"secondary-foreground\": \"222 47% 11%\",\n    accent: \"340 82% 60%\",\n    \"accent-deep\": \"340 80% 50%\",\n    \"accent-foreground\": \"0 0% 100%\",\n    muted: \"214 32% 91%\",\n    \"muted-foreground\": \"215 16% 47%\",\n    border: \"214 32% 91%\",\n    input: \"214 32% 91%\",\n    ring: \"178 78% 41%\",\n    success: \"152 79% 42%\",\n    \"success-foreground\": \"0 0% 100%\",\n    warning: \"33 92% 44%\",\n    \"warning-foreground\": \"0 0% 100%\",\n    destructive: \"0 72% 51%\",\n    \"destructive-foreground\": \"0 0% 100%\",\n    info: \"217 91% 60%\",\n    \"info-foreground\": \"0 0% 100%\",\n  },\n  dark: {\n    background: \"224 36% 7%\",\n    foreground: \"220 30% 96%\",\n    card: \"224 35% 10%\",\n    \"card-foreground\": \"220 30% 96%\",\n    popover: \"224 35% 10%\",\n    \"popover-foreground\": \"220 30% 96%\",\n    primary: \"178 71% 60%\",\n    \"primary-deep\": \"180 100% 35%\",\n    \"primary-glow\": \"180 89% 80%\",\n    \"primary-foreground\": \"224 36% 7%\",\n    secondary: \"222 30% 14%\",\n    \"secondary-foreground\": \"220 30% 96%\",\n    accent: \"340 90% 65%\",\n    \"accent-deep\": \"340 80% 50%\",\n    \"accent-foreground\": \"224 36% 7%\",\n    muted: \"222 30% 14%\",\n    \"muted-foreground\": \"215 20% 65%\",\n    border: \"222 28% 18%\",\n    input: \"222 30% 14%\",\n    ring: \"178 71% 60%\",\n    success: \"152 79% 52%\",\n    \"success-foreground\": \"224 36% 7%\",\n    warning: \"38 92% 50%\",\n    \"warning-foreground\": \"224 36% 7%\",\n    destructive: \"350 100% 65%\",\n    \"destructive-foreground\": \"224 36% 7%\",\n    info: \"213 100% 70%\",\n    \"info-foreground\": \"224 36% 7%\",\n  },\n};\n"
+    },
+    {
+      "path": "themes/theme-provider.tsx",
+      "type": "registry:lib",
+      "target": "themes/theme-provider.tsx",
+      "content": "import { createContext, useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport type { ColorScale, Theme, ThemeMode } from \"@/themes/types\";\n\ninterface ThemeContextValue {\n  /** Active theme (full descriptor). */\n  theme: Theme;\n  /** Active mode: light or dark. */\n  mode: ThemeMode;\n  /** All available themes. */\n  themes: Theme[];\n  /** Swap the active theme by name. */\n  setTheme: (name: string) => void;\n  /** Set light/dark explicitly. */\n  setMode: (mode: ThemeMode) => void;\n  /** Toggle light <> dark. */\n  toggleMode: () => void;\n  /** Register an additional theme at runtime. */\n  registerTheme: (theme: Theme) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nconst STYLE_ELEMENT_ID = \"theo-ui-theme-vars\";\n\n// T3.2 (SEC-001): allowlist validators for theme values. injectThemeCss\n// interpolates theme name + color values + font families into a <style>\n// textContent. Without validation, a theme object from an untrusted source\n// (e.g., a feature-flag service, a CMS) could inject arbitrary CSS via\n// closing the declaration with `}` or smuggling `url(...)` for exfiltration.\n// We reject rather than escape: themes are code, not user input. Invalid\n// values cause a dev-time throw (caller sees the problem); production\n// silently substitutes a safe fallback so a misconfigured theme can't\n// crash the app.\n\n// Color values. Multiple accepted shapes:\n//   1. Hex: `#fff`, `#0a0a0a`, `#0a0a0aff`.\n//   2. Fully-parenthesized CSS color functions: `oklch(...)`, `rgb(...)`,\n//      `hsl(...)`, etc. Inner content restricted to digits/dots/spaces/\n//      percent/slash/comma/dash/plus — no semicolons, no braces, no `url(`.\n//   3. HSL-component split (shadcn-ui convention used by the built-in\n//      themes): `\"0 0% 100%\"`, `\"262 83% 58%\"` — space-separated numeric\n//      components consumed via `hsl(var(--token))` in stylesheets.\n//   4. `var(--token)` references, optionally with a fallback value that\n//      contains no parens/braces/semicolons.\n//   5. CSS keywords: `transparent`, `currentColor`, `inherit`, `initial`,\n//      `unset`.\nconst COLOR_VALUE_PATTERN =\n  /^(#[0-9a-fA-F]{3,8}|(?:oklch|oklab|rgb|rgba|hsl|hsla|lab|lch|color)\\(\\s*[\\d.\\s%,/+\\-]+\\s*\\)|-?\\d+(?:\\.\\d+)?%?(?:\\s+-?\\d+(?:\\.\\d+)?%?){1,3}|var\\(--[a-zA-Z0-9-]+(?:\\s*,\\s*[^();{}]+)?\\)|transparent|currentColor|inherit|initial|unset)$/;\n\n// Font family: word chars, spaces, commas, hyphens, dots, quotes. Excludes\n// parens (blocks `url(...)`) and semicolons (blocks declaration breakouts).\nconst FONT_FAMILY_PATTERN = /^[\\w\\s,\"'\\-.]+$/;\n\n// Theme name: kebab-case identifier. Excludes anything that could break out\n// of an attribute selector or inject additional rules.\nconst THEME_NAME_PATTERN = /^[a-z][a-z0-9-]*$/;\n\nconst IS_DEV = typeof process === \"undefined\" || process.env.NODE_ENV !== \"production\";\n\nfunction rejectOrFallback(scope: string, value: string, fallback: string): string {\n  if (IS_DEV) {\n    throw new Error(\n      `[@usetheo/ui] invalid ${scope} value: ${JSON.stringify(value)}. Theme values must match the allowlist (see src/themes/theme-provider.tsx). Refusing to inject potentially unsafe CSS.`,\n    );\n  }\n  return fallback;\n}\n\nfunction validatedColor(token: string, value: string): string {\n  if (COLOR_VALUE_PATTERN.test(value)) return value;\n  return rejectOrFallback(`color \"${token}\"`, value, \"transparent\");\n}\n\nfunction validatedFontFamily(slot: string, value: string): string {\n  if (FONT_FAMILY_PATTERN.test(value)) return value;\n  return rejectOrFallback(`fontFamily \"${slot}\"`, value, \"inherit\");\n}\n\nfunction validatedThemeName(value: string): string {\n  if (THEME_NAME_PATTERN.test(value)) return value;\n  return rejectOrFallback(\"theme.name\", value, \"invalid-theme\");\n}\n\nfunction colorScaleToCss(name: string, mode: ThemeMode, colors: ColorScale): string {\n  const safeName = validatedThemeName(name);\n  const selector =\n    mode === \"light\"\n      ? `[data-theme=\"${safeName}\"]`\n      : `[data-theme=\"${safeName}\"].dark, [data-theme=\"${safeName}\"][data-mode=\"dark\"]`;\n  const decls = Object.entries(colors)\n    .map(([token, value]) => `  --${token}: ${validatedColor(token, value)};`)\n    .join(\"\\n\");\n  return `${selector} {\\n${decls}\\n}`;\n}\n\nfunction fontsToCss(name: string, fonts: Theme[\"fonts\"]): string {\n  const safeName = validatedThemeName(name);\n  const display = validatedFontFamily(\"display\", fonts.display);\n  const body = validatedFontFamily(\"body\", fonts.body);\n  const mono = validatedFontFamily(\"mono\", fonts.mono);\n  return `[data-theme=\"${safeName}\"] {\\n  --font-display: ${display};\\n  --font-body: ${body};\\n  --font-mono: ${mono};\\n}`;\n}\n\nfunction injectThemeCss(themes: Theme[]): void {\n  if (typeof document === \"undefined\") return;\n  let style = document.getElementById(STYLE_ELEMENT_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement(\"style\");\n    style.id = STYLE_ELEMENT_ID;\n    document.head.appendChild(style);\n  }\n  const blocks: string[] = [];\n  for (const theme of themes) {\n    blocks.push(fontsToCss(theme.name, theme.fonts));\n    blocks.push(colorScaleToCss(theme.name, \"light\", theme.light));\n    blocks.push(colorScaleToCss(theme.name, \"dark\", theme.dark));\n  }\n  style.textContent = blocks.join(\"\\n\\n\");\n}\n\n/**\n * loadThemeFonts — idempotently inject `<link rel=\"stylesheet\">` for each\n * font URL declared by the theme.\n *\n * T4.2: the previous implementation kept a module-level `Set` to track\n * already-injected URLs. That singleton broke test isolation (state\n * leaked across renders) and silently skipped injection in micro-frontend\n * setups with multiple `<ThemeProvider>` mounts. Replaced with a DOM\n * check: we query `document.head` for an existing link with the same\n * `href` before appending a new one. The DOM is the single source of\n * truth; no shared state across instances.\n */\nfunction loadThemeFonts(theme: Theme): void {\n  if (typeof document === \"undefined\") return;\n  if (!theme.fontUrls) return;\n  for (const url of theme.fontUrls) {\n    // Re-audit NEW-001 (SSRF, LOW): defang dangerous protocols on\n    // consumer-provided font URLs. Built-in themes use\n    // fonts.googleapis.com/gstatic.com — safe. registerTheme accepts\n    // arbitrary objects at runtime; a malicious theme could try to inject\n    // javascript:/data:text/html via fontUrls. safeHref returns undefined\n    // for dangerous protocols, which we skip silently.\n    const safe = safeHref(url);\n    if (!safe) continue;\n    if (document.head.querySelector(`link[rel=\"stylesheet\"][href=\"${CSS.escape(safe)}\"]`)) {\n      continue;\n    }\n    const link = document.createElement(\"link\");\n    link.rel = \"stylesheet\";\n    link.href = safe;\n    document.head.appendChild(link);\n  }\n}\n\ninterface ThemeProviderProps {\n  children: ReactNode;\n  /**\n   * Theme to start with. Must match the `name` of an entry in `themes`.\n   * Defaults to `\"violet-forge\"` for backward compat — if you don't pass\n   * `violet-forge` in `themes`, set this prop explicitly.\n   */\n  defaultTheme?: string;\n  /** Mode to start with. Defaults to `\"dark\"` (library is dark-first). */\n  defaultMode?: ThemeMode;\n  /**\n   * Available themes. **Required**: ThemeProvider does not auto-include any\n   * built-in theme since v0.1.0-next.0 — pass `builtinThemes` for all three\n   * Violet Forge defaults, or your own array for a slimmer bundle.\n   *\n   * Migration: consumers previously calling `<ThemeProvider>` without this\n   * prop now must pass `themes={builtinThemes}` (or use `<TheoUIProvider>`\n   * which defaults to `builtinThemes` for you).\n   */\n  themes: Theme[];\n  /**\n   * Persist selection in localStorage under this key. Pass `null` to disable.\n   * Default: \"theo-ui:theme\".\n   */\n  storageKey?: string | null;\n}\n\n/**\n * Storage failure diagnostic — dev-only one-line warn so engineers see\n * something when localStorage throws (Safari private mode, blocked\n * third-party cookies, sandboxed iframes). In production we stay silent;\n * runtime behavior is fail-safe (state still lives in memory).\n *\n * Per HIGH-006: silent catches diverge from the \"fail loud\" principle\n * declared in the global CLAUDE.md. We accept silence in prod because the\n * fallback is correct, but we surface a single warn per call site in dev.\n */\nfunction warnStorageFailure(scope: string, err: unknown): void {\n  if (typeof process === \"undefined\" || process.env.NODE_ENV === \"production\") return;\n  // biome-ignore lint/suspicious/noConsole: dev-only diagnostic for storage failures (HIGH-006)\n  console.warn(`[@usetheo/ui] theme storage failure (${scope}):`, err);\n}\n\n/**\n * ThemeProvider — central registry + runtime switcher for Theo themes.\n *\n * Behavior:\n *   1. On mount, injects a `<style id=\"theo-ui-theme-vars\">` element with\n *      one CSS block per theme (`[data-theme=\"<name>\"] { --token: ... }`).\n *   2. Sets `data-theme` and `data-mode` on `<html>` so any element nested\n *      below inherits the right tokens (the Tailwind config consumes them).\n *   3. Lazy-loads theme font URLs by injecting `<link rel=\"stylesheet\">`.\n *   4. Optionally persists choice in localStorage.\n */\nfunction ThemeProvider({\n  children,\n  defaultTheme = \"violet-forge\",\n  defaultMode = \"dark\",\n  themes: themesProp,\n  storageKey = \"theo-ui:theme\",\n}: ThemeProviderProps): JSX.Element {\n  // Themes prop is required since v0.1.0-next.0 — see migration note in\n  // the JSDoc on ThemeProviderProps. Pass `builtinThemes` for the legacy\n  // default behavior (violet-forge + classic-paper + aurora-terminal), or\n  // an array of your own. Empty array is rejected: ThemeProvider has no\n  // valid state without at least one registered theme.\n  if (!themesProp || themesProp.length === 0) {\n    throw new Error(\n      \"<ThemeProvider> requires the `themes` prop with at least one Theme. \" +\n        \"Pass `themes={builtinThemes}` for the Violet Forge defaults (importable \" +\n        \"via the package barrel), or use <TheoUIProvider> which sets this for you.\",\n    );\n  }\n\n  // T3.2 (SEC-001): eager validation. Calling validatedColor/FontFamily/\n  // ThemeName here ensures CSS-injection attempts throw at construction\n  // time rather than inside the deferred useEffect that injects the\n  // <style>. Production-mode fallbacks keep the app rendering even if a\n  // theme has bad values.\n  //\n  // Re-audit NEW-3: wrapped in useMemo so the validation cost (O(themes *\n  // tokens), ~60 ops per built-in theme) only runs when themesProp's\n  // reference changes — not on every parent re-render. Consumers passing\n  // inline array literals (`themes={[violetForge, classicPaper]}`) would\n  // otherwise pay this on every parent update.\n  const mergedThemes = useMemo<Theme[]>(() => {\n    for (const t of themesProp) {\n      validatedThemeName(t.name);\n      validatedFontFamily(\"display\", t.fonts.display);\n      validatedFontFamily(\"body\", t.fonts.body);\n      validatedFontFamily(\"mono\", t.fonts.mono);\n      for (const [token, value] of Object.entries(t.light)) {\n        validatedColor(token, value);\n      }\n      for (const [token, value] of Object.entries(t.dark)) {\n        validatedColor(token, value);\n      }\n    }\n    // Dedup by theme name; last writer wins (allows registerTheme override).\n    const map = new Map<string, Theme>();\n    for (const t of themesProp) map.set(t.name, t);\n    return Array.from(map.values());\n  }, [themesProp]);\n\n  const [themes, setThemes] = useState<Theme[]>(mergedThemes);\n\n  // Re-sync state when the `themes` prop changes between renders. Avoids the\n  // common pitfall where the user passes a different array later and the\n  // initial-state-only seed silently ignores the change.\n  useEffect(() => {\n    setThemes(mergedThemes);\n  }, [mergedThemes]);\n\n  const [themeName, setThemeName] = useState<string>(() => {\n    if (typeof window === \"undefined\" || !storageKey) return defaultTheme;\n    try {\n      return window.localStorage.getItem(`${storageKey}:name`) ?? defaultTheme;\n    } catch (err) {\n      warnStorageFailure(\"read theme name\", err);\n      return defaultTheme;\n    }\n  });\n\n  const [mode, setModeState] = useState<ThemeMode>(() => {\n    if (typeof window === \"undefined\" || !storageKey) return defaultMode;\n    try {\n      const stored = window.localStorage.getItem(`${storageKey}:mode`);\n      return stored === \"dark\" || stored === \"light\" ? stored : defaultMode;\n    } catch (err) {\n      warnStorageFailure(\"read theme mode\", err);\n      return defaultMode;\n    }\n  });\n\n  // Inject CSS vars whenever the themes list changes.\n  useEffect(() => {\n    injectThemeCss(themes);\n  }, [themes]);\n\n  // Apply data-theme + data-mode to <html>, load fonts.\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    const active = themes.find((t) => t.name === themeName) ?? themes[0];\n    if (!active) return;\n    document.documentElement.setAttribute(\"data-theme\", active.name);\n    document.documentElement.setAttribute(\"data-mode\", mode);\n    document.documentElement.classList.toggle(\"dark\", mode === \"dark\");\n    loadThemeFonts(active);\n  }, [themeName, mode, themes]);\n\n  // Persist on change.\n  useEffect(() => {\n    if (typeof window === \"undefined\" || !storageKey) return;\n    try {\n      window.localStorage.setItem(`${storageKey}:name`, themeName);\n      window.localStorage.setItem(`${storageKey}:mode`, mode);\n    } catch (err) {\n      // Storage may fail in private mode; behavior remains correct (state\n      // lives in memory). Per HIGH-006 we surface a one-time dev warning so\n      // the engineer sees something instead of complete silence.\n      warnStorageFailure(\"persist theme + mode\", err);\n    }\n  }, [themeName, mode, storageKey]);\n\n  const setTheme = useCallback((name: string) => setThemeName(name), []);\n  const setMode = useCallback((next: ThemeMode) => setModeState(next), []);\n  const toggleMode = useCallback(\n    () => setModeState((cur) => (cur === \"light\" ? \"dark\" : \"light\")),\n    [],\n  );\n  const registerTheme = useCallback((theme: Theme) => {\n    setThemes((cur) => {\n      const idx = cur.findIndex((t) => t.name === theme.name);\n      if (idx >= 0) {\n        const next = cur.slice();\n        next[idx] = theme;\n        return next;\n      }\n      return [...cur, theme];\n    });\n  }, []);\n\n  // themes[0] is guaranteed non-undefined by the constructor-time check\n  // above (themesProp is non-empty); the non-null assert encodes that\n  // invariant for TypeScript, which can't trace it through useState.\n  // biome-ignore lint/style/noNonNullAssertion: T2.5 runtime invariant — themesProp non-empty validated at top of function\n  const active = themes.find((t) => t.name === themeName) ?? themes[0]!;\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({\n      theme: active,\n      mode,\n      themes,\n      setTheme,\n      setMode,\n      toggleMode,\n      registerTheme,\n    }),\n    [active, mode, themes, setTheme, setMode, toggleMode, registerTheme],\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n/**\n * useTheme — access theme state from any component inside <ThemeProvider>.\n * Throws if used outside the provider — fail-fast.\n */\nfunction useTheme(): ThemeContextValue {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error(\"useTheme must be used inside <ThemeProvider>.\");\n  }\n  return ctx;\n}\n\nexport { ThemeProvider, useTheme };\n"
+    },
+    {
+      "path": "themes/theme-switcher.tsx",
+      "type": "registry:lib",
+      "target": "themes/theme-switcher.tsx",
+      "content": "import * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { Check, Moon, Palette, Sun } from \"lucide-react\";\nimport type { JSX } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useTheme } from \"@/themes/theme-provider\";\n\ninterface ThemeSwitcherProps {\n  className?: string;\n  /** If true, renders mode toggle inline next to the theme menu. */\n  showModeToggle?: boolean;\n}\n\n/**\n * ThemeSwitcher — drop-in theme + mode picker.\n *\n * Two affordances:\n *   - Palette dropdown lists all registered themes with the active marked.\n *   - Optional sun/moon button toggles light/dark.\n *\n * Stateless wrt itself — pulls state from `useTheme()`.\n */\nfunction ThemeSwitcher({ className, showModeToggle = true }: ThemeSwitcherProps): JSX.Element {\n  const { theme, themes, setTheme, mode, toggleMode } = useTheme();\n\n  return (\n    <div className={cn(\"inline-flex items-center gap-1\", className)}>\n      {/* LOW-006: announce theme + mode changes to assistive tech. The\n       * Provider applies tokens via `data-theme`/`data-mode` (visual cue),\n       * but screen-reader users get no feedback without this aria-live\n       * region. Polite so it doesn't interrupt the user's flow. */}\n      <span aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        Theme: {theme.label}, mode: {mode}\n      </span>\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger asChild>\n          <button\n            type=\"button\"\n            aria-label={`Theme: ${theme.label}`}\n            className={cn(\n              \"inline-flex h-9 items-center gap-2 rounded-lg border border-border/60 bg-card px-3\",\n              \"font-medium font-sans text-body-sm text-foreground\",\n              \"transition-colors hover:bg-muted\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            )}\n          >\n            <Palette className=\"size-4 text-primary\" aria-hidden=\"true\" />\n            <span>{theme.label}</span>\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            align=\"end\"\n            sideOffset={6}\n            className={cn(\n              \"z-50 min-w-[16rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md\",\n              \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n            )}\n          >\n            {themes.map((t) => (\n              <DropdownMenu.Item\n                key={t.name}\n                onSelect={() => setTheme(t.name)}\n                className={cn(\n                  \"flex cursor-pointer items-start justify-between gap-3 rounded-md px-2 py-2\",\n                  \"focus:bg-muted focus:outline-none data-[highlighted]:bg-muted\",\n                )}\n              >\n                <span className=\"flex min-w-0 flex-col\">\n                  <span className=\"font-medium text-body-sm\">{t.label}</span>\n                  {t.description ? (\n                    <span className=\"text-body-sm text-muted-foreground\">{t.description}</span>\n                  ) : null}\n                </span>\n                {t.name === theme.name ? (\n                  <Check className=\"mt-1 size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n                ) : null}\n              </DropdownMenu.Item>\n            ))}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n\n      {showModeToggle ? (\n        <button\n          type=\"button\"\n          onClick={toggleMode}\n          aria-label={`Switch to ${mode === \"light\" ? \"dark\" : \"light\"} mode`}\n          className={cn(\n            \"inline-flex size-9 items-center justify-center rounded-lg border border-border/60 bg-card\",\n            \"text-foreground transition-colors hover:bg-muted\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          )}\n        >\n          {mode === \"light\" ? <Moon className=\"size-4\" /> : <Sun className=\"size-4\" />}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nexport { ThemeSwitcher };\n"
+    },
+    {
+      "path": "themes/index.ts",
+      "type": "registry:lib",
+      "target": "themes/index.ts",
+      "content": "export type { ColorScale, Theme, ThemeFonts, ThemeMode } from \"@/themes/types\";\nexport { ThemeProvider, useTheme } from \"@/themes/theme-provider\";\nexport { ThemeScript } from \"@/themes/theme-script\";\nexport { ThemeSwitcher } from \"@/themes/theme-switcher\";\nexport { violetForge } from \"@/themes/violet-forge\";\nexport { classicPaper } from \"@/themes/classic-paper\";\nexport { auroraTerminal } from \"@/themes/aurora-terminal\";\n\nimport { auroraTerminal } from \"@/themes/aurora-terminal\";\nimport { classicPaper } from \"@/themes/classic-paper\";\nimport { violetForge } from \"@/themes/violet-forge\";\n\n/**\n * All themes bundled with Theo UI. Pass to `<ThemeProvider themes={builtinThemes}>`\n * if you want all of them available out of the box.\n */\nexport const builtinThemes = [violetForge, classicPaper, auroraTerminal];\n"
+    }
+  ]
+}

package/registry/r/theme-script.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theme-script",
+  "type": "registry:lib",
+  "title": "ThemeScript",
+  "description": "Inline script for SSR-safe theme initialization in Next.js / Astro / Remix. Place in <head> to read persisted theme + mode from localStorage BEFORE React hydrates, eliminating FOUC and hydration mismatch.",
+  "registryDependencies": [
+    "theme-provider"
+  ],
+  "files": [
+    {
+      "path": "themes/theme-script.tsx",
+      "type": "registry:lib",
+      "target": "themes/theme-script.tsx",
+      "content": "/**\n * ThemeScript — inline `<script>` for SSR-safe theme initialization.\n *\n * Renders a synchronous script that runs BEFORE React hydration. It reads the\n * persisted theme + mode from localStorage (or falls back to the defaults) and\n * sets `data-theme` / `data-mode` on `<html>`, plus the `.dark` class when\n * mode is dark. This eliminates FOUC and avoids hydration mismatch warnings\n * when the user's persisted choice differs from the SSR defaults.\n *\n * Place this in `<head>` ABOVE `<body>`. The component does not need to live\n * inside `<ThemeProvider>`.\n *\n * Security: every interpolated value is passed through `safe()`, which both\n * `JSON.stringify`s the value AND escapes `<` to `<`. The `<` escape is\n * REQUIRED because `JSON.stringify` alone does NOT escape `/`, so a payload\n * like `\"</script><script>alert(1)</script>\"` would otherwise break out of\n * the inline `<script>` tag even though it stays inside a JS string literal.\n * (The browser tokenizes `</script>` at the HTML layer before JS parses.)\n *\n * Example (Next.js App Router): see docs/design-system.md → SSR section.\n * Pass `defaultTheme` and `defaultMode` to align with the consumer's\n * preferred initial state. Always wrap the root in `<html\n * suppressHydrationWarning>` to silence the expected one-render diff.\n */\nimport type { JSX } from \"react\";\nimport type { ThemeMode } from \"@/themes/types\";\n\ninterface ThemeScriptProps {\n  /** Theme name to apply when no persisted value exists. Default `\"violet-forge\"`. */\n  defaultTheme?: string;\n  /** Mode to apply when no persisted value exists. Default `\"dark\"`. */\n  defaultMode?: ThemeMode;\n  /**\n   * localStorage namespace. Must match the `storageKey` passed to\n   * `<ThemeProvider>`. Default `\"theo-ui:theme\"`. Pass `null` to disable\n   * persistence reads (the script will always apply defaults).\n   */\n  storageKey?: string | null;\n}\n\n/**\n * Encode a value for safe embedding inside an inline `<script>` block.\n *\n * `JSON.stringify` does NOT escape `/` by default, so `\"</script>\"` survives\n * as the literal three-character sequence inside the resulting string. When\n * that string is then rendered inside `<script>...</script>`, the browser's\n * HTML tokenizer sees `</script>` and ends the script tag — regardless of\n * whether the JS parser would have kept it inside a string. Escaping `<` to\n * its Unicode escape `<` preserves JS semantics (the JS parser still\n * resolves the escape to `<`) while making the HTML tokenizer happy.\n *\n * Reference: OWASP \"JSON-in-script\" guidance; React's own server-renderer\n * applies the same escape for inline JSON.\n */\nfunction safe(value: unknown): string {\n  return JSON.stringify(value).replace(/</g, \"\\\\u003c\");\n}\n\nfunction buildScript(\n  defaultTheme: string,\n  defaultMode: ThemeMode,\n  storageKey: string | null,\n): string {\n  const k = safe(storageKey);\n  const t = safe(defaultTheme);\n  const m = safe(defaultMode);\n  return `(function(){try{var k=${k};var d=document.documentElement;var t=null;var m=null;if(k){t=localStorage.getItem(k+\":name\");m=localStorage.getItem(k+\":mode\");}d.setAttribute(\"data-theme\",t||${t});d.setAttribute(\"data-mode\",m||${m});if((m||${m})===\"dark\"){d.classList.add(\"dark\");}}catch(e){}})();`;\n}\n\nfunction ThemeScript({\n  defaultTheme = \"violet-forge\",\n  defaultMode = \"dark\",\n  storageKey = \"theo-ui:theme\",\n}: ThemeScriptProps): JSX.Element {\n  const code = buildScript(defaultTheme, defaultMode, storageKey);\n  // biome-ignore lint/security/noDangerouslySetInnerHtml: payload is JSON.stringify-encoded literals (no user input); intentional for SSR theme bootstrap before React hydrates\n  return <script suppressHydrationWarning dangerouslySetInnerHTML={{ __html: code }} />;\n}\n\nexport { ThemeScript };\n"
+    }
+  ]
+}

package/registry/r/theo-ui-provider.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "theo-ui-provider",
+  "type": "registry:lib",
+  "title": "TheoUIProvider",
+  "description": "Primary entry-point provider — composes ThemeProvider + Toaster with sensible defaults. Use as the single root wrapper in consumer apps.",
+  "dependencies": [],
+  "registryDependencies": [
+    "theme-provider",
+    "toast"
+  ],
+  "files": [
+    {
+      "path": "theo-ui-provider.tsx",
+      "type": "registry:lib",
+      "target": "theo-ui-provider.tsx",
+      "content": "\"use client\";\n\nimport type { ComponentProps, JSX, ReactNode } from \"react\";\nimport { Toaster } from \"@/components/ui/toaster\";\nimport { builtinThemes } from \"@/themes/index\";\nimport { ThemeProvider } from \"@/themes/theme-provider\";\n\n/**\n * TheoUIProvider — primary entry point composing `<ThemeProvider>` and\n * `<Toaster>` in the correct order with sensible defaults.\n *\n * Recommended for consumer apps to avoid hand-wiring the provider stack.\n * Equivalent to:\n *\n *   <ThemeProvider themes={builtinThemes} {...theme}>\n *     <Toaster {...toaster}>{children}</Toaster>\n *   </ThemeProvider>\n *\n * Notes:\n *   - Since v0.1.0-next.0, `<ThemeProvider>` requires the `themes` prop\n *     (T2.5 decoupling). `<TheoUIProvider>` defaults it to `builtinThemes`\n *     to preserve \"works out of the box\" DX. Pass `theme.themes` to override.\n *   - The `\"use client\"` directive is required for Next.js App Router (RSC)\n *     because `<ThemeProvider>` uses React state and effects internally.\n *   - `<Tooltip>` provider stays per-instance (Radix recommendation) — this\n *     wrapper does NOT introduce a global tooltip context.\n *   - `<ThemeProvider>` and `<Toaster>` remain independently exported for\n *     consumers who want bespoke control.\n *\n * SSR:\n *   - Place `<ThemeScript>` in `<head>` to avoid FOUC + hydration mismatch.\n *   - Wrap `<html lang=\"en\" suppressHydrationWarning>`.\n *\n * @example\n *   import { TheoUIProvider } from \"@usetheo/ui\";\n *\n *   export default function App({ children }) {\n *     return <TheoUIProvider>{children}</TheoUIProvider>;\n *   }\n */\nexport interface TheoUIProviderProps {\n  children: ReactNode;\n  /** Pass-through props for the inner `<ThemeProvider>`. Optional. */\n  theme?: Omit<ComponentProps<typeof ThemeProvider>, \"children\" | \"themes\"> & {\n    /** Override the default theme set (defaults to `builtinThemes`). */\n    themes?: ComponentProps<typeof ThemeProvider>[\"themes\"];\n  };\n  /** Pass-through props for the inner `<Toaster>`. */\n  toaster?: Omit<ComponentProps<typeof Toaster>, \"children\">;\n}\n\nexport function TheoUIProvider({ children, theme, toaster }: TheoUIProviderProps): JSX.Element {\n  const { themes, ...restTheme } = theme ?? {};\n  return (\n    <ThemeProvider themes={themes ?? builtinThemes} {...restTheme}>\n      <Toaster {...toaster}>{children}</Toaster>\n    </ThemeProvider>\n  );\n}\n\nTheoUIProvider.displayName = \"TheoUIProvider\";\n"
+    }
+  ]
+}

package/registry/r/toast.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast",
+  "type": "registry:ui",
+  "title": "Toast",
+  "description": "Transient notification built on Radix Toast.",
+  "dependencies": [
+    "@radix-ui/react-toast",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/toast/toast.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/toast.tsx",
+      "content": "import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Toast — transient notification built on Radix Toast.\n *\n * Composition: app mounts <Toaster /> once. Components call `toast(...)` via\n * the `useToast()` hook (see toaster.tsx). The look is theme-aware: status\n * icon coloured by --primary/--success/--warning/--destructive; the body\n * card uses --popover surface.\n *\n * Variants:\n *   - default (neutral)\n *   - info (primary tint)\n *   - success (deploy ok, action completed)\n *   - warning (queued, permission requested)\n *   - destructive (failed, fatal)\n */\n\nconst toastVariants = cva(\n  [\n    \"group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border p-4 pr-10 shadow-md\",\n    \"data-[state=open]:slide-in-from-top-full data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n    \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=closed]:animate-out\",\n    \"data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]\",\n    \"data-[swipe=end]:animate-out data-[swipe=cancel]:transition-[transform_var(--duration-base)] data-[swipe=move]:transition-none\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-border/40 bg-popover text-popover-foreground\",\n        info: \"border-primary/40 bg-popover text-popover-foreground\",\n        success: \"border-success/40 bg-popover text-popover-foreground\",\n        warning: \"border-warning/40 bg-popover text-popover-foreground\",\n        destructive: \"border-destructive/50 bg-popover text-popover-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\nconst iconForVariant: Record<NonNullable<ToastVariant>, ReactNode> = {\n  default: <Info className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />,\n  info: <Info className=\"size-4 shrink-0 text-primary\" aria-hidden=\"true\" />,\n  success: <CheckCircle2 className=\"size-4 shrink-0 text-success\" aria-hidden=\"true\" />,\n  warning: <TriangleAlert className=\"size-4 shrink-0 text-warning\" aria-hidden=\"true\" />,\n  destructive: <AlertCircle className=\"size-4 shrink-0 text-destructive\" aria-hidden=\"true\" />,\n};\n\ntype ToastVariant = NonNullable<VariantProps<typeof toastVariants>[\"variant\"]>;\n\ninterface ToastProps\n  extends ComponentPropsWithoutRef<typeof ToastPrimitive.Root>,\n    VariantProps<typeof toastVariants> {}\n\nconst ToastRoot = forwardRef<ElementRef<typeof ToastPrimitive.Root>, ToastProps>(\n  ({ className, variant = \"default\", children, ...props }, ref) => (\n    <ToastPrimitive.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props}>\n      <span aria-hidden=\"true\">{iconForVariant[variant as ToastVariant]}</span>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </ToastPrimitive.Root>\n  ),\n);\nToastRoot.displayName = \"Toast\";\n\nconst ToastTitle = forwardRef<\n  ElementRef<typeof ToastPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Title\n    ref={ref}\n    className={cn(\"font-medium text-body-sm text-foreground\", className)}\n    {...props}\n  />\n));\nToastTitle.displayName = \"Toast.Title\";\n\nconst ToastDescription = forwardRef<\n  ElementRef<typeof ToastPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Description\n    ref={ref}\n    className={cn(\"mt-0.5 text-body-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nToastDescription.displayName = \"Toast.Description\";\n\nconst ToastClose = forwardRef<\n  ElementRef<typeof ToastPrimitive.Close>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Close>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Close\n    ref={ref}\n    className={cn(\n      \"absolute top-2 right-2 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"size-3.5\" />\n    <span className=\"sr-only\">Close</span>\n  </ToastPrimitive.Close>\n));\nToastClose.displayName = \"Toast.Close\";\n\nconst ToastAction = forwardRef<\n  ElementRef<typeof ToastPrimitive.Action>,\n  ComponentPropsWithoutRef<typeof ToastPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Action\n    ref={ref}\n    className={cn(\n      \"mt-2 inline-flex h-7 items-center rounded-md border border-border/60 bg-card px-2 font-sans text-foreground text-label\",\n      \"transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    {...props}\n  />\n));\nToastAction.displayName = \"Toast.Action\";\n\nconst Toast = /*#__PURE__*/ Object.assign(ToastRoot, {\n  Title: ToastTitle,\n  Description: ToastDescription,\n  Close: ToastClose,\n  Action: ToastAction,\n  Provider: ToastPrimitive.Provider,\n  Viewport: ToastPrimitive.Viewport,\n});\n\nexport { Toast, toastVariants, type ToastVariant };\n"
+    },
+    {
+      "path": "components/primitives/toast/toaster.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/toaster.tsx",
+      "content": "import { createContext, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Toast, type ToastVariant } from \"@/components/ui/toast\";\n\ninterface ToastDescriptor {\n  id: string;\n  title?: ReactNode;\n  description?: ReactNode;\n  variant?: ToastVariant;\n  /** Auto-dismiss in ms. Default 5000. Pass `null` for sticky. */\n  duration?: number | null;\n  action?: { label: ReactNode; onClick: () => void };\n}\n\ninterface ToastContextValue {\n  toast: (descriptor: Omit<ToastDescriptor, \"id\">) => string;\n  dismiss: (id: string) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue | undefined>(undefined);\n\ninterface ToasterProps {\n  children: ReactNode;\n  /** Toast viewport position. Default bottom-right. */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  className?: string;\n}\n\nconst POSITION_CLASS: Record<NonNullable<ToasterProps[\"position\"]>, string> = {\n  \"top-right\": \"top-4 right-4\",\n  \"top-left\": \"top-4 left-4\",\n  \"bottom-right\": \"bottom-4 right-4\",\n  \"bottom-left\": \"bottom-4 left-4\",\n};\n\n/**\n * Toaster — mount once at the app root. Wraps children in a Radix Toast\n * Provider + Viewport and exposes the `useToast()` hook for descendants.\n */\nfunction Toaster({ children, position = \"bottom-right\", className }: ToasterProps): JSX.Element {\n  const [toasts, setToasts] = useState<ToastDescriptor[]>([]);\n\n  const dismiss = useCallback((id: string) => {\n    setToasts((cur) => cur.filter((t) => t.id !== id));\n  }, []);\n\n  const toast = useCallback((descriptor: Omit<ToastDescriptor, \"id\">) => {\n    const id = `t-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;\n    setToasts((cur) => [...cur, { id, ...descriptor }]);\n    return id;\n  }, []);\n\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      <Toast.Provider swipeDirection=\"right\" duration={5000}>\n        {children}\n        {toasts.map((t) => (\n          <Toast\n            key={t.id}\n            variant={t.variant ?? \"default\"}\n            duration={t.duration === null ? Number.POSITIVE_INFINITY : (t.duration ?? 5000)}\n            onOpenChange={(open) => {\n              if (!open) dismiss(t.id);\n            }}\n          >\n            {t.title ? <Toast.Title>{t.title}</Toast.Title> : null}\n            {t.description ? <Toast.Description>{t.description}</Toast.Description> : null}\n            {t.action ? (\n              <Toast.Action altText={String(t.action.label)} onClick={t.action.onClick}>\n                {t.action.label}\n              </Toast.Action>\n            ) : null}\n            <Toast.Close />\n          </Toast>\n        ))}\n        <Toast.Viewport\n          className={cn(\n            \"fixed z-50 flex max-h-screen w-full max-w-sm flex-col gap-2 outline-none\",\n            POSITION_CLASS[position],\n            className,\n          )}\n        />\n      </Toast.Provider>\n    </ToastContext.Provider>\n  );\n}\n\n/**\n * useToast — fire toasts from anywhere inside <Toaster>.\n *\n * Example:\n *   const { toast } = useToast();\n *   toast({ title: \"Deployed\", variant: \"success\" });\n */\nfunction useToast(): ToastContextValue {\n  const ctx = useContext(ToastContext);\n  if (!ctx) throw new Error(\"useToast must be used inside <Toaster>.\");\n  return ctx;\n}\n\nexport { Toaster, useToast };\n"
+    }
+  ]
+}

package/registry/r/token-usage-chart.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "token-usage-chart",
+  "type": "registry:ui",
+  "title": "TokenUsageChart",
+  "description": "Stacked-bar chart of input vs output tokens over time.",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/token-usage-chart/token-usage-chart.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/token-usage-chart.tsx",
+      "content": "import { forwardRef, useMemo } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface TokenUsagePoint {\n  /** ISO date or friendly label for the x-axis tooltip. */\n  label: string;\n  /** Input tokens for this period (e.g. day). */\n  input: number;\n  /** Output tokens for this period. */\n  output: number;\n}\n\ninterface TokenUsageChartProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  points: TokenUsagePoint[];\n  /** Title above the chart. */\n  title?: ReactNode;\n  /** Chart height in px. Default 160. */\n  height?: number;\n  /** Show legend below the chart. Default true. */\n  showLegend?: boolean;\n  /**\n   * Maximum number of bars to render. When `points.length` exceeds this, the\n   * series is binned (summed in equal-width windows) so the chart stays\n   * legible and SVG node count stays bounded. Default 60.\n   */\n  maxBars?: number;\n}\n\nfunction binPoints(points: TokenUsagePoint[], maxBars: number): TokenUsagePoint[] {\n  if (points.length <= maxBars) return points;\n  const binSize = Math.ceil(points.length / maxBars);\n  const out: TokenUsagePoint[] = [];\n  for (let i = 0; i < points.length; i += binSize) {\n    const slice = points.slice(i, i + binSize);\n    if (slice.length === 0) continue;\n    const first = slice[0]?.label ?? \"\";\n    const last = slice[slice.length - 1]?.label ?? first;\n    out.push({\n      label: slice.length === 1 ? first : `${first}…${last}`,\n      input: slice.reduce((a, p) => a + p.input, 0),\n      output: slice.reduce((a, p) => a + p.output, 0),\n    });\n  }\n  return out;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;\n  return `${n}`;\n};\n\n/**\n * TokenUsageChart — stacked-bar chart of input vs output tokens over time.\n *\n * Pure SVG, no chart lib. Width is fluid; bars adjust to viewBox. Hover any\n * bar to see the breakdown in the tooltip slot below.\n */\nconst TokenUsageChart = forwardRef<HTMLDivElement, TokenUsageChartProps>(\n  (\n    {\n      className,\n      points,\n      title = \"Token usage\",\n      height = 160,\n      showLegend = true,\n      maxBars = 60,\n      ...props\n    },\n    ref,\n  ) => {\n    const series = useMemo(() => binPoints(points, maxBars), [points, maxBars]);\n    const max = Math.max(1, ...series.map((p) => p.input + p.output));\n    const barCount = series.length;\n    const barWidth = 100 / Math.max(1, barCount);\n    const gap = Math.min(2, barWidth * 0.2);\n    const innerWidth = barWidth - gap;\n\n    const total = series.reduce((acc, p) => acc + p.input + p.output, 0);\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card p-4\", className)}\n        aria-label=\"Token usage over time\"\n        {...props}\n      >\n        <header className=\"flex items-baseline justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n            total · {formatTokens(total)}\n          </span>\n        </header>\n        <div className=\"mt-3 grid grid-cols-[auto_1fr] gap-2\">\n          {/* Y-axis ticks */}\n          <div\n            className=\"grid font-mono text-label text-muted-foreground\"\n            style={{ height, gridTemplateRows: \"1fr 1fr 1fr\" }}\n            aria-hidden=\"true\"\n          >\n            <span className=\"tabular-nums\">{formatTokens(max)}</span>\n            <span className=\"tabular-nums\">{formatTokens(max / 2)}</span>\n            <span className=\"self-end tabular-nums\">0</span>\n          </div>\n          {/* Chart */}\n          <svg\n            viewBox=\"0 0 100 100\"\n            preserveAspectRatio=\"none\"\n            className=\"w-full\"\n            style={{ height }}\n            role=\"img\"\n            aria-label={`Token usage across ${barCount} periods`}\n          >\n            {/* gridlines */}\n            {[25, 50, 75].map((y) => (\n              <line\n                key={y}\n                x1={0}\n                y1={y}\n                x2={100}\n                y2={y}\n                stroke=\"hsl(var(--border) / 0.4)\"\n                strokeWidth={0.2}\n              />\n            ))}\n            {series.map((p, idx) => {\n              const totalH = ((p.input + p.output) / max) * 100;\n              const inputH = (p.input / max) * 100;\n              const outputH = (p.output / max) * 100;\n              const x = idx * barWidth + gap / 2;\n              return (\n                <g key={p.label}>\n                  <title>{`${p.label} — input ${formatTokens(p.input)} · output ${formatTokens(p.output)}`}</title>\n                  {/* output (top, primary tone) */}\n                  <rect\n                    x={x}\n                    y={100 - totalH}\n                    width={innerWidth}\n                    height={outputH}\n                    fill=\"hsl(var(--primary))\"\n                    opacity={0.85}\n                  />\n                  {/* input (bottom, accent tone) */}\n                  <rect\n                    x={x}\n                    y={100 - inputH}\n                    width={innerWidth}\n                    height={inputH}\n                    fill=\"hsl(var(--accent))\"\n                    opacity={0.85}\n                  />\n                </g>\n              );\n            })}\n          </svg>\n        </div>\n        {/* x-axis labels — aligned with the chart column of the parent grid */}\n        <div\n          className=\"mt-1 grid grid-cols-[auto_1fr] gap-2 font-mono text-label text-muted-foreground\"\n          aria-hidden=\"true\"\n        >\n          <span aria-hidden=\"true\" />\n          <div className=\"grid\" style={{ gridTemplateColumns: `repeat(${barCount}, 1fr)` }}>\n            {series.map((p) => (\n              <span key={p.label} className=\"truncate text-center\">\n                {p.label}\n              </span>\n            ))}\n          </div>\n        </div>\n        {/* Screen-reader fallback: the SVG is decorative-ish for AT users.\n         * `<title>` per bar is unreliably exposed across NVDA/VoiceOver/JAWS,\n         * so we ship an `sr-only` table with the same data. Sighted users\n         * never see this; AT users can navigate the values cell-by-cell.\n         * Reference: WCAG 1.1.1 (Non-text content). */}\n        <table className=\"sr-only\">\n          <caption>Token usage by period — input vs output</caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">Period</th>\n              <th scope=\"col\">Input tokens</th>\n              <th scope=\"col\">Output tokens</th>\n            </tr>\n          </thead>\n          <tbody>\n            {series.map((p) => (\n              <tr key={`a11y-${p.label}`}>\n                <td>{p.label}</td>\n                <td>{p.input}</td>\n                <td>{p.output}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n        {showLegend ? (\n          <footer className=\"mt-3 flex items-center gap-4 font-mono text-label text-muted-foreground\">\n            <span className=\"inline-flex items-center gap-1.5\">\n              <span className=\"size-2 rounded-sm bg-accent\" aria-hidden=\"true\" />\n              Input\n            </span>\n            <span className=\"inline-flex items-center gap-1.5\">\n              <span className=\"size-2 rounded-sm bg-primary\" aria-hidden=\"true\" />\n              Output\n            </span>\n          </footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nTokenUsageChart.displayName = \"TokenUsageChart\";\n\nexport { TokenUsageChart };\n"
+    }
+  ]
+}