@usetheo/ui 0.12.0 → 0.13.1

package/registry/r/chat-message.json

@@ -14,6 +14,7 @@
     "https://usetheodev.github.io/theo-ui/r/cn.json",
     "https://usetheodev.github.io/theo-ui/r/safe-href.json",
     "https://usetheodev.github.io/theo-ui/r/button.json",
+    "https://usetheodev.github.io/theo-ui/r/agent-tool-renderer.json",
     "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
@@ -21,61 +22,55 @@
       "path": "components/composites/chat-message/chat-message.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message.tsx",
-      "content": "\"use client\";\n\n/**\n * `<ChatMessage>` — render a chat turn from a `UIMessage` (Vercel AI SDK\n * `parts: UIMessagePart[]` shape).\n *\n * Forked structural shell from `vercel/ai-elements` `<Message>` +\n * `<MessageContent>` (Apache-2.0, see NOTICE). The role-discriminated\n * styling (user-aligned right with secondary bubble, assistant-aligned\n * left with primary accent border) preserves TheoUI's Violet Forge look.\n *\n * Two consumption shapes:\n *\n *   1. **Convenience** — pass a full `UIMessage`, parts are dispatched to\n *      their built-in renderers automatically:\n *\n *        <ChatMessage message={msg} />\n *\n *   2. **Composable** — render children explicitly when you need to\n *      compose actions/branching/custom parts:\n *\n *        <ChatMessage.Root from=\"assistant\">\n *          <ChatMessage.Content>\n *            <ChatMessageResponse text=\"Hello **world**\" />\n *          </ChatMessage.Content>\n *          <ChatMessageToolbar>\n *            <ChatMessageActions>\n *              <ChatMessageAction tooltip=\"Copy\"><CopyIcon /></ChatMessageAction>\n *            </ChatMessageActions>\n *          </ChatMessageToolbar>\n *        </ChatMessage.Root>\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  type DataUIPart,\n  type FileUIPart,\n  type MessageRole,\n  type ReasoningFileUIPart,\n  type ReasoningUIPart,\n  type SourceDocumentUIPart,\n  type SourceUrlUIPart,\n  type TextUIPart,\n  type ToolUIPart,\n  type UIMessage,\n  type UIMessagePart,\n  isDataUIPart,\n  isFileUIPart,\n  isReasoningFileUIPart,\n  isReasoningUIPart,\n  isSourceDocumentUIPart,\n  isSourceUrlUIPart,\n  isStepStartUIPart,\n  isTextUIPart,\n  isToolUIPart,\n} from \"@/types/chat\";\nimport { DataPart, type DataRendererMap } from \"@/components/ui/chat-message/parts/data-part\";\nimport { FilePart } from \"@/components/ui/chat-message/parts/file-part\";\nimport { ReasoningPart } from \"@/components/ui/chat-message/parts/reasoning-part\";\nimport { SourceDocumentPart, SourceUrlPart } from \"@/components/ui/chat-message/parts/source-part\";\nimport { TextPart } from \"@/components/ui/chat-message/parts/text-part\";\nimport { ToolCallPart } from \"@/components/ui/chat-message/parts/tool-call-part\";\n\n/* ─── <ChatMessage.Root> ─────────────────────────────────────────────── */\n\nexport type ChatMessageRootProps = HTMLAttributes<HTMLDivElement> & {\n  /** Sender role — controls layout (right-aligned bubble for `user`, left for `assistant`/`system`). */\n  from: MessageRole;\n};\n\nexport const ChatMessageRoot = forwardRef<HTMLDivElement, ChatMessageRootProps>(\n  ({ className, from, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"group flex w-full max-w-[95%] flex-col gap-2\",\n        from === \"user\"\n          ? \"is-user ml-auto justify-end\"\n          : from === \"assistant\"\n            ? \"is-assistant\"\n            : \"is-system\",\n        className,\n      )}\n      data-theo-chat-message={from}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nChatMessageRoot.displayName = \"ChatMessageRoot\";\n\n/* ─── <ChatMessage.Content> ──────────────────────────────────────────── */\n\nexport type ChatMessageContentVariant = \"contained\" | \"flat\";\n\nexport interface ChatMessageContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `contained` (default) — bubble surface (background + padding + radius).\n   * Applied to user role automatically. Assistant defaults to `flat`.\n   *\n   * `flat` — no bubble, content flows directly. Use for assistant or system.\n   */\n  variant?: ChatMessageContentVariant;\n}\n\nexport const ChatMessageContent = forwardRef<HTMLDivElement, ChatMessageContentProps>(\n  ({ className, variant, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-body-md\",\n        // User bubble — secondary surface, right-aligned (within the `is-user` group)\n        \"group-[.is-user]:ml-auto\",\n        variant !== \"flat\" &&\n          \"group-[.is-user]:rounded-2xl group-[.is-user]:rounded-tr-md group-[.is-user]:border group-[.is-user]:border-border/40 group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3\",\n        // Assistant card — primary accent border-left\n        variant === \"contained\" &&\n          \"group-[.is-assistant]:rounded-2xl group-[.is-assistant]:rounded-tl-md group-[.is-assistant]:border group-[.is-assistant]:border-border/40 group-[.is-assistant]:border-l-2 group-[.is-assistant]:border-l-primary group-[.is-assistant]:bg-card group-[.is-assistant]:px-5 group-[.is-assistant]:py-4 group-[.is-assistant]:shadow-sm\",\n        // System callout — accent-deep border\n        \"group-[.is-system]:rounded-lg group-[.is-system]:border group-[.is-system]:border-accent-deep/40 group-[.is-system]:border-l-4 group-[.is-system]:bg-accent/10 group-[.is-system]:px-4 group-[.is-system]:py-2 group-[.is-system]:text-body-sm\",\n        \"group-[.is-assistant]:text-foreground group-[.is-user]:text-secondary-foreground\",\n        className,\n      )}\n      data-theo-chat-content=\"\"\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nChatMessageContent.displayName = \"ChatMessageContent\";\n\n/* ─── Part dispatch ──────────────────────────────────────────────────── */\n\nexport interface RenderPartOptions {\n  /** Consumer-defined renderers for `data-${name}` parts. */\n  dataRenderers?: DataRendererMap;\n  /** Override built-in renderers per part `type`. */\n  partRenderers?: PartRendererMap;\n}\n\nexport type PartRendererMap = Partial<{\n  text: (part: TextUIPart) => ReactNode;\n  reasoning: (part: ReasoningUIPart) => ReactNode;\n  \"reasoning-file\": (part: ReasoningFileUIPart) => ReactNode;\n  file: (part: FileUIPart) => ReactNode;\n  \"source-url\": (part: SourceUrlUIPart) => ReactNode;\n  \"source-document\": (part: SourceDocumentUIPart) => ReactNode;\n  tool: (part: ToolUIPart) => ReactNode;\n  data: (part: DataUIPart) => ReactNode;\n  \"step-start\": () => ReactNode;\n}>;\n\nexport function renderPart(part: UIMessagePart, opts: RenderPartOptions = {}): ReactNode {\n  const overrides = opts.partRenderers ?? {};\n\n  if (isTextUIPart(part)) {\n    return overrides.text?.(part) ?? <TextPart part={part} />;\n  }\n  if (isReasoningUIPart(part)) {\n    return overrides.reasoning?.(part) ?? <ReasoningPart part={part} />;\n  }\n  if (isReasoningFileUIPart(part)) {\n    return overrides[\"reasoning-file\"]?.(part) ?? null;\n  }\n  if (isFileUIPart(part)) {\n    return overrides.file?.(part) ?? <FilePart part={part} />;\n  }\n  if (isSourceUrlUIPart(part)) {\n    return overrides[\"source-url\"]?.(part) ?? <SourceUrlPart part={part} />;\n  }\n  if (isSourceDocumentUIPart(part)) {\n    return overrides[\"source-document\"]?.(part) ?? <SourceDocumentPart part={part} />;\n  }\n  if (isToolUIPart(part)) {\n    return overrides.tool?.(part) ?? <ToolCallPart part={part} />;\n  }\n  if (isDataUIPart(part)) {\n    return overrides.data?.(part) ?? <DataPart part={part} renderers={opts.dataRenderers} />;\n  }\n  if (isStepStartUIPart(part)) {\n    return (\n      overrides[\"step-start\"]?.() ?? (\n        <hr className=\"my-3 border-border\" aria-label=\"Step boundary\" />\n      )\n    );\n  }\n  // CustomContentUIPart, or any unhandled future kind — render nothing.\n  return null;\n}\n\n/* ─── <ChatMessage> convenience ──────────────────────────────────────── */\n\nexport interface ChatMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** The UI message to render. Parts are dispatched automatically. */\n  message: UIMessage;\n  /** Optional avatar slot rendered before assistant/system content. */\n  avatar?: ReactNode;\n  /** Optional toolbar (copy / regenerate / branch nav) rendered below the content. */\n  actions?: ReactNode;\n  /** Variant of the content bubble. */\n  variant?: ChatMessageContentVariant;\n  /** Override built-in part renderers. */\n  partRenderers?: PartRendererMap;\n  /** Renderers for `data-${name}` parts. */\n  dataRenderers?: DataRendererMap;\n}\n\nexport const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(\n  (\n    { message, avatar, actions, variant, partRenderers, dataRenderers, className, ...props },\n    ref,\n  ) => {\n    const inner = (\n      <ChatMessageContent\n        variant={variant ?? (message.role === \"assistant\" ? \"contained\" : undefined)}\n      >\n        {message.parts.map((part, idx) => (\n          <div key={`${part.type}-${idx}`}>\n            {renderPart(part, { dataRenderers, partRenderers })}\n          </div>\n        ))}\n        {actions}\n      </ChatMessageContent>\n    );\n\n    if (message.role === \"user\") {\n      return (\n        <ChatMessageRoot ref={ref} from=\"user\" className={className} {...props}>\n          {inner}\n          {avatar ? <div className=\"shrink-0\">{avatar}</div> : null}\n        </ChatMessageRoot>\n      );\n    }\n\n    return (\n      <ChatMessageRoot ref={ref} from={message.role} className={className} {...props}>\n        {avatar ? <div className=\"shrink-0\">{avatar}</div> : null}\n        {inner}\n      </ChatMessageRoot>\n    );\n  },\n);\nChatMessage.displayName = \"ChatMessage\";\n"
+      "content": "\"use client\";\n\n/**\n * `<ChatMessage>` — render a chat turn from a `UIMessage` (Vercel AI SDK\n * `parts: UIMessagePart[]` shape).\n *\n * Forked structural shell from `vercel/ai-elements` `<Message>` +\n * `<MessageContent>` (Apache-2.0, see NOTICE). The role-discriminated\n * styling (user-aligned right with secondary bubble, assistant-aligned\n * left with primary accent border) preserves TheoUI's Violet Forge look.\n *\n * Two consumption shapes:\n *\n *   1. **Convenience** — pass a full `UIMessage`, parts are dispatched to\n *      their built-in renderers automatically:\n *\n *        <ChatMessage message={msg} />\n *\n *   2. **Composable** — render children explicitly when you need to\n *      compose actions/branching/custom parts:\n *\n *        <ChatMessage.Root from=\"assistant\">\n *          <ChatMessage.Content>\n *            <ChatMessageResponse text=\"Hello **world**\" />\n *          </ChatMessage.Content>\n *          <ChatMessageToolbar>\n *            <ChatMessageActions>\n *              <ChatMessageAction tooltip=\"Copy\"><CopyIcon /></ChatMessageAction>\n *            </ChatMessageActions>\n *          </ChatMessageToolbar>\n *        </ChatMessage.Root>\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  type DataUIPart,\n  type FileUIPart,\n  type MessageRole,\n  type ReasoningFileUIPart,\n  type ReasoningUIPart,\n  type SourceDocumentUIPart,\n  type SourceUrlUIPart,\n  type TextUIPart,\n  type ToolUIPart,\n  type UIMessage,\n  type UIMessagePart,\n  isDataUIPart,\n  isFileUIPart,\n  isReasoningFileUIPart,\n  isReasoningUIPart,\n  isSourceDocumentUIPart,\n  isSourceUrlUIPart,\n  isStepStartUIPart,\n  isTextUIPart,\n  isToolUIPart,\n} from \"@/types/chat\";\nimport {\n  AgentToolRenderer,\n  type ClassifyTool,\n  type ToolRendererRegistry,\n} from \"@/components/ui/agent-tool-renderer/agent-tool-renderer\";\nimport { DataPart, type DataRendererMap } from \"@/components/ui/chat-message/parts/data-part\";\nimport { FilePart } from \"@/components/ui/chat-message/parts/file-part\";\nimport { ReasoningPart } from \"@/components/ui/chat-message/parts/reasoning-part\";\nimport { SourceDocumentPart, SourceUrlPart } from \"@/components/ui/chat-message/parts/source-part\";\nimport { TextPart } from \"@/components/ui/chat-message/parts/text-part\";\n\n/* ─── <ChatMessage.Root> ─────────────────────────────────────────────── */\n\nexport type ChatMessageRootProps = HTMLAttributes<HTMLDivElement> & {\n  /** Sender role — controls layout (right-aligned bubble for `user`, left for `assistant`/`system`). */\n  from: MessageRole;\n};\n\nexport const ChatMessageRoot = forwardRef<HTMLDivElement, ChatMessageRootProps>(\n  ({ className, from, children, ...props }, ref) => (\n    <div\n      data-slot=\"chat-message-root\"\n      ref={ref}\n      className={cn(\n        \"group flex w-full max-w-[95%] flex-col gap-2\",\n        from === \"user\"\n          ? \"is-user ml-auto justify-end\"\n          : from === \"assistant\"\n            ? \"is-assistant\"\n            : \"is-system\",\n        className,\n      )}\n      data-theo-chat-message={from}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nChatMessageRoot.displayName = \"ChatMessageRoot\";\n\n/* ─── <ChatMessage.Content> ──────────────────────────────────────────── */\n\nexport type ChatMessageContentVariant = \"contained\" | \"flat\";\n\nexport interface ChatMessageContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `contained` (default) — bubble surface (background + padding + radius).\n   * Applied to user role automatically. Assistant defaults to `flat`.\n   *\n   * `flat` — no bubble, content flows directly. Use for assistant or system.\n   */\n  variant?: ChatMessageContentVariant;\n}\n\nexport const ChatMessageContent = forwardRef<HTMLDivElement, ChatMessageContentProps>(\n  ({ className, variant, children, ...props }, ref) => (\n    <div\n      data-slot=\"chat-message-content\"\n      ref={ref}\n      className={cn(\n        \"flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-body-md\",\n        // User bubble — secondary surface, right-aligned (within the `is-user` group)\n        \"group-[.is-user]:ml-auto\",\n        variant !== \"flat\" &&\n          \"group-[.is-user]:rounded-2xl group-[.is-user]:rounded-tr-md group-[.is-user]:border group-[.is-user]:border-border/40 group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3\",\n        // Assistant card — primary accent border-left\n        variant === \"contained\" &&\n          \"group-[.is-assistant]:rounded-2xl group-[.is-assistant]:rounded-tl-md group-[.is-assistant]:border group-[.is-assistant]:border-border/40 group-[.is-assistant]:border-l-2 group-[.is-assistant]:border-l-primary group-[.is-assistant]:bg-card group-[.is-assistant]:px-5 group-[.is-assistant]:py-4 group-[.is-assistant]:shadow-sm\",\n        // System callout — accent-deep border\n        \"group-[.is-system]:rounded-lg group-[.is-system]:border group-[.is-system]:border-accent-deep/40 group-[.is-system]:border-l-4 group-[.is-system]:bg-accent/10 group-[.is-system]:px-4 group-[.is-system]:py-2 group-[.is-system]:text-body-sm\",\n        \"group-[.is-assistant]:text-foreground group-[.is-user]:text-secondary-foreground\",\n        className,\n      )}\n      data-theo-chat-content=\"\"\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nChatMessageContent.displayName = \"ChatMessageContent\";\n\n/* ─── Part dispatch ──────────────────────────────────────────────────── */\n\nexport interface RenderPartOptions {\n  /** Consumer-defined renderers for `data-${name}` parts. */\n  dataRenderers?: DataRendererMap;\n  /** Override built-in renderers per part `type`. */\n  partRenderers?: PartRendererMap;\n  /** Registry of rich tool renderers keyed by classification kind (M5-3). */\n  toolRenderers?: ToolRendererRegistry;\n  /** Override the default tool classifier (M5-3). */\n  classifyTool?: ClassifyTool;\n}\n\nexport type PartRendererMap = Partial<{\n  text: (part: TextUIPart) => ReactNode;\n  reasoning: (part: ReasoningUIPart) => ReactNode;\n  \"reasoning-file\": (part: ReasoningFileUIPart) => ReactNode;\n  file: (part: FileUIPart) => ReactNode;\n  \"source-url\": (part: SourceUrlUIPart) => ReactNode;\n  \"source-document\": (part: SourceDocumentUIPart) => ReactNode;\n  tool: (part: ToolUIPart) => ReactNode;\n  data: (part: DataUIPart) => ReactNode;\n  \"step-start\": () => ReactNode;\n}>;\n\nexport function renderPart(part: UIMessagePart, opts: RenderPartOptions = {}): ReactNode {\n  const overrides = opts.partRenderers ?? {};\n\n  if (isTextUIPart(part)) {\n    return overrides.text?.(part) ?? <TextPart part={part} />;\n  }\n  if (isReasoningUIPart(part)) {\n    return overrides.reasoning?.(part) ?? <ReasoningPart part={part} />;\n  }\n  if (isReasoningFileUIPart(part)) {\n    return overrides[\"reasoning-file\"]?.(part) ?? null;\n  }\n  if (isFileUIPart(part)) {\n    return overrides.file?.(part) ?? <FilePart part={part} />;\n  }\n  if (isSourceUrlUIPart(part)) {\n    return overrides[\"source-url\"]?.(part) ?? <SourceUrlPart part={part} />;\n  }\n  if (isSourceDocumentUIPart(part)) {\n    return overrides[\"source-document\"]?.(part) ?? <SourceDocumentPart part={part} />;\n  }\n  if (isToolUIPart(part)) {\n    if (overrides.tool) return overrides.tool(part);\n    return (\n      <AgentToolRenderer\n        part={part}\n        toolRenderers={opts.toolRenderers}\n        classifyTool={opts.classifyTool}\n      />\n    );\n  }\n  if (isDataUIPart(part)) {\n    return overrides.data?.(part) ?? <DataPart part={part} renderers={opts.dataRenderers} />;\n  }\n  if (isStepStartUIPart(part)) {\n    return (\n      overrides[\"step-start\"]?.() ?? (\n        <hr className=\"my-3 border-border\" aria-label=\"Step boundary\" />\n      )\n    );\n  }\n  // CustomContentUIPart, or any unhandled future kind — render nothing.\n  return null;\n}\n\n/* ─── <ChatMessage> convenience ──────────────────────────────────────── */\n\nexport interface ChatMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** The UI message to render. Parts are dispatched automatically. */\n  message: UIMessage;\n  /** Optional avatar slot rendered before assistant/system content. */\n  avatar?: ReactNode;\n  /** Optional toolbar (copy / regenerate / branch nav) rendered below the content. */\n  actions?: ReactNode;\n  /** Variant of the content bubble. */\n  variant?: ChatMessageContentVariant;\n  /** Override built-in part renderers. */\n  partRenderers?: PartRendererMap;\n  /** Renderers for `data-${name}` parts. */\n  dataRenderers?: DataRendererMap;\n  /** Registry of rich tool renderers keyed by classification kind (M5-3). */\n  toolRenderers?: ToolRendererRegistry;\n  /** Override the default tool classifier (M5-3). */\n  classifyTool?: ClassifyTool;\n}\n\nexport const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(\n  (\n    {\n      message,\n      avatar,\n      actions,\n      variant,\n      partRenderers,\n      dataRenderers,\n      toolRenderers,\n      classifyTool,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const inner = (\n      <ChatMessageContent\n        variant={variant ?? (message.role === \"assistant\" ? \"contained\" : undefined)}\n      >\n        {message.parts.map((part, idx) => (\n          <div key={`${part.type}-${idx}`}>\n            {renderPart(part, { dataRenderers, partRenderers, toolRenderers, classifyTool })}\n          </div>\n        ))}\n        {actions}\n      </ChatMessageContent>\n    );\n\n    if (message.role === \"user\") {\n      return (\n        <ChatMessageRoot\n          data-slot=\"chat-message\"\n          ref={ref}\n          from=\"user\"\n          className={className}\n          {...props}\n        >\n          {inner}\n          {avatar ? <div className=\"shrink-0\">{avatar}</div> : null}\n        </ChatMessageRoot>\n      );\n    }\n\n    return (\n      <ChatMessageRoot\n        data-slot=\"chat-message\"\n        ref={ref}\n        from={message.role}\n        className={className}\n        {...props}\n      >\n        {avatar ? <div className=\"shrink-0\">{avatar}</div> : null}\n        {inner}\n      </ChatMessageRoot>\n    );\n  },\n);\nChatMessage.displayName = \"ChatMessage\";\n"
     },
     {
       "path": "components/composites/chat-message/chat-message-response.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message-response.tsx",
-      "content": "\"use client\";\n\n/**\n * `<ChatMessageResponse>` — markdown text renderer for a chat message body.\n *\n * Wraps `parseMarkdownToReact` with React-friendly memoization. Re-renders\n * ONLY when `text` or `isStreaming` change, so streaming a long response\n * doesn't re-parse the entire conversation history per token.\n *\n * Internally swaps the default `<code>` element for `<CodeBlock>` (fenced)\n * or `<InlineCode>` (inline), per shadcn.io's AI code-block pattern.\n *\n * Component override pattern is forked from `vercel/ai-elements`\n * `<MessageResponse>` (Apache-2.0, see NOTICE).\n */\nimport { memo, useEffect, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { CodeBlock } from \"@/lib/markdown/code-block\";\nimport { InlineCode } from \"@/lib/markdown/inline-code\";\nimport { parseMarkdownToReactSafe } from \"@/lib/markdown/parser\";\n\nexport interface ChatMessageResponseProps {\n  /** Raw markdown text from the model. */\n  text: string;\n  /**\n   * True while tokens are still arriving. Enables the streaming-safe\n   * preprocess pass (auto-closes incomplete `**bold`, fences, links, math).\n   */\n  isStreaming?: boolean;\n  /** Extra className on the prose wrapper. */\n  className?: string;\n}\n\n/**\n * Decide whether a hast `code` element is inline (single-backtick) or a\n * fenced block. Heuristic: presence of `language-X` className on `<code>`,\n * or being wrapped in `<pre>` (the runtime sees that as parent). We can't\n * see the parent here, so we use the className signal — fenced code from\n * mdast-util-from-markdown always carries `language-*`.\n */\nfunction isFenced(props: Record<string, unknown>): boolean {\n  const cls = props.className as unknown as string | string[] | undefined;\n  if (typeof cls === \"string\") return cls.startsWith(\"language-\");\n  if (Array.isArray(cls))\n    return cls.some((c) => typeof c === \"string\" && c.startsWith(\"language-\"));\n  return false;\n}\n\nfunction extractLanguage(props: Record<string, unknown>): string | undefined {\n  const cls = props.className as unknown as string | string[] | undefined;\n  const list = typeof cls === \"string\" ? [cls] : Array.isArray(cls) ? cls : [];\n  for (const c of list) {\n    if (typeof c === \"string\" && c.startsWith(\"language-\")) {\n      return c.slice(\"language-\".length);\n    }\n  }\n  return undefined;\n}\n\nfunction extractText(children: ReactNode): string {\n  if (typeof children === \"string\") return children;\n  if (Array.isArray(children)) return children.map(extractText).join(\"\");\n  if (\n    children &&\n    typeof children === \"object\" &&\n    \"props\" in children &&\n    (children as { props?: { children?: ReactNode } }).props\n  ) {\n    return extractText((children as { props: { children?: ReactNode } }).props.children);\n  }\n  return \"\";\n}\n\nconst MARKDOWN_COMPONENTS: Record<string, unknown> = {\n  code: (props: Record<string, unknown> & { children?: ReactNode }) => {\n    if (isFenced(props)) {\n      const language = extractLanguage(props);\n      const code = extractText(props.children);\n      return <CodeBlock code={code} language={language} />;\n    }\n    return <InlineCode {...props}>{props.children}</InlineCode>;\n  },\n  // Strip the default `<pre>` since `<CodeBlock>` ships its own wrapper.\n  // Inline `<pre>` still works for raw whitespace-preserving text.\n  pre: ({ children }: { children?: ReactNode }) => {\n    return <>{children}</>;\n  },\n};\n\nfunction ChatMessageResponseImpl({\n  text,\n  isStreaming = false,\n  className,\n}: ChatMessageResponseProps): ReactElement {\n  const [tree, setTree] = useState<ReactElement | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    parseMarkdownToReactSafe(text, {\n      isStreaming,\n      components: MARKDOWN_COMPONENTS,\n    }).then((next) => {\n      if (!cancelled) setTree(next);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [text, isStreaming]);\n\n  return (\n    <div\n      className={cn(\n        \"prose-theo max-w-none text-body-md text-foreground leading-relaxed\",\n        // First/last child margin reset — fork from vercel/ai-elements\n        \"[&>*:first-child]:mt-0 [&>*:last-child]:mb-0\",\n        // Heading sizes inside chat use our typescale, not browser defaults\n        \"[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:font-semibold [&_h1]:text-title-lg\",\n        \"[&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:font-semibold [&_h2]:text-title-md\",\n        \"[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:font-semibold [&_h3]:text-body-lg\",\n        \"[&_p]:my-2\",\n        \"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5\",\n        \"[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5\",\n        \"[&_li]:my-0.5\",\n        \"[&_blockquote]:my-2 [&_blockquote]:border-primary/40 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground\",\n        \"[&_a:hover]:text-primary-deep [&_a]:text-primary [&_a]:underline\",\n        \"[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse\",\n        \"[&_th]:border [&_th]:border-border [&_th]:bg-muted/40 [&_th]:px-3 [&_th]:py-1.5 [&_th]:text-left\",\n        \"[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-1.5\",\n        \"[&_hr]:my-4 [&_hr]:border-border\",\n        className,\n      )}\n      data-theo-chat-response=\"\"\n    >\n      {tree}\n    </div>\n  );\n}\n\nexport const ChatMessageResponse = memo(ChatMessageResponseImpl, (prev, next) => {\n  return prev.text === next.text && prev.isStreaming === next.isStreaming;\n});\nChatMessageResponse.displayName = \"ChatMessageResponse\";\n"
+      "content": "\"use client\";\n\n/**\n * `<ChatMessageResponse>` — markdown text renderer for a chat message body.\n *\n * Wraps `parseMarkdownToReact` with React-friendly memoization. Re-renders\n * ONLY when `text` or `isStreaming` change, so streaming a long response\n * doesn't re-parse the entire conversation history per token.\n *\n * Internally swaps the default `<code>` element for `<CodeBlock>` (fenced)\n * or `<InlineCode>` (inline), per shadcn.io's AI code-block pattern.\n *\n * Component override pattern is forked from `vercel/ai-elements`\n * `<MessageResponse>` (Apache-2.0, see NOTICE).\n */\nimport { memo, useEffect, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { CodeBlock } from \"@/lib/markdown/code-block\";\nimport { InlineCode } from \"@/lib/markdown/inline-code\";\nimport { parseMarkdownToReactSafe } from \"@/lib/markdown/parser\";\n\nexport interface ChatMessageResponseProps {\n  /** Raw markdown text from the model. */\n  text: string;\n  /**\n   * True while tokens are still arriving. Enables the streaming-safe\n   * preprocess pass (auto-closes incomplete `**bold`, fences, links, math).\n   */\n  isStreaming?: boolean;\n  /** Extra className on the prose wrapper. */\n  className?: string;\n}\n\n/**\n * Decide whether a hast `code` element is inline (single-backtick) or a\n * fenced block. Heuristic: presence of `language-X` className on `<code>`,\n * or being wrapped in `<pre>` (the runtime sees that as parent). We can't\n * see the parent here, so we use the className signal — fenced code from\n * mdast-util-from-markdown always carries `language-*`.\n */\nfunction isFenced(props: Record<string, unknown>): boolean {\n  const cls = props.className as unknown as string | string[] | undefined;\n  if (typeof cls === \"string\") return cls.startsWith(\"language-\");\n  if (Array.isArray(cls))\n    return cls.some((c) => typeof c === \"string\" && c.startsWith(\"language-\"));\n  return false;\n}\n\nfunction extractLanguage(props: Record<string, unknown>): string | undefined {\n  const cls = props.className as unknown as string | string[] | undefined;\n  const list = typeof cls === \"string\" ? [cls] : Array.isArray(cls) ? cls : [];\n  for (const c of list) {\n    if (typeof c === \"string\" && c.startsWith(\"language-\")) {\n      return c.slice(\"language-\".length);\n    }\n  }\n  return undefined;\n}\n\nfunction extractText(children: ReactNode): string {\n  if (typeof children === \"string\") return children;\n  if (Array.isArray(children)) return children.map(extractText).join(\"\");\n  if (\n    children &&\n    typeof children === \"object\" &&\n    \"props\" in children &&\n    (children as { props?: { children?: ReactNode } }).props\n  ) {\n    return extractText((children as { props: { children?: ReactNode } }).props.children);\n  }\n  return \"\";\n}\n\nconst MARKDOWN_COMPONENTS: Record<string, unknown> = {\n  code: (props: Record<string, unknown> & { children?: ReactNode }) => {\n    if (isFenced(props)) {\n      const language = extractLanguage(props);\n      const code = extractText(props.children);\n      return <CodeBlock code={code} language={language} />;\n    }\n    return <InlineCode {...props}>{props.children}</InlineCode>;\n  },\n  // Strip the default `<pre>` since `<CodeBlock>` ships its own wrapper.\n  // Inline `<pre>` still works for raw whitespace-preserving text.\n  pre: ({ children }: { children?: ReactNode }) => {\n    return <>{children}</>;\n  },\n};\n\nfunction ChatMessageResponseImpl({\n  text,\n  isStreaming = false,\n  className,\n}: ChatMessageResponseProps): ReactElement {\n  const [tree, setTree] = useState<ReactElement | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    parseMarkdownToReactSafe(text, {\n      isStreaming,\n      components: MARKDOWN_COMPONENTS,\n    }).then((next) => {\n      if (!cancelled) setTree(next);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [text, isStreaming]);\n\n  return (\n    <div\n      data-slot=\"chat-message-response-impl\"\n      className={cn(\n        \"prose-theo max-w-none text-body-md text-foreground leading-relaxed\",\n        // First/last child margin reset — fork from vercel/ai-elements\n        \"[&>*:first-child]:mt-0 [&>*:last-child]:mb-0\",\n        // Heading sizes inside chat use our typescale, not browser defaults\n        \"[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:font-semibold [&_h1]:text-title-lg\",\n        \"[&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:font-semibold [&_h2]:text-title-md\",\n        \"[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:font-semibold [&_h3]:text-body-lg\",\n        \"[&_p]:my-2\",\n        \"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5\",\n        \"[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5\",\n        \"[&_li]:my-0.5\",\n        \"[&_blockquote]:my-2 [&_blockquote]:border-primary/40 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground\",\n        \"[&_a:hover]:text-primary-deep [&_a]:text-primary [&_a]:underline\",\n        \"[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse\",\n        \"[&_th]:border [&_th]:border-border [&_th]:bg-muted/40 [&_th]:px-3 [&_th]:py-1.5 [&_th]:text-left\",\n        \"[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-1.5\",\n        \"[&_hr]:my-4 [&_hr]:border-border\",\n        className,\n      )}\n      data-theo-chat-response=\"\"\n    >\n      {tree}\n    </div>\n  );\n}\n\nexport const ChatMessageResponse = memo(ChatMessageResponseImpl, (prev, next) => {\n  return prev.text === next.text && prev.isStreaming === next.isStreaming;\n});\nChatMessageResponse.displayName = \"ChatMessageResponse\";\n"
     },
     {
       "path": "components/composites/chat-message/chat-message-actions.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message-actions.tsx",
-      "content": "/**\n * `<ChatMessageActions>` + `<ChatMessageAction>` — footer toolbar for a chat\n * message (copy, regenerate, thumbs up/down, share, edit, …).\n *\n * Forked from `vercel/ai-elements` `<MessageActions>` + `<MessageAction>`\n * (Apache-2.0, see NOTICE). Adapted to TheoUI primitives: `<Button>` from\n * `@usetheo/ui` instead of shadcn, no Tooltip primitive yet (Vercel uses\n * one — we render the `tooltip` prop as a `title` attribute for now; a\n * proper Tooltip primitive lands in a follow-up RFC).\n */\nimport type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"@/components/ui/button\";\n\nexport type ChatMessageActionsProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChatMessageActions({\n  className,\n  children,\n  ...props\n}: ChatMessageActionsProps): JSX.Element {\n  return (\n    <div className={cn(\"flex items-center gap-1\", className)} data-theo-chat-actions=\"\" {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport type ChatMessageActionProps = ComponentProps<typeof Button> & {\n  /** Tooltip text — rendered as native `title` for now. */\n  tooltip?: string;\n  /** Accessible label (used by screen readers when only an icon is visible). */\n  label?: string;\n  children?: ReactNode;\n};\n\nexport function ChatMessageAction({\n  tooltip,\n  label,\n  variant = \"ghost\",\n  size = \"icon\",\n  className,\n  children,\n  ...props\n}: ChatMessageActionProps): JSX.Element {\n  return (\n    <Button\n      type=\"button\"\n      variant={variant}\n      size={size}\n      title={tooltip}\n      className={cn(className)}\n      {...props}\n    >\n      {children}\n      <span className=\"sr-only\">{label || tooltip}</span>\n    </Button>\n  );\n}\n"
+      "content": "/**\n * `<ChatMessageActions>` + `<ChatMessageAction>` — footer toolbar for a chat\n * message (copy, regenerate, thumbs up/down, share, edit, …).\n *\n * Forked from `vercel/ai-elements` `<MessageActions>` + `<MessageAction>`\n * (Apache-2.0, see NOTICE). Adapted to TheoUI primitives: `<Button>` from\n * `@theokit/ui` instead of shadcn, no Tooltip primitive yet (Vercel uses\n * one — we render the `tooltip` prop as a `title` attribute for now; a\n * proper Tooltip primitive lands in a follow-up RFC).\n */\nimport type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"@/components/ui/button\";\n\nexport type ChatMessageActionsProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChatMessageActions({\n  className,\n  children,\n  ...props\n}: ChatMessageActionsProps): JSX.Element {\n  return (\n    <div\n      data-slot=\"chat-message-actions\"\n      className={cn(\"flex items-center gap-1\", className)}\n      data-theo-chat-actions=\"\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ChatMessageActionProps = ComponentProps<typeof Button> & {\n  /** Tooltip text — rendered as native `title` for now. */\n  tooltip?: string;\n  /** Accessible label (used by screen readers when only an icon is visible). */\n  label?: string;\n  children?: ReactNode;\n};\n\nexport function ChatMessageAction({\n  tooltip,\n  label,\n  variant = \"ghost\",\n  size = \"icon\",\n  className,\n  children,\n  ...props\n}: ChatMessageActionProps): JSX.Element {\n  return (\n    <Button\n      data-slot=\"chat-message-action\"\n      type=\"button\"\n      variant={variant}\n      size={size}\n      title={tooltip}\n      className={cn(className)}\n      {...props}\n    >\n      {children}\n      <span className=\"sr-only\">{label || tooltip}</span>\n    </Button>\n  );\n}\n"
     },
     {
       "path": "components/composites/chat-message/chat-message-toolbar.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message-toolbar.tsx",
-      "content": "/**\n * `<ChatMessageToolbar>` — bottom-of-message bar holding actions + branch nav.\n * Forked from `vercel/ai-elements` `<MessageToolbar>` (Apache-2.0, NOTICE).\n */\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type ChatMessageToolbarProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChatMessageToolbar({\n  className,\n  children,\n  ...props\n}: ChatMessageToolbarProps): JSX.Element {\n  return (\n    <div\n      className={cn(\"mt-3 flex w-full items-center justify-between gap-3\", className)}\n      data-theo-chat-toolbar=\"\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"
+      "content": "/**\n * `<ChatMessageToolbar>` — bottom-of-message bar holding actions + branch nav.\n * Forked from `vercel/ai-elements` `<MessageToolbar>` (Apache-2.0, NOTICE).\n */\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type ChatMessageToolbarProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChatMessageToolbar({\n  className,\n  children,\n  ...props\n}: ChatMessageToolbarProps): JSX.Element {\n  return (\n    <div\n      data-slot=\"chat-message-toolbar\"\n      className={cn(\"mt-3 flex w-full items-center justify-between gap-3\", className)}\n      data-theo-chat-toolbar=\"\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"
     },
     {
       "path": "components/composites/chat-message/chat-message-branch.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message-branch.tsx",
-      "content": "\"use client\";\n\n/**\n * Message branching navigation — render multiple alternate responses for a\n * single conversation turn and let the user swipe between them.\n *\n * Forked from `vercel/ai-elements` `<MessageBranch*>` family (Apache-2.0,\n * see NOTICE). Adapted to TheoUI primitives — replaces shadcn `Button` +\n * `ButtonGroup` with our `<Button>` (no ButtonGroup primitive yet; rendered\n * as a plain wrapper).\n *\n * Composition:\n *\n *   <ChatMessageBranch>\n *     <ChatMessageBranchContent>\n *       <FirstResponse />\n *       <SecondResponse />\n *       <ThirdResponse />\n *     </ChatMessageBranchContent>\n *     <ChatMessageBranchSelector>\n *       <ChatMessageBranchPrevious />\n *       <ChatMessageBranchPage />\n *       <ChatMessageBranchNext />\n *     </ChatMessageBranchSelector>\n *   </ChatMessageBranch>\n */\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type HTMLAttributes,\n  type ReactElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface MessageBranchContextValue {\n  currentBranch: number;\n  totalBranches: number;\n  goToPrevious: () => void;\n  goToNext: () => void;\n  branches: ReactElement[];\n  setBranches: (branches: ReactElement[]) => void;\n}\n\nconst MessageBranchContext = createContext<MessageBranchContextValue | null>(null);\n\nfunction useMessageBranch(): MessageBranchContextValue {\n  const ctx = useContext(MessageBranchContext);\n  if (!ctx) {\n    throw new Error(\"ChatMessageBranch* components must be wrapped in <ChatMessageBranch>.\");\n  }\n  return ctx;\n}\n\nexport type ChatMessageBranchProps = HTMLAttributes<HTMLDivElement> & {\n  defaultBranch?: number;\n  onBranchChange?: (branchIndex: number) => void;\n};\n\nexport function ChatMessageBranch({\n  defaultBranch = 0,\n  onBranchChange,\n  className,\n  ...props\n}: ChatMessageBranchProps): JSX.Element {\n  const [currentBranch, setCurrentBranch] = useState(defaultBranch);\n  const [branches, setBranches] = useState<ReactElement[]>([]);\n\n  const handleChange = useCallback(\n    (next: number) => {\n      setCurrentBranch(next);\n      onBranchChange?.(next);\n    },\n    [onBranchChange],\n  );\n\n  const goToPrevious = useCallback(() => {\n    handleChange(currentBranch > 0 ? currentBranch - 1 : branches.length - 1);\n  }, [currentBranch, branches.length, handleChange]);\n\n  const goToNext = useCallback(() => {\n    handleChange(currentBranch < branches.length - 1 ? currentBranch + 1 : 0);\n  }, [currentBranch, branches.length, handleChange]);\n\n  const value = useMemo<MessageBranchContextValue>(\n    () => ({\n      branches,\n      currentBranch,\n      goToNext,\n      goToPrevious,\n      setBranches,\n      totalBranches: branches.length,\n    }),\n    [branches, currentBranch, goToNext, goToPrevious],\n  );\n\n  return (\n    <MessageBranchContext.Provider value={value}>\n      <div className={cn(\"grid w-full gap-2\", className)} {...props} />\n    </MessageBranchContext.Provider>\n  );\n}\n\nexport type ChatMessageBranchContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChatMessageBranchContent({\n  children,\n  ...props\n}: ChatMessageBranchContentProps): JSX.Element {\n  const { currentBranch, setBranches, branches } = useMessageBranch();\n  const childrenArray = useMemo(\n    () => (Array.isArray(children) ? (children as ReactElement[]) : [children as ReactElement]),\n    [children],\n  );\n\n  useEffect(() => {\n    if (branches.length !== childrenArray.length) {\n      setBranches(childrenArray);\n    }\n  }, [childrenArray, branches, setBranches]);\n\n  return (\n    <>\n      {childrenArray.map((branch, idx) => (\n        <div\n          className={cn(\"grid gap-2 overflow-hidden\", idx === currentBranch ? \"block\" : \"hidden\")}\n          key={\n            // Prefer a stable element key; fall back to index\n            (branch as ReactElement)?.key ?? `branch-${idx}`\n          }\n          {...props}\n        >\n          {branch}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport type ChatMessageBranchSelectorProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChatMessageBranchSelector({\n  className,\n  ...props\n}: ChatMessageBranchSelectorProps): JSX.Element | null {\n  const { totalBranches } = useMessageBranch();\n  if (totalBranches <= 1) return null;\n  return (\n    <div\n      className={cn(\"inline-flex items-center gap-0.5 rounded-md border border-border\", className)}\n      role=\"group\"\n      aria-label=\"Branch selector\"\n      {...props}\n    />\n  );\n}\n\nexport type ChatMessageBranchPreviousProps = ComponentProps<typeof Button>;\n\nexport function ChatMessageBranchPrevious({\n  children,\n  ...props\n}: ChatMessageBranchPreviousProps): JSX.Element {\n  const { goToPrevious, totalBranches } = useMessageBranch();\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon\"\n      aria-label=\"Previous branch\"\n      disabled={totalBranches <= 1}\n      onClick={goToPrevious}\n      {...props}\n    >\n      {children ?? <ChevronLeftIcon className=\"size-3.5\" aria-hidden=\"true\" />}\n    </Button>\n  );\n}\n\nexport type ChatMessageBranchNextProps = ComponentProps<typeof Button>;\n\nexport function ChatMessageBranchNext({\n  children,\n  ...props\n}: ChatMessageBranchNextProps): JSX.Element {\n  const { goToNext, totalBranches } = useMessageBranch();\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon\"\n      aria-label=\"Next branch\"\n      disabled={totalBranches <= 1}\n      onClick={goToNext}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon className=\"size-3.5\" aria-hidden=\"true\" />}\n    </Button>\n  );\n}\n\nexport type ChatMessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;\n\nexport function ChatMessageBranchPage({\n  className,\n  ...props\n}: ChatMessageBranchPageProps): JSX.Element {\n  const { currentBranch, totalBranches } = useMessageBranch();\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center px-2 font-mono text-label-caps text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {currentBranch + 1} of {totalBranches}\n    </span>\n  );\n}\n"
+      "content": "\"use client\";\n\n/**\n * Message branching navigation — render multiple alternate responses for a\n * single conversation turn and let the user swipe between them.\n *\n * Forked from `vercel/ai-elements` `<MessageBranch*>` family (Apache-2.0,\n * see NOTICE). Adapted to TheoUI primitives — replaces shadcn `Button` +\n * `ButtonGroup` with our `<Button>` (no ButtonGroup primitive yet; rendered\n * as a plain wrapper).\n *\n * Composition:\n *\n *   <ChatMessageBranch>\n *     <ChatMessageBranchContent>\n *       <FirstResponse />\n *       <SecondResponse />\n *       <ThirdResponse />\n *     </ChatMessageBranchContent>\n *     <ChatMessageBranchSelector>\n *       <ChatMessageBranchPrevious />\n *       <ChatMessageBranchPage />\n *       <ChatMessageBranchNext />\n *     </ChatMessageBranchSelector>\n *   </ChatMessageBranch>\n */\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type HTMLAttributes,\n  type ReactElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface MessageBranchContextValue {\n  currentBranch: number;\n  totalBranches: number;\n  goToPrevious: () => void;\n  goToNext: () => void;\n  branches: ReactElement[];\n  setBranches: (branches: ReactElement[]) => void;\n}\n\nconst MessageBranchContext = createContext<MessageBranchContextValue | null>(null);\n\nfunction useMessageBranch(): MessageBranchContextValue {\n  const ctx = useContext(MessageBranchContext);\n  if (!ctx) {\n    throw new Error(\"ChatMessageBranch* components must be wrapped in <ChatMessageBranch>.\");\n  }\n  return ctx;\n}\n\nexport type ChatMessageBranchProps = HTMLAttributes<HTMLDivElement> & {\n  defaultBranch?: number;\n  onBranchChange?: (branchIndex: number) => void;\n};\n\nexport function ChatMessageBranch({\n  defaultBranch = 0,\n  onBranchChange,\n  className,\n  ...props\n}: ChatMessageBranchProps): JSX.Element {\n  const [currentBranch, setCurrentBranch] = useState(defaultBranch);\n  const [branches, setBranches] = useState<ReactElement[]>([]);\n\n  const handleChange = useCallback(\n    (next: number) => {\n      setCurrentBranch(next);\n      onBranchChange?.(next);\n    },\n    [onBranchChange],\n  );\n\n  const goToPrevious = useCallback(() => {\n    handleChange(currentBranch > 0 ? currentBranch - 1 : branches.length - 1);\n  }, [currentBranch, branches.length, handleChange]);\n\n  const goToNext = useCallback(() => {\n    handleChange(currentBranch < branches.length - 1 ? currentBranch + 1 : 0);\n  }, [currentBranch, branches.length, handleChange]);\n\n  const value = useMemo<MessageBranchContextValue>(\n    () => ({\n      branches,\n      currentBranch,\n      goToNext,\n      goToPrevious,\n      setBranches,\n      totalBranches: branches.length,\n    }),\n    [branches, currentBranch, goToNext, goToPrevious],\n  );\n\n  return (\n    <MessageBranchContext.Provider data-slot=\"chat-message-branch\" value={value}>\n      <div className={cn(\"grid w-full gap-2\", className)} {...props} />\n    </MessageBranchContext.Provider>\n  );\n}\n\nexport type ChatMessageBranchContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChatMessageBranchContent({\n  children,\n  ...props\n}: ChatMessageBranchContentProps): JSX.Element {\n  const { currentBranch, setBranches, branches } = useMessageBranch();\n  const childrenArray = useMemo(\n    () => (Array.isArray(children) ? (children as ReactElement[]) : [children as ReactElement]),\n    [children],\n  );\n\n  useEffect(() => {\n    if (branches.length !== childrenArray.length) {\n      setBranches(childrenArray);\n    }\n  }, [childrenArray, branches, setBranches]);\n\n  return (\n    <>\n      {childrenArray.map((branch, idx) => (\n        <div\n          className={cn(\"grid gap-2 overflow-hidden\", idx === currentBranch ? \"block\" : \"hidden\")}\n          key={\n            // Prefer a stable element key; fall back to index\n            (branch as ReactElement)?.key ?? `branch-${idx}`\n          }\n          {...props}\n        >\n          {branch}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport type ChatMessageBranchSelectorProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChatMessageBranchSelector({\n  className,\n  ...props\n}: ChatMessageBranchSelectorProps): JSX.Element | null {\n  const { totalBranches } = useMessageBranch();\n  if (totalBranches <= 1) return null;\n  return (\n    <div\n      className={cn(\"inline-flex items-center gap-0.5 rounded-md border border-border\", className)}\n      role=\"group\"\n      aria-label=\"Branch selector\"\n      {...props}\n    />\n  );\n}\n\nexport type ChatMessageBranchPreviousProps = ComponentProps<typeof Button>;\n\nexport function ChatMessageBranchPrevious({\n  children,\n  ...props\n}: ChatMessageBranchPreviousProps): JSX.Element {\n  const { goToPrevious, totalBranches } = useMessageBranch();\n  return (\n    <Button\n      data-slot=\"chat-message-branch-previous\"\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon\"\n      aria-label=\"Previous branch\"\n      disabled={totalBranches <= 1}\n      onClick={goToPrevious}\n      {...props}\n    >\n      {children ?? <ChevronLeftIcon className=\"size-3.5\" aria-hidden=\"true\" />}\n    </Button>\n  );\n}\n\nexport type ChatMessageBranchNextProps = ComponentProps<typeof Button>;\n\nexport function ChatMessageBranchNext({\n  children,\n  ...props\n}: ChatMessageBranchNextProps): JSX.Element {\n  const { goToNext, totalBranches } = useMessageBranch();\n  return (\n    <Button\n      data-slot=\"chat-message-branch-next\"\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon\"\n      aria-label=\"Next branch\"\n      disabled={totalBranches <= 1}\n      onClick={goToNext}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon className=\"size-3.5\" aria-hidden=\"true\" />}\n    </Button>\n  );\n}\n\nexport type ChatMessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;\n\nexport function ChatMessageBranchPage({\n  className,\n  ...props\n}: ChatMessageBranchPageProps): JSX.Element {\n  const { currentBranch, totalBranches } = useMessageBranch();\n  return (\n    <span\n      data-slot=\"chat-message-branch-page\"\n      className={cn(\n        \"inline-flex items-center px-2 font-mono text-label-caps text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {currentBranch + 1} of {totalBranches}\n    </span>\n  );\n}\n"
     },
     {
       "path": "components/composites/chat-message/parts/text-part.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message/parts/text-part.tsx",
-      "content": "/**\n * `<TextPart>` — renders a `TextUIPart`.\n *\n * Delegates to `<ChatMessageResponse>` which handles markdown + streaming\n * preprocess + code-block highlight + memoization.\n */\nimport type { TextUIPart } from \"@/types/chat\";\nimport { ChatMessageResponse } from \"@/components/ui/chat-message-response\";\n\nexport interface TextPartProps {\n  part: TextUIPart;\n}\n\nexport function TextPart({ part }: TextPartProps): JSX.Element {\n  return <ChatMessageResponse text={part.text} isStreaming={part.state === \"streaming\"} />;\n}\n"
+      "content": "/**\n * `<TextPart>` — renders a `TextUIPart`.\n *\n * Delegates to `<ChatMessageResponse>` which handles markdown + streaming\n * preprocess + code-block highlight + memoization.\n */\nimport type { TextUIPart } from \"@/types/chat\";\nimport { ChatMessageResponse } from \"@/components/ui/chat-message-response\";\n\nexport interface TextPartProps {\n  part: TextUIPart;\n}\n\nexport function TextPart({ part }: TextPartProps): JSX.Element {\n  return (\n    <ChatMessageResponse\n      data-slot=\"text-part\"\n      text={part.text}\n      isStreaming={part.state === \"streaming\"}\n    />\n  );\n}\n"
     },
     {
       "path": "components/composites/chat-message/parts/reasoning-part.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message/parts/reasoning-part.tsx",
-      "content": "/**\n * `<ReasoningPart>` — renders a `ReasoningUIPart` as a native `<details>`\n * collapsible. The summary shows \"Show reasoning\" / \"Hide reasoning\";\n * expanded content is rendered as markdown via `<ChatMessageResponse>`.\n *\n * Native `<details>` (vs a JS-driven Collapsible) — zero JS for the toggle,\n * keyboard accessible by default, persists state via the DOM.\n */\nimport { BrainCircuitIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/cn\";\nimport type { ReasoningUIPart } from \"@/types/chat\";\nimport { ChatMessageResponse } from \"@/components/ui/chat-message-response\";\n\nexport interface ReasoningPartProps {\n  part: ReasoningUIPart;\n  /** Open by default. Useful while the model is still streaming reasoning. */\n  defaultOpen?: boolean;\n}\n\nexport function ReasoningPart({ part, defaultOpen }: ReasoningPartProps): JSX.Element {\n  const isStreaming = part.state === \"streaming\";\n  const open = defaultOpen ?? isStreaming;\n  return (\n    <details\n      className={cn(\n        \"my-2 rounded-md border border-border bg-muted/20 px-3 py-2\",\n        \"[&[open]]:bg-muted/40\",\n      )}\n      open={open}\n      data-theo-reasoning=\"\"\n    >\n      <summary\n        className={cn(\n          \"cursor-pointer list-none font-mono text-label-caps text-muted-foreground uppercase tracking-wider\",\n          \"flex items-center gap-1.5 marker:hidden\",\n          \"transition-colors hover:text-foreground\",\n        )}\n      >\n        <BrainCircuitIcon className=\"size-3.5\" aria-hidden=\"true\" />\n        <span>Reasoning</span>\n        {isStreaming ? <span className=\"text-primary/80\">…</span> : null}\n      </summary>\n      <div className=\"mt-2 border-border border-t pt-2\">\n        <ChatMessageResponse text={part.text} isStreaming={isStreaming} />\n      </div>\n    </details>\n  );\n}\n"
-    },
-    {
-      "path": "components/composites/chat-message/parts/tool-call-part.tsx",
-      "type": "registry:ui",
-      "target": "components/ui/chat-message/parts/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      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"
+      "content": "/**\n * `<ReasoningPart>` — renders a `ReasoningUIPart` as a native `<details>`\n * collapsible. The summary shows \"Show reasoning\" / \"Hide reasoning\";\n * expanded content is rendered as markdown via `<ChatMessageResponse>`.\n *\n * Native `<details>` (vs a JS-driven Collapsible) — zero JS for the toggle,\n * keyboard accessible by default, persists state via the DOM.\n */\nimport { BrainCircuitIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/cn\";\nimport type { ReasoningUIPart } from \"@/types/chat\";\nimport { ChatMessageResponse } from \"@/components/ui/chat-message-response\";\n\nexport interface ReasoningPartProps {\n  part: ReasoningUIPart;\n  /** Open by default. Useful while the model is still streaming reasoning. */\n  defaultOpen?: boolean;\n}\n\nexport function ReasoningPart({ part, defaultOpen }: ReasoningPartProps): JSX.Element {\n  const isStreaming = part.state === \"streaming\";\n  const open = defaultOpen ?? isStreaming;\n  return (\n    <details\n      data-slot=\"reasoning-part\"\n      className={cn(\n        \"my-2 rounded-md border border-border bg-muted/20 px-3 py-2\",\n        \"[&[open]]:bg-muted/40\",\n      )}\n      open={open}\n      data-theo-reasoning=\"\"\n    >\n      <summary\n        className={cn(\n          \"cursor-pointer list-none font-mono text-label-caps text-muted-foreground uppercase tracking-wider\",\n          \"flex items-center gap-1.5 marker:hidden\",\n          \"transition-colors hover:text-foreground\",\n        )}\n      >\n        <BrainCircuitIcon className=\"size-3.5\" aria-hidden=\"true\" />\n        <span>Reasoning</span>\n        {isStreaming ? <span className=\"text-primary/80\">…</span> : null}\n      </summary>\n      <div className=\"mt-2 border-border border-t pt-2\">\n        <ChatMessageResponse text={part.text} isStreaming={isStreaming} />\n      </div>\n    </details>\n  );\n}\n"
     },
     {
       "path": "components/composites/chat-message/parts/file-part.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message/parts/file-part.tsx",
-      "content": "/**\n * `<FilePart>` — renders a `FileUIPart` as an image preview (`image/*`) or\n * a generic file chip (everything else).\n *\n * Security: only `http(s)` and `data:` URLs render. Anything else degrades\n * to a plain text label.\n */\nimport { FileIcon, ImageIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport type { FileUIPart } from \"@/types/chat\";\n\nexport interface FilePartProps {\n  part: FileUIPart;\n}\n\nfunction isImage(mediaType: string): boolean {\n  return mediaType.startsWith(\"image/\") || mediaType === \"image\";\n}\n\nexport function FilePart({ part }: FilePartProps): JSX.Element {\n  const safeUrl = safeHref(part.url);\n  const label = part.filename ?? part.url.split(\"/\").pop() ?? \"file\";\n\n  if (isImage(part.mediaType)) {\n    if (!safeUrl) {\n      return (\n        <div\n          className={cn(\n            \"my-2 inline-flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2\",\n            \"text-body-sm text-muted-foreground\",\n          )}\n        >\n          <ImageIcon className=\"size-4\" aria-hidden=\"true\" />\n          <span>{label}</span>\n          <span className=\"text-destructive\">(blocked)</span>\n        </div>\n      );\n    }\n    return (\n      <figure\n        className=\"my-3 overflow-hidden rounded-lg border border-border\"\n        data-theo-file=\"image\"\n      >\n        <img src={safeUrl} alt={label} className=\"block max-w-full\" loading=\"lazy\" />\n        {part.filename ? (\n          <figcaption className=\"border-border border-t bg-muted/30 px-3 py-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {part.filename}\n          </figcaption>\n        ) : null}\n      </figure>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        \"my-2 inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2\",\n        \"text-body-sm\",\n      )}\n      data-theo-file=\"generic\"\n    >\n      <FileIcon className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n      {safeUrl ? (\n        <a href={safeUrl} className=\"text-primary hover:text-primary-deep hover:underline\">\n          {label}\n        </a>\n      ) : (\n        <span>{label}</span>\n      )}\n      <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n        {part.mediaType}\n      </span>\n    </div>\n  );\n}\n"
+      "content": "/**\n * `<FilePart>` — renders a `FileUIPart` as an image preview (`image/*`) or\n * a generic file chip (everything else).\n *\n * Security: only `http(s)` and `data:` URLs render. Anything else degrades\n * to a plain text label.\n */\nimport { FileIcon, ImageIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport type { FileUIPart } from \"@/types/chat\";\n\nexport interface FilePartProps {\n  part: FileUIPart;\n}\n\nfunction isImage(mediaType: string): boolean {\n  return mediaType.startsWith(\"image/\") || mediaType === \"image\";\n}\n\nexport function FilePart({ part }: FilePartProps): JSX.Element {\n  const safeUrl = safeHref(part.url);\n  const label = part.filename ?? part.url.split(\"/\").pop() ?? \"file\";\n\n  if (isImage(part.mediaType)) {\n    if (!safeUrl) {\n      return (\n        <div\n          data-slot=\"file-part\"\n          className={cn(\n            \"my-2 inline-flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2\",\n            \"text-body-sm text-muted-foreground\",\n          )}\n        >\n          <ImageIcon className=\"size-4\" aria-hidden=\"true\" />\n          <span>{label}</span>\n          <span className=\"text-destructive\">(blocked)</span>\n        </div>\n      );\n    }\n    return (\n      <figure\n        className=\"my-3 overflow-hidden rounded-lg border border-border\"\n        data-theo-file=\"image\"\n      >\n        <img src={safeUrl} alt={label} className=\"block max-w-full\" loading=\"lazy\" />\n        {part.filename ? (\n          <figcaption className=\"border-border border-t bg-muted/30 px-3 py-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {part.filename}\n          </figcaption>\n        ) : null}\n      </figure>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        \"my-2 inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2\",\n        \"text-body-sm\",\n      )}\n      data-theo-file=\"generic\"\n    >\n      <FileIcon className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n      {safeUrl ? (\n        <a href={safeUrl} className=\"text-primary hover:text-primary-deep hover:underline\">\n          {label}\n        </a>\n      ) : (\n        <span>{label}</span>\n      )}\n      <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n        {part.mediaType}\n      </span>\n    </div>\n  );\n}\n"
     },
     {
       "path": "components/composites/chat-message/parts/source-part.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message/parts/source-part.tsx",
-      "content": "/**\n * `<SourceUrlPart>` + `<SourceDocumentPart>` — render `source-url` and\n * `source-document` citations as compact link chips.\n */\nimport { ExternalLinkIcon, FileTextIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport type { SourceDocumentUIPart, SourceUrlUIPart } from \"@/types/chat\";\n\nexport interface SourceUrlPartProps {\n  part: SourceUrlUIPart;\n}\n\nexport function SourceUrlPart({ part }: SourceUrlPartProps): JSX.Element {\n  const safe = safeHref(part.url);\n  const label = part.title || part.url;\n  return (\n    <span\n      className={cn(\n        \"my-1 inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1\",\n        \"align-middle font-mono text-label\",\n      )}\n      data-theo-source=\"url\"\n    >\n      <ExternalLinkIcon className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n      {safe ? (\n        <a\n          href={safe}\n          className=\"truncate text-primary hover:text-primary-deep hover:underline\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          {label}\n        </a>\n      ) : (\n        <span className=\"truncate text-muted-foreground\">{label}</span>\n      )}\n    </span>\n  );\n}\n\nexport interface SourceDocumentPartProps {\n  part: SourceDocumentUIPart;\n}\n\nexport function SourceDocumentPart({ part }: SourceDocumentPartProps): JSX.Element {\n  return (\n    <span\n      className={cn(\n        \"my-1 inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1\",\n        \"align-middle font-mono text-label\",\n      )}\n      data-theo-source=\"document\"\n    >\n      <FileTextIcon className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n      <span className=\"truncate text-foreground\">{part.title}</span>\n      <span className=\"text-muted-foreground\">·</span>\n      <span className=\"text-muted-foreground\">{part.mediaType}</span>\n    </span>\n  );\n}\n"
+      "content": "/**\n * `<SourceUrlPart>` + `<SourceDocumentPart>` — render `source-url` and\n * `source-document` citations as compact link chips.\n */\nimport { ExternalLinkIcon, FileTextIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport type { SourceDocumentUIPart, SourceUrlUIPart } from \"@/types/chat\";\n\nexport interface SourceUrlPartProps {\n  part: SourceUrlUIPart;\n}\n\nexport function SourceUrlPart({ part }: SourceUrlPartProps): JSX.Element {\n  const safe = safeHref(part.url);\n  const label = part.title || part.url;\n  return (\n    <span\n      data-slot=\"source-url-part\"\n      className={cn(\n        \"my-1 inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1\",\n        \"align-middle font-mono text-label\",\n      )}\n      data-theo-source=\"url\"\n    >\n      <ExternalLinkIcon className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n      {safe ? (\n        <a\n          href={safe}\n          className=\"truncate text-primary hover:text-primary-deep hover:underline\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          {label}\n        </a>\n      ) : (\n        <span className=\"truncate text-muted-foreground\">{label}</span>\n      )}\n    </span>\n  );\n}\n\nexport interface SourceDocumentPartProps {\n  part: SourceDocumentUIPart;\n}\n\nexport function SourceDocumentPart({ part }: SourceDocumentPartProps): JSX.Element {\n  return (\n    <span\n      data-slot=\"source-document-part\"\n      className={cn(\n        \"my-1 inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1\",\n        \"align-middle font-mono text-label\",\n      )}\n      data-theo-source=\"document\"\n    >\n      <FileTextIcon className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n      <span className=\"truncate text-foreground\">{part.title}</span>\n      <span className=\"text-muted-foreground\">·</span>\n      <span className=\"text-muted-foreground\">{part.mediaType}</span>\n    </span>\n  );\n}\n"
     },
     {
       "path": "components/composites/chat-message/parts/data-part.tsx",
@@ -87,7 +82,7 @@
       "path": "components/composites/chat-message/index.ts",
       "type": "registry:ui",
       "target": "components/ui/chat-message/index.ts",
-      "content": "/**\n * `<ChatMessage>` — composite-layer barrel.\n *\n * Public surface includes:\n *   - Convenience: `ChatMessage` (auto-dispatches parts)\n *   - Composable shell: `ChatMessageRoot`, `ChatMessageContent`,\n *     `ChatMessageResponse`, `ChatMessageActions`, `ChatMessageAction`,\n *     `ChatMessageToolbar`, branch components\n *   - Part renderers: `TextPart`, `ReasoningPart`, `ToolCallPart`,\n *     `FilePart`, `SourceUrlPart`, `SourceDocumentPart`, `DataPart`\n *   - Imperative helpers: `renderPart`, types for renderer maps\n */\nexport {\n  ChatMessage,\n  ChatMessageRoot,\n  ChatMessageContent,\n  type ChatMessageProps,\n  type ChatMessageRootProps,\n  type ChatMessageContentProps,\n  type ChatMessageContentVariant,\n  type PartRendererMap,\n  type RenderPartOptions,\n  renderPart,\n} from \"@/components/ui/chat-message\";\nexport {\n  ChatMessageResponse,\n  type ChatMessageResponseProps,\n} from \"@/components/ui/chat-message-response\";\nexport {\n  ChatMessageActions,\n  ChatMessageAction,\n  type ChatMessageActionsProps,\n  type ChatMessageActionProps,\n} from \"@/components/ui/chat-message-actions\";\nexport {\n  ChatMessageToolbar,\n  type ChatMessageToolbarProps,\n} from \"@/components/ui/chat-message-toolbar\";\nexport {\n  ChatMessageBranch,\n  ChatMessageBranchContent,\n  ChatMessageBranchSelector,\n  ChatMessageBranchPrevious,\n  ChatMessageBranchNext,\n  ChatMessageBranchPage,\n  type ChatMessageBranchProps,\n  type ChatMessageBranchContentProps,\n  type ChatMessageBranchSelectorProps,\n  type ChatMessageBranchPreviousProps,\n  type ChatMessageBranchNextProps,\n  type ChatMessageBranchPageProps,\n} from \"@/components/ui/chat-message-branch\";\nexport { TextPart, type TextPartProps } from \"@/components/ui/chat-message/parts/text-part\";\nexport { ReasoningPart, type ReasoningPartProps } from \"@/components/ui/chat-message/parts/reasoning-part\";\nexport { ToolCallPart, type ToolCallPartProps } from \"@/components/ui/chat-message/parts/tool-call-part\";\nexport { FilePart, type FilePartProps } from \"@/components/ui/chat-message/parts/file-part\";\nexport {\n  SourceUrlPart,\n  SourceDocumentPart,\n  type SourceUrlPartProps,\n  type SourceDocumentPartProps,\n} from \"@/components/ui/chat-message/parts/source-part\";\nexport {\n  DataPart,\n  type DataPartProps,\n  type DataRenderer,\n  type DataRendererMap,\n} from \"@/components/ui/chat-message/parts/data-part\";\n"
+      "content": "/**\n * `<ChatMessage>` — composite-layer barrel.\n *\n * Public surface includes:\n *   - Convenience: `ChatMessage` (auto-dispatches parts)\n *   - Composable shell: `ChatMessageRoot`, `ChatMessageContent`,\n *     `ChatMessageResponse`, `ChatMessageActions`, `ChatMessageAction`,\n *     `ChatMessageToolbar`, branch components\n *   - Part renderers: `TextPart`, `ReasoningPart`, `ToolCallPart`,\n *     `FilePart`, `SourceUrlPart`, `SourceDocumentPart`, `DataPart`\n *   - Imperative helpers: `renderPart`, types for renderer maps\n */\nexport {\n  ChatMessage,\n  ChatMessageRoot,\n  ChatMessageContent,\n  type ChatMessageProps,\n  type ChatMessageRootProps,\n  type ChatMessageContentProps,\n  type ChatMessageContentVariant,\n  type PartRendererMap,\n  type RenderPartOptions,\n  renderPart,\n} from \"@/components/ui/chat-message\";\nexport {\n  ChatMessageResponse,\n  type ChatMessageResponseProps,\n} from \"@/components/ui/chat-message-response\";\nexport {\n  ChatMessageActions,\n  ChatMessageAction,\n  type ChatMessageActionsProps,\n  type ChatMessageActionProps,\n} from \"@/components/ui/chat-message-actions\";\nexport {\n  ChatMessageToolbar,\n  type ChatMessageToolbarProps,\n} from \"@/components/ui/chat-message-toolbar\";\nexport {\n  ChatMessageBranch,\n  ChatMessageBranchContent,\n  ChatMessageBranchSelector,\n  ChatMessageBranchPrevious,\n  ChatMessageBranchNext,\n  ChatMessageBranchPage,\n  type ChatMessageBranchProps,\n  type ChatMessageBranchContentProps,\n  type ChatMessageBranchSelectorProps,\n  type ChatMessageBranchPreviousProps,\n  type ChatMessageBranchNextProps,\n  type ChatMessageBranchPageProps,\n} from \"@/components/ui/chat-message-branch\";\nexport { TextPart, type TextPartProps } from \"@/components/ui/chat-message/parts/text-part\";\nexport { ReasoningPart, type ReasoningPartProps } from \"@/components/ui/chat-message/parts/reasoning-part\";\nexport { ToolCallPart, type ToolCallPartProps } from \"@/components/ui/agent-tool-renderer/tool-call-part\";\nexport { FilePart, type FilePartProps } from \"@/components/ui/chat-message/parts/file-part\";\nexport {\n  SourceUrlPart,\n  SourceDocumentPart,\n  type SourceUrlPartProps,\n  type SourceDocumentPartProps,\n} from \"@/components/ui/chat-message/parts/source-part\";\nexport {\n  DataPart,\n  type DataPartProps,\n  type DataRenderer,\n  type DataRendererMap,\n} from \"@/components/ui/chat-message/parts/data-part\";\n"
     },
     {
       "path": "lib/markdown/parser.ts",

package/registry/r/chat-thread.json

@@ -14,7 +14,7 @@
       "path": "components/primitives/chat-thread/chat-thread.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-thread.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { LiveRegionProvider } from \"@/lib/live-region-context\";\n\n/**\n * ChatThread — simple vertical container that applies spacing + scroll.\n *\n * No virtualization or stickiness. Wrap with your own scroller for long threads.\n *\n * T4.1 (MF-4): declares the outer live region and wraps children in\n * LiveRegionProvider so nested AgentStreaming / AgentErrorCard / Skeleton\n * don't add their own aria-live (double-announcement avoided).\n */\nconst ChatThread = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <LiveRegionProvider value={true}>\n      <div\n        ref={ref}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions\"\n        className={cn(\"flex flex-col gap-6\", className)}\n        {...props}\n      />\n    </LiveRegionProvider>\n  ),\n);\nChatThread.displayName = \"ChatThread\";\n\nexport { ChatThread };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { LiveRegionProvider } from \"@/lib/live-region-context\";\n\n/**\n * ChatThread — simple vertical container that applies spacing + scroll.\n *\n * No virtualization or stickiness. Wrap with your own scroller for long threads.\n *\n * T4.1 (MF-4): declares the outer live region and wraps children in\n * LiveRegionProvider so nested AgentStreaming / AgentErrorCard / Skeleton\n * don't add their own aria-live (double-announcement avoided).\n */\nconst ChatThread = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <LiveRegionProvider value={true}>\n      <div\n        data-slot=\"chat-thread\"\n        ref={ref}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions\"\n        className={cn(\"flex flex-col gap-6\", className)}\n        {...props}\n      />\n    </LiveRegionProvider>\n  ),\n);\nChatThread.displayName = \"ChatThread\";\n\nexport { ChatThread };\n"
     }
   ]
 }

