@usetheo/ui 0.13.0 → 0.13.1

package/registry/r/agent-tool-renderer.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-tool-renderer",
+  "type": "registry:ui",
+  "title": "AgentToolRenderer",
+  "description": "Overridable tool-renderer registry for agent chat surfaces — dispatches a UIMessage tool part to a rich renderer (diff, terminal, code, created-files, data-table) by classification kind, falling back to the generic ToolCallPart for anything unmapped.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/chat-types.json",
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/code-block.json",
+    "https://usetheodev.github.io/theo-ui/r/data-table.json",
+    "https://usetheodev.github.io/theo-ui/r/created-files-card.json",
+    "https://usetheodev.github.io/theo-ui/r/diff-viewer.json",
+    "https://usetheodev.github.io/theo-ui/r/terminal-panel.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/agent-tool-renderer/agent-tool-renderer.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/agent-tool-renderer/agent-tool-renderer.tsx",
+      "content": "/**\n * `<AgentToolRenderer>` + the tool-renderer **registry** (M5-3).\n *\n * Dispatches a `ToolUIPart` to a rich renderer by classification kind\n * (`diff` / `terminal` / `code` / `created-files` / `data-table`), falling back\n * to `<ToolCallPart>` for anything unmapped. Mirrors the existing\n * `partRenderers` / `dataRenderers` override registries on `<ChatMessage>` — the\n * registry is prop-threaded, no React context (ADR D2).\n *\n * The default renderers are **defensive best-effort** (ADR D3): `code` and\n * `terminal` are generic over any string output; `diff` / `created-files` /\n * `data-table` render their rich primitive only when the output already matches\n * the structured shape, else they degrade to `<ToolCallPart>` (never throw on\n * `unknown`). Faithful sdk-tools `ToolUIPart`→props adapters are the M5-4 slice\n * (`@theokit/ui/sdk-tools-adapters`).\n */\nimport type { JSX, ReactNode } from \"react\";\nimport type { ToolUIPart } from \"@/types/chat\";\nimport { CreatedFilesCard } from \"@/components/ui/created-files-card\";\nimport { type DiffHunk, DiffViewer } from \"@/components/ui/diff-viewer\";\nimport { type TerminalLine, TerminalPanel } from \"@/components/ui/terminal-panel\";\nimport { CodeBlock } from \"@/components/ui/code-block\";\nimport { DataTable } from \"@/components/ui/data-table\";\nimport { ToolCallPart } from \"@/components/ui/agent-tool-renderer/tool-call-part\";\n\n/** The rich surfaces a tool invocation can be dispatched to. */\nexport type ToolRendererKind = \"diff\" | \"terminal\" | \"code\" | \"created-files\" | \"data-table\";\n\n/** A renderer for one tool invocation. Returns `ReactNode` (never throws). */\nexport type ToolRenderer = (part: ToolUIPart) => ReactNode;\n\n/** Registry of renderers keyed by classification kind. */\nexport type ToolRendererRegistry = Record<ToolRendererKind, ToolRenderer>;\n\n/** Maps a tool part to a kind, or `undefined` to fall back to `<ToolCallPart>`. */\nexport type ClassifyTool = (part: ToolUIPart) => ToolRendererKind | undefined;\n\n/* ─── classify ───────────────────────────────────────────────────────── */\n\nfunction deriveToolName(part: ToolUIPart): string {\n  if (part.toolName) return part.toolName;\n  if (part.type === \"dynamic-tool\") return \"dynamic-tool\";\n  return part.type.slice(\"tool-\".length);\n}\n\n// Substring heuristics over the tool name. Ordered: most specific first.\nconst KIND_HINTS: ReadonlyArray<[ToolRendererKind, readonly string[]]> = [\n  [\"diff\", [\"diff\", \"patch\"]],\n  [\"created-files\", [\"edit_file\", \"write_file\", \"create_file\", \"created_file\"]],\n  [\"terminal\", [\"shell\", \"bash\", \"exec\", \"run_\", \"command\", \"vitest\", \"pytest\"]],\n  [\"data-table\", [\"list_dir\", \"glob\", \"list_\", \"search\", \"grep\", \"find\"]],\n  [\"code\", [\"read_file\", \"cat_file\", \"code\", \"read\"]],\n];\n\n/**\n * Default classifier — a name-substring heuristic. Only affects the default;\n * fully overridable per call (ADR D1/D2). Never throws; unmapped → `undefined`.\n */\nexport function defaultClassifyTool(part: ToolUIPart): ToolRendererKind | undefined {\n  const name = deriveToolName(part).toLowerCase();\n  for (const [kind, hints] of KIND_HINTS) {\n    if (hints.some((h) => name.includes(h))) return kind;\n  }\n  return undefined;\n}\n\n/**\n * Resolve the renderer for a part: `classify` → registry lookup. Returns\n * `undefined` when the tool is unmapped (the `<ToolCallPart>` fallback signal).\n */\nexport function resolveToolRenderer(\n  registry: ToolRendererRegistry,\n  classify: ClassifyTool,\n  part: ToolUIPart,\n): ToolRenderer | undefined {\n  const kind = classify(part);\n  return kind ? registry[kind] : undefined;\n}\n\n/* ─── shape helpers (defensive) ──────────────────────────────────────── */\n\nfunction stringify(value: unknown): string {\n  if (value === undefined || value === null) return \"\";\n  if (typeof value === \"string\") return value;\n  try {\n    return JSON.stringify(value, null, 2);\n  } catch {\n    return String(value);\n  }\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction isStructuredDiff(\n  o: unknown,\n): o is { path: string; stats?: { added: number; removed: number }; hunks: DiffHunk[] } {\n  return isRecord(o) && typeof o.path === \"string\" && Array.isArray(o.hunks);\n}\n\nfunction isStructuredFiles(\n  o: unknown,\n): o is { title?: ReactNode; files: Array<{ id: string; name: string }> } {\n  return (\n    isRecord(o) &&\n    Array.isArray(o.files) &&\n    o.files.every((f) => isRecord(f) && typeof f.id === \"string\" && typeof f.name === \"string\")\n  );\n}\n\nfunction isObjectRows(o: unknown): o is Array<Record<string, unknown>> {\n  return Array.isArray(o) && o.length > 0 && o.every(isRecord);\n}\n\nfunction toTerminalLines(output: unknown): TerminalLine[] {\n  return stringify(output)\n    .split(/\\r?\\n/)\n    .map((content, i) => ({ id: `line-${i}`, kind: \"stdout\" as const, content }));\n}\n\nfunction renderDataTable(rows: Array<Record<string, unknown>>): JSX.Element {\n  const columns = Object.keys(rows[0] ?? {}).map((key) => ({\n    key,\n    label: key,\n    render: (row: Record<string, unknown>) => stringify(row[key]),\n  }));\n  return <DataTable data={rows} columns={columns} rowKey={(row) => stringify(row)} />;\n}\n\n/* ─── default registry ───────────────────────────────────────────────── */\n\nexport const defaultToolRegistry: ToolRendererRegistry = {\n  code: (part) => <CodeBlock code={stringify(part.output)} copyable />,\n  terminal: (part) => <TerminalPanel lines={toTerminalLines(part.output)} />,\n  diff: (part) =>\n    isStructuredDiff(part.output) ? (\n      <DiffViewer path={part.output.path} stats={part.output.stats} hunks={part.output.hunks} />\n    ) : (\n      <ToolCallPart part={part} />\n    ),\n  \"created-files\": (part) =>\n    isStructuredFiles(part.output) ? (\n      <CreatedFilesCard files={part.output.files} title={part.output.title} />\n    ) : (\n      <ToolCallPart part={part} />\n    ),\n  \"data-table\": (part) =>\n    isObjectRows(part.output) ? renderDataTable(part.output) : <ToolCallPart part={part} />,\n};\n\n/* ─── component ──────────────────────────────────────────────────────── */\n\nexport interface AgentToolRendererProps {\n  part: ToolUIPart;\n  /** Override the default registry (shallow-merge over `defaultToolRegistry`). */\n  toolRenderers?: ToolRendererRegistry;\n  /** Override the default classifier. */\n  classifyTool?: ClassifyTool;\n}\n\n/**\n * Render one `ToolUIPart` through the registry, falling back to `<ToolCallPart>`\n * when the tool is unmapped. Reusable outside `<ChatMessage>`.\n *\n * Rich renderers apply ONLY to the `output-available` state — they render\n * `part.output`. Every other state (`input-streaming` / `input-available` /\n * `approval-*` / `output-error` / `output-denied`) carries no output (and, for\n * errors, only `errorText`), so it routes to `<ToolCallPart>`, which renders the\n * state badge, the input, and the error. This prevents a classified-but-errored\n * tool (e.g. a `shell` that failed) from rendering an empty rich surface and\n * dropping the error message.\n */\nexport function AgentToolRenderer({\n  part,\n  toolRenderers = defaultToolRegistry,\n  classifyTool = defaultClassifyTool,\n}: AgentToolRendererProps): JSX.Element {\n  const renderer =\n    part.state === \"output-available\"\n      ? resolveToolRenderer(toolRenderers, classifyTool, part)\n      : undefined;\n  // `display: contents` wrapper — carries the data-slot (shadcn v4 convention)\n  // without introducing a layout box around the resolved renderer.\n  return (\n    <div data-slot=\"agent-tool-renderer\" className=\"contents\">\n      {renderer ? renderer(part) : <ToolCallPart part={part} />}\n    </div>\n  );\n}\n\nAgentToolRenderer.displayName = \"AgentToolRenderer\";\n"
+    },
+    {
+      "path": "components/composites/agent-tool-renderer/tool-call-part.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/agent-tool-renderer/tool-call-part.tsx",
+      "content": "/**\n * `<ToolCallPart>` — renders a `ToolUIPart` (static `tool-${name}` or\n * `dynamic-tool`) as an inline card with the tool name, the input args, the\n * resolved output / error, and the current invocation state.\n *\n * Uses our `<Card>` primitive (composite-layer dep is allowed).\n */\nimport { AlertCircleIcon, CheckCircleIcon, LoaderIcon, ShieldIcon, WrenchIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { ToolUIPart } from \"@/types/chat\";\n\nexport interface ToolCallPartProps {\n  part: ToolUIPart;\n}\n\nfunction deriveToolName(part: ToolUIPart): string {\n  if (part.toolName) return part.toolName;\n  if (part.type === \"dynamic-tool\") return \"dynamic-tool\";\n  // type is `tool-${name}` — strip the prefix\n  return part.type.slice(\"tool-\".length);\n}\n\nfunction stateBadge(state: ToolUIPart[\"state\"]): { icon: ReactNode; label: string; tone: string } {\n  switch (state) {\n    case \"input-streaming\":\n      return {\n        icon: <LoaderIcon className=\"size-3.5 animate-spin\" aria-hidden=\"true\" />,\n        label: \"Streaming input\",\n        tone: \"text-muted-foreground\",\n      };\n    case \"input-available\":\n      return {\n        icon: <WrenchIcon className=\"size-3.5\" aria-hidden=\"true\" />,\n        label: \"Ready to call\",\n        tone: \"text-primary\",\n      };\n    case \"approval-requested\":\n      return {\n        icon: <ShieldIcon className=\"size-3.5\" aria-hidden=\"true\" />,\n        label: \"Awaiting approval\",\n        tone: \"text-warning\",\n      };\n    case \"approval-responded\":\n      return {\n        icon: <ShieldIcon className=\"size-3.5\" aria-hidden=\"true\" />,\n        label: \"Approval responded\",\n        tone: \"text-primary\",\n      };\n    case \"output-available\":\n      return {\n        icon: <CheckCircleIcon className=\"size-3.5\" aria-hidden=\"true\" />,\n        label: \"Completed\",\n        tone: \"text-success\",\n      };\n    case \"output-error\":\n      return {\n        icon: <AlertCircleIcon className=\"size-3.5\" aria-hidden=\"true\" />,\n        label: \"Error\",\n        tone: \"text-destructive\",\n      };\n    case \"output-denied\":\n      return {\n        icon: <ShieldIcon className=\"size-3.5\" aria-hidden=\"true\" />,\n        label: \"Denied\",\n        tone: \"text-destructive\",\n      };\n    default:\n      return {\n        icon: <WrenchIcon className=\"size-3.5\" aria-hidden=\"true\" />,\n        label: \"Unknown\",\n        tone: \"text-muted-foreground\",\n      };\n  }\n}\n\nfunction safeStringify(value: unknown): string {\n  if (value === undefined) return \"\";\n  if (typeof value === \"string\") return value;\n  try {\n    return JSON.stringify(value, null, 2);\n  } catch {\n    return String(value);\n  }\n}\n\nexport function ToolCallPart({ part }: ToolCallPartProps): JSX.Element {\n  const toolName = deriveToolName(part);\n  const badge = stateBadge(part.state);\n  const inputStr = safeStringify(part.input);\n  const outputStr =\n    part.state === \"output-available\" ? safeStringify(part.output) : (part.errorText ?? \"\");\n\n  return (\n    <div\n      data-slot=\"tool-call-part\"\n      className={cn(\"my-3 overflow-hidden rounded-lg border border-border bg-card\", \"shadow-sm\")}\n      data-theo-tool-call={part.state}\n    >\n      <header className=\"flex items-center justify-between gap-3 border-border border-b bg-muted/30 px-3 py-1.5\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <WrenchIcon className=\"size-3.5 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"truncate font-mono text-foreground text-label\">{toolName}</span>\n        </div>\n        <span\n          className={cn(\n            \"inline-flex items-center gap-1 text-label-caps uppercase tracking-wider\",\n            badge.tone,\n          )}\n        >\n          {badge.icon}\n          <span>{badge.label}</span>\n        </span>\n      </header>\n\n      {inputStr ? (\n        <details className=\"border-border border-b\" open={part.state === \"input-streaming\"}>\n          <summary className=\"cursor-pointer px-3 py-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider hover:text-foreground\">\n            Input\n          </summary>\n          <pre className=\"overflow-x-auto bg-muted/20 px-3 py-2 text-code-sm\">\n            <code>{inputStr}</code>\n          </pre>\n        </details>\n      ) : null}\n\n      {outputStr ? (\n        <details open={part.state === \"output-error\" || part.state === \"output-available\"}>\n          <summary\n            className={cn(\n              \"cursor-pointer px-3 py-1.5 font-mono text-label-caps uppercase tracking-wider hover:text-foreground\",\n              part.state === \"output-error\" ? \"text-destructive\" : \"text-muted-foreground\",\n            )}\n          >\n            {part.state === \"output-error\" ? \"Error\" : \"Output\"}\n          </summary>\n          <pre\n            className={cn(\n              \"overflow-x-auto px-3 py-2 text-code-sm\",\n              part.state === \"output-error\" ? \"bg-destructive/5\" : \"bg-muted/20\",\n            )}\n          >\n            <code>{outputStr}</code>\n          </pre>\n        </details>\n      ) : null}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "components/composites/agent-tool-renderer/index.ts",
+      "type": "registry:ui",
+      "target": "components/ui/agent-tool-renderer/index.ts",
+      "content": "export {\n  AgentToolRenderer,\n  type AgentToolRendererProps,\n  type ClassifyTool,\n  defaultClassifyTool,\n  defaultToolRegistry,\n  resolveToolRenderer,\n  type ToolRenderer,\n  type ToolRendererKind,\n  type ToolRendererRegistry,\n} from \"@/components/ui/agent-tool-renderer/agent-tool-renderer\";\n"
+    }
+  ]
+}

