@usetheo/ui 0.5.1-next.0 → 0.6.1-next.0

package/dist/styles.css

@@ -103,3 +103,10 @@
     scrollbar-color: hsl(var(--primary) / 0.3) transparent;
   }
 }
+
+/* RFC 0008 follow-up #2 — pre-compiled utility rules. The bytes here
+ * are emitted at build time by `scripts/build-precompiled-css.ts` so
+ * consumers do not depend on Tailwind v4 `@source` scanning the
+ * library's node_modules tree (which breaks under pnpm symlinks).
+ */
+@import "./components.css";

package/dist/vite-plugin.js

@@ -3,12 +3,16 @@ var PLUGIN_NAME = "@usetheo/ui/vite-plugin";
 var VIRTUAL_ID = "virtual:@usetheo/ui/library-sources.css";
 var RESOLVED_VIRTUAL_ID = `\0${VIRTUAL_ID}`;
 function buildLibrarySourcesCss(extra = []) {
-  const defaults = [
-    '"../node_modules/@usetheo/ui/dist/**/*.{js,mjs,cjs}"',
-    '"./node_modules/@usetheo/ui/dist/**/*.{js,mjs,cjs}"'
-  ];
-  const all = [...defaults, ...extra.map((g) => JSON.stringify(g))];
-  return `${all.map((src) => `@source ${src};`).join("\n")}
+  if (extra.length === 0) {
+    return [
+      "/* @usetheo/ui/vite-plugin \u2014 `virtual:@usetheo/ui/library-sources.css` */",
+      "/* The library now ships pre-compiled utility CSS via `dist/components.css` */",
+      "/* (chained from `dist/styles.css`), so no `@source` glob is needed here. */",
+      "/* This virtual module remains resolvable for backwards compatibility. */",
+      ""
+    ].join("\n");
+  }
+  return `${extra.map((g) => `@source ${JSON.stringify(g)};`).join("\n")}
 `;
 }
 function useTheoUIVite(opts = {}) {

package/dist/vite-plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vite-plugin.ts"],"names":[],"mappings":";AA0BA,IAAM,WAAA,GAAc,yBAAA;AACpB,IAAM,UAAA,GAAa,yCAAA;AACnB,IAAM,mBAAA,GAAsB,KAAK,UAAU,CAAA,CAAA;AAE3C,SAAS,sBAAA,CAAuB,KAAA,GAAkB,EAAC,EAAW;AAK5D,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,sDAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,GAAA,GAAM,CAAC,GAAG,QAAA,EAAU,GAAG,KAAA,CAAM,GAAA,CAAI,CAAC,CAAA,KAAM,IAAA,CAAK,SAAA,CAAU,CAAC,CAAC,CAAC,CAAA;AAChE,EAAA,OAAO,CAAA,EAAG,GAAA,CAAI,GAAA,CAAI,CAAC,GAAA,KAAQ,CAAA,QAAA,EAAW,GAAG,CAAA,CAAA,CAAG,CAAA,CAAE,IAAA,CAAK,IAAI,CAAC;AAAA,CAAA;AAC1D;AAEe,SAAR,aAAA,CAA+B,IAAA,GAA+B,EAAC,EAAW;AAC/E,EAAA,MAAM,aAAA,GAAgB,KAAK,QAAA,KAAa,KAAA;AACxC,EAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,YAAA,IAAgB,EAAC;AAEpC,EAAA,IAAI,MAAA,GAAS,KAAA;AACb,EAAA,MAAM,kBAAkB,MAAY;AAClC,IAAA,IAAI,MAAA,EAAQ;AACZ,IAAA,MAAA,GAAS,IAAA;AAET,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN,IAAI,WAAW,CAAA,yNAAA;AAAA,KACjB;AAAA,EACF,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAON,MAAM,MAAA,CAAO,WAAA,EAAa,IAAA,EAAwD;AAChF,MAAA,IAAI,CAAC,aAAA,EAAe;AAClB,QAAA,OAAO,MAAA;AAAA,MACT;AAEA,MAAA,IAAI;AAKF,QAAA,MAAM,SAAA,GAAY,mBAAA;AAClB,QAAA,MAAM,MAAM,MAAM;AAAA;AAAA,UAA0B;AAAA,SAAA;AAC5C,QAAA,MAAM,UAAW,GAAA,CAA8B,OAAA;AAC/C,QAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,UAAA,eAAA,EAAgB;AAChB,UAAA,OAAO,KAAA,CAAA;AAAA,QACT;AACA,QAAA,MAAM,KAAM,OAAA,EAAoC;AAChD,QAAA,MAAM,kBAAkB,KAAA,CAAM,OAAA,CAAQ,EAAE,CAAA,GAAI,EAAA,GAAK,CAAC,EAAE,CAAA;AACpD,QAAA,OAAO,EAAE,SAAS,eAAA,EAAgB;AAAA,MACpC,CAAA,CAAA,MAAQ;AACN,QAAA,eAAA,EAAgB;AAChB,QAAA,OAAO,MAAA;AAAA,MACT;AAAA,IACF,CAAA;AAAA,IAEA,UAAU,EAAA,EAAI;AACZ,MAAA,IAAI,OAAO,UAAA,EAAY;AACrB,QAAA,OAAO,mBAAA;AAAA,MACT;AACA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IAEA,KAAK,EAAA,EAAI;AACP,MAAA,IAAI,OAAO,mBAAA,EAAqB;AAC9B,QAAA,OAAO,uBAAuB,KAAK,CAAA;AAAA,MACrC;AACA,MAAA,OAAO,MAAA;AAAA,IACT;AAAA,GACF;AACF","file":"vite-plugin.js","sourcesContent":["/**\n * `@usetheo/ui/vite-plugin` — auto-wire Tailwind v4 for consumers.\n *\n * Default export is a factory returning ONE Vite Plugin. Internally:\n *   1. chains `@tailwindcss/vite` v4 via the `config()` hook when resolvable\n *      and `opts.tailwind !== false`,\n *   2. exposes a virtual module `virtual:@usetheo/ui/library-sources.css`\n *      whose contents register `@source` directives covering the library's\n *      published files, so consumer-side Tailwind scans `@usetheo/ui` JSX\n *      and emits its utility classes,\n *   3. degrades gracefully via `console.warn` (never throws) when\n *      `@tailwindcss/vite` is not installed — the surface stays usable in\n *      CSS-only mode via the pre-built `@usetheo/ui/styles.css` subpath.\n *\n * This is the cross-repo contract TheoKit's `integrateUseTheoUI()` probes\n * for. See `docs/rfcs/0008-vite-plugin-and-preset.md`.\n */\nimport type { Plugin, UserConfig } from \"vite\";\n\nexport interface UseTheoUIPluginOptions {\n  /** Disable Tailwind v4 auto-chain. Default: `true`. */\n  tailwind?: boolean;\n  /** Extra `@source` globs merged into the library defaults. */\n  contentExtra?: string[];\n}\n\nconst PLUGIN_NAME = \"@usetheo/ui/vite-plugin\";\nconst VIRTUAL_ID = \"virtual:@usetheo/ui/library-sources.css\";\nconst RESOLVED_VIRTUAL_ID = `\\0${VIRTUAL_ID}`;\n\nfunction buildLibrarySourcesCss(extra: string[] = []): string {\n  // `@source` paths are resolved relative to the importing CSS file in\n  // Tailwind v4. The library defaults below cover the published artifact\n  // tree under the consumer's `node_modules/@usetheo/ui/dist/`. Extra globs\n  // are appended verbatim — consumers can register additional roots.\n  const defaults = [\n    '\"../node_modules/@usetheo/ui/dist/**/*.{js,mjs,cjs}\"',\n    '\"./node_modules/@usetheo/ui/dist/**/*.{js,mjs,cjs}\"',\n  ];\n  const all = [...defaults, ...extra.map((g) => JSON.stringify(g))];\n  return `${all.map((src) => `@source ${src};`).join(\"\\n\")}\\n`;\n}\n\nexport default function useTheoUIVite(opts: UseTheoUIPluginOptions = {}): Plugin {\n  const wantsTailwind = opts.tailwind !== false;\n  const extra = opts.contentExtra ?? [];\n\n  let warned = false;\n  const warnMissingPeer = (): void => {\n    if (warned) return;\n    warned = true;\n    // biome-ignore lint/suspicious/noConsole: TheoKit cross-repo contract requires `console.warn` (not throw) when the optional `@tailwindcss/vite` peer is missing. See RFC 0008 §3 D1.\n    console.warn(\n      `[${PLUGIN_NAME}] @tailwindcss/vite was not resolvable; falling back to CSS-only mode. Install \\`@tailwindcss/vite@^4\\` to get the utility-driven design tokens, or import \\`@usetheo/ui/styles.css\\` directly for the pre-built surface.`,\n    );\n  };\n\n  return {\n    name: PLUGIN_NAME,\n\n    // Vite's typing for `config()` since 5.x explicitly omits `plugins` from\n    // the allowed return shape to nudge authors toward `Plugin[]` factories.\n    // The runtime still honors `{ plugins }` merge, and the TheoKit contract\n    // requires ONE Plugin object (so we can't return `Plugin[]` here).\n    // The cast keeps the public surface honest and the type-checker quiet.\n    async config(_userConfig, _env): Promise<Omit<UserConfig, \"plugins\"> | undefined> {\n      if (!wantsTailwind) {\n        return undefined;\n      }\n\n      try {\n        // Dynamic import keeps `@tailwindcss/vite` as an OPTIONAL peer. The\n        // specifier is held in a variable so Vite's import-analysis pass\n        // leaves it alone — at runtime the consumer's resolver does the\n        // actual resolution. Resolution failure must not crash the build.\n        const specifier = \"@tailwindcss/vite\";\n        const mod = await import(/* @vite-ignore */ specifier);\n        const factory = (mod as { default?: unknown }).default;\n        if (typeof factory !== \"function\") {\n          warnMissingPeer();\n          return undefined;\n        }\n        const tw = (factory as () => Plugin | Plugin[])();\n        const tailwindPlugins = Array.isArray(tw) ? tw : [tw];\n        return { plugins: tailwindPlugins } as unknown as Omit<UserConfig, \"plugins\">;\n      } catch {\n        warnMissingPeer();\n        return undefined;\n      }\n    },\n\n    resolveId(id) {\n      if (id === VIRTUAL_ID) {\n        return RESOLVED_VIRTUAL_ID;\n      }\n      return undefined;\n    },\n\n    load(id) {\n      if (id === RESOLVED_VIRTUAL_ID) {\n        return buildLibrarySourcesCss(extra);\n      }\n      return undefined;\n    },\n  };\n}\n"]}
+{"version":3,"sources":["../src/vite-plugin.ts"],"names":[],"mappings":";AA0BA,IAAM,WAAA,GAAc,yBAAA;AACpB,IAAM,UAAA,GAAa,yCAAA;AACnB,IAAM,mBAAA,GAAsB,KAAK,UAAU,CAAA,CAAA;AAE3C,SAAS,sBAAA,CAAuB,KAAA,GAAkB,EAAC,EAAW;AAuB5D,EAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,IAAA,OAAO;AAAA,MACL,gFAAA;AAAA,MACA,gFAAA;AAAA,MACA,8EAAA;AAAA,MACA,2EAAA;AAAA,MACA;AAAA,KACF,CAAE,KAAK,IAAI,CAAA;AAAA,EACb;AACA,EAAA,OAAO,CAAA,EAAG,KAAA,CAAM,GAAA,CAAI,CAAC,MAAM,CAAA,QAAA,EAAW,IAAA,CAAK,SAAA,CAAU,CAAC,CAAC,CAAA,CAAA,CAAG,CAAA,CAAE,IAAA,CAAK,IAAI,CAAC;AAAA,CAAA;AACxE;AAEe,SAAR,aAAA,CAA+B,IAAA,GAA+B,EAAC,EAAW;AAC/E,EAAA,MAAM,aAAA,GAAgB,KAAK,QAAA,KAAa,KAAA;AACxC,EAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,YAAA,IAAgB,EAAC;AAEpC,EAAA,IAAI,MAAA,GAAS,KAAA;AACb,EAAA,MAAM,kBAAkB,MAAY;AAClC,IAAA,IAAI,MAAA,EAAQ;AACZ,IAAA,MAAA,GAAS,IAAA;AAET,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN,IAAI,WAAW,CAAA,yNAAA;AAAA,KACjB;AAAA,EACF,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAON,MAAM,MAAA,CAAO,WAAA,EAAa,IAAA,EAAwD;AAChF,MAAA,IAAI,CAAC,aAAA,EAAe;AAClB,QAAA,OAAO,MAAA;AAAA,MACT;AAEA,MAAA,IAAI;AAKF,QAAA,MAAM,SAAA,GAAY,mBAAA;AAClB,QAAA,MAAM,MAAM,MAAM;AAAA;AAAA,UAA0B;AAAA,SAAA;AAC5C,QAAA,MAAM,UAAW,GAAA,CAA8B,OAAA;AAC/C,QAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,UAAA,eAAA,EAAgB;AAChB,UAAA,OAAO,KAAA,CAAA;AAAA,QACT;AACA,QAAA,MAAM,KAAM,OAAA,EAAoC;AAChD,QAAA,MAAM,kBAAkB,KAAA,CAAM,OAAA,CAAQ,EAAE,CAAA,GAAI,EAAA,GAAK,CAAC,EAAE,CAAA;AACpD,QAAA,OAAO,EAAE,SAAS,eAAA,EAAgB;AAAA,MACpC,CAAA,CAAA,MAAQ;AACN,QAAA,eAAA,EAAgB;AAChB,QAAA,OAAO,MAAA;AAAA,MACT;AAAA,IACF,CAAA;AAAA,IAEA,UAAU,EAAA,EAAI;AACZ,MAAA,IAAI,OAAO,UAAA,EAAY;AACrB,QAAA,OAAO,mBAAA;AAAA,MACT;AACA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IAEA,KAAK,EAAA,EAAI;AACP,MAAA,IAAI,OAAO,mBAAA,EAAqB;AAC9B,QAAA,OAAO,uBAAuB,KAAK,CAAA;AAAA,MACrC;AACA,MAAA,OAAO,MAAA;AAAA,IACT;AAAA,GACF;AACF","file":"vite-plugin.js","sourcesContent":["/**\n * `@usetheo/ui/vite-plugin` — auto-wire Tailwind v4 for consumers.\n *\n * Default export is a factory returning ONE Vite Plugin. Internally:\n *   1. chains `@tailwindcss/vite` v4 via the `config()` hook when resolvable\n *      and `opts.tailwind !== false`,\n *   2. exposes a virtual module `virtual:@usetheo/ui/library-sources.css`\n *      whose contents register `@source` directives covering the library's\n *      published files, so consumer-side Tailwind scans `@usetheo/ui` JSX\n *      and emits its utility classes,\n *   3. degrades gracefully via `console.warn` (never throws) when\n *      `@tailwindcss/vite` is not installed — the surface stays usable in\n *      CSS-only mode via the pre-built `@usetheo/ui/styles.css` subpath.\n *\n * This is the cross-repo contract TheoKit's `integrateUseTheoUI()` probes\n * for. See `docs/rfcs/0008-vite-plugin-and-preset.md`.\n */\nimport type { Plugin, UserConfig } from \"vite\";\n\nexport interface UseTheoUIPluginOptions {\n  /** Disable Tailwind v4 auto-chain. Default: `true`. */\n  tailwind?: boolean;\n  /** Extra `@source` globs merged into the library defaults. */\n  contentExtra?: string[];\n}\n\nconst PLUGIN_NAME = \"@usetheo/ui/vite-plugin\";\nconst VIRTUAL_ID = \"virtual:@usetheo/ui/library-sources.css\";\nconst RESOLVED_VIRTUAL_ID = `\\0${VIRTUAL_ID}`;\n\nfunction buildLibrarySourcesCss(extra: string[] = []): string {\n  // RFC 0008 follow-up #2 (0.6.1-next.0):\n  // The previous implementation emitted `@source` globs pointing at\n  // `node_modules/@usetheo/ui/dist/**/*.{js,mjs,cjs}` so Tailwind v4 would\n  // scan the library's published JS for utility classes. Under pnpm,\n  // `node_modules/@usetheo/ui` is a symlink to a deep `.pnpm` directory\n  // and Tailwind v4's tinyglobby scanner does NOT follow symlinks — the\n  // glob expanded to zero matches and the consumer saw flat-rendered\n  // components (no hover/focus/active variants emitted).\n  //\n  // The fix lives entirely on the library side: `dist/styles.css` now\n  // chains `@import \"./components.css\"`, a pre-compiled CSS file built\n  // by `scripts/build-precompiled-css.ts` containing the materialized\n  // utility rules for every class the library uses. Consumers get every\n  // variant for free with a single `@import \"@usetheo/ui/styles.css\"` —\n  // no filesystem scanning, no symlink dependency.\n  //\n  // The virtual module below is retained for backwards compatibility\n  // (TheoKit's earlier integration code may still resolve it) but it\n  // now emits ONLY the optional consumer-supplied `contentExtra` globs.\n  // The library-side default globs are gone — pre-compiled CSS replaces\n  // them. Returning empty (`extra = []`) is safe; Tailwind v4 ignores\n  // empty CSS.\n  if (extra.length === 0) {\n    return [\n      \"/* @usetheo/ui/vite-plugin — `virtual:@usetheo/ui/library-sources.css` */\",\n      \"/* The library now ships pre-compiled utility CSS via `dist/components.css` */\",\n      \"/* (chained from `dist/styles.css`), so no `@source` glob is needed here. */\",\n      \"/* This virtual module remains resolvable for backwards compatibility. */\",\n      \"\",\n    ].join(\"\\n\");\n  }\n  return `${extra.map((g) => `@source ${JSON.stringify(g)};`).join(\"\\n\")}\\n`;\n}\n\nexport default function useTheoUIVite(opts: UseTheoUIPluginOptions = {}): Plugin {\n  const wantsTailwind = opts.tailwind !== false;\n  const extra = opts.contentExtra ?? [];\n\n  let warned = false;\n  const warnMissingPeer = (): void => {\n    if (warned) return;\n    warned = true;\n    // biome-ignore lint/suspicious/noConsole: TheoKit cross-repo contract requires `console.warn` (not throw) when the optional `@tailwindcss/vite` peer is missing. See RFC 0008 §3 D1.\n    console.warn(\n      `[${PLUGIN_NAME}] @tailwindcss/vite was not resolvable; falling back to CSS-only mode. Install \\`@tailwindcss/vite@^4\\` to get the utility-driven design tokens, or import \\`@usetheo/ui/styles.css\\` directly for the pre-built surface.`,\n    );\n  };\n\n  return {\n    name: PLUGIN_NAME,\n\n    // Vite's typing for `config()` since 5.x explicitly omits `plugins` from\n    // the allowed return shape to nudge authors toward `Plugin[]` factories.\n    // The runtime still honors `{ plugins }` merge, and the TheoKit contract\n    // requires ONE Plugin object (so we can't return `Plugin[]` here).\n    // The cast keeps the public surface honest and the type-checker quiet.\n    async config(_userConfig, _env): Promise<Omit<UserConfig, \"plugins\"> | undefined> {\n      if (!wantsTailwind) {\n        return undefined;\n      }\n\n      try {\n        // Dynamic import keeps `@tailwindcss/vite` as an OPTIONAL peer. The\n        // specifier is held in a variable so Vite's import-analysis pass\n        // leaves it alone — at runtime the consumer's resolver does the\n        // actual resolution. Resolution failure must not crash the build.\n        const specifier = \"@tailwindcss/vite\";\n        const mod = await import(/* @vite-ignore */ specifier);\n        const factory = (mod as { default?: unknown }).default;\n        if (typeof factory !== \"function\") {\n          warnMissingPeer();\n          return undefined;\n        }\n        const tw = (factory as () => Plugin | Plugin[])();\n        const tailwindPlugins = Array.isArray(tw) ? tw : [tw];\n        return { plugins: tailwindPlugins } as unknown as Omit<UserConfig, \"plugins\">;\n      } catch {\n        warnMissingPeer();\n        return undefined;\n      }\n    },\n\n    resolveId(id) {\n      if (id === VIRTUAL_ID) {\n        return RESOLVED_VIRTUAL_ID;\n      }\n      return undefined;\n    },\n\n    load(id) {\n      if (id === RESOLVED_VIRTUAL_ID) {\n        return buildLibrarySourcesCss(extra);\n      }\n      return undefined;\n    },\n  };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.5.1-next.0",
+  "version": "0.6.1-next.0",
   "description": "Theo UI — framework-agnostic React component library with the Violet Forge design system. Focused on AI-agent interfaces, cloud dashboards, and developer-tooling surfaces.",
   "license": "Apache-2.0",
   "type": "module",
@@ -12,6 +12,7 @@
     },
     "./styles.css": "./dist/styles.css",
     "./styles-v3-legacy.css": "./dist/styles-v3-legacy.css",
+    "./components.css": "./dist/components.css",
     "./tokens.css": "./dist/tokens.css",
     "./tokens-v4.css": "./dist/tokens-v4.css",
     "./preset.css": "./dist/preset.css",
@@ -453,7 +454,7 @@
       "import": "./dist/preset-v3-legacy.js"
     }
   },
