@kitn.ai/ui 0.14.1

package/src/stories/docs/theme-editor/presets.ts

@@ -0,0 +1,64 @@
+import type { Palette } from './theme-css';
+
+export type Preset = { name: string; light: Palette; dark: Palette };
+export type BrandOverride = { light: Palette; dark: Palette };
+
+/** Per-preset brand-token overrides (light + dark). Neutrals come from the live base. */
+export const BRAND_OVERRIDES: Record<string, BrandOverride> = {
+  Violet: {
+    light: {
+      '--color-primary': 'hsl(262 83% 58%)',
+      '--color-primary-foreground': 'hsl(0 0% 100%)',
+      '--color-ring': 'hsl(262 83% 58%)',
+      '--color-code-foreground': 'hsl(262 83% 58%)',
+    },
+    dark: {
+      '--color-primary': 'hsl(263 70% 65%)',
+      '--color-primary-foreground': 'hsl(0 0% 100%)',
+      '--color-ring': 'hsl(263 70% 65%)',
+      '--color-code-foreground': 'hsl(263 90% 80%)',
+    },
+  },
+  Emerald: {
+    light: {
+      '--color-primary': 'hsl(160 84% 39%)',
+      '--color-primary-foreground': 'hsl(0 0% 100%)',
+      '--color-ring': 'hsl(160 84% 39%)',
+      '--color-code-foreground': 'hsl(160 84% 32%)',
+    },
+    dark: {
+      '--color-primary': 'hsl(158 64% 52%)',
+      '--color-primary-foreground': 'hsl(160 30% 8%)',
+      '--color-ring': 'hsl(158 64% 52%)',
+      '--color-code-foreground': 'hsl(158 70% 65%)',
+    },
+  },
+  Mono: {
+    light: {
+      '--color-primary': 'hsl(0 0% 20%)',
+      '--color-primary-foreground': 'hsl(0 0% 98%)',
+      '--color-ring': 'hsl(0 0% 40%)',
+      '--color-code-foreground': 'hsl(0 0% 30%)',
+    },
+    dark: {
+      '--color-primary': 'hsl(0 0% 92%)',
+      '--color-primary-foreground': 'hsl(0 0% 12%)',
+      '--color-ring': 'hsl(0 0% 70%)',
+      '--color-code-foreground': 'hsl(0 0% 75%)',
+    },
+  },
+};
+
+const ORDER = ['Default', 'Violet', 'Emerald', 'Mono'];
+
+/** Build full presets by layering brand overrides onto the live-discovered base palette. */
+export function buildPresets(base: { light: Palette; dark: Palette }): Preset[] {
+  return ORDER.map((name) => {
+    const ov = BRAND_OVERRIDES[name];
+    return {
+      name,
+      light: ov ? { ...base.light, ...ov.light } : { ...base.light },
+      dark: ov ? { ...base.dark, ...ov.dark } : { ...base.dark },
+    };
+  });
+}

package/src/stories/docs/theme-editor/theme-css.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { buildThemeCss } from './theme-css';
+
+describe('buildThemeCss', () => {
+  it('emits sorted :root and .dark blocks', () => {
+    const css = buildThemeCss(
+      { '--color-primary': '#ffffff', '--radius': '0.6rem' },
+      { '--color-primary': '#000000' },
+    );
+    expect(css).toBe(
+      ':root {\n  --color-primary: #ffffff;\n  --radius: 0.6rem;\n}\n\n.dark {\n  --color-primary: #000000;\n}',
+    );
+  });
+
+  it('keys are sorted within each block', () => {
+    const css = buildThemeCss({ '--b': '2', '--a': '1' }, {});
+    expect(css).toBe(':root {\n  --a: 1;\n  --b: 2;\n}\n\n.dark {\n\n}');
+  });
+});

package/src/stories/docs/theme-editor/theme-css.ts