package/registry/r/alert.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/alert/alert.tsx",
       "type": "registry:ui",
       "target": "components/ui/alert.tsx",
-      "content": "import { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Alert — persistent inline notice. Distinct from `Toast` (transient,\n * corner-positioned, multiple stackable) and `EmptyState` (centered card\n * for no-data affordances). Full-width-of-section banner that stays\n * visible until the user acts.\n *\n * `intent` drives icon + color tokens. `destructive` intent renders\n * `role=\"alert\"` for assertive screen-reader announcement; the other\n * three intents render `role=\"status\"` (polite). `onDismiss`, when\n * provided, renders a trailing `X` button. `action` slot accepts any\n * ReactNode (typically a `<Button>` or anchor).\n *\n * @example\n *   <Alert\n *     intent=\"warning\"\n *     title=\"Verify your email\"\n *     description=\"We sent a link to your email.\"\n *     action={<Button size=\"sm\" onClick={resend}>Resend</Button>}\n *   />\n */\nexport type AlertIntent = \"info\" | \"success\" | \"warning\" | \"destructive\";\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"role\"> {\n  intent?: AlertIntent;\n  title?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  onDismiss?: () => void;\n}\n\nconst INTENT: Record<\n  AlertIntent,\n  { icon: ElementType; border: string; bg: string; iconColor: string }\n> = {\n  info: {\n    icon: Info,\n    border: \"border-primary/30\",\n    bg: \"bg-primary/[0.04]\",\n    iconColor: \"text-primary\",\n  },\n  success: {\n    icon: CheckCircle2,\n    border: \"border-success/30\",\n    bg: \"bg-success/[0.04]\",\n    iconColor: \"text-success\",\n  },\n  warning: {\n    icon: TriangleAlert,\n    border: \"border-warning/30\",\n    bg: \"bg-warning/[0.04]\",\n    iconColor: \"text-warning\",\n  },\n  destructive: {\n    icon: AlertCircle,\n    border: \"border-destructive/30\",\n    bg: \"bg-destructive/[0.04]\",\n    iconColor: \"text-destructive\",\n  },\n};\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, intent = \"info\", title, description, action, onDismiss, ...props }, ref) => {\n    const config = INTENT[intent];\n    const Icon = config.icon;\n    const hasTitle = title !== undefined && title !== null;\n    const hasDescription = description !== undefined && description !== null;\n    const role = intent === \"destructive\" ? \"alert\" : \"status\";\n\n    return (\n      <div\n        ref={ref}\n        role={role}\n        className={cn(\n          \"rounded-lg border\",\n          config.border,\n          config.bg,\n          hasTitle && hasDescription ? \"p-4\" : \"p-3\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-start gap-3\">\n          <Icon aria-hidden=\"true\" className={cn(\"mt-0.5 size-4 shrink-0\", config.iconColor)} />\n          <div className=\"min-w-0 flex-1\">\n            {hasTitle ? (\n              <div className=\"font-medium font-sans text-body-sm text-foreground\">{title}</div>\n            ) : null}\n            {hasDescription ? (\n              <div\n                className={cn(\"font-sans text-body-sm text-muted-foreground\", hasTitle && \"mt-0.5\")}\n              >\n                {description}\n              </div>\n            ) : null}\n          </div>\n          {action !== undefined ? <div className=\"ml-auto shrink-0\">{action}</div> : null}\n          {onDismiss !== undefined ? (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              aria-label=\"Dismiss\"\n              className={cn(\n                \"shrink-0 rounded p-0.5 text-muted-foreground transition-colors\",\n                \"hover:text-foreground\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              )}\n            >\n              <X aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\nAlert.displayName = \"Alert\";\n\nexport { Alert };\n"
+      "content": "import { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Alert — persistent inline notice. Distinct from `Toast` (transient,\n * corner-positioned, multiple stackable) and `EmptyState` (centered card\n * for no-data affordances). Full-width-of-section banner that stays\n * visible until the user acts.\n *\n * `intent` drives icon + color tokens. `destructive` intent renders\n * `role=\"alert\"` for assertive screen-reader announcement; the other\n * three intents render `role=\"status\"` (polite). `onDismiss`, when\n * provided, renders a trailing `X` button. `action` slot accepts any\n * ReactNode (typically a `<Button>` or anchor).\n *\n * @example\n *   <Alert\n *     intent=\"warning\"\n *     title=\"Verify your email\"\n *     description=\"We sent a link to your email.\"\n *     action={<Button size=\"sm\" onClick={resend}>Resend</Button>}\n *   />\n */\nexport type AlertIntent = \"info\" | \"success\" | \"warning\" | \"destructive\";\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"role\"> {\n  intent?: AlertIntent;\n  title?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  onDismiss?: () => void;\n}\n\nconst INTENT: Record<\n  AlertIntent,\n  { icon: ElementType; border: string; bg: string; iconColor: string }\n> = {\n  info: {\n    icon: Info,\n    border: \"border-primary/30\",\n    bg: \"bg-primary/[0.04]\",\n    iconColor: \"text-primary\",\n  },\n  success: {\n    icon: CheckCircle2,\n    border: \"border-success/30\",\n    bg: \"bg-success/[0.04]\",\n    iconColor: \"text-success\",\n  },\n  warning: {\n    icon: TriangleAlert,\n    border: \"border-warning/30\",\n    bg: \"bg-warning/[0.04]\",\n    iconColor: \"text-warning\",\n  },\n  destructive: {\n    icon: AlertCircle,\n    border: \"border-destructive/30\",\n    bg: \"bg-destructive/[0.04]\",\n    iconColor: \"text-destructive\",\n  },\n};\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, intent = \"info\", title, description, action, onDismiss, ...props }, ref) => {\n    const config = INTENT[intent];\n    const Icon = config.icon;\n    const hasTitle = title !== undefined && title !== null;\n    const hasDescription = description !== undefined && description !== null;\n    const role = intent === \"destructive\" ? \"alert\" : \"status\";\n\n    return (\n      <div\n        data-slot=\"alert\"\n        ref={ref}\n        role={role}\n        className={cn(\n          \"rounded-lg border\",\n          config.border,\n          config.bg,\n          hasTitle && hasDescription ? \"p-4\" : \"p-3\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-start gap-3\">\n          <Icon aria-hidden=\"true\" className={cn(\"mt-0.5 size-4 shrink-0\", config.iconColor)} />\n          <div className=\"min-w-0 flex-1\">\n            {hasTitle ? (\n              <div className=\"font-medium font-sans text-body-sm text-foreground\">{title}</div>\n            ) : null}\n            {hasDescription ? (\n              <div\n                className={cn(\"font-sans text-body-sm text-muted-foreground\", hasTitle && \"mt-0.5\")}\n              >\n                {description}\n              </div>\n            ) : null}\n          </div>\n          {action !== undefined ? <div className=\"ml-auto shrink-0\">{action}</div> : null}\n          {onDismiss !== undefined ? (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              aria-label=\"Dismiss\"\n              className={cn(\n                \"shrink-0 rounded p-0.5 text-muted-foreground transition-colors\",\n                \"hover:text-foreground\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              )}\n            >\n              <X aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\nAlert.displayName = \"Alert\";\n\nexport { Alert };\n"
     }
   ]
 }

package/registry/r/approval-card.json

@@ -19,7 +19,7 @@
       "path": "components/composites/approval-card/approval-card.tsx",
       "type": "registry:block",
       "target": "components/blocks/approval-card.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { AlertTriangle, Lock, ShieldCheck } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport { Button } from \"@/components/ui/button\";\n\n/**\n * ApprovalCard — inline pause-and-ask card for an agent stream.\n *\n * Used when the agent wants to perform an action that requires the user's\n * consent (run a destructive command, use a new tool, edit outside the\n * sandbox, etc.). Renders as a bordered card inside the conversation stream,\n * pauses the visual flow, and exposes Deny / Approve / Always-allow actions.\n */\n\nconst cardVariants = cva(\n  \"grid w-full gap-3 rounded-xl border p-4 transition-colors duration-base ease-out-soft\",\n  {\n    variants: {\n      severity: {\n        info: \"border-info/40 bg-info/5\",\n        warning: \"border-warning/40 bg-warning/5\",\n        destructive: \"border-destructive/40 bg-destructive/5\",\n      },\n    },\n    defaultVariants: { severity: \"warning\" },\n  },\n);\n\nconst ICON_FOR_SEVERITY: Record<NonNullable<ApprovalSeverity>, IconComponent> = {\n  info: ShieldCheck,\n  warning: AlertTriangle,\n  destructive: Lock,\n};\n\nconst ICON_TONE: Record<NonNullable<ApprovalSeverity>, string> = {\n  info: \"text-info\",\n  warning: \"text-warning\",\n  destructive: \"text-destructive\",\n};\n\ntype ApprovalSeverity = NonNullable<VariantProps<typeof cardVariants>[\"severity\"]>;\n\ninterface ApprovalCardProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"title\">,\n    VariantProps<typeof cardVariants> {\n  /** Short headline (\"Run destructive command?\"). */\n  title: ReactNode;\n  /** What is being requested (command, file path, tool name…). Renders monospace. */\n  request: ReactNode;\n  /** Optional explanation line under the request. */\n  description?: ReactNode;\n  /** Optional expandable details (e.g. full command, file diff). */\n  details?: ReactNode;\n  /** Pressing the primary \"Approve\" button. */\n  onApprove?: () => void;\n  /** Pressing \"Deny\". */\n  onDeny?: () => void;\n  /** Pressing \"Always allow\" — optional tertiary action. */\n  onAlways?: () => void;\n  /** Customise the icon shown in the corner. */\n  icon?: IconComponent;\n}\n\nconst ApprovalCard = forwardRef<HTMLElement, ApprovalCardProps>(\n  (\n    {\n      className,\n      severity = \"warning\",\n      title,\n      request,\n      description,\n      details,\n      onApprove,\n      onDeny,\n      onAlways,\n      icon,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedSeverity: ApprovalSeverity = severity ?? \"warning\";\n    const Icon = icon ?? ICON_FOR_SEVERITY[resolvedSeverity];\n    return (\n      <section\n        ref={ref}\n        role=\"alertdialog\"\n        aria-label={typeof title === \"string\" ? title : \"Approval required\"}\n        className={cn(cardVariants({ severity: resolvedSeverity }), className)}\n        {...props}\n      >\n        <header className=\"flex items-start gap-3\">\n          <span\n            className={cn(\"mt-0.5 inline-flex shrink-0\", ICON_TONE[resolvedSeverity])}\n            aria-hidden=\"true\"\n          >\n            <Icon className=\"size-4\" />\n          </span>\n          <div className=\"grid min-w-0 flex-1 gap-1\">\n            <h4 className=\"font-display text-foreground text-title-md tracking-tight\">{title}</h4>\n            <code className=\"overflow-hidden break-words font-mono text-code-md text-muted-foreground\">\n              {request}\n            </code>\n            {description ? (\n              <p className=\"text-body-sm text-muted-foreground\">{description}</p>\n            ) : null}\n          </div>\n        </header>\n        {details ? (\n          <details className=\"rounded-md border border-border/40 bg-background/40 px-3 py-2 text-body-sm\">\n            <summary className=\"cursor-pointer select-none font-mono text-label text-muted-foreground\">\n              Show details\n            </summary>\n            <div className=\"mt-2 break-words\">{details}</div>\n          </details>\n        ) : null}\n        <footer className=\"flex flex-wrap items-center justify-end gap-2\">\n          {onAlways ? (\n            <Button size=\"sm\" variant=\"ghost\" onClick={onAlways}>\n              Always allow\n            </Button>\n          ) : null}\n          {onDeny ? (\n            <Button size=\"sm\" variant=\"secondary\" onClick={onDeny}>\n              Deny\n            </Button>\n          ) : null}\n          {onApprove ? (\n            <Button\n              size=\"sm\"\n              variant={resolvedSeverity === \"destructive\" ? \"destructive\" : \"primary\"}\n              onClick={onApprove}\n            >\n              Approve\n            </Button>\n          ) : null}\n        </footer>\n      </section>\n    );\n  },\n);\nApprovalCard.displayName = \"ApprovalCard\";\n\nexport { ApprovalCard, type ApprovalSeverity };\n"
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { AlertTriangle, Lock, ShieldCheck } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport { Button } from \"@/components/ui/button\";\n\n/**\n * ApprovalCard — inline pause-and-ask card for an agent stream.\n *\n * Used when the agent wants to perform an action that requires the user's\n * consent (run a destructive command, use a new tool, edit outside the\n * sandbox, etc.). Renders as a bordered card inside the conversation stream,\n * pauses the visual flow, and exposes Deny / Approve / Always-allow actions.\n */\n\nconst cardVariants = cva(\n  \"grid w-full gap-3 rounded-xl border p-4 transition-colors duration-base ease-out-soft\",\n  {\n    variants: {\n      severity: {\n        info: \"border-info/40 bg-info/5\",\n        warning: \"border-warning/40 bg-warning/5\",\n        destructive: \"border-destructive/40 bg-destructive/5\",\n      },\n    },\n    defaultVariants: { severity: \"warning\" },\n  },\n);\n\nconst ICON_FOR_SEVERITY: Record<NonNullable<ApprovalSeverity>, IconComponent> = {\n  info: ShieldCheck,\n  warning: AlertTriangle,\n  destructive: Lock,\n};\n\nconst ICON_TONE: Record<NonNullable<ApprovalSeverity>, string> = {\n  info: \"text-info\",\n  warning: \"text-warning\",\n  destructive: \"text-destructive\",\n};\n\ntype ApprovalSeverity = NonNullable<VariantProps<typeof cardVariants>[\"severity\"]>;\n\ninterface ApprovalCardProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"title\">,\n    VariantProps<typeof cardVariants> {\n  /** Short headline (\"Run destructive command?\"). */\n  title: ReactNode;\n  /** What is being requested (command, file path, tool name…). Renders monospace. */\n  request: ReactNode;\n  /** Optional explanation line under the request. */\n  description?: ReactNode;\n  /** Optional expandable details (e.g. full command, file diff). */\n  details?: ReactNode;\n  /** Pressing the primary \"Approve\" button. */\n  onApprove?: () => void;\n  /** Pressing \"Deny\". */\n  onDeny?: () => void;\n  /** Pressing \"Always allow\" — optional tertiary action. */\n  onAlways?: () => void;\n  /** Customise the icon shown in the corner. */\n  icon?: IconComponent;\n}\n\nconst ApprovalCard = forwardRef<HTMLElement, ApprovalCardProps>(\n  (\n    {\n      className,\n      severity = \"warning\",\n      title,\n      request,\n      description,\n      details,\n      onApprove,\n      onDeny,\n      onAlways,\n      icon,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedSeverity: ApprovalSeverity = severity ?? \"warning\";\n    const Icon = icon ?? ICON_FOR_SEVERITY[resolvedSeverity];\n    return (\n      <section\n        data-slot=\"approval-card\"\n        ref={ref}\n        role=\"alertdialog\"\n        aria-label={typeof title === \"string\" ? title : \"Approval required\"}\n        className={cn(cardVariants({ severity: resolvedSeverity }), className)}\n        {...props}\n      >\n        <header className=\"flex items-start gap-3\">\n          <span\n            className={cn(\"mt-0.5 inline-flex shrink-0\", ICON_TONE[resolvedSeverity])}\n            aria-hidden=\"true\"\n          >\n            <Icon className=\"size-4\" />\n          </span>\n          <div className=\"grid min-w-0 flex-1 gap-1\">\n            <h4 className=\"font-display text-foreground text-title-md tracking-tight\">{title}</h4>\n            <code className=\"overflow-hidden break-words font-mono text-code-md text-muted-foreground\">\n              {request}\n            </code>\n            {description ? (\n              <p className=\"text-body-sm text-muted-foreground\">{description}</p>\n            ) : null}\n          </div>\n        </header>\n        {details ? (\n          <details className=\"rounded-md border border-border/40 bg-background/40 px-3 py-2 text-body-sm\">\n            <summary className=\"cursor-pointer select-none font-mono text-label text-muted-foreground\">\n              Show details\n            </summary>\n            <div className=\"mt-2 break-words\">{details}</div>\n          </details>\n        ) : null}\n        <footer className=\"flex flex-wrap items-center justify-end gap-2\">\n          {onAlways ? (\n            <Button size=\"sm\" variant=\"ghost\" onClick={onAlways}>\n              Always allow\n            </Button>\n          ) : null}\n          {onDeny ? (\n            <Button size=\"sm\" variant=\"secondary\" onClick={onDeny}>\n              Deny\n            </Button>\n          ) : null}\n          {onApprove ? (\n            <Button\n              size=\"sm\"\n              variant={resolvedSeverity === \"destructive\" ? \"destructive\" : \"primary\"}\n              onClick={onApprove}\n            >\n              Approve\n            </Button>\n          ) : null}\n        </footer>\n      </section>\n    );\n  },\n);\nApprovalCard.displayName = \"ApprovalCard\";\n\nexport { ApprovalCard, type ApprovalSeverity };\n"
     }
   ]
 }