package/registry/r/chat-types.json

@@ -9,7 +9,7 @@
       "path": "types/chat.ts",
       "type": "registry:lib",
       "target": "types/chat.ts",
-      "content": "/**\n * Chat message types — structurally compatible with `vercel/ai` `UIMessage`.\n *\n * Verbatim of the part-type shape from `packages/ai/src/ui/ui-messages.ts`\n * (Apache-2.0, copyright Vercel Inc., see NOTICE). Re-declared standalone so\n * `@usetheo/ui` does not take `ai` as a direct dependency — the goal is\n * interop without coupling.\n *\n * Consumer code using `useChat()` from `@ai-sdk/react`:\n *\n *   const { messages } = useChat();\n *   return messages.map((m) => <ChatMessage message={m} />);\n *\n * Works because the Vercel `UIMessage` shape is structurally assignable to\n * the types declared here.\n */\n\nexport type MessageRole = \"system\" | \"user\" | \"assistant\";\n\n/**\n * Orthogonal attachment shape used by `<AttachmentChip>` and chat composer\n * primitives. Distinct from `FileUIPart` (which is part of the message\n * payload) — `Attachment` is the consumer's pending-upload state.\n */\nexport interface Attachment {\n  id: string;\n  name: string;\n  size?: string;\n  type?: string;\n}\n\n/* ─── Provider metadata (opaque structural slot) ─────────────────────── */\n\nexport type ProviderMetadata = Record<string, Record<string, unknown>>;\n\n/* ─── Part types — 11 discriminated kinds ────────────────────────────── */\n\n/**\n * A text part of a message.\n */\nexport interface TextUIPart {\n  type: \"text\";\n  text: string;\n  /** \"streaming\" while tokens arrive; \"done\" when complete. */\n  state?: \"streaming\" | \"done\";\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A reasoning (\"thinking\") part of a message — typically rendered as a\n * collapsible panel.\n */\nexport interface ReasoningUIPart {\n  type: \"reasoning\";\n  text: string;\n  state?: \"streaming\" | \"done\";\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A file part of a message (image, document, audio, video).\n */\nexport interface FileUIPart {\n  type: \"file\";\n  /**\n   * IANA media type (e.g. `image/png`) or top-level segment (e.g. `image`).\n   */\n  mediaType: string;\n  filename?: string;\n  /** URL or data: URL. */\n  url: string;\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A file emitted as part of a reasoning trace (e.g. internal scratchpad).\n */\nexport interface ReasoningFileUIPart {\n  type: \"reasoning-file\";\n  mediaType: string;\n  url: string;\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A URL source citation.\n */\nexport interface SourceUrlUIPart {\n  type: \"source-url\";\n  sourceId: string;\n  url: string;\n  title?: string;\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A document source citation.\n */\nexport interface SourceDocumentUIPart {\n  type: \"source-document\";\n  sourceId: string;\n  mediaType: string;\n  title: string;\n  filename?: string;\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A step boundary marker — used to delimit multi-step agent responses.\n */\nexport interface StepStartUIPart {\n  type: \"step-start\";\n}\n\n/**\n * A provider-specific custom content part.\n */\nexport interface CustomContentUIPart {\n  type: \"custom\";\n  /** Format: `${provider}.${providerType}`. */\n  kind: `${string}.${string}`;\n  providerMetadata?: ProviderMetadata;\n}\n\n/* ─── Tool invocation states (mirrors Vercel) ────────────────────────── */\n\nexport type ToolInvocationState =\n  | \"input-streaming\"\n  | \"input-available\"\n  | \"approval-requested\"\n  | \"approval-responded\"\n  | \"output-available\"\n  | \"output-error\"\n  | \"output-denied\";\n\n/**\n * A tool invocation part — covers both static (typed) and dynamic tools via\n * the `dynamic-tool` discriminator. The `type` field follows the Vercel\n * convention: `tool-${toolName}` for static, `dynamic-tool` for runtime.\n */\nexport interface ToolUIPart {\n  /** `tool-${toolName}` (static) or `dynamic-tool` (runtime). */\n  type: `tool-${string}` | \"dynamic-tool\";\n  toolCallId: string;\n  toolName?: string;\n  title?: string;\n  state: ToolInvocationState;\n  input?: unknown;\n  output?: unknown;\n  errorText?: string;\n  providerExecuted?: boolean;\n  callProviderMetadata?: ProviderMetadata;\n  resultProviderMetadata?: ProviderMetadata;\n  approval?: {\n    id: string;\n    approved?: boolean;\n    reason?: string;\n    isAutomatic?: boolean;\n  };\n}\n\n/**\n * A data part — typed custom application state. The `type` field follows\n * `data-${name}` and `data` carries the payload. Consumers register a\n * renderer per `data-${name}` via the `<ChatMessage>` `dataRenderers` prop.\n */\nexport interface DataUIPart {\n  /** `data-${name}` */\n  type: `data-${string}`;\n  id?: string;\n  data: unknown;\n}\n\n/* ─── The discriminated union ────────────────────────────────────────── */\n\nexport type UIMessagePart =\n  | TextUIPart\n  | ReasoningUIPart\n  | FileUIPart\n  | ReasoningFileUIPart\n  | SourceUrlUIPart\n  | SourceDocumentUIPart\n  | StepStartUIPart\n  | CustomContentUIPart\n  | ToolUIPart\n  | DataUIPart;\n\n/* ─── Type guards ────────────────────────────────────────────────────── */\n\nexport function isTextUIPart(part: UIMessagePart): part is TextUIPart {\n  return part.type === \"text\";\n}\n\nexport function isReasoningUIPart(part: UIMessagePart): part is ReasoningUIPart {\n  return part.type === \"reasoning\";\n}\n\nexport function isFileUIPart(part: UIMessagePart): part is FileUIPart {\n  return part.type === \"file\";\n}\n\nexport function isReasoningFileUIPart(part: UIMessagePart): part is ReasoningFileUIPart {\n  return part.type === \"reasoning-file\";\n}\n\nexport function isSourceUrlUIPart(part: UIMessagePart): part is SourceUrlUIPart {\n  return part.type === \"source-url\";\n}\n\nexport function isSourceDocumentUIPart(part: UIMessagePart): part is SourceDocumentUIPart {\n  return part.type === \"source-document\";\n}\n\nexport function isStepStartUIPart(part: UIMessagePart): part is StepStartUIPart {\n  return part.type === \"step-start\";\n}\n\nexport function isCustomContentUIPart(part: UIMessagePart): part is CustomContentUIPart {\n  return part.type === \"custom\";\n}\n\nexport function isToolUIPart(part: UIMessagePart): part is ToolUIPart {\n  return part.type === \"dynamic-tool\" || part.type.startsWith(\"tool-\");\n}\n\nexport function isDataUIPart(part: UIMessagePart): part is DataUIPart {\n  return part.type.startsWith(\"data-\");\n}\n\n/* ─── Top-level message ──────────────────────────────────────────────── */\n\n/**\n * A chat message in UI form.\n *\n * Field-for-field compatible with `UIMessage` from `vercel/ai` (the AI SDK's\n * `useChat()` return type) — a consumer's `useChat()` messages flow into\n * `<ChatMessage message={msg} />` with zero adapter.\n *\n * `metadata` is opaque (`unknown`) so consumers can attach arbitrary fields\n * (timestamps, model identifiers, request IDs, …) without our type\n * dictating shape.\n */\nexport interface UIMessage {\n  id: string;\n  role: MessageRole;\n  parts: UIMessagePart[];\n  metadata?: unknown;\n}\n"
+      "content": "/**\n * Chat message types — structurally compatible with `vercel/ai` `UIMessage`.\n *\n * Verbatim of the part-type shape from `packages/ai/src/ui/ui-messages.ts`\n * (Apache-2.0, copyright Vercel Inc., see NOTICE). Re-declared standalone so\n * `@theokit/ui` does not take `ai` as a direct dependency — the goal is\n * interop without coupling.\n *\n * Consumer code using `useChat()` from `@ai-sdk/react`:\n *\n *   const { messages } = useChat();\n *   return messages.map((m) => <ChatMessage message={m} />);\n *\n * Works because the Vercel `UIMessage` shape is structurally assignable to\n * the types declared here.\n */\n\nexport type MessageRole = \"system\" | \"user\" | \"assistant\";\n\n/**\n * Orthogonal attachment shape used by `<AttachmentChip>` and chat composer\n * primitives. Distinct from `FileUIPart` (which is part of the message\n * payload) — `Attachment` is the consumer's pending-upload state.\n */\nexport interface Attachment {\n  id: string;\n  name: string;\n  size?: string;\n  type?: string;\n}\n\n/* ─── Provider metadata (opaque structural slot) ─────────────────────── */\n\nexport type ProviderMetadata = Record<string, Record<string, unknown>>;\n\n/* ─── Part types — 11 discriminated kinds ────────────────────────────── */\n\n/**\n * A text part of a message.\n */\nexport interface TextUIPart {\n  type: \"text\";\n  text: string;\n  /** \"streaming\" while tokens arrive; \"done\" when complete. */\n  state?: \"streaming\" | \"done\";\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A reasoning (\"thinking\") part of a message — typically rendered as a\n * collapsible panel.\n */\nexport interface ReasoningUIPart {\n  type: \"reasoning\";\n  text: string;\n  state?: \"streaming\" | \"done\";\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A file part of a message (image, document, audio, video).\n */\nexport interface FileUIPart {\n  type: \"file\";\n  /**\n   * IANA media type (e.g. `image/png`) or top-level segment (e.g. `image`).\n   */\n  mediaType: string;\n  filename?: string;\n  /** URL or data: URL. */\n  url: string;\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A file emitted as part of a reasoning trace (e.g. internal scratchpad).\n */\nexport interface ReasoningFileUIPart {\n  type: \"reasoning-file\";\n  mediaType: string;\n  url: string;\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A URL source citation.\n */\nexport interface SourceUrlUIPart {\n  type: \"source-url\";\n  sourceId: string;\n  url: string;\n  title?: string;\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A document source citation.\n */\nexport interface SourceDocumentUIPart {\n  type: \"source-document\";\n  sourceId: string;\n  mediaType: string;\n  title: string;\n  filename?: string;\n  providerMetadata?: ProviderMetadata;\n}\n\n/**\n * A step boundary marker — used to delimit multi-step agent responses.\n */\nexport interface StepStartUIPart {\n  type: \"step-start\";\n}\n\n/**\n * A provider-specific custom content part.\n */\nexport interface CustomContentUIPart {\n  type: \"custom\";\n  /** Format: `${provider}.${providerType}`. */\n  kind: `${string}.${string}`;\n  providerMetadata?: ProviderMetadata;\n}\n\n/* ─── Tool invocation states (mirrors Vercel) ────────────────────────── */\n\nexport type ToolInvocationState =\n  | \"input-streaming\"\n  | \"input-available\"\n  | \"approval-requested\"\n  | \"approval-responded\"\n  | \"output-available\"\n  | \"output-error\"\n  | \"output-denied\";\n\n/**\n * A tool invocation part — covers both static (typed) and dynamic tools via\n * the `dynamic-tool` discriminator. The `type` field follows the Vercel\n * convention: `tool-${toolName}` for static, `dynamic-tool` for runtime.\n */\nexport interface ToolUIPart {\n  /** `tool-${toolName}` (static) or `dynamic-tool` (runtime). */\n  type: `tool-${string}` | \"dynamic-tool\";\n  toolCallId: string;\n  toolName?: string;\n  title?: string;\n  state: ToolInvocationState;\n  input?: unknown;\n  output?: unknown;\n  errorText?: string;\n  providerExecuted?: boolean;\n  callProviderMetadata?: ProviderMetadata;\n  resultProviderMetadata?: ProviderMetadata;\n  approval?: {\n    id: string;\n    approved?: boolean;\n    reason?: string;\n    isAutomatic?: boolean;\n  };\n}\n\n/**\n * A data part — typed custom application state. The `type` field follows\n * `data-${name}` and `data` carries the payload. Consumers register a\n * renderer per `data-${name}` via the `<ChatMessage>` `dataRenderers` prop.\n */\nexport interface DataUIPart {\n  /** `data-${name}` */\n  type: `data-${string}`;\n  id?: string;\n  data: unknown;\n}\n\n/* ─── The discriminated union ────────────────────────────────────────── */\n\nexport type UIMessagePart =\n  | TextUIPart\n  | ReasoningUIPart\n  | FileUIPart\n  | ReasoningFileUIPart\n  | SourceUrlUIPart\n  | SourceDocumentUIPart\n  | StepStartUIPart\n  | CustomContentUIPart\n  | ToolUIPart\n  | DataUIPart;\n\n/* ─── Type guards ────────────────────────────────────────────────────── */\n\nexport function isTextUIPart(part: UIMessagePart): part is TextUIPart {\n  return part.type === \"text\";\n}\n\nexport function isReasoningUIPart(part: UIMessagePart): part is ReasoningUIPart {\n  return part.type === \"reasoning\";\n}\n\nexport function isFileUIPart(part: UIMessagePart): part is FileUIPart {\n  return part.type === \"file\";\n}\n\nexport function isReasoningFileUIPart(part: UIMessagePart): part is ReasoningFileUIPart {\n  return part.type === \"reasoning-file\";\n}\n\nexport function isSourceUrlUIPart(part: UIMessagePart): part is SourceUrlUIPart {\n  return part.type === \"source-url\";\n}\n\nexport function isSourceDocumentUIPart(part: UIMessagePart): part is SourceDocumentUIPart {\n  return part.type === \"source-document\";\n}\n\nexport function isStepStartUIPart(part: UIMessagePart): part is StepStartUIPart {\n  return part.type === \"step-start\";\n}\n\nexport function isCustomContentUIPart(part: UIMessagePart): part is CustomContentUIPart {\n  return part.type === \"custom\";\n}\n\nexport function isToolUIPart(part: UIMessagePart): part is ToolUIPart {\n  return part.type === \"dynamic-tool\" || part.type.startsWith(\"tool-\");\n}\n\nexport function isDataUIPart(part: UIMessagePart): part is DataUIPart {\n  return part.type.startsWith(\"data-\");\n}\n\n/* ─── Top-level message ──────────────────────────────────────────────── */\n\n/**\n * A chat message in UI form.\n *\n * Field-for-field compatible with `UIMessage` from `vercel/ai` (the AI SDK's\n * `useChat()` return type) — a consumer's `useChat()` messages flow into\n * `<ChatMessage message={msg} />` with zero adapter.\n *\n * `metadata` is opaque (`unknown`) so consumers can attach arbitrary fields\n * (timestamps, model identifiers, request IDs, …) without our type\n * dictating shape.\n */\nexport interface UIMessage {\n  id: string;\n  role: MessageRole;\n  parts: UIMessagePart[];\n  metadata?: unknown;\n}\n"
     }
   ]
 }