@@ -0,0 +1,15 @@
+/** A map of CSS custom-property name → value, e.g. { '--color-primary': '#fff' }. */
+export type Palette = Record<string, string>;
+
+function block(selector: string, palette: Palette): string {
+  const body = Object.keys(palette)
+    .sort()
+    .map((k) => `  ${k}: ${palette[k]};`)
+    .join('\n');
+  return `${selector} {\n${body}\n}`;
+}
+
+/** Build a paste-ready theme override block: full light set on :root, dark set on .dark. */
+export function buildThemeCss(light: Palette, dark: Palette): string {
+  return `${block(':root', light)}\n\n${block('.dark', dark)}`;
+}

package/src/stories/docs/theme-editor/theme-editor.tsx

@@ -0,0 +1,146 @@
+// src/stories/docs/theme-editor/theme-editor.tsx
+import { createSignal, createEffect, onMount, onCleanup, For } from 'solid-js';
+import { Button } from '../../../ui/button';
+import { discoverPalettes } from '../theme-tokens';
+import { buildThemeCss, type Palette } from './theme-css';
+import { buildPresets, type Preset } from './presets';
+import { Inspector } from './inspector';
+import { Canvas, CANVAS_CLASS } from './canvas';
+
+const STYLE_ID = 'kitn-theme-editor-overrides';
+
+/** Full-screen live theme editor: edit light/dark tokens, preview a real chat, export CSS. */
+export function ThemeEditor() {
+  const [presets, setPresets] = createSignal<Preset[]>([]);
+  const [mode, setMode] = createSignal<'light' | 'dark'>('light');
+  const [light, setLight] = createSignal<Palette>({});
+  const [dark, setDark] = createSignal<Palette>({});
+  const [presetName, setPresetName] = createSignal('Default');
+  const [copied, setCopied] = createSignal(false);
+
+  onMount(() => {
+    const ps = buildPresets(discoverPalettes());
+    setPresets(ps);
+    const def = ps.find((p) => p.name === 'Default')!;
+    setLight({ ...def.light });
+    setDark({ ...def.dark });
+  });
+
+  // Apply the ACTIVE mode's palette directly onto the canvas wrapper. Scoping to
+  // CANVAS_CLASS (rather than :root/.dark) means the preview reflects the editor's
+  // mode independently of any ancestor `.dark` (e.g. Storybook's dark theme), and
+  // only the canvas reskins — not the editor chrome. Export (Copy CSS) still emits
+  // the full :root + .dark theme separately.
+  let styleEl: HTMLStyleElement | undefined;
+  createEffect(() => {
+    if (!Object.keys(light()).length) return; // not seeded yet
+    const colors: Palette = mode() === 'light' ? light() : dark();
+    const radius = light()['--radius'] ?? '0.6rem';
+    const colorBody = Object.keys(colors)
+      .filter((k) => k.startsWith('--color-'))
+      .sort()
+      .map((k) => `  ${k}: ${colors[k]};`)
+      .join('\n');
+    // Re-express the radius scale on the wrapper. The kit's --radius-sm/md/lg/xl are
+    // calc(var(--radius) …) declared at :root, so their var(--radius) resolves once
+    // at :root and inherits as a fixed length — overriding --radius lower in the tree
+    // doesn't move them. Re-declaring them here (against the wrapper's --radius) does.
+    const radiusBody = [
+      `  --radius: ${radius};`,
+      `  --radius-sm: calc(var(--radius) - 4px);`,
+      `  --radius-md: calc(var(--radius) - 2px);`,
+      `  --radius-lg: var(--radius);`,
+      `  --radius-xl: calc(var(--radius) + 4px);`,
+    ].join('\n');
+    // Re-establish the inherited `color` and native `color-scheme` on the wrapper:
+    // tokens alone don't fix text whose color is inherited from outside the canvas
+    // (e.g. elements with no explicit text-color class), nor native form controls.
+    const css = `.${CANVAS_CLASS} {\n${colorBody}\n${radiusBody}\n  color: var(--color-foreground);\n  color-scheme: ${mode()};\n}`;
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = STYLE_ID;
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = css;
+  });
+  onCleanup(() => styleEl?.remove());
+
+  const colorTokens = () => Object.keys(light()).filter((n) => n.startsWith('--color-')).sort();
+  const activeValues = () => (mode() === 'light' ? light() : dark());
+
+  const setColor = (token: string, hex: string) => {
+    if (mode() === 'light') setLight((v) => ({ ...v, [token]: hex }));
+    else setDark((v) => ({ ...v, [token]: hex }));
+  };
+  const setRadius = (rem: string) => setLight((v) => ({ ...v, '--radius': rem }));
+
+  const loadPreset = (name: string) => {
+    const p = presets().find((x) => x.name === name);
+    if (!p) return;
+    setLight({ ...p.light });
+    setDark({ ...p.dark });
+    setPresetName(name);
+  };
+  const reset = () => loadPreset('Default');
+
+  const copyCss = async () => {
+    try {
+      await navigator.clipboard.writeText(buildThemeCss(light(), dark()));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard blocked */
+    }
+  };
+
+  return (
+    <div class="h-screen w-full flex flex-col bg-background text-foreground">
+      {/* Top bar */}
+      <div class="flex items-center justify-between gap-3 border-b border-border px-4 h-12 shrink-0">
+        <div class="flex items-center gap-3">
+          <strong class="text-sm">Theme editor</strong>
+          <div class="flex rounded-md border border-border overflow-hidden text-xs">
+            <button class="px-2.5 py-1" classList={{ 'bg-secondary': mode() === 'light' }} onClick={() => setMode('light')}>
+              Light
+            </button>
+            <button class="px-2.5 py-1" classList={{ 'bg-secondary': mode() === 'dark' }} onClick={() => setMode('dark')}>
+              Dark
+            </button>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <select
+            aria-label="Theme preset"
+            class="bg-input border border-border rounded-md text-xs px-2 h-8"
+            value={presetName()}
+            onChange={(e) => loadPreset(e.currentTarget.value)}
+          >
+            <For each={presets()}>{(p) => <option value={p.name}>{p.name}</option>}</For>
+          </select>
+          <Button size="sm" variant="outline" onClick={copyCss}>
+            {copied() ? 'Copied!' : 'Copy CSS'}
+          </Button>
+          <Button size="sm" variant="outline" onClick={reset}>
+            Reset
+          </Button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div class="flex-1 flex min-h-0">
+        <div class="w-[300px] shrink-0 border-r border-border overflow-auto">
+          <Inspector
+            tokens={colorTokens()}
+            values={activeValues()}
+            radius={light()['--radius'] ?? '0.6rem'}
+            onColorChange={setColor}
+            onRadiusChange={setRadius}
+          />
+        </div>
+        <div class="flex-1 min-w-0 p-3">
+          <Canvas mode={mode()} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/stories/docs/theme-tokens.tsx

@@ -0,0 +1,174 @@
+import { createSignal, For, onMount, type JSX } from 'solid-js';
+import type { Palette } from './theme-editor/theme-css';
+
+// Docs-only helpers (not part of the kit's public API). They auto-discover the
+// kit's design tokens straight from the loaded CSS, so the reference + editor
+// can never drift from theme.css as tokens are added or changed.
+
+type ColorToken = { name: string; light: string; dark: string };
+type RadiusToken = { name: string; value: string };
+
+export const PURPOSE: Record<string, string> = {
+  '--color-background': 'App / page background',
+  '--color-foreground': 'Default text',
+  '--color-card': 'Card surface',
+  '--color-card-foreground': 'Text on cards',
+  '--color-popover': 'Popover / menu surface',
+  '--color-popover-foreground': 'Text in popovers',
+  '--color-primary': 'Primary action background',
+  '--color-primary-foreground': 'Text on primary',
+  '--color-secondary': 'Secondary surface',
+  '--color-secondary-foreground': 'Text on secondary',
+  '--color-muted': 'Muted surface (subtle fills)',
+  '--color-muted-foreground': 'Muted / secondary text',
+  '--color-accent': 'Accent / hover surface',
+  '--color-accent-foreground': 'Text on accent',
+  '--color-destructive': 'Destructive / danger',
+  '--color-destructive-foreground': 'Text on destructive',
+  '--color-border': 'Borders / dividers',
+  '--color-input': 'Input field background',
+  '--color-ring': 'Focus ring',
+  '--color-sidebar': 'Sidebar background',
+  '--color-code-foreground': 'Inline code text / accent',
+};
+
+/** Raw walk of loaded stylesheets → light/dark custom-property maps (colors + radius).
+ *  Recurses into grouping rules (@layer, @media, @supports) because Tailwind v4
+ *  emits the `:root` theme tokens inside an `@layer`, which a flat walk would miss. */
+function collectTokens(): { light: Record<string, string>; dark: Record<string, string> } {
+  const light: Record<string, string> = {};
+  const dark: Record<string, string> = {};
+  const visit = (rules: CSSRuleList) => {
+    for (const rule of Array.from(rules)) {
+      const r = rule as CSSStyleRule;
+      if (r.selectorText && r.style) {
+        const isRoot = /(^|,)\s*:root\b/.test(r.selectorText);
+        const isDark = /(^|,)\s*\.dark\b/.test(r.selectorText);
+        if (isRoot || isDark) {
+          for (const prop of Array.from(r.style)) {
+            if (!prop.startsWith('--color-') && !prop.startsWith('--radius')) continue;
+            const val = r.style.getPropertyValue(prop).trim();
+            if (isRoot) light[prop] = val;
+            if (isDark) dark[prop] = val;
+          }
+        }
+      }
+      // Grouping rules (@layer/@media/@supports) carry nested rules — recurse.
+      const nested = (rule as CSSGroupingRule).cssRules;
+      if (nested) visit(nested);
+    }
+  };
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      visit(sheet.cssRules);
+    } catch {
+      // cross-origin sheet
+    }
+  }
+  return { light, dark };
+}
+
+/** Reference data for the token table: a color token is one with a `.dark` override. */
+function discover(): { colors: ColorToken[]; radii: RadiusToken[] } {
+  const { light, dark } = collectTokens();
+  const colors = Object.keys(dark)
+    .filter((n) => n.startsWith('--color-'))
+    .sort()
+    .map((name) => ({ name, light: light[name] || dark[name], dark: dark[name] }));
+  const radii = Object.keys(light)
+    .filter((n) => n.startsWith('--radius'))
+    .sort()
+    .map((name) => ({ name, value: light[name] }));
+  return { colors, radii };
+}
+
+/** Light/dark palettes for the theme editor: light = colors + --radius, dark = colors.
+ *  The token set is keyed off the `.dark` overrides — that's what defines a kit token
+ *  and excludes Tailwind's default palette (which has no `.dark` entry). Light values
+ *  come from `:root`, falling back to the dark value if a token only exists in dark. */
+export function discoverPalettes(): { light: Palette; dark: Palette } {
+  const { light, dark } = collectTokens();
+  const names = Object.keys(dark).filter((n) => n.startsWith('--color-')).sort();
+  const lightPalette: Palette = { '--radius': light['--radius'] ?? '0.6rem' };
+  const darkPalette: Palette = {};
+  for (const name of names) {
+    lightPalette[name] = light[name] || dark[name];
+    darkPalette[name] = dark[name];
+  }
+  return {
+    light: lightPalette,
+    dark: darkPalette,
+  };
+}
+
+/** Resolve any CSS color string (e.g. hsl(...)) to #rrggbb for a color input. */
+export function toHex(css: string): string {
+  const el = document.createElement('div');
+  el.style.color = css;
+  el.style.display = 'none';
+  document.body.appendChild(el);
+  const rgb = getComputedStyle(el).color;
+  el.remove();
+  const m = rgb.match(/\d+(\.\d+)?/g);
+  if (!m) return '#000000';
+  return '#' + m.slice(0, 3).map((x) => Math.round(+x).toString(16).padStart(2, '0')).join('');
+}
+
+const cellHead: JSX.CSSProperties = { 'text-align': 'left', padding: '6px 10px', 'border-bottom': '1px solid var(--color-border)', 'font-weight': '600' };
+const cell: JSX.CSSProperties = { padding: '6px 10px', 'border-bottom': '1px solid var(--color-border)', 'vertical-align': 'middle' };
+
+function Swatch(props: { color: string }) {
+  return (
+    <span
+      style={{
+        display: 'inline-block', width: '1.15rem', height: '1.15rem', 'border-radius': '4px',
+        background: props.color, border: '1px solid var(--color-border)', 'vertical-align': 'middle',
+        'margin-right': '.4rem',
+      }}
+    />
+  );
+}
+
+/** Auto-generated reference of every overridable token (light + dark values). */
+export function TokenTable() {
+  const [data, setData] = createSignal<{ colors: ColorToken[]; radii: RadiusToken[] }>({ colors: [], radii: [] });
+  onMount(() => setData(discover()));
+  return (
+    <div style={{ 'font-size': '13px', color: 'var(--color-foreground)' }}>
+      <table style={{ width: '100%', 'border-collapse': 'collapse' }}>
+        <thead>
+          <tr>
+            <th style={cellHead}>Token</th>
+            <th style={cellHead}>Purpose</th>
+            <th style={cellHead}>Light</th>
+            <th style={cellHead}>Dark</th>
+          </tr>
+        </thead>
+        <tbody>
+          <For each={data().colors}>
+            {(t) => (
+              <tr>
+                <td style={cell}><code>{t.name}</code></td>
+                <td style={{ ...cell, color: 'var(--color-muted-foreground)' }}>{PURPOSE[t.name] || ''}</td>
+                <td style={cell}><Swatch color={t.light} /><small>{t.light}</small></td>
+                <td style={cell}><Swatch color={t.dark} /><small>{t.dark}</small></td>
+              </tr>
+            )}
+          </For>
+          <For each={data().radii}>
+            {(t) => (
+              <tr>
+                <td style={cell}><code>{t.name}</code></td>
+                <td style={{ ...cell, color: 'var(--color-muted-foreground)' }}>Corner radius</td>
+                <td style={{ ...cell }} colspan={2}><small>{t.value}</small></td>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+      <p style={{ 'margin-top': '.75rem', color: 'var(--color-muted-foreground)', 'font-size': '12px' }}>
+        This table is generated live from the loaded CSS — it always reflects the current tokens in <code>theme.css</code>.
+      </p>
+    </div>
+  );
+}

package/src/stories/examples/ChoosingComponents.mdx

@@ -0,0 +1,106 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Choosing Components" />
+
+# Choosing components
+
+`@kitn.ai/ui` ships 40+ `kai-*` web components across **three tiers**. This page is
+the mental model for **which tier to reach for** — so you don't have to read all 40+
+per-element pages to know where to start.
+
+> The per-element **When / How / Placement** notes live on each element's own story
+> (under **Components**). This page is the missing *overview* — the
+> decision guide, not the per-element prose.
+
+## The three tiers
+
+### 1. Flagship / shells — _drop-in, the 90% path_
+
+`<kai-chat>` · `<kai-workspace>`
+
+A **whole surface in one tag**. Set `messages`, listen for `submit`, and you have a
+working chat in minutes. `<kai-workspace>` adds the conversation sidebar + header
+around it. These pre-wire the leaf components for you.
+
+**Reach for these first.** Only step down a tier when the flagship doesn't fit.
+
+```html
+<kai-chat id="chat" chat-title="Assistant" style="display:block;height:560px"></kai-chat>
+<script type="module">
+  import '@kitn.ai/ui/elements';
+  const chat = document.getElementById('chat');
+  chat.messages = [{ id: '1', role: 'assistant', content: 'Hi!' }];
+  chat.addEventListener('kai-submit', (e) => {/* call your model */});
+</script>
+```
+
+### 2. Leaf features — _compose your own layout_
+
+`<kai-conversations>` · `<kai-message>` · `<kai-tool>` · `<kai-reasoning>` ·
+`<kai-chain-of-thought>` · `<kai-thinking-bar>` · `<kai-response-stream>` ·
+`<kai-source>` / `<kai-sources>` · `<kai-skills>` · `<kai-prompt-input>` ·
+`<kai-suggestions>` · `<kai-file-upload>` · `<kai-voice-input>` · `<kai-attachments>` ·
+`<kai-model-switcher>` · `<kai-context>` · `<kai-scope-picker>` · `<kai-checkpoint>` ·
+`<kai-feedback-bar>` · `<kai-artifact>` · `<kai-resizable>`
+
+The **chat-specific building blocks**. Reach for these when the flagship layout
+doesn't fit — you want a custom three-up shell, an inspector/canvas panel, a bespoke
+header, or to render messages your own way. You own the data flow and the event
+wiring; the leaves render.
+
+`<kai-resizable>` is the **layout spine** for compose-your-own shells; `<kai-artifact>`
+is the **preview/canvas** panel. See the worked example in
+**Examples / Composed chat shell**.
+
+### 3. Primitives — _reusable anywhere_
+
+`<kai-code-block>` · `<kai-markdown>` · `<kai-loader>` · `<kai-text-shimmer>` ·
+`<kai-image>` · `<kai-empty>` · `<kai-file-tree>`
+
+**Not chat-specific.** A code viewer, a markdown renderer, loaders, an image with a
+skeleton, an empty-state, a file explorer — useful in any app. They happen to be
+used inside the chat components, but ship public so you can reuse them standalone.
+
+### Generative UI — _agent-controlled cards_
+
+`<kai-cards>` · `<kai-confirm>` · `<kai-choice>` · `<kai-tasks>` · `<kai-form>` · `<kai-link>` · `<kai-embed>` · `<kai-remote>`
+
+A separate family of `kai-*` elements for **typed, interactive cards** that agents push into
+the chat at runtime. They follow the same prop/event contract as the leaf features above
+but are designed to be driven by a `CardEnvelope` payload from the agent, not authored
+in markup. Browse **Generative UI** in the sidebar for the envelope format, the dispatcher,
+and per-card API references.
+
+## The decision test
+
+> **"Would a non-chat app reuse this?"**
+>
+> - **Yes** → it's a **primitive** (tier 3). A docs site wants `<kai-markdown>`; a
+>   dashboard wants `<kai-loader>`; a file browser wants `<kai-file-tree>`.
+> - **No, but it's a chat building block** → it's a **leaf feature** (tier 2).
+>   `<kai-message>`, `<kai-tool>`, `<kai-conversations>` only make sense in a chat.
+> - **I just want a working chat** → use the **flagship** (tier 1). `<kai-chat>`.
+
+## How they fit together
+
+```
+flagship            <kai-chat> / <kai-workspace>        ← pre-wires the leaves
+   ▲ composed from
+leaf features       <kai-conversations> <kai-message> <kai-prompt-input> <kai-artifact> …
+   ▲ composed from / laid out by
+primitives + layout <kai-markdown> <kai-code-block> <kai-loader> … inside <kai-resizable>
+```
+
+Start at the top. Drop a tier each time you need more control.
+
+## Where to go next
+
+- **Examples / Catalog** — every component with sample data + copy-pasteable
+  markup. Answers _"what exists?"_.
+- **Examples / Composed chat shell** — a real chat assembled from leaves inside
+  `<kai-resizable>`, shown next to the `<kai-chat>` drop-in so the contrast is
+  explicit. Answers _"how do I wire it myself, and when should I?"_.
+- **Components** — the per-element pages with full API + the When /
+  How / Placement notes.
+- **Generative UI** — the agent-card system (`kai-confirm`, `kai-choice`, `kai-tasks`, …):
+  envelope format, dispatcher, and per-card API.

package/src/stories/examples/sample-data.ts

@@ -0,0 +1,79 @@
+// Shared sample data for the Examples/* web-component stories. Mirrors the data
+// in examples/composable/main.js so the Storybook catalog matches the external
+// showcase. Plain data only — no DOM wiring here.
+
+export const models = [
+  { id: 'opus', name: 'Claude Opus', provider: 'Anthropic' },
+  { id: 'sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
+  { id: 'haiku', name: 'Claude Haiku', provider: 'Anthropic' },
+];
+
+export const context = {
+  usedTokens: 48200,
+  maxTokens: 200000,
+  inputTokens: 31000,
+  outputTokens: 17200,
+  estimatedCost: 0.42,
+};
+
+/** An inline SVG data-URL — handy for attachment thumbnails without a server. */
+export function imgData(fill: string, glyph: string): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><rect width="96" height="96" rx="12" fill="${fill}"/><text x="48" y="60" font-size="42" text-anchor="middle" fill="white">${glyph}</text></svg>`;
+  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
+}
+
+export const attachments = [
+  { id: '1', type: 'file', filename: 'architecture.png', mediaType: 'image/png', url: imgData('#7c3aed', '◆') },
+  { id: '2', type: 'file', filename: 'spec.pdf', mediaType: 'application/pdf' },
+  { id: '3', type: 'source-document', title: 'kitn.dev/docs', filename: 'kitn.dev' },
+];
+
+export const conversations = [
+  { id: 'c1', title: 'Web component architecture', scope: { type: 'document' }, messageCount: 12, lastMessageAt: '2026-06-11T10:00:00Z', updatedAt: '2026-06-11T10:00:00Z' },
+  { id: 'c2', title: 'Theming & tokens', scope: { type: 'document' }, messageCount: 5, lastMessageAt: '2026-06-10T09:00:00Z', updatedAt: '2026-06-10T09:00:00Z' },
+  { id: 'c3', title: 'Publishing pipeline', scope: { type: 'document' }, messageCount: 8, lastMessageAt: '2026-06-09T09:00:00Z', updatedAt: '2026-06-09T09:00:00Z' },
+];
+
+export const slashCommands = [
+  { id: 'summarize', label: '/summarize', description: 'Summarize the conversation', category: 'Actions' },
+  { id: 'translate', label: '/translate', description: 'Translate the last message', category: 'Actions' },
+  { id: 'image', label: '/image', description: 'Generate an image', category: 'Tools' },
+];
+
+export const sources = [
+  { href: 'https://kitn.dev', title: 'kitn — the kit', description: 'Composable SolidJS + web-component chat UI.', showFavicon: true },
+  { href: 'https://solidjs.com', title: 'SolidJS', description: 'A reactive UI library.', showFavicon: true },
+];
+
+/** A rich assistant turn — reasoning + a tool call + an attachment + actions. */
+export const assistantMessage = {
+  id: 'm-a',
+  role: 'assistant',
+  content: "Here's the plan, with a quick code sample:\n```js\nconst kit = useKitn();\n```",
+  reasoning: { text: 'The user wants X, so I should do Y then Z.', label: 'Reasoning' },
+  tools: [{ type: 'search', state: 'output-available', input: { query: 'kitn docs' }, output: { hits: 3 } }],
+  attachments: [attachments[0]],
+  actions: ['copy', 'like', 'dislike', 'regenerate'],
+};
+
+export const userMessage = { id: 'm-u', role: 'user', content: 'How do I compose these myself?' };
+
+export const cotSteps = [
+  { label: 'Understand the request', content: 'The user wants a composable set.' },
+  { label: 'Design the API', content: 'Route 1: variant + flags + events.' },
+  { label: 'Build & verify' },
+];
+
+/** A short thread for the composed-shell + drop-in stories. */
+export const thread = [
+  { id: '1', role: 'user', content: 'Can you sketch a composable chat shell?' },
+  {
+    id: '2',
+    role: 'assistant',
+    content:
+      'Sure. A shell is just a layout (`<kai-resizable>`) wrapping leaf components:\n\n```html\n<kai-conversations></kai-conversations>\n<kai-message></kai-message>\n<kai-prompt-input></kai-prompt-input>\n```\n\nYou own the data + events; the leaves render.',
+    reasoning: { text: 'Lay out list | chat | artifact, then wire submit + select.', label: 'Reasoning' },
+    tools: [{ type: 'plan_layout', state: 'output-available', input: { panels: 3 }, output: { ok: true } }],
+    actions: ['copy', 'like', 'dislike', 'regenerate'],
+  },
+];