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

package/dist/preset-v3-legacy.d.ts

@@ -0,0 +1,35 @@
+import { Config } from 'tailwindcss';
+
+/**
+ * `@usetheo/ui/preset-v3-legacy` — Tailwind v3 JS preset (legacy path).
+ *
+ * Default-export a `Partial<Config>` mirroring the design tokens shipped
+ * in `@usetheo/ui/tokens.css`. Adds a `content` field covering the
+ * library's published artifact tree so v3-based Tailwind builds emit
+ * the utilities used by `@usetheo/ui` components.
+ *
+ * **Tailwind v4 consumers MUST use `@usetheo/ui/preset.css`**, not this
+ * file — Tailwind v4 dropped the JS preset format entirely. This file
+ * exists for any remaining `tailwindcss@^3` consumer (notably the
+ * shadcn-style copy-paste registry path); new code should not import
+ * from this subpath.
+ *
+ * The token surface is delegated to `./styles/tailwind-preset.ts` (the
+ * existing source of truth used by the local Ladle dev surface and the
+ * shadcn registry).
+ *
+ * v3 consumer usage:
+ *
+ *   // tailwind.config.ts (Tailwind v3 only)
+ *   import preset from "@usetheo/ui/preset-v3-legacy";
+ *   export default {
+ *     presets: [preset],
+ *     content: ["./app/**\/*.{ts,tsx}"],
+ *   };
+ *
+ * See RFC 0008 follow-up.
+ */
+
+declare const preset: Partial<Config>;
+
+export { preset as default };

package/dist/{preset.js → preset-v3-legacy.js}

@@ -141,7 +141,7 @@ var theoUIPreset = {
   plugins: [animate]
 };
 
-// src/preset.ts
+// src/preset-v3-legacy.ts
 var LIBRARY_CONTENT_GLOBS = [
   // Resolved relative to the consumer's `tailwind.config.{ts,js}`.
   "./node_modules/@usetheo/ui/dist/**/*.{js,mjs,cjs}",
@@ -152,8 +152,8 @@ var preset = {
   ...theoUIPreset,
   content: LIBRARY_CONTENT_GLOBS
 };
-var preset_default = preset;
+var preset_v3_legacy_default = preset;
 
-export { preset_default as default };
-//# sourceMappingURL=preset.js.map
-//# sourceMappingURL=preset.js.map
+export { preset_v3_legacy_default as default };
+//# sourceMappingURL=preset-v3-legacy.js.map
+//# sourceMappingURL=preset-v3-legacy.js.map

package/dist/preset-v3-legacy.js.map

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

package/dist/preset.css

@@ -0,0 +1,27 @@
+/* Theo UI — Tailwind v4 CSS preset.
+ *
+ * For consumers running their own Tailwind v4 build (TheoKit framework
+ * path, custom Vite/Astro/Next apps with @tailwindcss/vite, etc.). The
+ * preset pulls in:
+ *   1. `tokens.css` — runtime `--*` vars `<ThemeProvider>` mutates per
+ *      theme cascade.
+ *   2. `tokens-v4.css` — the `@theme { --color-*, --font-*, --text-*,
+ *      --radius-*, --shadow-*, --ease-*, --animate-* }` namespace
+ *      Tailwind v4 actually reads to generate utilities.
+ *
+ * Consumer usage (their entry CSS):
+ *
+ *   @import "tailwindcss";
+ *   @import "@usetheo/ui/preset.css";
+ *
+ *   /* the consumer's own @theme overrides come AFTER, so they win. * /
+ *
+ * Tailwind v4 dropped the v3 JS preset format. The previous JS preset
+ * remains shipped under `@usetheo/ui/preset-v3-legacy` (which works only
+ * with `tailwindcss@^3`). New v4 consumers MUST use this CSS preset.
+ *
+ * See RFC 0008 follow-up.
+ */
+
+@import "./tokens.css";
+@import "./tokens-v4.css";

package/dist/styles-v3-legacy.css

@@ -0,0 +1,88 @@
+@import "./fonts.css";
+@import "./tokens.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  html {
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    /* OpenType ligatures globally — Geist's "liga" feature is structural
+     * and gives the Vercel-tight glyph combinations. */
+    font-feature-settings: "liga" 1, "ss01" 1;
+  }
+
+  /* Display headings inherit theme display font (Geist by default).
+   * Per-size tracking is set in tailwind.config.ts; this is the safety net. */
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-display);
+    font-weight: 600;
+  }
+
+  /* Code surfaces: use the mono token + tabular numerals so columns of
+   * numbers line up in tables/logs/metrics. */
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-mono);
+    font-feature-settings: "tnum" 1, "liga" 1;
+  }
+
+  /* Focus ring — violet (signature) */
+  :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  /* Selection — soft violet */
+  ::selection {
+    background-color: hsl(var(--primary) / 0.25);
+    color: hsl(var(--foreground));
+  }
+
+  /* Native scrollbar fallback (Violet Forge).
+   * Used for native browser scroll on elements that don't wrap in <ScrollArea>.
+   * Components that DO use <ScrollArea> hide the native scrollbar via Radix.
+   */
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--primary) / 0.25);
+    border: 2px solid transparent;
+    background-clip: content-box;
+    border-radius: 9999px;
+    transition: background-color var(--duration-fast) var(--ease-out-soft);
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--primary) / 0.5);
+  }
+  *::-webkit-scrollbar-thumb:active {
+    background-color: hsl(var(--primary) / 0.75);
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
+  }
+}

