@usetheo/ui 0.5.0-next.0 → 0.6.0-next.0

package/registry/r/chat-message.json

@@ -3,19 +3,127 @@
   "name": "chat-message",
   "type": "registry:ui",
   "title": "ChatMessage",
-  "description": "Single chat turn rendered as user bubble, assistant card, or system callout with accent border.",
-  "dependencies": [],
+  "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/primitives/chat-message/chat-message.tsx",
+      "path": "components/composites/chat-message/chat-message.tsx",
       "type": "registry:ui",
       "target": "components/ui/chat-message.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { Message } from \"@/types/chat\";\n\ninterface ChatMessageProps extends HTMLAttributes<HTMLElement> {\n  message: Message;\n  /**\n   * Optional avatar slot rendered before assistant/user content.\n   */\n  avatar?: ReactNode;\n  /**\n   * Optional toolbar (copy, regenerate, etc.) rendered after the content.\n   */\n  actions?: ReactNode;\n}\n\n/**\n * ChatMessage — single chat turn.\n *\n * Visual:\n *   - user      → soft surface bubble aligned right, max-width 70%\n *   - assistant → card with violet accent border-left + display-font title for model + body\n *   - system    → muted callout with accent-deep border\n */\nconst ChatMessage = forwardRef<HTMLElement, ChatMessageProps>(\n  ({ className, message, avatar, actions, ...props }, ref) => {\n    if (message.role === \"user\") {\n      return (\n        <article\n          ref={ref}\n          className={cn(\"flex justify-end gap-3\", className)}\n          aria-label=\"user message\"\n          {...props}\n        >\n          <div\n            className={cn(\n              \"max-w-[70%] rounded-2xl rounded-tr-md border border-border/40 bg-secondary\",\n              \"px-4 py-3 text-body-md text-secondary-foreground\",\n            )}\n          >\n            {message.content}\n            {message.timestamp ? (\n              <p className=\"mt-1 text-right font-mono text-label text-muted-foreground\">\n                {message.timestamp}\n              </p>\n            ) : null}\n          </div>\n          {avatar ? <div className=\"shrink-0\">{avatar}</div> : null}\n        </article>\n      );\n    }\n\n    if (message.role === \"system\") {\n      return (\n        <article\n          ref={ref}\n          className={cn(\n            \"rounded-lg border border-accent-deep/40 border-l-4 bg-accent/10 px-4 py-2\",\n            \"text-body-sm text-foreground\",\n            className,\n          )}\n          aria-label=\"system message\"\n          {...props}\n        >\n          {message.content}\n        </article>\n      );\n    }\n\n    return (\n      <article\n        ref={ref}\n        className={cn(\"flex gap-3\", className)}\n        aria-label=\"assistant message\"\n        {...props}\n      >\n        {avatar ? <div className=\"shrink-0\">{avatar}</div> : null}\n        <div\n          className={cn(\n            \"min-w-0 flex-1 rounded-2xl rounded-tl-md border border-border/40 border-l-2 border-l-primary\",\n            \"bg-card px-5 py-4 shadow-sm\",\n          )}\n        >\n          <header className=\"mb-2 flex items-center justify-between gap-3\">\n            {message.model ? (\n              <span className=\"font-mono text-label-caps text-primary uppercase tracking-wider\">\n                {message.model}\n              </span>\n            ) : (\n              <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Assistant\n              </span>\n            )}\n            {message.timestamp ? (\n              <span className=\"font-mono text-label text-muted-foreground\">\n                {message.timestamp}\n              </span>\n            ) : null}\n          </header>\n          <div className=\"text-body-md text-foreground leading-relaxed\">{message.content}</div>\n          {actions ? <div className=\"mt-3 flex items-center gap-1\">{actions}</div> : null}\n        </div>\n      </article>\n    );\n  },\n);\nChatMessage.displayName = \"ChatMessage\";\n\nexport { ChatMessage };\n"