package/registry/r/checkbox.json

@@ -18,7 +18,7 @@
       "path": "components/primitives/checkbox/checkbox.tsx",
       "type": "registry:ui",
       "target": "components/ui/checkbox.tsx",
-      "content": "import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { Check, Minus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Checkbox — built on Radix Checkbox.\n *\n * Supports tri-state via `checked=\"indeterminate\"`. Violet fill when on,\n * border-only when off. Themed via tokens (--primary, --background).\n *\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 16px box from before this prop existed. The `sm` size keeps a >=24px\n * effective tap target via an invisible expanded hit area (WCAG 2.5.5).\n */\nconst checkboxVariants = cva(\n  [\n    \"peer relative shrink-0 rounded-sm border border-border bg-card\",\n    \"transition-[background-color,border-color,box-shadow] duration-base ease-out-soft\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n    \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5 before:absolute before:inset-[-5px] before:content-['']\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst iconClassBySize: Record<\n  NonNullable<VariantProps<typeof checkboxVariants>[\"size\"]>,\n  string\n> = {\n  sm: \"size-2.5\",\n  md: \"size-3.5\",\n  lg: \"size-3.5\",\n};\n\ninterface CheckboxProps\n  extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nconst Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, size, ...props }, ref) => {\n    const iconClass = iconClassBySize[size ?? \"md\"];\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        className={cn(checkboxVariants({ size }), className)}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n          {props.checked === \"indeterminate\" ? (\n            <Minus className={iconClass} aria-hidden=\"true\" strokeWidth={3} />\n          ) : (\n            <Check className={iconClass} aria-hidden=\"true\" strokeWidth={3} />\n          )}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox, checkboxVariants };\n"
+      "content": "import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { Check, Minus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Checkbox — built on Radix Checkbox.\n *\n * Supports tri-state via `checked=\"indeterminate\"`. Violet fill when on,\n * border-only when off. Themed via tokens (--primary, --background).\n *\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 16px box from before this prop existed. The `sm` size keeps a >=24px\n * effective tap target via an invisible expanded hit area (WCAG 2.5.5).\n */\nconst checkboxVariants = cva(\n  [\n    \"peer relative shrink-0 rounded-sm border border-border bg-card\",\n    \"transition-[background-color,border-color,box-shadow] duration-base ease-out-soft\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n    \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5 before:absolute before:inset-[-5px] before:content-['']\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst iconClassBySize: Record<\n  NonNullable<VariantProps<typeof checkboxVariants>[\"size\"]>,\n  string\n> = {\n  sm: \"size-2.5\",\n  md: \"size-3.5\",\n  lg: \"size-3.5\",\n};\n\ninterface CheckboxProps\n  extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nconst Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, size, ...props }, ref) => {\n    const iconClass = iconClassBySize[size ?? \"md\"];\n    return (\n      <CheckboxPrimitive.Root\n        data-slot=\"checkbox\"\n        data-size={size}\n        ref={ref}\n        className={cn(checkboxVariants({ size }), className)}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n          {props.checked === \"indeterminate\" ? (\n            <Minus className={iconClass} aria-hidden=\"true\" strokeWidth={3} />\n          ) : (\n            <Check className={iconClass} aria-hidden=\"true\" strokeWidth={3} />\n          )}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox, checkboxVariants };\n"
     }
   ]
 }

