@theokit/ui 0.13.0

package/registry/r/tool-call-card.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tool-call-card",
+  "type": "registry:ui",
+  "title": "ToolCallCard",
+  "description": "Single agent tool invocation rendered inside the stream.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/tool-call-card/tool-call-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/tool-call-card.tsx",
+      "content": "import { Check, ChevronRight, Loader2, X } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\n/**\n * ToolCallCard — single agent tool invocation rendered inside the stream.\n *\n * Visual: row with tool icon + tool name + target/command (mono) + status +\n * optional chevron. Expandable: when `output` is provided the row becomes a\n * `<details>` whose body renders the stdout/stderr/result block.\n *\n * Distinct from `AgentEvent` in the existing AgentTimeline by being a\n * stand-alone card that lives inside an AgentStream alongside chat messages.\n */\n\nexport type ToolCallStatus = \"running\" | \"success\" | \"failed\" | \"queued\" | \"skipped\";\n\nconst STATUS_ICON: Record<ToolCallStatus, ReactNode> = {\n  running: <Loader2 className=\"size-3.5 animate-spin text-primary\" aria-hidden=\"true\" />,\n  success: <Check className=\"size-3.5 text-success\" aria-hidden=\"true\" />,\n  failed: <X className=\"size-3.5 text-destructive\" aria-hidden=\"true\" />,\n  queued: <span className=\"size-2 rounded-full bg-warning\" aria-hidden=\"true\" />,\n  skipped: <span className=\"size-2 rounded-full bg-muted-foreground\" aria-hidden=\"true\" />,\n};\n\nconst STATUS_LABEL: Record<ToolCallStatus, string> = {\n  running: \"Running\",\n  success: \"Completed\",\n  failed: \"Failed\",\n  queued: \"Queued\",\n  skipped: \"Skipped\",\n};\n\ninterface ToolCallCardProps extends HTMLAttributes<HTMLElement> {\n  /** Tool name (matches Theo Code / Claude Code tool registry: Bash, Edit, Read, …). */\n  tool: ReactNode;\n  /** Optional icon for the tool. */\n  icon?: IconComponent;\n  /** Target / command shown in monospace next to the tool name. */\n  target?: ReactNode;\n  status: ToolCallStatus;\n  /** Optional stdout/stderr/result body. When present, the card becomes expandable. */\n  output?: ReactNode;\n  /** Default expanded state. Default: false (collapsed). */\n  defaultExpanded?: boolean;\n  /** Timestamp shown on the right. */\n  timestamp?: ReactNode;\n}\n\nexport function ToolCallCard({\n  className,\n  tool,\n  icon: Icon,\n  target,\n  status,\n  output,\n  defaultExpanded = false,\n  timestamp,\n  ...props\n}: ToolCallCardProps) {\n  const [open, setOpen] = useState(defaultExpanded);\n  const expandable = !!output;\n\n  return (\n    <article\n      className={cn(\n        \"overflow-hidden rounded-lg border border-border/40 bg-card/40 text-card-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {/* T5.4: <header role=\"button\"> previously failed axe's\n       * aria-prohibited-attr + semantic-landmark guidance. Replaced by\n       * <div> for the layout container and a separate <button> for the\n       * expand affordance (when expandable). Status icon span now carries\n       * role=\"img\" to make aria-label valid. */}\n      <div className={cn(\"flex items-center gap-2 px-3 py-2\")}>\n        {expandable ? (\n          <button\n            type=\"button\"\n            onClick={() => setOpen((v) => !v)}\n            aria-expanded={open}\n            aria-label={open ? `Collapse ${tool} details` : `Expand ${tool} details`}\n            className=\"-m-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md p-1 text-muted-foreground hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <ChevronRight\n              className={cn(\"size-3.5 transition-transform duration-base\", open && \"rotate-90\")}\n              aria-hidden=\"true\"\n            />\n          </button>\n        ) : null}\n        {Icon ? (\n          <Icon className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n        ) : null}\n        <span className=\"shrink-0 font-medium font-mono text-code-sm text-foreground\">{tool}</span>\n        {target ? (\n          <span className=\"truncate font-mono text-code-sm text-muted-foreground\">{target}</span>\n        ) : null}\n        <span\n          role=\"img\"\n          aria-label={STATUS_LABEL[status]}\n          className=\"ml-auto inline-flex shrink-0 items-center gap-1.5\"\n        >\n          {STATUS_ICON[status]}\n        </span>\n        {timestamp ? (\n          <span className=\"shrink-0 font-mono text-label text-muted-foreground tabular-nums\">\n            {timestamp}\n          </span>\n        ) : null}\n      </div>\n      {expandable && open ? (\n        <div className=\"border-border/40 border-t bg-muted/20 px-3 py-2 font-mono text-code-sm\">\n          {output}\n        </div>\n      ) : null}\n    </article>\n  );\n}\n"
+    }
+  ]
+}

package/registry/r/tool-call.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tool-call",
+  "type": "registry:ui",
+  "title": "ToolCall",
+  "description": "Collapsible row representing an agent tool invocation.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/tool-call/tool-call.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/tool-call.tsx",
+      "content": "import { ChevronRight, Wrench } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ToolCallProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tool name e.g. \"bash\", \"read_file\", \"edit_file\". */\n  name?: string;\n  /**\n   * Summary label e.g. \"Ran 2 commands\", \"Read 18 files\".\n   */\n  summary: ReactNode;\n  /**\n   * Collapsible payload (e.g. command, stdout, file list).\n   */\n  detail?: ReactNode;\n  defaultOpen?: boolean;\n  /**\n   * If true, hides the wrench icon (useful when grouping by name elsewhere).\n   */\n  hideIcon?: boolean;\n}\n\n/**\n * ToolCall — collapsible row representing an agent tool invocation.\n *\n * Visual: subtle muted container, wrench icon, summary in body text,\n * chevron rotates on expand. Pairs with `<ToolResult>` for the rendered output.\n *\n * Typical usage inside a ChatMessage assistant body:\n *\n *   <ToolCall summary=\"Read 18 files\" detail={<ToolResult>{output}</ToolResult>} />\n */\nconst ToolCall = forwardRef<HTMLDivElement, ToolCallProps>(\n  ({ className, name, summary, detail, defaultOpen, hideIcon, ...props }, ref) => {\n    const [open, setOpen] = useState(defaultOpen ?? false);\n    const expandable = detail !== undefined;\n    return (\n      <div\n        ref={ref}\n        className={cn(\"rounded-md border border-border/40 bg-muted/30\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={() => expandable && setOpen((v) => !v)}\n          aria-expanded={expandable ? open : undefined}\n          disabled={!expandable}\n          className={cn(\n            \"flex w-full items-center gap-2 px-3 py-2 text-left\",\n            \"font-sans text-body-sm 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            expandable && \"cursor-pointer hover:bg-muted/60\",\n          )}\n        >\n          {!hideIcon ? (\n            <Wrench className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n          ) : null}\n          {name ? (\n            <span className=\"font-mono text-code-sm text-muted-foreground\">{name}</span>\n          ) : null}\n          <span className=\"flex-1 truncate\">{summary}</span>\n          {expandable ? (\n            <ChevronRight\n              className={cn(\n                \"size-3.5 text-muted-foreground transition-transform\",\n                open && \"rotate-90\",\n              )}\n              aria-hidden=\"true\"\n            />\n          ) : null}\n        </button>\n        {expandable && open ? (\n          <div className=\"border-border/40 border-t bg-card px-3 py-2\">{detail}</div>\n        ) : null}\n      </div>\n    );\n  },\n);\nToolCall.displayName = \"ToolCall\";\n\nexport { ToolCall };\n"
+    }
+  ]
+}

package/registry/r/tool-result.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tool-result",
+  "type": "registry:ui",
+  "title": "ToolResult",
+  "description": "Formatted output of a tool invocation.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/tool-result/tool-result.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/tool-result.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ntype Variant = \"text\" | \"code\" | \"json\";\n\ninterface ToolResultProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: Variant;\n  /**\n   * Pre-formatted content. For `code`/`json`, the component uses mono font\n   * and preserves whitespace. For `text`, normal body font.\n   */\n  children: ReactNode;\n}\n\n/**\n * ToolResult — formatted output of a tool invocation.\n *\n * Three quick variants: plain text, code (monospace), json (monospace, tinted).\n * Always rendered as a `<div>` for predictable prop typing; code/json variants\n * wrap children in `<pre>` internally.\n */\nconst ToolResult = forwardRef<HTMLDivElement, ToolResultProps>(\n  ({ className, variant = \"text\", children, ...props }, ref) => {\n    if (variant === \"text\") {\n      return (\n        <div ref={ref} className={cn(\"text-body-sm text-muted-foreground\", className)} {...props}>\n          {children}\n        </div>\n      );\n    }\n    return (\n      <div ref={ref} className={className} {...props}>\n        <pre\n          className={cn(\n            \"overflow-x-auto whitespace-pre-wrap font-mono text-code-sm\",\n            variant === \"json\" ? \"text-primary-glow\" : \"text-foreground\",\n          )}\n        >\n          {children}\n        </pre>\n      </div>\n    );\n  },\n);\nToolResult.displayName = \"ToolResult\";\n\nexport { ToolResult };\n"
+    }
+  ]
+}