package/registry/r/artifact-preview.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/artifact-preview/artifact-preview.tsx",
       "type": "registry:ui",
       "target": "components/ui/artifact-preview.tsx",
-      "content": "import { Maximize2, RefreshCw, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ArtifactPreviewProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title: ReactNode;\n  /** Optional source/destination label (e.g. \"Google Drive\", \"Local · ~/reports\"). */\n  source?: ReactNode;\n  /**\n   * Tabs at the bottom of the artifact (e.g. \"Expense Report | Currency Summary\").\n   * Caller controls the active state externally.\n   */\n  tabs?: ReactNode;\n  /** Top toolbar actions. Defaults to refresh + maximize + close. */\n  toolbar?: ReactNode;\n  onMaximize?: () => void;\n  onRefresh?: () => void;\n  onClose?: () => void;\n}\n\n/**\n * ArtifactPreview — shell for previewing a generated artifact (XLSX, PDF, image…).\n *\n * Renders a toolbar + content slot + optional bottom tabs. The actual preview\n * (spreadsheet, PDF embed, image) is the caller's `children`, so this stays\n * dependency-free.\n */\nconst ArtifactPreview = forwardRef<HTMLElement, ArtifactPreviewProps>(\n  (\n    { className, title, source, tabs, toolbar, onMaximize, onRefresh, onClose, children, ...props },\n    ref,\n  ) => (\n    <section\n      ref={ref}\n      className={cn(\"flex h-full flex-col overflow-hidden rounded-xl border bg-card\", className)}\n      {...props}\n    >\n      <header className=\"flex items-center gap-3 border-border/40 border-b px-3 py-2\">\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"truncate font-medium text-body-sm text-foreground\">{title}</p>\n          {source ? (\n            <p className=\"truncate font-mono text-label text-muted-foreground\">{source}</p>\n          ) : null}\n        </div>\n        {toolbar ?? (\n          <div className=\"flex items-center gap-1\">\n            {onRefresh ? (\n              <ToolbarButton onClick={onRefresh} aria-label=\"Refresh\">\n                <RefreshCw className=\"size-3.5\" />\n              </ToolbarButton>\n            ) : null}\n            {onMaximize ? (\n              <ToolbarButton onClick={onMaximize} aria-label=\"Maximize\">\n                <Maximize2 className=\"size-3.5\" />\n              </ToolbarButton>\n            ) : null}\n            {onClose ? (\n              <ToolbarButton onClick={onClose} aria-label=\"Close preview\">\n                <X className=\"size-3.5\" />\n              </ToolbarButton>\n            ) : null}\n          </div>\n        )}\n      </header>\n      <div className=\"flex-1 overflow-auto\">{children}</div>\n      {tabs ? (\n        <footer className=\"flex items-center gap-1 border-border/40 border-t px-2 py-1\">\n          {tabs}\n        </footer>\n      ) : null}\n    </section>\n  ),\n);\nArtifactPreview.displayName = \"ArtifactPreview\";\n\nfunction ToolbarButton({\n  onClick,\n  children,\n  \"aria-label\": ariaLabel,\n}: {\n  onClick?: () => void;\n  children: ReactNode;\n  \"aria-label\": string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport { ArtifactPreview };\n"
+      "content": "import { Maximize2, RefreshCw, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ArtifactPreviewProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title: ReactNode;\n  /** Optional source/destination label (e.g. \"Google Drive\", \"Local · ~/reports\"). */\n  source?: ReactNode;\n  /**\n   * Tabs at the bottom of the artifact (e.g. \"Expense Report | Currency Summary\").\n   * Caller controls the active state externally.\n   */\n  tabs?: ReactNode;\n  /** Top toolbar actions. Defaults to refresh + maximize + close. */\n  toolbar?: ReactNode;\n  onMaximize?: () => void;\n  onRefresh?: () => void;\n  onClose?: () => void;\n}\n\n/**\n * ArtifactPreview — shell for previewing a generated artifact (XLSX, PDF, image…).\n *\n * Renders a toolbar + content slot + optional bottom tabs. The actual preview\n * (spreadsheet, PDF embed, image) is the caller's `children`, so this stays\n * dependency-free.\n */\nconst ArtifactPreview = forwardRef<HTMLElement, ArtifactPreviewProps>(\n  (\n    { className, title, source, tabs, toolbar, onMaximize, onRefresh, onClose, children, ...props },\n    ref,\n  ) => (\n    <section\n      data-slot=\"artifact-preview\"\n      ref={ref}\n      className={cn(\"flex h-full flex-col overflow-hidden rounded-xl border bg-card\", className)}\n      {...props}\n    >\n      <header className=\"flex items-center gap-3 border-border/40 border-b px-3 py-2\">\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"truncate font-medium text-body-sm text-foreground\">{title}</p>\n          {source ? (\n            <p className=\"truncate font-mono text-label text-muted-foreground\">{source}</p>\n          ) : null}\n        </div>\n        {toolbar ?? (\n          <div className=\"flex items-center gap-1\">\n            {onRefresh ? (\n              <ToolbarButton onClick={onRefresh} aria-label=\"Refresh\">\n                <RefreshCw className=\"size-3.5\" />\n              </ToolbarButton>\n            ) : null}\n            {onMaximize ? (\n              <ToolbarButton onClick={onMaximize} aria-label=\"Maximize\">\n                <Maximize2 className=\"size-3.5\" />\n              </ToolbarButton>\n            ) : null}\n            {onClose ? (\n              <ToolbarButton onClick={onClose} aria-label=\"Close preview\">\n                <X className=\"size-3.5\" />\n              </ToolbarButton>\n            ) : null}\n          </div>\n        )}\n      </header>\n      <div className=\"flex-1 overflow-auto\">{children}</div>\n      {tabs ? (\n        <footer className=\"flex items-center gap-1 border-border/40 border-t px-2 py-1\">\n          {tabs}\n        </footer>\n      ) : null}\n    </section>\n  ),\n);\nArtifactPreview.displayName = \"ArtifactPreview\";\n\nfunction ToolbarButton({\n  onClick,\n  children,\n  \"aria-label\": ariaLabel,\n}: {\n  onClick?: () => void;\n  children: ReactNode;\n  \"aria-label\": string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport { ArtifactPreview };\n"
     }
   ]
 }

package/registry/r/attachment-chip.json

@@ -18,7 +18,7 @@
       "path": "components/primitives/attachment-chip/attachment-chip.tsx",
       "type": "registry:ui",
       "target": "components/ui/attachment-chip.tsx",
-      "content": "import { File, FileCode, FileImage, FileSpreadsheet, FileText, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type { Attachment } from \"@/types/chat\";\n\nconst typeIcon: Record<string, IconComponent> = {\n  image: FileImage,\n  spreadsheet: FileSpreadsheet,\n  code: FileCode,\n  text: FileText,\n};\n\ninterface AttachmentChipProps extends HTMLAttributes<HTMLDivElement> {\n  attachment: Attachment;\n  onRemove?: (id: string) => void;\n}\n\n/**\n * AttachmentChip — file pill shown in chat composer or message attachments row.\n *\n * Visual: rounded chip with type-icon + name + size + optional remove button.\n * Truncates the name with `text-ellipsis`; full name available via title.\n */\nconst AttachmentChip = forwardRef<HTMLDivElement, AttachmentChipProps>(\n  ({ className, attachment, onRemove, ...props }, ref) => {\n    const Icon: IconComponent = (attachment.type ? typeIcon[attachment.type] : undefined) ?? File;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex max-w-[18rem] items-center gap-2 rounded-md border border-border/40 bg-muted/60 px-2 py-1\",\n          \"font-mono text-code-sm text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <Icon className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n        <span className=\"truncate text-foreground\" title={attachment.name}>\n          {attachment.name}\n        </span>\n        {attachment.size ? <span>· {attachment.size}</span> : null}\n        {onRemove ? (\n          <button\n            type=\"button\"\n            onClick={() => onRemove(attachment.id)}\n            aria-label={`Remove ${attachment.name}`}\n            className={cn(\n              \"ml-1 rounded-sm p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-destructive\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            <X className=\"size-3\" />\n          </button>\n        ) : null}\n      </div>\n    );\n  },\n);\nAttachmentChip.displayName = \"AttachmentChip\";\n\nexport { AttachmentChip };\n"
+      "content": "import { File, FileCode, FileImage, FileSpreadsheet, FileText, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type { Attachment } from \"@/types/chat\";\n\nconst typeIcon: Record<string, IconComponent> = {\n  image: FileImage,\n  spreadsheet: FileSpreadsheet,\n  code: FileCode,\n  text: FileText,\n};\n\ninterface AttachmentChipProps extends HTMLAttributes<HTMLDivElement> {\n  attachment: Attachment;\n  onRemove?: (id: string) => void;\n}\n\n/**\n * AttachmentChip — file pill shown in chat composer or message attachments row.\n *\n * Visual: rounded chip with type-icon + name + size + optional remove button.\n * Truncates the name with `text-ellipsis`; full name available via title.\n */\nconst AttachmentChip = forwardRef<HTMLDivElement, AttachmentChipProps>(\n  ({ className, attachment, onRemove, ...props }, ref) => {\n    const Icon: IconComponent = (attachment.type ? typeIcon[attachment.type] : undefined) ?? File;\n    return (\n      <div\n        data-slot=\"attachment-chip\"\n        ref={ref}\n        className={cn(\n          \"inline-flex max-w-[18rem] items-center gap-2 rounded-md border border-border/40 bg-muted/60 px-2 py-1\",\n          \"font-mono text-code-sm text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <Icon className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n        <span className=\"truncate text-foreground\" title={attachment.name}>\n          {attachment.name}\n        </span>\n        {attachment.size ? <span>· {attachment.size}</span> : null}\n        {onRemove ? (\n          <button\n            type=\"button\"\n            onClick={() => onRemove(attachment.id)}\n            aria-label={`Remove ${attachment.name}`}\n            className={cn(\n              \"ml-1 rounded-sm p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-destructive\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            <X className=\"size-3\" />\n          </button>\n        ) : null}\n      </div>\n    );\n  },\n);\nAttachmentChip.displayName = \"AttachmentChip\";\n\nexport { AttachmentChip };\n"
     }
   ]
 }

package/registry/r/audit-log-entry.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/audit-log-entry/audit-log-entry.tsx",
       "type": "registry:ui",
       "target": "components/ui/audit-log-entry.tsx",