package/dist/styles.css

@@ -1,9 +1,26 @@
+/* Theo UI — Tailwind v4 prebuilt entry stylesheet.
+ *
+ * What ships at `@usetheo/ui/styles.css` since RFC 0008 follow-up
+ * (`0.5.1-next.0`). Consumer imports this once and the framework's
+ * Tailwind v4 build picks up:
+ *   - `@import "tailwindcss"` — Tailwind v4 core (preflight + utilities)
+ *   - `@import "./fonts.css"` — self-hosted Geist + Geist Mono @font-face
+ *   - `@import "./tokens.css"` — runtime `--*` vars (theme cascade target)
+ *   - `@import "./tokens-v4.css"` — `@theme { --color-*, --text-*, … }`
+ *     namespace Tailwind v4 reads to emit utilities
+ *   - `@layer base` — `border-color`, body font, focus ring, scrollbar
+ *     styling that depend on the runtime vars
+ *
+ * v3-only consumers (Tailwind 3.x + the shadcn registry preset) should
+ * load `@usetheo/ui/styles-v3-legacy.css` instead — that file is the
+ * unchanged `@tailwind base; @tailwind components; @tailwind utilities`
+ * variant. See RFC 0008 follow-up.
+ */
+
+@import "tailwindcss";
 @import "./fonts.css";
 @import "./tokens.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "./tokens-v4.css";
 
 @layer base {
   * {
@@ -26,7 +43,7 @@
   }
 
   /* Display headings inherit theme display font (Geist by default).
-   * Per-size tracking is set in tailwind.config.ts; this is the safety net. */
+   * Per-size tracking is set in tokens-v4.css; this is the safety net. */
   h1,
   h2,
   h3,

package/dist/tokens-v4.css

@@ -0,0 +1,187 @@
+/* Theo UI — Tailwind v4 theme aliases.
+ *
+ * Companion to `tokens.css`. The base file declares the v3-style runtime
+ * variables (`--primary`, `--background`, …) that `<ThemeProvider>` and
+ * `[data-theme]` cascades mutate at runtime. This file declares the
+ * Tailwind v4 `@theme` namespace (`--color-primary`, `--color-background`,
+ * …) by aliasing back to those runtime vars via `hsl(var(--*))`.
+ *
+ * Why two layers:
+ *   - `<ThemeProvider>` (and the 10 built-in themes) sets `--primary`
+ *     etc. at runtime — that's the theme switch surface.
+ *   - Tailwind v4 resolves color utilities exclusively through
+ *     `--color-*` tokens declared in `@theme`. Without these aliases
+ *     `bg-primary`, `text-muted-foreground`, `border-border`, etc. emit
+ *     a className with no matching CSS rule.
+ *
+ * The indirection (`--color-primary: hsl(var(--primary))`) preserves the
+ * runtime theme cascade — browsers resolve `var(--color-primary)` →
+ * `hsl(var(--primary))` → current `[data-theme]` value at paint time.
+ *
+ * See RFC 0008 follow-up.
+ */
+
+@theme {
+  /* Color tokens ------------------------------------------------------ */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-deep: hsl(var(--primary-deep));
+  --color-primary-glow: hsl(var(--primary-glow));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-deep: hsl(var(--accent-deep));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
+
+  /* Fonts ------------------------------------------------------------- */
+  --font-display: var(--font-display);
+  --font-sans: var(--font-body);
+  --font-mono: var(--font-mono);
+
+  /* Violet Forge typescale -------------------------------------------- *
+   * Compound text utilities: each `--text-{name}` declares the size,
+   * with companion `--*--line-height`, `--*--letter-spacing`, and
+   * `--*--font-weight` properties Tailwind v4 picks up automatically.
+   */
+  --text-display-2xl: 64px;
+  --text-display-2xl--line-height: 1;
+  --text-display-2xl--letter-spacing: -0.0464em;
+  --text-display-2xl--font-weight: 600;
+
+  --text-display-xl: 48px;
+  --text-display-xl--line-height: 1.05;
+  --text-display-xl--letter-spacing: -0.05em;
+  --text-display-xl--font-weight: 600;
+
+  --text-display-lg: 40px;
+  --text-display-lg--line-height: 1.1;
+  --text-display-lg--letter-spacing: -0.05em;
+  --text-display-lg--font-weight: 600;
+
+  --text-display-md: 32px;
+  --text-display-md--line-height: 1.2;
+  --text-display-md--letter-spacing: -0.04em;
+  --text-display-md--font-weight: 600;
+
+  --text-headline: 28px;
+  --text-headline--line-height: 1.25;
+  --text-headline--letter-spacing: -0.035em;
+  --text-headline--font-weight: 600;
+
+  --text-title-lg: 24px;
+  --text-title-lg--line-height: 1.33;
+  --text-title-lg--letter-spacing: -0.04em;
+  --text-title-lg--font-weight: 600;
+
+  --text-title-md: 20px;
+  --text-title-md--line-height: 1.4;
+  --text-title-md--letter-spacing: -0.03em;
+  --text-title-md--font-weight: 600;
+
+  --text-body-lg: 18px;
+  --text-body-lg--line-height: 1.56;
+  --text-body-lg--letter-spacing: -0.01em;
+  --text-body-lg--font-weight: 400;
+
+  --text-body-md: 14px;
+  --text-body-md--line-height: 1.43;
+  --text-body-md--letter-spacing: 0;
+  --text-body-md--font-weight: 400;
+
+  --text-body-sm: 13px;
+  --text-body-sm--line-height: 1.46;
+  --text-body-sm--font-weight: 400;
+
+  --text-label: 14px;
+  --text-label--line-height: 1.43;
+  --text-label--font-weight: 500;
+
+  --text-label-caps: 12px;
+  --text-label-caps--line-height: 1.33;
+  --text-label-caps--letter-spacing: 0.04em;
+  --text-label-caps--font-weight: 500;
+
+  --text-code-md: 14px;
+  --text-code-md--line-height: 1.5;
+  --text-code-md--font-weight: 400;
+
+  --text-code-sm: 13px;
+  --text-code-sm--line-height: 1.54;
+  --text-code-sm--font-weight: 500;
+
+  /* Radii — Tailwind v4 reads the value directly (no var indirection). */
+  --radius-none: 0px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 20px;
+  --radius-full: 9999px;
+
+  /* Shadows — alias to tokens.css computed values (which already use
+     * `hsl(var(--foreground) / …)` so theme-switch keeps them in step). */
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-glow: var(--shadow-glow);
+  --shadow-glow-strong: var(--shadow-glow-strong);
+
+  /* Motion ------------------------------------------------------------ */
+  --ease-out-soft: var(--ease-out-soft);
+  --ease-snap: var(--ease-snap);
+
+  /* Animations — declare so `animate-fade-in-up` and `animate-pulse-glow`
+     * resolve. Keyframes are declared below (outside @theme — Tailwind v4
+     * picks them up via the @keyframes namespace).
+     */
+  --animate-fade-in-up: fade-in-up var(--duration-base) var(--ease-out-soft) both;
+  --animate-pulse-glow: pulse-glow 1.5s var(--ease-in-out) infinite;
+}
+
+@keyframes fade-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 hsl(var(--primary) / 0.5);
+  }
+  50% {
+    box-shadow: 0 0 0 8px hsl(var(--primary) / 0);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.5.0-next.0",
+  "version": "0.6.0-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",
@@ -11,7 +11,11 @@
       "import": "./dist/index.js"
     },
     "./styles.css": "./dist/styles.css",
