@theokit/ui 0.13.0

package/registry/r/chat-message.json

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

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

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

@@ -0,0 +1,24 @@
+{
+  "$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        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/cn.json

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

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

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

package/registry/r/confirm-dialog.json

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

package/registry/r/context-card.json

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

package/registry/r/context-window-bar.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-window-bar",
+  "type": "registry:ui",
+  "title": "ContextWindowBar",
+  "description": "Shows how much of the model's context window has been",
+  "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/context-window-bar/context-window-bar.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/context-window-bar.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ContextWindowBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tokens currently used in the context window. */\n  used: number;\n  /** Model's total context capacity (e.g. 200_000, 1_000_000). */\n  total: number;\n  /** Optional secondary label rendered on the right (e.g. model name). */\n  trailing?: ReactNode;\n  /** Optional title shown above the bar. */\n  label?: ReactNode;\n  /** Compact mode hides numbers and label; just the bar. */\n  compact?: boolean;\n  /**\n   * Override warning thresholds (0..1). Defaults: warn 0.7, danger 0.9.\n   */\n  warnAt?: number;\n  dangerAt?: number;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;\n  return `${n}`;\n};\n\n/**\n * ContextWindowBar — shows how much of the model's context window has been\n * consumed. Color transitions: success → warning → destructive past thresholds.\n *\n * Critical for transparency: a user should always be able to glance at this\n * and know if the conversation is about to hit the cap.\n */\nconst ContextWindowBar = forwardRef<HTMLDivElement, ContextWindowBarProps>(\n  (\n    {\n      className,\n      used,\n      total,\n      trailing,\n      label = \"Context\",\n      compact,\n      warnAt = 0.7,\n      dangerAt = 0.9,\n      ...props\n    },\n    ref,\n  ) => {\n    const ratio = Math.max(0, Math.min(1, used / total));\n    const tone = ratio >= dangerAt ? \"destructive\" : ratio >= warnAt ? \"warning\" : \"primary\";\n    const percent = Math.round(ratio * 100);\n\n    const barColor = {\n      primary: \"bg-primary\",\n      warning: \"bg-warning\",\n      destructive: \"bg-destructive\",\n    }[tone];\n\n    const textColor = {\n      primary: \"text-foreground\",\n      warning: \"text-warning\",\n      destructive: \"text-destructive\",\n    }[tone];\n\n    return (\n      <div ref={ref} className={cn(\"grid gap-1.5\", className)} {...props}>\n        {!compact ? (\n          <div className=\"flex items-baseline justify-between gap-2\">\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {label}\n            </span>\n            <span className={cn(\"font-mono text-body-sm tabular-nums\", textColor)}>\n              {formatTokens(used)} / {formatTokens(total)}{\" \"}\n              <span className=\"opacity-60\">({percent}%)</span>\n            </span>\n          </div>\n        ) : null}\n        <div\n          className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n          role=\"progressbar\"\n          tabIndex={-1}\n          aria-valuenow={used}\n          aria-valuemin={0}\n          aria-valuemax={total}\n          aria-label={`${percent}% of context window used`}\n        >\n          <div\n            className={cn(\n              \"h-full rounded-full transition-[width,background-color] duration-base ease-out-soft\",\n              barColor,\n            )}\n            style={{ width: `${percent}%` }}\n          />\n        </div>\n        {trailing ? (\n          <div className=\"font-mono text-label text-muted-foreground\">{trailing}</div>\n        ) : null}\n      </div>\n    );\n  },\n);\nContextWindowBar.displayName = \"ContextWindowBar\";\n\nexport { ContextWindowBar };\n"
+    }
+  ]
+}

