@usetheo/ui 0.13.2 → 0.15.0

package/registry/r/chat-message.json

@@ -1,124 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chat-message",
-  "type": "registry:ui",
-  "title": "ChatMessage",
-  "description": "Composable chat-turn surface with Vercel AI SDK UIMessage parts API — markdown, code blocks, math, tool calls, reasoning, file attachments, source citations, branching navigation.",
-  "dependencies": [
-    "lucide-react",
-    "hast",
-    "mdast"
-  ],
-  "registryDependencies": [
-    "https://usetheodev.github.io/theo-ui/r/chat-types.json",
-    "https://usetheodev.github.io/theo-ui/r/cn.json",
-    "https://usetheodev.github.io/theo-ui/r/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": [
-    {
-      "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 {\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      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 * `@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      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 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 (\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      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          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      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",
-      "type": "registry:ui",
-      "target": "components/ui/chat-message/parts/data-part.tsx",
-      "content": "/**\n * `<DataPart>` — renders a `DataUIPart` (`type: \"data-${name}\"`).\n *\n * Consumer-defined data parts get routed to a custom renderer via the\n * `dataRenderers` prop on `<ChatMessage>`. Without a matching renderer,\n * the part renders as a compact `<details>` JSON dump (debug-friendly).\n */\nimport { CodeIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/cn\";\nimport type { DataUIPart } from \"@/types/chat\";\n\nexport type DataRenderer = (data: unknown, part: DataUIPart) => JSX.Element;\nexport type DataRendererMap = Record<string, DataRenderer>;\n\nexport interface DataPartProps {\n  part: DataUIPart;\n  /** Map of `data-${name}` → renderer. */\n  renderers?: DataRendererMap;\n}\n\nfunction deriveDataName(part: DataUIPart): string {\n  return part.type.slice(\"data-\".length);\n}\n\nexport function DataPart({ part, renderers }: DataPartProps): JSX.Element {\n  const name = deriveDataName(part);\n  const renderer = renderers?.[part.type] ?? renderers?.[name];\n  if (renderer) return renderer(part.data, part);\n\n  return (\n    <details\n      className={cn(\"my-2 rounded-md border border-border bg-muted/20 px-3 py-1.5 text-body-sm\")}\n      data-theo-data={name}\n    >\n      <summary className=\"flex cursor-pointer items-center gap-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n        <CodeIcon className=\"size-3\" aria-hidden=\"true\" />\n        <span>data-{name}</span>\n      </summary>\n      <pre className=\"mt-2 overflow-x-auto border-border border-t pt-2 text-code-sm\">\n        <code>{safeStringify(part.data)}</code>\n      </pre>\n    </details>\n  );\n}\n\nfunction safeStringify(value: unknown): string {\n  try {\n    return JSON.stringify(value, null, 2);\n  } catch {\n    return String(value);\n  }\n}\n"
-    },
-    {
-      "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/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",
-      "type": "registry:lib",
-      "target": "lib/markdown/parser.ts",
-      "content": "/**\n * Markdown → React pipeline for chat messages.\n *\n *   parseMarkdownToReact(md, opts)\n *     ├─ preprocessStreaming(md, isStreaming)  → auto-close incomplete tokens\n *     ├─ parseBody(md)                         → mdast Root (micromark + GFM)\n *     ├─ mdastToHast(mdastTree)                → hast Root (allowDangerousHtml=false)\n *     ├─ sanitizeHast(hastTree)                → hast Root via hast-util-sanitize\n *     └─ hastToReact(hastTree)                 → React tree (jsx-runtime)\n *\n * Every transform lazily imports its peer-dep so the barrel never vendors the\n * markdown stack. Consumers that install the optional peer-deps (already\n * declared by the Slide engine) get rich rendering; consumers that don't get\n * a plain-text fallback via `parseMarkdownToReactSafe`.\n */\nimport type { Root as HastRoot } from \"hast\";\nimport type { Root as MdastRoot } from \"mdast\";\nimport { type ReactElement, createElement } from \"react\";\nimport { preprocessStreaming } from \"@/lib/markdown/streaming-preprocess\";\n\nexport interface ParseMarkdownOptions {\n  /**\n   * Override individual element renderers. The `components` map is passed\n   * through to `hast-util-to-jsx-runtime` (e.g. `{ code: MyCodeBlock }`).\n   */\n  components?: Record<string, unknown>;\n  /**\n   * True while tokens are still arriving from the model. Enables the\n   * streaming-safe preprocess pass. Default: `false`.\n   */\n  isStreaming?: boolean;\n}\n\nexport async function parseBody(body: string): Promise<MdastRoot> {\n  const [{ fromMarkdown }, { gfmFromMarkdown }, { gfm }] = await Promise.all([\n    import(\"mdast-util-from-markdown\"),\n    import(\"mdast-util-gfm\"),\n    import(\"micromark-extension-gfm\"),\n  ]);\n  return fromMarkdown(body, {\n    extensions: [gfm()],\n    mdastExtensions: [gfmFromMarkdown()],\n  });\n}\n\nexport async function mdastToHast(tree: MdastRoot): Promise<HastRoot> {\n  const { toHast } = await import(\"mdast-util-to-hast\");\n  const hast = toHast(tree, { allowDangerousHtml: false });\n  if (!hast || hast.type !== \"root\") {\n    return { type: \"root\", children: hast ? [hast] : [] } as HastRoot;\n  }\n  return hast as HastRoot;\n}\n\nexport async function sanitizeHast(tree: HastRoot): Promise<HastRoot> {\n  const { sanitize, defaultSchema } = await import(\"hast-util-sanitize\");\n  // Allow class names on `pre`/`code` so syntax-highlight passes survive.\n  // `defaultSchema.attributes` uses a wider union than hast-util-sanitize's\n  // PropertyDefinition; cast to satisfy the parameter type while preserving\n  // the same runtime shape `defaultSchema` already uses.\n  const schema = {\n    ...defaultSchema,\n    attributes: {\n      ...(defaultSchema.attributes ?? {}),\n      code: [...(defaultSchema.attributes?.code ?? []), [\"className\", /^language-./]],\n      pre: [...(defaultSchema.attributes?.pre ?? []), [\"className\", /./]],\n      span: [...(defaultSchema.attributes?.span ?? []), [\"className\", /./], [\"style\"]],\n    },\n  } as Parameters<typeof sanitize>[1];\n  const safe = sanitize(tree, schema);\n  return safe.type === \"root\"\n    ? (safe as HastRoot)\n    : ({ type: \"root\", children: [safe] } as HastRoot);\n}\n\nexport async function hastToReact(\n  tree: HastRoot,\n  components?: Record<string, unknown>,\n): Promise<ReactElement> {\n  const { Fragment, jsx, jsxs } = await import(\"react/jsx-runtime\");\n  const { toJsxRuntime } = await import(\"hast-util-to-jsx-runtime\");\n  return toJsxRuntime(tree, {\n    Fragment,\n    jsx,\n    jsxs,\n    components,\n  }) as ReactElement;\n}\n\n/**\n * Public entry point. Returns a Promise<ReactElement> ready to render inline.\n * If any peer-dep is missing at runtime, the function rejects — callers\n * should use `parseMarkdownToReactSafe` for a graceful fallback.\n */\nexport async function parseMarkdownToReact(\n  markdown: string,\n  opts: ParseMarkdownOptions = {},\n): Promise<ReactElement> {\n  const preprocessed = preprocessStreaming(markdown, opts.isStreaming ?? false);\n  const mdast = await parseBody(preprocessed);\n  const hast = await mdastToHast(mdast);\n  const safe = await sanitizeHast(hast);\n  return hastToReact(safe, opts.components);\n}\n\n/**\n * Same as `parseMarkdownToReact` but returns a plain-text `<span>` fallback\n * if any peer-dep is missing (instead of rejecting). Used by `<ChatMessage>`\n * to keep the surface rendering when consumers opted out of the markdown\n * stack.\n */\nexport async function parseMarkdownToReactSafe(\n  markdown: string,\n  opts: ParseMarkdownOptions = {},\n): Promise<ReactElement> {\n  try {\n    return await parseMarkdownToReact(markdown, opts);\n  } catch {\n    return createElement(\"span\", { className: \"whitespace-pre-wrap\" }, markdown);\n  }\n}\n"
-    },
-    {
-      "path": "lib/markdown/streaming-preprocess.ts",
-      "type": "registry:lib",
-      "target": "lib/markdown/streaming-preprocess.ts",
-      "content": "/**\n * Streaming-safe markdown preprocessor.\n *\n * When markdown arrives token-by-token from an LLM, the tail of the buffer\n * is almost always mid-token: `**bold` (unclosed), `[link` (no `]`), an\n * unterminated ` ```fence`, an unfinished `$math$`. A vanilla markdown\n * parser treats those as literal text — the user sees `**bold` instead of\n * **bold** for the few hundred ms until the matching token arrives. This\n * \"flash\" is the single biggest UX defect of naïve streaming markdown\n * (cf. Streamdown's design note).\n *\n * The trick — adopted from Streamdown (MIT, vercel) and re-implemented\n * here — is to NEVER mutate the original buffer (the model's authoritative\n * stream), but to feed a TRANSIENTLY auto-closed copy to the parser. When\n * the next token actually closes the syntax, the temporary close was a\n * no-op and the real one takes over.\n *\n * Scope:\n *   - bold/italic markers: `**`, `__`, `*`, `_`\n *   - inline code: single backtick `` ` ``\n *   - fenced code: triple-backtick (with optional language)\n *   - inline math: `$` … `$`\n *   - block math: `$$` … `$$`\n *   - links: `[text](url)` — close the `)` if missing\n *\n * Out of scope (yet):\n *   - reference-style links `[text][ref]` — rare in LLM output\n *   - HTML tags — Tailwind v4 already sanitizes downstream\n *   - tables — partial tables render OK as plain text mid-stream\n */\n\n/**\n * Auto-close incomplete markdown tokens in the tail of a streaming buffer.\n * Returns a copy that's safe to pass to the parser; the original buffer\n * stays untouched.\n *\n * `isStreaming = false` short-circuits (returns input unchanged) — the\n * close-tokens are only synthesized while content is still arriving.\n */\nexport function preprocessStreaming(markdown: string, isStreaming = true): string {\n  if (!isStreaming) return markdown;\n\n  let buf = markdown;\n\n  /* ─── Fenced code blocks (highest priority — they swallow everything) */\n  // If there's an odd number of ``` runs, the last fence is unclosed.\n  const fenceCount = countTripleBackticks(buf);\n  if (fenceCount % 2 === 1) {\n    // Add a newline + closing fence so the parser sees a complete block.\n    buf = `${buf.endsWith(\"\\n\") ? buf : `${buf}\\n`}\\`\\`\\``;\n    // Once inside an unclosed fence the rest of the rules don't apply —\n    // everything is code text.\n    return buf;\n  }\n\n  /* ─── Block math `$$ … $$` (also greedy) */\n  const blockMathCount = countOccurrences(buf, \"$$\");\n  if (blockMathCount % 2 === 1) {\n    buf = `${buf}$$`;\n    return buf;\n  }\n\n  /* ─── Inline code, single backticks */\n  const inlineBackticks = countSingleBackticks(buf);\n  if (inlineBackticks % 2 === 1) {\n    buf = `${buf}\\``;\n  }\n\n  /* ─── Inline math `$ … $` (avoid double-counting `$$`) */\n  const inlineDollars = countSingleDollars(buf);\n  if (inlineDollars % 2 === 1) {\n    buf = `${buf}$`;\n  }\n\n  /* ─── Emphasis pairs */\n  // Order matters: close longer markers before shorter (`**` before `*`).\n  for (const marker of [\"**\", \"__\", \"*\", \"_\"]) {\n    if (countMarker(buf, marker) % 2 === 1) {\n      buf = `${buf}${marker}`;\n    }\n  }\n\n  /* ─── Links: `[text](url)` — close the URL paren if missing.\n   * Cheap heuristic: find the last `[` after the last `]`, and the last\n   * `(` after that with no matching `)`.\n   */\n  buf = closeUnclosedLink(buf);\n\n  return buf;\n}\n\n/* ─── Counting helpers (avoid regex global-state pitfalls) ───────────── */\n\nfunction countTripleBackticks(s: string): number {\n  let count = 0;\n  let i = 0;\n  while (i < s.length) {\n    if (s[i] === \"`\" && s[i + 1] === \"`\" && s[i + 2] === \"`\") {\n      count++;\n      i += 3;\n    } else {\n      i++;\n    }\n  }\n  return count;\n}\n\nfunction countSingleBackticks(s: string): number {\n  // Count ` characters that are NOT part of a ``` run.\n  let count = 0;\n  let i = 0;\n  while (i < s.length) {\n    if (s[i] === \"`\") {\n      if (s[i + 1] === \"`\" && s[i + 2] === \"`\") {\n        i += 3; // skip whole triple\n        continue;\n      }\n      count++;\n    }\n    i++;\n  }\n  return count;\n}\n\nfunction countOccurrences(s: string, needle: string): number {\n  if (needle.length === 0) return 0;\n  let count = 0;\n  let i = s.indexOf(needle);\n  while (i !== -1) {\n    count++;\n    i = s.indexOf(needle, i + needle.length);\n  }\n  return count;\n}\n\nfunction countSingleDollars(s: string): number {\n  // Single `$` that is NOT part of `$$`.\n  let count = 0;\n  let i = 0;\n  while (i < s.length) {\n    if (s[i] === \"$\") {\n      if (s[i + 1] === \"$\") {\n        i += 2; // skip whole pair\n        continue;\n      }\n      // also skip escaped \\$\n      if (i > 0 && s[i - 1] === \"\\\\\") {\n        i++;\n        continue;\n      }\n      count++;\n    }\n    i++;\n  }\n  return count;\n}\n\nfunction countMarker(s: string, marker: string): number {\n  if (marker.length === 0) return 0;\n  // For single-char markers (`*`, `_`), don't count double sequences as 2 —\n  // they ARE the double marker. For double-char markers, count occurrences\n  // and the single-marker pass below handles leftovers.\n  if (marker.length === 1) {\n    let count = 0;\n    let i = 0;\n    while (i < s.length) {\n      if (s[i] === marker) {\n        if (s[i + 1] === marker) {\n          // Part of double marker — skip both.\n          i += 2;\n          continue;\n        }\n        if (i > 0 && s[i - 1] === \"\\\\\") {\n          i++;\n          continue;\n        }\n        count++;\n      }\n      i++;\n    }\n    return count;\n  }\n  // Multi-char marker (`**`, `__`).\n  let count = 0;\n  let i = 0;\n  while (i <= s.length - marker.length) {\n    if (s.substring(i, i + marker.length) === marker) {\n      count++;\n      i += marker.length;\n    } else {\n      i++;\n    }\n  }\n  return count;\n}\n\nfunction closeUnclosedLink(s: string): string {\n  // Look for the trailing structure `[…](…` with no closing `)`.\n  const lastOpenParen = s.lastIndexOf(\"(\");\n  const lastCloseParen = s.lastIndexOf(\")\");\n  if (lastOpenParen === -1 || lastOpenParen <= lastCloseParen) return s;\n\n  // The `(` must be immediately preceded by `]` to be a link.\n  if (s[lastOpenParen - 1] !== \"]\") return s;\n\n  // Confirm there's a `[` before that `]`.\n  const closingBracket = lastOpenParen - 1;\n  const openingBracket = s.lastIndexOf(\"[\", closingBracket - 1);\n  if (openingBracket === -1) return s;\n\n  // Close it.\n  return `${s})`;\n}\n"
-    },
-    {
-      "path": "lib/markdown/code-block.tsx",
-      "type": "registry:lib",
-      "target": "lib/markdown/code-block.tsx",
-      "content": "\"use client\";\n\n/**\n * `<CodeBlock>` — fenced code block with syntax highlight + copy button.\n *\n * Lazy-loads `shiki` (peer-dep optional). If shiki is not installed, falls\n * back to a plain `<pre><code>` with the language label still visible. The\n * copy button works in both modes (clipboard API only).\n *\n * Inspired by `shadcn.io`'s AI code-block pattern:\n *   - language label top-left\n *   - copy button top-right, icon swap (Copy → Check) for ~2s after success\n *   - keyboard accessible (button is a real <button>)\n *   - SSR-safe: highlighted markup is sync-rendered when ready; before\n *     hydration, plain text shows (matches Slide's shiki plugin behavior).\n *\n * Used by `parseMarkdownToReact` via the `components.code` override.\n */\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface CodeBlockProps {\n  /** The raw source code. Newlines preserved verbatim. */\n  code: string;\n  /** Language hint (`typescript`, `python`, `bash`, …). Falls through if unknown. */\n  language?: string;\n  /** Dual-theme map — Shiki theme names. */\n  themes?: { light: string; dark: string };\n  /** Extra className for the outer wrapper. */\n  className?: string;\n}\n\nconst DEFAULT_THEMES = { light: \"github-light\", dark: \"github-dark\" };\n\nlet cachedHighlighter: unknown = null;\nlet highlighterFailed = false;\n\nasync function getHighlighter(themes: { light: string; dark: string }): Promise<unknown> {\n  if (cachedHighlighter) return cachedHighlighter;\n  if (highlighterFailed) return null;\n  try {\n    const shiki = await import(\"shiki\");\n    cachedHighlighter = await shiki.createHighlighter({\n      themes: [themes.light, themes.dark],\n      langs: [\n        \"ts\",\n        \"tsx\",\n        \"js\",\n        \"jsx\",\n        \"python\",\n        \"go\",\n        \"rust\",\n        \"java\",\n        \"json\",\n        \"yaml\",\n        \"bash\",\n        \"shell\",\n        \"html\",\n        \"css\",\n        \"sql\",\n        \"markdown\",\n      ],\n    });\n    return cachedHighlighter;\n  } catch {\n    highlighterFailed = true;\n    return null;\n  }\n}\n\nexport function CodeBlock({ code, language, themes, className }: CodeBlockProps): JSX.Element {\n  const [html, setHtml] = useState<string | null>(null);\n  const [copied, setCopied] = useState(false);\n  const effectiveThemes = themes ?? DEFAULT_THEMES;\n\n  useEffect(() => {\n    let cancelled = false;\n    if (!language) return;\n    getHighlighter(effectiveThemes)\n      .then((hl) => {\n        if (cancelled || !hl) return;\n        try {\n          // biome-ignore lint/suspicious/noExplicitAny: shiki Highlighter is untyped here\n          const out = (hl as any).codeToHtml(code, {\n            lang: language,\n            themes: { light: effectiveThemes.light, dark: effectiveThemes.dark },\n            defaultColor: \"light\",\n          });\n          setHtml(out);\n        } catch {\n          // unknown language or grammar load error — pass through plain\n        }\n      })\n      .catch(() => {\n        // peer-dep missing — silent; plain <pre><code> below renders\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language, effectiveThemes.light, effectiveThemes.dark, effectiveThemes]);\n\n  const handleCopy = async (): Promise<void> => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      /* clipboard denied — silent */\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"group relative my-4 overflow-hidden rounded-lg border border-border bg-muted/30\",\n        className,\n      )}\n      data-theo-code-block=\"\"\n    >\n      <div className=\"flex items-center justify-between border-border border-b bg-muted/50 px-3 py-1.5\">\n        <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          {language || \"text\"}\n        </span>\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          className={cn(\n            \"inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-label\",\n            \"text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground\",\n            \"focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring\",\n          )}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          {copied ? (\n            <>\n              <CheckIcon className=\"size-3.5\" aria-hidden=\"true\" />\n              <span>Copied</span>\n            </>\n          ) : (\n            <>\n              <CopyIcon className=\"size-3.5\" aria-hidden=\"true\" />\n              <span>Copy</span>\n            </>\n          )}\n        </button>\n      </div>\n      {html ? (\n        <div\n          className=\"[&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 overflow-x-auto p-3 text-code-sm\"\n          // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki output is sanitized HTML it produced itself; no user input flows through\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      ) : (\n        <pre className=\"overflow-x-auto p-3 text-code-sm\">\n          <code className={language ? `language-${language}` : undefined}>{code}</code>\n        </pre>\n      )}\n    </div>\n  );\n}\n"
-    },
-    {
-      "path": "lib/markdown/inline-code.tsx",
-      "type": "registry:lib",
-      "target": "lib/markdown/inline-code.tsx",
-      "content": "/**\n * `<InlineCode>` — styled inline `<code>` for markdown rendering.\n *\n * Differentiates inline code from fenced code-blocks (which use `<CodeBlock>`)\n * via subtle surface treatment. Per Violet Forge: muted background, mono\n * font, slight horizontal padding.\n */\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type InlineCodeProps = HTMLAttributes<HTMLElement>;\n\nexport function InlineCode({ className, children, ...props }: InlineCodeProps): JSX.Element {\n  return (\n    <code\n      className={cn(\n        \"rounded bg-muted px-1.5 py-0.5 font-mono text-code-sm text-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </code>\n  );\n}\n"
-    },
-    {
-      "path": "lib/markdown/math.tsx",
-      "type": "registry:lib",
-      "target": "lib/markdown/math.tsx",
-      "content": "\"use client\";\n\n/**\n * KaTeX math rendering — inline and block.\n *\n * `<MathInline>` for `$x + y$`, `<MathBlock>` for `$$\\sum_i x_i$$`. Both\n * lazy-load `katex` (peer-dep optional). When `katex` is not installed the\n * component renders a plain `<code>` fallback so the chat surface stays\n * usable.\n *\n * Markdown integration: enable in `parseMarkdownToReact` via the\n * `components` map (`{ \"math-inline\": MathInline, \"math-block\": MathBlock }`)\n * once a math mdast extension is wired in (`mdast-util-math`, peer-dep).\n */\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface KatexLib {\n  renderToString: (\n    tex: string,\n    opts?: { displayMode?: boolean; throwOnError?: boolean; output?: string },\n  ) => string;\n}\n\nlet katexCache: KatexLib | null = null;\nlet katexFailed = false;\n\nasync function loadKatex(): Promise<KatexLib | null> {\n  if (katexCache) return katexCache;\n  if (katexFailed) return null;\n  try {\n    const mod = (await import(\"katex\")) as unknown as { default?: KatexLib } & KatexLib;\n    // `katex` ships UMD-default; both shapes exist depending on the bundler.\n    const lib = mod.default ?? mod;\n    katexCache = lib;\n    return katexCache;\n  } catch {\n    katexFailed = true;\n    return null;\n  }\n}\n\ninterface MathProps {\n  /** The TeX source string (without `$` or `$$` wrappers). */\n  tex: string;\n  /** Inline (true) vs display (false). */\n  inline: boolean;\n  className?: string;\n}\n\nfunction MathImpl({ tex, inline, className }: MathProps): JSX.Element {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadKatex().then((katex) => {\n      if (cancelled || !katex) return;\n      try {\n        const out = katex.renderToString(tex, {\n          displayMode: !inline,\n          throwOnError: false,\n          output: \"html\",\n        });\n        setHtml(out);\n      } catch {\n        /* invalid TeX — leave plain fallback */\n      }\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [tex, inline]);\n\n  if (!html) {\n    const Tag = inline ? \"code\" : \"pre\";\n    return (\n      <Tag\n        className={cn(\n          inline\n            ? \"rounded bg-muted px-1.5 py-0.5 font-mono text-code-sm\"\n            : \"my-3 overflow-x-auto rounded-lg border border-border bg-muted/30 p-3 font-mono text-code-sm\",\n          className,\n        )}\n      >\n        {tex}\n      </Tag>\n    );\n  }\n\n  const Tag = inline ? \"span\" : \"div\";\n  return (\n    <Tag\n      className={cn(inline ? \"katex-inline\" : \"katex-block my-3 overflow-x-auto\", className)}\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: KaTeX renderToString output is sanitized HTML it produced itself; only `tex` (already-sanitized markdown content) flows in\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  );\n}\n\nexport type MathInlineProps = Omit<MathProps, \"inline\">;\nexport type MathBlockProps = Omit<MathProps, \"inline\">;\n\nexport function MathInline(props: MathInlineProps): JSX.Element {\n  return <MathImpl {...props} inline={true} />;\n}\n\nexport function MathBlock(props: MathBlockProps): JSX.Element {\n  return <MathImpl {...props} inline={false} />;\n}\n"
-    },
-    {
-      "path": "lib/markdown/mermaid.tsx",
-      "type": "registry:lib",
-      "target": "lib/markdown/mermaid.tsx",
-      "content": "\"use client\";\n\n/**\n * `<MermaidDiagram>` — Mermaid diagram renderer.\n *\n * Renders a Mermaid source code block as an inline SVG. Lazy-loads\n * `mermaid` (peer-dep optional, ~200 KB) on mount; falls back to a\n * styled `<pre>` showing the raw source when the peer-dep is missing\n * OR when parsing the diagram fails (invalid syntax).\n *\n * Security note: Mermaid v11+ initialize with `securityLevel: \"strict\"`\n * by default, which sanitizes HTML inside diagram labels and disables\n * `click` interactions. We re-assert that here.\n *\n * In a chat context an unverified LLM response could include a malformed\n * or hostile diagram — auto-rendering is acceptable under strict mode\n * because the produced SVG goes through Mermaid's own sanitizer first.\n */\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface MermaidLib {\n  initialize: (opts: { startOnLoad?: boolean; securityLevel?: string; theme?: string }) => void;\n  render: (id: string, src: string) => Promise<{ svg: string }>;\n}\n\nlet mermaidCache: MermaidLib | null = null;\nlet mermaidFailed = false;\n\nasync function loadMermaid(): Promise<MermaidLib | null> {\n  if (mermaidCache) return mermaidCache;\n  if (mermaidFailed) return null;\n  try {\n    const mod = (await import(\"mermaid\")) as unknown as { default?: MermaidLib } & MermaidLib;\n    const lib = mod.default ?? mod;\n    if (!lib || typeof lib.initialize !== \"function\") {\n      mermaidFailed = true;\n      return null;\n    }\n    lib.initialize({\n      startOnLoad: false,\n      securityLevel: \"strict\",\n      theme: \"default\",\n    });\n    mermaidCache = lib;\n    return mermaidCache;\n  } catch {\n    mermaidFailed = true;\n    return null;\n  }\n}\n\nlet renderCounter = 0;\n\nexport interface MermaidDiagramProps {\n  /** The Mermaid source code (e.g. `flowchart TD\\nA-->B`). */\n  source: string;\n  className?: string;\n}\n\nexport function MermaidDiagram({ source, className }: MermaidDiagramProps): JSX.Element {\n  const [svg, setSvg] = useState<string | null>(null);\n  const [failed, setFailed] = useState(false);\n  const idRef = useRef(`theo-mermaid-${++renderCounter}`);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadMermaid().then(async (mermaid) => {\n      if (cancelled || !mermaid) {\n        if (!cancelled) setFailed(true);\n        return;\n      }\n      try {\n        const { svg: out } = await mermaid.render(idRef.current, source);\n        if (!cancelled) setSvg(out);\n      } catch {\n        if (!cancelled) setFailed(true);\n      }\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [source]);\n\n  if (svg) {\n    return (\n      <div\n        className={cn(\"my-4 flex justify-center overflow-x-auto\", className)}\n        data-theo-mermaid=\"\"\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Mermaid render() output is sanitized SVG it produced itself under securityLevel=\"strict\"; only `source` (already-sanitized markdown content) flows in\n        dangerouslySetInnerHTML={{ __html: svg }}\n      />\n    );\n  }\n\n  return (\n    <pre\n      className={cn(\n        \"my-4 overflow-x-auto rounded-lg border border-border bg-muted/30 p-3 text-code-sm\",\n        failed && \"border-warning/40\",\n        className,\n      )}\n      data-theo-mermaid-fallback={failed ? \"true\" : \"loading\"}\n    >\n      <code className=\"language-mermaid\">{source}</code>\n    </pre>\n  );\n}\n"
-    }
-  ]
-}