+      "content": "\"use client\";\n\n/**\n * `<ChatMessage>` — render a chat turn from a `UIMessage` (Vercel AI SDK\n * `parts: UIMessagePart[]` shape).\n *\n * Forked structural shell from `vercel/ai-elements` `<Message>` +\n * `<MessageContent>` (Apache-2.0, see NOTICE). The role-discriminated\n * styling (user-aligned right with secondary bubble, assistant-aligned\n * left with primary accent border) preserves TheoUI's Violet Forge look.\n *\n * Two consumption shapes:\n *\n *   1. **Convenience** — pass a full `UIMessage`, parts are dispatched to\n *      their built-in renderers automatically:\n *\n *        <ChatMessage message={msg} />\n *\n *   2. **Composable** — render children explicitly when you need to\n *      compose actions/branching/custom parts:\n *\n *        <ChatMessage.Root from=\"assistant\">\n *          <ChatMessage.Content>\n *            <ChatMessageResponse text=\"Hello **world**\" />\n *          </ChatMessage.Content>\n *          <ChatMessageToolbar>\n *            <ChatMessageActions>\n *              <ChatMessageAction tooltip=\"Copy\"><CopyIcon /></ChatMessageAction>\n *            </ChatMessageActions>\n *          </ChatMessageToolbar>\n *        </ChatMessage.Root>\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  type DataUIPart,\n  type FileUIPart,\n  type MessageRole,\n  type ReasoningFileUIPart,\n  type ReasoningUIPart,\n  type SourceDocumentUIPart,\n  type SourceUrlUIPart,\n  type TextUIPart,\n  type ToolUIPart,\n  type UIMessage,\n  type UIMessagePart,\n  isDataUIPart,\n  isFileUIPart,\n  isReasoningFileUIPart,\n  isReasoningUIPart,\n  isSourceDocumentUIPart,\n  isSourceUrlUIPart,\n  isStepStartUIPart,\n  isTextUIPart,\n  isToolUIPart,\n} from \"@/types/chat\";\nimport { 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 * `@usetheo/ui` instead of shadcn, no Tooltip primitive yet (Vercel uses\n * one — we render the `tooltip` prop as a `title` attribute for now; a\n * proper Tooltip primitive lands in a follow-up RFC).\n */\nimport type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"@/components/ui/button\";\n\nexport type ChatMessageActionsProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChatMessageActions({\n  className,\n  children,\n  ...props\n}: ChatMessageActionsProps): JSX.Element {\n  return (\n    <div className={cn(\"flex items-center gap-1\", className)} data-theo-chat-actions=\"\" {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport type ChatMessageActionProps = ComponentProps<typeof Button> & {\n  /** Tooltip text — rendered as native `title` for now. */\n  tooltip?: string;\n  /** Accessible label (used by screen readers when only an icon is visible). */\n  label?: string;\n  children?: ReactNode;\n};\n\nexport function ChatMessageAction({\n  tooltip,\n  label,\n  variant = \"ghost\",\n  size = \"icon\",\n  className,\n  children,\n  ...props\n}: ChatMessageActionProps): JSX.Element {\n  return (\n    <Button\n      type=\"button\"\n      variant={variant}\n      size={size}\n      title={tooltip}\n      className={cn(className)}\n      {...props}\n    >\n      {children}\n      <span className=\"sr-only\">{label || tooltip}</span>\n    </Button>\n  );\n}\n"
+    },
+    {
+      "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-types.json

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

package/dist/preset.d.ts

@@ -1,31 +0,0 @@
-import { Config } from 'tailwindcss';
-
-/**
- * `@usetheo/ui/preset` — Tailwind v4 preset for zero-config consumers.
- *
- * Default-export a `Partial<Config>` mirroring the design tokens shipped
- * in `@usetheo/ui/tokens.css`. Adds a `content` field covering the
- * library's published artifact tree so consumers' Tailwind builds emit
- * the utilities used by `@usetheo/ui` components.
- *
- * The token surface is delegated to `./styles/tailwind-preset.ts` (the
- * existing source of truth used by the local Ladle dev surface and the
- * shadcn registry). This subpath simply wraps it with `content` and
- * preserves the same shape, so the v3 registry preset and the v4 import
- * preset stay byte-for-byte aligned and impossible to drift.
- *
- * Consumer usage:
- *
- *   // tailwind.config.ts
- *   import preset from "@usetheo/ui/preset";
- *   export default {
- *     presets: [preset],
- *     content: ["./app/**\/*.{ts,tsx}"],
- *   };
- *
- * See RFC 0008.
- */
-
-declare const preset: Partial<Config>;
-
-export { preset as default };

package/dist/preset.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/styles/tailwind-preset.ts","../src/preset.ts"],"names":[],"mappings":";;;AA+BA,IAAM,GAAA,GAAM,CAAC,KAAA,KAAkB,CAAA,QAAA,EAAW,KAAK,CAAA,kBAAA,CAAA;AAExC,IAAM,YAAA,GAAgC;AAAA,EAC3C,KAAA,EAAO;AAAA,IACL,SAAA,EAAW;AAAA,MACT,MAAA,EAAQ,IAAA;AAAA,MACR,OAAA,EAAS,MAAA;AAAA,MACT,OAAA,EAAS;AAAA,QACP,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,UAAA,EAAY,IAAI,cAAc,CAAA;AAAA,QAC9B,UAAA,EAAY,IAAI,cAAc,CAAA;AAAA,QAC9B,IAAA,EAAM;AAAA,UACJ,OAAA,EAAS,IAAI,QAAQ,CAAA;AAAA,UACrB,UAAA,EAAY,IAAI,mBAAmB;AAAA,SACrC;AAAA,QACA,OAAA,EAAS;AAAA,UACP,OAAA,EAAS,IAAI,WAAW,CAAA;AAAA,UACxB,UAAA,EAAY,IAAI,sBAAsB;AAAA,SACxC;AAAA,QACA,OAAA,EAAS;AAAA,UACP,OAAA,EAAS,IAAI,WAAW,CAAA;AAAA,UACxB,IAAA,EAAM,IAAI,gBAAgB,CAAA;AAAA,UAC1B,IAAA,EAAM,IAAI,gBAAgB,CAAA;AAAA,UAC1B,UAAA,EAAY,IAAI,sBAAsB;AAAA,SACxC;AAAA,QACA,SAAA,EAAW;AAAA,UACT,OAAA,EAAS,IAAI,aAAa,CAAA;AAAA,UAC1B,UAAA,EAAY,IAAI,wBAAwB;AAAA,SAC1C;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,OAAA,EAAS,IAAI,UAAU,CAAA;AAAA,UACvB,IAAA,EAAM,IAAI,eAAe,CAAA;AAAA,UACzB,UAAA,EAAY,IAAI,qBAAqB;AAAA,SACvC;AAAA,QACA,KAAA,EAAO;AAAA,UACL,OAAA,EAAS,IAAI,SAAS,CAAA;AAAA,UACtB,UAAA,EAAY,IAAI,oBAAoB;AAAA,SACtC;AAAA,QACA,OAAA,EAAS;AAAA,UACP,OAAA,EAAS,IAAI,WAAW,CAAA;AAAA,UACxB,UAAA,EAAY,IAAI,sBAAsB;AAAA,SACxC;AAAA,QACA,OAAA,EAAS;AAAA,UACP,OAAA,EAAS,IAAI,WAAW,CAAA;AAAA,UACxB,UAAA,EAAY,IAAI,sBAAsB;AAAA,SACxC;AAAA,QACA,WAAA,EAAa;AAAA,UACX,OAAA,EAAS,IAAI,eAAe,CAAA;AAAA,UAC5B,UAAA,EAAY,IAAI,0BAA0B;AAAA,SAC5C;AAAA,QACA,IAAA,EAAM;AAAA,UACJ,OAAA,EAAS,IAAI,QAAQ,CAAA;AAAA,UACrB,UAAA,EAAY,IAAI,mBAAmB;AAAA,SACrC;AAAA,QACA,MAAA,EAAQ,IAAI,UAAU,CAAA;AAAA,QACtB,KAAA,EAAO,IAAI,SAAS,CAAA;AAAA,QACpB,IAAA,EAAM,IAAI,QAAQ;AAAA,OACpB;AAAA,MACA,UAAA,EAAY;AAAA,QACV,OAAA,EAAS,qBAAA;AAAA,QACT,IAAA,EAAM,kBAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOA,QAAA,EAAU;AAAA;AAAA,QAER,aAAA,EAAe,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,KAAK,aAAA,EAAe,WAAA,EAAa,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA,QAC1F,YAAA,EAAc,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,QAAQ,aAAA,EAAe,SAAA,EAAW,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA,QAC1F,YAAA,EAAc,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,OAAO,aAAA,EAAe,SAAA,EAAW,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA,QACzF,YAAA,EAAc,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,OAAO,aAAA,EAAe,SAAA,EAAW,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA,QACzF,QAAA,EAAU,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,QAAQ,aAAA,EAAe,UAAA,EAAY,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA;AAAA,QAEvF,UAAA,EAAY,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,QAAQ,aAAA,EAAe,SAAA,EAAW,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA,QACxF,UAAA,EAAY,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,OAAO,aAAA,EAAe,SAAA,EAAW,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKvF,SAAA,EAAW,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,QAAQ,aAAA,EAAe,SAAA,EAAW,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA,QACvF,SAAA,EAAW,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,QAAQ,aAAA,EAAe,GAAA,EAAK,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA,QACjF,SAAA,EAAW,CAAC,MAAA,EAAQ,EAAE,YAAY,MAAA,EAAQ,UAAA,EAAY,OAAO,CAAA;AAAA;AAAA,QAE7D,KAAA,EAAO,CAAC,MAAA,EAAQ,EAAE,YAAY,MAAA,EAAQ,UAAA,EAAY,OAAO,CAAA;AAAA,QACzD,YAAA,EAAc,CAAC,MAAA,EAAQ,EAAE,UAAA,EAAY,QAAQ,aAAA,EAAe,QAAA,EAAU,UAAA,EAAY,KAAA,EAAO,CAAA;AAAA;AAAA,QAEzF,SAAA,EAAW,CAAC,MAAA,EAAQ,EAAE,YAAY,KAAA,EAAO,UAAA,EAAY,OAAO,CAAA;AAAA,QAC5D,SAAA,EAAW,CAAC,MAAA,EAAQ,EAAE,YAAY,MAAA,EAAQ,UAAA,EAAY,OAAO;AAAA,OAC/D;AAAA,MACA,YAAA,EAAc;AAAA,QACZ,IAAA,EAAM,oBAAA;AAAA,QACN,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,KAAA,EAAO,mBAAA;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA,MACA,SAAA,EAAW;AAAA,QACT,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,IAAA,EAAM,oBAAA;AAAA,QACN,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,wBAAA,EAA0B;AAAA,QACxB,UAAA,EAAY,sBAAA;AAAA,QACZ,IAAA,EAAM;AAAA,OACR;AAAA,MACA,kBAAA,EAAoB;AAAA,QAClB,IAAA,EAAM,sBAAA;AAAA,QACN,IAAA,EAAM,sBAAA;AAAA,QACN,IAAA,EAAM;AAAA,OACR;AAAA,MACA,SAAA,EAAW;AAAA,QACT,YAAA,EAAc;AAAA,UACZ,IAAA,EAAM,EAAE,OAAA,EAAS,GAAA,EAAK,WAAW,iBAAA,EAAkB;AAAA,UACnD,MAAA,EAAQ,EAAE,OAAA,EAAS,GAAA,EAAK,WAAW,eAAA;AAAgB,SACrD;AAAA,QACA,YAAA,EAAc;AAAA,UACZ,UAAA,EAAY,EAAE,SAAA,EAAW,mCAAA,EAAoC;AAAA,UAC7D,KAAA,EAAO,EAAE,SAAA,EAAW,mCAAA;AAAoC;AAC1D,OACF;AAAA,MACA,SAAA,EAAW;AAAA,QACT,YAAA,EAAc,2DAAA;AAAA,QACd,YAAA,EAAc;AAAA;AAChB;AACF,GACF;AAAA,EACA,OAAA,EAAS,CAAC,OAAO;AACnB,CAAA;;;AC9IA,IAAM,qBAAA,GAAkC;AAAA;AAAA,EAEtC,mDAAA;AAAA;AAAA,EAEA;AACF,CAAA;AAEA,IAAM,MAAA,GAA0B;AAAA,EAC9B,GAAG,YAAA;AAAA,EACH,OAAA,EAAS;AACX,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"preset.js","sourcesContent":["/**\n * Theo UI Tailwind preset — Violet Forge identity.\n *\n * Single source of truth for the design system's utility-level tokens:\n *   - colors mapped to CSS variables (HSL split via `hsl(var(--x) / <alpha>)`)\n *   - Geist-inspired typescale (display / title / body / label / code tiers)\n *   - radii, shadows, motion timing & duration, keyframes\n *   - tailwindcss-animate plugin\n *\n * Consumed by:\n *   - `tailwind.config.ts` (this repo) via `presets: [theoUIPreset]`\n *   - registry/r/tailwind-preset.json (shipped to consumers via shadcn CLI)\n *\n * Consumers integrate as:\n *\n *   import type { Config } from \"tailwindcss\";\n *   import { theoUIPreset } from \"./styles/tailwind-preset\";\n *\n *   export default {\n *     darkMode: \"class\",\n *     content: [\"./src/**\\/*.{ts,tsx}\"],\n *     presets: [theoUIPreset],\n *   } satisfies Config;\n *\n * Note: `darkMode` and `content` are NOT in the preset — they are consumer\n * decisions. The preset only contains `theme.extend.*` and `plugins`.\n */\n\nimport type { Config } from \"tailwindcss\";\nimport animate from \"tailwindcss-animate\";\n\nconst hsl = (token: string) => `hsl(var(${token}) / <alpha-value>)`;\n\nexport const theoUIPreset: Partial<Config> = {\n  theme: {\n    container: {\n      center: true,\n      padding: \"1rem\",\n      screens: {\n        \"2xl\": \"1280px\",\n      },\n    },\n    extend: {\n      colors: {\n        background: hsl(\"--background\"),\n        foreground: hsl(\"--foreground\"),\n        card: {\n          DEFAULT: hsl(\"--card\"),\n          foreground: hsl(\"--card-foreground\"),\n        },\n        popover: {\n          DEFAULT: hsl(\"--popover\"),\n          foreground: hsl(\"--popover-foreground\"),\n        },\n        primary: {\n          DEFAULT: hsl(\"--primary\"),\n          deep: hsl(\"--primary-deep\"),\n          glow: hsl(\"--primary-glow\"),\n          foreground: hsl(\"--primary-foreground\"),\n        },\n        secondary: {\n          DEFAULT: hsl(\"--secondary\"),\n          foreground: hsl(\"--secondary-foreground\"),\n        },\n        accent: {\n          DEFAULT: hsl(\"--accent\"),\n          deep: hsl(\"--accent-deep\"),\n          foreground: hsl(\"--accent-foreground\"),\n        },\n        muted: {\n          DEFAULT: hsl(\"--muted\"),\n          foreground: hsl(\"--muted-foreground\"),\n        },\n        success: {\n          DEFAULT: hsl(\"--success\"),\n          foreground: hsl(\"--success-foreground\"),\n        },\n        warning: {\n          DEFAULT: hsl(\"--warning\"),\n          foreground: hsl(\"--warning-foreground\"),\n        },\n        destructive: {\n          DEFAULT: hsl(\"--destructive\"),\n          foreground: hsl(\"--destructive-foreground\"),\n        },\n        info: {\n          DEFAULT: hsl(\"--info\"),\n          foreground: hsl(\"--info-foreground\"),\n        },\n        border: hsl(\"--border\"),\n        input: hsl(\"--input\"),\n        ring: hsl(\"--ring\"),\n      },\n      fontFamily: {\n        display: \"var(--font-display)\",\n        sans: \"var(--font-body)\",\n        mono: \"var(--font-mono)\",\n      },\n      /* Geist-inspired Violet Forge typescale.\n       *\n       * Three strict weights: 400 (body), 500 (UI), 600 (display/headings).\n       * Letter-spacing scales with size — aggressive negative on display.\n       * Mirrors the Vercel/Geist vocabulary while keeping Theo's identity.\n       */\n      fontSize: {\n        // Display tier — aggressive compression, content-led headlines\n        \"display-2xl\": [\"64px\", { lineHeight: \"1\", letterSpacing: \"-0.0464em\", fontWeight: \"600\" }],\n        \"display-xl\": [\"48px\", { lineHeight: \"1.05\", letterSpacing: \"-0.05em\", fontWeight: \"600\" }],\n        \"display-lg\": [\"40px\", { lineHeight: \"1.1\", letterSpacing: \"-0.05em\", fontWeight: \"600\" }],\n        \"display-md\": [\"32px\", { lineHeight: \"1.2\", letterSpacing: \"-0.04em\", fontWeight: \"600\" }],\n        headline: [\"28px\", { lineHeight: \"1.25\", letterSpacing: \"-0.035em\", fontWeight: \"600\" }],\n        // Title tier — section / card heads\n        \"title-lg\": [\"24px\", { lineHeight: \"1.33\", letterSpacing: \"-0.04em\", fontWeight: \"600\" }],\n        \"title-md\": [\"20px\", { lineHeight: \"1.4\", letterSpacing: \"-0.03em\", fontWeight: \"600\" }],\n        // Body tier — FAANG-density realignment 2026-05-22: body-md is the\n        // industry-standard 14px (shadcn / Vercel Geist / Linear / Stripe /\n        // Mantine). The previous 15px was idiosyncratic. body-sm (14px label\n        // weight) remains separate via its line-height / weight signature.\n        \"body-lg\": [\"18px\", { lineHeight: \"1.56\", letterSpacing: \"-0.01em\", fontWeight: \"400\" }],\n        \"body-md\": [\"14px\", { lineHeight: \"1.43\", letterSpacing: \"0\", fontWeight: \"400\" }],\n        \"body-sm\": [\"13px\", { lineHeight: \"1.46\", fontWeight: \"400\" }],\n        // Label tier — used on buttons, nav, secondary actions\n        label: [\"14px\", { lineHeight: \"1.43\", fontWeight: \"500\" }],\n        \"label-caps\": [\"12px\", { lineHeight: \"1.33\", letterSpacing: \"0.04em\", fontWeight: \"500\" }],\n        // Mono — code surfaces, technical labels\n        \"code-md\": [\"14px\", { lineHeight: \"1.5\", fontWeight: \"400\" }],\n        \"code-sm\": [\"13px\", { lineHeight: \"1.54\", fontWeight: \"500\" }],\n      },\n      borderRadius: {\n        none: \"var(--radius-none)\",\n        sm: \"var(--radius-sm)\",\n        md: \"var(--radius-md)\",\n        lg: \"var(--radius-lg)\",\n        xl: \"var(--radius-xl)\",\n        \"2xl\": \"var(--radius-2xl)\",\n        full: \"var(--radius-full)\",\n      },\n      boxShadow: {\n        sm: \"var(--shadow-sm)\",\n        md: \"var(--shadow-md)\",\n        lg: \"var(--shadow-lg)\",\n        glow: \"var(--shadow-glow)\",\n        \"glow-strong\": \"var(--shadow-glow-strong)\",\n      },\n      transitionTimingFunction: {\n        \"out-soft\": \"var(--ease-out-soft)\",\n        snap: \"var(--ease-snap)\",\n      },\n      transitionDuration: {\n        fast: \"var(--duration-fast)\",\n        base: \"var(--duration-base)\",\n        slow: \"var(--duration-slow)\",\n      },\n      keyframes: {\n        \"fade-in-up\": {\n          \"0%\": { opacity: \"0\", transform: \"translateY(8px)\" },\n          \"100%\": { opacity: \"1\", transform: \"translateY(0)\" },\n        },\n        \"pulse-glow\": {\n          \"0%, 100%\": { boxShadow: \"0 0 0 0 hsl(var(--primary) / 0.5)\" },\n          \"50%\": { boxShadow: \"0 0 0 8px hsl(var(--primary) / 0)\" },\n        },\n      },\n      animation: {\n        \"fade-in-up\": \"fade-in-up var(--duration-base) var(--ease-out-soft) both\",\n        \"pulse-glow\": \"pulse-glow 1.5s var(--ease-in-out) infinite\",\n      },\n    },\n  },\n  plugins: [animate],\n};\n","/**\n * `@usetheo/ui/preset` — Tailwind v4 preset for zero-config consumers.\n *\n * Default-export a `Partial<Config>` mirroring the design tokens shipped\n * in `@usetheo/ui/tokens.css`. Adds a `content` field covering the\n * library's published artifact tree so consumers' Tailwind builds emit\n * the utilities used by `@usetheo/ui` components.\n *\n * The token surface is delegated to `./styles/tailwind-preset.ts` (the\n * existing source of truth used by the local Ladle dev surface and the\n * shadcn registry). This subpath simply wraps it with `content` and\n * preserves the same shape, so the v3 registry preset and the v4 import\n * preset stay byte-for-byte aligned and impossible to drift.\n *\n * Consumer usage:\n *\n *   // tailwind.config.ts\n *   import preset from \"@usetheo/ui/preset\";\n *   export default {\n *     presets: [preset],\n *     content: [\"./app/**\\/*.{ts,tsx}\"],\n *   };\n *\n * See RFC 0008.\n */\nimport type { Config } from \"tailwindcss\";\nimport { theoUIPreset } from \"./styles/tailwind-preset.js\";\n\nconst LIBRARY_CONTENT_GLOBS: string[] = [\n  // Resolved relative to the consumer's `tailwind.config.{ts,js}`.\n  \"./node_modules/@usetheo/ui/dist/**/*.{js,mjs,cjs}\",\n  // Yarn PnP / pnpm hoist fallback — Tailwind's globbing tolerates both.\n  \"./node_modules/@usetheo/ui/dist/**/*.{ts,tsx}\",\n];\n\nconst preset: Partial<Config> = {\n  ...theoUIPreset,\n  content: LIBRARY_CONTENT_GLOBS,\n};\n\nexport default preset;\n"]}