package/registry/r/tools-list.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tools-list",
+  "type": "registry:ui",
+  "title": "ToolsList",
+  "description": "Surface every tool the agent could call, with its enablement",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/tools-list/tools-list.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/tools-list.tsx",
+      "content": "import { Eye, Lock, Settings2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport type ToolEnablement = \"enabled\" | \"ask\" | \"denied\";\n\nexport interface ToolEntry {\n  id: string;\n  name: string;\n  description?: ReactNode;\n  icon?: IconComponent;\n  enablement?: ToolEnablement;\n  /**\n   * Source of the tool: built-in, plugin/skill, or MCP server name.\n   */\n  source?: string;\n  /** Optional badge text (e.g. \"destructive\", \"experimental\"). */\n  badge?: ReactNode;\n}\n\ninterface ToolsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onChange\"> {\n  tools: ToolEntry[];\n  /** Title above the list. */\n  title?: ReactNode;\n  /**\n   * Fires when the consumer toggles a tool's enablement state.\n   * Cycle: enabled → ask → denied → enabled.\n   */\n  onEnablementChange?: (id: string, next: ToolEnablement) => void;\n}\n\nconst ENABLEMENT_LABEL: Record<ToolEnablement, string> = {\n  enabled: \"Allowed\",\n  ask: \"Ask before use\",\n  denied: \"Denied\",\n};\n\nconst ENABLEMENT_CLASS: Record<ToolEnablement, string> = {\n  enabled: \"bg-success/15 text-success border-success/40\",\n  ask: \"bg-warning/15 text-warning border-warning/40\",\n  denied: \"bg-destructive/15 text-destructive border-destructive/40\",\n};\n\nconst cycle = (cur: ToolEnablement): ToolEnablement =>\n  cur === \"enabled\" ? \"ask\" : cur === \"ask\" ? \"denied\" : \"enabled\";\n\n/**\n * ToolsList — surface every tool the agent could call, with its enablement\n * state. Click the chip to cycle: Allowed → Ask → Denied.\n */\nconst ToolsList = forwardRef<HTMLDivElement, ToolsListProps>(\n  ({ className, tools, title = \"Tools\", onEnablementChange, ...props }, ref) => (\n    <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n      {title ? (\n        <header className=\"flex items-center justify-between border-border/40 border-b px-4 py-3\">\n          <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {tools.length} {tools.length === 1 ? \"tool\" : \"tools\"}\n          </span>\n        </header>\n      ) : null}\n      <ul className=\"divide-y divide-border/30\">\n        {tools.map((tool) => {\n          const Icon = tool.icon ?? Settings2;\n          const state = tool.enablement ?? \"enabled\";\n          return (\n            <li\n              key={tool.id}\n              className=\"grid grid-cols-[auto_1fr_auto] items-start gap-3 px-4 py-3\"\n            >\n              <span className=\"mt-0.5 grid size-8 place-items-center rounded-md bg-muted text-muted-foreground\">\n                <Icon className=\"size-4\" aria-hidden=\"true\" />\n              </span>\n              <div className=\"min-w-0\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"font-medium font-mono text-body-sm text-foreground\">\n                    {tool.name}\n                  </span>\n                  {tool.source ? (\n                    <span className=\"font-mono text-label text-muted-foreground uppercase tracking-wider\">\n                      {tool.source}\n                    </span>\n                  ) : null}\n                  {tool.badge ? (\n                    <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n                      {tool.badge}\n                    </span>\n                  ) : null}\n                </div>\n                {tool.description ? (\n                  <p className=\"mt-0.5 text-body-sm text-muted-foreground\">{tool.description}</p>\n                ) : null}\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => onEnablementChange?.(tool.id, cycle(state))}\n                className={cn(\n                  \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1\",\n                  \"font-mono text-label uppercase tracking-wider transition-colors\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                  ENABLEMENT_CLASS[state],\n                  !onEnablementChange && \"pointer-events-none\",\n                )}\n                aria-label={`Cycle enablement for ${tool.name}`}\n              >\n                {state === \"enabled\" ? (\n                  <Eye className=\"size-3\" aria-hidden=\"true\" />\n                ) : state === \"ask\" ? (\n                  <Settings2 className=\"size-3\" aria-hidden=\"true\" />\n                ) : (\n                  <Lock className=\"size-3\" aria-hidden=\"true\" />\n                )}\n                {ENABLEMENT_LABEL[state]}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </section>\n  ),\n);\nToolsList.displayName = \"ToolsList\";\n\nexport { ToolsList };\n"
+    }
+  ]
+}

package/registry/r/tooltip.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:ui",
+  "title": "Tooltip",
+  "description": "Built on Radix Tooltip — accessible hover / focus tooltip with delay and side / align controls.",
+  "dependencies": [
+    "@radix-ui/react-tooltip"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/tooltip/tooltip.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip.tsx",
+      "content": "import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Tooltip — built on Radix Tooltip.\n *\n * Visual: dark surface in light mode (and inverse in dark) with rounded-md,\n * shadow-md, text-body-sm. 8px delay-show default.\n *\n * Wrap your app in <Tooltip.Provider> once (or use the default delayDuration here).\n */\n\nconst Provider = TooltipPrimitive.Provider;\nconst Root = TooltipPrimitive.Root;\nconst Trigger = TooltipPrimitive.Trigger;\n\nconst Content = forwardRef<\n  ElementRef<typeof TooltipPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 6, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded-md border border-border/40 bg-foreground px-2.5 py-1.5\",\n        \"text-background text-body-sm shadow-md\",\n        \"data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n        \"data-[side=top]:slide-in-from-bottom-1 data-[side=bottom]:slide-in-from-top-1\",\n        \"data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1\",\n        className,\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\ninterface TooltipProps extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  label: ReactNode;\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * Shorthand: <Tooltip label=\"…\"><Button>…</Button></Tooltip>\n * Wraps Provider + Root + Trigger asChild + Content for the common case.\n * For advanced usage (controlled state, custom content), use Tooltip.Root etc. directly.\n */\nconst Tooltip = ({\n  label,\n  side = \"top\",\n  align = \"center\",\n  delayDuration = 200,\n  children,\n  ...rootProps\n}: TooltipProps) =>\n  (\n    <Provider delayDuration={delayDuration}>\n      <Root {...rootProps}>\n        <Trigger asChild>{children}</Trigger>\n        <Content side={side} align={align}>\n          {label}\n        </Content>\n      </Root>\n    </Provider>\n  ) as ReturnType<typeof Provider>;\n\nconst TooltipWithStatics = Tooltip as typeof Tooltip & {\n  Provider: typeof Provider;\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n  Content: typeof Content;\n};\nTooltipWithStatics.Provider = Provider;\nTooltipWithStatics.Root = Root;\nTooltipWithStatics.Trigger = Trigger;\nTooltipWithStatics.Content = Content;\n\nexport { TooltipWithStatics as Tooltip };\n"
+    }
+  ]
+}