-      "content": "import { Bot, ShieldAlert, User } 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 AuditActorKind = \"user\" | \"agent\" | \"system\";\n\nexport type AuditSeverity = \"info\" | \"warning\" | \"error\";\n\nexport interface AuditEntry {\n  id: string;\n  /** Who triggered the action. */\n  actor: { kind: AuditActorKind; name: string };\n  /** Verb / action label, e.g. \"wrote file\", \"ran command\". */\n  action: string;\n  /** Target of the action (file path, command, etc). */\n  target?: ReactNode;\n  /** ISO timestamp / friendly label. */\n  timestamp: string;\n  severity?: AuditSeverity;\n  /** Optional detail block (multi-line). */\n  detail?: ReactNode;\n}\n\ninterface AuditLogEntryProps extends HTMLAttributes<HTMLElement> {\n  entry: AuditEntry;\n}\n\nconst ACTOR_ICON: Record<AuditActorKind, IconComponent> = {\n  user: User,\n  agent: Bot,\n  system: ShieldAlert,\n};\n\nconst SEVERITY_CLASS: Record<AuditSeverity, string> = {\n  info: \"text-muted-foreground\",\n  warning: \"text-warning\",\n  error: \"text-destructive\",\n};\n\n/**\n * AuditLogEntry — one row in the agent audit log. Tells the user exactly\n * who did what and when. Severity colors the timestamp and target.\n */\nconst AuditLogEntry = forwardRef<HTMLElement, AuditLogEntryProps>(\n  ({ className, entry, ...props }, ref) => {\n    const Icon = ACTOR_ICON[entry.actor.kind];\n    const sev = entry.severity ?? \"info\";\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"grid grid-cols-[auto_1fr_auto] items-start gap-3 border-border/30 border-b px-3 py-2\",\n          \"last:border-b-0\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\n            \"mt-0.5 grid size-7 place-items-center rounded-md bg-muted text-muted-foreground\",\n            sev === \"warning\" && \"text-warning\",\n            sev === \"error\" && \"text-destructive\",\n          )}\n          aria-hidden=\"true\"\n        >\n          <Icon className=\"size-3.5\" />\n        </span>\n        <div className=\"min-w-0\">\n          <p className=\"flex flex-wrap items-baseline gap-2 text-body-sm\">\n            <span className=\"font-medium font-mono text-code-sm text-foreground\">\n              {entry.actor.name}\n            </span>\n            <span className={cn(\"font-mono text-code-sm\", SEVERITY_CLASS[sev])}>\n              {entry.action}\n            </span>\n            {entry.target ? (\n              <span className=\"truncate font-mono text-code-sm text-foreground/80\">\n                {entry.target}\n              </span>\n            ) : null}\n          </p>\n          {entry.detail ? (\n            <div className=\"mt-1 rounded-md bg-muted/40 px-2.5 py-1.5 font-mono text-code-sm text-muted-foreground\">\n              {entry.detail}\n            </div>\n          ) : null}\n        </div>\n        <span className=\"shrink-0 font-mono text-label text-muted-foreground tabular-nums\">\n          {entry.timestamp}\n        </span>\n      </article>\n    );\n  },\n);\nAuditLogEntry.displayName = \"AuditLogEntry\";\n\nexport { AuditLogEntry };\n"
+      "content": "import { Bot, ShieldAlert, User } 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 AuditActorKind = \"user\" | \"agent\" | \"system\";\n\nexport type AuditSeverity = \"info\" | \"warning\" | \"error\";\n\nexport interface AuditEntry {\n  id: string;\n  /** Who triggered the action. */\n  actor: { kind: AuditActorKind; name: string };\n  /** Verb / action label, e.g. \"wrote file\", \"ran command\". */\n  action: string;\n  /** Target of the action (file path, command, etc). */\n  target?: ReactNode;\n  /** ISO timestamp / friendly label. */\n  timestamp: string;\n  severity?: AuditSeverity;\n  /** Optional detail block (multi-line). */\n  detail?: ReactNode;\n}\n\ninterface AuditLogEntryProps extends HTMLAttributes<HTMLElement> {\n  entry: AuditEntry;\n}\n\nconst ACTOR_ICON: Record<AuditActorKind, IconComponent> = {\n  user: User,\n  agent: Bot,\n  system: ShieldAlert,\n};\n\nconst SEVERITY_CLASS: Record<AuditSeverity, string> = {\n  info: \"text-muted-foreground\",\n  warning: \"text-warning\",\n  error: \"text-destructive\",\n};\n\n/**\n * AuditLogEntry — one row in the agent audit log. Tells the user exactly\n * who did what and when. Severity colors the timestamp and target.\n */\nconst AuditLogEntry = forwardRef<HTMLElement, AuditLogEntryProps>(\n  ({ className, entry, ...props }, ref) => {\n    const Icon = ACTOR_ICON[entry.actor.kind];\n    const sev = entry.severity ?? \"info\";\n    return (\n      <article\n        data-slot=\"audit-log-entry\"\n        ref={ref}\n        className={cn(\n          \"grid grid-cols-[auto_1fr_auto] items-start gap-3 border-border/30 border-b px-3 py-2\",\n          \"last:border-b-0\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\n            \"mt-0.5 grid size-7 place-items-center rounded-md bg-muted text-muted-foreground\",\n            sev === \"warning\" && \"text-warning\",\n            sev === \"error\" && \"text-destructive\",\n          )}\n          aria-hidden=\"true\"\n        >\n          <Icon className=\"size-3.5\" />\n        </span>\n        <div className=\"min-w-0\">\n          <p className=\"flex flex-wrap items-baseline gap-2 text-body-sm\">\n            <span className=\"font-medium font-mono text-code-sm text-foreground\">\n              {entry.actor.name}\n            </span>\n            <span className={cn(\"font-mono text-code-sm\", SEVERITY_CLASS[sev])}>\n              {entry.action}\n            </span>\n            {entry.target ? (\n              <span className=\"truncate font-mono text-code-sm text-foreground/80\">\n                {entry.target}\n              </span>\n            ) : null}\n          </p>\n          {entry.detail ? (\n            <div className=\"mt-1 rounded-md bg-muted/40 px-2.5 py-1.5 font-mono text-code-sm text-muted-foreground\">\n              {entry.detail}\n            </div>\n          ) : null}\n        </div>\n        <span className=\"shrink-0 font-mono text-label text-muted-foreground tabular-nums\">\n          {entry.timestamp}\n        </span>\n      </article>\n    );\n  },\n);\nAuditLogEntry.displayName = \"AuditLogEntry\";\n\nexport { AuditLogEntry };\n"
     }
   ]
 }

package/registry/r/auto-compact-notice.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/auto-compact-notice/auto-compact-notice.tsx",
       "type": "registry:ui",
       "target": "components/ui/auto-compact-notice.tsx",
-      "content": "import { Sparkles, X } 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\ninterface AutoCompactNoticeProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Optional custom title. */\n  title?: ReactNode;\n  /**\n   * How many turns until the next auto-compaction. Used to render an inline\n   * countdown chip.\n   */\n  turnsRemaining?: number;\n  /** Approx tokens that will be removed/summarized. */\n  tokensToCompact?: number;\n  onCompactNow?: () => void;\n  onDismiss?: () => void;\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 * AutoCompactNotice — inline banner warning the user that the agent is\n * about to summarize / compact older context. Lets them act early (compact\n * now) or dismiss.\n *\n * Critical for transparency: a user must not be surprised by silent context\n * loss. This component announces it before it happens.\n */\nconst AutoCompactNotice = forwardRef<HTMLElement, AutoCompactNoticeProps>(\n  (\n    {\n      className,\n      title = \"Auto-compaction soon\",\n      turnsRemaining,\n      tokensToCompact,\n      onCompactNow,\n      onDismiss,\n      ...props\n    },\n    ref,\n  ) => {\n    // T4.1 (MF-4): omit aria-live when nested inside a container live region.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <aside\n        ref={ref}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        className={cn(\n          \"grid grid-cols-[auto_1fr_auto] items-start gap-3 rounded-lg border border-warning/40 bg-warning/10 px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <Sparkles className=\"mt-0.5 size-4 shrink-0 text-warning\" aria-hidden=\"true\" />\n        <div className=\"grid gap-1\">\n          <p className=\"flex items-baseline gap-2 font-medium text-body-sm text-foreground\">\n            {title}\n            {turnsRemaining !== undefined ? (\n              <span className=\"inline-flex items-center rounded-full bg-warning/20 px-2 py-0.5 font-mono text-label text-warning tabular-nums\">\n                {turnsRemaining} {turnsRemaining === 1 ? \"turn\" : \"turns\"} left\n              </span>\n            ) : null}\n          </p>\n          <p className=\"text-body-sm text-muted-foreground\">\n            Older context will be summarized to make room.\n            {tokensToCompact !== undefined ? (\n              <>\n                {\" \"}\n                About{\" \"}\n                <span className=\"font-mono tabular-nums\">\n                  {formatTokens(tokensToCompact)} tokens\n                </span>{\" \"}\n                will be replaced by a recap.\n              </>\n            ) : null}\n          </p>\n          {onCompactNow ? (\n            <button\n              type=\"button\"\n              onClick={onCompactNow}\n              className=\"mt-1 inline-flex w-fit items-center rounded-md border border-warning/40 bg-card px-2.5 py-1 font-mono text-label text-warning hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              Compact now\n            </button>\n          ) : null}\n        </div>\n        {onDismiss ? (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            aria-label=\"Dismiss\"\n            className=\"rounded-md p-1 text-warning hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <X className=\"size-3.5\" />\n          </button>\n        ) : null}\n      </aside>\n    );\n  },\n);\nAutoCompactNotice.displayName = \"AutoCompactNotice\";\n\nexport { AutoCompactNotice };\n"
+      "content": "import { Sparkles, X } 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\ninterface AutoCompactNoticeProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Optional custom title. */\n  title?: ReactNode;\n  /**\n   * How many turns until the next auto-compaction. Used to render an inline\n   * countdown chip.\n   */\n  turnsRemaining?: number;\n  /** Approx tokens that will be removed/summarized. */\n  tokensToCompact?: number;\n  onCompactNow?: () => void;\n  onDismiss?: () => void;\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 * AutoCompactNotice — inline banner warning the user that the agent is\n * about to summarize / compact older context. Lets them act early (compact\n * now) or dismiss.\n *\n * Critical for transparency: a user must not be surprised by silent context\n * loss. This component announces it before it happens.\n */\nconst AutoCompactNotice = forwardRef<HTMLElement, AutoCompactNoticeProps>(\n  (\n    {\n      className,\n      title = \"Auto-compaction soon\",\n      turnsRemaining,\n      tokensToCompact,\n      onCompactNow,\n      onDismiss,\n      ...props\n    },\n    ref,\n  ) => {\n    // T4.1 (MF-4): omit aria-live when nested inside a container live region.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <aside\n        data-slot=\"auto-compact-notice\"\n        ref={ref}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        className={cn(\n          \"grid grid-cols-[auto_1fr_auto] items-start gap-3 rounded-lg border border-warning/40 bg-warning/10 px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <Sparkles className=\"mt-0.5 size-4 shrink-0 text-warning\" aria-hidden=\"true\" />\n        <div className=\"grid gap-1\">\n          <p className=\"flex items-baseline gap-2 font-medium text-body-sm text-foreground\">\n            {title}\n            {turnsRemaining !== undefined ? (\n              <span className=\"inline-flex items-center rounded-full bg-warning/20 px-2 py-0.5 font-mono text-label text-warning tabular-nums\">\n                {turnsRemaining} {turnsRemaining === 1 ? \"turn\" : \"turns\"} left\n              </span>\n            ) : null}\n          </p>\n          <p className=\"text-body-sm text-muted-foreground\">\n            Older context will be summarized to make room.\n            {tokensToCompact !== undefined ? (\n              <>\n                {\" \"}\n                About{\" \"}\n                <span className=\"font-mono tabular-nums\">\n                  {formatTokens(tokensToCompact)} tokens\n                </span>{\" \"}\n                will be replaced by a recap.\n              </>\n            ) : null}\n          </p>\n          {onCompactNow ? (\n            <button\n              type=\"button\"\n              onClick={onCompactNow}\n              className=\"mt-1 inline-flex w-fit items-center rounded-md border border-warning/40 bg-card px-2.5 py-1 font-mono text-label text-warning hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              Compact now\n            </button>\n          ) : null}\n        </div>\n        {onDismiss ? (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            aria-label=\"Dismiss\"\n            className=\"rounded-md p-1 text-warning hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <X className=\"size-3.5\" />\n          </button>\n        ) : null}\n      </aside>\n    );\n  },\n);\nAutoCompactNotice.displayName = \"AutoCompactNotice\";\n\nexport { AutoCompactNotice };\n"
     }
   ]
 }

package/registry/r/avatar.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/avatar/avatar.tsx",
       "type": "registry:ui",
       "target": "components/ui/avatar.tsx",
-      "content": "import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Avatar — user/team avatar with safe fallback to initials.\n *\n * Composition:\n *   <Avatar size=\"md\">\n *     <Avatar.Image src=\"…\" alt=\"…\" />\n *     <Avatar.Fallback>AA</Avatar.Fallback>\n *   </Avatar>\n *\n * Built on Radix Avatar (handles image load failures → fallback automatically).\n * Sizes scale on the root; fallback inherits the size's text scale.\n */\n\nconst avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 overflow-hidden rounded-full\",\n    \"border border-border/40 bg-muted text-foreground\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"size-6 text-label\",\n        sm: \"size-7 text-label\",\n        md: \"size-9 text-body-sm\",\n        lg: \"size-12 text-body-md\",\n        xl: \"size-16 text-title-md\",\n      },\n      tone: {\n        muted: \"bg-muted text-foreground\",\n        primary: \"bg-primary text-primary-foreground\",\n        accent: \"bg-accent text-accent-foreground\",\n      },\n    },\n    defaultVariants: { size: \"md\", tone: \"muted\" },\n  },\n);\n\ninterface AvatarProps\n  extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {}\n\nconst AvatarRoot = forwardRef<ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  ({ className, size, tone, ...props }, ref) => (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cn(avatarVariants({ size, tone }), className)}\n      {...props}\n    />\n  ),\n);\nAvatarRoot.displayName = \"Avatar\";\n\nconst AvatarImage = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Image>,\n  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square size-full object-cover\", className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = \"Avatar.Image\";\n\nconst AvatarFallback = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Fallback>,\n  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center font-medium leading-none\",\n      className,\n    )}\n    delayMs={300}\n    {...props}\n  />\n));\nAvatarFallback.displayName = \"Avatar.Fallback\";\n\nconst Avatar = /*#__PURE__*/ Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n});\n\nexport { Avatar, avatarVariants };\n"
+      "content": "import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Avatar — user/team avatar with safe fallback to initials.\n *\n * Composition:\n *   <Avatar size=\"md\">\n *     <Avatar.Image src=\"…\" alt=\"…\" />\n *     <Avatar.Fallback>AA</Avatar.Fallback>\n *   </Avatar>\n *\n * Built on Radix Avatar (handles image load failures → fallback automatically).\n * Sizes scale on the root; fallback inherits the size's text scale.\n */\n\nconst avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 overflow-hidden rounded-full\",\n    \"border border-border/40 bg-muted text-foreground\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"size-6 text-label\",\n        sm: \"size-7 text-label\",\n        md: \"size-9 text-body-sm\",\n        lg: \"size-12 text-body-md\",\n        xl: \"size-16 text-title-md\",\n      },\n      tone: {\n        muted: \"bg-muted text-foreground\",\n        primary: \"bg-primary text-primary-foreground\",\n        accent: \"bg-accent text-accent-foreground\",\n      },\n    },\n    defaultVariants: { size: \"md\", tone: \"muted\" },\n  },\n);\n\ninterface AvatarProps\n  extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {}\n\nconst AvatarRoot = forwardRef<ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  ({ className, size, tone, ...props }, ref) => (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      ref={ref}\n      className={cn(avatarVariants({ size, tone }), className)}\n      {...props}\n    />\n  ),\n);\nAvatarRoot.displayName = \"Avatar\";\n\nconst AvatarImage = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Image>,\n  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    data-slot=\"avatar-image\"\n    ref={ref}\n    className={cn(\"aspect-square size-full object-cover\", className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = \"Avatar.Image\";\n\nconst AvatarFallback = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Fallback>,\n  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    data-slot=\"avatar-fallback\"\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center font-medium leading-none\",\n      className,\n    )}\n    delayMs={300}\n    {...props}\n  />\n));\nAvatarFallback.displayName = \"Avatar.Fallback\";\n\nconst Avatar = /*#__PURE__*/ Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n});\n\nexport { Avatar, avatarVariants };\n"
     }
   ]
 }