package/registry/r/chat-thread.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chat-thread",
-  "type": "registry:ui",
-  "title": "ChatThread",
-  "description": "Simple vertical container that applies spacing + scroll.",
-  "dependencies": [],
-  "registryDependencies": [
-    "https://usetheodev.github.io/theo-ui/r/cn.json",
-    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
-  ],
-  "files": [
-    {
-      "path": "components/primitives/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        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

@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chat-types",
-  "type": "registry:lib",
-  "title": "Theo UI chat types",
-  "description": "Shared TypeScript types for chat messages, roles, and attachments.",
-  "files": [
-    {
-      "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 * `@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

@@ -1,24 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "checkbox",
-  "type": "registry:ui",
-  "title": "Checkbox",
-  "description": "Built on Radix Checkbox — accessible binary control with focus ring and indeterminate state support.",
-  "dependencies": [
-    "@radix-ui/react-checkbox",
-    "class-variance-authority",
-    "lucide-react"
-  ],
-  "registryDependencies": [
-    "https://usetheodev.github.io/theo-ui/r/cn.json",
-    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
-  ],
-  "files": [
-    {
-      "path": "components/primitives/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        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

@@ -1,25 +0,0 @@
-{
-  "$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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "cn",
-  "type": "registry:lib",
-  "title": "cn (Tailwind class merger)",
-  "description": "Merge Tailwind classes with conflict resolution.",
-  "dependencies": [
-    "clsx",
-    "tailwind-merge"
-  ],
-  "files": [
-    {
-      "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 @theokit/ui components.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"
-    }
-  ]
-}

package/registry/r/code-block.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "code-block",
-  "type": "registry:ui",
-  "title": "CodeBlock",
-  "description": "Terminal / code-snippet surface. Renders code inside a <pre> with optional 'terminal' prefix per line ('$ '), optional caption (file name), and optional inline CopyButton in top-right. Copy uses the raw code (without the visual prefix). language prop is forward-compat for future syntax highlighting.",
-  "dependencies": [],
-  "registryDependencies": [
-    "https://usetheodev.github.io/theo-ui/r/cn.json",
-    "https://usetheodev.github.io/theo-ui/r/copy-button.json",
-    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
-  ],
-  "files": [
-    {
-      "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        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

@@ -1,25 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "command-palette",
-  "type": "registry:ui",
-  "title": "CommandPalette",
-  "description": "Cmd+K-style global launcher with arrow-key navigation, fuzzy ranking, and Enter/Escape behavior — built on cmdk + Theo Dialog.",
-  "dependencies": [
-    "cmdk",
-    "lucide-react"
-  ],
-  "registryDependencies": [
-    "https://usetheodev.github.io/theo-ui/r/cn.json",
-    "https://usetheodev.github.io/theo-ui/r/dialog.json",
-    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
-    "https://usetheodev.github.io/theo-ui/r/types.json"
-  ],
-  "files": [
-    {
-      "path": "components/composites/command-palette/command-palette.tsx",
-      "type": "registry:ui",
-      "target": "components/ui/command-palette.tsx",
-      "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

@@ -1,25 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "confirm-dialog",
-  "type": "registry:ui",
-  "title": "ConfirmDialog",
-  "description": "Controlled confirmation modal built on Dialog. Auto-focuses Cancel on open (deliberate — NOT the destructive button). Optional intent=destructive switches the confirm button to destructive variant. Optional confirmationPhrase enables typed-confirmation guard (case-sensitive, empty string = no phrase). Async onConfirm shows Loader2 spinner; resolve closes the dialog; reject keeps it open so consumers can surface their own error. Enter in the phrase input triggers confirm when matched.",
-  "dependencies": [
-    "lucide-react"
-  ],
-  "registryDependencies": [
-    "https://usetheodev.github.io/theo-ui/r/cn.json",
-    "https://usetheodev.github.io/theo-ui/r/dialog.json",
-    "https://usetheodev.github.io/theo-ui/r/button.json",
-    "https://usetheodev.github.io/theo-ui/r/input.json",
-    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
-  ],
-  "files": [
-    {
-      "path": "components/composites/confirm-dialog/confirm-dialog.tsx",
-      "type": "registry:ui",
-      "target": "components/ui/confirm-dialog.tsx",
-      "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

@@ -1,21 +0,0 @@
-{
-  "$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

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "context-card",
-  "type": "registry:ui",
-  "title": "ContextCard",
-  "description": "Generic \"informational\" card for the right inspector.",
-  "dependencies": [
-    "lucide-react"
-  ],
-  "registryDependencies": [
-    "https://usetheodev.github.io/theo-ui/r/cn.json",
-    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
-    "https://usetheodev.github.io/theo-ui/r/types.json"
-  ],
-  "files": [
-    {
-      "path": "components/primitives/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        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"
-    }
-  ]
-}