package/registry/r/choice-prompt.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "choice-prompt",
+  "type": "registry:block",
+  "title": "ChoicePrompt",
+  "description": "Single-select ask-the-user card with number-key shortcuts, an Other free-text option, and a side-by-side preview pane.",
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/badge.json",
+    "https://usetheodev.github.io/theo-ui/r/button.json",
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/input.json",
+    "https://usetheodev.github.io/theo-ui/r/label.json",
+    "https://usetheodev.github.io/theo-ui/r/prompt.json",
+    "https://usetheodev.github.io/theo-ui/r/radio-group.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/choice-prompt/choice-prompt.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/choice-prompt.tsx",
+      "content": "\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  OTHER_OPTION_VALUE,\n  type PromptOption,\n  digitKeyToIndex,\n  isOtherValue,\n} from \"@/lib/prompt\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { RadioGroup } from \"@/components/ui/radio-group\";\n\n/**\n * ChoicePrompt — single-select \"ask the user\" card for agent surfaces.\n *\n * Mirrors the UX of Claude Code's question card: a question with an optional\n * header chip, a list of options each carrying a label + description, optional\n * number-key shortcuts (terminal-style `1`..`9` selection), an injectable\n * free-text \"Other\" option, and a side-by-side preview pane when options carry\n * preview content.\n *\n * Renders one question at a time — sequencing across multiple questions is the\n * consumer's responsibility (there is no built-in flow orchestrator).\n *\n * Controlled or uncontrolled: pass `value` + `onValueChange` to control the\n * selection, or `defaultValue` to let the component own it. Same for the Other\n * text via `otherText` / `onOtherTextChange`.\n */\n\n/** Payload handed to `onConfirm`. */\nexport interface ChoicePromptResult {\n  /** The selected option value (or the reserved Other value). */\n  value: string;\n  /** Present only when the selected value is the synthesized Other option. */\n  otherText?: string;\n}\n\nexport interface ChoicePromptProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  /** The question being asked. */\n  question: ReactNode;\n  /** Optional secondary line under the question. */\n  description?: ReactNode;\n  /** Optional short header chip (rendered as a Badge), e.g. \"Deploy\". */\n  badge?: ReactNode;\n  /** The selectable options. */\n  options: PromptOption[];\n  /** Controlled selected value. */\n  value?: string;\n  /** Initial selected value when uncontrolled. */\n  defaultValue?: string;\n  /** Fired with the option value whenever the selection changes. */\n  onValueChange?: (value: string) => void;\n  /** Inject a free-text \"Other\" option as the last row. */\n  allowOther?: boolean;\n  /** Label for the Other row. Defaults to \"Other\". */\n  otherLabel?: ReactNode;\n  /** Placeholder for the Other text field. */\n  otherPlaceholder?: string;\n  /** Controlled Other text. */\n  otherText?: string;\n  /** Fired with the Other text on every keystroke. */\n  onOtherTextChange?: (text: string) => void;\n  /** Enable `1`..`9` number-key selection. Default true. */\n  enableKeyboardShortcuts?: boolean;\n  /** Show the `1`..`9` hint chips next to options. Defaults to the shortcut flag. */\n  showNumbers?: boolean;\n  /** Confirm button label. Defaults to \"Confirm\". Omit `onConfirm` to hide it. */\n  confirmLabel?: ReactNode;\n  /** Cancel button label. Defaults to \"Cancel\". Omit `onCancel` to hide it. */\n  cancelLabel?: ReactNode;\n  /** Pressing Confirm. Receives the selection (and Other text when relevant). */\n  onConfirm?: (result: ChoicePromptResult) => void;\n  /** Pressing Cancel. */\n  onCancel?: () => void;\n}\n\nconst ChoicePrompt = forwardRef<HTMLElement, ChoicePromptProps>(\n  (\n    {\n      className,\n      question,\n      description,\n      badge,\n      options,\n      value,\n      defaultValue,\n      onValueChange,\n      allowOther = false,\n      otherLabel = \"Other\",\n      otherPlaceholder = \"Type your answer…\",\n      otherText,\n      onOtherTextChange,\n      enableKeyboardShortcuts = true,\n      showNumbers,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      onConfirm,\n      onCancel,\n      ...props\n    },\n    ref,\n  ) => {\n    const baseId = useId();\n    const questionId = `${baseId}-question`;\n    const optionId = (value_: string): string => `${baseId}-opt-${value_}`;\n\n    const [internalValue, setInternalValue] = useState<string | undefined>(defaultValue);\n    const selected = value !== undefined ? value : internalValue;\n\n    const [internalOther, setInternalOther] = useState(\"\");\n    const otherValue = otherText !== undefined ? otherText : internalOther;\n\n    const numbersVisible = showNumbers ?? enableKeyboardShortcuts;\n    const hasPreview = options.some((option) => option.preview != null);\n    const selectedPreview = options.find((option) => option.value === selected)?.preview;\n\n    const select = (next: string): void => {\n      if (value === undefined) setInternalValue(next);\n      onValueChange?.(next);\n    };\n\n    const setOther = (next: string): void => {\n      if (otherText === undefined) setInternalOther(next);\n      onOtherTextChange?.(next);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLElement>): void => {\n      if (!enableKeyboardShortcuts) return;\n      const target = event.target as HTMLElement;\n      // Never hijack digits typed into a form field (e.g. the Other input).\n      if (target.tagName === \"INPUT\" || target.tagName === \"TEXTAREA\") return;\n      const index = digitKeyToIndex(event.key);\n      if (index === null || index >= options.length) return;\n      const option = options[index];\n      if (!option || option.disabled) return;\n      event.preventDefault();\n      select(option.value);\n    };\n\n    const confirm = (): void => {\n      if (!selected) return;\n      onConfirm?.(\n        isOtherValue(selected) ? { value: selected, otherText: otherValue } : { value: selected },\n      );\n    };\n\n    return (\n      <section\n        data-slot=\"choice-prompt\"\n        ref={ref}\n        aria-labelledby={questionId}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"grid w-full gap-4 rounded-xl border bg-card p-5 text-card-foreground shadow-md\",\n          \"transition-shadow duration-base ease-out-soft\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <h3 id={questionId} className=\"font-display text-foreground text-title-md tracking-tight\">\n            {question}\n          </h3>\n          {badge != null ? (\n            <Badge variant=\"primary\" size=\"sm\" className=\"shrink-0\">\n              {badge}\n            </Badge>\n          ) : null}\n        </header>\n        {description != null ? (\n          <p className=\"text-body-sm text-muted-foreground\">{description}</p>\n        ) : null}\n\n        <div className={cn(\"grid gap-5\", hasPreview && \"md:grid-cols-2\")}>\n          <RadioGroup\n            aria-labelledby={questionId}\n            value={selected ?? \"\"}\n            onValueChange={select}\n            className=\"gap-2\"\n          >\n            {options.map((option, index) => (\n              <div key={option.value} className=\"flex items-start gap-3\">\n                <RadioGroup.Item\n                  value={option.value}\n                  id={optionId(option.value)}\n                  disabled={option.disabled}\n                  className=\"mt-0.5\"\n                />\n                <Label\n                  htmlFor={optionId(option.value)}\n                  className=\"flex flex-1 cursor-pointer flex-col items-start gap-0.5\"\n                >\n                  <span className=\"text-body-md text-foreground\">{option.label}</span>\n                  {option.description != null ? (\n                    <span className=\"text-body-sm text-muted-foreground\">{option.description}</span>\n                  ) : null}\n                </Label>\n                {numbersVisible && index < 9 ? (\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"mt-0.5 shrink-0 rounded border border-border bg-muted px-1.5 font-mono text-label text-muted-foreground\"\n                  >\n                    {index + 1}\n                  </span>\n                ) : null}\n              </div>\n            ))}\n\n            {allowOther ? (\n              <div className=\"flex flex-col gap-2 border-border/40 border-t pt-2\">\n                <div className=\"flex items-start gap-3\">\n                  <RadioGroup.Item\n                    value={OTHER_OPTION_VALUE}\n                    id={optionId(OTHER_OPTION_VALUE)}\n                    className=\"mt-0.5\"\n                  />\n                  <Label\n                    htmlFor={optionId(OTHER_OPTION_VALUE)}\n                    className=\"flex-1 cursor-pointer text-body-md\"\n                  >\n                    {otherLabel}\n                  </Label>\n                </div>\n                {isOtherValue(selected) ? (\n                  <Input\n                    size=\"sm\"\n                    aria-label={typeof otherLabel === \"string\" ? otherLabel : \"Other\"}\n                    placeholder={otherPlaceholder}\n                    value={otherValue}\n                    onChange={(event) => setOther(event.target.value)}\n                    className=\"ml-7\"\n                  />\n                ) : null}\n              </div>\n            ) : null}\n          </RadioGroup>\n\n          {hasPreview ? (\n            <div className=\"rounded-lg border border-border/60 bg-muted/40 p-3\">\n              <p className=\"mb-2 font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Preview\n              </p>\n              {selectedPreview != null ? (\n                <div className=\"whitespace-pre-wrap break-words font-mono text-code-sm text-foreground\">\n                  {selectedPreview}\n                </div>\n              ) : (\n                <p className=\"text-body-sm text-muted-foreground\">Select an option to preview.</p>\n              )}\n            </div>\n          ) : null}\n        </div>\n\n        {onConfirm || onCancel ? (\n          <footer className=\"flex items-center justify-end gap-2\">\n            {onCancel ? (\n              <Button size=\"sm\" variant=\"secondary\" onClick={onCancel}>\n                {cancelLabel}\n              </Button>\n            ) : null}\n            {onConfirm ? (\n              <Button size=\"sm\" variant=\"primary\" disabled={!selected} onClick={confirm}>\n                {confirmLabel}\n              </Button>\n            ) : null}\n          </footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nChoicePrompt.displayName = \"ChoicePrompt\";\n\nexport { ChoicePrompt };\n"
+    }
+  ]
+}