package/registry/r/badge.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/badge/badge.tsx",
       "type": "registry:ui",
       "target": "components/ui/badge.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Badge — small status / tag indicator.\n *\n * Variants:\n *   - default     muted surface, hairline border\n *   - primary     violet outline + soft violet bg\n *   - accent      burnt sienna (celebration / pro / beta)\n *   - success     deploy succeeded\n *   - warning     attention needed\n *   - destructive failed\n *   - outline     transparent, just border\n *\n * Status dots are inlined via `<Badge.Dot />` for things like \"Building…\",\n * \"Running\", \"Failed\" rows in deployment lists.\n */\nconst badgeVariants = cva(\n  [\n    \"inline-flex items-center gap-1.5 rounded-full border\",\n    \"font-sans uppercase tracking-wider\",\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-border/40 bg-muted text-muted-foreground\",\n        primary: \"border-primary/30 bg-primary/10 text-primary\",\n        accent: \"border-accent/40 bg-accent/15 text-accent\",\n        success: \"border-success/40 bg-success/15 text-success\",\n        warning: \"border-warning/40 bg-warning/15 text-warning\",\n        destructive: \"border-destructive/40 bg-destructive/15 text-destructive\",\n        outline: \"border-border bg-transparent text-foreground\",\n      },\n      size: {\n        sm: \"px-2 py-0.5 text-label-caps\",\n        md: \"px-2.5 py-0.5 text-label\",\n        lg: \"px-3 py-1 text-body-md\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\" },\n  },\n);\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant, size, ...props }, ref) => (\n    <span ref={ref} className={cn(badgeVariants({ variant, size }), className)} {...props} />\n  ),\n);\nBadge.displayName = \"Badge\";\n\ninterface BadgeDotProps extends HTMLAttributes<HTMLSpanElement> {\n  pulse?: boolean;\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"destructive\" | \"muted\";\n}\n\nconst toneClass: Record<NonNullable<BadgeDotProps[\"tone\"]>, string> = {\n  primary: \"bg-primary\",\n  accent: \"bg-accent\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n  muted: \"bg-muted-foreground\",\n};\n\nconst Dot = forwardRef<HTMLSpanElement, BadgeDotProps>(\n  ({ className, pulse = false, tone = \"success\", ...props }, ref) => (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(\n        \"inline-block size-1.5 rounded-full\",\n        toneClass[tone],\n        pulse && \"animate-pulse-glow\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDot.displayName = \"Badge.Dot\";\n\nconst BadgeWithDot = Badge as typeof Badge & { Dot: typeof Dot };\nBadgeWithDot.Dot = Dot;\n\nexport { BadgeWithDot as Badge, badgeVariants };\n"
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Badge — small status / tag indicator.\n *\n * Variants:\n *   - default     muted surface, hairline border\n *   - primary     violet outline + soft violet bg\n *   - accent      burnt sienna (celebration / pro / beta)\n *   - success     deploy succeeded\n *   - warning     attention needed\n *   - destructive failed\n *   - outline     transparent, just border\n *\n * Status dots are inlined via `<Badge.Dot />` for things like \"Building…\",\n * \"Running\", \"Failed\" rows in deployment lists.\n */\nconst badgeVariants = cva(\n  [\n    \"inline-flex items-center gap-1.5 rounded-full border\",\n    \"font-sans uppercase tracking-wider\",\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-border/40 bg-muted text-muted-foreground\",\n        primary: \"border-primary/30 bg-primary/10 text-primary\",\n        accent: \"border-accent/40 bg-accent/15 text-accent\",\n        success: \"border-success/40 bg-success/15 text-success\",\n        warning: \"border-warning/40 bg-warning/15 text-warning\",\n        destructive: \"border-destructive/40 bg-destructive/15 text-destructive\",\n        outline: \"border-border bg-transparent text-foreground\",\n      },\n      size: {\n        sm: \"px-2 py-0.5 text-label-caps\",\n        md: \"px-2.5 py-0.5 text-label\",\n        lg: \"px-3 py-1 text-body-md\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\" },\n  },\n);\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant, size, ...props }, ref) => (\n    <span\n      data-slot=\"badge\"\n      data-variant={variant}\n      data-size={size}\n      ref={ref}\n      className={cn(badgeVariants({ variant, size }), className)}\n      {...props}\n    />\n  ),\n);\nBadge.displayName = \"Badge\";\n\ninterface BadgeDotProps extends HTMLAttributes<HTMLSpanElement> {\n  pulse?: boolean;\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"destructive\" | \"muted\";\n}\n\nconst toneClass: Record<NonNullable<BadgeDotProps[\"tone\"]>, string> = {\n  primary: \"bg-primary\",\n  accent: \"bg-accent\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n  muted: \"bg-muted-foreground\",\n};\n\nconst Dot = forwardRef<HTMLSpanElement, BadgeDotProps>(\n  ({ className, pulse = false, tone = \"success\", ...props }, ref) => (\n    <span\n      data-slot=\"badge-dot\"\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(\n        \"inline-block size-1.5 rounded-full\",\n        toneClass[tone],\n        pulse && \"animate-pulse-glow\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDot.displayName = \"Badge.Dot\";\n\nconst BadgeWithDot = Badge as typeof Badge & { Dot: typeof Dot };\nBadgeWithDot.Dot = Dot;\n\nexport { BadgeWithDot as Badge, badgeVariants };\n"
     }
   ]
 }

package/registry/r/browser-controls.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/browser-controls/browser-controls.tsx",
       "type": "registry:ui",
       "target": "components/ui/browser-controls.tsx",
-      "content": "import { ArrowLeft, ArrowRight, RotateCw } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface BrowserControlsProps extends HTMLAttributes<HTMLDivElement> {\n  url: string;\n  onUrlChange?: (next: string) => void;\n  onBack?: () => void;\n  onForward?: () => void;\n  onReload?: () => void;\n  /**\n   * Disable URL editing (some previews are read-only).\n   */\n  readOnlyUrl?: boolean;\n}\n\n/**\n * BrowserControls — back/forward/reload + URL bar.\n *\n * Used as the top of PreviewPanel in the Code workspace.\n */\nconst BrowserControls = forwardRef<HTMLDivElement, BrowserControlsProps>(\n  ({ className, url, onUrlChange, onBack, onForward, onReload, readOnlyUrl, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center gap-1 border-border/40 border-b bg-card px-3 py-2\",\n        className,\n      )}\n      {...props}\n    >\n      <NavBtn aria-label=\"Back\" {...(onBack ? { onClick: onBack } : {})}>\n        <ArrowLeft className=\"size-3.5\" />\n      </NavBtn>\n      <NavBtn aria-label=\"Forward\" {...(onForward ? { onClick: onForward } : {})}>\n        <ArrowRight className=\"size-3.5\" />\n      </NavBtn>\n      <NavBtn aria-label=\"Reload\" {...(onReload ? { onClick: onReload } : {})}>\n        <RotateCw className=\"size-3.5\" />\n      </NavBtn>\n      <input\n        type=\"url\"\n        value={url}\n        onChange={(e) => onUrlChange?.(e.target.value)}\n        readOnly={readOnlyUrl ?? !onUrlChange}\n        aria-label=\"Address\"\n        className={cn(\n          \"ml-2 h-7 flex-1 rounded-md border border-border/40 bg-muted/40 px-2\",\n          \"font-mono text-code-sm text-foreground\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        )}\n      />\n    </div>\n  ),\n);\nBrowserControls.displayName = \"BrowserControls\";\n\nfunction NavBtn({\n  onClick,\n  children,\n  \"aria-label\": ariaLabel,\n}: {\n  onClick?: () => void;\n  children: ReactNode;\n  \"aria-label\": string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={ariaLabel}\n      disabled={!onClick}\n      className={cn(\n        \"rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        \"disabled:opacity-30 disabled:hover:bg-transparent\",\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport { BrowserControls };\n"
+      "content": "import { ArrowLeft, ArrowRight, RotateCw } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface BrowserControlsProps extends HTMLAttributes<HTMLDivElement> {\n  url: string;\n  onUrlChange?: (next: string) => void;\n  onBack?: () => void;\n  onForward?: () => void;\n  onReload?: () => void;\n  /**\n   * Disable URL editing (some previews are read-only).\n   */\n  readOnlyUrl?: boolean;\n}\n\n/**\n * BrowserControls — back/forward/reload + URL bar.\n *\n * Used as the top of PreviewPanel in the Code workspace.\n */\nconst BrowserControls = forwardRef<HTMLDivElement, BrowserControlsProps>(\n  ({ className, url, onUrlChange, onBack, onForward, onReload, readOnlyUrl, ...props }, ref) => (\n    <div\n      data-slot=\"browser-controls\"\n      ref={ref}\n      className={cn(\n        \"flex items-center gap-1 border-border/40 border-b bg-card px-3 py-2\",\n        className,\n      )}\n      {...props}\n    >\n      <NavBtn aria-label=\"Back\" {...(onBack ? { onClick: onBack } : {})}>\n        <ArrowLeft className=\"size-3.5\" />\n      </NavBtn>\n      <NavBtn aria-label=\"Forward\" {...(onForward ? { onClick: onForward } : {})}>\n        <ArrowRight className=\"size-3.5\" />\n      </NavBtn>\n      <NavBtn aria-label=\"Reload\" {...(onReload ? { onClick: onReload } : {})}>\n        <RotateCw className=\"size-3.5\" />\n      </NavBtn>\n      <input\n        type=\"url\"\n        value={url}\n        onChange={(e) => onUrlChange?.(e.target.value)}\n        readOnly={readOnlyUrl ?? !onUrlChange}\n        aria-label=\"Address\"\n        className={cn(\n          \"ml-2 h-7 flex-1 rounded-md border border-border/40 bg-muted/40 px-2\",\n          \"font-mono text-code-sm text-foreground\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        )}\n      />\n    </div>\n  ),\n);\nBrowserControls.displayName = \"BrowserControls\";\n\nfunction NavBtn({\n  onClick,\n  children,\n  \"aria-label\": ariaLabel,\n}: {\n  onClick?: () => void;\n  children: ReactNode;\n  \"aria-label\": string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={ariaLabel}\n      disabled={!onClick}\n      className={cn(\n        \"rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        \"disabled:opacity-30 disabled:hover:bg-transparent\",\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport { BrowserControls };\n"
     }
   ]
 }

package/registry/r/build-log-stream.json

