@kitn.ai/cli 0.1.0

package/dist/construct-cli.es.js

@@ -0,0 +1,3128 @@
+import { existsSync, readFileSync, rmSync, mkdirSync, writeFileSync, readdirSync, renameSync, statSync, copyFileSync } from "node:fs";
+import { execFileSync, spawn } from "node:child_process";
+import { join, dirname, relative, sep, resolve, basename } from "node:path";
+import { z } from "zod";
+import { createRequire } from "node:module";
+import { createHash } from "node:crypto";
+import { fileURLToPath } from "node:url";
+const SAFE_SCHEMES = ["http:", "https:", "mailto:"];
+function schemeOf(url) {
+  try {
+    return new URL(url, "http://_invalid_base").protocol;
+  } catch {
+    return void 0;
+  }
+}
+function isSafeUrl(url) {
+  if (url === "") return false;
+  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 GROUPS = [
+  {
+    name: "Surfaces",
+    tokens: [
+      { token: "--kai-color-background", label: "Background", hint: "App / chat surface" },
+      { token: "--kai-color-foreground", label: "Foreground", hint: "Default text" },
+      { token: "--kai-color-card", label: "Card", hint: "Bubbles, panels, cards" },
+      { token: "--kai-color-card-foreground", label: "Card text", hint: "Text on cards" },
+      { token: "--kai-color-popover", label: "Popover", hint: "Menus & popovers" },
+      { token: "--kai-color-popover-foreground", label: "Popover text", hint: "Text in popovers" },
+      { token: "--kai-color-sidebar", label: "Sidebar", hint: "Conversation sidebar" },
+      { token: "--kai-color-surface", label: "Surface", hint: "Composer, chips, card headers" },
+      { token: "--kai-color-surface-strong", label: "Surface strong", hint: "Raised / hover step of surface" },
+      { token: "--kai-color-surface-sunken", label: "Surface sunken", hint: "Wells, recessed below surface" }
+    ]
+  },
+  {
+    name: "Brand & actions",
+    tokens: [
+      { token: "--kai-color-primary", label: "Primary", hint: "Buttons, accents, send" },
+      { token: "--kai-color-primary-foreground", label: "On primary", hint: "Text on primary" },
+      { token: "--kai-color-ring", label: "Focus ring", hint: "Keyboard-focus outline" },
+      { token: "--kai-color-accent", label: "Accent", hint: "Hover / accent surface" },
+      { token: "--kai-color-accent-foreground", label: "On accent", hint: "Text on accent" },
+      { token: "--kai-color-secondary", label: "Secondary", hint: "Secondary surface" },
+      { token: "--kai-color-secondary-foreground", label: "On secondary", hint: "Text on secondary" }
+    ]
+  },
+  {
+    name: "Muted text",
+    tokens: [
+      { token: "--kai-color-muted", label: "Muted", hint: "Subtle fills" },
+      { token: "--kai-color-muted-foreground", label: "Muted text", hint: "Secondary text" }
+    ]
+  },
+  {
+    name: "Inputs & borders",
+    tokens: [
+      { token: "--kai-color-border", label: "Border", hint: "Dividers & card outlines" },
+      { token: "--kai-color-input", label: "Input", hint: "Control edge: inputs, selects, checks" }
+    ]
+  },
+  {
+    name: "Status",
+    tokens: [
+      { token: "--kai-color-destructive", label: "Destructive", hint: "Danger / delete" },
+      { token: "--kai-color-destructive-foreground", label: "On destructive", hint: "Text on danger" },
+      { token: "--kai-color-destructive-text", label: "Destructive text", hint: "Error text — legible in both modes" },
+      { token: "--kai-color-destructive-soft", label: "Destructive soft", hint: "Tinted danger callout" },
+      { token: "--kai-color-success", label: "Success", hint: "Done / confirmed" },
+      { token: "--kai-color-success-foreground", label: "On success", hint: "Text on success" },
+      { token: "--kai-color-success-soft", label: "Success soft", hint: "Tinted success callout" },
+      { token: "--kai-color-warning", label: "Warning", hint: "Caution / unsendable" },
+      { token: "--kai-color-warning-foreground", label: "On warning", hint: "Text on warning" },
+      { token: "--kai-color-warning-soft", label: "Warning soft", hint: "Tinted warning callout" },
+      { token: "--kai-color-info", label: "Info", hint: "Informational toasts" },
+      { token: "--kai-color-info-foreground", label: "On info", hint: "Text on info" },
+      { token: "--kai-color-info-soft", label: "Info soft", hint: "Tinted info callout" }
+    ]
+  },
+  {
+    name: "Interaction",
+    tokens: [
+      { token: "--kai-color-hover", label: "Hover", hint: "Row / control hover fill" },
+      { token: "--kai-color-selected", label: "Selected", hint: "Selected row fill" },
+      { token: "--kai-color-unread", label: "Unread", hint: "Unread dot & badge" },
+      { token: "--kai-color-highlight", label: "Highlight", hint: "Marked keywords (composer highlights)" },
+      { token: "--kai-color-selection", label: "Selection", hint: "Selected-text background" },
+      { token: "--kai-color-selection-foreground", label: "On selection", hint: "Selected-text colour" }
+    ]
+  },
+  {
+    name: "Code & tools",
+    tokens: [
+      { token: "--kai-color-code-foreground", label: "Code", hint: "Inline code accent" },
+      { token: "--kai-color-tool-blue", label: "Tool blue", hint: "Tool / status chip" },
+      { token: "--kai-color-tool-amber", label: "Tool amber", hint: "Tool / status chip" },
+      { token: "--kai-color-tool-green", label: "Tool green", hint: "Tool / status chip" },
+      { token: "--kai-color-tool-red", label: "Tool red", hint: "Tool / status chip" }
+    ]
+  },
+  {
+    name: "Scrollbar",
+    tokens: [
+      { token: "--kai-color-scrollbar-thumb", label: "Scrollbar", hint: "Scrollbar thumb" },
+      { token: "--kai-color-scrollbar-thumb-hover", label: "Scrollbar hover", hint: "Thumb on hover" }
+    ]
+  }
+];
+const ALL_TOKENS = GROUPS.flatMap((g) => g.tokens);
+const TEXT_RUNGS = [
+  { token: "--kai-text-micro", label: "Micro", hint: "Badges, pills, eyebrows", min: 0.5, max: 1 },
+  { token: "--kai-text-caption", label: "Caption", hint: "Sub-counts, xs code", min: 0.5, max: 1.125 },
+  { token: "--kai-text-meta", label: "Meta", hint: "Controls, toggles, switchers", min: 0.5, max: 1.25 },
+  { token: "--kai-text-compact", label: "Compact", hint: "Dense chrome & code", min: 0.5625, max: 1.3125 },
+  { token: "--kai-text-body", label: "Body (default)", hint: "Primary reading text", min: 0.625, max: 1.375 },
+  { token: "--kai-text-title", label: "Title", hint: "Emphasis & headers", min: 0.75, max: 1.625 },
+  { token: "--kai-text-lg", label: "Large", hint: "Section headings, lg prose", min: 0.875, max: 2 }
+];
+const EXTRA_TOKENS = [
+  "--kai-radius",
+  // Density: every spacing utility is `calc(var(--spacing) * N)`.
+  "--kai-density",
+  // Pill: `rounded-full` is a literal, so the pill family needs its own rung.
+  "--kai-radius-pill",
+  // Code: its own corner, not a rung of the radius ladder.
+  "--kai-code-radius",
+  // Elevation: one multiplier over every shadow rung (unitless, not rem).
+  "--kai-shadow-strength",
+  // Weights: one knob per rung.
+  "--kai-weight-normal",
+  "--kai-weight-medium",
+  "--kai-weight-semibold",
+  "--kai-weight-bold",
+  "--kai-font-base",
+  "--kai-font-code",
+  "--kai-tracking",
+  "--kai-shadow-color"
+];
+function studioTokens() {
+  return /* @__PURE__ */ new Set([
+    ...ALL_TOKENS.map((t) => t.token),
+    ...TEXT_RUNGS.map((r) => r.token),
+    ...EXTRA_TOKENS
+  ]);
+}
+const KNOWN_THEME_TOKENS = studioTokens();
+const THEME_TOKEN_VALUE_MAX = 256;
+function themeTokenValueProblem(value) {
+  if (value.length === 0) return "must not be empty";
+  if (value.length > THEME_TOKEN_VALUE_MAX)
+    return `too long (${value.length} > ${THEME_TOKEN_VALUE_MAX} characters)`;
+  if (!/^[\x20-\x7E]+$/.test(value)) return "must be printable ASCII with no line breaks";
+  if (/[{};\\]/.test(value)) return "must not contain braces, semicolons or backslashes";
+  if (value.includes("/*") || value.includes("*/"))
+    return "must not contain CSS comment sequences";
+  let depth = 0;
+  for (const ch of value) {
+    if (ch === "(") depth += 1;
+    else if (ch === ")") {
+      depth -= 1;
+      if (depth < 0) return "unbalanced parentheses";
+    }
+  }
+  if (depth !== 0) return "unbalanced parentheses";
+  return null;
+}
+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.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  description: z.string().min(1).optional()
+}).strict();
+const TokenRecordSchema = z.record(z.string(), z.string());
+const ThemeTokensSchema = z.object({
+  /** Light-mode `--kai-*` overrides (+ the studio's root-scope knobs). Set
+   *  on the HOST via setProperty in the emitted facade. NOTE: with no
+   *  paired `dark` entry a light value applies in BOTH modes — the same
+   *  one-knob-both-modes semantics a consumer gets setting `--kai-*` on
+   *  `:root` (theme.css's `.dark` block re-reads the same knob names). */
+  light: TokenRecordSchema.optional(),
+  /** Dark-mode `--kai-color-*` overrides. Emitted as a `.dark { }` rule in
+   *  the shadow `<style>` (see codegen.ts's emitElement for the mechanism). */
+  dark: TokenRecordSchema.optional(),
+  /** The `--kai-radius` value, e.g. "0.6rem". */
+  radius: z.string().min(1).optional(),
+  /** The font knobs: `--kai-font-base` / `--kai-font-code`. */
+  fonts: TokenRecordSchema.optional()
+}).strict().superRefine((tokens, ctx) => {
+  const checkRecord = (record, field, keyRule) => {
+    for (const [name, value] of Object.entries(record ?? {})) {
+      if (!KNOWN_THEME_TOKENS.has(name)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: [field, name],
+          message: `"${name}" is not a --kai-* knob the kit declares — see the theming guide for the token list`
+        });
+      } else if (keyRule && !name.startsWith(keyRule.prefix)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: [field, name],
+          message: `"${name}" is not valid under "${field}" — ${keyRule.reason}`
+        });
+      }
+      const problem = themeTokenValueProblem(value);
+      if (problem) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: [field, name],
+          message: `value ${problem}`
+        });
+      }
+    }
+  };
+  checkRecord(tokens.light, "light");
+  checkRecord(tokens.dark, "dark", {
+    prefix: "--kai-color-",
+    reason: 'only --kai-color-* knobs have a dark-scope re-resolution in theme.css; a mode-less knob belongs in "light" (it applies in both modes)'
+  });
+  checkRecord(tokens.fonts, "fonts", {
+    prefix: "--kai-font-",
+    reason: "only --kai-font-* knobs belong here"
+  });
+  if (tokens.radius !== void 0) {
+    const problem = themeTokenValueProblem(tokens.radius);
+    if (problem) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["radius"],
+        message: `value ${problem}`
+      });
+    }
+  }
+});
+const ProviderSchema = z.discriminatedUnion("mode", [
+  z.object({ mode: z.literal("mock") }).strict(),
+  z.object({
+    mode: z.literal("endpoint"),
+    /** The CONSUMER's chat route. Kit parses, consumer fetches. */
+    url: z.string().min(1),
+    wire: z.enum(["openai", "anthropic"])
+  }).strict()
+]);
+const ConstructSchema = z.object({
+  $schema: z.string().optional(),
+  /** The emitted tag: <acme-support>. Must satisfy customElements.define. */
+  name: z.string().regex(TAG_RE, 'must be a valid custom-element tag: lowercase, with a hyphen (e.g. "acme-support")'),
+  // Widened progressively: fullscreen/aside/split landed in Task 12, custom in Task 13.
+  layout: z.enum(["widget", "fullscreen", "aside", "split", "custom"]),
+  provider: ProviderSchema,
+  /** Plain (unsigned) identity passthrough — no signing/auth infra (owner
+   *  ruling, 2026-08-26: signed JWT/HMAC identity is later additive
+   *  vocabulary, not this field). TOP-LEVEL, not nested under `provider`:
+   *  local history scoping (`capabilities.history.persistence: 'local'`)
+   *  needs userId independent of provider mode — nesting it inside the
+   *  provider union would make it silently inert for `mode: 'mock'` +
+   *  local history, a real and common combination. Threaded as the
+   *  `x-kai-user-id` header on every emitted fetch to the CONSUMER's own
+   *  backend (the endpoint provider's chat POST, history's endpoint
+   *  GET/PUT), and folded into the localStorage key for `local` history so
+   *  different users on the same browser profile don't share one thread.
+   *  Constrained to printable-ASCII (no CR/LF, no non-ISO-8859-1 code
+   *  points) beyond the usual construct-authored-text escaping: this value
+   *  reaches an HTTP HEADER VALUE, not just a JS string literal, and
+   *  `fetch()` throws at RUNTIME on a header value containing CR/LF or
+   *  outside ISO-8859-1 — a bad userId would surface as an opaque crash in
+   *  the CONSUMER's generated app, not a construct-validation error. Reject
+   *  loudly here instead, where the author gets a path + message. */
+  userId: z.string().min(1).regex(
+    /^[\x20-\x7E]+$/,
+    "must be printable ASCII with no line breaks (it becomes an HTTP header value)"
+  ).optional(),
+  theme: z.object({
+    /** Any CSS color; becomes --kai-color-primary on the host. */
+    accent: z.string().optional(),
+    /** Any CSS color; becomes --kai-color-unread on the host (owner
+     *  ruling, 2026-08-26 — the unread-indicator round). Same treatment
+     *  as `accent` in every way that matters for safety: construct-
+     *  authored/untrusted text, carried to the emitted facade via
+     *  `ctx.element.style.setProperty('--kai-color-unread',
+     *  JSON.stringify(...))` — never string-interpolated into CSS
+     *  text — so it can never break out into a new declaration or rule
+     *  (see emitElement's doc on why `accent` uses setProperty at all).
+     *  Unlike `accent`, this has no paired -foreground to compute: the
+     *  three surfaces that read --color-unread (the conversation-list
+     *  row dot, the header toggle's badge, Dock's own closed-launcher
+     *  badge) are all small filled dots with no text sitting ON them, so
+     *  there is nothing to contrast-pair — the value is set and used
+     *  as-is. */
+    unreadColor: z.string().optional(),
+    mode: z.enum(["light", "dark", "system"]).default("system"),
+    /** Full `--kai-*` palette persistence — see ThemeTokensSchema above.
+     *  Precedence with `accent`/`unreadColor`: those emit first, tokens
+     *  after, so a token naming the same knob (e.g. --kai-color-primary)
+     *  WINS — the full palette is the finer-grained wish. */
+    tokens: ThemeTokensSchema.optional()
+  }).strict().optional(),
+  /** Construct-wide header chrome, valid on every layout (not layout-scoped
+   *  like `widget`, and not a capability toggle — a header is a construct-
+   *  wide fact, like `theme`). Rendered inside ChatThread's own built-in
+   *  header bar; a logo/icon projects through the kit's EXISTING
+   *  `header-start` named slot (`slots` vocabulary above), not a second
+   *  image-prop convention here. */
+  header: z.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.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.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.array(
+      z.object({
+        label: z.string().min(1),
+        variant: z.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
+   *  description + optional icon above, with `capabilities.starters`'
+   *  chips and the composer still rendering below (ChatThread's `empty`
+   *  REPLACE slot only stands in for the empty MESSAGE LIST — see
+   *  chat-thread.tsx's own doc comment on `empty` — so the chips are
+   *  never lost). Construct-wide like `header`, not a capability: it's a
+   *  fact about the empty state, not a toggleable affordance.
+   *  `title`/`description` are construct-authored/untrusted text, like
+   *  `header.title`/`theme.accent`/`provider.url` — JSON.stringify'd at
+   *  their one emit site, never a raw JSX attribute string. `icon` is a
+   *  URL reaching an `<img src>` sink in emitted code, exactly like
+   *  `widget.launcherIcon` — same `isSafeUrl` policy, same superRefine
+   *  shape, below. */
+  empty: z.object({
+    title: z.string().min(1),
+    description: z.string().min(1).optional(),
+    icon: z.string().min(1).optional()
+  }).strict().optional(),
+  /** Home screen (spec 2026-08-27, H-1..H-5): Intercom-style landing view behind
+   *  a Home/Messages tab bar. PRESENCE of `home` enables the tab chrome (H-4) —
+   *  no `enabled` boolean, like `header`/`empty`. Every sub-key optional;
+   *  `home: {}` still means "tabs on, defaults". Never requires another
+   *  capability (H-3): the recent card simply renders nothing without
+   *  `capabilities.conversations` (the CLI warns — see cli.ts). All strings are
+   *  construct-authored/untrusted: JSON.stringify'd at every emit site; hrefs
+   *  and URL-shaped icons through isSafeUrl in superRefine below. */
+  home: z.object({
+    greeting: z.object({ title: z.string().min(1).optional(), subtitle: z.string().min(1).optional() }).strict().optional(),
+    recentConversation: z.literal(true).optional(),
+    newConversation: z.object({ label: z.string().min(1).optional() }).strict().optional(),
+    links: z.array(
+      z.object({
+        label: z.string().min(1),
+        href: z.string().min(1).optional(),
+        description: z.string().min(1).optional(),
+        /** renderIcon name (e.g. 'book-open') or a safe URL — the icon NAME
+         *  list is renderIcon's own vocabulary, never restated here; unknown
+         *  names warn loudly at DEV runtime. */
+        icon: z.string().min(1).optional()
+      }).strict()
+    ).optional()
+  }).strict().optional(),
+  // Capability vocabulary, widened one field at a time by later tasks.
+  capabilities: z.object({
+    /** Starter prompts shown on the empty thread; clicking one sends it.
+     *  1-6 non-empty strings — construct-authored text, escaped like
+     *  `theme.accent`/`provider.url` at every emit interpolation site. */
+    starters: z.array(z.string().min(1)).min(1).max(6).optional(),
+    /** Enables the paperclip attach affordance; accept is a non-empty
+     *  list of media types/globs, e.g. ["image/*", "application/pdf"] —
+     *  WHETHER stays with the construct author (this field), HOW stays
+     *  with the kit (ChatThread's own attach/accept props, threaded
+     *  through by codegen). */
+    attachments: z.object({
+      /** Accept-list of media types/globs, e.g. ["image/*", "application/pdf"]. */
+      accept: z.array(z.string().min(1)).min(1)
+    }).strict().optional(),
+    /** Conversation persistence. `none` (default, nothing emitted): the
+     *  thread lives only in memory for the tab's lifetime. `local`:
+     *  persisted to this browser's localStorage, keyed by the construct's
+     *  tag — a mechanism decision (WHERE); what to retain and for how
+     *  long stays an app decision (component-scope-boundary), so no
+     *  retention count/quota lands here. `endpoint`: the CONSUMER's own
+     *  thread route (GET returns ChatMessage[], PUT stores them) —
+     *  requires `url`; `url` is rejected for any other persistence
+     *  (superRefine below, both directions loud). */
+    history: z.object({
+      persistence: z.enum(["none", "local", "endpoint"]),
+      /** endpoint persistence only: the CONSUMER's thread routes (GET returns
+       *  ChatMessage[], PUT stores them). Refined below. */
+      url: z.string().min(1).optional()
+    }).strict().optional(),
+    /** How the model's thinking (reasoning parts) renders. `'full'`
+     *  (the default when omitted — see codegen.ts's emitReasoningProp)
+     *  is the collapsible "Thinking" disclosure, shimmering while it
+     *  streams. `'compact'` shows only a shimmer/typing loader while
+     *  reasoning streams, with no expandable detail. `'off'` hides
+     *  reasoning entirely. This is HOW an existing medium fact (the
+     *  model's thinking) displays — the kit's call — so it maps straight
+     *  onto ChatThread's own `reasoning` prop; there is no app-layer
+     *  quota or retention decision hiding in it. Left `.optional()`
+     *  rather than `.default('full')`, matching every sibling field in
+     *  this object: a zod `.default()` here would make `reasoning`
+     *  REQUIRED on the inferred input type (z.infer is the output type),
+     *  breaking every `capabilities: {...}` object literal in this file
+     *  and its tests that doesn't mention it. */
+    reasoning: z.enum(["full", "compact", "off"]).optional(),
+    /** Seeds the reasoning disclosure open AND keeps it tracking the
+     *  stream (open while streaming, closes when it settles) — the
+     *  pre-Task-19f `full` behavior. Default false/absent: the panel
+     *  starts closed (just the "Thinking" shimmer chip) and only opens
+     *  on click — the current default (owner ruling, 2026-08-26).
+     *  Meaningless when `reasoning` is `'compact'` (no expandable
+     *  content exists) or `'off'` (nothing renders); rejected on both,
+     *  loudly, below. */
+    reasoningOpen: z.boolean().optional(),
+    /** Turns on the prior-conversations list (C-1..C-9 of the
+     *  conversations design). `true` only — there is no `false` form,
+     *  matching this schema's other presence-only capability flags.
+     *  Requires `capabilities.history.persistence` to be `local` or
+     *  `endpoint` (superRefine below, loud): a conversation list with
+     *  nowhere to persist conversations is not a coherent construct.
+     *  WHAT persists (this field, plus history) stays construct
+     *  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.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.object({
+      user: z.array(z.enum(CHAT_MESSAGE_ACTIONS)).min(1).optional(),
+      assistant: z.array(z.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.object({
+      strip: z.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
+   *  something the construct's model can DO at any point once a card is
+   *  declared, not a thread-affordance toggle like starters/attachments/
+   *  reasoning. Reuses the kit's own card-tool projection end to end
+   *  (`cardTools`/`toOpenAITools`/`toAnthropicTools`, `@kitn.ai/ui/schemas`)
+   *  — never a second one authored here. `schema` is validated structurally
+   *  only; deep card validation (incl. `x-kai-format` mask hints) is the
+   *  kit's own card contract at render time. */
+  cards: z.array(
+    z.object({
+      /** Tool-facing card name, e.g. "refund_approval". */
+      name: z.string().regex(/^[a-z][a-z0-9_]*$/),
+      /** The kit's card schema JSON (incl. x-kai-format mask hints).
+       *  Validated structurally here; deep card validation is the kit's
+       *  own card contract at render time. */
+      schema: z.record(z.string(), z.unknown())
+    }).strict()
+  ).min(1).optional(),
+  /** Named `<slot>` projection points the emitted web component exposes —
+   *  the format's ONLY escape hatch (named slots, no code-in-JSON). Each
+   *  name must be a valid HTML slot-attribute value AND a legible
+   *  identifier: kebab-case, starting with a letter (the same shape as a
+   *  CSS custom-ident) — `slot name="Header!"` is rejected, not sanitized,
+   *  matching the format's loud-rejection discipline everywhere else.
+   *  1-8 entries, no duplicates (superRefine below — a regex alone can't
+   *  see across array entries). `layout: 'custom'` requires at least one
+   *  declared slot (superRefine below): `custom` IS the slots grain — a
+   *  `custom` layout with nothing to project into is not meaningfully
+   *  different from `fullscreen`. */
+  slots: z.array(z.string().regex(/^[a-z][a-z0-9-]*$/, "slot names must be kebab-case, starting with a letter")).min(1).max(8).optional(),
+  /** Layout-scoped FAB chrome, `layout: 'widget'` only (superRefine below).
+   *  Purely additive sibling to `layout` (widen-never-restructure) — mirrors
+   *  Dock's own props verbatim, threaded through by codegen's emitLayoutOpen. */
+  widget: z.object({
+    /** Which corner. Mirrors Dock's own DockPosition enum verbatim — not a
+     *  new left/right binary. Omitted keeps Dock's own default (bottom-end). */
+    position: z.enum(["bottom-end", "bottom-start", "top-end", "top-start"]).optional(),
+    /** An image URL for the closed-state launcher glyph, replacing Dock's
+     *  built-in chat-bubble icon. Construct-authored/untrusted text, like
+     *  theme.accent and provider.url — escaped the same way at its one emit site. */
+    launcherIcon: z.string().min(1).optional(),
+    /** 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.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.object({
+    position: z.enum(["start", "end"]).optional(),
+    width: z.string().min(1).optional()
+  }).strict().optional(),
+  /** Layout-scoped work-surface pane, `layout: 'split'` only (superRefine
+   *  below, mirroring `widget`/`aside`). Fills the split's main region,
+   *  which otherwise reserves a column and renders nothing — the defect
+   *  this key exists to remove. Emitted as `<slot name="pane">` FALLBACK
+   *  content, so a consumer projecting their own pane still WINS (native
+   *  slot semantics: assigned nodes replace fallback).
+   *
+   *  Backed by `components/work-surface/work-surface.tsx`'s `WorkSurface`, promoted from
+   *  `stories/showcase/builder-workspace.stories.tsx` — the approved design AND a
+   *  working implementation. Every key below is one real affordance that
+   *  component ships; an affordance with no mechanism is not here.
+   *
+   *  TOP-LEVEL, not a capability: it is layout chrome, the same class as
+   *  `widget`/`aside`, and the placement is forced by the gate as well —
+   *  `scripts/verify-construct.mjs` can only layout-scope TOP-LEVEL keys
+   *  (`TOP_LEVEL_LAYOUT_SCOPE`); a capability valid only on `split` would
+   *  make every non-split capability cell fail validation.
+   *
+   *  `sandbox` is deliberately NOT exposed — the same reasoning
+   *  `ArtifactCardData` already records: a surface someone else authored
+   *  must not be able to widen its own sandbox. */
+  workSurface: z.object({
+    /** What the pane FRAMES it as. `'preview'` fills the canvas edge to
+     *  edge (a browser preview); `'artifact'` centers the content in a
+     *  bordered card on the muted backdrop (a framed artifact). Also
+     *  picks the iframe's accessible title. It does NOT imply any
+     *  chrome: every affordance below is stated explicitly, so what the
+     *  builder panel shows and what the pane renders can never disagree. */
+    kind: z.enum(["artifact", "preview"]),
+    /** What the pane frames. REQUIRED — an optional url reproduces
+     *  exactly the empty pane this round exists to remove. Reaches an
+     *  iframe `src`, so isSafeUrl in superRefine below, the same shape
+     *  as `widget.launcherIcon` / `empty.icon`. */
+    url: z.string().min(1),
+    /** What the Code tab frames. OPTIONAL even with `chrome.codeView` on:
+     *  the tab then renders `WorkSurface`'s own empty state, which says
+     *  what it reads and names this key (owner ruling, 2026-08-30). The
+     *  coupling runs ONE way (superRefine below) — a source with no tab to
+     *  show it is unreachable, so `codeUrl` alone is still rejected. Same
+     *  url policy as `url`. */
+    codeUrl: z.string().min(1).optional(),
+    /** Per-affordance toolbar chrome. Each key is ONE affordance
+     *  `WorkSurface` really ships; absent means OFF, the same
+     *  off-by-default convention as every capability in this file. */
+    chrome: z.object({
+      /** Desktop/tablet/mobile canvas widths, scoping the PREVIEW
+       *  branch only (never the Code view) — Lovable's own rule,
+       *  carried through the story. */
+      deviceToggle: z.boolean().optional(),
+      /** The read-only address bar (lock icon + address text). */
+      urlBar: z.boolean().optional(),
+      /** The open-in-new-tab button. */
+      openInNewTab: z.boolean().optional(),
+      /** The expand toggle. Collapses the chat rail via
+       *  WorkspaceShell's own controlled `startCollapsed` — NOT the
+       *  kai-resizable maximize protocol, which WorkspaceShell does
+       *  not carry (recorded in the story's own module comment). */
+      expand: z.boolean().optional(),
+      /** The Preview|Code segmented toggle. Stands alone — with no
+       *  `codeUrl` the Code tab renders its empty state rather than
+       *  refusing to validate. */
+      codeView: z.boolean().optional()
+    }).strict().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.object({
+    commandPalette: z.literal(true).optional(),
+    userMenu: z.object({
+      name: z.string().min(1),
+      plan: z.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.object({
+    triggers: z.object({
+      slash: z.array(TriggerEntrySchema).min(1).optional(),
+      mention: z.array(TriggerEntrySchema).min(1).optional()
+    }).strict().optional()
+  }).strict().optional()
+}).strict().superRefine((construct, ctx) => {
+  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.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.ZodIssueCode.custom,
+          path: ["slots"],
+          message: '"custom" layout requires at least one declared slot — custom IS the slots grain'
+        });
+      }
+    }
+  },
+  {
+    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.ZodIssueCode.custom,
+            path: ["slots", i],
+            message: `"pane" collides with the "split" layout's own fixed <slot name="pane"> — choose a different slot name`
+          });
+        }
+      }
+    }
+  },
+  {
+    id: "widget-layout-scope",
+    paths: ["layout", "widget"],
+    check: (construct, ctx) => {
+      if (construct.widget && construct.layout !== "widget") {
+        ctx.addIssue({
+          code: z.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.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.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.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.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.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.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.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.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.ZodIssueCode.custom,
+          path: ["capabilities", "history", "url"],
+          message: '"endpoint" persistence requires a url'
+        });
+      }
+      if (history.persistence !== "endpoint" && history.url !== void 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["capabilities", "history", "url"],
+          message: 'url is only valid with "endpoint" persistence'
+        });
+      }
+    }
+  },
+  {
+    id: "work-surface-layout-scope",
+    paths: ["layout", "workSurface"],
+    check: (construct, ctx) => {
+      if (construct.workSurface && construct.layout !== "split") {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["workSurface"],
+          message: '"workSurface" is only valid on layout: "split"'
+        });
+      }
+    }
+  },
+  {
+    id: "work-surface-url",
+    paths: ["workSurface.url"],
+    check: (construct, ctx) => {
+      if (construct.workSurface && !isSafeUrl(construct.workSurface.url)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["workSurface", "url"],
+          message: "url must be an http(s)/mailto or relative URL — no javascript:/data: schemes"
+        });
+      }
+    }
+  },
+  {
+    id: "work-surface-code-url",
+    paths: ["workSurface.codeUrl"],
+    check: (construct, ctx) => {
+      const codeUrl = construct.workSurface?.codeUrl;
+      if (codeUrl && !isSafeUrl(codeUrl)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["workSurface", "codeUrl"],
+          message: "codeUrl must be an http(s)/mailto or relative URL — no javascript:/data: schemes"
+        });
+      }
+    }
+  },
+  {
+    id: "work-surface-code-view",
+    paths: ["workSurface.codeUrl", "workSurface.chrome.codeView"],
+    check: (construct, ctx) => {
+      const ws = construct.workSurface;
+      if (!ws) return;
+      if (ws.codeUrl && !ws.chrome?.codeView) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["workSurface", "codeUrl"],
+          message: 'codeUrl is only valid with "chrome.codeView": true'
+        });
+      }
+    }
+  }
+];
+function validateConstruct(input) {
+  const parsed = ConstructSchema.safeParse(input);
+  if (parsed.success) return { ok: true, construct: parsed.data };
+  return {
+    ok: false,
+    problems: parsed.error.issues.flatMap((issue) => {
+      if (issue.code === "unrecognized_keys") {
+        return issue.keys.map((key) => ({
+          path: [...issue.path.map(String), key].join("."),
+          message: `"${key}" is not construct vocabulary`
+        }));
+      }
+      return [
+        {
+          path: issue.path.map(String).join("."),
+          message: issue.message
+        }
+      ];
+    })
+  };
+}
+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"],
+  hints: {
+    "header.actions": "Each button dispatches `kai-header-action` for your app to handle — nothing happens until you listen."
+  }
+};
+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"
+  ],
+  hints: {
+    "capabilities.history": "Endpoint needs a thread route you host. Local keeps history in this browser — no backend, nothing metered.",
+    "capabilities.reasoningOpen": "Off by owner ruling (2026-08-26): the thinking panel starts closed and opens on click."
+  }
+};
+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 WORK_SURFACE = {
+  id: "workSurface",
+  paths: [
+    "workSurface.kind",
+    "workSurface.url",
+    "workSurface.codeUrl",
+    "workSurface.chrome.deviceToggle",
+    "workSurface.chrome.urlBar",
+    "workSurface.chrome.openInNewTab",
+    "workSurface.chrome.expand",
+    "workSurface.chrome.codeView"
+  ],
+  hints: {
+    // Both hints rewritten 2026-08-30 with the one-way coupling: the toggle no
+    // longer needs a URL to be switched on, so the old "leave it blank and the
+    // tab stays hidden" was describing a rule that no longer exists.
+    "workSurface.codeUrl": "The Code tab reads source from this URL. Leave it blank and the tab says so — it never frames a missing page.",
+    "workSurface.chrome.codeView": "Shows the Preview|Code toggle. Fine to switch on before you have a Code URL."
+  }
+};
+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"],
+  // Rewritten with S-1's scripted mocks: the old "the mock provider never
+  // emits one" stopped being true when mockScriptFor started scripting a
+  // `kai_<card>` call for any construct that declares a card.
+  hints: { cards: "Cards arrive as tool calls from a model. Declare one and the mock scripts a call to it, so it renders keylessly." }
+};
+const PROVIDER = {
+  id: "provider",
+  paths: ["provider"],
+  hints: { provider: "Endpoint needs your own chat route. Mock streams locally, with no key and no bill." }
+};
+const widgetStarter = {
+  $schema: CONSTRUCT_SCHEMA_URL,
+  name: "support-widget",
+  layout: "widget",
+  provider: { mode: "mock" },
+  header: { title: "Support" },
+  theme: { 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,
+    // Stated, not implied — the anchored-on-the-default convention (B-4), so
+    // the fact is visible and editable in the template's own JSON.
+    reasoning: "full",
+    // The owner's A3 default matrix (builder-message-actions.tsx).
+    messageActions: { user: ["edit"], assistant: ["copy", "like", "dislike"] }
+  }
+};
+const inAppAssistantStarter = {
+  $schema: CONSTRUCT_SCHEMA_URL,
+  name: "in-app-assistant",
+  layout: "aside",
+  provider: { mode: "mock" },
+  header: { title: "Assistant", themeToggle: true },
+  // 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: { mode: "dark" },
+  // codegen's own defaults, stated so the geometry is visible/editable.
+  aside: { position: "end", width: "380px" },
+  empty: {
+    title: "What can I help with?",
+    description: "Ask about this page, or anything else."
+  },
+  composer: {
+    triggers: {
+      slash: [
+        { id: "summarize", label: "summarize", description: "Summarize the thread so far" },
+        { id: "explain", label: "explain", description: "Explain the current page" }
+      ],
+      mention: [
+        { id: "docs", label: "docs", description: "Search the documentation" },
+        { id: "support", label: "support", description: "Hand off to a person" }
+      ]
+    }
+  },
+  capabilities: {
+    starters: ["Deploy payments to production", "Check the canary status"],
+    attachments: { accept: ["image/*", "application/pdf"] },
+    history: { persistence: "local" },
+    conversations: true,
+    reasoning: "full",
+    messageActions: { user: ["edit"], assistant: ["copy", "like", "dislike"] }
+  }
+};
+const assistantStarter = {
+  $schema: CONSTRUCT_SCHEMA_URL,
+  name: "daily-assistant",
+  layout: "fullscreen",
+  provider: { mode: "mock" },
+  header: { title: "Assistant", themeToggle: true },
+  // Dark-by-default (owner ruling, dark round) — see inAppAssistantStarter's
+  // note above.
+  theme: { mode: "dark" },
+  shell: { commandPalette: true, userMenu: { name: "Ada", plan: "Pro" } },
+  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,
+    reasoning: "full",
+    messageActions: { user: ["edit"], assistant: ["copy", "like", "dislike"] }
+  }
+};
+const researchStarter = {
+  $schema: CONSTRUCT_SCHEMA_URL,
+  name: "research-assistant",
+  layout: "fullscreen",
+  provider: { mode: "mock" },
+  header: { title: "Research", themeToggle: true },
+  // Dark-by-default (owner ruling, dark round) — see inAppAssistantStarter's
+  // note above.
+  theme: { mode: "dark" },
+  empty: {
+    title: "What do you want to know?",
+    description: "Answers come back with their sources attached."
+  },
+  capabilities: {
+    starters: ["How does the wire adapter work?", "What are message parts?"],
+    attachments: { accept: ["application/pdf"] },
+    history: { persistence: "local" },
+    conversations: true,
+    reasoning: "full",
+    // 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: { mode: "dark" },
+  empty: {
+    title: "What should we build?",
+    description: "Describe it, and it takes shape in the work surface beside this chat."
+  },
+  // The template's whole point, and the reason this round exists: a split
+  // layout with no workSurface previews as a chat beside an empty column.
+  // Every chrome key is STATED, never left to a default — what the builder
+  // panel shows and what the pane renders can then never disagree.
+  workSurface: {
+    kind: "artifact",
+    url: "/work-surface.html",
+    chrome: { deviceToggle: false, urlBar: false, openInNewTab: false, expand: true, codeView: false }
+  },
+  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" },
+    conversations: true,
+    reasoning: "full",
+    messageActions: { user: ["edit"], assistant: ["copy", "like", "dislike"] }
+  }
+};
+const workspaceArtifactPreview = {
+  ...workspaceBase,
+  name: "artifact-workspace",
+  // A clean framed surface: one expand control, no browser chrome. The
+  // difference from appPreview below is what the two variant CARDS promise,
+  // and until 2026-08-30 the two starters delivered none of it.
+  // `codeView` stays OFF here on the owner's ruling: an artifact pane frames a
+  // finished thing, not a source tree, so a Code tab beside it would be
+  // chrome the variant does not claim. appPreview below is the one that does.
+  workSurface: {
+    kind: "artifact",
+    url: "/work-surface.html",
+    chrome: { deviceToggle: false, urlBar: false, openInNewTab: false, expand: true, codeView: false }
+  }
+};
+const workspaceAppPreview = {
+  ...workspaceBase,
+  name: "app-workspace",
+  // Full browser chrome: device toggle, address bar, open-in-new-tab, expand,
+  // and the Preview|Code toggle. `codeView: true` with no `codeUrl` is valid
+  // vocabulary (owner ruling, 2026-08-30) and it is what this variant needs:
+  // the app-preview surface it is modeled on shows both tabs, so shipping the
+  // toggle off meant nobody ever saw it. With no source pointed at it the tab
+  // renders WorkSurface's own empty state naming `workSurface.codeUrl` — an
+  // honest "nothing here yet", never a 404. No `codeUrl` is set because there
+  // is no honest offline file to point at; the placeholder codegen emits is
+  // the PREVIEW's page, not source.
+  workSurface: {
+    kind: "preview",
+    url: "/work-surface.html",
+    chrome: { deviceToggle: true, urlBar: true, openInNewTab: true, expand: true, codeView: true }
+  },
+  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, EMPTY, HOME, CAPABILITIES, MESSAGE_ACTIONS, 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_CHROME, EMPTY, 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_CHROME, 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_CHROME, EMPTY, 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,
+      WORK_SURFACE,
+      SHELL,
+      COMPOSER_TRIGGERS,
+      CAPABILITIES,
+      MESSAGE_ACTIONS,
+      EMPTY,
+      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");
+}
+function templateById(id) {
+  return TEMPLATES.find((t) => t.id === id);
+}
+function inferTemplateId(c) {
+  switch (c.layout) {
+    case "widget":
+      return "widget";
+    case "aside":
+      return "inAppAssistant";
+    case "split":
+      return "workspace";
+    case "fullscreen":
+      return c.capabilities?.sources ? "research" : "assistant";
+    default:
+      return void 0;
+  }
+}
+const DOCS = "https://ui.kitn.ai";
+function gatesOf(c) {
+  return {
+    // 'full' and 'compact' both render; only 'off' hides reasoning. Absent
+    // means the kit default (full), so absent includes it too.
+    reasoning: c.capabilities?.reasoning !== "off",
+    // `strip: false` emits hideSources — scripting citations nobody can see
+    // would be a silent lie, so the gate follows the visible switch.
+    sources: c.capabilities?.sources !== void 0 && c.capabilities.sources.strip !== false,
+    cardName: c.cards?.[0]?.name
+  };
+}
+function turn(g, t) {
+  const out = {};
+  if (g.reasoning && t.reasoning !== void 0) out.reasoning = t.reasoning;
+  if (t.text !== void 0) out.text = t.text;
+  if (g.sources && t.sources !== void 0) out.sources = t.sources;
+  if (t.toolCalls !== void 0) out.toolCalls = t.toolCalls;
+  return out;
+}
+function cardCall(name) {
+  return { name: `kai_${name}`, arguments: {} };
+}
+const CITE_WIRE = {
+  url: `${DOCS}/guides/recipes/wire-adapter/`,
+  title: "The wire adapter — AI/UI docs",
+  snippet: "The kit parses, the consumer fetches: readOpenAIStream and readAnthropicStream turn provider SSE into message parts."
+};
+const CITE_PARTS = {
+  url: `${DOCS}/guides/state-and-hooks/`,
+  title: "State and hooks — AI/UI docs",
+  snippet: "A message is an ordered list of parts: text, reasoning, tool, card, source, file."
+};
+const CITE_THEME = {
+  url: `${DOCS}/guides/theming/`,
+  title: "Theming — AI/UI docs"
+};
+function widgetScript(g) {
+  const replies = [
+    turn(g, {
+      reasoning: "An order question. Look the order up before answering — guessing a delivery date is worse than a short wait.",
+      text: "Let me pull up that order.",
+      toolCalls: [{ name: "lookup_order", arguments: { order: "KAI-1042" } }]
+    }),
+    turn(g, {
+      text: "Order KAI-1042 shipped with DHL and should arrive Thursday. (I'm a local mock — no provider was contacted — but a real model's tool call renders exactly like the row above.)"
+    }),
+    turn(
+      g,
+      g.cardName ? {
+        reasoning: "A refund request. Collect the details on a card and let them confirm — never assume the amount.",
+        text: "I can start that refund. Check the details below and confirm.",
+        toolCalls: [cardCall(g.cardName)]
+      } : { text: "Anything else? Still the mock: swap the provider seam for your endpoint and this handler keeps its exact shape." }
+    )
+  ];
+  return {
+    replies,
+    toolOutputs: {
+      lookup_order: { order: "KAI-1042", status: "shipped", carrier: "DHL", eta: "Thursday" }
+    }
+  };
+}
+function inAppAssistantScript(g) {
+  const replies = [
+    turn(g, {
+      reasoning: "A question about the current page. Search the docs before answering from memory.",
+      text: "Checking the docs for that.",
+      toolCalls: [{ name: "search_docs", arguments: { query: "deploy checklist" } }]
+    }),
+    turn(g, {
+      text: "Found it: the deploy checklist wants a green canary before promoting. (Local mock, no provider contacted — the tool row above streamed through the kit's real parser.)",
+      sources: [CITE_PARTS]
+    }),
+    turn(
+      g,
+      g.cardName ? {
+        reasoning: "This needs explicit confirmation — put a card in the thread instead of assuming.",
+        text: "Confirm the details below and I will take it from there.",
+        toolCalls: [cardCall(g.cardName)]
+      } : {
+        reasoning: "Follow-up. Keep it short.",
+        text: "Anything else on this page? Swap the mock for your endpoint and this handler does not change shape."
+      }
+    )
+  ];
+  return {
+    replies,
+    toolOutputs: {
+      search_docs: { matches: 3, top: "Deploy checklist — promote only on a green canary." }
+    }
+  };
+}
+function assistantScript(g) {
+  const replies = [
+    turn(g, {
+      reasoning: "A drafting request. Sketch the structure first, then write — a board update wants numbers before narrative.",
+      text: "Here is a first pass at the Q3 update: revenue, retention, and the two launches, in that order. (I'm a local mock — no provider, no key — streaming through the kit's real parser.)"
+    }),
+    turn(g, {
+      reasoning: "Summarizing means reading first. Fetch the document, then compress.",
+      text: "Give me a second to read the document.",
+      toolCalls: [{ name: "read_document", arguments: { name: "q3-metrics.pdf" } }]
+    }),
+    turn(
+      g,
+      g.cardName ? {
+        text: "One decision left — confirm below.",
+        toolCalls: [cardCall(g.cardName)]
+      } : {
+        text: "Summary: revenue up 12%, retention flat, both launches on schedule. Still the mock — swap the seam for a real backend and nothing else changes."
+      }
+    )
+  ];
+  return {
+    replies,
+    toolOutputs: {
+      read_document: { pages: 14, headline: "Revenue up 12% QoQ; retention flat." }
+    }
+  };
+}
+function researchScript(g) {
+  const replies = [
+    turn(g, {
+      reasoning: "A research question. Search first, then answer with the sources attached — an uncited claim is not an answer here.",
+      text: "Searching for that now.",
+      toolCalls: [{ name: "web_search", arguments: { query: "how does the wire adapter work" } }]
+    }),
+    turn(g, {
+      reasoning: "Three of the results agree. Cite the two strongest and quote the load-bearing sentence.",
+      text: "The wire adapter parses provider SSE into message parts — the kit parses, your app fetches [1]. Each streamed part lands in an ordered list on the message, which is what the thread renders [2]. (I'm a local mock, so these citations are scripted — but they render through the exact path a real model's take.)",
+      sources: [CITE_WIRE, CITE_PARTS]
+    }),
+    turn(g, {
+      reasoning: "Follow-up on theming. One source is enough.",
+      text: "Theming rides CSS custom properties on the host element — restyle without touching the shadow DOM [1].",
+      sources: [CITE_THEME]
+    })
+  ];
+  return {
+    replies,
+    toolOutputs: {
+      web_search: { results: 12, top: "ui.kitn.ai — Wire adapters" }
+    }
+  };
+}
+function workspaceScript(g) {
+  const replies = [
+    turn(g, {
+      reasoning: "A build request. Scaffold the smallest version that renders, apply it to the work surface, then iterate on feedback.",
+      text: "First pass coming up — watch the work surface beside this chat. (I'm a local mock: the preview is a placeholder page, but a real build loop's tool calls render exactly like this.)",
+      toolCalls: [{ name: "apply_to_work_surface", arguments: { file: "work-surface.html", change: "scaffold the page" } }]
+    }),
+    turn(g, {
+      reasoning: "Revision. Keep the structure, adjust the section they named.",
+      text: "Revised — the hero now stacks on narrow screens. Tell me what to change next.",
+      toolCalls: [{ name: "apply_to_work_surface", arguments: { file: "work-surface.html", change: "stack the hero on mobile" } }]
+    }),
+    turn(
+      g,
+      g.cardName ? {
+        text: "Ready to ship? Confirm below.",
+        toolCalls: [cardCall(g.cardName)]
+      } : {
+        text: "Done for this round. Swap the mock seam for your endpoint and the loop keeps this exact shape."
+      }
+    )
+  ];
+  return {
+    replies,
+    toolOutputs: {
+      apply_to_work_surface: { file: "work-surface.html", status: "applied" }
+    }
+  };
+}
+function genericScript(g) {
+  const replies = [
+    turn(g, {
+      reasoning: "Answer plainly, and show every content type this construct enables while doing it.",
+      text: "Hi! I'm a local mock — no backend, no key, no provider contacted — streaming through the same parser a real model would.",
+      sources: [CITE_PARTS]
+    }),
+    turn(g, {
+      reasoning: "Demonstrate the tool path: announce a call, let the app settle it.",
+      text: "Here is a tool call, parsed and settled through the real path.",
+      toolCalls: [{ name: "demo_tool", arguments: { note: "scripted by the mock" } }]
+    }),
+    turn(
+      g,
+      g.cardName ? { text: "And a card — confirm below.", toolCalls: [cardCall(g.cardName)] } : { text: "Swap `createMockResponder` for a fetch to your endpoint and this handler keeps its exact shape." }
+    )
+  ];
+  return {
+    replies,
+    toolOutputs: { demo_tool: { ok: true, note: "scripted by the mock" } }
+  };
+}
+function mockScriptFor(c) {
+  const g = gatesOf(c);
+  const script = (() => {
+    switch (inferTemplateId(c)) {
+      case "widget":
+        return widgetScript(g);
+      case "inAppAssistant":
+        return inAppAssistantScript(g);
+      case "assistant":
+        return assistantScript(g);
+      case "research":
+        return researchScript(g);
+      case "workspace":
+        return workspaceScript(g);
+      default:
+        return genericScript(g);
+    }
+  })();
+  const announced = new Set(
+    script.replies.flatMap(
+      (r) => typeof r === "string" ? [] : (r.toolCalls ?? []).map((t) => t.name)
+    )
+  );
+  const toolOutputs = Object.fromEntries(
+    Object.entries(script.toolOutputs).filter(([name]) => announced.has(name))
+  );
+  return { replies: script.replies, toolOutputs };
+}
+function kitVersion() {
+  const require2 = createRequire(import.meta.url);
+  const pkg = require2("@kitn.ai/ui/package.json");
+  return pkg.version;
+}
+const themeMode = (c) => c.theme?.mode === "light" ? "light" : c.theme?.mode === "dark" ? "dark" : "auto";
+function srgbChannelToLinear(c) {
+  const cs = c / 255;
+  return cs <= 0.03928 ? cs / 12.92 : Math.pow((cs + 0.055) / 1.055, 2.4);
+}
+function relativeLuminance(r, g, b) {
+  return 0.2126 * srgbChannelToLinear(r) + 0.7152 * srgbChannelToLinear(g) + 0.0722 * srgbChannelToLinear(b);
+}
+function hslToRgb(h, s, l) {
+  const hue = (h % 360 + 360) % 360;
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  const x = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+  const m = l - chroma / 2;
+  const [r1, g1, b1] = hue < 60 ? [chroma, x, 0] : hue < 120 ? [x, chroma, 0] : hue < 180 ? [0, chroma, x] : hue < 240 ? [0, x, chroma] : hue < 300 ? [x, 0, chroma] : [chroma, 0, x];
+  return [Math.round((r1 + m) * 255), Math.round((g1 + m) * 255), Math.round((b1 + m) * 255)];
+}
+function parseAccentRgb(accent) {
+  const s = accent.trim();
+  const hex3 = /^#([0-9a-fA-F]{3})$/.exec(s);
+  if (hex3) {
+    const [r, g, b] = hex3[1].split("").map((ch) => parseInt(ch + ch, 16));
+    return [r, g, b];
+  }
+  const hex6 = /^#([0-9a-fA-F]{6})([0-9a-fA-F]{2})?$/.exec(s);
+  if (hex6) {
+    const hex = hex6[1];
+    return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)];
+  }
+  const rgbFn = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*[\d.]+\s*)?\)$/.exec(s);
+  if (rgbFn) {
+    const [r, g, b] = [rgbFn[1], rgbFn[2], rgbFn[3]].map(Number);
+    return [r, g, b].every((v) => v >= 0 && v <= 255) ? [r, g, b] : null;
+  }
+  const hslFn = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*[\d.]+\s*)?\)$/.exec(s);
+  if (hslFn) {
+    return hslToRgb(Number(hslFn[1]), Number(hslFn[2]) / 100, Number(hslFn[3]) / 100);
+  }
+  return null;
+}
+function resolveContrastForeground(accent) {
+  const rgb = parseAccentRgb(accent);
+  if (!rgb) return null;
+  const luminance = relativeLuminance(...rgb);
+  return luminance <= 0.5 ? "#ffffff" : "#000000";
+}
+function commentSafe(text) {
+  return text.replace(/[\r\n]/g, " ").replace(/\*\//g, "* /");
+}
+const CONTRAST_COLOR_SUPPORTS = "@supports (color: contrast-color(red))";
+function accentContrastNotice(construct) {
+  const effective = construct.theme?.tokens?.light?.["--kai-color-primary"] ?? construct.theme?.accent;
+  if (!effective || resolveContrastForeground(effective) !== null) return null;
+  return `accent '${commentSafe(effective)}' not parseable for contrast; foreground left at theme default in browsers without CSS contrast-color() support`;
+}
+function generateProject(construct, opts = {}) {
+  const uiSpec = opts.uiSpec ?? `^${kitVersion()}`;
+  const files = [
+    { path: "package.json", code: emitPackageJson(construct, uiSpec) },
+    { path: "tsconfig.json", code: emitTsconfig() },
+    { path: "vite.config.ts", code: emitViteDev() },
+    { path: "vite.config.lib.ts", code: emitViteLib(construct) },
+    { path: "index.html", code: emitIndexHtml(construct) },
+    { path: "src/element.tsx", code: emitElement(construct) },
+    { path: "src/App.tsx", code: emitApp(construct) }
+  ];
+  if (construct.cards) files.push({ path: "src/cards.ts", code: emitCardsRegistry(construct.cards) });
+  const ws = workSurfaceOf(construct);
+  if (ws && workSurfaceUrlIsRelative(ws.url)) {
+    files.push({ path: WORK_SURFACE_PAGE, code: emitWorkSurfacePage(construct) });
+  }
+  return files;
+}
+function emitCardsRegistry(cards) {
+  const entries = cards.map((card) => `  ${card.name}: ${JSON.stringify(card.schema, null, 2).split("\n").join("\n  ")},`).join("\n");
+  return `// src/cards.ts — the construct's card registry, verbatim from the construct.
+// Tool definitions for YOUR backend derive from this same object via
+// @kitn.ai/ui/schemas (cardTools / toOpenAITools / toAnthropicTools) — one
+// projection, shared with the kit.
+export const cards = {
+${entries}
+} as const;
+`;
+}
+function emitCardComponentImport(c) {
+  return c.cards ? ", BUILTIN_CARD_COMPONENTS" : "";
+}
+function emitCardsImport(c) {
+  if (!c.cards) return "";
+  const toolsImport = c.provider.mode === "endpoint" ? c.provider.wire === "openai" ? ", toOpenAITools" : ", toAnthropicTools" : "";
+  return `import { cards } from './cards';
+// Generative-UI cards, v1: every declared card renders as the kit's own
+// schema-driven FORM (BUILTIN_CARD_COMPONENTS.form, components/form/form.tsx) — it
+// walks the card's JSON Schema into real input fields, honoring
+// x-kai-format/x-kai-mask/x-kai-mask-guide hints itself. ChatThread's own
+// MessageBody already matches \`part.type === 'card'\` in its part rendering and
+// draws it with the kit's own \`CardRenderer\` (components/card/card-renderer.tsx),
+// which picks the component from \`cardTypes\` (below) by envelope.type — so
+// there is nothing to hand-compose beyond that one map. Turning a model's tool
+// call into that renderable part is \`cardFromToolCall\` (the inverse of
+// \`cardTools\`), applied once per settled turn below; its data is then replaced
+// with the DECLARED card schema (not the model's call arguments) — the fields
+// on screen are the construct's own vocabulary, not whatever shape a model
+// happened to send.
+//
+// UPDATE (CD-1, owner ruling 2026-08-26, Task 19g): the field SHAPE (title/
+// type/widget/validation) still comes from the construct's own declared
+// schema, never the model's — that part is unchanged. But discarding the
+// model's call arguments wholesale also threw away any VALUE it wanted to
+// pre-fill, breaking "model proposes, user confirms" (kai_refund_approval
+// {amount:50} rendered an empty form). So the model's args are now
+// shallow-merged onto the declared schema's field \`default\`s below
+// (mergeToolArgsIntoFormDefaults) before the card is added — see
+// emitApplyCardTools.
+import { cardFromToolCall${toolsImport} } from '@kitn.ai/ui/schemas';
+
+// Every declared card name routes to the SAME form renderer — cardFromToolCall
+// makes envelope.type equal the card's own name (kai_refund_approval ->
+// 'refund_approval'), and CardRenderer resolves a type's component from this
+// map.
+//
+// Deliberately NOT also wiring ChatThread's \`cardSchemas\` prop to this
+// registry below. That prop validates envelope.data AGAINST the named schema,
+// and this card's data IS \`cards[name]\` itself (see emitApplyCardTools) — the
+// construct's declared field schema, not values shaped like it. Wiring it as
+// its own validator asks "does this FormDefinition itself have an \`amount\`
+// key" and a well-formed FormDefinition never does, so every card would
+// render the HARD validation-failure fallback instead of the form (caught
+// live: eject + kai dev showed exactly that "(root).amount: required"
+// failure before this comment existed). The construct's own schema.ts
+// already checks \`cards\` structurally at validate time; there is nothing
+// left for a second, self-referential check here to catch.
+const cardTypes = Object.fromEntries(Object.keys(cards).map((name) => [name, BUILTIN_CARD_COMPONENTS.form] as const));
+
+// CD-1 (owner ruling 2026-08-26, Task 19g): shallow-merge a model's card
+// tool-call args onto a DECLARED form schema's field defaults — "model
+// proposes, user confirms". Only top-level keys the args AND the schema both
+// name are touched; the schema's own field shape (title/type/widget/
+// validation) is never altered, and a key the model sent that isn't a
+// declared field is ignored (the construct's vocabulary wins, not the
+// model's). One level deep only — a nested object field's own defaults are
+// not recursed into; no evidence of need yet (vocabulary-on-evidence).
+function mergeToolArgsIntoFormDefaults(
+  schema: Record<string, unknown> & { properties?: Record<string, unknown> },
+  args: Record<string, unknown>,
+): Record<string, unknown> {
+  const declared = schema.properties;
+  if (!declared || typeof declared !== 'object') return schema;
+  const patched: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(args)) {
+    if (!(key in declared)) continue;
+    patched[key] = { ...(declared[key] as Record<string, unknown>), default: value };
+  }
+  return { ...schema, properties: { ...schema.properties, ...patched } };
+}`;
+}
+function emitCardTypesProp(c) {
+  return c.cards ? " cardTypes={cardTypes}" : "";
+}
+function emitSettleMockTools(hasOutputs) {
+  if (!hasOutputs) return "";
+  return `
+    for (const part of chat.messages().find((m) => m.id === stream.id)?.parts ?? []) {
+      if (part.type !== 'tool' || part.tool.state !== 'input-available' || !part.tool.toolCallId) continue;
+      const output = MOCK_TOOL_OUTPUTS[part.tool.type];
+      if (output) stream.upsertTool(part.tool.toolCallId, { state: 'output-available', output });
+    }`;
+}
+function emitApplyCardTools(c) {
+  if (!c.cards) return "";
+  return `
+    for (const part of chat.messages().find((m) => m.id === stream.id)?.parts ?? []) {
+      if (part.type !== 'tool' || part.tool.state !== 'input-available') continue;
+      const card = cardFromToolCall(part.tool.type, part.tool.input, { id: part.tool.toolCallId ?? crypto.randomUUID() });
+      if (card && card.type in cards) {
+        const declared = cards[card.type as keyof typeof cards];
+        const args = card.data as Record<string, unknown> | undefined;
+        const merged = args && typeof args === 'object'
+          ? mergeToolArgsIntoFormDefaults(declared, args)
+          : declared;
+        stream.addCard({ ...card, data: merged });
+      }
+    }`;
+}
+function emitToolsField(c) {
+  if (!c.cards || c.provider.mode !== "endpoint") return "";
+  const toolsFn = c.provider.wire === "openai" ? "toOpenAITools" : "toAnthropicTools";
+  return `, tools: ${toolsFn}(cards)`;
+}
+function emitPackageJson(c, uiSpec) {
+  return `${JSON.stringify(
+    {
+      name: c.name,
+      private: true,
+      type: "module",
+      scripts: {
+        dev: "vite",
+        build: "vite build --config vite.config.lib.ts",
+        typecheck: "tsc --noEmit"
+      },
+      dependencies: {
+        "@kitn.ai/ui": uiSpec,
+        "solid-js": "^1.9.0"
+      },
+      devDependencies: {
+        typescript: "^5.6.0",
+        vite: "^6.0.0",
+        "vite-plugin-solid": "^2.11.0"
+      }
+    },
+    null,
+    2
+  )}
+`;
+}
+function emitTsconfig() {
+  return `${JSON.stringify(
+    {
+      compilerOptions: {
+        target: "ES2022",
+        module: "ESNext",
+        moduleResolution: "bundler",
+        jsx: "preserve",
+        jsxImportSource: "solid-js",
+        strict: true,
+        noUnusedLocals: true,
+        skipLibCheck: true,
+        types: ["vite/client"]
+      },
+      include: ["src"]
+    },
+    null,
+    2
+  )}
+`;
+}
+function emitViteDev() {
+  return `import { defineConfig } from 'vite';
+import solid from 'vite-plugin-solid';
+
+export default defineConfig({ plugins: [solid()] });
+`;
+}
+function emitViteLib(c) {
+  return `import { defineConfig } from 'vite';
+import solid from 'vite-plugin-solid';
+
+// kai compile: ONE self-registering .js. Everything is inlined (no externals):
+// the consumer installs nothing but this output.
+export default defineConfig({
+  plugins: [solid()],
+  build: {
+    lib: { entry: 'src/element.tsx', formats: ['es'], fileName: () => '${c.name}.js' },
+  },
+});
+`;
+}
+function emitIndexHtml(c) {
+  const hint = c.layout === "widget" ? `
+    <p style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; color: #94a3b8; font: 14px system-ui, sans-serif; text-align: center; max-width: 28rem; padding: 0 1rem;">This blank page stands in for your site. The chat widget is in the bottom-right corner.</p>` : "";
+  const slotDemo = (c.slots ?? []).map(
+    (name) => `
+      <div slot="${name}" style="padding: 0.5rem 1rem; font: 13px system-ui, sans-serif; color: #64748b;">Projected into slot "${name}" — replace with your own markup.</div>`
+  ).join("");
+  const body = slotDemo ? `
+    <${c.name}>${slotDemo}
+    </${c.name}>` : `
+    <${c.name}></${c.name}>`;
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${c.name} — construct preview</title>
+  </head>
+  <body style="margin: 0;">${hint}${body}
+    <script type="module" src="/src/element.tsx"><\/script>
+  </body>
+</html>
+`;
+}
+function emitDarkTokensCss(entries) {
+  const lines = entries.map(([name, value]) => {
+    if (!KNOWN_THEME_TOKENS.has(name) || !name.startsWith("--kai-color-")) {
+      throw new Error(
+        `construct codegen: dark theme token "${name}" is not a declared --kai-color-* knob — was this construct validated?`
+      );
+    }
+    const problem = themeTokenValueProblem(value);
+    if (problem) {
+      throw new Error(
+        `construct codegen: dark theme token "${name}" has an unsafe value (${problem}) — was this construct validated?`
+      );
+    }
+    return `  ${name}: ${value};`;
+  });
+  return `.dark {
+${lines.join("\n")}
+}`;
+}
+function emitElement(c) {
+  const accent = c.theme?.accent;
+  const unreadColor = c.theme?.unreadColor;
+  const tokens = c.theme?.tokens;
+  const hostTokenEntries = [
+    ...Object.entries(tokens?.light ?? {}),
+    ...tokens?.radius ? [["--kai-radius", tokens.radius]] : [],
+    ...Object.entries(tokens?.fonts ?? {})
+  ];
+  const darkTokenEntries = Object.entries(tokens?.dark ?? {});
+  const usesCtx = !!accent || !!unreadColor || hostTokenEntries.length > 0 || needsHost(c);
+  const appJsx = needsHost(c) ? "<App host={ctx.element} />" : "<App />";
+  if (!accent && !unreadColor && hostTokenEntries.length === 0 && darkTokenEntries.length === 0) {
+    const facade2 = usesCtx ? `(_props, ctx) => {
+  return ${appJsx};
+}` : "() => <App />";
+    return `import { defineWebComponent } from '@kitn.ai/ui/define';
+import { App } from './App';
+
+// The one facade. Interior stays pure Solid (no nested element registrations);
+// the kit CSS is injected into the shadow root by defineWebComponent itself.
+defineWebComponent('${c.name}', { theme: '${themeMode(c)}' as 'light' | 'dark' | 'auto' }, ${facade2});
+`;
+  }
+  const setPropertyLines = [
+    ...accent ? [`  ctx.element.style.setProperty('--kai-color-primary', ${JSON.stringify(accent)});`] : [],
+    ...unreadColor ? [`  ctx.element.style.setProperty('--kai-color-unread', ${JSON.stringify(unreadColor)});`] : [],
+    ...hostTokenEntries.length ? [
+      "  // theme.tokens: after accent/unreadColor on purpose — same knob, the token wins.",
+      ...hostTokenEntries.map(
+        ([name, value]) => `  ctx.element.style.setProperty(${JSON.stringify(name)}, ${JSON.stringify(value)});`
+      )
+    ] : []
+  ];
+  const styleParts = [];
+  const effectivePrimary = tokens?.light?.["--kai-color-primary"] ?? accent;
+  if (effectivePrimary) {
+    const foreground = resolveContrastForeground(effectivePrimary);
+    const foregroundCss = foreground !== null ? `:host { --kai-color-primary-foreground: ${foreground}; }
+` : (
+      // Not guessed at: an unparseable accent (var(), a named color, a
+      // color-mix()/oklch() call, …) leaves NO base declaration, so the
+      // kit's own theme default stands — except in a browser new enough to
+      // resolve contrast-color() itself, where the @supports block below
+      // still gets it right natively.
+      `/* NOTICE: accent '${commentSafe(effectivePrimary)}' not parseable for contrast at generation time; the paired foreground falls back to the theme default in browsers without CSS contrast-color() support. */
+`
+    );
+    styleParts.push(
+      foregroundCss + `${CONTRAST_COLOR_SUPPORTS} {
+  :host { --kai-color-primary-foreground: contrast-color(var(--kai-color-primary)); }
+}`
+    );
+  }
+  if (darkTokenEntries.length) styleParts.push(emitDarkTokensCss(darkTokenEntries));
+  const styleText = styleParts.join("\n");
+  const setPropertyBlock = setPropertyLines.length ? `
+${setPropertyLines.join("\n")}` : "";
+  const facade = styleText ? `(${usesCtx ? "_props, ctx" : ""}) => {${setPropertyBlock}
+  return (
+    <>
+      <style>{${JSON.stringify(styleText)}}</style>
+      ${appJsx}
+    </>
+  );
+}` : (
+    // No CSS text needed (no accent, no dark tokens): setProperty calls only —
+    // e.g. an unreadColor-only or light-tokens-only construct.
+    `(_props, ctx) => {${setPropertyBlock}
+  return ${appJsx};
+}`
+  );
+  return `import { defineWebComponent } from '@kitn.ai/ui/define';
+import { App } from './App';
+
+// The one facade. Interior stays pure Solid (no nested element registrations);
+// the kit CSS is injected into the shadow root by defineWebComponent itself.
+defineWebComponent('${c.name}', { theme: '${themeMode(c)}' as 'light' | 'dark' | 'auto' }, ${facade});
+`;
+}
+function emitApp(c) {
+  if (c.layout === "custom") return emitCustomApp(c);
+  return `${emitSolidJsImports(c)}import { ChatThread, createKaiChat${emitLayoutImport(c)}${emitCardComponentImport(c)}${emitEmptyComponentImport(c)}${emitChromeImports(c)} } from '@kitn.ai/ui/solid';
+import type { AttachmentData${emitHistoryTypeImport(c)}${emitConversationsResetTypeImport(c)} } from '@kitn.ai/ui/solid';
+${emitProviderImports(c)}
+${emitCardsImport(c)}
+${emitConversationsImport(c)}
+
+${emitProviderSetup(c)}
+${emitHistorySetup(c)}
+
+// ChatThread is the kit's own MOST-INTEGRATED chat surface — the same
+// composition <kai-chat>'s facade renders (src/web-components/chat/chat.tsx). It owns
+// the message list, the composer (padding, focus ring, the send button) and
+// their layout AS ONE UNIT, so nothing here re-derives spacing, alignment or
+// focus styling by hand: every prior version of this file that hand-composed
+// Thread + PromptInput + Button was restating layout the kit already owns,
+// and every visual defect the owner hit (flush composer, a clipped focus
+// ring) traced back to that restatement. Composing ChatThread directly
+// leaves NOTHING here to restate it with.
+//
+// Capability gating (format rule: an undeclared capability's affordance must
+// be OFF). The construct schema carries ONE capability field so far
+// (capabilities.starters, Task 8) — every other affordance below is gated to
+// "off" unconditionally, not per-construct, until there's a field to gate ON.
+//   - webSearch / voice: real ChatThreadProps booleans, default OFF when
+//     omitted — set to \`false\` explicitly rather than left implicit, so the
+//     gating decision is visible in the emitted source, not just inferred
+//     from an absent prop.
+//   - suggestions: ChatThread ALREADY owns starter prompts end to end — its
+//     own \`suggestions\` prop renders the chips, hides them once
+//     \`messages\` is non-empty, and (default \`suggestionMode="submit"\`)
+//     calls \`onSubmit\` with the clicked text exactly like a typed submit.
+//     So capabilities.starters threads straight into that prop; there is
+//     nothing to hand-compose. Omitted (undefined) when no starters are
+//     declared, same off-by-default effect as the booleans above.
+//   - models: omitted (undefined) — no model switcher; no capabilities field yet.
+//   - attachments (the paperclip): gated via ChatThread's \`attach\`/\`accept\`
+//     props (kit gap closed — ChatThread forwards both to DefaultPromptInput,
+//     mirroring webSearch/voice). ChatThread ALREADY owns the whole
+//     round-trip end to end — the paperclip button, staged previews, staging
+//     each file as a data URI (never a blob object URL; see
+//     AttachmentData.url's doc in primitives/attachment-types.ts), and
+//     handing the staged list back via onSubmit's \`attachments\` — and its
+//     Message component ALREADY groups consecutive file parts into one
+//     attachment row (message.tsx). So there is nothing to hand-compose
+//     here, same lesson as suggestions above: hand-rolling a second picker or
+//     a second file-part renderer would restate what ChatThread/Message
+//     already own. capabilities.attachments threads straight into
+//     attach/accept; the only App.tsx-owned piece is folding the picked
+//     attachments into the outgoing message's parts at the submit site
+//     (see emitProviderSetup) since createKaiChat's own append/streamAssistant
+//     ops don't do that folding themselves.
+//   - reasoning: gated via ChatThread's own \`reasoning\` prop (kit gap closed
+//     — ChatThread forwards it to every MessageBody as \`reasoningMode\`,
+//     mirroring attach/accept). \`'full'\` is both the schema default and
+//     ChatThread's own default, so it and an absent field emit no prop at
+//     all — the SAME off-by-default convention as every other capability
+//     here, just anchored on the medium's existing default instead of an
+//     "off" value, since a reasoning disclosure is normal chat behavior, not
+//     an opt-in affordance like the paperclip or a starter chip.
+//   - empty (the welcome-screen greeting, Task 14): gated via ChatThread's
+//     own \`emptyContent\` prop, plain JSX rendered in the SAME shadow tree
+//     this file's App already composes ChatThread inside of (see
+//     emitEmptyContentProp's own doc for why that boundary needs no Portal
+//     at all). \`capabilities.starters\`' chips and the composer still render
+//     underneath it: ChatThread's own doc comment on \`emptyContent\` is
+//     explicit that it replaces only the empty MESSAGE LIST.
+//   - the widget close control (owner feedback on the live demo): a declared
+//     \`header.title\` on a \`widget\` layout gets its close button threaded
+//     into ChatThread's own header row via \`headerEndContent\`, wired back to
+//     Dock's \`controllerRef\` seam through a local closure — see
+//     emitDockCloseVar/emitHeaderEndContentProp's docs. No header means no
+//     row for it to sit in, so that case is untouched and Dock's own built-in
+//     mobile X keeps covering it.
+//   - conversations (Task 5): gated via ChatThread's own \`conversations\`/
+//     \`store\` props (kit-owned end to end — the prior-conversations list,
+//     list/load/save, autosave on every \`chat.messages()\` change). Requires
+//     capabilities.history persistence \`local\` or \`endpoint\` (schema
+//     superRefine, C-4) and SUBSUMES this file's hand-rolled history effect
+//     when on — see emitHistorySetup's own doc for the persistence-ownership
+//     decision: the store prop is the ONLY persistence mechanism emitted,
+//     never both. ChatThread never mutates \`messages\` itself, so
+//     \`onConversationLoad\` is ALSO wired here (\`chat.setMessages(() =>
+//     messages)\`) — without it, select/new/mount-restore all update
+//     ChatThread's own internal view/list state while the rendered thread
+//     never changes (see emitConversationsProps's own doc for the Task 6
+//     live-browser bug this fixes).
+//   - conversations + widget (owner follow-up): closing the widget while its
+//     list view is open must not leave it there for the next open — see
+//     widgetHasConversationsChrome/emitDockOnOpenChangeProp's docs. Wired only
+//     for \`widget\`, the one layout with something that closes/reopens at all.
+${emitChromeComment(c)}export function App(${needsHost(c) ? "props: { host: HTMLElement }" : ""}) {
+${emitToggleThemeVar(c, "  ")}${emitDockCloseVar(c, "  ")}${emitChatControllerVar(c, "  ")}${emitConversationsSignalsVar(c, "  ")}${emitShellPaletteVars(c, "  ")}${emitPaneProbeVar(c, "  ")}${emitWorkSurfaceVars(c, "  ")}${emitHeaderActionDispatchVar(c, "  ")}  return (
+${hasShellPalette(c) ? "    <>\n" : ""}${emitLayoutOpen(c)}${emitSlots(c.slots, "      ")}      <ChatThread messages={chat.messages()} loading={chat.loading()} placeholder="Ask anything" onSubmit={submit} webSearch={false} voice={false}${emitHeaderProp(c)}${emitHeaderEndContentProp(c)}${emitAttachProps(c)}${emitStartersProp(c)}${emitReasoningProp(c)}${emitReasoningOpenProp(c)}${emitMessageActionsProps(c)}${emitHideSourcesProp(c)}${emitTriggersProp(c)}${emitEmptyContentProp(c)}${emitCardTypesProp(c)}${emitHomeProp(c)}${emitConversationsProps(c)}${emitChatControllerRefProp(c)}${emitChatThreadUnreadProps(c)} />
+${emitLayoutClose(c)}${emitShellPaletteOverlay(c)}${hasShellPalette(c) ? "    </>\n" : ""}  );
+}
+`;
+}
+function emitCustomApp(c) {
+  const slots = c.slots ?? [];
+  const [headerSlot, ...restSlots] = slots;
+  const history = c.capabilities?.history;
+  const solidJsNames = ["createSignal", ...history && history.persistence !== "none" ? ["createEffect"] : []];
+  return `import { ${solidJsNames.join(", ")} } from 'solid-js';
+import { Thread, PromptInput, PromptInputTextarea, PromptInputActions, Button, createKaiChat${emitCardComponentImport(c)} } from '@kitn.ai/ui/solid';
+import type { AttachmentData${emitHistoryTypeImport(c)} } from '@kitn.ai/ui/solid';
+${emitProviderImports(c)}
+${emitCardsImport(c)}
+
+${emitProviderSetup(c)}
+${emitHistorySetup(c)}
+
+// layout: custom — minimal chrome, no ChatThread/Dock/PaneGroup. The bare
+// spine (Thread + PromptInput) plus the declared slots, positioned by hand so
+// YOU own the surrounding DOM. Capabilities beyond the spine (starters,
+// attachments, reasoning display-mode, reasoningOpen, header.title, empty,
+// conversations, header.themeToggle/actions, composer.triggers, shell) are
+// NOT wired here in v1 — this file is the eject artifact; add them the
+// way ChatThread composes them (components/chat/chat-thread.tsx in the kit's own
+// source) if this construct needs them on a custom layout.
+export function App() {
+  const [value, setValue] = createSignal('');
+
+  const handleSubmit = () => {
+    const text = value();
+    if (!text.trim() || chat.loading()) return;
+    setValue('');
+    void submit({ value: text, attachments: [] });
+  };
+
+  return (
+    <div style={{ height: '100dvh', display: 'flex', 'flex-direction': 'column' }}>
+${emitSlots(headerSlot ? [headerSlot] : void 0, "      ")}      <Thread messages={chat.messages()} loading={chat.loading()} class="min-h-0 flex-1"${emitCardTypesProp(c)} />
+      {/* Slot placement rule: first declared slot above the thread, every other
+          declared slot below the composer, in declaration order. Reorder by
+          ejecting — this is the whole grain dimmer. */}
+      <PromptInput value={value()} onValueChange={setValue} isLoading={chat.loading()} onSubmit={handleSubmit}>
+        <PromptInputTextarea placeholder="Ask anything" />
+        <PromptInputActions>
+          <Button onClick={handleSubmit}>Send</Button>
+        </PromptInputActions>
+      </PromptInput>
+${emitSlots(restSlots, "      ")}    </div>
+  );
+}
+`;
+}
+function emitHeaderProp(c) {
+  const title = c.header?.title;
+  if (!title) return "";
+  return ` chatTitle={${JSON.stringify(title)}}`;
+}
+function emitEmptyContentProp(c) {
+  const empty = c.empty;
+  if (!empty) return "";
+  const title = `<EmptyTitle>{${JSON.stringify(empty.title)}}</EmptyTitle>`;
+  const icon = empty.icon ? `<EmptyMedia><img src={${JSON.stringify(empty.icon)}} alt="" style={{ width: '40px', height: '40px', 'border-radius': '9999px' }} /></EmptyMedia>` : "";
+  const description = empty.description ? `<EmptyDescription>{${JSON.stringify(empty.description)}}</EmptyDescription>` : "";
+  return ` emptyContent={<Empty><EmptyHeader>${icon}${title}${description}</EmptyHeader></Empty>}`;
+}
+function emitEmptyComponentImport(c) {
+  if (!c.empty) return "";
+  let names = ", Empty, EmptyHeader, EmptyTitle";
+  if (c.empty.icon) names += ", EmptyMedia";
+  if (c.empty.description) names += ", EmptyDescription";
+  return names;
+}
+function widgetHasHeaderClose(c) {
+  return c.layout === "widget" && !!c.header?.title;
+}
+function widgetHasConversationsChrome(c) {
+  return c.layout === "widget" && (!!c.capabilities?.conversations || !!c.home);
+}
+function hasShellPalette(c) {
+  return c.layout !== "custom" && c.shell?.commandPalette === true;
+}
+function emitShellPaletteVars(c, indent) {
+  if (!hasShellPalette(c)) return "";
+  const entries = [
+    `{ id: 'focus-composer', label: 'Focus composer' }`,
+    ...c.capabilities?.conversations ? [`{ id: 'new-conversation', label: 'New conversation' }`] : [],
+    ...c.header?.themeToggle ? [`{ id: 'toggle-theme', label: 'Toggle theme' }`] : []
+  ];
+  const newConversationLine = c.capabilities?.conversations ? `
+${indent}  if (id === 'new-conversation') chatController?.startNewConversation();` : "";
+  const toggleThemeLine = c.header?.themeToggle ? `
+${indent}  if (id === 'toggle-theme') toggleTheme();` : "";
+  return `${indent}// Command palette (shell.commandPalette): Mod+K toggles; Escape/backdrop
+${indent}// close; entries DERIVE from what this construct enables — no dead rows.
+${indent}const [paletteOpen, setPaletteOpen] = createSignal(false);
+${indent}const [paletteQuery, setPaletteQuery] = createSignal('');
+${indent}const PALETTE_COMMANDS = [${entries.join(", ")}];
+${indent}const paletteGroups = () => {
+${indent}  const q = paletteQuery().trim().toLowerCase();
+${indent}  const items = q ? PALETTE_COMMANDS.filter((i) => i.label.toLowerCase().includes(q)) : PALETTE_COMMANDS;
+${indent}  return [{ items }];
+${indent}};
+${indent}const runPaletteCommand = (id: string) => {
+${indent}  setPaletteOpen(false);
+${indent}  if (id === 'focus-composer') chatController?.focus();${newConversationLine}${toggleThemeLine}
+${indent}};
+${indent}onMount(() => {
+${indent}  const onKey = (e: KeyboardEvent) => {
+${indent}    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); setPaletteOpen((v) => !v); }
+${indent}    if (e.key === 'Escape') setPaletteOpen(false);
+${indent}  };
+${indent}  window.addEventListener('keydown', onKey);
+${indent}  onCleanup(() => window.removeEventListener('keydown', onKey));
+${indent}});
+`;
+}
+function emitShellPaletteOverlay(c) {
+  if (!hasShellPalette(c)) return "";
+  return `    <Show when={paletteOpen()}>
+      <div style={{ position: 'fixed', inset: '0', 'z-index': '50', display: 'flex', 'align-items': 'flex-start', 'justify-content': 'center', 'padding-block-start': '14vh', background: 'rgb(0 0 0 / 0.5)' }} onClick={() => setPaletteOpen(false)}>
+        <div style={{ width: '100%', 'max-width': '32rem', overflow: 'hidden', 'border-radius': '0.75rem', border: '1px solid var(--color-border)', background: 'var(--color-popover)' }} onClick={(e) => e.stopPropagation()}>
+          <Input value={paletteQuery()} onValueInput={setPaletteQuery} placeholder="Search commands..." autofocus />
+          <CommandList groups={paletteGroups()} onSelect={runPaletteCommand} />
+        </div>
+      </div>
+    </Show>
+`;
+}
+function emitChatControllerVar(c, indent) {
+  return widgetHasConversationsChrome(c) || hasShellPalette(c) ? `${indent}let chatController: ChatThreadController | undefined;
+` : "";
+}
+function emitChatControllerRefProp(c) {
+  return widgetHasConversationsChrome(c) || hasShellPalette(c) ? " controllerRef={(api) => (chatController = api)}" : "";
+}
+function emitDockOnOpenChangeProp(c) {
+  return widgetHasConversationsChrome(c) ? " onOpenChange={(open) => { setDockOpen(open); if (!open) chatController?.closeConversationsList(); }}" : "";
+}
+function emitConversationsResetTypeImport(c) {
+  return widgetHasConversationsChrome(c) || hasShellPalette(c) ? ", ChatThreadController" : "";
+}
+function emitConversationsSignalsVar(c, indent) {
+  if (!widgetHasConversationsChrome(c)) return "";
+  const w = c.layout === "widget" ? c.widget : void 0;
+  const defaultOpen = w?.defaultOpen === true ? "true" : "false";
+  return `${indent}const [dockOpen, setDockOpen] = createSignal(${defaultOpen});
+${indent}const [anyUnread, setAnyUnread] = createSignal(false);
+`;
+}
+function emitChatThreadUnreadProps(c) {
+  return widgetHasConversationsChrome(c) ? " hostOpen={dockOpen()} onUnreadChange={setAnyUnread}" : "";
+}
+function emitDockUnreadProp(c) {
+  return widgetHasConversationsChrome(c) ? " unread={anyUnread()}" : "";
+}
+function emitDockCloseVar(c, indent) {
+  return widgetHasHeaderClose(c) ? `${indent}let dockClose: (() => void) | undefined;
+` : "";
+}
+function emitDockControllerRef(c) {
+  return widgetHasHeaderClose(c) ? " controllerRef={(api) => (dockClose = () => api.setOpen(false))}" : "";
+}
+function emitDockHideClose(c) {
+  return widgetHasHeaderClose(c) ? " hideClose={true}" : "";
+}
+function emitToggleThemeVar(c, indent) {
+  if (c.layout === "custom" || !c.header?.themeToggle) return "";
+  if (!hasAppHeader(c)) {
+    return `${indent}const toggleTheme = () => props.host.setAttribute('theme', props.host.getAttribute('theme') === 'dark' ? 'light' : 'dark');
+`;
+  }
+  return `${indent}// header.themeToggle -> the host's own 'theme' (the one defineWebComponent
+${indent}// owns). AppHeader's toggle is icon-only and shows the mode you would switch
+${indent}// TO, so it needs the RESOLVED mode, and resolving it takes both reads:
+${indent}//  - the PROPERTY, not just the attribute. This construct declares its mode
+${indent}//    through defineWebComponent's prop DEFAULT, so a themed element can carry
+${indent}//    no 'theme' attribute at all — reading only the attribute reported
+${indent}//    "light" on a dark app and drew the wrong icon (caught in the live
+${indent}//    builder, not in a test).
+${indent}//  - matchMedia for 'auto' (and for nothing set), which is the only thing
+${indent}//    that can answer "follow the system".
+${indent}const resolveDark = () => {
+${indent}  const mode = (props.host as HTMLElement & { theme?: string }).theme ?? props.host.getAttribute('theme');
+${indent}  if (mode === 'dark') return true;
+${indent}  if (mode === 'light') return false;
+${indent}  return typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches;
+${indent}};
+${indent}const [themeDark, setThemeDark] = createSignal(resolveDark());
+${indent}const toggleTheme = () => {
+${indent}  const next = !themeDark();
+${indent}  props.host.setAttribute('theme', next ? 'dark' : 'light');
+${indent}  setThemeDark(next);
+${indent}};
+`;
+}
+function hasHeaderActionsChrome(c) {
+  return c.layout !== "custom" && !!c.header?.actions?.length;
+}
+function hasThemeToggleChrome(c) {
+  return c.layout !== "custom" && c.header?.themeToggle === true;
+}
+function hasUserMenuChrome(c) {
+  return c.layout !== "custom" && !!c.shell?.userMenu;
+}
+function hasAppHeader(c) {
+  return c.layout === "split" && (!!c.header?.title || hasThemeToggleChrome(c) || hasHeaderActionsChrome(c) || hasUserMenuChrome(c) || hasShellPalette(c));
+}
+function inHeaderEndRow(c) {
+  return !hasAppHeader(c);
+}
+function emitHeaderActionDispatchVar(c, indent) {
+  if (!hasHeaderActionsChrome(c)) return "";
+  return `${indent}// Each header action dispatches 'kai-header-action' on the host and nothing
+${indent}// here handles it — that is the consumer's seam, by design (vocabulary
+${indent}// never logic). The DEV line below is a one-time reminder per label, NOT a
+${indent}// listener check: the DOM cannot report whether a listener exists.
+${indent}const warnedHeaderActions = new Set<string>();
+${indent}const dispatchHeaderAction = (label: string) => {
+${indent}  if (import.meta.env.DEV && !warnedHeaderActions.has(label)) {
+${indent}    warnedHeaderActions.add(label);
+${indent}    console.warn(\`[${c.name}] header action "\${label}" dispatched 'kai-header-action' on the host. Nothing happens until your app listens: el.addEventListener('kai-header-action', (e) => …).\`);
+${indent}  }
+${indent}  props.host.dispatchEvent(new CustomEvent('kai-header-action', { detail: { label } }));
+${indent}};
+`;
+}
+function emitHeaderEndContentProp(c) {
+  const pieces = [];
+  if (hasHeaderActionsChrome(c) && inHeaderEndRow(c)) {
+    for (const a of c.header.actions) {
+      const variant = a.variant ? ` variant="${a.variant}"` : "";
+      pieces.push(
+        `<Button${variant} size="sm" onClick={() => dispatchHeaderAction(${JSON.stringify(a.label)})}>{${JSON.stringify(a.label)}}</Button>`
+      );
+    }
+  }
+  if (hasThemeToggleChrome(c) && inHeaderEndRow(c)) {
+    pieces.push(`<Button variant="ghost" size="sm" aria-label="Toggle theme" onClick={toggleTheme}>Theme</Button>`);
+  }
+  if (hasUserMenuChrome(c) && inHeaderEndRow(c)) {
+    const m = c.shell.userMenu;
+    const menuLabel = JSON.stringify(`${m.name}${m.plan ? ` — ${m.plan}` : ""} account menu`);
+    const initials = JSON.stringify(m.name.slice(0, 2).toUpperCase());
+    const item = (id, label) => `<DropdownItem onSelect={() => props.host.dispatchEvent(new CustomEvent('kai-user-menu', { detail: { item: '${id}' } }))}>${label}</DropdownItem>`;
+    pieces.push(
+      `<Dropdown><DropdownTrigger aria-label={${menuLabel}}><Avatar fallback={${initials}} size="sm" /></DropdownTrigger><DropdownContent>${item("settings", "Settings")}${item("help", "Get help")}<DropdownSeparator />${item("log-out", "Log out")}</DropdownContent></Dropdown>`
+    );
+  }
+  if (widgetHasHeaderClose(c)) {
+    pieces.push(
+      `<Button variant="ghost" size="icon-sm" aria-label="Close ${c.name}" onClick={() => dockClose?.()}><DockCloseGlyph /></Button>`
+    );
+  }
+  if (pieces.length === 0) return "";
+  const content = pieces.length > 1 ? `<>${pieces.join("")}</>` : pieces[0];
+  return ` headerEndContent={${content}}`;
+}
+function emitChromeImports(c) {
+  let names = "";
+  if (inHeaderEndRow(c) && (hasHeaderActionsChrome(c) || hasThemeToggleChrome(c)) || widgetHasHeaderClose(c)) {
+    names += ", Button";
+  }
+  if (hasUserMenuChrome(c) && inHeaderEndRow(c)) {
+    names += ", Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator, Avatar";
+  }
+  if (hasAppHeader(c)) names += ", AppHeader";
+  if (hasShellPalette(c)) names += ", CommandList, Input";
+  if (widgetHasHeaderClose(c)) names += ", DockCloseGlyph";
+  return names;
+}
+function emitAppHeader(c, indent) {
+  if (!hasAppHeader(c)) return "";
+  let out = `${indent}<AppHeader
+`;
+  if (c.header?.title) out += `${indent}  title={${JSON.stringify(c.header.title)}}
+`;
+  if (hasShellPalette(c)) {
+    out += `${indent}  showSearch={true}
+${indent}  onSearch={() => setPaletteOpen(true)}
+`;
+  }
+  if (hasThemeToggleChrome(c)) {
+    out += `${indent}  showThemeToggle={true}
+${indent}  dark={themeDark()}
+${indent}  onToggleDark={toggleTheme}
+`;
+  }
+  if (hasHeaderActionsChrome(c)) {
+    out += `${indent}  actions={${JSON.stringify(c.header.actions)}}
+${indent}  onActionSelect={(action) => dispatchHeaderAction(action.label)}
+`;
+  }
+  if (hasUserMenuChrome(c)) {
+    out += `${indent}  user={${JSON.stringify(c.shell.userMenu)}}
+${indent}  onUserMenuSelect={(item) => props.host.dispatchEvent(new CustomEvent('kai-user-menu', { detail: { item } }))}
+`;
+  }
+  return `${out}${indent}/>
+`;
+}
+function emitChromeComment(c) {
+  const lines = [];
+  if (hasHeaderActionsChrome(c)) {
+    lines.push("// header.actions dispatch 'kai-header-action' on the host, detail: { label }.");
+  }
+  if (hasUserMenuChrome(c)) {
+    lines.push("// shell.userMenu dispatches 'kai-user-menu' on the host, detail: { item }.");
+  }
+  if (hasShellPalette(c)) {
+    lines.push("// shell.commandPalette: Mod+K opens the command palette; entries derive from");
+    lines.push("// what this construct enables (menu-honesty — no dead rows).");
+  }
+  return lines.length ? `${lines.join("\n")}
+` : "";
+}
+function emitMessageActionsProps(c) {
+  const actions = c.capabilities?.messageActions;
+  if (!actions) return "";
+  let out = "";
+  if (actions.user) out += ` userActions={${JSON.stringify(actions.user)}}`;
+  if (actions.assistant) out += ` assistantActions={${JSON.stringify(actions.assistant)}}`;
+  return out;
+}
+function emitHideSourcesProp(c) {
+  return c.capabilities?.sources?.strip === false ? " hideSources={true}" : "";
+}
+function emitTriggersProp(c) {
+  const triggers = c.composer?.triggers;
+  if (!triggers) return "";
+  const defs = [
+    ...triggers.slash ? [{ char: "/", kind: "command", items: triggers.slash }] : [],
+    ...triggers.mention ? [{ char: "@", kind: "mention", items: triggers.mention }] : []
+  ];
+  if (defs.length === 0) return "";
+  return ` triggers={${JSON.stringify(defs)}}`;
+}
+function emitAttachProps(c) {
+  const attachments = c.capabilities?.attachments;
+  if (!attachments) return " attach={false}";
+  return ` attach={true} accept={${JSON.stringify(attachments.accept.join(","))}}`;
+}
+function emitStartersProp(c) {
+  const starters = c.capabilities?.starters;
+  if (!starters || starters.length === 0) return "";
+  return ` suggestions={${JSON.stringify(starters)}}`;
+}
+function emitReasoningProp(c) {
+  const reasoning = c.capabilities?.reasoning;
+  if (!reasoning || reasoning === "full") return "";
+  return ` reasoning="${reasoning}"`;
+}
+function emitReasoningOpenProp(c) {
+  return c.capabilities?.reasoningOpen === true ? " reasoningOpen={true}" : "";
+}
+function emitHomeProp(c) {
+  if (!c.home) return "";
+  return ` home={${JSON.stringify(c.home)}}`;
+}
+function emitConversationsProps(c) {
+  if (!c.capabilities?.conversations) return "";
+  const history = c.capabilities.history;
+  const storeCall = history?.persistence === "endpoint" ? `fetchStore(${JSON.stringify(history.url)}${c.userId ? `, ${JSON.stringify(c.userId)}` : ""})` : `localStorageStore('${c.name}'${c.userId ? `, ${JSON.stringify(c.userId)}` : ""})`;
+  return ` conversations={true} store={${storeCall}} onConversationLoad={(messages) => chat.setMessages(() => messages)}`;
+}
+function emitConversationsImport(c) {
+  if (!c.capabilities?.conversations) return "";
+  const name = c.capabilities.history?.persistence === "endpoint" ? "fetchStore" : "localStorageStore";
+  return `import { ${name} } from '@kitn.ai/ui/solid';`;
+}
+function needsCreateEffect(c) {
+  const history = c.capabilities?.history;
+  return !!history && history.persistence !== "none" && !(c.layout !== "custom" && c.capabilities?.conversations);
+}
+function emitSolidJsImports(c) {
+  const names = [];
+  if (needsCreateEffect(c)) names.push("createEffect");
+  if (widgetHasConversationsChrome(c) || hasShellPalette(c) || splitNeedsPaneProbe(c) || workSurfaceOf(c)?.chrome?.expand || // the app header's resolved-dark signal (emitToggleThemeVar)
+  hasAppHeader(c) && hasThemeToggleChrome(c)) {
+    names.push("createSignal");
+  }
+  if (hasShellPalette(c)) names.push("Show");
+  if (hasShellPalette(c) || splitNeedsPaneProbe(c)) names.push("onMount", "onCleanup");
+  if (names.length === 0) return "";
+  return `import { ${names.join(", ")} } from 'solid-js';
+`;
+}
+function emitHistoryTypeImport(c) {
+  const history = c.capabilities?.history;
+  if (!history || history.persistence === "none" || c.layout !== "custom" && c.capabilities?.conversations) return "";
+  return ", ChatMessage";
+}
+function emitUserIdHeaderEntry(c) {
+  return c.userId ? `, 'x-kai-user-id': ${JSON.stringify(c.userId)}` : "";
+}
+function emitHistorySetup(c) {
+  const history = c.capabilities?.history;
+  if (!history || history.persistence === "none") return "";
+  if (c.layout !== "custom" && c.capabilities?.conversations) return "";
+  if (history.persistence === "local") {
+    const key = JSON.stringify(c.userId ? `kai:${c.name}:${c.userId}:thread` : `kai:${c.name}:thread`);
+    return `
+// History: persisted locally in this browser, keyed by the element tag. What to
+// retain and for how long is an app decision — clear the key to reset.
+const THREAD_KEY = ${key};
+try {
+  const saved = localStorage.getItem(THREAD_KEY);
+  if (saved) {
+    const parsed: unknown = JSON.parse(saved);
+    if (Array.isArray(parsed)) {
+      chat.setMessages(() => parsed as ChatMessage[]);
+    } else {
+      console.warn(\`[\${THREAD_KEY}] stored history was not an array; ignoring and starting fresh\`);
+    }
+  }
+} catch { /* storage unavailable or corrupt: run in-memory */ }
+createEffect(() => {
+  try {
+    localStorage.setItem(THREAD_KEY, JSON.stringify(chat.messages()));
+  } catch { /* storage unavailable: run in-memory */ }
+});
+`;
+  }
+  const url = JSON.stringify(history.url);
+  return `
+// History: persisted to your endpoint (GET on mount, PUT on every change) —
+// the kit PARSES, this app FETCHES; your route owns the storage and what to
+// retain and for how long. \`hydrated\` guards the mount-load from immediately
+// PUTting back what it just loaded, but still flips on a FAILED load — one
+// offline/CORS/DNS blip degrades to "start fresh, keep saving", not
+// "never save again".
+let hydrated = false;
+(async () => {
+  try {
+    const r = await fetch(${url}${c.userId ? `, { headers: { 'x-kai-user-id': ${JSON.stringify(c.userId)} } }` : ""});
+    const saved: unknown = r.ok ? await r.json() : [];
+    if (Array.isArray(saved)) {
+      chat.setMessages(() => saved as ChatMessage[]);
+    } else {
+      console.warn('history endpoint returned a non-array body; ignoring and starting fresh');
+    }
+  } catch (err) {
+    console.error('history endpoint GET failed; starting fresh (will keep saving)', err);
+  } finally {
+    hydrated = true;
+  }
+})();
+createEffect(() => {
+  const snapshot = chat.messages();
+  if (!hydrated) return;
+  fetch(${url}, {
+    method: 'PUT',
+    headers: { 'content-type': 'application/json'${emitUserIdHeaderEntry(c)} },
+    body: JSON.stringify(snapshot),
+  }).catch((err) => {
+    console.error('history endpoint PUT failed; this change was not persisted', err);
+  });
+});
+`;
+}
+function emitProviderImports(c) {
+  if (c.provider.mode === "mock") {
+    return `import { createMockResponder, type MockReply } from '@kitn.ai/ui/state';
+import { readOpenAIStream } from '@kitn.ai/ui/wire';`;
+  }
+  const read = c.provider.wire === "openai" ? "readOpenAIStream" : "readAnthropicStream";
+  const encode = c.provider.wire === "openai" ? "toOpenAIMessages" : "toAnthropicMessages";
+  return `import { ${read}, ${encode} } from '@kitn.ai/ui/wire';`;
+}
+function emitProviderSetup(c) {
+  if (c.provider.mode === "mock") {
+    const script = mockScriptFor(c);
+    const hasOutputs = Object.keys(script.toolOutputs).length > 0;
+    const cardsNote = c.cards ? `
+// Cards demo keylessly: the script's \`kai_<card name>\` call renders exactly
+// like a live model's would, below.` : "";
+    const outputsDecl = hasOutputs ? `
+
+// Scripted outputs for the demo tool calls above. The wire only ever ANNOUNCES
+// a call — executing it and answering is the host's side of the seam — so the
+// mock's "host" is this map plus the settle step after the read. It disappears
+// with the mock: a real backend's tool loop replaces it.
+const MOCK_TOOL_OUTPUTS: Record<string, Record<string, unknown>> = ${JSON.stringify(script.toolOutputs, null, 2)};` : "";
+    return `// Provider seam: mock — keyless, streams locally, announces itself once.
+// Swap for provider.mode "endpoint" in the construct and re-run kai dev; the
+// generated fetch keeps this exact shape (the seam is the point).${cardsNote}
+//
+// The script below is this template's mock conversation: it exercises every
+// content type this construct enables (reasoning, citations, tool rows${c.cards ? ", cards" : ""})
+// through the kit's real parser, so the first run SHOWS the rendering paths a
+// live model would use. Edit it freely — it is data, not wiring.
+const MOCK_SCRIPT: MockReply[] = ${JSON.stringify(script.replies, null, 2)};${outputsDecl}
+
+const respond = createMockResponder({ replies: MOCK_SCRIPT });
+const chat = createKaiChat();
+
+async function submit(detail: { value: string; attachments: AttachmentData[] }) {
+  if (!detail.value.trim() || chat.loading()) return;
+  chat.append({
+    id: crypto.randomUUID(),
+    role: 'user',
+    parts: [
+      { type: 'text', text: detail.value },
+      ...detail.attachments.map((attachment) => ({ type: 'file' as const, attachment })),
+    ],
+  });
+  const stream = chat.streamAssistant();
+  try {
+    await readOpenAIStream(respond(detail.value), stream);${emitSettleMockTools(hasOutputs)}${emitApplyCardTools(c)}
+    stream.done();
+  } catch (err) {
+    stream.abort(err instanceof Error ? err.message : String(err));
+  }
+}`;
+  }
+  const { url, wire } = c.provider;
+  const read = wire === "openai" ? "readOpenAIStream" : "readAnthropicStream";
+  const encode = wire === "openai" ? "toOpenAIMessages" : "toAnthropicMessages";
+  return `// Provider seam: YOUR endpoint (${wire} wire, see the fetch call below
+// for the URL). The kit PARSES, this component FETCHES — no key, no
+// provider SDK, no client in here. Your route holds the key and re-frames to
+// the provider; the kai MCP scaffold tool emits one for your framework.
+const chat = createKaiChat();
+
+async function submit(detail: { value: string; attachments: AttachmentData[] }) {
+  if (!detail.value.trim() || chat.loading()) return;
+  chat.append({
+    id: crypto.randomUUID(),
+    role: 'user',
+    parts: [
+      { type: 'text', text: detail.value },
+      ...detail.attachments.map((attachment) => ({ type: 'file' as const, attachment })),
+    ],
+  });
+  const stream = chat.streamAssistant();
+  try {
+    const response = await fetch(${JSON.stringify(url)}, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json'${emitUserIdHeaderEntry(c)} },
+      body: JSON.stringify({ messages: ${encode}(chat.messages())${emitToolsField(c)} }),
+    });
+    if (!response.ok) throw new Error(\`endpoint responded \${response.status}\`);
+    await ${read}(response, stream);${emitApplyCardTools(c)}
+    stream.done();
+  } catch (err) {
+    stream.abort(err instanceof Error ? err.message : String(err));
+  }
+}`;
+}
+function emitLayoutImport(c) {
+  switch (c.layout) {
+    case "widget":
+      return `, Dock${hasLauncherIcon(c) ? ", DockLauncherImage" : ""}`;
+    case "split":
+      return workSurfaceOf(c) ? ", WorkspaceShell, WorkSurface" : ", WorkspaceShell";
+    case "fullscreen":
+    case "aside":
+      return "";
+    case "custom":
+      return "";
+  }
+}
+function emitSlots(slots, indent) {
+  if (!slots || slots.length === 0) return "";
+  return slots.map((name) => `${indent}<slot name="${name}" />
+`).join("");
+}
+function splitNeedsPaneProbe(c) {
+  return c.layout === "split" && !c.workSurface;
+}
+function emitPaneProbeVar(c, indent) {
+  if (!splitNeedsPaneProbe(c)) return "";
+  return `${indent}// Does the consumer project anything into <slot name="pane">? Read the
+${indent}// HOST's own light-DOM children: that is observable whether or not the
+${indent}// column (and with it the <slot>) is currently mounted, so it cannot
+${indent}// deadlock the way a slotchange listener on an unmounted slot would.
+${indent}const [paneProjected, setPaneProjected] = createSignal(false);
+${indent}onMount(() => {
+${indent}  const sync = () => setPaneProjected(props.host.querySelector(':scope > [slot="pane"]') !== null);
+${indent}  const observer = new MutationObserver(sync);
+${indent}  observer.observe(props.host, { childList: true });
+${indent}  sync();
+${indent}  onCleanup(() => observer.disconnect());
+${indent}});
+`;
+}
+function needsHost(c) {
+  return hasThemeToggleChrome(c) || hasHeaderActionsChrome(c) || hasUserMenuChrome(c) || splitNeedsPaneProbe(c);
+}
+function emitDockPosition(c) {
+  const w = c.layout === "widget" ? c.widget : void 0;
+  return w?.position ? ` position="${w.position}"` : "";
+}
+function hasLauncherIcon(c) {
+  return c.layout === "widget" && !!c.widget?.launcherIcon;
+}
+function emitDockLauncher(c) {
+  const w = c.layout === "widget" ? c.widget : void 0;
+  if (!w?.launcherIcon) return "";
+  return ` launcher={<DockLauncherImage src={${JSON.stringify(w.launcherIcon)}} />}`;
+}
+function emitDockDefaultOpen(c) {
+  const w = c.layout === "widget" ? c.widget : void 0;
+  return w?.defaultOpen === true ? " defaultOpen={true}" : "";
+}
+function workSurfaceOf(c) {
+  return c.layout === "split" ? c.workSurface : void 0;
+}
+const WORK_SURFACE_IFRAME_TITLE = {
+  artifact: "Work surface",
+  preview: "App preview"
+};
+function emitWorkSurfaceVars(c, indent) {
+  return workSurfaceOf(c)?.chrome?.expand ? `${indent}// workSurface.chrome.expand -> WorkspaceShell's own CONTROLLED startCollapsed
+${indent}// (collapse the chat rail, click again to restore). NOT the kai-resizable
+${indent}// maximize protocol: WorkspaceShell does not forward maximizedIndex/
+${indent}// onMaximizeChange — see components/work-surface/work-surface.tsx's doc comment.
+${indent}const [surfaceExpanded, setSurfaceExpanded] = createSignal(false);
+` : "";
+}
+function emitWorkSurface(c, indent) {
+  const ws = workSurfaceOf(c);
+  if (!ws) return "";
+  const chrome = ws.chrome ?? {};
+  const flag = (name, on) => `${indent}  ${name}={${on === true}}
+`;
+  return `${indent}<WorkSurface
+${indent}  src={${JSON.stringify(ws.url)}}
+${indent}  variant="${ws.kind}"
+${indent}  iframeTitle={${JSON.stringify(WORK_SURFACE_IFRAME_TITLE[ws.kind])}}
+` + (chrome.urlBar ? `${indent}  urlLabel={${JSON.stringify(ws.url)}}
+` : "") + (ws.codeUrl ? `${indent}  codeSrc={${JSON.stringify(ws.codeUrl)}}
+` : "") + flag("showDeviceToggle", chrome.deviceToggle) + flag("showUrlBar", chrome.urlBar) + flag("showOpenInNewTab", chrome.openInNewTab) + flag("showExpand", chrome.expand) + flag("showCodeView", chrome.codeView) + (chrome.expand ? `${indent}  expanded={surfaceExpanded()}
+${indent}  onExpandedChange={setSurfaceExpanded}
+` : "") + `${indent}/>
+`;
+}
+function workSurfaceUrlIsRelative(url) {
+  return !/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url) && !url.startsWith("//");
+}
+const WORK_SURFACE_PAGE = "public/work-surface.html";
+function emitWorkSurfacePage(c) {
+  const ws = workSurfaceOf(c);
+  const headline = ws.kind === "artifact" ? "Your work surface" : "Your app preview";
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${headline}</title>
+  </head>
+  <body style="margin: 0; background: #f8fafc; color: #0f172a; font: 15px/1.6 system-ui, -apple-system, sans-serif;">
+    <main style="max-width: 34rem; margin: 0 auto; padding: 3.5rem 1.5rem;">
+      <h1 style="margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600;">${headline}</h1>
+      <p style="margin: 0 0 1rem; color: #64748b;">
+        This placeholder ships with the construct so the pane renders offline, with no network and no backend.
+      </p>
+      <p style="margin: 0; color: #64748b;">
+        Replace it by pointing <code>workSurface.url</code> at your own page &mdash; or project your own markup as a
+        <code>&lt;slot name="pane"&gt;</code> child of the element, which wins over this pane entirely.
+      </p>
+    </main>
+  </body>
+</html>
+`;
+}
+function emitLayoutOpen(c) {
+  switch (c.layout) {
+    case "widget":
+      return `    <Dock label="${c.name}"${emitDockPosition(c)}${emitDockLauncher(c)}${emitDockDefaultOpen(c)}${emitDockHideClose(c)}${emitDockControllerRef(c)}${emitDockOnOpenChangeProp(c)}${emitDockUnreadProp(c)}>
+`;
+    case "fullscreen":
+      return `    <div style={{ height: '100dvh', display: 'flex', 'flex-direction': 'column' }}>
+`;
+    case "aside": {
+      const position = c.aside?.position ?? "end";
+      const width = JSON.stringify(c.aside?.width ?? "380px");
+      const inset = position === "start" ? "'inset-inline-start': '0'" : "'inset-inline-end': '0'";
+      const borderSide = position === "start" ? "border-inline-end" : "border-inline-start";
+      return `    <aside data-kai-layout="aside" style={{ position: 'fixed', 'inset-block': '0', ${inset}, width: ${width}, display: 'flex', 'flex-direction': 'column', '${borderSide}': '1px solid var(--kai-color-border)' }}>
+      {/* Mirrors Dock's own narrow-viewport full-bleed rule (components/dock/dock.tsx:229-240)
+          — aside has no dedicated kit component (see the emitLayoutOpen doc
+          comment above), so this is the honest hand-rolled equivalent, not a
+          new responsive strategy. */}
+      <style>{\`@media (max-width: 480px) { [data-kai-layout="aside"] { inset: 0; width: auto; height: auto; ${borderSide}: 0; } }\`}</style>
+`;
+    }
+    case "split": {
+      const ws = workSurfaceOf(c);
+      const header = emitAppHeader(c, "      ");
+      const frameOpen = header ? `    <div style={{ height: '100dvh', display: 'flex', 'flex-direction': 'column' }}>
+${header}` : `    <div style={{ height: '100dvh' }}>
+`;
+      const shellClass = header ? "min-h-0 flex-1" : "h-full";
+      if (!ws) {
+        return `${frameOpen}      <WorkspaceShell class="${shellClass}" drawerBelow={480} end={paneProjected() ? (
+        <div style={{ height: '100%', overflow: 'auto' }}>
+          <slot name="pane" />
+        </div>
+      ) : undefined}>
+`;
+      }
+      return `${frameOpen}      <WorkspaceShell class="${shellClass}" drawerBelow={480} startWidth={360} startMinWidth={280} startMaxWidth={520}${ws.chrome?.expand ? " startCollapsed={surfaceExpanded()}" : ""} start={
+        <div style={{ height: '100%', 'min-height': '0', display: 'flex', 'flex-direction': 'column' }}>
+`;
+    }
+    case "custom":
+      return "";
+  }
+}
+function emitLayoutClose(c) {
+  switch (c.layout) {
+    case "widget":
+      return `    </Dock>
+`;
+    case "fullscreen":
+      return `    </div>
+`;
+    case "aside":
+      return `    </aside>
+`;
+    case "split": {
+      const ws = workSurfaceOf(c);
+      if (!ws) {
+        return `      </WorkspaceShell>
+    </div>
+`;
+      }
+      return `        </div>
+      }>
+        {/* Your own <slot name="pane"> projection WINS over this: assigned nodes
+            replace fallback content. The construct's work surface is the
+            DEFAULT, not an override. Declared \`slots\` still render inside the
+            chat rail above the thread — the same relative position they hold
+            in every other layout. */}
+        <slot name="pane">
+${emitWorkSurface(c, "          ")}        </slot>
+      </WorkspaceShell>
+    </div>
+`;
+    }
+    case "custom":
+      return "";
+  }
+}
+function emitTypes(c) {
+  return `declare global {
+  interface HTMLElementTagNameMap {
+    '${c.name}': HTMLElement & { theme: 'light' | 'dark' | 'auto' };
+  }
+}
+export {};
+`;
+}
+const MANIFEST = ".kai-manifest.json";
+function writeProject(files, dir) {
+  const manifestPath = join(dir, MANIFEST);
+  const previous = existsSync(manifestPath) ? JSON.parse(readFileSync(manifestPath, "utf8")) : [];
+  const current = new Set(files.map((f) => f.path));
+  for (const stale of previous) {
+    if (!current.has(stale)) rmSync(join(dir, stale), { force: true });
+  }
+  const overwritten = [];
+  for (const f of files) {
+    const abs = join(dir, f.path);
+    if (existsSync(abs)) {
+      if (readFileSync(abs, "utf8") === f.code) continue;
+      overwritten.push(f.path);
+    }
+    mkdirSync(dirname(abs), { recursive: true });
+    writeFileSync(abs, f.code);
+  }
+  const manifestText = `${JSON.stringify([...current].sort(), null, 2)}
+`;
+  if (!existsSync(manifestPath) || readFileSync(manifestPath, "utf8") !== manifestText) {
+    writeFileSync(manifestPath, manifestText);
+  }
+  return overwritten;
+}
+const KIT_PACKAGE_NAME = "@kitn.ai/ui";
+function npmInvocation(platform = process.platform) {
+  return platform === "win32" ? { command: "npm.cmd", shell: true } : { command: "npm", shell: false };
+}
+function npmArgs(args, shell) {
+  return shell ? args.map((a) => /\s/.test(a) ? `"${a}"` : a) : args;
+}
+const LOCAL_KIT_CACHE_DIRNAME = ".kai-local-kit";
+const BUILD_COMMAND = "npx nx build ui (or: cd packages/ui && npm run build)";
+function resolveKitPackageRoot(startDir) {
+  const tried = [];
+  let dir = startDir;
+  for (let i = 0; i < 8; i++) {
+    const manifest = join(dir, "package.json");
+    tried.push(manifest);
+    if (existsSync(manifest)) {
+      try {
+        const parsed = JSON.parse(readFileSync(manifest, "utf8"));
+        if (parsed.name === KIT_PACKAGE_NAME) return { dir };
+      } catch {
+      }
+    }
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return { tried };
+}
+function localKitStartDir() {
+  return dirname(fileURLToPath(import.meta.url));
+}
+function isSourceCheckout(pkgRoot) {
+  return existsSync(join(pkgRoot, "mcp", "construct", "cli.ts")) && existsSync(join(pkgRoot, "..", "..", "pnpm-workspace.yaml"));
+}
+function distExportTargets(pkg) {
+  const out = /* @__PURE__ */ new Set();
+  const walk = (value) => {
+    if (typeof value === "string") {
+      if (value.startsWith("./dist/") && !value.includes("*")) out.add(value);
+      return;
+    }
+    if (value && typeof value === "object") for (const nested of Object.values(value)) walk(nested);
+  };
+  walk(pkg?.exports);
+  return [...out];
+}
+const SOURCE_EXTENSIONS = [".ts", ".tsx", ".css"];
+const GENERATED_SOURCES = /* @__PURE__ */ new Set([join("web-components", "compiled.css")]);
+function isSourceInput(rel) {
+  if (GENERATED_SOURCES.has(rel)) return false;
+  const base = rel.split(sep).at(-1);
+  if (base.includes(".test.") || base.includes(".stories.")) return false;
+  return SOURCE_EXTENSIONS.some((ext) => base.endsWith(ext));
+}
+function newestFile(root, accept) {
+  let newest = null;
+  const walk = (dir) => {
+    let entries;
+    try {
+      entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const full = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walk(full);
+        continue;
+      }
+      if (!entry.isFile()) continue;
+      const rel = relative(root, full);
+      if (!accept(rel)) continue;
+      const { mtimeMs } = statSync(full);
+      if (!newest || mtimeMs > newest.mtimeMs) newest = { file: full, mtimeMs };
+    }
+  };
+  walk(root);
+  return newest;
+}
+function distProblem(pkgRoot) {
+  const distDir = join(pkgRoot, "dist");
+  if (!existsSync(distDir)) return `${distDir} does not exist — this checkout has never been built.`;
+  let pkg;
+  try {
+    pkg = JSON.parse(readFileSync(join(pkgRoot, "package.json"), "utf8"));
+  } catch (err) {
+    return `cannot read ${join(pkgRoot, "package.json")}: ${err instanceof Error ? err.message : String(err)}`;
+  }
+  const missing = distExportTargets(pkg).filter((target) => !existsSync(join(pkgRoot, target)));
+  if (missing.length > 0) {
+    return `${missing.length} entry point(s) named by the exports map are missing from dist/, starting with ${missing.slice(0, 3).join(", ")} — the build is incomplete.`;
+  }
+  const newestSource = [newestFile(join(pkgRoot, "src"), isSourceInput), newestFile(join(pkgRoot, "mcp"), isSourceInput)].filter((entry) => entry !== null).sort((a, b) => b.mtimeMs - a.mtimeMs)[0];
+  const newestBuilt = newestFile(distDir, () => true);
+  if (newestSource && newestBuilt && newestSource.mtimeMs > newestBuilt.mtimeMs) {
+    return `${relative(pkgRoot, newestSource.file)} is newer than everything in dist/ (newest built file: ${relative(pkgRoot, newestBuilt.file)}) — the build is stale.`;
+  }
+  return null;
+}
+function distFingerprint(distDir) {
+  const hash = createHash("sha256");
+  const walk = (dir) => {
+    const out = [];
+    for (const entry of [...readdirSync(dir, { withFileTypes: true })].sort((a, b) => a.name.localeCompare(b.name))) {
+      const full = join(dir, entry.name);
+      if (entry.isDirectory()) out.push(...walk(full));
+      else out.push(full);
+    }
+    return out;
+  };
+  for (const file of walk(distDir)) {
+    const stat = statSync(file);
+    hash.update(file.slice(distDir.length));
+    hash.update(String(stat.size));
+    hash.update(String(stat.mtimeMs));
+  }
+  return hash.digest("hex").slice(0, 16);
+}
+function packLocalKit(pkgRoot) {
+  const distDir = join(pkgRoot, "dist");
+  const version = JSON.parse(readFileSync(join(pkgRoot, "package.json"), "utf8")).version;
+  const cacheDir = join(pkgRoot, LOCAL_KIT_CACHE_DIRNAME);
+  const tarball = join(cacheDir, `kitn.ai-ui-${version}-${distFingerprint(distDir)}.tgz`);
+  if (existsSync(tarball)) return { tarball, packed: false };
+  const stage = join(cacheDir, `.pack-${process.pid}`);
+  mkdirSync(stage, { recursive: true });
+  try {
+    const npm = npmInvocation();
+    execFileSync(npm.command, npmArgs(["pack", "--silent", "--pack-destination", stage], npm.shell), {
+      cwd: pkgRoot,
+      stdio: ["ignore", "pipe", "pipe"],
+      shell: npm.shell
+    });
+    const produced = readdirSync(stage).filter((f) => f.endsWith(".tgz"));
+    if (produced.length !== 1) {
+      throw new Error(`npm pack wrote ${produced.length} tarball(s) into ${stage} — expected exactly one`);
+    }
+    renameSync(join(stage, produced[0]), tarball);
+  } finally {
+    rmSync(stage, { recursive: true, force: true });
+  }
+  for (const file of readdirSync(cacheDir)) {
+    if (file.endsWith(".tgz") && join(cacheDir, file) !== tarball) rmSync(join(cacheDir, file), { force: true });
+  }
+  return { tarball, packed: true };
+}
+function classifyKit(explicit, startDir) {
+  if (explicit !== void 0) return { kind: "explicit", uiSpec: explicit };
+  const root = resolveKitPackageRoot(startDir);
+  if (!("dir" in root)) return { kind: "published", why: `no ${KIT_PACKAGE_NAME} package.json above ${startDir}` };
+  if (!isSourceCheckout(root.dir)) return { kind: "published", why: `${root.dir} is an installed package, not a checkout` };
+  const problem = distProblem(root.dir);
+  return problem ? { kind: "unbuilt", pkgRoot: root.dir, problem } : { kind: "checkout", pkgRoot: root.dir };
+}
+function unbuiltMessage(origin) {
+  return `cannot use this checkout's @kitn.ai/ui build: ${origin.problem}
+  Running the CLI from a source checkout (${origin.pkgRoot}) installs THAT build into the
+  generated project, because the published version does not have the exports your source adds.
+  Build it:  ${BUILD_COMMAND}
+  Or choose a kit explicitly:  --ui <version|tarball|path>`;
+}
+function localKitNotice(pkgRoot, tarball, packed) {
+  return `using this checkout's own @kitn.ai/ui build — ${join(pkgRoot, "dist")} ${packed ? "packed to" : "cached at"} ${tarball}. Generated projects install THAT, not the published version. Pass --ui <spec> to override.`;
+}
+const defaultIo = { log: (s) => console.log(s), error: (s) => console.error(s) };
+const USAGE = `usage: npx -y @kitn.ai/cli <command>   (or \`kai <command>\` once @kitn.ai/cli is installed)
+
+  kai validate <construct.json>          check a construct, print problems with paths
+  kai eject <construct.json> <outDir>    write the generated Solid project (it's yours)
+  kai dev <construct.json>               live preview with reload-on-edit
+  kai dev --builder [name|construct.json]  visual builder + live preview (no arg = your constructs, or the template picker)
+  kai compile <construct.json> [outDir]  one self-registering .js
+`;
+function homeRecentConversationWarning(construct) {
+  if (construct.home?.recentConversation && !construct.capabilities?.conversations) {
+    return "warning: home.recentConversation is set but capabilities.conversations is not — the recent-conversation card will render nothing without it.";
+  }
+  return null;
+}
+function workSurfaceProjectionNotice(construct) {
+  if (!construct.workSurface) return null;
+  return 'note: workSurface renders as <slot name="pane"> fallback — a child with slot="pane" projected by the consumer replaces it.';
+}
+function splitWithoutWorkSurfaceNotice(construct) {
+  if (construct.layout !== "split" || construct.workSurface) return null;
+  return 'note: layout "split" with no workSurface — the pane stays hidden until a child with slot="pane" is projected. Add a workSurface to render one.';
+}
+function generationNotices(construct) {
+  return [
+    accentContrastNotice(construct),
+    workSurfaceProjectionNotice(construct),
+    splitWithoutWorkSurfaceNotice(construct)
+  ].filter((n) => n !== null);
+}
+function loadConstruct(path, io) {
+  const abs = resolve(path);
+  let raw;
+  try {
+    raw = readFileSync(abs, "utf8");
+  } catch {
+    io.error(`cannot read ${abs}`);
+    return null;
+  }
+  let json;
+  try {
+    json = JSON.parse(raw);
+  } catch (err) {
+    io.error(`${abs} is not valid JSON: ${err instanceof Error ? err.message : String(err)}`);
+    return null;
+  }
+  const out = validateConstruct(json);
+  if (!out.ok) {
+    io.error(`${abs} is not a valid construct:`);
+    for (const p of out.problems) io.error(`  ${p.path || "(root)"}: ${p.message}`);
+    return null;
+  }
+  return out.construct;
+}
+function vendorLocalKit(tarball, outDirAbs, io) {
+  const vendorRel = join("vendor", basename(tarball));
+  mkdirSync(join(outDirAbs, "vendor"), { recursive: true });
+  copyFileSync(tarball, join(outDirAbs, vendorRel));
+  io.log(`vendored this checkout's kit into ${join(outDirAbs, vendorRel)} — the ejected project installs that copy.`);
+  return `file:${vendorRel.split(sep).join("/")}`;
+}
+function parseUiFlag(rest) {
+  const uiFlag = rest.indexOf("--ui");
+  const uiSpec = uiFlag >= 0 ? rest[uiFlag + 1] : void 0;
+  const positional = uiFlag >= 0 ? rest.filter((_, i) => i !== uiFlag && i !== uiFlag + 1) : rest;
+  return { uiSpec, positional };
+}
+function parseDevArgs(rest) {
+  const { uiSpec, positional } = parseUiFlag(rest);
+  const builder = positional.includes("--builder");
+  const path = positional.filter((a) => a !== "--builder")[0];
+  return { uiSpec, builder, path };
+}
+function resolveUiSpec(explicit, io) {
+  const origin = classifyKit(explicit, localKitStartDir());
+  switch (origin.kind) {
+    case "explicit":
+      return { ok: true, uiSpec: origin.uiSpec };
+    case "published":
+      return { ok: true, uiSpec: void 0 };
+    case "unbuilt":
+      io.error(unbuiltMessage(origin));
+      return { ok: false };
+    case "checkout": {
+      let packed;
+      try {
+        packed = packLocalKit(origin.pkgRoot);
+      } catch (err) {
+        io.error(
+          `packing this checkout's @kitn.ai/ui failed: ${err instanceof Error ? err.message : String(err)}
+  Pass --ui <version|tarball|path> to choose a kit explicitly.`
+        );
+        return { ok: false };
+      }
+      io.log(localKitNotice(origin.pkgRoot, packed.tarball, packed.packed));
+      return { ok: true, uiSpec: packed.tarball, localTarball: packed.tarball };
+    }
+  }
+}
+async function runCli(argv, io = defaultIo) {
+  const [command, ...rest] = argv;
+  switch (command) {
+    case "validate": {
+      const construct = loadConstruct(rest[0] ?? "", io);
+      if (!construct) return 1;
+      io.log(`valid construct: <${construct.name}> (layout: ${construct.layout}, provider: ${construct.provider.mode})`);
+      const warning = homeRecentConversationWarning(construct);
+      if (warning) io.log(warning);
+      for (const n of generationNotices(construct)) io.log(n);
+      return 0;
+    }
+    case "eject": {
+      const { uiSpec, positional } = parseUiFlag(rest);
+      const [path, outDir] = positional;
+      if (!path || !outDir) {
+        io.error(USAGE);
+        return 2;
+      }
+      const construct = loadConstruct(path, io);
+      if (!construct) return 1;
+      const kit = resolveUiSpec(uiSpec, io);
+      if (!kit.ok) return 1;
+      const ejectUiSpec = kit.localTarball !== void 0 ? vendorLocalKit(kit.localTarball, resolve(outDir), io) : kit.uiSpec;
+      const overwritten = writeProject(generateProject(construct, { uiSpec: ejectUiSpec }), resolve(outDir));
+      if (overwritten.length > 0) {
+        io.log(`overwriting ${overwritten.length} existing file(s)`);
+      }
+      for (const n of generationNotices(construct)) io.log(n);
+      io.log(`ejected <${construct.name}> to ${resolve(outDir)} — npm install && npm run dev. The source is yours.`);
+      return 0;
+    }
+    case "dev": {
+      const { uiSpec, builder, path } = parseDevArgs(rest);
+      if (builder) {
+        const kit2 = resolveUiSpec(uiSpec, io);
+        if (!kit2.ok) return 1;
+        const { devBuilder } = await import("./assets/dev-C27Rnkul.js");
+        await devBuilder(path, { io, uiSpec: kit2.uiSpec });
+        return 0;
+      }
+      if (!path) {
+        io.error(USAGE);
+        return 2;
+      }
+      const kit = resolveUiSpec(uiSpec, io);
+      if (!kit.ok) return 1;
+      const { dev } = await import("./assets/dev-C27Rnkul.js");
+      await dev(path, { io, uiSpec: kit.uiSpec });
+      return 0;
+    }
+    case "compile": {
+      const { uiSpec, positional } = parseUiFlag(rest);
+      const [path, outArg] = positional;
+      if (!path) {
+        io.error(USAGE);
+        return 2;
+      }
+      const construct = loadConstruct(path, io);
+      if (!construct) return 1;
+      const kit = resolveUiSpec(uiSpec, io);
+      if (!kit.ok) return 1;
+      const outDir = resolve(outArg ?? "dist-construct");
+      const { workDirFor, ensureInstalled } = await import("./assets/dev-C27Rnkul.js");
+      const dir = workDirFor(construct.name, process.cwd());
+      const files = generateProject(construct, { uiSpec: kit.uiSpec });
+      writeProject(files, dir);
+      await ensureInstalled(dir, files, io);
+      const npm = npmInvocation();
+      await new Promise((done, fail) => {
+        const child = spawn(npm.command, npmArgs(["run", "build"], npm.shell), { cwd: dir, stdio: "inherit", shell: npm.shell });
+        child.on("exit", (code) => code === 0 ? done() : fail(new Error(`vite build exited ${code}`)));
+        child.on("error", (err) => fail(new Error(`npm run build failed to start: ${err.message}`)));
+      });
+      mkdirSync(outDir, { recursive: true });
+      copyFileSync(join(dir, "dist", `${construct.name}.js`), join(outDir, `${construct.name}.js`));
+      writeFileSync(join(outDir, `${construct.name}.d.ts`), emitTypes(construct));
+      writeProject(files, join(outDir, "source"));
+      io.log(`compiled <${construct.name}> → ${outDir}/${construct.name}.js (source beside it in source/).`);
+      io.log(`endpoint backends: the kai MCP scaffold tool emits a matching route — see its output for your framework.`);
+      return 0;
+    }
+    default:
+      io.error(USAGE);
+      return 2;
+  }
+}
+runCli(process.argv.slice(2)).then((code) => {
+  process.exitCode = code;
+});
+export {
+  npmArgs as a,
+  generationNotices as b,
+  buildableTemplates as c,
+  generateProject as g,
+  inferTemplateId as i,
+  npmInvocation as n,
+  templateById as t,
+  validateConstruct as v,
+  writeProject as w
+};