-  "files": ["dist", "registry/r", "registry/index.json", "LICENSE", "CHANGELOG.md"],
+  "files": ["dist", "registry/r", "registry/index.json", "LICENSE", "NOTICE", "CHANGELOG.md"],
   "scripts": {
     "build": "tsup",
     "dev": "ladle serve",
@@ -487,7 +488,8 @@
     "dogfood:slide-rich": "tsx scripts/dogfood-slide-rich.ts",
     "dogfood:v4-zero-config": "tsx scripts/dogfood-v4-zero-config.ts",
     "dogfood:v4-real-build": "bash scripts/dogfood-v4-real-build.sh",
-    "quality:gates": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm test && pnpm build && pnpm registry:build && pnpm registry:validate && pnpm quality:structure && pnpm quality:bundle && pnpm quality:a11y && pnpm ladle:build && pnpm dogfood:whiteboard && pnpm dogfood:slide && pnpm dogfood:slide-deck && pnpm dogfood:slide-rich && pnpm dogfood:v4-zero-config",
+    "dogfood:precompiled-utilities": "tsx scripts/dogfood-precompiled-utilities.ts",
+    "quality:gates": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm test && pnpm build && pnpm registry:build && pnpm registry:validate && pnpm quality:structure && pnpm quality:bundle && pnpm quality:a11y && pnpm ladle:build && pnpm dogfood:whiteboard && pnpm dogfood:slide && pnpm dogfood:slide-deck && pnpm dogfood:slide-rich && pnpm dogfood:v4-zero-config && pnpm dogfood:precompiled-utilities",
     "quality:gates:fast": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm registry:build && pnpm registry:validate && pnpm quality:structure"
   },
   "peerDependencies": {
@@ -601,6 +603,7 @@
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@ladle/react": "^4.1.2",
+    "@tailwindcss/cli": "^4.3.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",

package/registry/index.json

@@ -160,7 +160,7 @@
       "name": "chat-message",
       "type": "registry:ui",
       "title": "ChatMessage",
-      "description": "Single chat turn rendered as user bubble, assistant card, or system callout with accent border."
+      "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."
     },
     {
       "name": "chat-thread",

package/registry/r/agent-stream.json

@@ -21,7 +21,7 @@
       "path": "components/composites/agent-stream/agent-stream.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-stream.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { LiveRegionProvider } from \"@/lib/live-region-context\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type { Message } from \"@/types/chat\";\nimport { AgentErrorCard, type AgentErrorKind } from \"@/components/ui/agent-error-card\";\nimport { AgentStreaming } from \"@/components/ui/agent-streaming\";\nimport { ChatMessage } from \"@/components/ui/chat-message\";\nimport { ToolCallCard, type ToolCallStatus } from \"@/components/ui/tool-call-card\";\nimport { ApprovalCard, type ApprovalSeverity } from \"@/components/blocks/approval-card\";\n\n/**\n * AgentStream — the canonical conversation surface for a code agent.\n *\n * Interleaves chat messages (user + assistant), tool invocations, approval\n * gates, errors, and the live streaming indicator. Mirrors how Claude Code\n * presents work to the user: conversation-centric, tool calls embedded,\n * approvals pause the flow inline, errors surface where they happen.\n *\n * Items are rendered in array order. The consumer fully controls the data;\n * AgentStream is a pure presentational composite over its child primitives.\n */\n\ninterface ToolCallStreamItem {\n  kind: \"tool-call\";\n  id: string;\n  tool: ReactNode;\n  icon?: IconComponent;\n  target?: ReactNode;\n  status: ToolCallStatus;\n  output?: ReactNode;\n  defaultExpanded?: boolean;\n  timestamp?: ReactNode;\n}\n\ninterface ApprovalStreamItem {\n  kind: \"approval\";\n  id: string;\n  severity?: ApprovalSeverity;\n  title: ReactNode;\n  request: ReactNode;\n  description?: ReactNode;\n  details?: ReactNode;\n  onApprove?: () => void;\n  onDeny?: () => void;\n  onAlways?: () => void;\n}\n\ninterface ErrorStreamItem {\n  kind: \"error\";\n  id: string;\n  errorKind?: AgentErrorKind;\n  title: ReactNode;\n  detail?: ReactNode;\n  actions?: ReactNode;\n  timestamp?: ReactNode;\n}\n\ninterface StreamingStreamItem {\n  kind: \"streaming\";\n  id: string;\n  model?: ReactNode;\n  partial?: ReactNode;\n}\n\ninterface MessageStreamItem {\n  kind: \"message\";\n  id: string;\n  message: Message;\n}\n\ninterface CustomStreamItem {\n  kind: \"custom\";\n  id: string;\n  /** Arbitrary node — escape hatch for inline diff cards, etc. */\n  node: ReactNode;\n}\n\nexport type AgentStreamItem =\n  | MessageStreamItem\n  | ToolCallStreamItem\n  | ApprovalStreamItem\n  | ErrorStreamItem\n  | StreamingStreamItem\n  | CustomStreamItem;\n\ninterface AgentStreamProps extends HTMLAttributes<HTMLDivElement> {\n  items: AgentStreamItem[];\n}\n\nconst AgentStream = forwardRef<HTMLDivElement, AgentStreamProps>(\n  ({ className, items, ...props }, ref) => (\n    // T4.1 (MF-4): AgentStream is the canonical live region for the stream\n    // surface. Wrap children in LiveRegionProvider so nested AgentStreaming,\n    // AgentErrorCard, AutoCompactNotice, Skeleton, etc. don't declare their\n    // own aria-live (which would cause double announcements).\n    <LiveRegionProvider value={true}>\n      <div\n        ref={ref}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions\"\n        // MEDIUM-001: explicit aria-atomic=\"false\" so VoiceOver/macOS doesn't\n        // reannounce the entire stream on each new item.\n        aria-atomic=\"false\"\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        {items.map((item) => {\n          if (item.kind === \"message\") return <ChatMessage key={item.id} message={item.message} />;\n          if (item.kind === \"tool-call\")\n            return (\n              <ToolCallCard\n                key={item.id}\n                tool={item.tool}\n                icon={item.icon}\n                target={item.target}\n                status={item.status}\n                output={item.output}\n                defaultExpanded={item.defaultExpanded}\n                timestamp={item.timestamp}\n              />\n            );\n          if (item.kind === \"approval\")\n            return (\n              <ApprovalCard\n                key={item.id}\n                severity={item.severity}\n                title={item.title}\n                request={item.request}\n                description={item.description}\n                details={item.details}\n                onApprove={item.onApprove}\n                onDeny={item.onDeny}\n                onAlways={item.onAlways}\n              />\n            );\n          if (item.kind === \"error\")\n            return (\n              <AgentErrorCard\n                key={item.id}\n                kind={item.errorKind}\n                title={item.title}\n                detail={item.detail}\n                actions={item.actions}\n                timestamp={item.timestamp}\n              />\n            );\n          if (item.kind === \"streaming\")\n            return <AgentStreaming key={item.id} model={item.model} partial={item.partial} />;\n          if (item.kind === \"custom\") return <div key={item.id}>{item.node}</div>;\n          return null;\n        })}\n      </div>\n    </LiveRegionProvider>\n  ),\n);\nAgentStream.displayName = \"AgentStream\";\n\nexport { AgentStream };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { LiveRegionProvider } from \"@/lib/live-region-context\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type { UIMessage } from \"@/types/chat\";\nimport { AgentErrorCard, type AgentErrorKind } from \"@/components/ui/agent-error-card\";\nimport { AgentStreaming } from \"@/components/ui/agent-streaming\";\nimport { ToolCallCard, type ToolCallStatus } from \"@/components/ui/tool-call-card\";\nimport { ApprovalCard, type ApprovalSeverity } from \"@/components/blocks/approval-card\";\nimport { ChatMessage } from \"@/components/ui/chat-message/index\";\n\n/**\n * AgentStream — the canonical conversation surface for a code agent.\n *\n * Interleaves chat messages (user + assistant), tool invocations, approval\n * gates, errors, and the live streaming indicator. Mirrors how Claude Code\n * presents work to the user: conversation-centric, tool calls embedded,\n * approvals pause the flow inline, errors surface where they happen.\n *\n * Items are rendered in array order. The consumer fully controls the data;\n * AgentStream is a pure presentational composite over its child primitives.\n */\n\ninterface ToolCallStreamItem {\n  kind: \"tool-call\";\n  id: string;\n  tool: ReactNode;\n  icon?: IconComponent;\n  target?: ReactNode;\n  status: ToolCallStatus;\n  output?: ReactNode;\n  defaultExpanded?: boolean;\n  timestamp?: ReactNode;\n}\n\ninterface ApprovalStreamItem {\n  kind: \"approval\";\n  id: string;\n  severity?: ApprovalSeverity;\n  title: ReactNode;\n  request: ReactNode;\n  description?: ReactNode;\n  details?: ReactNode;\n  onApprove?: () => void;\n  onDeny?: () => void;\n  onAlways?: () => void;\n}\n\ninterface ErrorStreamItem {\n  kind: \"error\";\n  id: string;\n  errorKind?: AgentErrorKind;\n  title: ReactNode;\n  detail?: ReactNode;\n  actions?: ReactNode;\n  timestamp?: ReactNode;\n}\n\ninterface StreamingStreamItem {\n  kind: \"streaming\";\n  id: string;\n  model?: ReactNode;\n  partial?: ReactNode;\n}\n\ninterface MessageStreamItem {\n  kind: \"message\";\n  id: string;\n  message: UIMessage;\n}\n\ninterface CustomStreamItem {\n  kind: \"custom\";\n  id: string;\n  /** Arbitrary node — escape hatch for inline diff cards, etc. */\n  node: ReactNode;\n}\n\nexport type AgentStreamItem =\n  | MessageStreamItem\n  | ToolCallStreamItem\n  | ApprovalStreamItem\n  | ErrorStreamItem\n  | StreamingStreamItem\n  | CustomStreamItem;\n\ninterface AgentStreamProps extends HTMLAttributes<HTMLDivElement> {\n  items: AgentStreamItem[];\n}\n\nconst AgentStream = forwardRef<HTMLDivElement, AgentStreamProps>(\n  ({ className, items, ...props }, ref) => (\n    // T4.1 (MF-4): AgentStream is the canonical live region for the stream\n    // surface. Wrap children in LiveRegionProvider so nested AgentStreaming,\n    // AgentErrorCard, AutoCompactNotice, Skeleton, etc. don't declare their\n    // own aria-live (which would cause double announcements).\n    <LiveRegionProvider value={true}>\n      <div\n        ref={ref}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions\"\n        // MEDIUM-001: explicit aria-atomic=\"false\" so VoiceOver/macOS doesn't\n        // reannounce the entire stream on each new item.\n        aria-atomic=\"false\"\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        {items.map((item) => {\n          if (item.kind === \"message\") return <ChatMessage key={item.id} message={item.message} />;\n          if (item.kind === \"tool-call\")\n            return (\n              <ToolCallCard\n                key={item.id}\n                tool={item.tool}\n                icon={item.icon}\n                target={item.target}\n                status={item.status}\n                output={item.output}\n                defaultExpanded={item.defaultExpanded}\n                timestamp={item.timestamp}\n              />\n            );\n          if (item.kind === \"approval\")\n            return (\n              <ApprovalCard\n                key={item.id}\n                severity={item.severity}\n                title={item.title}\n                request={item.request}\n                description={item.description}\n                details={item.details}\n                onApprove={item.onApprove}\n                onDeny={item.onDeny}\n                onAlways={item.onAlways}\n              />\n            );\n          if (item.kind === \"error\")\n            return (\n              <AgentErrorCard\n                key={item.id}\n                kind={item.errorKind}\n                title={item.title}\n                detail={item.detail}\n                actions={item.actions}\n                timestamp={item.timestamp}\n              />\n            );\n          if (item.kind === \"streaming\")\n            return <AgentStreaming key={item.id} model={item.model} partial={item.partial} />;\n          if (item.kind === \"custom\") return <div key={item.id}>{item.node}</div>;\n          return null;\n        })}\n      </div>\n    </LiveRegionProvider>\n  ),\n);\nAgentStream.displayName = \"AgentStream\";\n\nexport { AgentStream };\n"
     }
   ]
 }

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"
     }
   ]
 }