package/registry/r/cn.json

@@ -13,7 +13,7 @@
       "path": "lib/cn.ts",
       "type": "registry:lib",
       "target": "lib/cn.ts",
-      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * Custom tailwind-merge instance taught about the Violet Forge typescale.\n *\n * Vanilla `tailwind-merge` groups every `text-*` class together — so\n * `text-label` (a font-size from the typescale) and `text-accent`\n * (a foreground color) clash and the last wins. With cva variants that\n * keep size + color on independent dimensions, this collapsed one of\n * them. Extending the `font-size` group with the typescale tokens\n * declared in `src/styles/tailwind-preset.ts` keeps size + color\n * independent during merge.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [\n        { text: [\"display-2xl\", \"display-xl\", \"display-lg\", \"display-md\"] },\n        { text: [\"headline\", \"title-lg\", \"title-md\"] },\n        { text: [\"body-lg\", \"body-md\", \"body-sm\"] },\n        { text: [\"label\", \"label-caps\"] },\n        { text: [\"code-md\", \"code-sm\"] },\n      ],\n    },\n  },\n});\n\n/**\n * Merge Tailwind classes with conflict resolution.\n * Standard utility across all @usetheo/ui components.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"
+      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * Custom tailwind-merge instance taught about the Violet Forge typescale.\n *\n * Vanilla `tailwind-merge` groups every `text-*` class together — so\n * `text-label` (a font-size from the typescale) and `text-accent`\n * (a foreground color) clash and the last wins. With cva variants that\n * keep size + color on independent dimensions, this collapsed one of\n * them. Extending the `font-size` group with the typescale tokens\n * declared in `src/styles/tailwind-preset.ts` keeps size + color\n * independent during merge.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [\n        { text: [\"display-2xl\", \"display-xl\", \"display-lg\", \"display-md\"] },\n        { text: [\"headline\", \"title-lg\", \"title-md\"] },\n        { text: [\"body-lg\", \"body-md\", \"body-sm\"] },\n        { text: [\"label\", \"label-caps\"] },\n        { text: [\"code-md\", \"code-sm\"] },\n      ],\n    },\n  },\n});\n\n/**\n * Merge Tailwind classes with conflict resolution.\n * Standard utility across all @theokit/ui components.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"
     }
   ]
 }

package/registry/r/code-block.json

@@ -15,7 +15,7 @@
       "path": "components/composites/code-block/code-block.tsx",
       "type": "registry:ui",
       "target": "components/ui/code-block.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { CopyButton } from \"@/components/ui/copy-button\";\n\n/**\n * CodeBlock — terminal command / code snippet surface.\n *\n * Pre-rendered code block with optional terminal \"$ \" prefix per line,\n * optional caption (file name), and optional CopyButton positioned top-right.\n * The CopyButton receives the RAW `code` (without the visual \"$ \" prefix),\n * so consumers paste only the executable command.\n *\n * @example\n *   <CodeBlock code=\"theo deploy\" terminal copyable />\n *   <CodeBlock code={dotenv} caption=\".env.local\" copyable />\n *\n * `language` is reserved for future syntax highlighting (v1: ignored).\n */\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Code content. Can be multiline. */\n  code: string;\n  /** Language hint (forward-compat; v1 ignored). */\n  language?: string;\n  /** When true, prefix each line with \"$ \" for shell commands. */\n  terminal?: boolean;\n  /** Show inline CopyButton in top-right. */\n  copyable?: boolean;\n  /** Optional caption above block (e.g. \".env.local\"). */\n  caption?: ReactNode;\n}\n\nconst CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(\n  ({ className, code, language: _language, terminal, copyable, caption, ...props }, ref) => {\n    const lines = code.split(/\\r?\\n/);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative rounded-lg border border-border/40 bg-muted/40 font-mono text-body-sm\",\n          className,\n        )}\n        {...props}\n      >\n        {caption !== undefined ? (\n          <div className=\"border-border/40 border-b px-3 py-1.5 font-sans text-label text-muted-foreground\">\n            {caption}\n          </div>\n        ) : null}\n        {copyable ? (\n          <CopyButton value={code} aria-label=\"Copy code\" className=\"absolute top-2 right-2\" />\n        ) : null}\n        <pre className=\"overflow-x-auto p-3 text-foreground\">\n          {terminal ? (\n            <code>\n              {lines.map((line, i) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: code lines are positional; reorder requires consumer recompute.\n                <span key={i} className=\"block whitespace-pre\">\n                  <span className=\"select-none text-muted-foreground\">$ </span>\n                  {line}\n                </span>\n              ))}\n            </code>\n          ) : (\n            <code>{code}</code>\n          )}\n        </pre>\n      </div>\n    );\n  },\n);\nCodeBlock.displayName = \"CodeBlock\";\n\nexport { CodeBlock };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { CopyButton } from \"@/components/ui/copy-button\";\n\n/**\n * CodeBlock — terminal command / code snippet surface.\n *\n * Pre-rendered code block with optional terminal \"$ \" prefix per line,\n * optional caption (file name), and optional CopyButton positioned top-right.\n * The CopyButton receives the RAW `code` (without the visual \"$ \" prefix),\n * so consumers paste only the executable command.\n *\n * @example\n *   <CodeBlock code=\"theo deploy\" terminal copyable />\n *   <CodeBlock code={dotenv} caption=\".env.local\" copyable />\n *\n * `language` is reserved for future syntax highlighting (v1: ignored).\n */\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Code content. Can be multiline. */\n  code: string;\n  /** Language hint (forward-compat; v1 ignored). */\n  language?: string;\n  /** When true, prefix each line with \"$ \" for shell commands. */\n  terminal?: boolean;\n  /** Show inline CopyButton in top-right. */\n  copyable?: boolean;\n  /** Optional caption above block (e.g. \".env.local\"). */\n  caption?: ReactNode;\n}\n\nconst CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(\n  ({ className, code, language: _language, terminal, copyable, caption, ...props }, ref) => {\n    const lines = code.split(/\\r?\\n/);\n\n    return (\n      <div\n        data-slot=\"code-block\"\n        ref={ref}\n        className={cn(\n          \"relative rounded-lg border border-border/40 bg-muted/40 font-mono text-body-sm\",\n          className,\n        )}\n        {...props}\n      >\n        {caption !== undefined ? (\n          <div className=\"border-border/40 border-b px-3 py-1.5 font-sans text-label text-muted-foreground\">\n            {caption}\n          </div>\n        ) : null}\n        {copyable ? (\n          <CopyButton value={code} aria-label=\"Copy code\" className=\"absolute top-2 right-2\" />\n        ) : null}\n        <pre className=\"overflow-x-auto p-3 text-foreground\">\n          {terminal ? (\n            <code>\n              {lines.map((line, i) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: code lines are positional; reorder requires consumer recompute.\n                <span key={i} className=\"block whitespace-pre\">\n                  <span className=\"select-none text-muted-foreground\">$ </span>\n                  {line}\n                </span>\n              ))}\n            </code>\n          ) : (\n            <code>{code}</code>\n          )}\n        </pre>\n      </div>\n    );\n  },\n);\nCodeBlock.displayName = \"CodeBlock\";\n\nexport { CodeBlock };\n"
     }
   ]
 }