@@ -6,6 +6,7 @@
   "description": "Terminal-like log viewer with timestamps + level coloring.",
   "registryDependencies": [
     "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/env.json",
     "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
@@ -13,7 +14,7 @@
       "path": "components/primitives/build-log-stream/build-log-stream.tsx",
       "type": "registry:block",
       "target": "components/blocks/build-log-stream.tsx",
-      "content": "import { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\nexport type LogLevel = \"info\" | \"warn\" | \"error\" | \"success\" | \"debug\";\n\nexport interface LogLine {\n  id: string;\n  timestamp: string;\n  level: LogLevel;\n  message: string;\n  source?: string;\n}\n\nconst levelClasses: Record<LogLevel, string> = {\n  info: \"text-foreground\",\n  warn: \"text-warning\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n  debug: \"text-muted-foreground\",\n};\n\nconst levelLabels: Record<LogLevel, string> = {\n  info: \"INFO\",\n  warn: \"WARN\",\n  error: \"ERROR\",\n  success: \" OK \",\n  debug: \"DBG \",\n};\n\ninterface BuildLogStreamProps extends HTMLAttributes<HTMLDivElement> {\n  lines: LogLine[];\n  /**\n   * If true, shows level filter chips above the stream.\n   */\n  filterable?: boolean;\n  /**\n   * Controlled filter — which levels are visible. Empty Set = show all.\n   *\n   * Pick one mode: either always pass `visibleLevels` + `onVisibleLevelsChange`\n   * (controlled), or never (uncontrolled). Mixing the two between renders is\n   * not supported and may produce surprising state.\n   */\n  visibleLevels?: Set<LogLevel>;\n  onVisibleLevelsChange?: (levels: Set<LogLevel>) => void;\n  /**\n   * Height of the scrollable region.\n   */\n  height?: string | number;\n  /**\n   * Maximum number of lines rendered. When exceeded, only the tail is shown\n   * and a banner indicates truncation. Defaults to 2000 — set higher with\n   * caution; React reconciliation cost scales linearly.\n   */\n  maxLines?: number;\n  /**\n   * Screen-reader live-region politeness for newly appended lines. Defaults\n   * to `\"off\"` because build-log streams can be high-volume; opt into\n   * `\"polite\"` only when running the build in the foreground.\n   */\n  live?: \"off\" | \"polite\";\n}\n\nconst ALL_LEVELS: LogLevel[] = [\"info\", \"warn\", \"error\", \"success\", \"debug\"];\n\n/**\n * BuildLogStream — terminal-like log viewer with timestamps + level coloring.\n *\n * Used in Code workspace and PaaS deployment views. Geist Mono throughout.\n * Lines fade in via animate-fade-in-up on mount; new lines (when prepended/appended)\n * are not animated to avoid feedback noise (consumer's responsibility to render\n * incrementally if needed).\n */\nconst BuildLogStream = forwardRef<HTMLDivElement, BuildLogStreamProps>(\n  (\n    {\n      className,\n      lines,\n      filterable = true,\n      visibleLevels,\n      onVisibleLevelsChange,\n      height = \"320px\",\n      maxLines = 2000,\n      live = \"off\",\n      ...props\n    },\n    ref,\n  ) => {\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    const [internalLevels, setInternalLevels] = useState<Set<LogLevel>>(new Set());\n    const levels = visibleLevels ?? internalLevels;\n    const updateLevels = onVisibleLevelsChange ?? setInternalLevels;\n\n    // MEDIUM-002 / T6.5: warn (dev-only) when a consumer flips between\n    // controlled and uncontrolled — React's own warning handles `value`/\n    // `defaultValue` on form inputs but doesn't see our custom prop pair.\n    const wasControlled = useRef<boolean | null>(null);\n    useEffect(() => {\n      if (typeof process === \"undefined\" || process.env.NODE_ENV === \"production\") return;\n      const isControlled = visibleLevels !== undefined;\n      if (wasControlled.current === null) {\n        wasControlled.current = isControlled;\n        return;\n      }\n      if (wasControlled.current !== isControlled) {\n        // biome-ignore lint/suspicious/noConsole: dev-only diagnostic (MEDIUM-002)\n        console.warn(\n          `[@usetheo/ui] BuildLogStream: \\`visibleLevels\\` prop switched between ${\n            wasControlled.current ? \"controlled\" : \"uncontrolled\"\n          } and ${isControlled ? \"controlled\" : \"uncontrolled\"} between renders. Pick one mode and keep it consistent.`,\n        );\n        wasControlled.current = isControlled;\n      }\n    }, [visibleLevels]);\n\n    const filtered = useMemo(() => {\n      if (levels.size === 0) return lines;\n      return lines.filter((l) => levels.has(l.level));\n    }, [lines, levels]);\n\n    const truncated = filtered.length > maxLines;\n    const visible = truncated ? filtered.slice(filtered.length - maxLines) : filtered;\n    const hiddenCount = truncated ? filtered.length - maxLines : 0;\n\n    const toggle = (level: LogLevel) => {\n      const next = new Set(levels);\n      if (next.has(level)) next.delete(level);\n      else next.add(level);\n      updateLevels(next);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-2\", className)} {...props}>\n        {filterable ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {ALL_LEVELS.map((level) => {\n              const active = levels.size === 0 || levels.has(level);\n              return (\n                <button\n                  key={level}\n                  type=\"button\"\n                  onClick={() => toggle(level)}\n                  aria-pressed={active}\n                  className={cn(\n                    \"rounded-md border px-2 py-1 font-mono text-label uppercase tracking-wider\",\n                    \"transition-colors 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                    active\n                      ? cn(\"border-border/60 bg-muted\", levelClasses[level])\n                      : \"border-border/30 text-muted-foreground/50 hover:text-muted-foreground\",\n                  )}\n                >\n                  {level}\n                </button>\n              );\n            })}\n          </div>\n        ) : null}\n        <div\n          className={cn(\"overflow-y-auto rounded-lg border bg-card\", \"font-mono text-code-sm\")}\n          style={{ height }}\n        >\n          {truncated ? (\n            <output className=\"block border-border/30 border-b bg-muted/40 px-4 py-1.5 text-label text-muted-foreground\">\n              Showing last {maxLines.toLocaleString()} of {filtered.length.toLocaleString()} lines (\n              {hiddenCount.toLocaleString()} earlier lines hidden)\n            </output>\n          ) : null}\n          {visible.length === 0 ? (\n            <p className=\"px-4 py-3 text-muted-foreground\">No log lines.</p>\n          ) : (\n            <ol className=\"divide-y divide-border/30\" aria-live={effectiveLive} aria-atomic=\"false\">\n              {visible.map((line) => (\n                <li\n                  key={line.id}\n                  className=\"grid grid-cols-[auto_auto_1fr] gap-3 px-4 py-1.5 leading-relaxed hover:bg-muted/30\"\n                >\n                  <span className=\"select-none text-muted-foreground\">{line.timestamp}</span>\n                  <span className={cn(\"select-none font-bold\", levelClasses[line.level])}>\n                    [{levelLabels[line.level]}]\n                  </span>\n                  <span className={levelClasses[line.level]}>\n                    {line.source ? (\n                      <span className=\"mr-2 text-muted-foreground\">{line.source}:</span>\n                    ) : null}\n                    {line.message}\n                  </span>\n                </li>\n              ))}\n            </ol>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nBuildLogStream.displayName = \"BuildLogStream\";\n\nexport { BuildLogStream };\n"
+      "content": "\"use client\";\n\nimport { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { isDev } from \"@/lib/env\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\nexport type LogLevel = \"info\" | \"warn\" | \"error\" | \"success\" | \"debug\";\n\nexport interface LogLine {\n  id: string;\n  timestamp: string;\n  level: LogLevel;\n  message: string;\n  source?: string;\n}\n\nconst levelClasses: Record<LogLevel, string> = {\n  info: \"text-foreground\",\n  warn: \"text-warning\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n  debug: \"text-muted-foreground\",\n};\n\nconst levelLabels: Record<LogLevel, string> = {\n  info: \"INFO\",\n  warn: \"WARN\",\n  error: \"ERROR\",\n  success: \" OK \",\n  debug: \"DBG \",\n};\n\ninterface BuildLogStreamProps extends HTMLAttributes<HTMLDivElement> {\n  lines: LogLine[];\n  /**\n   * If true, shows level filter chips above the stream.\n   */\n  filterable?: boolean;\n  /**\n   * Controlled filter — which levels are visible. Empty Set = show all.\n   *\n   * Pick one mode: either always pass `visibleLevels` + `onVisibleLevelsChange`\n   * (controlled), or never (uncontrolled). Mixing the two between renders is\n   * not supported and may produce surprising state.\n   */\n  visibleLevels?: Set<LogLevel>;\n  onVisibleLevelsChange?: (levels: Set<LogLevel>) => void;\n  /**\n   * Height of the scrollable region.\n   */\n  height?: string | number;\n  /**\n   * Maximum number of lines rendered. When exceeded, only the tail is shown\n   * and a banner indicates truncation. Defaults to 2000 — set higher with\n   * caution; React reconciliation cost scales linearly.\n   */\n  maxLines?: number;\n  /**\n   * Screen-reader live-region politeness for newly appended lines. Defaults\n   * to `\"off\"` because build-log streams can be high-volume; opt into\n   * `\"polite\"` only when running the build in the foreground.\n   */\n  live?: \"off\" | \"polite\";\n}\n\nconst ALL_LEVELS: LogLevel[] = [\"info\", \"warn\", \"error\", \"success\", \"debug\"];\n\n/**\n * BuildLogStream — terminal-like log viewer with timestamps + level coloring.\n *\n * Used in Code workspace and PaaS deployment views. Geist Mono throughout.\n * Lines fade in via animate-fade-in-up on mount; new lines (when prepended/appended)\n * are not animated to avoid feedback noise (consumer's responsibility to render\n * incrementally if needed).\n */\nconst BuildLogStream = forwardRef<HTMLDivElement, BuildLogStreamProps>(\n  (\n    {\n      className,\n      lines,\n      filterable = true,\n      visibleLevels,\n      onVisibleLevelsChange,\n      height = \"320px\",\n      maxLines = 2000,\n      live = \"off\",\n      ...props\n    },\n    ref,\n  ) => {\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    const [internalLevels, setInternalLevels] = useState<Set<LogLevel>>(new Set());\n    const levels = visibleLevels ?? internalLevels;\n    const updateLevels = onVisibleLevelsChange ?? setInternalLevels;\n\n    // MEDIUM-002 / T6.5: warn (dev-only) when a consumer flips between\n    // controlled and uncontrolled — React's own warning handles `value`/\n    // `defaultValue` on form inputs but doesn't see our custom prop pair.\n    const wasControlled = useRef<boolean | null>(null);\n    useEffect(() => {\n      if (!isDev()) return;\n      const isControlled = visibleLevels !== undefined;\n      if (wasControlled.current === null) {\n        wasControlled.current = isControlled;\n        return;\n      }\n      if (wasControlled.current !== isControlled) {\n        // biome-ignore lint/suspicious/noConsole: dev-only diagnostic (MEDIUM-002)\n        console.warn(\n          `[@theokit/ui] BuildLogStream: \\`visibleLevels\\` prop switched between ${\n            wasControlled.current ? \"controlled\" : \"uncontrolled\"\n          } and ${isControlled ? \"controlled\" : \"uncontrolled\"} between renders. Pick one mode and keep it consistent.`,\n        );\n        wasControlled.current = isControlled;\n      }\n    }, [visibleLevels]);\n\n    const filtered = useMemo(() => {\n      if (levels.size === 0) return lines;\n      return lines.filter((l) => levels.has(l.level));\n    }, [lines, levels]);\n\n    const truncated = filtered.length > maxLines;\n    const visible = truncated ? filtered.slice(filtered.length - maxLines) : filtered;\n    const hiddenCount = truncated ? filtered.length - maxLines : 0;\n\n    const toggle = (level: LogLevel) => {\n      const next = new Set(levels);\n      if (next.has(level)) next.delete(level);\n      else next.add(level);\n      updateLevels(next);\n    };\n\n    return (\n      <div\n        data-slot=\"build-log-stream\"\n        ref={ref}\n        className={cn(\"flex flex-col gap-2\", className)}\n        {...props}\n      >\n        {filterable ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {ALL_LEVELS.map((level) => {\n              const active = levels.size === 0 || levels.has(level);\n              return (\n                <button\n                  key={level}\n                  type=\"button\"\n                  onClick={() => toggle(level)}\n                  aria-pressed={active}\n                  className={cn(\n                    \"rounded-md border px-2 py-1 font-mono text-label uppercase tracking-wider\",\n                    \"transition-colors 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                    active\n                      ? cn(\"border-border/60 bg-muted\", levelClasses[level])\n                      : \"border-border/30 text-muted-foreground/50 hover:text-muted-foreground\",\n                  )}\n                >\n                  {level}\n                </button>\n              );\n            })}\n          </div>\n        ) : null}\n        <div\n          className={cn(\"overflow-y-auto rounded-lg border bg-card\", \"font-mono text-code-sm\")}\n          style={{ height }}\n        >\n          {truncated ? (\n            <output className=\"block border-border/30 border-b bg-muted/40 px-4 py-1.5 text-label text-muted-foreground\">\n              Showing last {maxLines.toLocaleString()} of {filtered.length.toLocaleString()} lines (\n              {hiddenCount.toLocaleString()} earlier lines hidden)\n            </output>\n          ) : null}\n          {visible.length === 0 ? (\n            <p className=\"px-4 py-3 text-muted-foreground\">No log lines.</p>\n          ) : (\n            <ol className=\"divide-y divide-border/30\" aria-live={effectiveLive} aria-atomic=\"false\">\n              {visible.map((line) => (\n                <li\n                  key={line.id}\n                  className=\"grid grid-cols-[auto_auto_1fr] gap-3 px-4 py-1.5 leading-relaxed hover:bg-muted/30\"\n                >\n                  <span className=\"select-none text-muted-foreground\">{line.timestamp}</span>\n                  <span className={cn(\"select-none font-bold\", levelClasses[line.level])}>\n                    [{levelLabels[line.level]}]\n                  </span>\n                  <span className={levelClasses[line.level]}>\n                    {line.source ? (\n                      <span className=\"mr-2 text-muted-foreground\">{line.source}:</span>\n                    ) : null}\n                    {line.message}\n                  </span>\n                </li>\n              ))}\n            </ol>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nBuildLogStream.displayName = \"BuildLogStream\";\n\nexport { BuildLogStream };\n"
     }
   ]
 }

package/registry/r/button.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/button/button.tsx",
       "type": "registry:ui",
       "target": "components/ui/button.tsx",
-      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Button — primitive action element in the Violet Forge design system.\n *\n * Variants:\n *   - primary    Theo violet fill, glow on hover (signature)\n *   - secondary  surface with hairline border\n *   - accent     burnt-sienna fill, celebratory actions\n *   - ghost      transparent, hover lifts surface\n *   - link       text-only, primary color, underline on hover\n *   - destructive  for irreversible actions\n *\n * Sizes: sm (32px) · md (40px, default) · lg (48px) · icon (square 40px)\n *\n * `asChild` swaps the root for the consumer's element (Radix Slot pattern).\n */\nconst buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg\",\n    // NIT-004: `font-medium` (500) aligns with the design-system.md UI weight.\n    // Previously `font-bold` (700) exceeded the normative 400/500/600 weight\n    // range declared for Geist Sans in the Violet Forge identity.\n    \"font-medium font-sans tracking-tight\",\n    \"transition-[box-shadow,background-color,color,transform] 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    // Tailwind v4 dropped the `button { cursor: pointer }` preflight rule\n    // (https://tailwindcss.com/docs/upgrade-guide#default-button-cursor) so\n    // every <button> now shows the default arrow cursor. Restore the\n    // \"clickable hand\" explicitly for the Button primitive; the\n    // `disabled:pointer-events-none` rule below short-circuits cursor\n    // application for disabled state (no events → cursor is moot).\n    // `aria-disabled:cursor-default` is a belt-and-suspenders override\n    // for paths where pointer-events still flow.\n    \"cursor-pointer disabled:cursor-default aria-disabled:cursor-default\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"bg-primary text-primary-foreground\",\n          \"hover:bg-primary hover:shadow-glow\",\n          \"active:scale-[0.98] active:bg-primary-deep active:shadow-none\",\n        ],\n        secondary: [\n          \"border border-border bg-secondary text-secondary-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98]\",\n        ],\n        accent: [\"bg-accent text-accent-foreground\", \"hover:bg-accent-deep\", \"active:scale-[0.98]\"],\n        ghost: [\n          \"bg-transparent text-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98] active:bg-secondary\",\n        ],\n        link: [\n          \"bg-transparent text-primary underline-offset-4\",\n          \"hover:text-primary-deep hover:underline\",\n          \"h-auto p-0\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground\",\n          \"hover:bg-destructive/90\",\n          \"active:scale-[0.98]\",\n        ],\n      },\n      size: {\n        sm: \"h-8 px-3 text-body-sm\",\n        // md: tier ajustável via density (CSS var on :root). See D3 ADR of\n        // faang-density-tightening plan. Default `comfortable` density makes\n        // this 36px (--theo-control-h: 2.25rem). sm and lg stay hardcoded.\n        md: \"h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] text-body-sm\",\n        lg: \"h-11 px-4 text-body-md\",\n        icon: \"h-[var(--theo-control-h,2.25rem)] w-[var(--theo-control-h,2.25rem)] p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, type, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={ref}\n        type={asChild ? undefined : (type ?? \"button\")}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Button — primitive action element in the Violet Forge design system.\n *\n * Variants:\n *   - primary    Theo violet fill, glow on hover (signature)\n *   - secondary  surface with hairline border\n *   - accent     burnt-sienna fill, celebratory actions\n *   - ghost      transparent, hover lifts surface\n *   - link       text-only, primary color, underline on hover\n *   - destructive  for irreversible actions\n *\n * Sizes: sm (32px) · md (40px, default) · lg (48px) · icon (square 40px)\n *\n * `asChild` swaps the root for the consumer's element (Radix Slot pattern).\n */\nconst buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg\",\n    // NIT-004: `font-medium` (500) aligns with the design-system.md UI weight.\n    // Previously `font-bold` (700) exceeded the normative 400/500/600 weight\n    // range declared for Geist Sans in the Violet Forge identity.\n    \"font-medium font-sans tracking-tight\",\n    \"transition-[box-shadow,background-color,color,transform] 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    // Tailwind v4 dropped the `button { cursor: pointer }` preflight rule\n    // (https://tailwindcss.com/docs/upgrade-guide#default-button-cursor) so\n    // every <button> now shows the default arrow cursor. Restore the\n    // \"clickable hand\" explicitly for the Button primitive; the\n    // `disabled:pointer-events-none` rule below short-circuits cursor\n    // application for disabled state (no events → cursor is moot).\n    // `aria-disabled:cursor-default` is a belt-and-suspenders override\n    // for paths where pointer-events still flow.\n    \"cursor-pointer disabled:cursor-default aria-disabled:cursor-default\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"bg-primary text-primary-foreground\",\n          \"hover:bg-primary hover:shadow-glow\",\n          \"active:scale-[0.98] active:bg-primary-deep active:shadow-none\",\n        ],\n        secondary: [\n          \"border border-border bg-secondary text-secondary-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98]\",\n        ],\n        accent: [\"bg-accent text-accent-foreground\", \"hover:bg-accent-deep\", \"active:scale-[0.98]\"],\n        ghost: [\n          \"bg-transparent text-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98] active:bg-secondary\",\n        ],\n        link: [\n          \"bg-transparent text-primary underline-offset-4\",\n          \"hover:text-primary-deep hover:underline\",\n          \"h-auto p-0\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground\",\n          \"hover:bg-destructive/90\",\n          \"active:scale-[0.98]\",\n        ],\n      },\n      size: {\n        sm: \"h-8 px-3 text-body-sm\",\n        // md: tier ajustável via density (CSS var on :root). See D3 ADR of\n        // faang-density-tightening plan. Default `comfortable` density makes\n        // this 36px (--theo-control-h: 2.25rem). sm and lg stay hardcoded.\n        md: \"h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] text-body-sm\",\n        lg: \"h-11 px-4 text-body-md\",\n        icon: \"h-[var(--theo-control-h,2.25rem)] w-[var(--theo-control-h,2.25rem)] p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, type, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        data-slot=\"button\"\n        data-variant={variant}\n        data-size={size}\n        ref={ref}\n        type={asChild ? undefined : (type ?? \"button\")}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"
     }
   ]
 }

