create-kai 0.1.0

package/dist/templates/svelte/src/App.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { KaiResizableItemElement } from '@kitn.ai/ui/elements';
+  import { readOpenAIStream } from '@kitn.ai/ui/wire';
+  import { CONVERSATIONS, THREADS, SUGGESTIONS, TRIGGERS, newId, mockResponse } from './chat-data';
+  import type { Theme } from './lib/types';
+  import { createChat } from './lib/chat.svelte';
+  import { createConversations } from './lib/conversations.svelte';
+  import Sidebar from './components/Sidebar.svelte';
+  import ThreadView from './components/ThreadView.svelte';
+  import Composer from './components/Composer.svelte';
+  import ThemeToggle from './components/ThemeToggle.svelte';
+
+  /**
+   * A mini chat workspace COMPOSED BY HAND from @kitn.ai/ui's individual elements —
+   * the Svelte mirror of `examples/react` + `examples/vue`. It shows how the raw
+   * `kai-*` web components fit together (vs. dropping in one batteries-included
+   * `<kai-chat>`/`<kai-workspace>`):
+   *
+   *   <kai-resizable>/<kai-resizable-item>  — the draggable sidebar | main split (the
+   *                                           divider is the kit's default `line` hairline)
+   *   <kai-conversations>  — the sidebar list (fed `conversations`, emits select/new)
+   *   <kai-thread>         — the scrolling message list (stick-to-bottom built in)
+   *   <kai-prompt-input>   — the composer at the bottom
+   *
+   * The pieces are split into `components/` (the UI subcomponents + the example's own
+   * moon/sun icons) and `lib/` (`createChat` owns the message array + streaming,
+   * `createConversations` the conversation stash, `createVoiceInput` the mic).
+   * Everything else is plain Svelte runes. Swap `mockResponse(text)` for a real
+   * `fetch` to ship.
+   */
+  let theme: Theme = $state('dark');
+  let collapsed = $state(false);
+  const chat = createChat(THREADS[CONVERSATIONS[0].id] ?? []);
+  const conversations = createConversations(chat, CONVERSATIONS);
+
+  const suggestions: string[] = $derived(chat.messages.length <= 1 ? SUGGESTIONS : []);
+
+  // The sidebar <kai-resizable-item>'s `collapsed` boolean is a DOM property the
+  // parent <kai-resizable> reads (reflected to an attribute the group observes), so
+  // drive it imperatively rather than as a bare attribute.
+  let sidebarItem: KaiResizableItemElement;
+  $effect(() => { sidebarItem.collapsed = collapsed; });
+
+  async function send(raw: string) {
+    const text = raw.trim();
+    if (!text) return;
+    // The Composer already cleared its own input; here we just append the user
+    // message and stream the (mock) assistant reply.
+    chat.append({ id: newId(), role: 'user', parts: [{ type: 'text', text }] });
+    const stream = chat.streamAssistant();
+    // NO BACKEND AND NO PROVIDER. mockResponse() yields canned SSE frames that go
+    // through the SAME reader a real model's response would, so this preview
+    // exercises the real path. To go live, only this one expression changes —
+    // `mockResponse(text)` becomes a POST to your route, with
+    // toOpenAIMessages(chat.messages) as the body. The line below stays.
+    await readOpenAIStream(mockResponse(text), stream);
+    stream.done();
+  }
+</script>
+
+<!-- <kai-resizable> owns the sidebar width + the divider. The handle defaults to the
+     `line` hairline (transparent at rest, tinting on hover/drag); collapsing the
+     sidebar maps to <kai-resizable-item collapsed>. Pass `theme` to the group AND
+     every item so slotted chrome inherits the right light/dark tokens. -->
+<div class="app" class:dark={theme === 'dark'}>
+  <kai-resizable {theme} orientation="horizontal">
+    <kai-resizable-item bind:this={sidebarItem} {theme} size="280px" min="220px" max="420px">
+      <Sidebar
+        {theme}
+        conversations={conversations.conversations}
+        activeId={conversations.activeId}
+        {collapsed}
+        onselect={conversations.selectConversation}
+        onnewchat={conversations.newChat}
+        ontoggle={() => (collapsed = !collapsed)}
+      />
+    </kai-resizable-item>
+
+    <kai-resizable-item {theme}>
+      <main class="main">
+        <header class="bar">
+          <div class="bar-left">
+            {#if collapsed}
+              <!-- Comma-separated on purpose: in runes mode Svelte reads everything after the
+                   first uncommaed code as prose, so the space-separated form suppresses only the
+                   first rule. Both are false positives over a shadow root that already holds a
+                   real focusable `<button>`; see the block in components/ThemeToggle.svelte. -->
+              <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+              <kai-button
+                {theme}
+                variant="ghost"
+                size="icon"
+                icon="panel-left"
+                label="Show sidebar"
+                onclick={() => (collapsed = false)}
+              ></kai-button>
+            {/if}
+            <span class="brand">@kitn.ai/ui · composed chat</span>
+          </div>
+          <ThemeToggle {theme} ontoggle={() => (theme = theme === 'light' ? 'dark' : 'light')} />
+        </header>
+
+        <ThreadView {theme} messages={chat.messages} />
+
+        <Composer
+          {theme}
+          loading={chat.loading}
+          {suggestions}
+          triggers={TRIGGERS}
+          onsubmit={send}
+          onsuggestion={send}
+        />
+      </main>
+    </kai-resizable-item>
+  </kai-resizable>
+</div>

package/dist/templates/svelte/src/app.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+
+// The raw `kai-*` elements are DOM custom elements (not Svelte components), so they
+// have no generated prop types. Declare the tags this example uses so the template
+// accepts their scalar attributes (`theme`, `size`, `active-id`, …), their rich
+// props, and their `onkai-*` event handlers without type errors. Rich array/object
+// props and boolean flags are set imperatively as DOM PROPERTIES in each component
+// (see the `bind:this` + `$effect` blocks), which is why a permissive attribute map
+// here is enough.
+declare namespace svelteHTML {
+  interface IntrinsicElements {
+    'kai-resizable': Record<string, unknown>;
+    'kai-resizable-item': Record<string, unknown>;
+    'kai-conversations': Record<string, unknown>;
+    'kai-thread': Record<string, unknown>;
+    'kai-prompt-input': Record<string, unknown>;
+    'kai-button': Record<string, unknown>;
+  }
+}

package/dist/templates/svelte/src/chat-data.ts

@@ -0,0 +1,106 @@
+// Self-contained sample data + the kit's shared mock responder, no backend.
+import type { MessagePart } from '@kitn.ai/ui';
+import { createMockResponder } from '@kitn.ai/ui/state';
+
+export interface Conversation {
+  id: string;
+  title: string;
+  scope: { type: 'document' | 'collection' };
+  messageCount: number;
+  lastMessageAt: string;
+  updatedAt: string;
+}
+export interface Msg {
+  id: string;
+  role: 'user' | 'assistant';
+  parts: MessagePart[];
+}
+
+export function newId(): string {
+  return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+    ? crypto.randomUUID()
+    : 'id-' + Math.random().toString(36).slice(2);
+}
+
+const iso = (daysAgo = 0) => new Date(Date.now() - daysAgo * 86_400_000).toISOString();
+
+export const CONVERSATIONS: Conversation[] = [
+  { id: 'c1', title: 'Getting started', scope: { type: 'collection' }, messageCount: 2, lastMessageAt: iso(0), updatedAt: iso(0) },
+  { id: 'c2', title: 'Composing your own chat', scope: { type: 'collection' }, messageCount: 2, lastMessageAt: iso(0), updatedAt: iso(0) },
+  { id: 'c3', title: 'Theming + dark mode', scope: { type: 'collection' }, messageCount: 2, lastMessageAt: iso(1), updatedAt: iso(1) },
+];
+
+export const THREADS: Record<string, Msg[]> = {
+  c1: [
+    { id: 'c1u', role: 'user', parts: [{ type: 'text', text: 'What is @kitn.ai/ui?' }] },
+    { id: 'c1a', role: 'assistant', parts: [{ type: 'text', text: '**@kitn.ai/ui** is a set of framework-agnostic web components for AI chat UIs: message threads, streaming, markdown, tool panels, and more. This demo composes its `<kai-conversations>`, `<kai-thread>`, and `<kai-prompt-input>` elements by hand.' }] },
+  ],
+  c2: [
+    { id: 'c2u', role: 'user', parts: [{ type: 'text', text: 'How do I build my own chat instead of dropping in `<kai-chat>`?' }] },
+    { id: 'c2a', role: 'assistant', parts: [{ type: 'text', text: "Feed your `messages` to a `<kai-thread>`, put a `<kai-prompt-input>` below, and wire `kai-submit` to append + stream. That's exactly what this example does. Read `App.svelte`." }] },
+  ],
+  c3: [
+    { id: 'c3u', role: 'user', parts: [{ type: 'text', text: 'How does dark mode work?' }] },
+    { id: 'c3a', role: 'assistant', parts: [{ type: 'text', text: "Each element takes a `theme` prop (`light` / `dark` / `auto`). Drive it from app state. Toggle it with the button top-right. The kit's `--color-*` tokens flip under a `.dark` class for your own surrounding chrome." }] },
+  ],
+};
+
+export const SUGGESTIONS = ['What is @kitn.ai/ui?', 'How do I install it?', 'Show me some markdown'];
+
+// Rich entity triggers for the prompt input: typing `/` opens the skills menu,
+// `@` opens the agents menu. Each selection inserts an atomic pill. Set on
+// <kai-prompt-input> as the `triggers` JS property (a TriggerDef[]).
+export const TRIGGERS = [
+  {
+    char: '/',
+    kind: 'skill',
+    items: [
+      { id: 'summarize', label: 'Summarize', description: 'Summarize the thread', promptText: 'Summarize the thread.' },
+      { id: 'translate', label: 'Translate', description: 'Translate to English', promptText: 'Translate to English.' },
+      { id: 'rewrite', label: 'Rewrite', description: 'Rewrite for clarity', promptText: 'Rewrite this for clarity.' },
+    ],
+  },
+  {
+    char: '@',
+    kind: 'agent',
+    items: [
+      { id: 'researcher', label: 'Researcher', description: 'Deep web research', group: 'Agents' },
+      { id: 'coder', label: 'Coder', description: 'Writes and edits code', group: 'Agents' },
+      { id: 'designer', label: 'Designer', description: 'UI and visual design', group: 'Agents' },
+    ],
+  },
+];
+
+// The replies the mock cycles through, one per turn. Markdown-rich on purpose:
+// the thread renders markdown, code blocks and blockquotes, so the canned
+// replies exercise that instead of only proving text arrives.
+//
+// The first one says it is a mock in words. That is the WEAKEST of the
+// responder's tells and the only one a real model could imitate, which is
+// exactly why it is not the only one — the rest are on the wire, below.
+const MOCK_REPLIES = [
+  "This reply streams token-by-token from the kit's own mock responder. No API key, no backend, no provider was contacted. Replace `mockResponse(text)` with a real model call (Anthropic, OpenAI, your own endpoint) to ship a real app.",
+  "Install it:\n\n```bash\nnpm install @kitn.ai/ui\n```\n\nThen register the elements + load the tokens:\n\n```ts\nimport '@kitn.ai/ui/elements';\nimport '@kitn.ai/ui/theme.tokens.css';\n```\n\nNow drop `<kai-thread>` and `<kai-prompt-input>` into your template.",
+  "I render **bold**, *italic*, `inline code`, lists, and code blocks:\n\n```ts\nconst stream = chat.streamAssistant();\nawait readOpenAIStream(mockResponse(text), stream);\nstream.done();\n```\n\n> Blockquotes too.",
+  "This chat is **composed by hand**: `<kai-conversations>` for the sidebar, a `<kai-thread>` for the messages, and `<kai-prompt-input>` at the bottom, all wired with plain reactive state. Swap `mockResponse(text)` for your own model call and you're shipping.",
+];
+
+/**
+ * The kit's own mock responder, shared with the `kai` MCP scaffolder and
+ * `create-kai` so there is ONE implementation of this and not seven.
+ *
+ * It yields canned SSE frames in the OpenAI chat-completions shape, which
+ * `readOpenAIStream` parses exactly as it parses a real provider's. So this
+ * no-backend preview runs the kit's REAL streaming path — the SSE reader, the
+ * part folding, all of it — rather than a hand-rolled loop that merely
+ * resembles it. Going live then changes one expression, not the handler.
+ *
+ * It also cannot be mistaken for a real turn: the stream opens with a
+ * `: kai-mock` SSE comment, every frame carries a `_kai_mock` field, `model`
+ * reports as `kai-mock` (no provider serves that, so an echoed mock frame is
+ * rejected upstream rather than quietly believed), and usage is all zeros.
+ *
+ * MODULE scope, not per-send: the responder owns the cursor into the replies
+ * above, so rebuilding it each turn would answer with the first one forever.
+ */
+export const mockResponse = createMockResponder({ replies: MOCK_REPLIES });

package/dist/templates/svelte/src/components/Composer.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import type { KaiPromptInputElement } from '@kitn.ai/ui/elements';
+  import type { Theme } from '../lib/types';
+  import { createVoiceInput } from '../lib/voiceInput';
+
+  /**
+   * The bottom composer. Wraps `<kai-prompt-input>` and owns the input-DOM concerns:
+   * the element ref, a live text mirror, clear-on-submit, and seeding voice.
+   *
+   * The prompt input stays UNCONTROLLED so the `/`+`@` trigger menus keep a live
+   * caret. We NEVER bind a plain STRING `value`: that flips the element into
+   * controlled mode, which re-applies the property and collapses the shadow-DOM
+   * selection, disabling the caret-anchored menu. So clear-on-submit goes through
+   * the element's `clear()` method, and voice seeds a ComposerDoc (a non-string
+   * value is a one-time seed that leaves the input uncontrolled). We keep the live
+   * text mirrored in `liveText` (from `kai-value-change`) so voice can append.
+   *
+   * Rich props (`suggestions`, `triggers`) and boolean flags (`loading`, `voice`)
+   * are set imperatively as DOM PROPERTIES (`bind:this` + `$effect`): `voice` in
+   * particular MUST be a truthy PROPERTY (`el.voice = true`), not a bare attribute,
+   * or the facade reads the mic control as off.
+   */
+  let {
+    theme,
+    loading,
+    suggestions,
+    triggers,
+    onsubmit,
+    onsuggestion,
+  }: {
+    theme: Theme;
+    loading: boolean;
+    suggestions: string[];
+    triggers: unknown[];
+    onsubmit: (value: string) => void;
+    onsuggestion: (value: string) => void;
+  } = $props();
+
+  // Ref to the underlying <kai-prompt-input> for the imperative pushes (rich props,
+  // flags, clear() on submit, ComposerDoc seed from voice); `liveText` mirrors text.
+  // The kit ships a typed element interface; intersect the imperative `clear()`
+  // method the facade exposes (methods aren't part of the generated prop interface).
+  let el: KaiPromptInputElement & { clear?: () => void };
+  let liveText = '';
+
+  $effect(() => { el.suggestions = suggestions; });
+  $effect(() => { el.triggers = triggers as KaiPromptInputElement['triggers']; });
+  $effect(() => { el.loading = loading; });
+  // A truthy PROPERTY, never a bare `voice` attribute. Runs once (no reactive deps).
+  $effect(() => { el.voice = true; });
+
+  // Voice: on a transcript, append it to the current text and seed the (uncontrolled)
+  // input as a ComposerDoc. A non-string `value` is a one-time seed into the
+  // element's internal state; a plain STRING would instead flip it into controlled
+  // mode and re-break the `/`+`@` triggers and submit.
+  const { supported: voiceSupported, start: startVoice } = createVoiceInput((transcript) => {
+    const next = (liveText ? liveText + ' ' : '') + transcript;
+    liveText = next;
+    el.value = [{ type: 'text', text: next }];
+  });
+
+  function handleVoice() {
+    // Mic is Chromium-only; degrade gracefully everywhere else.
+    if (!voiceSupported) {
+      alert('Voice input needs a Chromium browser.');
+      return;
+    }
+    startVoice();
+  }
+
+  function onValueChange(e: Event) {
+    liveText = (e as CustomEvent<{ value: string }>).detail.value;
+  }
+
+  function onSubmit(e: Event) {
+    // Clear our own uncontrolled input first — reset the mirror + call the element's
+    // clear() method (uncontrolled-safe; fires kai-value-change internally, never a
+    // string assignment) — then hand the text up. The parent owns append + streaming.
+    liveText = '';
+    el.clear?.();
+    onsubmit((e as CustomEvent<{ value: string }>).detail.value);
+  }
+
+  function onSuggestionClick(e: Event) {
+    onsuggestion((e as CustomEvent<{ value: string }>).detail.value);
+  }
+</script>
+
+<div class="composer">
+  <kai-prompt-input
+    bind:this={el}
+    {theme}
+    placeholder="Message the demo…"
+    onkai-voice={handleVoice}
+    onkai-value-change={onValueChange}
+    onkai-submit={onSubmit}
+    onkai-suggestion-click={onSuggestionClick}
+  ></kai-prompt-input>
+  <p class="composer-hint">
+    Type <kbd>/</kbd> for skills · <kbd>@</kbd> for agents
+  </p>
+</div>

package/dist/templates/svelte/src/components/Sidebar.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { KaiConversationsElement } from '@kitn.ai/ui/elements';
+  import type { Theme } from '../lib/types';
+  import type { Conversation } from '../chat-data';
+
+  /**
+   * The conversation rail — a thin wrapper over `<kai-conversations>`. The `.sidebar`
+   * div owns the shell's right border (kept OFF the element so it follows the shell's
+   * light/dark tokens, not the light-mode ones the element pins on itself at `:host`).
+   * The rail's `collapsed` is CONTROLLED by the app's collapsed state, so it stays in
+   * sync with the parent `<kai-resizable-item collapsed>` and re-expands on restore;
+   * the internal hamburger still reports the toggle intent up via
+   * `onkai-toggle-sidebar`.
+   *
+   * Array/object props (`groups`, `conversations`) and the boolean `collapsed` flag
+   * are set imperatively as DOM PROPERTIES (`bind:this` + `$effect`) so they land on
+   * the upgraded element rather than as attributes. `theme` / `active-id` are scalar
+   * attributes.
+   */
+  let {
+    theme,
+    conversations,
+    activeId,
+    collapsed,
+    onselect,
+    onnewchat,
+    ontoggle,
+  }: {
+    theme: Theme;
+    conversations: Conversation[];
+    activeId: string;
+    collapsed: boolean;
+    onselect: (id: string) => void;
+    onnewchat: () => void;
+    ontoggle: () => void;
+  } = $props();
+
+  // The kit ships a typed element interface (via `HTMLElementTagNameMap`), so the
+  // `bind:this` ref + its rich props are fully typed — no casts needed.
+  let el: KaiConversationsElement;
+
+  // `groups` never changes, so this effect has no reactive deps and runs once.
+  $effect(() => { el.groups = []; });
+  $effect(() => { el.conversations = conversations; });
+  $effect(() => { el.collapsed = collapsed; });
+
+  function onSelect(e: Event) {
+    onselect((e as CustomEvent<{ id: string }>).detail.id);
+  }
+</script>
+
+<aside class="sidebar">
+  <kai-conversations
+    bind:this={el}
+    {theme}
+    active-id={activeId}
+    onkai-conversation-select={onSelect}
+    onkai-new-chat={onnewchat}
+    onkai-toggle-sidebar={ontoggle}
+  ></kai-conversations>
+</aside>

package/dist/templates/svelte/src/components/ThemeToggle.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Theme } from '../lib/types';
+  import MoonIcon from './icons/MoonIcon.svelte';
+  import SunIcon from './icons/SunIcon.svelte';
+
+  /**
+   * Light/dark switch for the top bar. Shows the moon in light mode (tap -> dark)
+   * and the sun in dark mode. `<kai-button>` is icon-only, so it carries the
+   * accessible label; the glyph is decorative (`aria-hidden`) in the `icon` slot.
+   * `<kai-button>` fires the native bubbling `click`, so a plain `onclick` works.
+   */
+  let { theme, ontoggle }: { theme: Theme; ontoggle: () => void } = $props();
+</script>
+
+<!--
+  Both suppressed rules are false positives HERE, and the justification is the
+  shadow root Svelte's a11y pass cannot see into. It sees an unknown tag with a
+  click handler; the button semantics are one level down.
+
+  Measured in chromium against this starter's own build: the accessibility tree
+  holds a single `button` named "Toggle light/dark theme" (named from the
+  `aria-label` the kit puts on its inner `<button>` from the `label` prop), and
+  the `<kai-button>` host is ignored as "uninteresting" and contributes no node.
+  Tab reaches that inner button, and Enter and Space activate it natively. The
+  resulting click is composed, so it crosses the shadow boundary and lands on
+  this `onclick`. Keyboard operation is real, not asserted.
+
+  Do NOT satisfy the second warning literally by putting a role on the host.
+  Measured the same way, `role="button"` there turns the one node into TWO
+  identically named buttons, and the outer one has tabindex -1, so it is a
+  control screen readers announce and keyboard users cannot reach. The kit
+  scrubs stray host roles for this reason (`liftRoleOffHost`, kai-message).
+
+  The codes MUST be comma-separated. In runes mode Svelte reads everything after
+  the first uncommaed code as prose, so the space-separated form silently
+  suppressed only `a11y_click_events_have_key_events` and let the other through.
+-->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<kai-button {theme} variant="ghost" size="icon" label="Toggle light/dark theme" onclick={ontoggle}>
+  {#if theme === 'light'}
+    <MoonIcon slot="icon" aria-hidden="true" />
+  {:else}
+    <SunIcon slot="icon" aria-hidden="true" />
+  {/if}
+</kai-button>

package/dist/templates/svelte/src/components/ThreadView.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { ChatMessage } from '@kitn.ai/ui';
+  import { partsToText } from '@kitn.ai/ui/state';
+  import type { KaiThreadElement } from '@kitn.ai/ui/elements';
+  import type { Theme } from '../lib/types';
+
+  /**
+   * The scrolling message list. `<kai-thread>` owns the message rendering, the
+   * centered fixed-width column, and stick-to-bottom scroll, so this component just
+   * bakes the per-message actions onto the assistant turns and wires the custom
+   * `speak` action to the browser's speech synthesis. `copy` (and the feedback
+   * votes) are handled inside the element.
+   *
+   * `messages` is set on the element as a DOM PROPERTY (`bind:this` + `$effect`); a
+   * NEW array reference per streaming chunk is what re-renders it. The `withActions`
+   * `$derived` produces that fresh array whenever `messages` changes.
+   */
+  let { theme, messages }: { theme: Theme; messages: ChatMessage[] } = $props();
+
+  let el: KaiThreadElement;
+
+  // <kai-thread> reads `actions` off each message; only assistant replies get them.
+  const withActions: ChatMessage[] = $derived(
+    messages.map((m) =>
+      m.role === 'assistant'
+        ? { ...m, actions: ['copy', { id: 'speak', label: 'Read aloud', icon: 'volume-2' }] }
+        : m,
+    ),
+  );
+
+  $effect(() => { el.messages = withActions; });
+
+  function onMessageAction(e: Event) {
+    const detail = (e as CustomEvent<{ messageId: string; action: string }>).detail;
+    if (detail.action === 'speak') {
+      const m = messages.find((x) => x.id === detail.messageId);
+      if (!m) return;
+      window.speechSynthesis.cancel();
+      window.speechSynthesis.speak(new SpeechSynthesisUtterance(partsToText(m.parts)));
+    }
+  }
+</script>
+
+<kai-thread
+  class="thread"
+  bind:this={el}
+  {theme}
+  onkai-message-action={onMessageAction}
+></kai-thread>

package/dist/templates/svelte/src/components/icons/MoonIcon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  /**
+   * Moon glyph — shown in light mode (tap the toggle -> dark). moon/sun aren't in
+   * the kit's icon set, so the example owns them. The parent (`<kai-button>`) is a
+   * custom element, so extra props (`slot="icon"`, `aria-hidden`) pass through as a
+   * prop bag; spreading `...rest` onto the root <svg> lands them on the DOM node so
+   * it drops into <kai-button>'s `icon` slot. Mirrors the Vue icon's fallthrough.
+   */
+  let { size = 20, ...rest }: { size?: number } & Record<string, unknown> = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  {...rest}
+>
+  <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+</svg>

package/dist/templates/svelte/src/components/icons/SunIcon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  /**
+   * Sun glyph — shown in dark mode (tap the toggle -> light). See MoonIcon for why
+   * the example owns these icons and how the spread lands `slot`/`aria-hidden` on
+   * the root <svg>.
+   */
+  let { size = 20, ...rest }: { size?: number } & Record<string, unknown> = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  {...rest}
+>
+  <circle cx="12" cy="12" r="4" />
+  <path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" />
+  <path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />
+</svg>

package/dist/templates/svelte/src/index.css

@@ -0,0 +1,111 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Full-height workspace shell. Colors come from the kit's --color-* tokens, which
+   flip to dark under the `.dark` class we toggle on `.app`. <kai-resizable> fills
+   this box (its `:host` is `height:100%`) and owns the sidebar | main split, the
+   panel widths, and the draggable divider. */
+.app {
+  height: 100dvh;
+  background: var(--color-background);
+  color: var(--color-foreground);
+}
+
+/* The sidebar is its own surface: `--color-muted` sits a step off `--color-background`
+   in both themes (near-white grey in light, a shade lighter than the base in dark). That
+   #f4f4f5-on-white step is subtle, so a 1px right border marks the at-rest sidebar | main
+   division: <kai-resizable>'s `line` handle is transparent at rest and only tints on
+   hover/drag, so the boundary has to come from the panel itself. The border uses
+   `var(--color-border)`, which now tracks the shell's light/dark tokens because the parent
+   <ResizableItem theme={theme}> forwards the theme (a light hairline in light mode, dark in
+   dark). `box-sizing: border-box` keeps the 1px inside the 280px item so it doesn't shift
+   the content width. Collapse is handled by the parent <ResizableItem collapsed> (the panel
+   + its divider drop out), so the old `.sidebar.collapsed` rule is gone. */
+.sidebar {
+  background: var(--color-muted);
+  border-right: 1px solid var(--color-border);
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sidebar > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.bar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.brand {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-muted-foreground);
+}
+
+/* <kai-thread> scrolls internally and centers its own fixed-width column, so the
+   host just needs to fill the remaining height of the main flex column. */
+.thread {
+  flex: 1;
+  min-height: 0;
+}
+
+/* No top divider above the input — the composer floats against the thread. Extra
+   bottom padding lifts the input + hint off the viewport edge. */
+.composer {
+  padding: 0.75rem 1rem 1.5rem;
+}
+
+/* Match the composer to the centered message column above it. */
+.composer > * {
+  display: block;
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+/* Muted, centered helper line under the input pointing out the / and @ triggers. */
+.composer-hint {
+  margin: 0.5rem auto 0;
+  font-size: 0.75rem;
+  text-align: center;
+  color: var(--color-muted-foreground);
+}
+
+.composer-hint kbd {
+  font-family: inherit;
+  font-size: 0.6875rem;
+  padding: 0.05rem 0.3rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-muted);
+  color: var(--color-foreground);
+}