package/registry/r/command-palette.json

@@ -19,7 +19,7 @@
       "path": "components/composites/command-palette/command-palette.tsx",
       "type": "registry:ui",
       "target": "components/ui/command-palette.tsx",
-      "content": "import { Command as CommandPrimitive } from \"cmdk\";\nimport { ChevronRight, Search } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport { Dialog } from \"@/components/ui/dialog\";\n\nexport interface CommandItem {\n  id: string;\n  label: ReactNode;\n  /** Optional secondary line (path, hint, shortcut). */\n  hint?: ReactNode;\n  /** Optional group name. Items with the same group are visually grouped. */\n  group?: string;\n  /** Optional icon. */\n  icon?: IconComponent;\n  /** Optional searchable plain-text used by the cmdk ranker. Falls back to `label` when string. */\n  searchable?: string;\n}\n\ninterface CommandPaletteProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  items: CommandItem[];\n  onSelect: (id: string) => void;\n  placeholder?: string;\n  emptyMessage?: ReactNode;\n  /**\n   * Optional custom filter score (0 = no match, > 0 = match). Receives the\n   * `value` (the item's searchable text) and the current `search` query.\n   * Defaults to cmdk's built-in fuzzy ranker which prioritizes substring +\n   * word-boundary + consecutive matches.\n   */\n  filter?: (value: string, search: string) => number;\n}\n\nconst defaultEmpty = \"No results.\";\n\n/**\n * CommandPalette — Cmd+K-style global launcher with full keyboard navigation.\n *\n * Built on `cmdk` (the de-facto shadcn pattern) + Theo Dialog. Provides\n * out-of-the-box: ArrowUp/ArrowDown navigation, Enter selection, Escape close,\n * Home/End, active-item highlight via `data-selected`, and fuzzy ranking.\n *\n * Stateless: caller owns `open` / `onOpenChange` / `items`. Selecting an item\n * fires `onSelect(id)` and closes the dialog.\n */\nfunction CommandPalette({\n  open,\n  onOpenChange,\n  items,\n  onSelect,\n  placeholder = \"Type a command or search…\",\n  emptyMessage = defaultEmpty,\n  filter,\n}: CommandPaletteProps) {\n  const [search, setSearch] = useState(\"\");\n\n  const groups = useMemo(() => {\n    const map = new Map<string, CommandItem[]>();\n    for (const item of items) {\n      const key = item.group ?? \"\";\n      if (!map.has(key)) map.set(key, []);\n      map.get(key)?.push(item);\n    }\n    return Array.from(map.entries());\n  }, [items]);\n\n  const handleSelect = (id: string) => {\n    onSelect(id);\n    onOpenChange(false);\n    setSearch(\"\");\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <Dialog.Content className=\"max-w-xl p-0\" hideCloseButton>\n        <Dialog.Title className=\"sr-only\">Command palette</Dialog.Title>\n        <Dialog.Description className=\"sr-only\">\n          Type to search commands. Use arrow keys to navigate, Enter to select, Escape to close.\n        </Dialog.Description>\n        <CommandPrimitive label=\"Command palette\" shouldFilter {...(filter ? { filter } : {})}>\n          <div className=\"flex items-center gap-2 border-border/40 border-b px-4 py-3\">\n            <Search className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n            <CommandPrimitive.Input\n              value={search}\n              onValueChange={setSearch}\n              placeholder={placeholder}\n              className={cn(\n                \"flex-1 bg-transparent\",\n                \"font-sans text-body-md text-foreground placeholder:text-muted-foreground\",\n                \"focus:outline-none\",\n              )}\n            />\n            <span className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-label text-muted-foreground\">\n              ⌘K\n            </span>\n          </div>\n          <CommandPrimitive.List className=\"max-h-[420px] overflow-y-auto p-1\">\n            <CommandPrimitive.Empty className=\"px-3 py-6 text-center text-body-sm text-muted-foreground\">\n              {emptyMessage}\n            </CommandPrimitive.Empty>\n            {groups.map(([groupName, list]) => (\n              <CommandPrimitive.Group\n                key={groupName || \"default\"}\n                heading={groupName || undefined}\n                className={cn(\n                  \"[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1\",\n                  \"[&_[cmdk-group-heading]]:font-sans [&_[cmdk-group-heading]]:text-label-caps\",\n                  \"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\n                )}\n              >\n                {list.map((item) => {\n                  const Icon = item.icon;\n                  const value =\n                    item.searchable ?? (typeof item.label === \"string\" ? item.label : item.id);\n                  return (\n                    <CommandPrimitive.Item\n                      key={item.id}\n                      value={value}\n                      onSelect={() => handleSelect(item.id)}\n                      className={cn(\n                        \"flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-left\",\n                        \"transition-colors hover:bg-muted\",\n                        \"data-[selected=true]:bg-muted\",\n                        \"focus-visible:outline-none\",\n                      )}\n                    >\n                      {Icon ? <Icon className=\"size-4 text-primary\" /> : null}\n                      <div className=\"min-w-0 flex-1\">\n                        <p className=\"truncate text-body-sm text-foreground\">{item.label}</p>\n                        {item.hint ? (\n                          <p className=\"truncate font-mono text-label text-muted-foreground\">\n                            {item.hint}\n                          </p>\n                        ) : null}\n                      </div>\n                      <ChevronRight className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n                    </CommandPrimitive.Item>\n                  );\n                })}\n              </CommandPrimitive.Group>\n            ))}\n          </CommandPrimitive.List>\n        </CommandPrimitive>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n\nexport { CommandPalette };\n"
+      "content": "\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { ChevronRight, Search } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport { Dialog } from \"@/components/ui/dialog\";\n\nexport interface CommandItem {\n  id: string;\n  label: ReactNode;\n  /** Optional secondary line (path, hint, shortcut). */\n  hint?: ReactNode;\n  /** Optional group name. Items with the same group are visually grouped. */\n  group?: string;\n  /** Optional icon. */\n  icon?: IconComponent;\n  /** Optional searchable plain-text used by the cmdk ranker. Falls back to `label` when string. */\n  searchable?: string;\n}\n\ninterface CommandPaletteProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  items: CommandItem[];\n  onSelect: (id: string) => void;\n  placeholder?: string;\n  emptyMessage?: ReactNode;\n  /**\n   * Optional custom filter score (0 = no match, > 0 = match). Receives the\n   * `value` (the item's searchable text) and the current `search` query.\n   * Defaults to cmdk's built-in fuzzy ranker which prioritizes substring +\n   * word-boundary + consecutive matches.\n   */\n  filter?: (value: string, search: string) => number;\n}\n\nconst defaultEmpty = \"No results.\";\n\n/**\n * CommandPalette — Cmd+K-style global launcher with full keyboard navigation.\n *\n * Built on `cmdk` (the de-facto shadcn pattern) + Theo Dialog. Provides\n * out-of-the-box: ArrowUp/ArrowDown navigation, Enter selection, Escape close,\n * Home/End, active-item highlight via `data-selected`, and fuzzy ranking.\n *\n * Stateless: caller owns `open` / `onOpenChange` / `items`. Selecting an item\n * fires `onSelect(id)` and closes the dialog.\n */\nfunction CommandPalette({\n  open,\n  onOpenChange,\n  items,\n  onSelect,\n  placeholder = \"Type a command or search…\",\n  emptyMessage = defaultEmpty,\n  filter,\n}: CommandPaletteProps) {\n  const [search, setSearch] = useState(\"\");\n\n  const groups = useMemo(() => {\n    const map = new Map<string, CommandItem[]>();\n    for (const item of items) {\n      const key = item.group ?? \"\";\n      if (!map.has(key)) map.set(key, []);\n      map.get(key)?.push(item);\n    }\n    return Array.from(map.entries());\n  }, [items]);\n\n  const handleSelect = (id: string) => {\n    onSelect(id);\n    onOpenChange(false);\n    setSearch(\"\");\n  };\n\n  return (\n    <Dialog data-slot=\"command-palette\" open={open} onOpenChange={onOpenChange}>\n      <Dialog.Content className=\"max-w-xl p-0\" hideCloseButton>\n        <Dialog.Title className=\"sr-only\">Command palette</Dialog.Title>\n        <Dialog.Description className=\"sr-only\">\n          Type to search commands. Use arrow keys to navigate, Enter to select, Escape to close.\n        </Dialog.Description>\n        <CommandPrimitive label=\"Command palette\" shouldFilter {...(filter ? { filter } : {})}>\n          <div className=\"flex items-center gap-2 border-border/40 border-b px-4 py-3\">\n            <Search className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n            <CommandPrimitive.Input\n              value={search}\n              onValueChange={setSearch}\n              placeholder={placeholder}\n              className={cn(\n                \"flex-1 bg-transparent\",\n                \"font-sans text-body-md text-foreground placeholder:text-muted-foreground\",\n                \"focus:outline-none\",\n              )}\n            />\n            <span className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-label text-muted-foreground\">\n              ⌘K\n            </span>\n          </div>\n          <CommandPrimitive.List className=\"max-h-[420px] overflow-y-auto p-1\">\n            <CommandPrimitive.Empty className=\"px-3 py-6 text-center text-body-sm text-muted-foreground\">\n              {emptyMessage}\n            </CommandPrimitive.Empty>\n            {groups.map(([groupName, list]) => (\n              <CommandPrimitive.Group\n                key={groupName || \"default\"}\n                heading={groupName || undefined}\n                className={cn(\n                  \"[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1\",\n                  \"[&_[cmdk-group-heading]]:font-sans [&_[cmdk-group-heading]]:text-label-caps\",\n                  \"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\n                )}\n              >\n                {list.map((item) => {\n                  const Icon = item.icon;\n                  const value =\n                    item.searchable ?? (typeof item.label === \"string\" ? item.label : item.id);\n                  return (\n                    <CommandPrimitive.Item\n                      key={item.id}\n                      value={value}\n                      onSelect={() => handleSelect(item.id)}\n                      className={cn(\n                        \"flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-left\",\n                        \"transition-colors hover:bg-muted\",\n                        \"data-[selected=true]:bg-muted\",\n                        \"focus-visible:outline-none\",\n                      )}\n                    >\n                      {Icon ? <Icon className=\"size-4 text-primary\" /> : null}\n                      <div className=\"min-w-0 flex-1\">\n                        <p className=\"truncate text-body-sm text-foreground\">{item.label}</p>\n                        {item.hint ? (\n                          <p className=\"truncate font-mono text-label text-muted-foreground\">\n                            {item.hint}\n                          </p>\n                        ) : null}\n                      </div>\n                      <ChevronRight className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n                    </CommandPrimitive.Item>\n                  );\n                })}\n              </CommandPrimitive.Group>\n            ))}\n          </CommandPrimitive.List>\n        </CommandPrimitive>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n\nexport { CommandPalette };\n"
     }
   ]
 }