package/registry/r/topnav.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "topnav",
+  "type": "registry:ui",
+  "title": "TopNav",
+  "description": "Horizontal app bar (64px) with breadcrumbs, mode switcher (radiogroup), and action slots.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/topnav/topnav.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/topnav.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\";\nimport { Fragment, forwardRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * TopNav — horizontal app bar (64px).\n *\n * Composition:\n *   <TopNav>\n *     <TopNav.Left>\n *       <TopNav.Breadcrumbs items={[{label: \"acme\"}, {label: \"api\"}]} />\n *     </TopNav.Left>\n *     <TopNav.Center>…segmented switcher…</TopNav.Center>\n *     <TopNav.Right>…actions…</TopNav.Right>\n *   </TopNav>\n *\n * Variant — hairline bottom border. No glass/blur (anti-glass guideline).\n */\n\nconst Root = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(\n  ({ className, ...props }, ref) => (\n    <header\n      ref={ref}\n      className={cn(\n        \"flex h-16 items-center justify-between gap-4 border-border/40 border-b bg-card px-6\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRoot.displayName = \"TopNav\";\n\nconst Left = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-1 items-center gap-3\", className)} {...props} />\n  ),\n);\nLeft.displayName = \"TopNav.Left\";\n\nconst Center = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"hidden flex-1 justify-center md:flex\", className)} {...props} />\n  ),\n);\nCenter.displayName = \"TopNav.Center\";\n\nconst Right = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-1 items-center justify-end gap-2\", className)}\n      {...props}\n    />\n  ),\n);\nRight.displayName = \"TopNav.Right\";\n\ninterface BreadcrumbItem {\n  label: ReactNode;\n  href?: string;\n}\n\ninterface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n}\n\nconst Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  ({ className, items, ...props }, ref) => (\n    <nav\n      ref={ref}\n      aria-label=\"Breadcrumb\"\n      className={cn(\"flex items-center gap-1.5 text-body-sm\", className)}\n      {...props}\n    >\n      {items.map((item, idx) => {\n        const isLast = idx === items.length - 1;\n        const key = typeof item.label === \"string\" ? item.label : idx;\n        return (\n          <Fragment key={key}>\n            {item.href && !isLast ? (\n              <a\n                href={item.href}\n                className=\"font-sans text-muted-foreground transition-colors hover:text-foreground\"\n              >\n                {item.label}\n              </a>\n            ) : (\n              <span\n                className={cn(\n                  \"font-sans\",\n                  isLast ? \"font-medium text-foreground\" : \"text-muted-foreground\",\n                )}\n                aria-current={isLast ? \"page\" : undefined}\n              >\n                {item.label}\n              </span>\n            )}\n            {!isLast ? (\n              <ChevronRight className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </nav>\n  ),\n);\nBreadcrumbs.displayName = \"TopNav.Breadcrumbs\";\n\ninterface ModeSwitcherOption {\n  value: string;\n  label: ReactNode;\n}\n\ninterface ModeSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  value: string;\n  options: ModeSwitcherOption[];\n  onChange?: (value: string) => void;\n  /**\n   * Accessible label for the radiogroup. Defaults to \"Mode\".\n   */\n  ariaLabel?: string;\n}\n\n/**\n * TopNav.ModeSwitcher — segmented control (Chat / Code / Infra).\n *\n * ARIA semantics: `role=\"radiogroup\"` + `role=\"radio\"` per option, with roving\n * tabindex and full keyboard navigation (Arrow keys + Home/End). Per WAI-ARIA\n * radiogroup pattern, exactly one option has `tabIndex=0` (the active one) and\n * the rest have `tabIndex=-1`, so Tab moves in and Tab moves out.\n *\n * Stateless: pass `value` + `onChange`.\n */\nconst ModeSwitcher = forwardRef<HTMLDivElement, ModeSwitcherProps>(\n  ({ className, value, options, onChange, ariaLabel = \"Mode\", ...props }, ref) => {\n    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n      if (!onChange || options.length === 0) return;\n      const idx = options.findIndex((o) => o.value === value);\n      const current = idx >= 0 ? idx : 0;\n      let nextIdx: number | null = null;\n      if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n        nextIdx = (current + 1) % options.length;\n      } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n        nextIdx = (current - 1 + options.length) % options.length;\n      } else if (e.key === \"Home\") {\n        nextIdx = 0;\n      } else if (e.key === \"End\") {\n        nextIdx = options.length - 1;\n      }\n      if (nextIdx === null) return;\n      e.preventDefault();\n      const target = options[nextIdx];\n      if (target) onChange(target.value);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"inline-flex items-center rounded-lg border border-border/60 bg-muted p-1\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((opt) => {\n          const isActive = opt.value === value;\n          return (\n            <button\n              key={opt.value}\n              type=\"button\"\n              // biome-ignore lint/a11y/useSemanticElements: WAI-ARIA radiogroup pattern requires role=\"radio\" on buttons for segmented controls\n              role=\"radio\"\n              aria-checked={isActive}\n              tabIndex={isActive ? 0 : -1}\n              onClick={() => onChange?.(opt.value)}\n              className={cn(\n                \"rounded-md px-3 py-1.5 font-medium font-sans text-body-sm\",\n                \"transition-all duration-base ease-out-soft\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                isActive\n                  ? \"bg-card text-foreground shadow-sm\"\n                  : \"text-muted-foreground hover:text-foreground\",\n              )}\n            >\n              {opt.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\nModeSwitcher.displayName = \"TopNav.ModeSwitcher\";\n\nconst TopNav = /*#__PURE__*/ Object.assign(Root, {\n  Left,\n  Center,\n  Right,\n  Breadcrumbs,\n  ModeSwitcher,\n});\n\nexport { TopNav };\n"
+    }
+  ]
+}

package/registry/r/types.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "types",
+  "type": "registry:lib",
+  "title": "Theo UI shared types",
+  "description": "Shared TypeScript helper types (IconComponent, etc.) used across Theo UI.",
+  "files": [
+    {
+      "path": "lib/types.ts",
+      "type": "registry:lib",
+      "target": "lib/types.ts",
+      "content": "import type { ComponentType, SVGProps } from \"react\";\n\n/**\n * IconComponent — shape compatible with both lucide-react icons and custom React SVG components.\n *\n * Centralizing this here avoids TS2322 noise from `exactOptionalPropertyTypes` when mapping\n * icons through Record<...> structures.\n */\nexport type IconComponent = ComponentType<SVGProps<SVGSVGElement> & { className?: string }>;\n"
+    }
+  ]
+}

package/registry/r/usage-meter.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "usage-meter",
+  "type": "registry:ui",
+  "title": "UsageMeter",
+  "description": "Multi-metric stacked usage card for PaaS dashboards. Renders N metrics (data transfer, requests, build minutes, seats, …) each with label + value/max + Progress bar. Supports custom per-metric formatter, over-quota warning, and a compact bars-only mode. PaaS-shape sibling of CostMeter.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/progress.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/usage-meter/usage-meter.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/usage-meter.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Progress } from \"@/components/ui/progress\";\n\n/**\n * UsageMeter — multi-metric stacked usage card.\n *\n * PaaS-shape sibling of `<CostMeter>` (which is mono-USD). Displays N\n * metrics with arbitrary units (GB, requests, build-minutes, seats) per\n * the reference TheoCloud dashboard mockup. Each row = label + value/max\n * + `<Progress>` fill bar.\n *\n * Composition:\n *\n *   <UsageMeter\n *     title=\"Last 30 days\"\n *     action={<Badge variant=\"outline\">Upgrade</Badge>}\n *     metrics={[\n *       { label: \"Fast Data Transfer\", value: 0, max: 100, unit: \"GB\" },\n *       { label: \"Edge Requests\", value: 0, max: 1_000_000, unit: \"req\",\n *         formatter: (v, m) => `${v} / ${m >= 1e6 ? `${m / 1e6}M` : m}` },\n *     ]}\n *   />\n *\n * Over-quota detection: when `value > max`, the value text gets the\n * `text-warning` class and the underlying `<Progress>` uses\n * `intent=\"warning\"` (bar fills 100% via Progress's own clamping).\n *\n * `compact` mode renders only the bars (no label/value text) — useful in\n * narrow nav-bar slots.\n *\n * Imports the sibling `<Progress>` primitive via relative path (per RFC\n * dashboard-paas-primitives D3) — primitives must not depend on the\n * `@theokit/ui` barrel.\n */\n\nexport interface UsageMetric {\n  /** Display label (e.g. \"Fast Data Transfer\"). */\n  label: ReactNode;\n  /** Current consumption. */\n  value: number;\n  /** Maximum allowed in the current period. */\n  max: number;\n  /** Unit string (e.g. \"GB\", \"req\", \"min\"). Rendered after value/max. */\n  unit?: string;\n  /** Optional custom formatter — overrides default `${value} / ${max} ${unit}`. */\n  formatter?: (value: number, max: number, unit?: string) => string;\n}\n\nexport interface UsageMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Card title (e.g. \"Last 30 days\", \"This billing period\"). */\n  title?: ReactNode;\n  /** Optional right-aligned action slot (e.g. an Upgrade Badge or Button). */\n  action?: ReactNode;\n  /** Array of metrics to display. Order preserved. */\n  metrics: UsageMetric[];\n  /** When true, show only the bars without label/value text (sparkline mode). */\n  compact?: boolean;\n}\n\nfunction defaultFormat(value: number, max: number, unit?: string): string {\n  return `${value} / ${max}${unit ? ` ${unit}` : \"\"}`;\n}\n\nfunction metricAriaLabel(metric: UsageMetric, formatted: string): string {\n  // Label may be a ReactNode; coerce to string for aria-label.\n  const label = typeof metric.label === \"string\" ? metric.label : \"metric\";\n  return `${label}: ${formatted}`;\n}\n\nconst UsageMeter = forwardRef<HTMLDivElement, UsageMeterProps>(\n  ({ className, title, action, metrics, compact = false, ...props }, ref) => {\n    const hasHeader = Boolean(title) || Boolean(action);\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid gap-3 rounded-xl border border-border bg-card p-4\",\n          compact && \"gap-2\",\n          className,\n        )}\n        data-theo-usage-meter=\"\"\n        {...props}\n      >\n        {hasHeader ? (\n          <header className=\"flex items-baseline justify-between gap-3\">\n            {title ? (\n              <span\n                className={cn(\n                  \"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\",\n                )}\n              >\n                {title}\n              </span>\n            ) : (\n              <span />\n            )}\n            {action ? <div className=\"shrink-0\">{action}</div> : null}\n          </header>\n        ) : null}\n\n        {metrics.map((metric, idx) => {\n          const overQuota = metric.value > metric.max;\n          const fmt = metric.formatter ?? defaultFormat;\n          const formatted = fmt(metric.value, metric.max, metric.unit);\n          const intent = overQuota ? \"warning\" : \"default\";\n          // Each metric needs a stable key. Without a unique id field we\n          // synthesize one from label + idx — duplicates resolve via the\n          // index suffix.\n          const key = `${typeof metric.label === \"string\" ? metric.label : \"metric\"}-${idx}`;\n\n          if (compact) {\n            return (\n              <Progress\n                key={key}\n                value={metric.value}\n                max={metric.max}\n                intent={intent}\n                aria-label={metricAriaLabel(metric, formatted)}\n              />\n            );\n          }\n\n          return (\n            <div key={key} className=\"grid gap-1.5\">\n              <div className=\"flex items-baseline justify-between gap-3 text-body-sm\">\n                <span className=\"truncate text-muted-foreground\">{metric.label}</span>\n                <span\n                  className={cn(\n                    \"shrink-0 font-mono tabular-nums\",\n                    overQuota ? \"text-warning\" : \"text-foreground\",\n                  )}\n                >\n                  {formatted}\n                </span>\n              </div>\n              <Progress\n                value={metric.value}\n                max={metric.max}\n                intent={intent}\n                aria-label={metricAriaLabel(metric, formatted)}\n              />\n            </div>\n          );\n        })}\n      </div>\n    );\n  },\n);\nUsageMeter.displayName = \"UsageMeter\";\n\nexport { UsageMeter };\n"
+    }
+  ]
+}