package/registry/r/capability-indicator.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/capability-indicator/capability-indicator.tsx",
       "type": "registry:ui",
       "target": "components/ui/capability-indicator.tsx",
-      "content": "import {\n  AlertCircle,\n  Eye,\n  Network,\n  Pencil,\n  Rocket,\n  Sparkles,\n  Terminal,\n  Trash2,\n} 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 CapabilityState = \"enabled\" | \"disabled\" | \"blocked\" | \"active\";\n\nexport interface Capability {\n  id: string;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional icon override. */\n  icon?: IconComponent;\n  /** Default state. */\n  state?: CapabilityState;\n  /** Tooltip / longer description. */\n  hint?: ReactNode;\n}\n\ninterface CapabilityIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n  capabilities: Capability[];\n}\n\n/**\n * CapabilityIndicator — row of chips showing what the agent can currently do.\n *\n * Critical for transparency: the user should always see (e.g. in a top bar)\n * whether the agent has read/write/exec/network access enabled. The \"active\"\n * state pulses when a capability is in use.\n */\nconst stateClasses: Record<CapabilityState, string> = {\n  enabled: \"border-success/40 bg-success/10 text-success\",\n  active: \"border-primary/50 bg-primary/15 text-primary\",\n  disabled: \"border-border/40 bg-muted text-muted-foreground line-through\",\n  blocked: \"border-destructive/40 bg-destructive/10 text-destructive\",\n};\n\nconst CapabilityIndicator = forwardRef<HTMLUListElement, CapabilityIndicatorProps>(\n  ({ className, capabilities, ...props }, ref) => (\n    <ul\n      ref={ref}\n      aria-label=\"Agent capabilities\"\n      className={cn(\"flex flex-wrap items-center gap-1.5\", className)}\n      {...(props as HTMLAttributes<HTMLUListElement>)}\n    >\n      {capabilities.map((c) => {\n        const Icon = c.icon ?? AlertCircle;\n        const state = c.state ?? \"enabled\";\n        return (\n          <li\n            key={c.id}\n            title={typeof c.hint === \"string\" ? c.hint : undefined}\n            className={cn(\n              \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5\",\n              \"font-sans text-label\",\n              \"transition-colors\",\n              stateClasses[state],\n            )}\n          >\n            <Icon\n              aria-hidden=\"true\"\n              className={cn(\"size-3 shrink-0\", state === \"active\" && \"animate-pulse\")}\n            />\n            {c.label}\n          </li>\n        );\n      })}\n    </ul>\n  ),\n);\nCapabilityIndicator.displayName = \"CapabilityIndicator\";\n\n/** Common capability presets — re-use these so apps don't reinvent labels. */\nexport const capabilityPresets = {\n  read: { id: \"read\", label: \"Read files\", icon: Eye } as const,\n  write: { id: \"write\", label: \"Write files\", icon: Pencil } as const,\n  delete: { id: \"delete\", label: \"Delete files\", icon: Trash2 } as const,\n  bash: { id: \"bash\", label: \"Run shell\", icon: Terminal } as const,\n  network: { id: \"network\", label: \"Network\", icon: Network } as const,\n  deploy: { id: \"deploy\", label: \"Deploy\", icon: Rocket } as const,\n  llm: { id: \"llm\", label: \"Sub-agents\", icon: Sparkles } as const,\n};\n\nexport { CapabilityIndicator };\n"
+      "content": "import {\n  AlertCircle,\n  Eye,\n  Network,\n  Pencil,\n  Rocket,\n  Sparkles,\n  Terminal,\n  Trash2,\n} 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 CapabilityState = \"enabled\" | \"disabled\" | \"blocked\" | \"active\";\n\nexport interface Capability {\n  id: string;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional icon override. */\n  icon?: IconComponent;\n  /** Default state. */\n  state?: CapabilityState;\n  /** Tooltip / longer description. */\n  hint?: ReactNode;\n}\n\ninterface CapabilityIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n  capabilities: Capability[];\n}\n\n/**\n * CapabilityIndicator — row of chips showing what the agent can currently do.\n *\n * Critical for transparency: the user should always see (e.g. in a top bar)\n * whether the agent has read/write/exec/network access enabled. The \"active\"\n * state pulses when a capability is in use.\n */\nconst stateClasses: Record<CapabilityState, string> = {\n  enabled: \"border-success/40 bg-success/10 text-success\",\n  active: \"border-primary/50 bg-primary/15 text-primary\",\n  disabled: \"border-border/40 bg-muted text-muted-foreground line-through\",\n  blocked: \"border-destructive/40 bg-destructive/10 text-destructive\",\n};\n\nconst CapabilityIndicator = forwardRef<HTMLUListElement, CapabilityIndicatorProps>(\n  ({ className, capabilities, ...props }, ref) => (\n    <ul\n      data-slot=\"capability-indicator\"\n      ref={ref}\n      aria-label=\"Agent capabilities\"\n      className={cn(\"flex flex-wrap items-center gap-1.5\", className)}\n      {...(props as HTMLAttributes<HTMLUListElement>)}\n    >\n      {capabilities.map((c) => {\n        const Icon = c.icon ?? AlertCircle;\n        const state = c.state ?? \"enabled\";\n        return (\n          <li\n            key={c.id}\n            title={typeof c.hint === \"string\" ? c.hint : undefined}\n            className={cn(\n              \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5\",\n              \"font-sans text-label\",\n              \"transition-colors\",\n              stateClasses[state],\n            )}\n          >\n            <Icon\n              aria-hidden=\"true\"\n              className={cn(\"size-3 shrink-0\", state === \"active\" && \"animate-pulse\")}\n            />\n            {c.label}\n          </li>\n        );\n      })}\n    </ul>\n  ),\n);\nCapabilityIndicator.displayName = \"CapabilityIndicator\";\n\n/** Common capability presets — re-use these so apps don't reinvent labels. */\nexport const capabilityPresets = {\n  read: { id: \"read\", label: \"Read files\", icon: Eye } as const,\n  write: { id: \"write\", label: \"Write files\", icon: Pencil } as const,\n  delete: { id: \"delete\", label: \"Delete files\", icon: Trash2 } as const,\n  bash: { id: \"bash\", label: \"Run shell\", icon: Terminal } as const,\n  network: { id: \"network\", label: \"Network\", icon: Network } as const,\n  deploy: { id: \"deploy\", label: \"Deploy\", icon: Rocket } as const,\n  llm: { id: \"llm\", label: \"Sub-agents\", icon: Sparkles } as const,\n};\n\nexport { CapabilityIndicator };\n"
     }
   ]
 }

package/registry/r/card.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/card/card.tsx",
       "type": "registry:ui",
       "target": "components/ui/card.tsx",
-      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Card — surface container for grouping related content.\n *\n * Composition pattern (shadcn-style):\n *   <Card>\n *     <Card.Header>\n *       <Card.Title>…</Card.Title>\n *       <Card.Description>…</Card.Description>\n *     </Card.Header>\n *     <Card.Body>…</Card.Body>\n *     <Card.Footer>…</Card.Footer>\n *   </Card>\n *\n * The `size` prop on the root propagates to subparts via Context, so a\n * single declaration controls padding + heading scale across the compound.\n * Subparts used in isolation default to `md`. Subparts do NOT accept a `size`\n * prop of their own — use `className` for granular per-subpart tweaks.\n * (EC-8, edge-case review 2026-05-20.)\n */\n\ntype CardSize = \"sm\" | \"md\" | \"lg\";\n\ninterface CardContextValue {\n  size: CardSize;\n}\n\nconst CardContext = createContext<CardContextValue>({ size: \"md\" });\n\nconst useCardSize = (): CardSize => useContext(CardContext).size;\n\ninterface CardRootProps extends HTMLAttributes<HTMLDivElement> {\n  size?: CardSize;\n}\n\nconst Root = forwardRef<HTMLDivElement, CardRootProps>(\n  ({ className, size = \"md\", ...props }, ref) => (\n    <CardContext.Provider value={{ size }}>\n      <div\n        ref={ref}\n        className={cn(\n          \"rounded-xl border bg-card text-card-foreground shadow-md\",\n          \"transition-shadow duration-base ease-out-soft\",\n          className,\n        )}\n        {...props}\n      />\n    </CardContext.Provider>\n  ),\n);\nRoot.displayName = \"Card\";\n\nconst headerPadBySize: Record<CardSize, string> = {\n  sm: \"gap-1 p-3 pb-1.5\",\n  md: \"gap-1.5 p-5 pb-2.5\",\n  lg: \"gap-2 p-6 pb-3\",\n};\n\nconst Header = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const size = useCardSize();\n    return (\n      <div ref={ref} className={cn(\"flex flex-col\", headerPadBySize[size], className)} {...props} />\n    );\n  },\n);\nHeader.displayName = \"Card.Header\";\n\nconst titleFontBySize: Record<CardSize, string> = {\n  sm: \"text-title-md\",\n  md: \"text-title-lg\",\n  lg: \"text-headline\",\n};\n\ninterface TitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * When true, renders the child element with the Card.Title styles applied\n   * (Radix Slot pattern). Use to swap the default `<h3>` for `<h1>` / `<h2>`\n   * when the heading hierarchy requires it.\n   */\n  asChild?: boolean;\n}\n\nconst Title = forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"h3\";\n    const size = useCardSize();\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"font-display text-foreground tracking-tight\",\n          titleFontBySize[size],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTitle.displayName = \"Card.Title\";\n\nconst Description = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn(\"text-body-sm text-muted-foreground\", className)} {...props} />\n  ),\n);\nDescription.displayName = \"Card.Description\";\n\nconst bodyPadBySize: Record<CardSize, string> = {\n  sm: \"p-3 pt-1.5\",\n  md: \"p-5 pt-2.5\",\n  lg: \"p-6 pt-3\",\n};\n\nconst Body = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const size = useCardSize();\n    return <div ref={ref} className={cn(bodyPadBySize[size], className)} {...props} />;\n  },\n);\nBody.displayName = \"Card.Body\";\n\nconst footerPadBySize: Record<CardSize, string> = {\n  sm: \"gap-2 p-3 pt-2\",\n  md: \"gap-3 p-5 pt-3\",\n  lg: \"gap-4 p-6 pt-4\",\n};\n\nconst Footer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const size = useCardSize();\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center border-border/40 border-t\",\n          footerPadBySize[size],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nFooter.displayName = \"Card.Footer\";\n\nconst Card = /*#__PURE__*/ Object.assign(Root, {\n  Header,\n  Title,\n  Description,\n  Body,\n  Footer,\n});\n\nexport { Card };\n"
+      "content": "\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Card — surface container for grouping related content.\n *\n * Composition pattern (shadcn-style):\n *   <Card>\n *     <Card.Header>\n *       <Card.Title>…</Card.Title>\n *       <Card.Description>…</Card.Description>\n *     </Card.Header>\n *     <Card.Body>…</Card.Body>\n *     <Card.Footer>…</Card.Footer>\n *   </Card>\n *\n * The `size` prop on the root propagates to subparts via Context, so a\n * single declaration controls padding + heading scale across the compound.\n * Subparts used in isolation default to `md`. Subparts do NOT accept a `size`\n * prop of their own — use `className` for granular per-subpart tweaks.\n * (EC-8, edge-case review 2026-05-20.)\n */\n\ntype CardSize = \"sm\" | \"md\" | \"lg\";\n\ninterface CardContextValue {\n  size: CardSize;\n}\n\nconst CardContext = createContext<CardContextValue>({ size: \"md\" });\n\nconst useCardSize = (): CardSize => useContext(CardContext).size;\n\ninterface CardRootProps extends HTMLAttributes<HTMLDivElement> {\n  size?: CardSize;\n}\n\nconst Root = forwardRef<HTMLDivElement, CardRootProps>(\n  ({ className, size = \"md\", ...props }, ref) => (\n    <CardContext.Provider value={{ size }}>\n      <div\n        data-slot=\"card\"\n        ref={ref}\n        className={cn(\n          \"rounded-xl border bg-card text-card-foreground shadow-md\",\n          \"transition-shadow duration-base ease-out-soft\",\n          className,\n        )}\n        {...props}\n      />\n    </CardContext.Provider>\n  ),\n);\nRoot.displayName = \"Card\";\n\nconst headerPadBySize: Record<CardSize, string> = {\n  sm: \"gap-1 p-3 pb-1.5\",\n  md: \"gap-1.5 p-5 pb-2.5\",\n  lg: \"gap-2 p-6 pb-3\",\n};\n\nconst Header = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const size = useCardSize();\n    return (\n      <div\n        data-slot=\"card-header\"\n        ref={ref}\n        className={cn(\"flex flex-col\", headerPadBySize[size], className)}\n        {...props}\n      />\n    );\n  },\n);\nHeader.displayName = \"Card.Header\";\n\nconst titleFontBySize: Record<CardSize, string> = {\n  sm: \"text-title-md\",\n  md: \"text-title-lg\",\n  lg: \"text-headline\",\n};\n\ninterface TitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * When true, renders the child element with the Card.Title styles applied\n   * (Radix Slot pattern). Use to swap the default `<h3>` for `<h1>` / `<h2>`\n   * when the heading hierarchy requires it.\n   */\n  asChild?: boolean;\n}\n\nconst Title = forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"h3\";\n    const size = useCardSize();\n    return (\n      <Comp\n        data-slot=\"card-title\"\n        ref={ref}\n        className={cn(\n          \"font-display text-foreground tracking-tight\",\n          titleFontBySize[size],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTitle.displayName = \"Card.Title\";\n\nconst Description = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p\n      data-slot=\"card-description\"\n      ref={ref}\n      className={cn(\"text-body-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  ),\n);\nDescription.displayName = \"Card.Description\";\n\nconst bodyPadBySize: Record<CardSize, string> = {\n  sm: \"p-3 pt-1.5\",\n  md: \"p-5 pt-2.5\",\n  lg: \"p-6 pt-3\",\n};\n\nconst Body = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const size = useCardSize();\n    return (\n      <div\n        data-slot=\"card-body\"\n        ref={ref}\n        className={cn(bodyPadBySize[size], className)}\n        {...props}\n      />\n    );\n  },\n);\nBody.displayName = \"Card.Body\";\n\nconst footerPadBySize: Record<CardSize, string> = {\n  sm: \"gap-2 p-3 pt-2\",\n  md: \"gap-3 p-5 pt-3\",\n  lg: \"gap-4 p-6 pt-4\",\n};\n\nconst Footer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const size = useCardSize();\n    return (\n      <div\n        data-slot=\"card-footer\"\n        ref={ref}\n        className={cn(\n          \"flex items-center border-border/40 border-t\",\n          footerPadBySize[size],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nFooter.displayName = \"Card.Footer\";\n\nconst Card = /*#__PURE__*/ Object.assign(Root, {\n  Header,\n  Title,\n  Description,\n  Body,\n  Footer,\n});\n\nexport { Card };\n"
     }
   ]
 }