package/registry/r/confirm-dialog.json

@@ -19,7 +19,7 @@
       "path": "components/composites/confirm-dialog/confirm-dialog.tsx",
       "type": "registry:ui",
       "target": "components/ui/confirm-dialog.tsx",
-      "content": "import { Loader2 } from \"lucide-react\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Dialog } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\n\n/**\n * ConfirmDialog — controlled confirmation modal built on `Dialog`.\n *\n * Focuses Cancel on open (deliberate — NOT the destructive button).\n * `intent=\"destructive\"` styles the confirm button with the destructive\n * variant. `confirmationPhrase` enables typed-confirmation guard:\n * the confirm button is disabled until the input value matches the\n * phrase exactly (case-sensitive). An empty string phrase is treated\n * as \"no phrase required\" (`!!confirmationPhrase`). Pressing Enter in\n * the input triggers confirm when `canConfirm` is true.\n *\n * `onConfirm` can be async. While the returned promise is pending,\n * both buttons are disabled and a `Loader2` spinner appears. On\n * resolve, the dialog closes via `onOpenChange(false)`. On reject,\n * the dialog stays open so the consumer can show their own error.\n *\n * @example\n *   <ConfirmDialog\n *     open={open} onOpenChange={setOpen}\n *     title=\"Delete project\"\n *     description=\"This cannot be undone.\"\n *     intent=\"destructive\"\n *     confirmationPhrase=\"my-project\"\n *     onConfirm={async () => api.deleteProject(id)}\n *   />\n */\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: ReactNode;\n  description: ReactNode;\n  confirmLabel?: ReactNode;\n  cancelLabel?: ReactNode;\n  intent?: \"default\" | \"destructive\";\n  confirmationPhrase?: string;\n  onConfirm: () => void | Promise<void>;\n  loading?: boolean;\n}\n\nconst ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n  (\n    {\n      open,\n      onOpenChange,\n      title,\n      description,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      intent = \"default\",\n      confirmationPhrase,\n      onConfirm,\n      loading: externalLoading,\n    },\n    ref,\n  ) => {\n    const [phraseInput, setPhraseInput] = useState(\"\");\n    const [internalLoading, setInternalLoading] = useState(false);\n    const cancelRef = useRef<HTMLButtonElement | null>(null);\n\n    const phraseRequired = !!confirmationPhrase;\n    const phraseMatched = phraseRequired ? phraseInput === confirmationPhrase : true;\n    const showLoading = externalLoading === true || internalLoading;\n    const canConfirm = phraseMatched && !showLoading;\n\n    // Reset phrase input whenever the dialog closes.\n    useEffect(() => {\n      if (!open) setPhraseInput(\"\");\n    }, [open]);\n\n    // Auto-focus Cancel on open (NOT confirm — destructive safety).\n    useEffect(() => {\n      if (open) {\n        const id = window.setTimeout(() => cancelRef.current?.focus(), 0);\n        return () => window.clearTimeout(id);\n      }\n    }, [open]);\n\n    async function handleConfirm() {\n      if (!canConfirm) return;\n      setInternalLoading(true);\n      try {\n        await onConfirm();\n        onOpenChange(false);\n      } catch {\n        // Stay open; consumer surfaces error.\n      } finally {\n        setInternalLoading(false);\n      }\n    }\n\n    function handleInputKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n      if (e.key === \"Enter\" && canConfirm) {\n        e.preventDefault();\n        void handleConfirm();\n      }\n    }\n\n    return (\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <Dialog.Content ref={ref}>\n          <Dialog.Header>\n            <Dialog.Title>{title}</Dialog.Title>\n            <Dialog.Description>{description}</Dialog.Description>\n          </Dialog.Header>\n          {phraseRequired ? (\n            <Dialog.Body>\n              <p className=\"mb-2 text-body-sm text-muted-foreground\">\n                Type{\" \"}\n                <code className=\"rounded bg-muted px-1 py-0.5 font-mono text-foreground\">\n                  {confirmationPhrase}\n                </code>{\" \"}\n                to confirm\n              </p>\n              <Input\n                value={phraseInput}\n                onChange={(e) => setPhraseInput(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                autoComplete=\"off\"\n                aria-label=\"Confirmation phrase\"\n              />\n            </Dialog.Body>\n          ) : null}\n          <Dialog.Footer>\n            <Button\n              ref={cancelRef}\n              variant=\"secondary\"\n              onClick={() => onOpenChange(false)}\n              disabled={showLoading}\n            >\n              {cancelLabel}\n            </Button>\n            <Button\n              variant={intent === \"destructive\" ? \"destructive\" : \"primary\"}\n              onClick={() => void handleConfirm()}\n              disabled={!canConfirm}\n              data-confirm\n            >\n              {showLoading ? <Loader2 aria-hidden=\"true\" className=\"size-4 animate-spin\" /> : null}\n              {confirmLabel}\n            </Button>\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>\n    );\n  },\n);\nConfirmDialog.displayName = \"ConfirmDialog\";\n\nexport { ConfirmDialog };\n"
+      "content": "\"use client\";\n\nimport { Loader2 } from \"lucide-react\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Dialog } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\n\n/**\n * ConfirmDialog — controlled confirmation modal built on `Dialog`.\n *\n * Focuses Cancel on open (deliberate — NOT the destructive button).\n * `intent=\"destructive\"` styles the confirm button with the destructive\n * variant. `confirmationPhrase` enables typed-confirmation guard:\n * the confirm button is disabled until the input value matches the\n * phrase exactly (case-sensitive). An empty string phrase is treated\n * as \"no phrase required\" (`!!confirmationPhrase`). Pressing Enter in\n * the input triggers confirm when `canConfirm` is true.\n *\n * `onConfirm` can be async. While the returned promise is pending,\n * both buttons are disabled and a `Loader2` spinner appears. On\n * resolve, the dialog closes via `onOpenChange(false)`. On reject,\n * the dialog stays open so the consumer can show their own error.\n *\n * @example\n *   <ConfirmDialog\n *     open={open} onOpenChange={setOpen}\n *     title=\"Delete project\"\n *     description=\"This cannot be undone.\"\n *     intent=\"destructive\"\n *     confirmationPhrase=\"my-project\"\n *     onConfirm={async () => api.deleteProject(id)}\n *   />\n */\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: ReactNode;\n  description: ReactNode;\n  confirmLabel?: ReactNode;\n  cancelLabel?: ReactNode;\n  intent?: \"default\" | \"destructive\";\n  confirmationPhrase?: string;\n  onConfirm: () => void | Promise<void>;\n  loading?: boolean;\n}\n\nconst ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(\n  (\n    {\n      open,\n      onOpenChange,\n      title,\n      description,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      intent = \"default\",\n      confirmationPhrase,\n      onConfirm,\n      loading: externalLoading,\n    },\n    ref,\n  ) => {\n    const [phraseInput, setPhraseInput] = useState(\"\");\n    const [internalLoading, setInternalLoading] = useState(false);\n    const cancelRef = useRef<HTMLButtonElement | null>(null);\n\n    const phraseRequired = !!confirmationPhrase;\n    const phraseMatched = phraseRequired ? phraseInput === confirmationPhrase : true;\n    const showLoading = externalLoading === true || internalLoading;\n    const canConfirm = phraseMatched && !showLoading;\n\n    // Reset phrase input whenever the dialog closes.\n    useEffect(() => {\n      if (!open) setPhraseInput(\"\");\n    }, [open]);\n\n    // Auto-focus Cancel on open (NOT confirm — destructive safety).\n    useEffect(() => {\n      if (open) {\n        const id = window.setTimeout(() => cancelRef.current?.focus(), 0);\n        return () => window.clearTimeout(id);\n      }\n    }, [open]);\n\n    async function handleConfirm() {\n      if (!canConfirm) return;\n      setInternalLoading(true);\n      try {\n        await onConfirm();\n        onOpenChange(false);\n      } catch {\n        // Stay open; consumer surfaces error.\n      } finally {\n        setInternalLoading(false);\n      }\n    }\n\n    function handleInputKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n      if (e.key === \"Enter\" && canConfirm) {\n        e.preventDefault();\n        void handleConfirm();\n      }\n    }\n\n    return (\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <Dialog.Content data-slot=\"confirm-dialog\" ref={ref}>\n          <Dialog.Header>\n            <Dialog.Title>{title}</Dialog.Title>\n            <Dialog.Description>{description}</Dialog.Description>\n          </Dialog.Header>\n          {phraseRequired ? (\n            <Dialog.Body>\n              <p className=\"mb-2 text-body-sm text-muted-foreground\">\n                Type{\" \"}\n                <code className=\"rounded bg-muted px-1 py-0.5 font-mono text-foreground\">\n                  {confirmationPhrase}\n                </code>{\" \"}\n                to confirm\n              </p>\n              <Input\n                value={phraseInput}\n                onChange={(e) => setPhraseInput(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                autoComplete=\"off\"\n                aria-label=\"Confirmation phrase\"\n              />\n            </Dialog.Body>\n          ) : null}\n          <Dialog.Footer>\n            <Button\n              ref={cancelRef}\n              variant=\"secondary\"\n              onClick={() => onOpenChange(false)}\n              disabled={showLoading}\n            >\n              {cancelLabel}\n            </Button>\n            <Button\n              variant={intent === \"destructive\" ? \"destructive\" : \"primary\"}\n              onClick={() => void handleConfirm()}\n              disabled={!canConfirm}\n              data-confirm\n            >\n              {showLoading ? <Loader2 aria-hidden=\"true\" className=\"size-4 animate-spin\" /> : null}\n              {confirmLabel}\n            </Button>\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>\n    );\n  },\n);\nConfirmDialog.displayName = \"ConfirmDialog\";\n\nexport { ConfirmDialog };\n"
     }
   ]
 }

