@kitn.ai/ui 0.29.0 → 0.31.0

package/dist/mcp.es.js

@@ -7794,14 +7794,18 @@ function renderSolid(components, ctx) {
     `//`,
     `// SETUP, once. These components are Tailwind-v4 SOURCE (not shadow-encapsulated),`,
     `// so their class names have to reach YOUR stylesheet:`,
-    `//   npm i -D tailwindcss @tailwindcss/vite vite-plugin-solid`,
+    `//   npm i -D tailwindcss @tailwindcss/vite vite-plugin-solid tw-animate-css @tailwindcss/typography`,
     `//   vite.config.ts  -> plugins: [solid(), tailwindcss()]`,
     `//   src/styles.css  -> @import "tailwindcss";`,
-    `//                      @import "@kitn.ai/ui/theme.css";        /* --color-* tokens */`,
+    `//                      @import "@kitn.ai/ui/solid.css";        /* tokens + base rules + plugins */`,
     `//                      @source "../node_modules/@kitn.ai/ui";  /* scan the kit for classes */`,
     `// The @source line is NOT optional: without it Tailwind scans only src/, strips`,
     `// every kit utility class as unused, and the whole UI renders unstyled.`,
-    `// (theme.css here, not theme.tokens.css: this app compiles Tailwind itself.)`,
+    `// solid.css, not theme.css: theme.css is the tokens only. solid.css imports it and`,
+    `// adds what the kai-* elements carry in their shadow roots and this app has to`,
+    `// compile itself: the form-control and focus-ring rules, tw-animate-css (every`,
+    `// overlay animation) and the typography plugin (prose-sm/prose-lg). The two`,
+    `// plugins are optional peers of the kit, hence the extra installs above.`,
     `import { For, Index, Match, Show, Switch, ${block ? "createEffect, " : ""}createMemo, createSignal${block ? ", onCleanup" : ""} } from 'solid-js';`,
     // '@kitn.ai/ui/solid', NOT the root '@kitn.ai/ui', and the difference is
     // invisible to every compiler on this repo's critical path: src/solid.ts is
@@ -8997,7 +9001,7 @@ const scaffold = {
     );
   }
 };