package/registry/r/copy-button.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "copy-button",
+  "type": "registry:ui",
+  "title": "CopyButton",
+  "description": "Click-to-copy button primitive. Wraps navigator.clipboard.writeText with icon swap (Copy → Check on success, Copy → X on failure), aria-live announcement for screen readers, optional label, ghost/outline variants, and SSR-safe rendering. Auto-cleans the revert timer on unmount and debounces double-clicks.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/copy-button/copy-button.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/copy-button.tsx",
+      "content": "import { Check, Copy, X } from \"lucide-react\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * CopyButton — click-to-copy primitive for PaaS surfaces.\n *\n * Wraps the Clipboard API behind a button that:\n *   - Calls `navigator.clipboard.writeText(value)` on click\n *   - Swaps the icon (Copy → Check on success, Copy → X on failure)\n *   - Optionally swaps the visible `label` to \"Copied!\" / \"Failed\"\n *   - Announces the state change via an `aria-live=\"polite\"` sr-only region\n *   - Reverts to idle after `feedbackDuration` ms (default 1500)\n *\n * SSR-safe (guards `navigator?.clipboard?.writeText`). Debounces double-clicks\n * by ignoring clicks while not in the `idle` state. Cleans up the revert timer\n * on unmount so no `setState` happens on unmounted components.\n *\n * @example\n *   <CopyButton value={envVar.value} />               // icon-only ghost\n *   <CopyButton value={token} label=\"Copy token\" variant=\"outline\" />\n */\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\nexport interface CopyButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"onClick\" | \"children\"> {\n  /** String to copy when clicked. */\n  value: string;\n  /** Optional button label. Default: just the icon. */\n  label?: ReactNode;\n  /** Visual style. */\n  variant?: \"ghost\" | \"outline\";\n  /** Size. */\n  size?: \"sm\" | \"md\";\n  /** Callback after successful copy (e.g. analytics). */\n  onCopied?: (value: string) => void;\n  /** Duration of the feedback state in ms. Default 1500. */\n  feedbackDuration?: number;\n}\n\nconst VARIANT: Record<NonNullable<CopyButtonProps[\"variant\"]>, string> = {\n  ghost: \"hover:bg-muted\",\n  outline: \"border border-border/60 rounded-md\",\n};\n\nconst SIZE: Record<NonNullable<CopyButtonProps[\"size\"]>, string> = {\n  sm: \"px-2 py-1 text-label\",\n  md: \"px-2.5 py-1.5 text-body-sm\",\n};\n\nconst CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(\n  (\n    {\n      className,\n      value,\n      label,\n      variant = \"ghost\",\n      size = \"sm\",\n      onCopied,\n      feedbackDuration = 1500,\n      ...props\n    },\n    ref,\n  ) => {\n    const [state, setState] = useState<CopyState>(\"idle\");\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n      return () => {\n        if (timerRef.current !== null) {\n          clearTimeout(timerRef.current);\n        }\n      };\n    }, []);\n\n    const scheduleRevert = useCallback(() => {\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current);\n      }\n      timerRef.current = setTimeout(() => {\n        setState(\"idle\");\n        timerRef.current = null;\n      }, feedbackDuration);\n    }, [feedbackDuration]);\n\n    const handleClick = useCallback(() => {\n      if (state !== \"idle\") return;\n\n      if (typeof navigator === \"undefined\" || !navigator.clipboard?.writeText) {\n        setState(\"failed\");\n        scheduleRevert();\n        return;\n      }\n\n      navigator.clipboard.writeText(value).then(\n        () => {\n          setState(\"copied\");\n          onCopied?.(value);\n          scheduleRevert();\n        },\n        () => {\n          setState(\"failed\");\n          scheduleRevert();\n        },\n      );\n    }, [state, value, onCopied, scheduleRevert]);\n\n    const Icon = state === \"copied\" ? Check : state === \"failed\" ? X : Copy;\n    const liveMessage =\n      state === \"copied\" ? \"Copied to clipboard\" : state === \"failed\" ? \"Copy failed\" : \"\";\n\n    const labelText =\n      label !== undefined\n        ? state === \"copied\"\n          ? \"Copied!\"\n          : state === \"failed\"\n            ? \"Failed\"\n            : label\n        : null;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={handleClick}\n        data-state={state}\n        className={cn(\n          \"inline-flex items-center gap-1.5\",\n          \"font-sans transition-colors\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n          VARIANT[variant],\n          SIZE[size],\n          className,\n        )}\n        {...props}\n      >\n        <Icon\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-3.5 shrink-0 transition-opacity duration-200\",\n            state === \"copied\" && \"text-success\",\n            state === \"failed\" && \"text-destructive\",\n          )}\n        />\n        {labelText !== null ? <span>{labelText}</span> : null}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveMessage}\n        </span>\n      </button>\n    );\n  },\n);\nCopyButton.displayName = \"CopyButton\";\n\nexport { CopyButton };\n"
+    }
+  ]
+}