package/registry/r/confirm-prompt.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "confirm-prompt",
+  "type": "registry:block",
+  "title": "ConfirmPrompt",
+  "description": "Binary yes/no ask-the-user card with an optional destructive variant exposed as an alertdialog.",
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/badge.json",
+    "https://usetheodev.github.io/theo-ui/r/button.json",
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/confirm-prompt/confirm-prompt.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/confirm-prompt.tsx",
+      "content": "\"use client\";\n\nimport { forwardRef, useId } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\n/**\n * ConfirmPrompt — binary yes/no \"ask the user\" card for agent surfaces.\n *\n * The simplest member of the prompt family: a question with an optional header\n * chip and two actions. Use `variant=\"destructive\"` for dangerous confirmations\n * (delete, drop, force-push) — it tones the confirm button red and exposes the\n * card as an `alertdialog` so assistive tech announces the stakes.\n *\n * Renders one question at a time — sequencing is the consumer's responsibility.\n */\n\nexport interface ConfirmPromptProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  /** The question being asked. */\n  question: ReactNode;\n  /** Optional secondary line under the question. */\n  description?: ReactNode;\n  /** Optional short header chip (rendered as a Badge). */\n  badge?: ReactNode;\n  /** Tone of the confirm action. `destructive` also exposes role=alertdialog. */\n  variant?: \"primary\" | \"destructive\";\n  /** Confirm button label. Defaults to \"Confirm\". */\n  confirmLabel?: ReactNode;\n  /** Cancel button label. Defaults to \"Cancel\". Omit `onCancel` to hide it. */\n  cancelLabel?: ReactNode;\n  /** Pressing Confirm. */\n  onConfirm?: () => void;\n  /** Pressing Cancel. */\n  onCancel?: () => void;\n}\n\nconst ConfirmPrompt = forwardRef<HTMLElement, ConfirmPromptProps>(\n  (\n    {\n      className,\n      question,\n      description,\n      badge,\n      variant = \"primary\",\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      onConfirm,\n      onCancel,\n      ...props\n    },\n    ref,\n  ) => {\n    const baseId = useId();\n    const questionId = `${baseId}-question`;\n    const isDestructive = variant === \"destructive\";\n\n    return (\n      <section\n        data-slot=\"confirm-prompt\"\n        ref={ref}\n        role={isDestructive ? \"alertdialog\" : undefined}\n        aria-labelledby={questionId}\n        className={cn(\n          \"grid w-full gap-4 rounded-xl border bg-card p-5 text-card-foreground shadow-md\",\n          \"transition-shadow duration-base ease-out-soft\",\n          isDestructive && \"border-destructive/40 bg-destructive/5\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <h3 id={questionId} className=\"font-display text-foreground text-title-md tracking-tight\">\n            {question}\n          </h3>\n          {badge != null ? (\n            <Badge\n              variant={isDestructive ? \"destructive\" : \"primary\"}\n              size=\"sm\"\n              className=\"shrink-0\"\n            >\n              {badge}\n            </Badge>\n          ) : null}\n        </header>\n        {description != null ? (\n          <p className=\"text-body-sm text-muted-foreground\">{description}</p>\n        ) : null}\n\n        <footer className=\"flex items-center justify-end gap-2\">\n          <Button size=\"sm\" variant=\"secondary\" onClick={onCancel}>\n            {cancelLabel}\n          </Button>\n          <Button size=\"sm\" variant={isDestructive ? \"destructive\" : \"primary\"} onClick={onConfirm}>\n            {confirmLabel}\n          </Button>\n        </footer>\n      </section>\n    );\n  },\n);\nConfirmPrompt.displayName = \"ConfirmPrompt\";\n\nexport { ConfirmPrompt };\n"
+    }
+  ]
+}

package/registry/r/context-card.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/context-card/context-card.tsx",
       "type": "registry:ui",
       "target": "components/ui/context-card.tsx",
-      "content": "import { BookOpen } 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\ninterface ContextCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: ReactNode;\n  description?: ReactNode;\n  /** Optional illustration slot (rendered above title). */\n  illustration?: ReactNode;\n  /** Icon for the title row — used when illustration is omitted. */\n  icon?: IconComponent;\n}\n\n/**\n * ContextCard — generic \"informational\" card for the right inspector.\n *\n * Used as the \"Contexto\" card on Files screens: illustration / icon, title,\n * short description. Inert by design — no actions.\n */\nconst ContextCard = forwardRef<HTMLElement, ContextCardProps>(\n  ({ className, title, description, illustration, icon, ...props }, ref) => {\n    const Icon = icon ?? BookOpen;\n    return (\n      <section\n        ref={ref}\n        className={cn(\"grid gap-3 rounded-xl border border-border/40 bg-muted/30 p-4\", className)}\n        {...props}\n      >\n        {illustration ? (\n          <div className=\"flex justify-center\">{illustration}</div>\n        ) : (\n          <Icon className=\"size-5 text-primary\" aria-hidden=\"true\" />\n        )}\n        {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : null}\n        {description ? <p className=\"text-body-sm text-muted-foreground\">{description}</p> : null}\n      </section>\n    );\n  },\n);\nContextCard.displayName = \"ContextCard\";\n\nexport { ContextCard };\n"
+      "content": "import { BookOpen } 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\ninterface ContextCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: ReactNode;\n  description?: ReactNode;\n  /** Optional illustration slot (rendered above title). */\n  illustration?: ReactNode;\n  /** Icon for the title row — used when illustration is omitted. */\n  icon?: IconComponent;\n}\n\n/**\n * ContextCard — generic \"informational\" card for the right inspector.\n *\n * Used as the \"Contexto\" card on Files screens: illustration / icon, title,\n * short description. Inert by design — no actions.\n */\nconst ContextCard = forwardRef<HTMLElement, ContextCardProps>(\n  ({ className, title, description, illustration, icon, ...props }, ref) => {\n    const Icon = icon ?? BookOpen;\n    return (\n      <section\n        data-slot=\"context-card\"\n        ref={ref}\n        className={cn(\"grid gap-3 rounded-xl border border-border/40 bg-muted/30 p-4\", className)}\n        {...props}\n      >\n        {illustration ? (\n          <div className=\"flex justify-center\">{illustration}</div>\n        ) : (\n          <Icon className=\"size-5 text-primary\" aria-hidden=\"true\" />\n        )}\n        {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : null}\n        {description ? <p className=\"text-body-sm text-muted-foreground\">{description}</p> : null}\n      </section>\n    );\n  },\n);\nContextCard.displayName = \"ContextCard\";\n\nexport { ContextCard };\n"
     }
   ]
 }