-const themeCss = "/* @kitn.ai/ui design system — import after `@import \"tailwindcss\"`.\n   Defines ONLY namespaced (--color-*) tokens, component keyframes, animation\n   utilities, and the .chat-markdown styles. Contains NO global base/reset rules,\n   so importing it restyles nothing on its own — a host opts in via the kit's\n   components + classes. Rebrand by overriding the --color-* values (optionally\n   scoped to a subtree).\n   NOTE: This file is Tailwind-v4 source (requires tailwindcss as a peer). For\n   bundler-based apps that don't use Tailwind, import @kitn.ai/ui/theme.tokens.css\n   instead — it is plain compiled CSS with no toolchain requirements. */\n\n@custom-variant dark (&:is(.dark *));\n\n@theme {\n  --color-background: var(--kai-color-background, hsl(0 0% 100%));\n  --color-foreground: var(--kai-color-foreground, hsl(240 10% 3.9%));\n  --color-card: var(--kai-color-card, hsl(0 0% 100%));\n  --color-card-foreground: var(--kai-color-card-foreground, hsl(240 10% 3.9%));\n  --color-popover: var(--kai-color-popover, hsl(0 0% 100%));\n  --color-popover-foreground: var(--kai-color-popover-foreground, hsl(240 10% 3.9%));\n  --color-primary: var(--kai-color-primary, hsl(240 5.9% 10%));\n  --color-primary-foreground: var(--kai-color-primary-foreground, hsl(0 0% 98%));\n  --color-secondary: var(--kai-color-secondary, hsl(240 4.8% 95.9%));\n  --color-secondary-foreground: var(--kai-color-secondary-foreground, hsl(240 5.9% 10%));\n  --color-muted: var(--kai-color-muted, hsl(240 4.8% 95.9%));\n  --color-muted-foreground: var(--kai-color-muted-foreground, hsl(240 3.8% 43%));\n  /* Subtle SURFACE — an opaque \"muted panel\" for things that sit OVER content\n     (the prompt input, message bubbles, artifact/card headers, chips). CALCULATED\n     from existing tokens — `--color-muted` blended 40% onto `--color-background`\n     — so it tracks the theme (incl. dark) automatically and needs no hand-picked\n     value. SOLID (no alpha), so nothing behind it bleeds through. This replaces\n     ad-hoc `bg-muted/40` surfaces. Retint via the --kai-color-surface knob (or a\n     bare value); --color-surface-strong is the stronger step (hover/raised) and\n     --color-surface-sunken is recessed BELOW the base surface (wells, or a banner\n     that sits behind a card). Sunken is theme-specific: \"darker than the card\"\n     means a LOWER muted% in dark but a HIGHER one in light, so the two scopes\n     can't share a number — see the .dark block. */\n  --color-surface: var(--kai-color-surface, color-mix(in srgb, var(--color-muted) 40%, var(--color-background)));\n  --color-surface-strong: var(--kai-color-surface-strong, color-mix(in srgb, var(--color-muted) 60%, var(--color-background)));\n  --color-surface-sunken: var(--kai-color-surface-sunken, color-mix(in srgb, var(--color-muted) 85%, var(--color-background)));\n  --color-accent: var(--kai-color-accent, hsl(240 4.8% 95.9%));\n  --color-accent-foreground: var(--kai-color-accent-foreground, hsl(240 5.9% 10%));\n  --color-destructive: var(--kai-color-destructive, hsl(0 72% 45%));\n  --color-destructive-foreground: var(--kai-color-destructive-foreground, hsl(0 0% 98%));\n  /* Semantic status colors - solid fills with a legible foreground, matched to\n     the kit's tool-green / -amber / -blue hues so they read on-brand. Use\n     bg-success / bg-warning / bg-info with the matching -foreground for badges,\n     banners, and buttons; or text-success / -warning / -info on a soft tint\n     (below). destructive (above) is the danger/error member of the same family.\n     Light uses darker hues so the color carries a light foreground AND stays\n     legible as text on a pale tint; dark (see .dark) flips to brighter hues over\n     a near-black foreground. Override via --kai-color-success / -warning / -info\n     (+ -foreground). */\n  --color-success: var(--kai-color-success, hsl(142 71% 30%));\n  --color-success-foreground: var(--kai-color-success-foreground, hsl(0 0% 98%));\n  --color-warning: var(--kai-color-warning, hsl(38 92% 30%));\n  --color-warning-foreground: var(--kai-color-warning-foreground, hsl(0 0% 98%));\n  --color-info: var(--kai-color-info, hsl(217 91% 42%));\n  --color-info-foreground: var(--kai-color-info-foreground, hsl(0 0% 98%));\n  /* Soft tinted status surfaces - OPAQUE, theme-tracking fills derived as ~14% of\n     the status hue blended onto the background. Use these for subtle callouts /\n     banners instead of an eyeballed bg-success/10; pair with text-success /\n     -warning / -info / -destructive. Derived, so declared in BOTH light and dark\n     (a color-mix resolves where it's declared - see the surface tokens above). A\n     bare bg- utility for a color-mix token is added at the bottom (see bg-surface). */\n  --color-success-soft: var(--kai-color-success-soft, color-mix(in oklab, var(--color-success) 14%, var(--color-background)));\n  --color-warning-soft: var(--kai-color-warning-soft, color-mix(in oklab, var(--color-warning) 14%, var(--color-background)));\n  --color-info-soft: var(--kai-color-info-soft, color-mix(in oklab, var(--color-info) 14%, var(--color-background)));\n  --color-destructive-soft: var(--kai-color-destructive-soft, color-mix(in oklab, var(--color-destructive) 14%, var(--color-background)));\n  /* Interaction-state backgrounds - opaque, theme-tracking fills for row/control\n     states so consumers stop eyeballing /10 opacities. --color-hover is a subtle\n     neutral (a little --color-muted on the background); --color-selected is a\n     faint --color-primary tint so a selected row tracks the brand. Use bg-hover /\n     bg-selected. Derived, so declared in BOTH light and dark; bare bg- utilities\n     added at the bottom. */\n  --color-hover: var(--kai-color-hover, color-mix(in oklab, var(--color-muted) 60%, var(--color-background)));\n  --color-selected: var(--kai-color-selected, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)));\n  /* UNREAD indicator — a dedicated token (owner ruling, 2026-08-26), not a\n     reuse of --color-destructive: unread is notification semantics, not\n     error, so a consumer re-theming \"danger\" red must not also move every\n     unread dot. Used identically by all three places an unread conversation\n     surfaces: the list-row trailing dot (ConversationPanel), the header\n     toggle's badge (ChatThread), and Dock's own closed-launcher badge.\n     A vivid \"messenger red\" (Tailwind red-500 territory, the Intercom/iOS\n     badge convention) rather than the darker --color-destructive hue: the\n     first pass at this token picked a color that read as legible-on-paper\n     but visually flat/dark next to the launcher's near-black ring. This one\n     value is used in BOTH light and dark (no .dark override below) because\n     it independently clears 3:1 (WCAG 1.4.11, non-text) against every real\n     surface an unread dot sits on in EITHER mode: light row/card background\n     (white) 3.78:1, light Dock-launcher ring (--color-primary, near-black)\n     4.68:1, dark row/card background (near-black) 4.73–4.35:1, dark\n     Dock-launcher ring (--color-primary, near-white) 3.62:1. (Measured via\n     the WCAG relative-luminance formula against this file's own light/dark\n     --color-background/-card/-primary values — see\n     .superpowers/sdd/2026-08-26-conversations/rework-report.md Round 4 for\n     the worked numbers.) Override via --kai-color-unread; a construct author\n     can also set it per-widget through `theme.unreadColor` (construct\n     vocabulary — see agent-tooling/construct/schema.ts). */\n  --color-unread: var(--kai-color-unread, hsl(0 84% 60%));\n  /* MARKED text — the fill behind a keyword the app has flagged (the composer's\n     `highlights` rules, decorated through the CSS Custom Highlight API). This is\n     `<mark>`, not a selection and not a status: a warm yellow, the convention\n     every browser already ships for <mark> and every reader already reads as\n     \"someone marked this\". Deliberately NOT derived from --color-primary — that\n     token is a NEUTRAL near-black in light and near-white in dark, so any tint of\n     it is grey, which is why the highlight used to be invisible. Also not blue\n     (the browser's own ::selection is blue — a highlight must not read as a\n     selection), not red (error) and not the skill/agent pill hues (blue/violet).\n     OPAQUE, so it composites predictably over whichever field it lands on.\n     Override via --kai-color-highlight. Light: near-black text over it is 15.6:1;\n     dark: near-white text over it is 6.7:1 — both well clear of WCAG AA. */\n  --color-highlight: var(--kai-color-highlight, hsl(45 96% 78%));\n  /* SELECTED text — the kit's own ::selection fill, applied inside every kai-*\n     shadow root (see src/elements/styles.css for the scoping rationale). The kit\n     owns this because leaving it to the UA meant the browser's blue outranked the\n     kit's own deliberate emphasis: a marked keyword was LESS prominent than an\n     incidental drag-select. Stays in the cool/blue family the UA trained everyone\n     to read as \"selected\", so it can never be confused with the warm --color-highlight\n     mark above; OPAQUE, so a selection over a mark composites cleanly (selection\n     paints on top of a custom highlight) instead of muddying into a third colour.\n     The FOREGROUND is set too, and that is not cosmetic: without it the selected\n     glyph keeps its own colour, and the kit's coloured text — muted text (3.8:1),\n     the skill/agent pill hues (3.6:1 / 4.0:1), inline code (4.7:1) — lands at or\n     under WCAG AA on this fill. Forcing the foreground token makes the guarantee\n     hold for every glyph regardless of what colour it had. Light 13.99:1,\n     dark 8.87:1. Override via --kai-color-selection(-foreground). */\n  --color-selection: var(--kai-color-selection, hsl(213 94% 87%));\n  --color-selection-foreground: var(--kai-color-selection-foreground, hsl(240 10% 3.9%));\n  --color-border: var(--kai-color-border, hsl(240 5.9% 90%));\n  /* CONTROL boundary — the visible edge of an interactive form control (text\n     input, textarea, select, the radio/checkbox ring). WCAG 2.1 SC 1.4.11\n     Non-text Contrast requires >=3:1 against the adjacent surface for exactly\n     this: a control whose boundary you cannot see is not perceivable. That is\n     why this is NOT --color-border: a divider or a card outline is decorative\n     and may sit below 3:1, a control's edge may not. Do NOT use border-input\n     for list wrappers or panel outlines — use border-border there.\n     Contrast is the requirement; a thicker border does not satisfy 1.4.11. */\n  --color-input: var(--kai-color-input, hsl(240 5% 53%));\n  /* Focus ring — a deliberate blue (not a neutral) so keyboard focus is always\n     obvious and on-brand in both modes. Light uses a strong blue; dark uses a\n     brighter one for contrast on dark surfaces. Both clear WCAG 2.1 non-text\n     contrast (≥3:1) against the kit's backgrounds. Override via --kai-color-ring. */\n  --color-ring: var(--kai-color-ring, hsl(217 91% 53%));\n  /* Custom scrollbars — thin, rounded, subtle; thumb strengthens on hover. A\n     consistent cross-platform look (the kit styles its OWN scroll regions inside\n     the shadow root; the track stays transparent so nothing is forced where no\n     scrollbar is needed). Override via --kai-color-scrollbar-thumb(-hover). */\n  --color-scrollbar-thumb: var(--kai-color-scrollbar-thumb, hsl(240 5% 80%));\n  --color-scrollbar-thumb-hover: var(--kai-color-scrollbar-thumb-hover, hsl(240 4% 64%));\n  --color-sidebar: var(--kai-color-sidebar, hsl(0 0% 100%));\n\n  /* Inline `code` accent. Blue text on a translucent blue chip. */\n  --color-code-foreground: var(--kai-color-code-foreground, hsl(224.3 76.3% 48%));\n\n  /* Tool/status chip hues. Each chip is hue text over a 15% translucent fill of\n     the SAME hue (set in tool.tsx). The bare hue is too light to reach WCAG AA\n     (4.5:1) on the faint fill in LIGHT mode, so the light values are darkened;\n     dark mode keeps brighter hues for AA on the dark fill. Override via\n     --kai-color-tool-* to retheme. */\n  --color-tool-blue: var(--kai-color-tool-blue, hsl(217 91% 38%));\n  --color-tool-amber: var(--kai-color-tool-amber, hsl(38 92% 28%));\n  --color-tool-green: var(--kai-color-tool-green, hsl(142 71% 26%));\n  --color-tool-red: var(--kai-color-tool-red, hsl(0 72% 42%));\n\n  --radius: var(--kai-radius, 0.6rem);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n\n  /* Typography scale — ONE scale for the whole kit. Each semantic name\n     (text-micro / text-caption / text-meta / text-compact / text-body /\n     text-title / text-lg)\n     resolves through a namespaced --kai-text-* token, so overriding that token\n     on :root restyles the kit globally — it pierces the Shadow DOM via the\n     var() fallback, exactly like the --kai-color-* tokens. The bare --text-*\n     names stay internal so a host's own --text-* can't collide.\n\n     Tailwind's OWN scale is re-pointed at the same tokens: in Tailwind v4 the\n     `text-xs` / `text-sm` / `text-base` / `text-lg` utilities are generated FROM\n     --text-xs/sm/base/lg in this very @theme block, so aliasing them makes\n     text-xs ≡ text-meta, text-sm ≡ text-body, text-base ≡ text-title and\n     text-lg ≡ text-lg. That matters because the vast majority of the kit's call\n     sites spell the Tailwind name; without the alias the --kai-text-* knobs\n     reached ~12% of them and the \"globally\" promise in the theming guide was\n     false. Defaults are byte-identical to stock Tailwind, so nothing moves\n     until a consumer actually sets a --kai-text-* token — including in a\n     consumer's own Tailwind build that imports this file, which is the point:\n     one scale everywhere, kit and app moving together.\n\n     Line-heights are UNITLESS RATIOS (Tailwind's own), never fixed rem. A fixed\n     leading does not scale: --kai-text-body: 1.25rem under the old 1.45rem\n     leading gave 20px text on 23.2px leading — near solid-set — which made the\n     themable token unsafe to actually theme.\n     (Message/markdown reading size also scales with the `proseSize` prop; these\n     tokens cover the fixed chrome & controls.) */\n  --text-micro: var(--kai-text-micro, 0.625rem);      --text-micro--line-height: calc(0.875 / 0.625);   /* 10px — badges, pills, uppercase eyebrows */\n  --text-caption: var(--kai-text-caption, 0.6875rem); --text-caption--line-height: calc(1 / 0.6875);    /* 11px — micro labels, sub-counts, xs code */\n  --text-meta: var(--kai-text-meta, 0.75rem);         --text-meta--line-height: calc(1 / 0.75);         /* 12px — controls, toggles, switchers, captions */\n  --text-xs: var(--kai-text-meta, 0.75rem);           --text-xs--line-height: calc(1 / 0.75);           /* ≡ text-meta */\n  --text-compact: var(--kai-text-compact, 0.8125rem); --text-compact--line-height: calc(1.21875 / 0.8125); /* 13px — dense chrome & code: a notch below body */\n  --text-body: var(--kai-text-body, 0.875rem);        --text-body--line-height: calc(1.25 / 0.875);     /* 14px — primary reading text */\n  --text-sm: var(--kai-text-body, 0.875rem);          --text-sm--line-height: calc(1.25 / 0.875);       /* ≡ text-body */\n  --text-title: var(--kai-text-title, 1rem);          --text-title--line-height: calc(1.5 / 1);         /* 16px — emphasis / headers */\n  --text-base: var(--kai-text-title, 1rem);           --text-base--line-height: calc(1.5 / 1);          /* ≡ text-title */\n  --text-lg: var(--kai-text-lg, 1.125rem);            --text-lg--line-height: calc(1.75 / 1.125);       /* 18px — section headings, lg prose */\n\n  @keyframes typing { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-2px); opacity: 1 } }\n  @keyframes loading-dots { 0%,100% { opacity: 0 } 50% { opacity: 1 } }\n  @keyframes wave { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.6) } }\n  @keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }\n  @keyframes text-blink { 0%,100% { color: var(--color-primary) } 50% { color: var(--color-muted-foreground) } }\n  @keyframes bounce-dots { 0%,100% { transform: scale(.8); opacity: .5 } 50% { transform: scale(1.2); opacity: 1 } }\n  @keyframes thin-pulse { 0%,100% { transform: scale(.95); opacity: .8 } 50% { transform: scale(1.05); opacity: .4 } }\n  @keyframes pulse-dot { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.5); opacity: 1 } }\n  @keyframes shimmer-text { 0% { background-position: 150% center } 100% { background-position: -150% center } }\n  @keyframes wave-bars { 0%,100% { transform: scaleY(1); opacity: .5 } 50% { transform: scaleY(.6); opacity: 1 } }\n  @keyframes shimmer { 0% { background-position: 200% 50% } 100% { background-position: -200% 50% } }\n  @keyframes spinner-fade { 0% { opacity: 0 } 100% { opacity: 1 } }\n  @keyframes collapsible-down { from { height: 0; opacity: 0 } to { height: var(--kb-collapsible-content-height); opacity: 1 } }\n  @keyframes collapsible-up { from { height: var(--kb-collapsible-content-height); opacity: 1 } to { height: 0; opacity: 0 } }\n}\n\n.dark {\n  --color-background: var(--kai-color-background, hsl(50 2% 9%));\n  --color-foreground: var(--kai-color-foreground, hsl(0 0% 98%));\n  --color-card: var(--kai-color-card, hsl(45 4% 12%));\n  --color-card-foreground: var(--kai-color-card-foreground, hsl(0 0% 98%));\n  --color-popover: var(--kai-color-popover, hsl(45 4% 12%));\n  --color-popover-foreground: var(--kai-color-popover-foreground, hsl(0 0% 98%));\n  --color-primary: var(--kai-color-primary, hsl(0 0% 98%));\n  --color-primary-foreground: var(--kai-color-primary-foreground, hsl(45 4% 11%));\n  --color-secondary: var(--kai-color-secondary, hsl(45 4% 17%));\n  --color-secondary-foreground: var(--kai-color-secondary-foreground, hsl(0 0% 98%));\n  --color-muted: var(--kai-color-muted, hsl(45 4% 17%));\n  --color-muted-foreground: var(--kai-color-muted-foreground, hsl(45 4% 64%));\n  /* Re-declared in the dark scope so the color-mix recomputes with the DARK\n     muted/background (a derived token is computed where it's declared, not where\n     it's used — see the light --color-surface for the full note). */\n  --color-surface: var(--kai-color-surface, color-mix(in srgb, var(--color-muted) 40%, var(--color-background)));\n  --color-surface-strong: var(--kai-color-surface-strong, color-mix(in srgb, var(--color-muted) 60%, var(--color-background)));\n  /* Sunken: in dark a LOWER muted% is darker (blends toward the dark background). */\n  --color-surface-sunken: var(--kai-color-surface-sunken, color-mix(in srgb, var(--color-muted) 18%, var(--color-background)));\n  --color-accent: var(--kai-color-accent, hsl(45 4% 17%));\n  --color-accent-foreground: var(--kai-color-accent-foreground, hsl(0 0% 98%));\n  --color-destructive: var(--kai-color-destructive, hsl(0 62.8% 30.6%));\n  --color-destructive-foreground: var(--kai-color-destructive-foreground, hsl(0 0% 98%));\n  /* Semantic status colors - dark mode flips to the brighter tool-* dark hues\n     (matching the chip values) carried over a near-black foreground, so the color\n     both reads as text on a dark soft tint AND backs a legible foreground. See\n     the light @theme note. */\n  --color-success: var(--kai-color-success, hsl(142 71% 45%));\n  --color-success-foreground: var(--kai-color-success-foreground, hsl(45 4% 11%));\n  --color-warning: var(--kai-color-warning, hsl(38 92% 50%));\n  --color-warning-foreground: var(--kai-color-warning-foreground, hsl(45 4% 11%));\n  --color-info: var(--kai-color-info, hsl(217 91% 70%));\n  --color-info-foreground: var(--kai-color-info-foreground, hsl(45 4% 11%));\n  /* Soft status surfaces + interaction states - re-declared so each color-mix\n     recomputes with the DARK hues/background (a derived token resolves where it's\n     declared; see the light block for the full note). */\n  --color-success-soft: var(--kai-color-success-soft, color-mix(in oklab, var(--color-success) 14%, var(--color-background)));\n  --color-warning-soft: var(--kai-color-warning-soft, color-mix(in oklab, var(--color-warning) 14%, var(--color-background)));\n  --color-info-soft: var(--kai-color-info-soft, color-mix(in oklab, var(--color-info) 14%, var(--color-background)));\n  --color-destructive-soft: var(--kai-color-destructive-soft, color-mix(in oklab, var(--color-destructive) 14%, var(--color-background)));\n  --color-hover: var(--kai-color-hover, color-mix(in oklab, var(--color-muted) 60%, var(--color-background)));\n  --color-selected: var(--kai-color-selected, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)));\n  /* Unread indicator — dark. Same value as light (see the light block for the\n     full contrast note): one vivid red independently clears 3:1 against both\n     modes' real surfaces, so there is nothing to flip here. Still redeclared\n     for override symmetry with every other semantic color in this file. */\n  --color-unread: var(--kai-color-unread, hsl(0 84% 60%));\n  /* Marked text — dark. A deep warm amber rather than the light yellow: a pale\n     highlighter on a near-black field would blow out and force the text to flip\n     colour. See the light block for the full note. */\n  --color-highlight: var(--kai-color-highlight, hsl(40 75% 26%));\n  /* Selected text — dark. A deep blue rather than the light one, for the same\n     reason the mark darkens. See the light block for the full note. */\n  --color-selection: var(--kai-color-selection, hsl(217 60% 32%));\n  --color-selection-foreground: var(--kai-color-selection-foreground, hsl(0 0% 98%));\n  --color-border: var(--kai-color-border, hsl(45 4% 17%));\n  /* Control boundary — see the light block. Lifted to clear 3:1 (SC 1.4.11)\n     against the dark background and card surfaces. */\n  --color-input: var(--kai-color-input, hsl(45 4% 48%));\n  --color-ring: var(--kai-color-ring, hsl(217 91% 68%));\n  --color-scrollbar-thumb: var(--kai-color-scrollbar-thumb, hsl(45 3% 30%));\n  --color-scrollbar-thumb-hover: var(--kai-color-scrollbar-thumb-hover, hsl(45 3% 42%));\n  --color-sidebar: var(--kai-color-sidebar, hsl(50 2% 7%));\n  --color-code-foreground: var(--kai-color-code-foreground, hsl(213 94% 78%));\n\n  /* Tool/status chip hues — dark mode. Brighter hues reach AA on the dark fill. */\n  --color-tool-blue: var(--kai-color-tool-blue, hsl(217 91% 70%));\n  --color-tool-amber: var(--kai-color-tool-amber, hsl(38 92% 50%));\n  --color-tool-green: var(--kai-color-tool-green, hsl(142 71% 45%));\n  --color-tool-red: var(--kai-color-tool-red, hsl(0 84% 70%));\n}\n\n/* Self-contained markdown styling — replaces the typography plugin's `prose`.\n   Keyed on --color-* tokens so it themes with the rest of the kit. */\n.chat-markdown { color: var(--color-foreground); line-height: 1.6; }\n.chat-markdown > div:first-child > :first-child { margin-top: 0; }\n.chat-markdown > div:last-child > :last-child { margin-bottom: 0; }\n.chat-markdown p { margin: 0 0 0.75em; }\n.chat-markdown p:last-child { margin-bottom: 0; }\n.chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4 {\n  margin: 1.2em 0 0.5em; font-weight: 600; line-height: 1.3; color: var(--color-foreground);\n}\n.chat-markdown h1 { font-size: 1.4em; } .chat-markdown h2 { font-size: 1.25em; }\n.chat-markdown h3 { font-size: 1.1em; } .chat-markdown h4 { font-size: 1em; }\n.chat-markdown ul, .chat-markdown ol { margin: 0 0 0.75em; padding-left: 1.4em; }\n.chat-markdown li { margin: 0.2em 0; }\n.chat-markdown ul { list-style: disc; } .chat-markdown ol { list-style: decimal; }\n.chat-markdown a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }\n.chat-markdown strong { font-weight: 600; color: var(--color-foreground); }\n.chat-markdown em { font-style: italic; }\n.chat-markdown blockquote {\n  margin: 0 0 0.75em; padding-left: 0.9em; border-left: 2px solid var(--color-border);\n  color: var(--color-muted-foreground);\n}\n.chat-markdown hr { margin: 1em 0; border: 0; border-top: 1px solid var(--color-border); }\n.chat-markdown code:not(pre code) {\n  background: color-mix(in oklab, var(--color-code-foreground) 15%, transparent);\n  color: var(--color-code-foreground);\n  border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.875em;\n  font-family: var(--kai-font-code, ui-monospace, \"SF Mono\", Menlo, monospace);\n}\n.chat-markdown table { width: 100%; border-collapse: collapse; margin: 0 0 0.75em; font-size: 0.9em; }\n.chat-markdown th, .chat-markdown td { border: 1px solid var(--color-border); padding: 0.4em 0.6em; text-align: left; }\n.chat-markdown th { font-weight: 600; background: color-mix(in oklab, var(--color-muted-foreground) 8%, transparent); }\n\n/* Themeable elevation. The kit is mostly flat (borders), but a few surfaces lift\n   off the page — popovers, dropdowns, hover cards, cards. The shadow COLOR is a\n   token (--kai-shadow-color, default near-black); set it transparent for a fully\n   flat look, or tint it to match a theme. Defined here (not as a Tailwind shadow\n   utility) so the color stays overridable and works in both the web-component and\n   SolidJS layers. */\n.kai-elevation {\n  box-shadow:\n    0 4px 12px -2px color-mix(in oklab, var(--kai-shadow-color, oklch(0 0 0)) 14%, transparent),\n    0 2px 6px -2px color-mix(in oklab, var(--kai-shadow-color, oklch(0 0 0)) 10%, transparent);\n}\n.kai-elevation-sm {\n  box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--kai-shadow-color, oklch(0 0 0)) 8%, transparent);\n}\n\n/* Cross-platform thin scrollbar utility (Firefox + WebKit). Used by ScrollArea\n   and any scroll region in the SolidJS-component build (web components also get\n   this globally inside their shadow root — see src/elements/styles.css). */\n.scrollbar-thin {\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-scrollbar-thumb) transparent;\n}\n.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }\n.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }\n.scrollbar-thin::-webkit-scrollbar-thumb {\n  background-color: var(--color-scrollbar-thumb);\n  border-radius: 9999px;\n  border: 2px solid transparent;\n  background-clip: padding-box;\n}\n.scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }\n.scrollbar-thin::-webkit-scrollbar-corner { background: transparent; }\n\n/* Surface utilities — `bg-surface` / `bg-surface-strong` paint the opaque,\n   theme-derived surface tokens (see --color-surface above). Defined explicitly\n   because a color-mix-valued @theme token does NOT emit a bare `bg-` utility on\n   its own (only opacity variants). Use these for panels that sit OVER content\n   instead of `bg-muted/NN`. */\n@utility bg-surface {\n  background-color: var(--color-surface);\n}\n@utility bg-surface-strong {\n  background-color: var(--color-surface-strong);\n}\n@utility bg-surface-sunken {\n  background-color: var(--color-surface-sunken);\n}\n\n/* Soft-status + interaction-state utilities. Same reason as bg-surface above: a\n   color-mix-valued @theme token does NOT emit a bare `bg-` utility on its own, so\n   bg-success-soft / bg-warning-soft / bg-info-soft / bg-destructive-soft and\n   bg-hover / bg-selected are declared here. (The SOLID tokens - success / warning\n   / info + their -foreground - are plain hsl values, so bg-success / text-success\n   etc. ARE auto-generated by @theme and need no explicit utility.) */\n@utility bg-success-soft {\n  background-color: var(--color-success-soft);\n}\n@utility bg-warning-soft {\n  background-color: var(--color-warning-soft);\n}\n@utility bg-info-soft {\n  background-color: var(--color-info-soft);\n}\n@utility bg-destructive-soft {\n  background-color: var(--color-destructive-soft);\n}\n@utility bg-hover {\n  background-color: var(--color-hover);\n}\n@utility bg-selected {\n  background-color: var(--color-selected);\n}\n";
+const themeCss = "/* @kitn.ai/ui design system — import after `@import \"tailwindcss\"`.\n   Defines the shadcn-style (--color-*) tokens, component keyframes, animation\n   utilities, and the .chat-markdown styles. Contains NO global base/reset rules,\n   so importing it restyles nothing on its own — a host opts in via the kit's\n   components + classes. Rebrand by overriding the --color-* values (optionally\n   scoped to a subtree).\n   NOTE: This file is Tailwind-v4 source (requires tailwindcss as a peer). For\n   bundler-based apps that don't use Tailwind, import @kitn.ai/ui/theme.tokens.css\n   instead — it is plain compiled CSS with no toolchain requirements.\n\n   THIS FILE IS MERGED INTO THE CONSUMER'S TAILWIND BUILD when they @import it,\n   so everything at global scope here lands in THEIR namespace. What it changes\n   for them (documented in apps/docs/.../guides/theming.mdx, keep the two in sync):\n     - `@custom-variant dark` below switches their `dark:` utilities from\n       prefers-color-scheme to the `.dark` class.\n     - the `--color-*` names merge into their @theme (last import wins).\n     - `--radius-sm/md/lg/xl` re-point Tailwind's stock radius scale at --radius.\n     - `--text-xs/sm/base/lg` are aliased onto the kit's type scale (defaults\n       equal stock Tailwind, so nothing moves until a --kai-text-* token is set).\n   Everything else global carries a `kai-` prefix so it cannot clash by name:\n   every @keyframes is `kai-<name>`, the scrollbar utility is `.kai-scrollbar-thin`.\n   The one unprefixed global class is `.chat-markdown` (public; renaming it is a\n   breaking change). tests/elements/theme-globals.test.ts pins the prefix rule\n   and that every animation reference in src/ resolves to a keyframe here. */\n\n@custom-variant dark (&:is(.dark *));\n\n@theme {\n  --color-background: var(--kai-color-background, hsl(0 0% 100%));\n  --color-foreground: var(--kai-color-foreground, hsl(240 10% 3.9%));\n  --color-card: var(--kai-color-card, hsl(0 0% 100%));\n  --color-card-foreground: var(--kai-color-card-foreground, hsl(240 10% 3.9%));\n  --color-popover: var(--kai-color-popover, hsl(0 0% 100%));\n  --color-popover-foreground: var(--kai-color-popover-foreground, hsl(240 10% 3.9%));\n  --color-primary: var(--kai-color-primary, hsl(240 5.9% 10%));\n  --color-primary-foreground: var(--kai-color-primary-foreground, hsl(0 0% 98%));\n  --color-secondary: var(--kai-color-secondary, hsl(240 4.8% 95.9%));\n  --color-secondary-foreground: var(--kai-color-secondary-foreground, hsl(240 5.9% 10%));\n  --color-muted: var(--kai-color-muted, hsl(240 4.8% 95.9%));\n  --color-muted-foreground: var(--kai-color-muted-foreground, hsl(240 3.8% 43%));\n  /* Subtle SURFACE — an opaque \"muted panel\" for things that sit OVER content\n     (the prompt input, message bubbles, artifact/card headers, chips). CALCULATED\n     from existing tokens — `--color-muted` blended 40% onto `--color-background`\n     — so it tracks the theme (incl. dark) automatically and needs no hand-picked\n     value. SOLID (no alpha), so nothing behind it bleeds through. This replaces\n     ad-hoc `bg-muted/40` surfaces. Retint via the --kai-color-surface knob (or a\n     bare value); --color-surface-strong is the stronger step (hover/raised) and\n     --color-surface-sunken is recessed BELOW the base surface (wells, or a banner\n     that sits behind a card). Sunken is theme-specific: \"darker than the card\"\n     means a LOWER muted% in dark but a HIGHER one in light, so the two scopes\n     can't share a number — see the .dark block. */\n  --color-surface: var(--kai-color-surface, color-mix(in srgb, var(--color-muted) 40%, var(--color-background)));\n  --color-surface-strong: var(--kai-color-surface-strong, color-mix(in srgb, var(--color-muted) 60%, var(--color-background)));\n  --color-surface-sunken: var(--kai-color-surface-sunken, color-mix(in srgb, var(--color-muted) 85%, var(--color-background)));\n  --color-accent: var(--kai-color-accent, hsl(240 4.8% 95.9%));\n  --color-accent-foreground: var(--kai-color-accent-foreground, hsl(240 5.9% 10%));\n  --color-destructive: var(--kai-color-destructive, hsl(0 72% 45%));\n  --color-destructive-foreground: var(--kai-color-destructive-foreground, hsl(0 0% 98%));\n  /* Semantic status colors - solid fills with a legible foreground, matched to\n     the kit's tool-green / -amber / -blue hues so they read on-brand. Use\n     bg-success / bg-warning / bg-info with the matching -foreground for badges,\n     banners, and buttons; or text-success / -warning / -info on a soft tint\n     (below). destructive (above) is the danger/error member of the same family.\n     Light uses darker hues so the color carries a light foreground AND stays\n     legible as text on a pale tint; dark (see .dark) flips to brighter hues over\n     a near-black foreground. Override via --kai-color-success / -warning / -info\n     (+ -foreground). */\n  --color-success: var(--kai-color-success, hsl(142 71% 30%));\n  --color-success-foreground: var(--kai-color-success-foreground, hsl(0 0% 98%));\n  --color-warning: var(--kai-color-warning, hsl(38 92% 30%));\n  --color-warning-foreground: var(--kai-color-warning-foreground, hsl(0 0% 98%));\n  --color-info: var(--kai-color-info, hsl(217 91% 42%));\n  --color-info-foreground: var(--kai-color-info-foreground, hsl(0 0% 98%));\n  /* Soft tinted status surfaces - OPAQUE, theme-tracking fills derived as ~14% of\n     the status hue blended onto the background. Use these for subtle callouts /\n     banners instead of an eyeballed bg-success/10; pair with text-success /\n     -warning / -info / -destructive. Derived, so declared in BOTH light and dark\n     (a color-mix resolves where it's declared - see the surface tokens above). A\n     bare bg- utility for a color-mix token is added at the bottom (see bg-surface). */\n  --color-success-soft: var(--kai-color-success-soft, color-mix(in oklab, var(--color-success) 14%, var(--color-background)));\n  --color-warning-soft: var(--kai-color-warning-soft, color-mix(in oklab, var(--color-warning) 14%, var(--color-background)));\n  --color-info-soft: var(--kai-color-info-soft, color-mix(in oklab, var(--color-info) 14%, var(--color-background)));\n  --color-destructive-soft: var(--kai-color-destructive-soft, color-mix(in oklab, var(--color-destructive) 14%, var(--color-background)));\n  /* Interaction-state backgrounds - opaque, theme-tracking fills for row/control\n     states so consumers stop eyeballing /10 opacities. --color-hover is a subtle\n     neutral (a little --color-muted on the background); --color-selected is a\n     faint --color-primary tint so a selected row tracks the brand. Use bg-hover /\n     bg-selected. Derived, so declared in BOTH light and dark; bare bg- utilities\n     added at the bottom. */\n  --color-hover: var(--kai-color-hover, color-mix(in oklab, var(--color-muted) 60%, var(--color-background)));\n  --color-selected: var(--kai-color-selected, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)));\n  /* UNREAD indicator — a dedicated token (owner ruling, 2026-08-26), not a\n     reuse of --color-destructive: unread is notification semantics, not\n     error, so a consumer re-theming \"danger\" red must not also move every\n     unread dot. Used identically by all three places an unread conversation\n     surfaces: the list-row trailing dot (ConversationPanel), the header\n     toggle's badge (ChatThread), and Dock's own closed-launcher badge.\n     A vivid \"messenger red\" (Tailwind red-500 territory, the Intercom/iOS\n     badge convention) rather than the darker --color-destructive hue: the\n     first pass at this token picked a color that read as legible-on-paper\n     but visually flat/dark next to the launcher's near-black ring. This one\n     value is used in BOTH light and dark (no .dark override below) because\n     it independently clears 3:1 (WCAG 1.4.11, non-text) against every real\n     surface an unread dot sits on in EITHER mode: light row/card background\n     (white) 3.78:1, light Dock-launcher ring (--color-primary, near-black)\n     4.68:1, dark row/card background (near-black) 4.73–4.35:1, dark\n     Dock-launcher ring (--color-primary, near-white) 3.62:1. (Measured via\n     the WCAG relative-luminance formula against this file's own light/dark\n     --color-background/-card/-primary values — see\n     .superpowers/sdd/2026-08-26-conversations/rework-report.md Round 4 for\n     the worked numbers.) Override via --kai-color-unread; a construct author\n     can also set it per-widget through `theme.unreadColor` (construct\n     vocabulary — see agent-tooling/construct/schema.ts). */\n  --color-unread: var(--kai-color-unread, hsl(0 84% 60%));\n  /* MARKED text — the fill behind a keyword the app has flagged (the composer's\n     `highlights` rules, decorated through the CSS Custom Highlight API). This is\n     `<mark>`, not a selection and not a status: a warm yellow, the convention\n     every browser already ships for <mark> and every reader already reads as\n     \"someone marked this\". Deliberately NOT derived from --color-primary — that\n     token is a NEUTRAL near-black in light and near-white in dark, so any tint of\n     it is grey, which is why the highlight used to be invisible. Also not blue\n     (the browser's own ::selection is blue — a highlight must not read as a\n     selection), not red (error) and not the skill/agent pill hues (blue/violet).\n     OPAQUE, so it composites predictably over whichever field it lands on.\n     Override via --kai-color-highlight. Light: near-black text over it is 15.6:1;\n     dark: near-white text over it is 6.7:1 — both well clear of WCAG AA. */\n  --color-highlight: var(--kai-color-highlight, hsl(45 96% 78%));\n  /* SELECTED text — the kit's own ::selection fill, applied inside every kai-*\n     shadow root (see src/elements/styles.css for the scoping rationale). The kit\n     owns this because leaving it to the UA meant the browser's blue outranked the\n     kit's own deliberate emphasis: a marked keyword was LESS prominent than an\n     incidental drag-select. Stays in the cool/blue family the UA trained everyone\n     to read as \"selected\", so it can never be confused with the warm --color-highlight\n     mark above; OPAQUE, so a selection over a mark composites cleanly (selection\n     paints on top of a custom highlight) instead of muddying into a third colour.\n     The FOREGROUND is set too, and that is not cosmetic: without it the selected\n     glyph keeps its own colour, and the kit's coloured text — muted text (3.8:1),\n     the skill/agent pill hues (3.6:1 / 4.0:1), inline code (4.7:1) — lands at or\n     under WCAG AA on this fill. Forcing the foreground token makes the guarantee\n     hold for every glyph regardless of what colour it had. Light 13.99:1,\n     dark 8.87:1. Override via --kai-color-selection(-foreground). */\n  --color-selection: var(--kai-color-selection, hsl(213 94% 87%));\n  --color-selection-foreground: var(--kai-color-selection-foreground, hsl(240 10% 3.9%));\n  --color-border: var(--kai-color-border, hsl(240 5.9% 90%));\n  /* CONTROL boundary — the visible edge of an interactive form control (text\n     input, textarea, select, the radio/checkbox ring). WCAG 2.1 SC 1.4.11\n     Non-text Contrast requires >=3:1 against the adjacent surface for exactly\n     this: a control whose boundary you cannot see is not perceivable. That is\n     why this is NOT --color-border: a divider or a card outline is decorative\n     and may sit below 3:1, a control's edge may not. Do NOT use border-input\n     for list wrappers or panel outlines — use border-border there.\n     Contrast is the requirement; a thicker border does not satisfy 1.4.11. */\n  --color-input: var(--kai-color-input, hsl(240 5% 53%));\n  /* Focus ring — a deliberate blue (not a neutral) so keyboard focus is always\n     obvious and on-brand in both modes. Light uses a strong blue; dark uses a\n     brighter one for contrast on dark surfaces. Both clear WCAG 2.1 non-text\n     contrast (≥3:1) against the kit's backgrounds. Override via --kai-color-ring. */\n  --color-ring: var(--kai-color-ring, hsl(217 91% 53%));\n  /* Custom scrollbars — thin, rounded, subtle; thumb strengthens on hover. A\n     consistent cross-platform look (the kit styles its OWN scroll regions inside\n     the shadow root; the track stays transparent so nothing is forced where no\n     scrollbar is needed). Override via --kai-color-scrollbar-thumb(-hover). */\n  --color-scrollbar-thumb: var(--kai-color-scrollbar-thumb, hsl(240 5% 80%));\n  --color-scrollbar-thumb-hover: var(--kai-color-scrollbar-thumb-hover, hsl(240 4% 64%));\n  --color-sidebar: var(--kai-color-sidebar, hsl(0 0% 100%));\n\n  /* Inline `code` accent. Blue text on a translucent blue chip. */\n  --color-code-foreground: var(--kai-color-code-foreground, hsl(224.3 76.3% 48%));\n\n  /* Tool/status chip hues. Each chip is hue text over a 15% translucent fill of\n     the SAME hue (set in tool.tsx). The bare hue is too light to reach WCAG AA\n     (4.5:1) on the faint fill in LIGHT mode, so the light values are darkened;\n     dark mode keeps brighter hues for AA on the dark fill. Override via\n     --kai-color-tool-* to retheme. */\n  --color-tool-blue: var(--kai-color-tool-blue, hsl(217 91% 38%));\n  --color-tool-amber: var(--kai-color-tool-amber, hsl(38 92% 28%));\n  --color-tool-green: var(--kai-color-tool-green, hsl(142 71% 26%));\n  --color-tool-red: var(--kai-color-tool-red, hsl(0 72% 42%));\n\n  --radius: var(--kai-radius, 0.6rem);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n\n  /* Typography scale — ONE scale for the whole kit. Each semantic name\n     (text-micro / text-caption / text-meta / text-compact / text-body /\n     text-title / text-lg)\n     resolves through a namespaced --kai-text-* token, so overriding that token\n     on :root restyles the kit globally — it pierces the Shadow DOM via the\n     var() fallback, exactly like the --kai-color-* tokens. The bare --text-*\n     names stay internal so a host's own --text-* can't collide.\n\n     Tailwind's OWN scale is re-pointed at the same tokens: in Tailwind v4 the\n     `text-xs` / `text-sm` / `text-base` / `text-lg` utilities are generated FROM\n     --text-xs/sm/base/lg in this very @theme block, so aliasing them makes\n     text-xs ≡ text-meta, text-sm ≡ text-body, text-base ≡ text-title and\n     text-lg ≡ text-lg. That matters because the vast majority of the kit's call\n     sites spell the Tailwind name; without the alias the --kai-text-* knobs\n     reached ~12% of them and the \"globally\" promise in the theming guide was\n     false. Defaults are byte-identical to stock Tailwind, so nothing moves\n     until a consumer actually sets a --kai-text-* token — including in a\n     consumer's own Tailwind build that imports this file, which is the point:\n     one scale everywhere, kit and app moving together.\n\n     Line-heights are UNITLESS RATIOS (Tailwind's own), never fixed rem. A fixed\n     leading does not scale: --kai-text-body: 1.25rem under the old 1.45rem\n     leading gave 20px text on 23.2px leading — near solid-set — which made the\n     themable token unsafe to actually theme.\n     (Message/markdown reading size also scales with the `proseSize` prop; these\n     tokens cover the fixed chrome & controls.) */\n  --text-micro: var(--kai-text-micro, 0.625rem);      --text-micro--line-height: calc(0.875 / 0.625);   /* 10px — badges, pills, uppercase eyebrows */\n  --text-caption: var(--kai-text-caption, 0.6875rem); --text-caption--line-height: calc(1 / 0.6875);    /* 11px — micro labels, sub-counts, xs code */\n  --text-meta: var(--kai-text-meta, 0.75rem);         --text-meta--line-height: calc(1 / 0.75);         /* 12px — controls, toggles, switchers, captions */\n  --text-xs: var(--kai-text-meta, 0.75rem);           --text-xs--line-height: calc(1 / 0.75);           /* ≡ text-meta */\n  --text-compact: var(--kai-text-compact, 0.8125rem); --text-compact--line-height: calc(1.21875 / 0.8125); /* 13px — dense chrome & code: a notch below body */\n  --text-body: var(--kai-text-body, 0.875rem);        --text-body--line-height: calc(1.25 / 0.875);     /* 14px — primary reading text */\n  --text-sm: var(--kai-text-body, 0.875rem);          --text-sm--line-height: calc(1.25 / 0.875);       /* ≡ text-body */\n  --text-title: var(--kai-text-title, 1rem);          --text-title--line-height: calc(1.5 / 1);         /* 16px — emphasis / headers */\n  --text-base: var(--kai-text-title, 1rem);           --text-base--line-height: calc(1.5 / 1);          /* ≡ text-title */\n  --text-lg: var(--kai-text-lg, 1.125rem);            --text-lg--line-height: calc(1.75 / 1.125);       /* 18px — section headings, lg prose */\n\n  @keyframes kai-typing { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-2px); opacity: 1 } }\n  @keyframes kai-loading-dots { 0%,100% { opacity: 0 } 50% { opacity: 1 } }\n  @keyframes kai-wave { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.6) } }\n  @keyframes kai-blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }\n  @keyframes kai-text-blink { 0%,100% { color: var(--color-primary) } 50% { color: var(--color-muted-foreground) } }\n  @keyframes kai-bounce-dots { 0%,100% { transform: scale(.8); opacity: .5 } 50% { transform: scale(1.2); opacity: 1 } }\n  @keyframes kai-thin-pulse { 0%,100% { transform: scale(.95); opacity: .8 } 50% { transform: scale(1.05); opacity: .4 } }\n  @keyframes kai-pulse-dot { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.5); opacity: 1 } }\n  @keyframes kai-shimmer-text { 0% { background-position: 150% center } 100% { background-position: -150% center } }\n  @keyframes kai-wave-bars { 0%,100% { transform: scaleY(1); opacity: .5 } 50% { transform: scaleY(.6); opacity: 1 } }\n  @keyframes kai-shimmer { 0% { background-position: 200% 50% } 100% { background-position: -200% 50% } }\n  @keyframes kai-spinner-fade { 0% { opacity: 0 } 100% { opacity: 1 } }\n}\n\n.dark {\n  --color-background: var(--kai-color-background, hsl(50 2% 9%));\n  --color-foreground: var(--kai-color-foreground, hsl(0 0% 98%));\n  --color-card: var(--kai-color-card, hsl(45 4% 12%));\n  --color-card-foreground: var(--kai-color-card-foreground, hsl(0 0% 98%));\n  --color-popover: var(--kai-color-popover, hsl(45 4% 12%));\n  --color-popover-foreground: var(--kai-color-popover-foreground, hsl(0 0% 98%));\n  --color-primary: var(--kai-color-primary, hsl(0 0% 98%));\n  --color-primary-foreground: var(--kai-color-primary-foreground, hsl(45 4% 11%));\n  --color-secondary: var(--kai-color-secondary, hsl(45 4% 17%));\n  --color-secondary-foreground: var(--kai-color-secondary-foreground, hsl(0 0% 98%));\n  --color-muted: var(--kai-color-muted, hsl(45 4% 17%));\n  --color-muted-foreground: var(--kai-color-muted-foreground, hsl(45 4% 64%));\n  /* Re-declared in the dark scope so the color-mix recomputes with the DARK\n     muted/background (a derived token is computed where it's declared, not where\n     it's used — see the light --color-surface for the full note). */\n  --color-surface: var(--kai-color-surface, color-mix(in srgb, var(--color-muted) 40%, var(--color-background)));\n  --color-surface-strong: var(--kai-color-surface-strong, color-mix(in srgb, var(--color-muted) 60%, var(--color-background)));\n  /* Sunken: in dark a LOWER muted% is darker (blends toward the dark background). */\n  --color-surface-sunken: var(--kai-color-surface-sunken, color-mix(in srgb, var(--color-muted) 18%, var(--color-background)));\n  --color-accent: var(--kai-color-accent, hsl(45 4% 17%));\n  --color-accent-foreground: var(--kai-color-accent-foreground, hsl(0 0% 98%));\n  --color-destructive: var(--kai-color-destructive, hsl(0 62.8% 30.6%));\n  --color-destructive-foreground: var(--kai-color-destructive-foreground, hsl(0 0% 98%));\n  /* Semantic status colors - dark mode flips to the brighter tool-* dark hues\n     (matching the chip values) carried over a near-black foreground, so the color\n     both reads as text on a dark soft tint AND backs a legible foreground. See\n     the light @theme note. */\n  --color-success: var(--kai-color-success, hsl(142 71% 45%));\n  --color-success-foreground: var(--kai-color-success-foreground, hsl(45 4% 11%));\n  --color-warning: var(--kai-color-warning, hsl(38 92% 50%));\n  --color-warning-foreground: var(--kai-color-warning-foreground, hsl(45 4% 11%));\n  --color-info: var(--kai-color-info, hsl(217 91% 70%));\n  --color-info-foreground: var(--kai-color-info-foreground, hsl(45 4% 11%));\n  /* Soft status surfaces + interaction states - re-declared so each color-mix\n     recomputes with the DARK hues/background (a derived token resolves where it's\n     declared; see the light block for the full note). */\n  --color-success-soft: var(--kai-color-success-soft, color-mix(in oklab, var(--color-success) 14%, var(--color-background)));\n  --color-warning-soft: var(--kai-color-warning-soft, color-mix(in oklab, var(--color-warning) 14%, var(--color-background)));\n  --color-info-soft: var(--kai-color-info-soft, color-mix(in oklab, var(--color-info) 14%, var(--color-background)));\n  --color-destructive-soft: var(--kai-color-destructive-soft, color-mix(in oklab, var(--color-destructive) 14%, var(--color-background)));\n  --color-hover: var(--kai-color-hover, color-mix(in oklab, var(--color-muted) 60%, var(--color-background)));\n  --color-selected: var(--kai-color-selected, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)));\n  /* Unread indicator — dark. Same value as light (see the light block for the\n     full contrast note): one vivid red independently clears 3:1 against both\n     modes' real surfaces, so there is nothing to flip here. Still redeclared\n     for override symmetry with every other semantic color in this file. */\n  --color-unread: var(--kai-color-unread, hsl(0 84% 60%));\n  /* Marked text — dark. A deep warm amber rather than the light yellow: a pale\n     highlighter on a near-black field would blow out and force the text to flip\n     colour. See the light block for the full note. */\n  --color-highlight: var(--kai-color-highlight, hsl(40 75% 26%));\n  /* Selected text — dark. A deep blue rather than the light one, for the same\n     reason the mark darkens. See the light block for the full note. */\n  --color-selection: var(--kai-color-selection, hsl(217 60% 32%));\n  --color-selection-foreground: var(--kai-color-selection-foreground, hsl(0 0% 98%));\n  --color-border: var(--kai-color-border, hsl(45 4% 17%));\n  /* Control boundary — see the light block. Lifted to clear 3:1 (SC 1.4.11)\n     against the dark background and card surfaces. */\n  --color-input: var(--kai-color-input, hsl(45 4% 48%));\n  --color-ring: var(--kai-color-ring, hsl(217 91% 68%));\n  --color-scrollbar-thumb: var(--kai-color-scrollbar-thumb, hsl(45 3% 30%));\n  --color-scrollbar-thumb-hover: var(--kai-color-scrollbar-thumb-hover, hsl(45 3% 42%));\n  --color-sidebar: var(--kai-color-sidebar, hsl(50 2% 7%));\n  --color-code-foreground: var(--kai-color-code-foreground, hsl(213 94% 78%));\n\n  /* Tool/status chip hues — dark mode. Brighter hues reach AA on the dark fill. */\n  --color-tool-blue: var(--kai-color-tool-blue, hsl(217 91% 70%));\n  --color-tool-amber: var(--kai-color-tool-amber, hsl(38 92% 50%));\n  --color-tool-green: var(--kai-color-tool-green, hsl(142 71% 45%));\n  --color-tool-red: var(--kai-color-tool-red, hsl(0 84% 70%));\n}\n\n/* Self-contained markdown styling — replaces the typography plugin's `prose`.\n   Keyed on --color-* tokens so it themes with the rest of the kit. */\n.chat-markdown { color: var(--color-foreground); line-height: 1.6; }\n.chat-markdown > div:first-child > :first-child { margin-top: 0; }\n.chat-markdown > div:last-child > :last-child { margin-bottom: 0; }\n.chat-markdown p { margin: 0 0 0.75em; }\n.chat-markdown p:last-child { margin-bottom: 0; }\n.chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4 {\n  margin: 1.2em 0 0.5em; font-weight: 600; line-height: 1.3; color: var(--color-foreground);\n}\n.chat-markdown h1 { font-size: 1.4em; } .chat-markdown h2 { font-size: 1.25em; }\n.chat-markdown h3 { font-size: 1.1em; } .chat-markdown h4 { font-size: 1em; }\n.chat-markdown ul, .chat-markdown ol { margin: 0 0 0.75em; padding-left: 1.4em; }\n.chat-markdown li { margin: 0.2em 0; }\n.chat-markdown ul { list-style: disc; } .chat-markdown ol { list-style: decimal; }\n.chat-markdown a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }\n.chat-markdown strong { font-weight: 600; color: var(--color-foreground); }\n.chat-markdown em { font-style: italic; }\n.chat-markdown blockquote {\n  margin: 0 0 0.75em; padding-left: 0.9em; border-left: 2px solid var(--color-border);\n  color: var(--color-muted-foreground);\n}\n.chat-markdown hr { margin: 1em 0; border: 0; border-top: 1px solid var(--color-border); }\n.chat-markdown code:not(pre code) {\n  background: color-mix(in oklab, var(--color-code-foreground) 15%, transparent);\n  color: var(--color-code-foreground);\n  border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.875em;\n  font-family: var(--kai-font-code, ui-monospace, \"SF Mono\", Menlo, monospace);\n}\n.chat-markdown table { width: 100%; border-collapse: collapse; margin: 0 0 0.75em; font-size: 0.9em; }\n.chat-markdown th, .chat-markdown td { border: 1px solid var(--color-border); padding: 0.4em 0.6em; text-align: left; }\n.chat-markdown th { font-weight: 600; background: color-mix(in oklab, var(--color-muted-foreground) 8%, transparent); }\n\n/* Themeable elevation. The kit is mostly flat (borders), but a few surfaces lift\n   off the page — popovers, dropdowns, hover cards, cards. The shadow COLOR is a\n   token (--kai-shadow-color, default near-black); set it transparent for a fully\n   flat look, or tint it to match a theme. Defined here (not as a Tailwind shadow\n   utility) so the color stays overridable and works in both the web-component and\n   SolidJS layers. */\n.kai-elevation {\n  box-shadow:\n    0 4px 12px -2px color-mix(in oklab, var(--kai-shadow-color, oklch(0 0 0)) 14%, transparent),\n    0 2px 6px -2px color-mix(in oklab, var(--kai-shadow-color, oklch(0 0 0)) 10%, transparent);\n}\n.kai-elevation-sm {\n  box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--kai-shadow-color, oklch(0 0 0)) 8%, transparent);\n}\n\n/* Cross-platform thin scrollbar utility (Firefox + WebKit). Used by ScrollArea\n   and any scroll region in the SolidJS-component build (web components also get\n   this globally inside their shadow root — see src/elements/styles.css).\n   `kai-` prefixed because this file is merged into a consumer's Tailwind build\n   and `.scrollbar-thin` is a name they may well own (no consumer-facing doc ever\n   named the old unprefixed class, so no alias is kept). */\n.kai-scrollbar-thin {\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-scrollbar-thumb) transparent;\n}\n.kai-scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }\n.kai-scrollbar-thin::-webkit-scrollbar-track { background: transparent; }\n.kai-scrollbar-thin::-webkit-scrollbar-thumb {\n  background-color: var(--color-scrollbar-thumb);\n  border-radius: 9999px;\n  border: 2px solid transparent;\n  background-clip: padding-box;\n}\n.kai-scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }\n.kai-scrollbar-thin::-webkit-scrollbar-corner { background: transparent; }\n\n/* Surface utilities — `bg-surface` / `bg-surface-strong` paint the opaque,\n   theme-derived surface tokens (see --color-surface above). Defined explicitly\n   because a color-mix-valued @theme token does NOT emit a bare `bg-` utility on\n   its own (only opacity variants). Use these for panels that sit OVER content\n   instead of `bg-muted/NN`. */\n@utility bg-surface {\n  background-color: var(--color-surface);\n}\n@utility bg-surface-strong {\n  background-color: var(--color-surface-strong);\n}\n@utility bg-surface-sunken {\n  background-color: var(--color-surface-sunken);\n}\n\n/* Soft-status + interaction-state utilities. Same reason as bg-surface above: a\n   color-mix-valued @theme token does NOT emit a bare `bg-` utility on its own, so\n   bg-success-soft / bg-warning-soft / bg-info-soft / bg-destructive-soft and\n   bg-hover / bg-selected are declared here. (The SOLID tokens - success / warning\n   / info + their -foreground - are plain hsl values, so bg-success / text-success\n   etc. ARE auto-generated by @theme and need no explicit utility.) */\n@utility bg-success-soft {\n  background-color: var(--color-success-soft);\n}\n@utility bg-warning-soft {\n  background-color: var(--color-warning-soft);\n}\n@utility bg-info-soft {\n  background-color: var(--color-info-soft);\n}\n@utility bg-destructive-soft {\n  background-color: var(--color-destructive-soft);\n}\n@utility bg-hover {\n  background-color: var(--color-hover);\n}\n@utility bg-selected {\n  background-color: var(--color-selected);\n}\n";
 function declaredKaiTokens(css) {
   const names = /* @__PURE__ */ new Set();
   for (const m of css.matchAll(/var\(\s*(--kai-[a-zA-Z0-9-]+)\s*[,)]/g)) names.add(m[1]);
@@ -9501,8 +9505,15 @@ function isSafeUrl(url) {
   const scheme = schemeOf(url);
   return scheme !== void 0 && SAFE_SCHEMES.includes(scheme);
 }
+const CHAT_MESSAGE_ACTIONS = ["copy", "like", "dislike", "regenerate", "edit", "speak"];
+const BUTTON_VARIANT_NAMES = ["default", "ghost", "subtle", "outline", "destructive"];
 const CONSTRUCT_SCHEMA_URL = "https://ui.kitn.ai/schemas/construct/v1.json";
 const TAG_RE = /^[a-z][a-z0-9]*-[a-z0-9-]+$/;
+const TriggerEntrySchema = z$1.object({
+  id: z$1.string().min(1),
+  label: z$1.string().min(1),
+  description: z$1.string().min(1).optional()
+}).strict();
 const ProviderSchema = z$1.discriminatedUnion("mode", [
   z$1.object({ mode: z$1.literal("mock") }).strict(),
   z$1.object({
@@ -9571,7 +9582,26 @@ const ConstructSchema = z$1.object({
     /** Rendered in ChatThread's built-in header bar (left side). Construct-
      *  authored/untrusted text, like theme.accent/provider.url — JSON.stringify'd
      *  at its one emit site, never a raw JSX attribute string. */
-    title: z$1.string().min(1).optional()
+    title: z$1.string().min(1).optional(),
+    /** Renders a theme-toggle Button in ChatThread's header-end region,
+     *  flipping the host's `theme` attribute (the attribute
+     *  defineWebComponent already owns) via the facade's ctx.element —
+     *  codegen work, no new kit surface (B-10). */
+    themeToggle: z$1.boolean().optional(),
+    /** Header action buttons (label + kit Button variant), rendered in
+     *  the header-end region. Vocabulary-never-logic: the construct
+     *  cannot say what an action DOES, so each click dispatches a
+     *  non-bubbling `kai-header-action` CustomEvent on the host with
+     *  `detail: { label }` — the consumer's listening seam (B-10).
+     *  `variant` derives from the kit Button's own list
+     *  (BUTTON_VARIANT_NAMES — B-6a), never restated. `label` is
+     *  construct-authored untrusted text, JSON.stringify'd at emit. */
+    actions: z$1.array(
+      z$1.object({
+        label: z$1.string().min(1),
+        variant: z$1.enum(BUTTON_VARIANT_NAMES).optional()
+      }).strict()
+    ).min(1).optional()
   }).strict().optional(),
   /** Greeting shown while the thread is empty (no messages yet) — the
    *  proven "welcome screen" pattern (Intercom-class): title + optional
@@ -9680,7 +9710,28 @@ const ConstructSchema = z$1.object({
      *  vocabulary; HOW it persists (the ConversationStore adapter,
      *  localStorage vs. a fetch endpoint) is codegen's call, never
      *  vocabulary here (C-3 — no transport-layer vocabulary). */
-    conversations: z$1.literal(true).optional()
+    conversations: z$1.literal(true).optional(),
+    /** Role-scoped default action bars, threaded onto ChatThread's
+     *  `userActions`/`assistantActions` props (B-3/B-7b). Ordered
+     *  arrays; enum ids ONLY, read off the ONE const
+     *  (CHAT_MESSAGE_ACTIONS — B-6): a CustomAction is an id the APP
+     *  must handle, a construct has no app code, so emitting one is a
+     *  dead affordance. Duplicates within one array rejected below
+     *  (superRefine, the slots pattern). min(1): an empty list IS the
+     *  absent key. */
+    messageActions: z$1.object({
+      user: z$1.array(z$1.enum(CHAT_MESSAGE_ACTIONS)).min(1).optional(),
+      assistant: z$1.array(z$1.enum(CHAT_MESSAGE_ACTIONS)).min(1).optional()
+    }).strict().optional(),
+    /** The citations STRIP (the `part="citations"` row consecutive
+     *  `source` parts already collapse into — message.tsx). `strip:
+     *  false` hides it (emits ChatThread's `hideSources`); `strip:
+     *  true` or the key absent emits NOTHING — the row already renders,
+     *  the kit default IS the on state, the same anchored-on-the-
+     *  default convention as `reasoning: 'full'` (B-4). */
+    sources: z$1.object({
+      strip: z$1.boolean().optional()
+    }).strict().optional()
   }).strict().optional(),
   /** Named generative-UI card definitions the model can emit as tool calls,
    *  rendered in the thread. Top-level (not a capability): a card is
@@ -9727,109 +9778,245 @@ const ConstructSchema = z$1.object({
     /** Seed Dock's open state at mount. Uncontrolled — never steals focus (Dock's
      *  own focus contract, dock.tsx). Omitted keeps Dock's own default (closed). */
     defaultOpen: z$1.boolean().optional()
+  }).strict().optional(),
+  /** Layout-scoped aside geometry, `layout: 'aside'` only (superRefine
+   *  below, mirroring `widget`'s scoping exactly). `position` picks the
+   *  docked inline edge (default 'end', today's hardcoded behavior);
+   *  `width` overrides codegen's 380px default. `width` is construct-
+   *  authored untrusted text: it lands as a JSON.stringify'd VALUE inside
+   *  the emitted Solid `style={{ }}` object — property assignment, the
+   *  same no-CSS-text-interpolation guarantee as setProperty — never
+   *  concatenated into a CSS string (B-2). */
+  aside: z$1.object({
+    position: z$1.enum(["start", "end"]).optional(),
+    width: z$1.string().min(1).optional()
+  }).strict().optional(),
+  /** Construct-wide shell chrome (10a): both members reuse REAL kit
+   *  pieces — command.tsx's CommandList behind a codegen-emitted overlay
+   *  (opened on Mod+K; entries DERIVE from what this construct enables —
+   *  menu-honesty against dead entries), and the documented Dropdown+
+   *  Avatar user-menu recipe. `name`/`plan` are construct-authored
+   *  untrusted text, JSON.stringify'd at emit like every sibling.
+   *  `commandPalette` is presence-only `z.literal(true)`, matching
+   *  `conversations`' pattern. */
+  shell: z$1.object({
+    commandPalette: z$1.literal(true).optional(),
+    userMenu: z$1.object({
+      name: z$1.string().min(1),
+      plan: z$1.string().min(1).optional()
+    }).strict().optional()
+  }).strict().optional(),
+  /** Composer chrome — NOT a capability: chrome on the medium, like
+   *  `header` (B-5). `triggers` maps onto ChatThread's real, shipped
+   *  `triggers` prop: `slash` → `{ char: '/', kind: 'command', items }`,
+   *  `mention` → `{ char: '@', kind: 'mention', items }` at emit. */
+  composer: z$1.object({
+    triggers: z$1.object({
+      slash: z$1.array(TriggerEntrySchema).min(1).optional(),
+      mention: z$1.array(TriggerEntrySchema).min(1).optional()
+    }).strict().optional()
   }).strict().optional()
 }).strict().superRefine((construct, ctx) => {
-  if (construct.slots) {
-    const seen = /* @__PURE__ */ new Set();
-    construct.slots.forEach((name, i) => {
-      if (seen.has(name)) {
+  for (const rule of CROSS_FIELD_RULES) rule.check(construct, ctx);
+});
+const CROSS_FIELD_RULES = [
+  {
+    id: "slots-unique",
+    paths: ["slots"],
+    check: (construct, ctx) => {
+      if (!construct.slots) return;
+      const seen = /* @__PURE__ */ new Set();
+      construct.slots.forEach((name, i) => {
+        if (seen.has(name)) {
+          ctx.addIssue({
+            code: z$1.ZodIssueCode.custom,
+            path: ["slots", i],
+            message: `duplicate slot name "${name}"`
+          });
+        }
+        seen.add(name);
+      });
+    }
+  },
+  {
+    id: "custom-layout-needs-slots",
+    paths: ["layout", "slots"],
+    check: (construct, ctx) => {
+      if (construct.layout === "custom" && (!construct.slots || construct.slots.length === 0)) {
         ctx.addIssue({
           code: z$1.ZodIssueCode.custom,
-          path: ["slots", i],
-          message: `duplicate slot name "${name}"`
+          path: ["slots"],
+          message: '"custom" layout requires at least one declared slot — custom IS the slots grain'
         });
       }
-      seen.add(name);
-    });
-  }
-  if (construct.layout === "custom" && (!construct.slots || construct.slots.length === 0)) {
-    ctx.addIssue({
-      code: z$1.ZodIssueCode.custom,
-      path: ["slots"],
-      message: '"custom" layout requires at least one declared slot — custom IS the slots grain'
-    });
-  }
-  if (construct.layout === "split" && construct.slots) {
-    const i = construct.slots.indexOf("pane");
-    if (i !== -1) {
-      ctx.addIssue({
-        code: z$1.ZodIssueCode.custom,
-        path: ["slots", i],
-        message: `"pane" collides with the "split" layout's own fixed <slot name="pane"> — choose a different slot name`
-      });
     }
-  }
-  if (construct.widget && construct.layout !== "widget") {
-    ctx.addIssue({
-      code: z$1.ZodIssueCode.custom,
-      path: ["widget"],
-      message: '"widget" is only valid on layout: "widget"'
-    });
-  }
-  if (construct.widget?.launcherIcon && !isSafeUrl(construct.widget.launcherIcon)) {
-    ctx.addIssue({
-      code: z$1.ZodIssueCode.custom,
-      path: ["widget", "launcherIcon"],
-      message: "launcherIcon must be an http(s)/mailto or relative URL — no javascript:/data: schemes"
-    });
-  }
-  if (construct.empty?.icon && !isSafeUrl(construct.empty.icon)) {
-    ctx.addIssue({
-      code: z$1.ZodIssueCode.custom,
-      path: ["empty", "icon"],
-      message: "icon must be an http(s)/mailto or relative URL — no javascript:/data: schemes"
-    });
-  }
-  const reasoning = construct.capabilities?.reasoning;
-  const reasoningOpen = construct.capabilities?.reasoningOpen;
-  if (reasoningOpen !== void 0 && (reasoning === "compact" || reasoning === "off")) {
-    ctx.addIssue({
-      code: z$1.ZodIssueCode.custom,
-      path: ["capabilities", "reasoningOpen"],
-      message: '"reasoningOpen" only applies when reasoning is "full" or omitted — "compact"/"off" have no disclosure to open'
-    });
-  }
-  const history = construct.capabilities?.history;
-  if (construct.capabilities?.conversations && (!history || history.persistence === "none")) {
-    ctx.addIssue({
-      code: z$1.ZodIssueCode.custom,
-      path: ["capabilities", "conversations"],
-      message: '"conversations" requires capabilities.history.persistence to be "local" or "endpoint" — a conversation list needs somewhere to persist conversations'
-    });
-  }
-  const URL_SHAPED = /^[a-zA-Z][a-zA-Z0-9+.-]*:|^\/\//;
-  for (const [i, link] of (construct.home?.links ?? []).entries()) {
-    if (link.href && !isSafeUrl(link.href)) {
-      ctx.addIssue({
-        code: z$1.ZodIssueCode.custom,
-        path: ["home", "links", i, "href"],
-        message: "href must be an http(s)/mailto or relative URL — no javascript:/data: schemes"
-      });
+  },
+  {
+    id: "split-pane-slot-collision",
+    paths: ["layout", "slots"],
+    check: (construct, ctx) => {
+      if (construct.layout === "split" && construct.slots) {
+        const i = construct.slots.indexOf("pane");
+        if (i !== -1) {
+          ctx.addIssue({
+            code: z$1.ZodIssueCode.custom,
+            path: ["slots", i],
+            message: `"pane" collides with the "split" layout's own fixed <slot name="pane"> — choose a different slot name`
+          });
+        }
+      }
     }
-    if (link.icon && URL_SHAPED.test(link.icon) && !isSafeUrl(link.icon)) {
-      ctx.addIssue({
-        code: z$1.ZodIssueCode.custom,
-        path: ["home", "links", i, "icon"],
-        message: "icon must be a kit icon name or an http(s)/relative URL — no javascript:/data: schemes"
-      });
+  },
+  {
+    id: "widget-layout-scope",
+    paths: ["layout", "widget"],
+    check: (construct, ctx) => {
+      if (construct.widget && construct.layout !== "widget") {
+        ctx.addIssue({
+          code: z$1.ZodIssueCode.custom,
+          path: ["widget"],
+          message: '"widget" is only valid on layout: "widget"'
+        });
+      }
+    }
+  },
+  {
+    id: "aside-layout-scope",
+    paths: ["layout", "aside"],
+    check: (construct, ctx) => {
+      if (construct.aside && construct.layout !== "aside") {
+        ctx.addIssue({
+          code: z$1.ZodIssueCode.custom,
+          path: ["aside"],
+          message: '"aside" is only valid on layout: "aside"'
+        });
+      }
+    }
+  },
+  {
+    id: "message-actions-unique",
+    paths: ["capabilities.messageActions.user", "capabilities.messageActions.assistant"],
+    check: (construct, ctx) => {
+      const messageActions = construct.capabilities?.messageActions;
+      if (!messageActions) return;
+      for (const role of ["user", "assistant"]) {
+        const list = messageActions[role];
+        if (!list) continue;
+        const seen = /* @__PURE__ */ new Set();
+        list.forEach((id, i) => {
+          if (seen.has(id)) {
+            ctx.addIssue({
+              code: z$1.ZodIssueCode.custom,
+              path: ["capabilities", "messageActions", role, i],
+              message: `duplicate action id "${id}"`
+            });
+          }
+          seen.add(id);
+        });
+      }
+    }
+  },
+  {
+    id: "launcher-icon-url",
+    paths: ["widget.launcherIcon"],
+    check: (construct, ctx) => {
+      if (construct.widget?.launcherIcon && !isSafeUrl(construct.widget.launcherIcon)) {
+        ctx.addIssue({
+          code: z$1.ZodIssueCode.custom,
+          path: ["widget", "launcherIcon"],
+          message: "launcherIcon must be an http(s)/mailto or relative URL — no javascript:/data: schemes"
+        });
+      }
+    }
+  },
+  {
+    id: "empty-icon-url",
+    paths: ["empty.icon"],
+    check: (construct, ctx) => {
+      if (construct.empty?.icon && !isSafeUrl(construct.empty.icon)) {
+        ctx.addIssue({
+          code: z$1.ZodIssueCode.custom,
+          path: ["empty", "icon"],
+          message: "icon must be an http(s)/mailto or relative URL — no javascript:/data: schemes"
+        });
+      }
+    }
+  },
+  {
+    id: "reasoning-open-scope",
+    paths: ["capabilities.reasoning", "capabilities.reasoningOpen"],
+    check: (construct, ctx) => {
+      const reasoning = construct.capabilities?.reasoning;
+      const reasoningOpen = construct.capabilities?.reasoningOpen;
+      if (reasoningOpen !== void 0 && (reasoning === "compact" || reasoning === "off")) {
+        ctx.addIssue({
+          code: z$1.ZodIssueCode.custom,
+          path: ["capabilities", "reasoningOpen"],
+          message: '"reasoningOpen" only applies when reasoning is "full" or omitted — "compact"/"off" have no disclosure to open'
+        });
+      }
+    }
+  },
+  {
+    id: "conversations-need-history",
+    paths: ["capabilities.conversations", "capabilities.history"],
+    check: (construct, ctx) => {
+      const history = construct.capabilities?.history;
+      if (construct.capabilities?.conversations && (!history || history.persistence === "none")) {
+        ctx.addIssue({
+          code: z$1.ZodIssueCode.custom,
+          path: ["capabilities", "conversations"],
+          message: '"conversations" requires capabilities.history.persistence to be "local" or "endpoint" — a conversation list needs somewhere to persist conversations'
+        });
+      }
+    }
+  },
+  {
+    id: "home-link-urls",
+    paths: ["home.links"],
+    check: (construct, ctx) => {
+      const URL_SHAPED = /^[a-zA-Z][a-zA-Z0-9+.-]*:|^\/\//;
+      for (const [i, link] of (construct.home?.links ?? []).entries()) {
+        if (link.href && !isSafeUrl(link.href)) {
+          ctx.addIssue({
+            code: z$1.ZodIssueCode.custom,
+            path: ["home", "links", i, "href"],
+            message: "href must be an http(s)/mailto or relative URL — no javascript:/data: schemes"
+          });
+        }
+        if (link.icon && URL_SHAPED.test(link.icon) && !isSafeUrl(link.icon)) {
+          ctx.addIssue({
+            code: z$1.ZodIssueCode.custom,
+            path: ["home", "links", i, "icon"],
+            message: "icon must be a kit icon name or an http(s)/relative URL — no javascript:/data: schemes"
+          });
+        }
+      }
+    }
+  },
+  {
+    id: "history-endpoint-url",
+    paths: ["capabilities.history.persistence", "capabilities.history.url"],
+    check: (construct, ctx) => {
+      const history = construct.capabilities?.history;
+      if (!history) return;
+      if (history.persistence === "endpoint" && !history.url) {
+        ctx.addIssue({
+          code: z$1.ZodIssueCode.custom,
+          path: ["capabilities", "history", "url"],
+          message: '"endpoint" persistence requires a url'
+        });
+      }
+      if (history.persistence !== "endpoint" && history.url !== void 0) {
+        ctx.addIssue({
+          code: z$1.ZodIssueCode.custom,
+          path: ["capabilities", "history", "url"],
+          message: 'url is only valid with "endpoint" persistence'
+        });
+      }
     }
   }
-  if (!history) return;
-  if (history.persistence === "endpoint" && !history.url) {
-    ctx.addIssue({
-      code: z$1.ZodIssueCode.custom,
-      path: ["capabilities", "history", "url"],
-      message: '"endpoint" persistence requires a url'
-    });
-  }
-  if (history.persistence !== "endpoint" && history.url !== void 0) {
-    ctx.addIssue({
-      code: z$1.ZodIssueCode.custom,
-      path: ["capabilities", "history", "url"],
-      message: 'url is only valid with "endpoint" persistence'
-    });
-  }
-});
+];
 function validateConstruct(input) {
   const parsed = ConstructSchema.safeParse(input);
   if (parsed.success) return { ok: true, construct: parsed.data };
@@ -9851,25 +10038,314 @@ function validateConstruct(input) {
     })
   };
 }
+const IDENTITY = { id: "identity", paths: ["name"] };
+const THEME = { id: "theme", paths: ["theme.accent", "theme.mode", "theme.unreadColor"] };
+const HEADER = { id: "header", paths: ["header.title"] };
+const HEADER_CHROME = {
+  id: "header",
+  paths: ["header.title", "header.themeToggle", "header.actions"]
+};
+const EMPTY = { id: "empty", paths: ["empty.title", "empty.description", "empty.icon"] };
+const HOME = { id: "home", paths: ["home"] };
+const CAPABILITIES = {
+  id: "capabilities",
+  paths: [
+    "capabilities.starters",
+    "capabilities.attachments",
+    "capabilities.history",
+    "capabilities.conversations",
+    "capabilities.reasoning",
+    "capabilities.reasoningOpen"
+  ]
+};
+const MESSAGE_ACTIONS = {
+  id: "messageActions",
+  paths: ["capabilities.messageActions.user", "capabilities.messageActions.assistant"]
+};
+const SOURCES = { id: "sources", paths: ["capabilities.sources.strip"] };
+const WIDGET_CHROME = {
+  id: "widget",
+  paths: ["widget.position", "widget.launcherIcon", "widget.defaultOpen"]
+};
+const ASIDE = { id: "aside", paths: ["aside.position", "aside.width"] };
+const COMPOSER_TRIGGERS = {
+  id: "composerTriggers",
+  paths: ["composer.triggers.slash", "composer.triggers.mention"]
+};
+const SHELL = { id: "shell", paths: ["shell.commandPalette", "shell.userMenu"] };
+const CARDS = { id: "cards", paths: ["cards"] };
+const PROVIDER = { id: "provider", paths: ["provider"] };
+const widgetStarter = {
+  $schema: CONSTRUCT_SCHEMA_URL,
+  name: "support-widget",
+  layout: "widget",
+  provider: { mode: "mock" },
+  header: { title: "Support" },
+  theme: { unreadColor: "#38BDF8", mode: "system" },
+  empty: {
+    title: "Hi, we're here to help",
+    description: "Ask us about orders, refunds, and more."
+  },
+  home: {
+    greeting: { title: "How can we help? 👋", subtitle: "Orders, refunds, anything." },
+    recentConversation: true,
+    links: [
+      { label: "Help center", href: "https://ui.kitn.ai", description: "Guides and FAQs", icon: "book-open" }
+    ]
+  },
+  // States the kit default loudly (the anchored-on-the-default convention,
+  // same as research's sources.strip) so the template's chrome fact is
+  // visible/editable in its own JSON.
+  widget: { position: "bottom-end" },
+  capabilities: {
+    starters: ["Where's my order?", "Request a refund"],
+    attachments: { accept: ["image/*", "application/pdf"] },
+    history: { persistence: "local" },
+    conversations: true
+  }
+};
+const inAppAssistantStarter = {
+  $schema: CONSTRUCT_SCHEMA_URL,
+  name: "in-app-assistant",
+  layout: "aside",
+  provider: { mode: "mock" },
+  header: { title: "Assistant" },
+  // Dark-by-default (owner ruling, dark round): every buildable starter
+  // EXCEPT widget ships mode: 'dark' — widget is embedded in a host site and
+  // follows IT, not its own preference (T-3: this is registry data, not a
+  // schema default; 'system' stays the schema's own default for anyone
+  // hand-authoring a construct).
+  theme: { accent: "#0ea5e9", mode: "dark" },
+  // codegen's own defaults, stated so the geometry is visible/editable.
+  aside: { position: "end", width: "380px" },
+  capabilities: {
+    starters: ["Deploy payments to production", "Check the canary status"],
+    attachments: { accept: ["image/*", "application/pdf"] },
+    history: { persistence: "local" }
+  }
+};
+const assistantStarter = {
+  $schema: CONSTRUCT_SCHEMA_URL,
+  name: "daily-assistant",
+  layout: "fullscreen",
+  provider: { mode: "mock" },
+  header: { title: "Assistant" },
+  // Dark-by-default (owner ruling, dark round) — see inAppAssistantStarter's
+  // note above.
+  theme: { accent: "#7c3aed", mode: "dark" },
+  empty: {
+    title: "What can I help with?",
+    description: "Ask anything, or start from a suggestion below."
+  },
+  capabilities: {
+    starters: ["Draft the Q3 board update", "Summarize a document", "Compare two options"],
+    attachments: { accept: ["image/*", "application/pdf"] },
+    history: { persistence: "local" },
+    conversations: true
+  }
+};
+const researchStarter = {
+  $schema: CONSTRUCT_SCHEMA_URL,
+  name: "research-assistant",
+  layout: "fullscreen",
+  provider: { mode: "mock" },
+  header: { title: "Research" },
+  // Dark-by-default (owner ruling, dark round) — see inAppAssistantStarter's
+  // note above.
+  theme: { accent: "#0f766e", mode: "dark" },
+  capabilities: {
+    starters: ["How does the wire adapter work?", "What are message parts?"],
+    attachments: { accept: ["application/pdf"] },
+    history: { persistence: "local" },
+    // The template's defining fact, stated even though it matches the emit
+    // default (B-4): the row already renders; strip: true is the visible
+    // switch this template exists around.
+    sources: { strip: true },
+    // "assistant-style actions" (B-13) — the owner's A3 default matrix
+    // (builder-message-actions.tsx: user Edit on; assistant
+    // Copy/Like/Dislike on).
+    messageActions: { user: ["edit"], assistant: ["copy", "like", "dislike"] }
+  }
+};
+const workspaceTriggers = {
+  triggers: {
+    slash: [
+      { id: "summarize", label: "summarize", description: "Summarize the thread so far" },
+      { id: "translate", label: "translate", description: "Translate the last message" }
+    ],
+    mention: [
+      { id: "researcher", label: "researcher", description: "Hands off to the research agent" },
+      { id: "coder", label: "coder", description: "Hands off to the coding agent" }
+    ]
+  }
+};
+const workspaceBase = {
+  $schema: CONSTRUCT_SCHEMA_URL,
+  name: "build-workspace",
+  layout: "split",
+  provider: { mode: "mock" },
+  header: {
+    title: "Workspace",
+    themeToggle: true,
+    // The story's Share/Deploy rows, mapped onto the kit Button's real
+    // variant names (B-6a's enum): 'secondary' → outline, 'primary' → default.
+    actions: [
+      { label: "Share", variant: "outline" },
+      { label: "Deploy", variant: "default" }
+    ]
+  },
+  // Dark-by-default (owner ruling, dark round) — see inAppAssistantStarter's
+  // note above. Both variants below spread ...workspaceBase without
+  // overriding theme, so this covers artifactPreview and appPreview too.
+  theme: { accent: "#ea580c", mode: "dark" },
+  shell: { commandPalette: true, userMenu: { name: "Ada", plan: "Pro" } },
+  composer: workspaceTriggers,
+  capabilities: {
+    starters: ["Build a pricing table", "Add a dark mode toggle"],
+    attachments: { accept: ["image/*"] },
+    history: { persistence: "local" }
+  }
+};
+const workspaceArtifactPreview = {
+  ...workspaceBase,
+  name: "artifact-workspace"
+};
+const workspaceAppPreview = {
+  ...workspaceBase,
+  name: "app-workspace",
+  capabilities: {
+    ...workspaceBase.capabilities,
+    starters: ["Build a landing page for a coffee shop", "Make the hero work on mobile"]
+  }
+};
+const TEMPLATES = [
+  {
+    id: "widget",
+    name: "Support widget",
+    description: "A floating chat that lives in the corner of your site.",
+    availability: "buildable",
+    starter: widgetStarter,
+    controls: [IDENTITY, THEME, HEADER, HOME, CAPABILITIES, WIDGET_CHROME, PROVIDER]
+  },
+  {
+    id: "inAppAssistant",
+    name: "In-app assistant",
+    description: "An assistant docked inside your existing app.",
+    availability: "buildable",
+    starter: inAppAssistantStarter,
+    // Design-parity fix wave (2026-08-29 audit): the story's In-app
+    // assistant panel shows Composer triggers, Message actions and a
+    // read-only Cards list, none of which were wired here even though the
+    // vocabulary and the panel machinery both already exist (proven working
+    // on Workspace/Assistant/Research). Voice/Reveal-mode/Rail-placement
+    // stay absent — those are the story's own labeled preview-only,
+    // T-5-deferred fields with no construct vocabulary at all.
+    controls: [IDENTITY, THEME, HEADER, ASIDE, COMPOSER_TRIGGERS, CAPABILITIES, MESSAGE_ACTIONS, CARDS, PROVIDER]
+  },
+  {
+    id: "assistant",
+    name: "Assistant",
+    description: "A full-page assistant with a history of past conversations.",
+    availability: "buildable",
+    starter: assistantStarter,
+    // Design-parity fix wave: the story's Assistant panel shows an App
+    // chrome / Shell section (Command palette toggle, User menu) that
+    // wasn't wired here — same already-working vocabulary as Workspace's
+    // SHELL section.
+    controls: [IDENTITY, THEME, HEADER, SHELL, EMPTY, CAPABILITIES, MESSAGE_ACTIONS, PROVIDER]
+  },
+  {
+    id: "research",
+    name: "Research",
+    description: "Search-first answers with cited sources.",
+    availability: "buildable",
+    starter: researchStarter,
+    controls: [IDENTITY, THEME, HEADER, CAPABILITIES, SOURCES, MESSAGE_ACTIONS, PROVIDER]
+  },
+  {
+    id: "workspace",
+    name: "Workspace",
+    description: "Chat drives a live work surface: previews, code, and artifacts build beside the conversation.",
+    availability: "buildable",
+    starter: workspaceBase,
+    variants: [
+      {
+        id: "artifactPreview",
+        name: "Artifact preview beside chat",
+        description: "A code or rendered-output pane grows beside the conversation as you build.",
+        starter: workspaceArtifactPreview
+      },
+      {
+        id: "appPreview",
+        name: "App preview with device toggles",
+        description: "A full browser-chrome preview of the running app, with desktop, tablet, and mobile views.",
+        starter: workspaceAppPreview
+      }
+    ],
+    controls: [
+      IDENTITY,
+      THEME,
+      HEADER_CHROME,
+      SHELL,
+      COMPOSER_TRIGGERS,
+      CAPABILITIES,
+      MESSAGE_ACTIONS,
+      PROVIDER
+    ]
+  },
+  {
+    id: "voice",
+    name: "Voice",
+    description: "A voice-first assistant you talk to, push-to-talk and all.",
+    availability: "story-only"
+  }
+];
+function buildableTemplates() {
+  return TEMPLATES.filter((t) => t.availability === "buildable");
+}
 const inputSchema = z$1.object({
   intent: z$1.string().min(1).optional().describe("What the author wants, in their words. Alone: returns a starter construct."),
   construct: z$1.record(z$1.string(), z$1.unknown()).optional().describe("The FULL construct JSON for this turn. The harness owns the file; send all of it every turn.")
 }).strict();
+const INTENT_PATTERNS = [
+  { id: "widget", re: /\b(?:widget|embed|bubble|corner|launcher)\b/i },
+  { id: "research", re: /\b(?:research|search|cite|citation|sources?)\b/i },
+  { id: "workspace", re: /\b(?:workspace|split|pane|artifact|side.?by.?side|preview)\b/i },
+  { id: "inAppAssistant", re: /\b(?:aside|dock|in.?app|copilot|console|sidebar)\b/i },
+  { id: "assistant", re: /\b(?:assistant|chat\s*(?:app|bot)|full.?screen)\b/i }
+];
 function starterFor(intent) {
-  const impliesWidget = /widget|embed|bubble|corner|launcher/i.test(intent);
+  const templates = buildableTemplates();
   const name = "my-chat";
+  const tagQuestion = `What should the element tag be? (kebab-case, e.g. "acme-support"; using "${name}" until you say)`;
+  const match = INTENT_PATTERNS.find((p) => p.re.test(intent));
+  const template = match ? templates.find((t) => t.id === match.id) : void 0;
+  if (!template) {
+    return {
+      construct: {
+        $schema: CONSTRUCT_SCHEMA_URL,
+        name,
+        layout: "fullscreen",
+        provider: { mode: "mock" }
+      },
+      stated: [
+        "no template implied — starting from a bare fullscreen construct. Templates available:",
+        ...templates.map((t) => `  · ${t.id} — ${t.name}: ${t.description}`)
+      ],
+      questions: [
+        tagQuestion,
+        "Which template fits? (name one of the ids above, or keep the bare construct)"
+      ]
+    };
+  }
+  const construct = structuredClone(template.starter);
+  construct.name = name;
   return {
-    construct: {
-      $schema: CONSTRUCT_SCHEMA_URL,
-      name,
-      layout: "widget",
-      provider: { mode: "mock" }
-    },
-    stated: impliesWidget ? ["layout: widget (implied by your request)"] : [],
-    questions: [
-      `What should the element tag be? (kebab-case, e.g. "acme-support"; using "${name}" until you say)`,
-      ...impliesWidget ? [] : ["Layout: widget, fullscreen, aside, split, or custom?"]
-    ]
+    construct,
+    stated: [
+      `template: ${template.id} (${template.name}) — implied by your request; every field below is yours to edit`
+    ],
+    questions: [tagQuestion]
   };
 }
 const constructTool = {