package/registry/r/chat-composer.json

@@ -17,7 +17,7 @@
       "path": "components/composites/chat-composer/chat-composer.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-composer.tsx",
-      "content": "import { Mic, Paperclip, Send, Square } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type {\n  FormEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"@/components/ui/button\";\n\nexport type ComposerMode = \"chat\" | \"code\" | \"infra\";\n\ninterface ChatComposerProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\"> {\n  mode?: ComposerMode;\n  value: string;\n  onValueChange: (next: string) => void;\n  onSubmit?: (value: string) => void;\n  /**\n   * If true, the composer is in \"agent running\" state — Send becomes a Stop button.\n   */\n  running?: boolean;\n  onStop?: () => void;\n  /**\n   * Slot above the textarea — used for the folder selector in Infra mode.\n   */\n  contextSlot?: ReactNode;\n  /**\n   * Slot above the textarea for attachments / chips.\n   */\n  attachmentsSlot?: ReactNode;\n  /**\n   * Slot on the bottom-left of the action row (e.g. custom toggles).\n   * Overrides the default attach button entirely when provided.\n   */\n  leadingActions?: ReactNode;\n  /**\n   * Slot on the bottom-right (e.g. model selector). Send/stop is appended after this.\n   */\n  trailingActions?: ReactNode;\n  /**\n   * Optional attach-file callback. If omitted (and `leadingActions` is also\n   * omitted), no attach button is rendered. This avoids fake affordances per\n   * Quality Gate §7.\n   */\n  onAttach?: () => void;\n  /**\n   * Optional voice-input callback. If omitted, no mic button is rendered.\n   * Same rationale as `onAttach`.\n   */\n  onVoiceInput?: () => void;\n  /**\n   * Accessible label for the textarea. Falls back to a mode-aware default.\n   */\n  textareaLabel?: string;\n  /**\n   * Textarea placeholder. Defaults change by mode.\n   */\n  placeholder?: string;\n  /**\n   * Extra textarea props (rows, maxLength…).\n   */\n  textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"value\" | \"onChange\">;\n}\n\nconst defaultPlaceholder: Record<ComposerMode, string> = {\n  chat: \"How can I help you today?\",\n  code: \"Type / for commands\",\n  infra: \"Ask about deploys, metrics, env, or rollback…\",\n};\n\nconst defaultTextareaLabel: Record<ComposerMode, string> = {\n  chat: \"Chat message\",\n  code: \"Code prompt\",\n  infra: \"Infra command\",\n};\n\n/**\n * ChatComposer — message input area, shared by Chat / Code / Infra modes.\n *\n * Visual:\n *   - chat / infra → soft card with violet ring on focus, generous padding\n *   - code          → compact dense form with mono font, slash prefix hint\n *\n * Stateless: caller controls `value` + handles `onSubmit`. Submit fires on Enter\n * (without Shift). Shift+Enter inserts a newline.\n *\n * Optional affordances (mic, attach) are opt-in via `onVoiceInput` / `onAttach`\n * — Quality Gate §7 forbids rendering fake controls without behavior.\n */\nconst ChatComposer = forwardRef<HTMLFormElement, ChatComposerProps>(\n  (\n    {\n      className,\n      mode = \"chat\",\n      value,\n      onValueChange,\n      onSubmit,\n      running = false,\n      onStop,\n      contextSlot,\n      attachmentsSlot,\n      leadingActions,\n      trailingActions,\n      onAttach,\n      onVoiceInput,\n      textareaLabel,\n      placeholder,\n      textareaProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleSubmit = (e: FormEvent) => {\n      e.preventDefault();\n      if (running) return;\n      if (!value.trim()) return;\n      onSubmit?.(value);\n    };\n\n    const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        if (running) return;\n        if (!value.trim()) return;\n        onSubmit?.(value);\n      }\n    };\n\n    const isCode = mode === \"code\";\n\n    return (\n      <form\n        ref={ref}\n        onSubmit={handleSubmit}\n        className={cn(\n          \"rounded-2xl border bg-card text-card-foreground transition-shadow\",\n          \"focus-within:border-primary/60 focus-within:shadow-glow\",\n          isCode && \"rounded-xl shadow-sm\",\n          className,\n        )}\n        {...props}\n      >\n        {contextSlot ? (\n          <div className=\"border-border/40 border-b px-3 pt-3\">{contextSlot}</div>\n        ) : null}\n\n        {attachmentsSlot ? (\n          <div className=\"flex flex-wrap gap-2 px-4 pt-3\">{attachmentsSlot}</div>\n        ) : null}\n\n        <textarea\n          value={value}\n          onChange={(e) => onValueChange(e.target.value)}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder ?? defaultPlaceholder[mode]}\n          aria-label={textareaLabel ?? defaultTextareaLabel[mode]}\n          rows={isCode ? 1 : 2}\n          {...textareaProps}\n          className={cn(\n            \"w-full resize-none bg-transparent px-4 py-3\",\n            \"placeholder:text-muted-foreground\",\n            \"focus:outline-none\",\n            isCode ? \"font-mono text-code-md\" : \"min-h-[3.5rem] font-sans text-body-md\",\n            textareaProps?.className,\n          )}\n        />\n\n        <div\n          className={cn(\n            \"flex items-center justify-between gap-2 border-border/40 border-t px-3 py-2\",\n          )}\n        >\n          <div className=\"flex items-center gap-1\">\n            {leadingActions !== undefined ? (\n              leadingActions\n            ) : onAttach ? (\n              <Button\n                size=\"icon\"\n                variant=\"ghost\"\n                type=\"button\"\n                onClick={onAttach}\n                aria-label=\"Attach file\"\n              >\n                <Paperclip />\n              </Button>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {trailingActions}\n            {onVoiceInput ? (\n              <Button\n                size=\"icon\"\n                variant=\"ghost\"\n                type=\"button\"\n                onClick={onVoiceInput}\n                aria-label=\"Voice input\"\n              >\n                <Mic />\n              </Button>\n            ) : null}\n            {running ? (\n              <Button\n                type=\"button\"\n                onClick={onStop}\n                size=\"icon\"\n                variant=\"destructive\"\n                aria-label=\"Stop generation\"\n              >\n                <Square />\n              </Button>\n            ) : (\n              <Button type=\"submit\" size=\"icon\" disabled={!value.trim()} aria-label=\"Send message\">\n                <Send />\n              </Button>\n            )}\n          </div>\n        </div>\n      </form>\n    );\n  },\n);\nChatComposer.displayName = \"ChatComposer\";\n\nexport { ChatComposer };\n"
+      "content": "import { Mic, Paperclip, Send, Square } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type {\n  FormEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"@/components/ui/button\";\n\nexport type ComposerMode = \"chat\" | \"code\" | \"infra\";\n\ninterface ChatComposerProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\"> {\n  mode?: ComposerMode;\n  value: string;\n  onValueChange: (next: string) => void;\n  onSubmit?: (value: string) => void;\n  /**\n   * If true, the composer is in \"agent running\" state — Send becomes a Stop button.\n   */\n  running?: boolean;\n  onStop?: () => void;\n  /**\n   * Slot above the textarea — used for the folder selector in Infra mode.\n   */\n  contextSlot?: ReactNode;\n  /**\n   * Slot above the textarea for attachments / chips.\n   */\n  attachmentsSlot?: ReactNode;\n  /**\n   * Slot on the bottom-left of the action row (e.g. custom toggles).\n   * Overrides the default attach button entirely when provided.\n   */\n  leadingActions?: ReactNode;\n  /**\n   * Slot on the bottom-right (e.g. model selector). Send/stop is appended after this.\n   */\n  trailingActions?: ReactNode;\n  /**\n   * Optional attach-file callback. If omitted (and `leadingActions` is also\n   * omitted), no attach button is rendered. This avoids fake affordances per\n   * Quality Gate §7.\n   */\n  onAttach?: () => void;\n  /**\n   * Optional voice-input callback. If omitted, no mic button is rendered.\n   * Same rationale as `onAttach`.\n   */\n  onVoiceInput?: () => void;\n  /**\n   * Accessible label for the textarea. Falls back to a mode-aware default.\n   */\n  textareaLabel?: string;\n  /**\n   * Textarea placeholder. Defaults change by mode.\n   */\n  placeholder?: string;\n  /**\n   * Extra textarea props (rows, maxLength…).\n   */\n  textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"value\" | \"onChange\">;\n}\n\nconst defaultPlaceholder: Record<ComposerMode, string> = {\n  chat: \"How can I help you today?\",\n  code: \"Type / for commands\",\n  infra: \"Ask about deploys, metrics, env, or rollback…\",\n};\n\nconst defaultTextareaLabel: Record<ComposerMode, string> = {\n  chat: \"Chat message\",\n  code: \"Code prompt\",\n  infra: \"Infra command\",\n};\n\n/**\n * ChatComposer — message input area, shared by Chat / Code / Infra modes.\n *\n * Visual:\n *   - chat / infra → soft card with violet ring on focus, generous padding\n *   - code          → compact dense form with mono font, slash prefix hint\n *\n * Stateless: caller controls `value` + handles `onSubmit`. Submit fires on Enter\n * (without Shift). Shift+Enter inserts a newline.\n *\n * Optional affordances (mic, attach) are opt-in via `onVoiceInput` / `onAttach`\n * — Quality Gate §7 forbids rendering fake controls without behavior.\n */\nconst ChatComposer = forwardRef<HTMLFormElement, ChatComposerProps>(\n  (\n    {\n      className,\n      mode = \"chat\",\n      value,\n      onValueChange,\n      onSubmit,\n      running = false,\n      onStop,\n      contextSlot,\n      attachmentsSlot,\n      leadingActions,\n      trailingActions,\n      onAttach,\n      onVoiceInput,\n      textareaLabel,\n      placeholder,\n      textareaProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleSubmit = (e: FormEvent) => {\n      e.preventDefault();\n      if (running) return;\n      if (!value.trim()) return;\n      onSubmit?.(value);\n    };\n\n    const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        if (running) return;\n        if (!value.trim()) return;\n        onSubmit?.(value);\n      }\n    };\n\n    const isCode = mode === \"code\";\n\n    return (\n      <form\n        data-slot=\"chat-composer\"\n        ref={ref}\n        onSubmit={handleSubmit}\n        className={cn(\n          \"rounded-2xl border bg-card text-card-foreground transition-shadow\",\n          \"focus-within:border-primary/60 focus-within:shadow-glow\",\n          isCode && \"rounded-xl shadow-sm\",\n          className,\n        )}\n        {...props}\n      >\n        {contextSlot ? (\n          <div className=\"border-border/40 border-b px-3 pt-3\">{contextSlot}</div>\n        ) : null}\n\n        {attachmentsSlot ? (\n          <div className=\"flex flex-wrap gap-2 px-4 pt-3\">{attachmentsSlot}</div>\n        ) : null}\n\n        <textarea\n          value={value}\n          onChange={(e) => onValueChange(e.target.value)}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder ?? defaultPlaceholder[mode]}\n          aria-label={textareaLabel ?? defaultTextareaLabel[mode]}\n          rows={isCode ? 1 : 2}\n          {...textareaProps}\n          className={cn(\n            \"w-full resize-none bg-transparent px-4 py-3\",\n            \"placeholder:text-muted-foreground\",\n            \"focus:outline-none\",\n            isCode ? \"font-mono text-code-md\" : \"min-h-[3.5rem] font-sans text-body-md\",\n            textareaProps?.className,\n          )}\n        />\n\n        <div\n          className={cn(\n            \"flex items-center justify-between gap-2 border-border/40 border-t px-3 py-2\",\n          )}\n        >\n          <div className=\"flex items-center gap-1\">\n            {leadingActions !== undefined ? (\n              leadingActions\n            ) : onAttach ? (\n              <Button\n                size=\"icon\"\n                variant=\"ghost\"\n                type=\"button\"\n                onClick={onAttach}\n                aria-label=\"Attach file\"\n              >\n                <Paperclip />\n              </Button>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {trailingActions}\n            {onVoiceInput ? (\n              <Button\n                size=\"icon\"\n                variant=\"ghost\"\n                type=\"button\"\n                onClick={onVoiceInput}\n                aria-label=\"Voice input\"\n              >\n                <Mic />\n              </Button>\n            ) : null}\n            {running ? (\n              <Button\n                type=\"button\"\n                onClick={onStop}\n                size=\"icon\"\n                variant=\"destructive\"\n                aria-label=\"Stop generation\"\n              >\n                <Square />\n              </Button>\n            ) : (\n              <Button type=\"submit\" size=\"icon\" disabled={!value.trim()} aria-label=\"Send message\">\n                <Send />\n              </Button>\n            )}\n          </div>\n        </div>\n      </form>\n    );\n  },\n);\nChatComposer.displayName = \"ChatComposer\";\n\nexport { ChatComposer };\n"
     }
   ]
 }