+    "./styles-v3-legacy.css": "./dist/styles-v3-legacy.css",
     "./tokens.css": "./dist/tokens.css",
+    "./tokens-v4.css": "./dist/tokens-v4.css",
+    "./preset.css": "./dist/preset.css",
+    "./preset": "./dist/preset.css",
     "./fonts.css": "./dist/fonts.css",
     "./fonts-cdn.css": "./dist/fonts-cdn.css",
     "./slide/themes/default.css": "./dist/slide/themes/default.css",
@@ -444,12 +448,12 @@
       "types": "./dist/vite-plugin.d.ts",
       "import": "./dist/vite-plugin.js"
     },
-    "./preset": {
-      "types": "./dist/preset.d.ts",
-      "import": "./dist/preset.js"
+    "./preset-v3-legacy": {
+      "types": "./dist/preset-v3-legacy.d.ts",
+      "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",
@@ -481,7 +485,9 @@
     "dogfood:slide": "tsx scripts/dogfood-slide.ts",
     "dogfood:slide-deck": "tsx scripts/dogfood-slide-deck.ts",
     "dogfood:slide-rich": "tsx scripts/dogfood-slide-rich.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",
+    "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",
     "quality:gates:fast": "pnpm format:check && pnpm lint:ci && pnpm typecheck && pnpm registry:build && pnpm registry:validate && pnpm quality:structure"
   },
   "peerDependencies": {

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