package/registry/r/whiteboard.json

@@ -0,0 +1,101 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "whiteboard",
+  "type": "registry:ui",
+  "title": "Whiteboard",
+  "description": "View-only primitive that renders a declarative JSON scene as SVG with a hand-drawn aesthetic. Pan + zoom built-in; no editor surface. Subpath-isolated bundle in @theokit/ui.",
+  "dependencies": [
+    "perfect-freehand",
+    "roughjs",
+    "zod"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/whiteboard/whiteboard.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/whiteboard.tsx",
+      "content": "import { useEffect, useMemo, useRef } from \"react\";\n/**\n * `<Whiteboard>` — view-only primitive that turns a JSON scene into a\n * hand-drawn SVG. Lives in the isolated subpath `@theokit/ui/whiteboard`.\n *\n * See RFC 0001 (`docs/rfcs/0001-whiteboard.md`) and the plan in\n * `.claude/knowledge-base/plans/whiteboard-view-primitive-plan.md`.\n */\nimport rough from \"roughjs\";\nimport type { RoughGenerator } from \"roughjs/bin/generator\";\nimport { renderScene } from \"@/components/ui/whiteboard/render/scene\";\nimport type { WhiteboardScene, WhiteboardSceneInput } from \"@/components/ui/whiteboard/schema\";\nimport { type ValidationError, validateScene } from \"@/components/ui/whiteboard/validate\";\nimport { usePointerPan } from \"@/components/ui/whiteboard/viewport/use-pointer-pan\";\nimport { useViewport } from \"@/components/ui/whiteboard/viewport/use-viewport\";\n\n/** Input type accepted by the component (defaults like `headEnd` are optional). */\nexport type WhiteboardData = WhiteboardSceneInput;\nexport type { ValidationError } from \"@/components/ui/whiteboard/validate\";\n\nexport interface WhiteboardProps {\n  /** The scene to render. Validated with Zod on every change. */\n  data: WhiteboardData | unknown;\n  className?: string;\n  /** Starting zoom level (clamped 0.1–8). Default 1. */\n  initialZoom?: number;\n  /** World coordinate centered in the viewport on first render. */\n  initialCenter?: [number, number];\n  /** When true, computes a bounding box of all elements and zooms to fit. */\n  fitOnLoad?: boolean;\n  /** Called once per validation failure with the list of errors (EC-6: in useEffect, not render). */\n  onValidationError?: (errors: ValidationError[]) => void;\n  /** Accessible label for the SVG (defaults to \"Whiteboard diagram\"). */\n  \"aria-label\"?: string;\n}\n\nfunction computeBounds(scene: WhiteboardScene): {\n  minX: number;\n  minY: number;\n  maxX: number;\n  maxY: number;\n} | null {\n  if (scene.elements.length === 0) return null;\n  let minX = Number.POSITIVE_INFINITY;\n  let minY = Number.POSITIVE_INFINITY;\n  let maxX = Number.NEGATIVE_INFINITY;\n  let maxY = Number.NEGATIVE_INFINITY;\n  for (const el of scene.elements) {\n    const x1 = el.x;\n    const y1 = el.y;\n    let x2 = el.x;\n    let y2 = el.y;\n    if (el.type === \"rect\" || el.type === \"ellipse\" || el.type === \"diamond\") {\n      x2 = el.x + el.w;\n      y2 = el.y + el.h;\n    } else if (el.type === \"line\" || el.type === \"arrow\") {\n      x2 = el.to[0];\n      y2 = el.to[1];\n    } else if (el.type === \"freedraw\") {\n      for (const [px, py] of el.points) {\n        const tx = el.x + px;\n        const ty = el.y + py;\n        if (tx < minX) minX = tx;\n        if (ty < minY) minY = ty;\n        if (tx > maxX) maxX = tx;\n        if (ty > maxY) maxY = ty;\n      }\n      continue;\n    }\n    if (x1 < minX) minX = x1;\n    if (y1 < minY) minY = y1;\n    if (x2 < minX) minX = x2;\n    if (y2 < minY) minY = y2;\n    if (x1 > maxX) maxX = x1;\n    if (y1 > maxY) maxY = y1;\n    if (x2 > maxX) maxX = x2;\n    if (y2 > maxY) maxY = y2;\n  }\n  if (!Number.isFinite(minX)) return null;\n  return { minX, minY, maxX, maxY };\n}\n\nexport function Whiteboard({\n  data,\n  className,\n  initialZoom,\n  initialCenter,\n  fitOnLoad,\n  onValidationError,\n  \"aria-label\": ariaLabel,\n}: WhiteboardProps) {\n  const validation = useMemo(() => validateScene(data), [data]);\n  const scene = validation.ok ? validation.scene : null;\n\n  // EC-6: side effects only inside useEffect — never call user callbacks in render.\n  useEffect(() => {\n    if (!validation.ok && onValidationError) {\n      onValidationError(validation.errors);\n    }\n  }, [validation, onValidationError]);\n\n  // Stable rough.js generator across renders.\n  const generator: RoughGenerator | null = useMemo(() => {\n    if (typeof globalThis === \"undefined\") return null;\n    try {\n      return rough.generator();\n    } catch {\n      return null;\n    }\n  }, []);\n\n  // Fallback dimensions for invalid scenes (still render a valid svg).\n  const sceneWidth = scene?.width ?? 400;\n  const sceneHeight = scene?.height ?? 300;\n  const sceneBackground = scene?.background;\n\n  const viewport = useViewport({\n    width: sceneWidth,\n    height: sceneHeight,\n    initialZoom,\n    initialCenter,\n  });\n\n  const svgRef = useRef<SVGSVGElement | null>(null);\n\n  const fitTo = viewport.fitTo;\n  // EC-14: fitOnLoad must run in useEffect (after mount), not during render.\n  useEffect(() => {\n    if (!fitOnLoad || !scene) return;\n    const bounds = computeBounds(scene);\n    if (!bounds) return;\n    fitTo(bounds, { width: sceneWidth, height: sceneHeight });\n  }, [fitOnLoad, scene, sceneWidth, sceneHeight, fitTo]);\n\n  const handlers = usePointerPan(svgRef, viewport, {\n    width: sceneWidth,\n    height: sceneHeight,\n  });\n\n  const label = ariaLabel ?? \"Whiteboard diagram\";\n\n  return (\n    <svg\n      ref={svgRef}\n      viewBox={viewport.viewBox({ width: sceneWidth, height: sceneHeight })}\n      width={sceneWidth}\n      height={sceneHeight}\n      className={className}\n      role=\"img\"\n      aria-label={label}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-whiteboard-state={scene ? \"ok\" : \"invalid\"}\n      style={{ touchAction: \"none\", userSelect: \"none\" }}\n      {...handlers}\n    >\n      <title>{label}</title>\n      {sceneBackground ? (\n        <rect\n          x={0}\n          y={0}\n          width={sceneWidth}\n          height={sceneHeight}\n          fill={sceneBackground}\n          data-layer=\"background\"\n        />\n      ) : null}\n      {scene && generator ? renderScene(scene, generator) : null}\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/schema.ts",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/schema.ts",
+      "content": "/**\n * Zod schema for the Whiteboard JSON v1 (`WhiteboardScene`).\n *\n * Design goals (see RFC 0001 §4 and ADR D4 in the plan):\n *   - LLM-friendly: minimal fields per element.\n *   - Discriminated union by `type` for exhaustive typing in TS.\n *   - Defensive against LLM mistakes:\n *     - EC-3: `.finite()` everywhere — rejects NaN / Infinity.\n *     - EC-4: `.max()` on dimensions to cap absurd values from the model.\n */\nimport { z } from \"zod\";\n\nconst finiteNumber = z.number().finite();\nconst finitePositive = finiteNumber.positive();\n\nconst strokeStyle = z.enum([\"solid\", \"dashed\", \"dotted\"]);\nconst fillStyle = z.enum([\"hachure\", \"solid\", \"cross-hatch\", \"zigzag\"]);\nconst align = z.enum([\"left\", \"center\", \"right\"]);\nconst fontFamily = z.enum([\"sans\", \"serif\", \"mono\", \"hand\"]);\nconst roundness = z.enum([\"sharp\", \"round\"]);\n\nconst baseElement = z.object({\n  id: z.string().max(120).optional(),\n  x: finiteNumber,\n  y: finiteNumber,\n  stroke: z.string().max(64).optional(),\n  strokeWidth: finitePositive.max(50).optional(),\n  strokeStyle: strokeStyle.optional(),\n  fill: z.string().max(64).optional(),\n  fillStyle: fillStyle.optional(),\n  opacity: finiteNumber.min(0).max(1).optional(),\n  roughness: finiteNumber.min(0).max(3).optional(),\n  seed: z.number().int().finite().optional(),\n});\n\nconst dim = finitePositive.max(20000);\nconst labelText = z.string().max(500);\n\nconst rectElement = baseElement.extend({\n  type: z.literal(\"rect\"),\n  w: dim,\n  h: dim,\n  label: labelText.optional(),\n  roundness: roundness.optional(),\n});\n\nconst ellipseElement = baseElement.extend({\n  type: z.literal(\"ellipse\"),\n  w: dim,\n  h: dim,\n  label: labelText.optional(),\n});\n\nconst diamondElement = baseElement.extend({\n  type: z.literal(\"diamond\"),\n  w: dim,\n  h: dim,\n  label: labelText.optional(),\n});\n\nconst point2 = z.tuple([finiteNumber, finiteNumber]);\n\nconst lineElement = baseElement.extend({\n  type: z.literal(\"line\"),\n  to: point2,\n});\n\nconst arrowElement = baseElement.extend({\n  type: z.literal(\"arrow\"),\n  to: point2,\n  label: labelText.optional(),\n  headStart: z.boolean().optional(),\n  headEnd: z.boolean().default(true),\n});\n\nconst textElement = baseElement.extend({\n  type: z.literal(\"text\"),\n  text: z.string().max(5000),\n  fontSize: finitePositive.max(500).optional(),\n  align: align.optional(),\n  fontFamily: fontFamily.optional(),\n});\n\nconst freedrawPoint = z.tuple([finiteNumber, finiteNumber, finiteNumber.optional()]);\n\nconst freedrawElement = baseElement.extend({\n  type: z.literal(\"freedraw\"),\n  points: z.array(freedrawPoint).min(2).max(5000),\n});\n\nexport const whiteboardElement = z.discriminatedUnion(\"type\", [\n  rectElement,\n  ellipseElement,\n  diamondElement,\n  lineElement,\n  arrowElement,\n  textElement,\n  freedrawElement,\n]);\n\nexport const whiteboardScene = z.object({\n  version: z.literal(1),\n  width: dim, // EC-4: clamped 1..20000\n  height: dim, // EC-4: clamped 1..20000\n  background: z.string().max(64).optional(),\n  elements: z.array(whiteboardElement).max(5000),\n});\n\n// Internal \"parsed\" types (defaults applied) — used inside the renderer.\nexport type WhiteboardElement = z.output<typeof whiteboardElement>;\nexport type WhiteboardScene = z.output<typeof whiteboardScene>;\nexport type RectElement = z.output<typeof rectElement>;\nexport type EllipseElement = z.output<typeof ellipseElement>;\nexport type DiamondElement = z.output<typeof diamondElement>;\nexport type LineElement = z.output<typeof lineElement>;\nexport type ArrowElement = z.output<typeof arrowElement>;\nexport type TextElement = z.output<typeof textElement>;\nexport type FreedrawElement = z.output<typeof freedrawElement>;\n\n// Public \"input\" types (defaults optional) — used by consumers passing data.\nexport type WhiteboardElementInput = z.input<typeof whiteboardElement>;\nexport type WhiteboardSceneInput = z.input<typeof whiteboardScene>;\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/validate.ts",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/validate.ts",
+      "content": "/**\n * Public validator for `WhiteboardScene` JSON. Wraps Zod and converts errors\n * into a structured shape that an LLM can consume to self-correct.\n *\n * Returns `{ ok: true, scene }` on success or `{ ok: false, errors }` with\n * each error carrying `{ path, message, code, got? }`. See RFC 0001 §4.\n */\nimport { type WhiteboardScene, whiteboardScene } from \"@/components/ui/whiteboard/schema\";\n\nexport interface ValidationError {\n  /** Dot-joined Zod path, e.g. \"elements.2.type\" or \"width\". */\n  path: string;\n  /** Human-readable explanation (passes through Zod's message). */\n  message: string;\n  /** Zod issue code: `invalid_type`, `too_small`, `invalid_literal`, ... */\n  code: string;\n  /** Actual value received at `path`. Populated for type mismatches, discriminator mismatches, and any issue where Zod's `received` is absent but the value can be recovered by walking the original input along `path`. */\n  got?: unknown;\n}\n\nexport type ValidationResult =\n  | { ok: true; scene: WhiteboardScene }\n  | { ok: false; errors: ValidationError[] };\n\ninterface ZodLikeIssue {\n  path: ReadonlyArray<string | number>;\n  message: string;\n  code: string;\n  received?: unknown;\n}\n\n/** Walk `input` following the issue path and return the offending value. */\nfunction valueAtPath(input: unknown, path: ReadonlyArray<string | number>): unknown {\n  let cursor: unknown = input;\n  for (const segment of path) {\n    if (cursor === null || typeof cursor !== \"object\") return undefined;\n    cursor = (cursor as Record<string | number, unknown>)[segment];\n  }\n  return cursor;\n}\n\nfunction formatIssue(issue: ZodLikeIssue, input: unknown): ValidationError {\n  const error: ValidationError = {\n    path: issue.path.join(\".\"),\n    message: issue.message,\n    code: issue.code,\n  };\n  // Populate `got` from the issue when Zod provides it (invalid_type), or by\n  // walking the original input along the path (invalid_union / invalid_value).\n  // LLM auto-correction benefits from seeing what was actually emitted.\n  if (\"received\" in issue && issue.received !== undefined) {\n    error.got = issue.received;\n  } else if (issue.path.length > 0) {\n    const value = valueAtPath(input, issue.path);\n    if (value !== undefined) error.got = value;\n  }\n  return error;\n}\n\nexport function validateScene(input: unknown): ValidationResult {\n  const result = whiteboardScene.safeParse(input);\n  if (result.success) {\n    return { ok: true, scene: result.data };\n  }\n  const errors = result.error.issues.map((issue) =>\n    formatIssue(issue as unknown as ZodLikeIssue, input),\n  );\n  return { ok: false, errors };\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/seed.ts",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/seed.ts",
+      "content": "/**\n * Deterministic seed derivation for rough.js — see ADR D9.\n *\n * rough.js uses pseudo-randomness to produce the hand-drawn look. Without a\n * stable seed every render shifts the strokes slightly, breaking snapshot\n * tests, causing SSR hydration mismatches, and visible jitter when the parent\n * re-renders. FNV-1a 32-bit gives us a fast, dependency-free hash.\n */\n\nconst FNV_OFFSET_BASIS_32 = 0x811c9dc5;\nconst FNV_PRIME_32 = 0x01000193;\n\n/** FNV-1a 32-bit hash. Returns a signed 32-bit integer. */\nexport function fnv1a32(input: string): number {\n  let hash = FNV_OFFSET_BASIS_32;\n  for (let i = 0; i < input.length; i++) {\n    hash ^= input.charCodeAt(i);\n    // Multiply by the FNV prime, but keep within 32-bit unsigned range.\n    hash = Math.imul(hash, FNV_PRIME_32);\n  }\n  // Cast to signed 32-bit via `| 0`.\n  return hash | 0;\n}\n\ninterface SeedableShape {\n  type: string;\n  x: number;\n  y: number;\n  w?: number;\n  h?: number;\n  label?: string;\n  seed?: number;\n}\n\n/** Return the element's explicit `seed` or derive a stable one from its props. */\nexport function deriveSeed(el: SeedableShape): number {\n  if (typeof el.seed === \"number\" && Number.isFinite(el.seed)) {\n    return el.seed | 0;\n  }\n  // Compose a key from the dimensions that visually define the shape. Other\n  // fields (colors, opacity) don't change the underlying rough.js geometry.\n  const key = `${el.type}|${el.x}|${el.y}|${el.w ?? \"\"}|${el.h ?? \"\"}|${el.label ?? \"\"}`;\n  return fnv1a32(key);\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/index.ts",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/index.ts",
+      "content": "export { Whiteboard, type WhiteboardData, type WhiteboardProps } from \"@/components/ui/whiteboard/whiteboard\";\nexport { validateScene, type ValidationError, type ValidationResult } from \"@/components/ui/whiteboard/validate\";\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/render/scene.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/render/scene.tsx",
+      "content": "import type { RoughGenerator } from \"roughjs/bin/generator\";\nimport type { WhiteboardElement, WhiteboardScene } from \"@/components/ui/whiteboard/schema\";\nimport { deriveSeed } from \"@/components/ui/whiteboard/seed\";\nimport { renderFreedraw } from \"@/components/ui/whiteboard/render/freedraw\";\nimport { renderArrow, renderLine } from \"@/components/ui/whiteboard/render/line\";\nimport { renderDiamond, renderEllipse, renderRect } from \"@/components/ui/whiteboard/render/shape\";\nimport { renderText } from \"@/components/ui/whiteboard/render/text\";\n\nfunction elementWithSeed<T extends WhiteboardElement>(el: T): T {\n  if (typeof el.seed === \"number\") return el;\n  return { ...el, seed: deriveSeed(el) } as T;\n}\n\nfunction renderElement(el: WhiteboardElement, gen: RoughGenerator): React.ReactNode {\n  switch (el.type) {\n    case \"rect\":\n      return renderRect(gen, elementWithSeed(el));\n    case \"ellipse\":\n      return renderEllipse(gen, elementWithSeed(el));\n    case \"diamond\":\n      return renderDiamond(gen, elementWithSeed(el));\n    case \"line\":\n      return renderLine(gen, elementWithSeed(el));\n    case \"arrow\":\n      return renderArrow(gen, elementWithSeed(el));\n    case \"text\":\n      return renderText(elementWithSeed(el));\n    case \"freedraw\":\n      return renderFreedraw(elementWithSeed(el));\n  }\n}\n\nexport function renderScene(scene: WhiteboardScene, gen: RoughGenerator): React.ReactNode {\n  return (\n    <>\n      {scene.elements.map((el, i) => (\n        <g\n          key={el.id ?? `__idx-${i}`}\n          data-element-id={el.id ?? String(i)}\n          data-element-type={el.type}\n        >\n          {renderElement(el, gen)}\n        </g>\n      ))}\n    </>\n  );\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/render/shape.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/render/shape.tsx",
+      "content": "import type { RoughGenerator } from \"roughjs/bin/generator\";\nimport type { DiamondElement, EllipseElement, RectElement } from \"@/components/ui/whiteboard/schema\";\nimport { toRoughPaths } from \"@/components/ui/whiteboard/render/rough-paths\";\nimport { buildOptions, strokeDashArray } from \"@/components/ui/whiteboard/render/style\";\n\ninterface LabelProps {\n  cx: number;\n  cy: number;\n  label: string;\n  stroke?: string;\n}\n\nfunction Label({ cx, cy, label, stroke }: LabelProps) {\n  return (\n    <text\n      x={cx}\n      y={cy}\n      textAnchor=\"middle\"\n      dominantBaseline=\"central\"\n      fontSize={16}\n      fontFamily=\"ui-sans-serif, system-ui, sans-serif\"\n      fill={stroke ?? \"currentColor\"}\n      style={{ pointerEvents: \"none\" }}\n    >\n      {label}\n    </text>\n  );\n}\n\nfunction pathsToReactNodes(\n  paths: ReturnType<typeof toRoughPaths>,\n  keyPrefix: string,\n  outlineStroke: string,\n  dashArray?: string,\n): React.ReactNode[] {\n  return paths.map((p, i) => {\n    // Apply stroke-dasharray only to paths whose stroke matches the outline\n    // color — this avoids dashing hachure/cross-hatch fill lines (which are\n    // stroked in the fill color, not the outline color) when a shape mixes\n    // fillStyle with strokeStyle.\n    const isOutline = p.stroke === outlineStroke;\n    return (\n      <path\n        // biome-ignore lint/suspicious/noArrayIndexKey: rough.js path order is stable for a given (geometry, seed) tuple — index is the most precise key.\n        key={`${keyPrefix}-${i}`}\n        d={p.d}\n        stroke={p.stroke}\n        strokeWidth={p.strokeWidth}\n        fill={p.fill ?? \"none\"}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeDasharray={isOutline ? dashArray : undefined}\n      />\n    );\n  });\n}\n\nexport function renderRect(gen: RoughGenerator, el: RectElement): React.ReactNode {\n  const opts = buildOptions(el, el.seed ?? 0);\n  const drawable = gen.rectangle(el.x, el.y, el.w, el.h, opts);\n  const paths = toRoughPaths(gen, drawable);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {pathsToReactNodes(paths, \"rect\", opts.stroke as string, dash)}\n      {el.label ? (\n        <Label cx={el.x + el.w / 2} cy={el.y + el.h / 2} label={el.label} stroke={el.stroke} />\n      ) : null}\n    </g>\n  );\n}\n\nexport function renderEllipse(gen: RoughGenerator, el: EllipseElement): React.ReactNode {\n  const opts = buildOptions(el, el.seed ?? 0);\n  // rough.js ellipse takes center + width + height.\n  const drawable = gen.ellipse(el.x + el.w / 2, el.y + el.h / 2, el.w, el.h, opts);\n  const paths = toRoughPaths(gen, drawable);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {pathsToReactNodes(paths, \"ellipse\", opts.stroke as string, dash)}\n      {el.label ? (\n        <Label cx={el.x + el.w / 2} cy={el.y + el.h / 2} label={el.label} stroke={el.stroke} />\n      ) : null}\n    </g>\n  );\n}\n\nexport function renderDiamond(gen: RoughGenerator, el: DiamondElement): React.ReactNode {\n  const opts = buildOptions(el, el.seed ?? 0);\n  const cx = el.x + el.w / 2;\n  const cy = el.y + el.h / 2;\n  const points: [number, number][] = [\n    [cx, el.y], // top\n    [el.x + el.w, cy], // right\n    [cx, el.y + el.h], // bottom\n    [el.x, cy], // left\n  ];\n  const drawable = gen.polygon(points, opts);\n  const paths = toRoughPaths(gen, drawable);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {pathsToReactNodes(paths, \"diamond\", opts.stroke as string, dash)}\n      {el.label ? <Label cx={cx} cy={cy} label={el.label} stroke={el.stroke} /> : null}\n    </g>\n  );\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/render/line.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/render/line.tsx",
+      "content": "import type { RoughGenerator } from \"roughjs/bin/generator\";\nimport type { ArrowElement, LineElement } from \"@/components/ui/whiteboard/schema\";\nimport { toRoughPaths } from \"@/components/ui/whiteboard/render/rough-paths\";\nimport { buildOptions, strokeDashArray } from \"@/components/ui/whiteboard/render/style\";\n\nconst HEAD_BASE_PX = 12;\nconst HEAD_ANGLE_RAD = Math.PI / 7; // ~25°\n\ninterface HeadGeom {\n  apexX: number;\n  apexY: number;\n  leftX: number;\n  leftY: number;\n  rightX: number;\n  rightY: number;\n}\n\nfunction arrowHeadGeometry(\n  fromX: number,\n  fromY: number,\n  toX: number,\n  toY: number,\n  strokeWidth: number,\n): HeadGeom | null {\n  const dx = toX - fromX;\n  const dy = toY - fromY;\n  const dist = Math.sqrt(dx * dx + dy * dy);\n  if (dist === 0) return null;\n  const angle = Math.atan2(dy, dx);\n  // EC-7: clamp head length so it never exceeds 40% of the segment.\n  const headLen = Math.min(HEAD_BASE_PX + strokeWidth * 2, dist * 0.4);\n  const leftX = toX - headLen * Math.cos(angle - HEAD_ANGLE_RAD);\n  const leftY = toY - headLen * Math.sin(angle - HEAD_ANGLE_RAD);\n  const rightX = toX - headLen * Math.cos(angle + HEAD_ANGLE_RAD);\n  const rightY = toY - headLen * Math.sin(angle + HEAD_ANGLE_RAD);\n  return { apexX: toX, apexY: toY, leftX, leftY, rightX, rightY };\n}\n\nfunction lineBody(\n  gen: RoughGenerator,\n  el: LineElement | ArrowElement,\n  seed: number,\n): React.ReactNode[] {\n  const opts = buildOptions(el, seed);\n  const drawable = gen.line(el.x, el.y, el.to[0], el.to[1], opts);\n  const dash = strokeDashArray(el.strokeStyle, el.strokeWidth ?? 1.5);\n  return toRoughPaths(gen, drawable).map((p, i) => (\n    <path\n      // biome-ignore lint/suspicious/noArrayIndexKey: stable rough.js path order\n      key={`body-${i}`}\n      d={p.d}\n      stroke={p.stroke}\n      strokeWidth={p.strokeWidth}\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeDasharray={dash}\n    />\n  ));\n}\n\nfunction arrowHead(\n  gen: RoughGenerator,\n  fromX: number,\n  fromY: number,\n  toX: number,\n  toY: number,\n  seed: number,\n  el: ArrowElement,\n  side: \"start\" | \"end\",\n): React.ReactNode[] {\n  const geom = arrowHeadGeometry(fromX, fromY, toX, toY, el.strokeWidth ?? 1.5);\n  if (!geom) return [];\n  const opts = buildOptions(el, seed);\n  // Two short rough-drawn segments forming the V.\n  const leftDrawable = gen.line(geom.apexX, geom.apexY, geom.leftX, geom.leftY, opts);\n  const rightDrawable = gen.line(geom.apexX, geom.apexY, geom.rightX, geom.rightY, opts);\n  const leftPaths = toRoughPaths(gen, leftDrawable);\n  const rightPaths = toRoughPaths(gen, rightDrawable);\n  const nodes: React.ReactNode[] = [];\n  for (const [i, p] of leftPaths.entries()) {\n    nodes.push(\n      <path\n        key={`${side}-l-${i}`}\n        d={p.d}\n        stroke={p.stroke}\n        strokeWidth={p.strokeWidth}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        data-line-part=\"arrowhead\"\n      />,\n    );\n  }\n  for (const [i, p] of rightPaths.entries()) {\n    nodes.push(\n      <path\n        key={`${side}-r-${i}`}\n        d={p.d}\n        stroke={p.stroke}\n        strokeWidth={p.strokeWidth}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        data-line-part=\"arrowhead\"\n      />,\n    );\n  }\n  return nodes;\n}\n\nexport function renderLine(gen: RoughGenerator, el: LineElement): React.ReactNode {\n  return <g opacity={el.opacity ?? 1}>{lineBody(gen, el, el.seed ?? 0)}</g>;\n}\n\nexport function renderArrow(gen: RoughGenerator, el: ArrowElement): React.ReactNode {\n  const seed = el.seed ?? 0;\n  const nodes: React.ReactNode[] = [...lineBody(gen, el, seed)];\n  if (el.headEnd !== false) {\n    nodes.push(...arrowHead(gen, el.x, el.y, el.to[0], el.to[1], seed + 1, el, \"end\"));\n  }\n  if (el.headStart) {\n    nodes.push(...arrowHead(gen, el.to[0], el.to[1], el.x, el.y, seed + 2, el, \"start\"));\n  }\n  let label: React.ReactNode = null;\n  if (el.label) {\n    const midX = (el.x + el.to[0]) / 2;\n    const midY = (el.y + el.to[1]) / 2;\n    // Offset perpendicular to the line so label doesn't sit on the stroke.\n    const dx = el.to[0] - el.x;\n    const dy = el.to[1] - el.y;\n    const dist = Math.sqrt(dx * dx + dy * dy) || 1;\n    const nx = -dy / dist;\n    const ny = dx / dist;\n    const offset = 12;\n    label = (\n      <text\n        x={midX + nx * offset}\n        y={midY + ny * offset}\n        textAnchor=\"middle\"\n        dominantBaseline=\"central\"\n        fontSize={14}\n        fontFamily=\"ui-sans-serif, system-ui, sans-serif\"\n        fill={el.stroke ?? \"currentColor\"}\n        style={{ pointerEvents: \"none\" }}\n      >\n        {el.label}\n      </text>\n    );\n  }\n  return (\n    <g opacity={el.opacity ?? 1}>\n      {nodes}\n      {label}\n    </g>\n  );\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/render/freedraw.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/render/freedraw.tsx",
+      "content": "import { getStroke } from \"perfect-freehand\";\nimport type { FreedrawElement } from \"@/components/ui/whiteboard/schema\";\n\nconst DEFAULT_STROKE_OPTIONS = {\n  size: 8,\n  thinning: 0.5,\n  smoothing: 0.5,\n  streamline: 0.5,\n};\n\nfunction fmt(n: number | undefined): string {\n  return typeof n === \"number\" && Number.isFinite(n) ? n.toFixed(2) : \"0\";\n}\n\nfunction svgPathFromStroke(points: number[][]): string {\n  if (points.length === 0) return \"\";\n  const first = points[0] ?? [];\n  let d = `M ${fmt(first[0])} ${fmt(first[1])}`;\n  for (let i = 1; i < points.length; i++) {\n    const p = points[i] ?? [];\n    d += ` L ${fmt(p[0])} ${fmt(p[1])}`;\n  }\n  d += \" Z\";\n  return d;\n}\n\nexport function renderFreedraw(el: FreedrawElement): React.ReactNode {\n  const size = (el.strokeWidth ?? 1.5) * 5;\n  const inputPoints = el.points.map(([x, y, pressure]) => {\n    const tx = el.x + x;\n    const ty = el.y + y;\n    return pressure === undefined ? [tx, ty] : [tx, ty, pressure];\n  });\n  const stroke = getStroke(inputPoints, {\n    ...DEFAULT_STROKE_OPTIONS,\n    size,\n  });\n  const d = svgPathFromStroke(stroke as number[][]);\n  return (\n    <g opacity={el.opacity ?? 1}>\n      <path d={d} fill={el.stroke ?? \"currentColor\"} stroke=\"none\" />\n    </g>\n  );\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/render/text.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/render/text.tsx",
+      "content": "import type { TextElement } from \"@/components/ui/whiteboard/schema\";\n\nconst FONT_STACKS: Record<NonNullable<TextElement[\"fontFamily\"]>, string> = {\n  sans: \"ui-sans-serif, system-ui, sans-serif\",\n  serif: \"ui-serif, Georgia, serif\",\n  mono: \"ui-monospace, SFMono-Regular, Menlo, monospace\",\n  hand: '\"Virgil\", \"Caveat\", \"Comic Sans MS\", cursive',\n};\n\nfunction textAnchor(align: TextElement[\"align\"]): \"start\" | \"middle\" | \"end\" {\n  if (align === \"center\") return \"middle\";\n  if (align === \"right\") return \"end\";\n  return \"start\";\n}\n\nexport function renderText(el: TextElement): React.ReactNode {\n  const fontSize = el.fontSize ?? 18;\n  const fontFamily = FONT_STACKS[el.fontFamily ?? \"hand\"];\n  const anchor = textAnchor(el.align);\n  const lines = el.text.split(\"\\n\");\n  // dy: first tspan at 0, subsequent at fontSize * 1.2 line-height.\n  return (\n    <g opacity={el.opacity ?? 1}>\n      <text\n        x={el.x}\n        y={el.y}\n        textAnchor={anchor}\n        dominantBaseline=\"hanging\"\n        fontSize={fontSize}\n        fontFamily={fontFamily}\n        fill={el.stroke ?? \"currentColor\"}\n      >\n        {lines.map((line, i) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: text is split deterministically on '\\n' so the line index is the most stable key.\n          <tspan key={i} x={el.x} dy={i === 0 ? 0 : fontSize * 1.2}>\n            {line}\n          </tspan>\n        ))}\n      </text>\n    </g>\n  );\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/render/rough-paths.ts",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/render/rough-paths.ts",
+      "content": "/**\n * Thin adapter over `roughjs` — converts a `Drawable` into the array of\n * `<path>` descriptors we render in SVG. The actual `rough.generator()`\n * instance is created once per scene and reused across elements.\n */\nimport type { Drawable, Options } from \"roughjs/bin/core\";\nimport type { RoughGenerator } from \"roughjs/bin/generator\";\n\nexport interface RoughPath {\n  d: string;\n  stroke: string;\n  strokeWidth: number;\n  fill?: string;\n}\n\nexport type RoughOptions = Options;\n\n/** Convert a rough.js Drawable into renderable SVG path descriptors. */\nexport function toRoughPaths(generator: RoughGenerator, drawable: Drawable): RoughPath[] {\n  const paths = generator.toPaths(drawable);\n  return paths.map((p) => ({\n    d: p.d,\n    stroke: p.stroke,\n    strokeWidth: p.strokeWidth,\n    fill: p.fill,\n  }));\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/render/style.ts",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/render/style.ts",
+      "content": "/**\n * Maps a `WhiteboardElement` style props onto rough.js `Options`.\n */\nimport type { Options } from \"roughjs/bin/core\";\n\ninterface StyleSource {\n  stroke?: string;\n  strokeWidth?: number;\n  strokeStyle?: \"solid\" | \"dashed\" | \"dotted\";\n  fill?: string;\n  fillStyle?: \"hachure\" | \"solid\" | \"cross-hatch\" | \"zigzag\";\n  opacity?: number;\n  roughness?: number;\n}\n\nconst DEFAULT_STROKE = \"currentColor\";\n\nexport function buildOptions(src: StyleSource, seed: number): Options {\n  const o: Options = {\n    seed,\n    stroke: src.stroke ?? DEFAULT_STROKE,\n    strokeWidth: src.strokeWidth ?? 1.5,\n    roughness: src.roughness ?? 1.2,\n  };\n  if (src.strokeStyle === \"dashed\") o.strokeLineDash = [10, 6];\n  else if (src.strokeStyle === \"dotted\") o.strokeLineDash = [2, 4];\n  if (src.fill) o.fill = src.fill;\n  if (src.fillStyle) o.fillStyle = src.fillStyle;\n  return o;\n}\n\n/**\n * SVG `stroke-dasharray` value for a logical strokeStyle. rough.js's\n * `RoughGenerator.toPaths()` does NOT propagate `strokeLineDash` into the\n * returned `PathInfo` — only the canvas / direct-SVG backends apply it. We\n * must set the attribute ourselves on the rendered `<path>`. Returns\n * `undefined` for `solid` and any unknown value.\n */\nexport function strokeDashArray(\n  strokeStyle: StyleSource[\"strokeStyle\"],\n  strokeWidth: number,\n): string | undefined {\n  if (strokeStyle === \"dashed\") {\n    const dash = Math.max(8, strokeWidth * 6);\n    const gap = Math.max(5, strokeWidth * 4);\n    return `${dash} ${gap}`;\n  }\n  if (strokeStyle === \"dotted\") {\n    // 1×strokeWidth dot, ~2×strokeWidth gap. Round end caps make these look\n    // like dots instead of squares.\n    return `${strokeWidth} ${strokeWidth * 2.5}`;\n  }\n  return undefined;\n}\n\nexport { DEFAULT_STROKE };\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/viewport/use-pointer-pan.ts",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/viewport/use-pointer-pan.ts",
+      "content": "import { useCallback, useEffect, useRef } from \"react\";\nimport type { ViewportControls } from \"@/components/ui/whiteboard/viewport/use-viewport\";\n\ninterface DragState {\n  pointerId: number;\n  lastX: number;\n  lastY: number;\n}\n\n/** Attaches pan + zoom listeners to an SVG element. */\nexport function usePointerPan(\n  ref: React.RefObject<SVGSVGElement | null>,\n  viewport: ViewportControls,\n  size: { width: number; height: number },\n): {\n  onPointerDown: (e: React.PointerEvent<SVGSVGElement>) => void;\n  onPointerMove: (e: React.PointerEvent<SVGSVGElement>) => void;\n  onPointerUp: (e: React.PointerEvent<SVGSVGElement>) => void;\n  onPointerCancel: (e: React.PointerEvent<SVGSVGElement>) => void;\n} {\n  const dragRef = useRef<DragState | null>(null);\n  const spaceHeldRef = useRef(false);\n\n  // EC-2: wheel events on React's JSX onWheel are passive — `preventDefault`\n  // does nothing, which causes the page to scroll while the user tries to\n  // zoom. We must attach the wheel handler imperatively with `{passive:false}`.\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const handler = (e: WheelEvent) => {\n      e.preventDefault();\n      const rect = el.getBoundingClientRect();\n      const localX = e.clientX - rect.left;\n      const localY = e.clientY - rect.top;\n      // Map screen-px → viewBox coords by ratio of rect to size.\n      const scaleX = size.width / rect.width;\n      const scaleY = size.height / rect.height;\n      viewport.zoomAt(localX * scaleX, localY * scaleY, -e.deltaY * 0.001, size);\n    };\n    el.addEventListener(\"wheel\", handler, { passive: false });\n    return () => el.removeEventListener(\"wheel\", handler);\n  }, [ref, viewport, size]);\n\n  // Track Space key for pan-with-any-button (Excalidraw \"hand\" mode).\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.code === \"Space\") spaceHeldRef.current = true;\n    };\n    const up = (e: KeyboardEvent) => {\n      if (e.code === \"Space\") spaceHeldRef.current = false;\n    };\n    window.addEventListener(\"keydown\", down);\n    window.addEventListener(\"keyup\", up);\n    return () => {\n      window.removeEventListener(\"keydown\", down);\n      window.removeEventListener(\"keyup\", up);\n    };\n  }, []);\n\n  const onPointerDown = useCallback((e: React.PointerEvent<SVGSVGElement>) => {\n    // EC-10: only start drag when the down event is on our SVG, not on a\n    // child rendered via portal/etc. event.currentTarget guarantees this.\n    if (e.target instanceof Element && !e.currentTarget.contains(e.target)) return;\n    // Left button (0) or middle (1) or Space-held pan.\n    const isMouseButton = e.button === 0 || e.button === 1;\n    if (!isMouseButton && e.pointerType === \"mouse\") return;\n    if (e.pointerType === \"mouse\" && e.button !== 1 && !spaceHeldRef.current && e.button !== 0) {\n      return;\n    }\n    dragRef.current = { pointerId: e.pointerId, lastX: e.clientX, lastY: e.clientY };\n    e.currentTarget.setPointerCapture(e.pointerId);\n  }, []);\n\n  const onPointerMove = useCallback(\n    (e: React.PointerEvent<SVGSVGElement>) => {\n      const drag = dragRef.current;\n      if (!drag || drag.pointerId !== e.pointerId) return;\n      const dx = e.clientX - drag.lastX;\n      const dy = e.clientY - drag.lastY;\n      drag.lastX = e.clientX;\n      drag.lastY = e.clientY;\n      const el = ref.current;\n      if (!el) return;\n      const rect = el.getBoundingClientRect();\n      const scaleX = size.width / rect.width;\n      const scaleY = size.height / rect.height;\n      viewport.pan(dx * scaleX, dy * scaleY);\n    },\n    [ref, viewport, size],\n  );\n\n  const releaseDrag = useCallback((e: React.PointerEvent<SVGSVGElement>) => {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== e.pointerId) return;\n    try {\n      e.currentTarget.releasePointerCapture(e.pointerId);\n    } catch {\n      // Already released — ignore.\n    }\n    dragRef.current = null;\n  }, []);\n\n  return {\n    onPointerDown,\n    onPointerMove,\n    onPointerUp: releaseDrag,\n    onPointerCancel: releaseDrag,\n  };\n}\n"
+    },
+    {
+      "path": "components/primitives/whiteboard/viewport/use-viewport.ts",
+      "type": "registry:ui",
+      "target": "components/ui/whiteboard/viewport/use-viewport.ts",
+      "content": "/**\n * Viewport state and helpers — pan via (x, y) and zoom via a scalar.\n *\n * Coordinate system:\n *   - World space: where elements are defined (the JSON `x`, `y` etc.).\n *   - Screen space: the rendered SVG bounding box on the page.\n *   - viewBox: `${x} ${y} ${width/zoom} ${height/zoom}`. Increasing zoom\n *     SHRINKS the viewBox dimensions, magnifying the rendered content.\n *\n * `zoomAt(screenX, screenY, delta, viewportSize)` keeps the world point under\n * the cursor stable while zooming (see test for invariant).\n */\nimport { useCallback, useMemo, useState } from \"react\";\n\nexport const MIN_ZOOM = 0.1;\nexport const MAX_ZOOM = 8;\n\nexport interface ViewportState {\n  x: number;\n  y: number;\n  zoom: number;\n}\n\nexport interface ViewportSize {\n  width: number;\n  height: number;\n}\n\nexport interface ViewportBounds {\n  minX: number;\n  minY: number;\n  maxX: number;\n  maxY: number;\n}\n\nexport interface UseViewportOptions {\n  width: number;\n  height: number;\n  initialZoom?: number;\n  initialCenter?: [number, number];\n}\n\nexport interface ViewportControls {\n  state: ViewportState;\n  pan: (dx: number, dy: number) => void;\n  setZoom: (zoom: number) => void;\n  zoomAt: (screenX: number, screenY: number, delta: number, size: ViewportSize) => void;\n  reset: () => void;\n  fitTo: (bounds: ViewportBounds, size: ViewportSize) => void;\n  viewBox: (size: ViewportSize) => string;\n}\n\nfunction clampZoom(z: number): number {\n  if (!Number.isFinite(z)) return 1;\n  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z));\n}\n\nexport function useViewport(opts: UseViewportOptions): ViewportControls {\n  const initial: ViewportState = useMemo(() => {\n    const zoom = clampZoom(opts.initialZoom ?? 1);\n    if (opts.initialCenter) {\n      // Position viewBox so initialCenter sits at the visual center.\n      const [cx, cy] = opts.initialCenter;\n      return {\n        x: cx - opts.width / (2 * zoom),\n        y: cy - opts.height / (2 * zoom),\n        zoom,\n      };\n    }\n    return { x: 0, y: 0, zoom };\n  }, [opts.initialCenter, opts.initialZoom, opts.width, opts.height]);\n\n  const [state, setState] = useState<ViewportState>(initial);\n\n  const pan = useCallback((dx: number, dy: number) => {\n    setState((prev) => ({ ...prev, x: prev.x - dx / prev.zoom, y: prev.y - dy / prev.zoom }));\n  }, []);\n\n  const setZoom = useCallback((zoom: number) => {\n    setState((prev) => ({ ...prev, zoom: clampZoom(zoom) }));\n  }, []);\n\n  const zoomAt = useCallback(\n    (screenX: number, screenY: number, delta: number, _size: ViewportSize) => {\n      setState((prev) => {\n        const oldZoom = prev.zoom;\n        const newZoom = clampZoom(prev.zoom * Math.exp(delta));\n        if (newZoom === oldZoom) return prev;\n        // World coordinate currently under cursor.\n        const worldX = prev.x + screenX / oldZoom;\n        const worldY = prev.y + screenY / oldZoom;\n        // After zoom, we want the same screen point to map to the same world point.\n        // viewBox.x + (screenX / newZoom) === worldX  →  x = worldX - screenX/newZoom.\n        return {\n          x: worldX - screenX / newZoom,\n          y: worldY - screenY / newZoom,\n          zoom: newZoom,\n        };\n      });\n    },\n    [],\n  );\n\n  const reset = useCallback(() => setState(initial), [initial]);\n\n  const fitTo = useCallback((bounds: ViewportBounds, size: ViewportSize) => {\n    const bboxWidth = Math.max(1, bounds.maxX - bounds.minX);\n    const bboxHeight = Math.max(1, bounds.maxY - bounds.minY);\n    const zoomX = size.width / bboxWidth;\n    const zoomY = size.height / bboxHeight;\n    const zoom = clampZoom(Math.min(zoomX, zoomY));\n    const cx = (bounds.minX + bounds.maxX) / 2;\n    const cy = (bounds.minY + bounds.maxY) / 2;\n    setState({\n      x: cx - size.width / (2 * zoom),\n      y: cy - size.height / (2 * zoom),\n      zoom,\n    });\n  }, []);\n\n  const viewBox = useCallback(\n    (size: ViewportSize) =>\n      `${state.x} ${state.y} ${size.width / state.zoom} ${size.height / state.zoom}`,\n    [state],\n  );\n\n  return { state, pan, setZoom, zoomAt, reset, fitTo, viewBox };\n}\n"
+    }
+  ]
+}