@kitn.ai/ui 0.15.0 → 0.16.0

package/src/elements/chain-of-thought.declarative.test.tsx

@@ -1,153 +0,0 @@
-/**
- * Unit tests for the declarative `<kai-step>` light-DOM API of
- * `<kai-chain-of-thought>`.
- *
- * Strategy: the `defineWebComponent` call registers a real Shadow-DOM custom
- * element which requires a full browser environment (Constructable Stylesheets,
- * shadow roots, etc.) and is therefore not suitable for jsdom unit tests.
- * Instead we:
- *   1. Test the exported `parseKaiStepElement` helper in isolation — it has no
- *      DOM dependencies beyond `Element`, which jsdom provides perfectly.
- *   2. Test that the merged list of prop + slotted steps renders correctly via
- *      the `ChainOfThoughtStep`/`ChainOfThoughtTrigger` primitives, mirroring
- *      the pattern used in `prompt-suggestions.declarative.test.tsx`.
- */
-import { describe, it, expect, afterEach } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup } from '@solidjs/testing-library';
-import { For, Show } from 'solid-js';
-import { parseKaiStepElement } from './chain-of-thought';
-
-afterEach(cleanup);
-
-// ---------------------------------------------------------------------------
-// parseKaiStepElement — pure helper
-// ---------------------------------------------------------------------------
-
-describe('parseKaiStepElement', () => {
-  function makeEl(label: string | null, textContent?: string): Element {
-    const el = document.createElement('kai-step');
-    if (label !== null) el.setAttribute('label', label);
-    if (textContent !== undefined) el.textContent = textContent;
-    return el;
-  }
-
-  it('maps label attribute to Step.label', () => {
-    const step = parseKaiStepElement(makeEl('Searching docs', 'Found 3 hits'));
-    expect(step.label).toBe('Searching docs');
-  });
-
-  it('maps trimmed textContent to Step.content', () => {
-    const step = parseKaiStepElement(makeEl('Step', '  Found 3 hits  '));
-    expect(step.content).toBe('Found 3 hits');
-  });
-
-  it('returns undefined for content when textContent is empty', () => {
-    const step = parseKaiStepElement(makeEl('Build & verify', ''));
-    expect(step.content).toBeUndefined();
-  });
-
-  it('returns undefined for content when textContent is whitespace only', () => {
-    const step = parseKaiStepElement(makeEl('Build & verify', '   '));
-    expect(step.content).toBeUndefined();
-  });
-
-  it('falls back to empty string for label when attribute is absent', () => {
-    const step = parseKaiStepElement(makeEl(null, 'some detail'));
-    expect(step.label).toBe('');
-  });
-
-  it('returns a well-formed Step for a heading-only element', () => {
-    const step = parseKaiStepElement(makeEl('Understand the request'));
-    expect(step).toEqual({ label: 'Understand the request', content: undefined });
-  });
-
-  it('returns a well-formed Step for a step with detail', () => {
-    const step = parseKaiStepElement(makeEl('Searching docs', 'Found 3 hits'));
-    expect(step).toEqual({ label: 'Searching docs', content: 'Found 3 hits' });
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Merge + render: prop steps + slotted steps combine correctly
-// ---------------------------------------------------------------------------
-
-interface Step {
-  label: string;
-  content?: string;
-}
-
-/**
- * Minimal test harness that renders a list of Steps as labelled divs,
- * mirroring the merge logic in chain-of-thought.tsx. We render plain divs
- * rather than the full Shadow DOM component to stay within jsdom.
- */
-function StepList(props: { items: Step[] }) {
-  return (
-    <div>
-      <For each={props.items}>
-        {(step) => (
-          <div data-testid="step">
-            <span data-testid="step-label">{step.label}</span>
-            <Show when={step.content}>
-              <span data-testid="step-content">{step.content}</span>
-            </Show>
-          </div>
-        )}
-      </For>
-    </div>
-  );
-}
-
-describe('Step list rendering', () => {
-  it('renders one entry per step', () => {
-    const steps: Step[] = [
-      { label: 'Understand the request', content: 'The user wants composable web components.' },
-      { label: 'Design the API', content: 'Route 1: variant + flags.' },
-      { label: 'Build & verify' },
-    ];
-    const { getAllByTestId } = render(() => <StepList items={steps} />);
-    expect(getAllByTestId('step')).toHaveLength(3);
-  });
-
-  it('renders the label for each step', () => {
-    const steps: Step[] = [{ label: 'Searching docs' }, { label: 'Synthesising' }];
-    const { getAllByTestId } = render(() => <StepList items={steps} />);
-    const labels = getAllByTestId('step-label').map((el) => el.textContent);
-    expect(labels).toEqual(['Searching docs', 'Synthesising']);
-  });
-
-  it('renders content only when present', () => {
-    const steps: Step[] = [
-      { label: 'With detail', content: 'Found 3 hits' },
-      { label: 'No detail' },
-    ];
-    const { getAllByTestId, queryAllByTestId } = render(() => <StepList items={steps} />);
-    const contents = queryAllByTestId('step-content');
-    expect(contents).toHaveLength(1);
-    expect(contents[0]).toHaveTextContent('Found 3 hits');
-    expect(getAllByTestId('step')).toHaveLength(2);
-  });
-
-  it('renders prop steps before declarative (slotted) steps', () => {
-    const propSteps: Step[] = [{ label: 'Prop step' }];
-    const slottedSteps: Step[] = [{ label: 'Slotted step' }];
-    const merged = [...propSteps, ...slottedSteps];
-
-    const { getAllByTestId } = render(() => <StepList items={merged} />);
-    const labels = getAllByTestId('step-label').map((el) => el.textContent);
-    expect(labels).toEqual(['Prop step', 'Slotted step']);
-  });
-
-  it('parseKaiStepElement produces steps that render with the correct label and content', () => {
-    const el = document.createElement('kai-step');
-    el.setAttribute('label', 'Searching docs');
-    el.textContent = 'Found 3 hits';
-
-    const step = parseKaiStepElement(el);
-    const { getByTestId } = render(() => <StepList items={[step]} />);
-
-    expect(getByTestId('step-label')).toHaveTextContent('Searching docs');
-    expect(getByTestId('step-content')).toHaveTextContent('Found 3 hits');
-  });
-});

package/src/elements/chain-of-thought.stories.tsx

@@ -1,113 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { onMount } from 'solid-js';
-import './register'; // side effect: registers the custom elements
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-
-interface Step {
-  label: string;
-  content?: string;
-}
-
-// The web components are custom DOM elements, so declare the tags for JSX.
-declare module 'solid-js' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'kai-chain-of-thought': JSX.HTMLAttributes<HTMLElement>;
-      /** Light-DOM data carrier for declarative steps inside `<kai-chain-of-thought>`. */
-      'kai-step': JSX.HTMLAttributes<HTMLElement> & { label?: string };
-    }
-  }
-}
-
-const steps: Step[] = [
-  { label: 'Understand the request', content: 'The user wants a composable set of web components.' },
-  { label: 'Design the API', content: 'Route 1: variant + flags + events; rich data via properties.' },
-  { label: 'Build & verify' },
-];
-
-/** Render `<kai-chain-of-thought>` with the `steps` set as a JS property. */
-function CotElement(props: { steps: Step[] }) {
-  let el: (HTMLElement & { steps?: Step[] }) | undefined;
-  onMount(() => {
-    if (el) el.steps = props.steps;
-  });
-  return (
-    <kai-chain-of-thought ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '24px', 'max-width': '560px' }} />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-chain-of-thought id="cot"></kai-chain-of-thought>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  document.getElementById('cot').steps = [
-    { label: 'Understand the request', content: 'The user wants a composable set.' },
-    { label: 'Design the API', content: 'Route 1: variant + flags + events.' },
-    { label: 'Build & verify' },
-  ];
-</script>`;
-
-const meta = {
-  title: 'Components/ChainOfThought',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-chain-of-thought'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-chain-of-thought', [
-        '`<kai-chain-of-thought>` is the framework-agnostic **web component** for step-by-step reasoning — a connected list of steps, each with optional collapsible detail — isolated in **Shadow DOM**. The compound primitive collapses to a single `steps` data model (Route 1).',
-        '**When to use:** surfacing an agent\'s plan or reasoning trace in a non-Solid app. In SolidJS, compose the `ChainOfThought` primitives for finer control.',
-        '**Placement:** as a block above or below a message, or in a dedicated reasoning panel; it is `display: block` and sizes to content height, so no fixed height is required.',
-        "**How to use:** register once with `import '@kitn.ai/ui/elements'`. **Property API:** set the `steps` **property** — an array of `{ label, content? }` objects; steps with `content` become expandable. **Declarative API:** compose `<kai-step label=\"…\">…detail…</kai-step>` child elements directly in the HTML — the `label` attribute becomes the heading, `textContent` the optional expandable detail. Declarative children are merged after any prop steps.",
-        'See the **Code** tab for HTML usage.',
-      ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** A three-step reasoning trace; the last step has no detail. */
-export const Default: Story = {
-  render: () => <CotElement steps={steps} />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-const DECLARATIVE_HTML_SNIPPET = `<!-- Works in any framework or plain HTML — no JS property assignment needed -->
-<kai-chain-of-thought>
-  <kai-step label="Understand the request">The user wants a composable set of web components.</kai-step>
-  <kai-step label="Design the API">Route 1: variant + flags + events; rich data via properties.</kai-step>
-  <kai-step label="Build &amp; verify"></kai-step>
-</kai-chain-of-thought>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-</script>`;
-
-/**
- * Declare each reasoning step as a `<kai-step>` child element — no `steps`
- * property or JS array wiring needed. The `label` attribute becomes the
- * step heading; `textContent` becomes the optional expandable detail.
- * Children are light-DOM data carriers hidden by the Shadow DOM — pure data,
- * no visible output of their own.
- * Mix with the `steps` prop: prop items render first, declarative children after.
- */
-export const DeclarativeSteps: Story = {
-  name: 'Declarative Steps (kai-step)',
-  render: () => (
-    <kai-chain-of-thought style={{ display: 'block', padding: '24px', 'max-width': '560px' }}>
-      <kai-step label="Understand the request">The user wants a composable set of web components.</kai-step>
-      <kai-step label="Design the API">Route 1: variant + flags + events; rich data via properties.</kai-step>
-      <kai-step label="Build &amp; verify"></kai-step>
-    </kai-chain-of-thought>
-  ),
-  parameters: {
-    docs: {
-      source: { code: DECLARATIVE_HTML_SNIPPET, language: 'html' },
-    },
-  },
-};

package/src/elements/chat-scope-picker.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { onMount } from 'solid-js';
-import './register'; // side effect: registers the custom elements
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-
-// The web components are custom DOM elements, so declare the tags for JSX.
-declare module 'solid-js' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'kai-scope-picker': JSX.HTMLAttributes<HTMLElement> & {
-        'current-label'?: string;
-      };
-    }
-  }
-}
-
-/** Render `<kai-scope-picker>` with author/tag options set as properties. */
-function ScopePickerElement(props: { authors: string[]; tags: string[] }) {
-  let el: (HTMLElement & { availableAuthors?: string[]; availableTags?: string[] }) | undefined;
-  onMount(() => {
-    if (!el) return;
-    el.availableAuthors = props.authors;
-    el.availableTags = props.tags;
-    el.addEventListener('kai-scope-change', (e) => {
-      const ev = e as CustomEvent<{ filters: unknown }>;
-      console.log('kai-scope-change', ev.detail.filters ?? 'all');
-    });
-  });
-  return (
-    <kai-scope-picker ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '40px' }} />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-scope-picker id="scope"></kai-scope-picker>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const scope = document.getElementById('scope');
-  scope.availableAuthors = ['Rob', 'Alex'];
-  scope.availableTags = ['design', 'api'];
-  // undefined filters means "All Content"
-  scope.addEventListener('kai-scope-change', (e) => console.log(e.detail.filters ?? 'all'));
-</script>`;
-
-const meta = {
-  title: 'Components/ScopePicker',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-scope-picker'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-scope-picker', [
-          '`<kai-scope-picker>` is the framework-agnostic **web component** for scoping a chat by author or tag — a dropdown that emits the chosen filters — isolated in **Shadow DOM**.',
-          '**When to use:** letting users narrow a conversation/search to a subset of content. In SolidJS, use the `ChatScopePicker` primitive.',
-          '**Placement:** in the chat header or above the conversation list, beside the search input; it is a compact `inline-block` dropdown trigger that pairs naturally with `<kai-model-switcher>` or other header controls.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the `availableAuthors` / `availableTags` **properties** (and optionally `current-label`), and listen for the `kai-scope-change` **CustomEvent** (`undefined` filters = \"All Content\").",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** Authors and tags available as scope filters. */
-export const Default: Story = {
-  render: () => <ScopePickerElement authors={['Rob', 'Alex']} tags={['design', 'api']} />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};

package/src/elements/chat-workspace.stories.tsx

@@ -1,288 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { onMount, createSignal } from 'solid-js';
-import './register'; // side effect: registers all kitn custom elements including <kai-workspace>
-import type { ConversationGroup, ConversationSummary, ModelOption } from '../types';
-import type { ChatMessage } from './chat-types';
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-
-// The web components are custom DOM elements, so declare the tags for JSX.
-declare module 'solid-js' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'kai-workspace': JSX.HTMLAttributes<HTMLElement>;
-    }
-  }
-}
-
-const sampleGroups: ConversationGroup[] = [
-  { id: 'today', name: 'Today', sortOrder: 0, createdAt: '2026-06-13T00:00:00.000Z' },
-];
-
-const sampleConversations: ConversationSummary[] = [
-  {
-    id: '1',
-    title: 'Web component architecture',
-    groupId: 'today',
-    scope: { type: 'document' },
-    messageCount: 12,
-    lastMessageAt: '2026-06-13T15:30:00.000Z',
-    updatedAt: '2026-06-13T15:30:00.000Z',
-  },
-  {
-    id: '2',
-    title: 'Theming & tokens',
-    groupId: 'today',
-    scope: { type: 'document' },
-    messageCount: 5,
-    lastMessageAt: '2026-06-13T11:20:00.000Z',
-    updatedAt: '2026-06-13T11:20:00.000Z',
-  },
-];
-
-const sampleModels: ModelOption[] = [
-  { id: 'claude-4', name: 'Claude 4 Opus', provider: 'Anthropic' },
-  { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
-];
-
-const sampleMessages: ChatMessage[] = [
-  { id: 'm1', role: 'user', content: 'How do I drop the whole chat app in with one tag?' },
-  {
-    id: 'm2',
-    role: 'assistant',
-    content:
-      'Use `<kai-workspace>` — set `conversations`, `messages`, and `models` as properties and listen for `kai-conversation-select` + `kai-submit`.',
-    actions: ['copy', 'like'],
-  },
-];
-
-type WorkspaceEl = HTMLElement & {
-  groups?: ConversationGroup[];
-  conversations?: ConversationSummary[];
-  activeId?: string;
-  messages?: ChatMessage[];
-  models?: ModelOption[];
-  currentModel?: string;
-  chatTitle?: string;
-  placeholder?: string;
-  loading?: boolean;
-  suggestionMode?: string;
-  proseSize?: string;
-  codeTheme?: string;
-  codeHighlight?: boolean;
-  scrollButton?: boolean;
-  search?: boolean;
-  voice?: boolean;
-  slashCompact?: boolean;
-  sidebarWidth?: number;
-  sidebarMinWidth?: number;
-  sidebarMaxWidth?: number;
-  sidebarCollapsed?: boolean;
-  defaultSidebarCollapsed?: boolean;
-  value?: string;
-};
-
-/** Live demo of the actual `<kai-workspace>` custom element (Shadow DOM and all). */
-function WorkspaceElement(props: { args?: Record<string, unknown> }) {
-  let el: WorkspaceEl | undefined;
-  onMount(() => {
-    if (el) {
-      // Fixed array/object data
-      el.groups = sampleGroups;
-      el.conversations = sampleConversations;
-      el.activeId = '1';
-      el.messages = sampleMessages;
-      el.models = sampleModels;
-      el.currentModel = 'claude-4';
-      el.chatTitle = 'Web component architecture';
-      // Scalar args from Controls (override defaults above for scalar props)
-      const args = props.args;
-      if (args) {
-        const scalarNames = [
-          'placeholder', 'loading', 'suggestionMode', 'proseSize', 'codeTheme',
-          'codeHighlight', 'scrollButton', 'search', 'voice', 'slashCompact',
-          'sidebarWidth', 'sidebarMinWidth', 'sidebarMaxWidth', 'defaultSidebarCollapsed', 'value',
-        ];
-        for (const name of scalarNames) {
-          if (name in args) (el as unknown as Record<string, unknown>)[name] = args[name];
-        }
-      }
-      el.addEventListener('kai-conversation-select', (e) => console.log('select', (e as CustomEvent).detail));
-      el.addEventListener('kai-submit', (e) => console.log('submit', (e as unknown as CustomEvent).detail));
-      el.addEventListener('kai-sidebar-toggle', (e) => console.log('kai-sidebar-toggle', (e as CustomEvent).detail));
-    }
-  });
-  return (
-    <div style={{ height: '720px', width: '100%' }}>
-      <kai-workspace
-        ref={(e) => (el = e as WorkspaceEl)}
-        style={{ display: 'block', height: '100%' }}
-      />
-    </div>
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-workspace id="workspace" style="display:block; height:100vh;"></kai-workspace>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const workspace = document.getElementById('workspace');
-  workspace.conversations = [
-    {
-      id: '1', title: 'Web component architecture',
-      scope: { type: 'document' }, messageCount: 12,
-      lastMessageAt: '2026-06-13T15:30:00Z', updatedAt: '2026-06-13T15:30:00Z',
-    },
-  ];
-  workspace.messages = [
-    { id: 'm1', role: 'user', content: 'How do I drop the whole chat app in with one tag?' },
-    { id: 'm2', role: 'assistant', content: 'Use <kai-workspace> — set conversations, messages, and models as properties.' },
-  ];
-  workspace.models = [
-    { id: 'claude-4', name: 'Claude 4 Opus', provider: 'Anthropic' },
-  ];
-
-  // events are CustomEvents on the element (they do not bubble)
-  workspace.addEventListener('kai-conversation-select', (e) => console.log('selected conversation:', e.detail.id));
-  workspace.addEventListener('kai-submit', (e) => console.log('user sent:', e.detail.value));
-  workspace.addEventListener('kai-sidebar-toggle', (e) => console.log('sidebar collapsed:', e.detail.collapsed));
-</script>`;
-
-const SOLID_SNIPPET = `import '@kitn.ai/ui/elements'; // registers the custom elements
-import { onMount } from 'solid-js';
-import type { ConversationSummary, ModelOption } from '@kitn.ai/ui';
-import type { ChatMessage } from '@kitn.ai/ui/elements';
-
-function Workspace() {
-  let el: HTMLElement & {
-    conversations?: ConversationSummary[];
-    messages?: ChatMessage[];
-    models?: ModelOption[];
-    activeId?: string;
-  };
-  const conversations: ConversationSummary[] = [
-    {
-      id: '1', title: 'Web component architecture',
-      scope: { type: 'document' }, messageCount: 12,
-      lastMessageAt: '2026-06-13T15:30:00Z', updatedAt: '2026-06-13T15:30:00Z',
-    },
-  ];
-  const messages: ChatMessage[] = [
-    { id: 'm1', role: 'user', content: 'How do I drop the whole chat app in with one tag?' },
-    { id: 'm2', role: 'assistant', content: 'Use <kai-workspace> — set conversations, messages, and models as properties.' },
-  ];
-  onMount(() => {
-    el.conversations = conversations;
-    el.messages = messages;
-    el.activeId = '1';
-    el.addEventListener('kai-conversation-select', (e) => console.log('selected:', e.detail.id));
-    el.addEventListener('kai-submit', (e) => console.log('user sent:', e.detail.value));
-    el.addEventListener('kai-sidebar-toggle', (e) => console.log('sidebar collapsed:', e.detail.collapsed));
-  });
-  return (
-    <kai-workspace
-      ref={el}
-      style={{ display: 'block', height: '100vh' }}
-    />
-  );
-}`;
-
-const meta = {
-  title: 'Components/Workspace',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-workspace'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-workspace', [
-          '`<kai-workspace>` is the full chat shell as a single **web component** — a resizable split layout with a collapsible conversation list on the left and a full message thread on the right, all isolated in **Shadow DOM**. SolidJS is bundled in, so the host needs nothing.',
-          '**When to use:** dropping an entire chat application shell into a non-Solid app (React, Vue, Svelte, plain HTML), or anywhere you want zero style conflicts and a ready-made list+chat layout. If you *are* in SolidJS and want fine-grained control, compose the `ConversationList` and `ChatThread` primitives directly.',
-          '**How to use:** register once with `import \'@kitn.ai/ui/elements\'`, set rich data as JS **properties** (`el.conversations = [...]`, `el.messages = [...]`, `el.models = [...]`), and listen for **CustomEvents** (`kai-conversation-select`, `kai-submit`, `kai-sidebar-toggle`, `kai-new-chat`) directly on the element.',
-          '**Anatomy:** **sidebar panel** (a `<kai-conversations>` list with new-chat + collapse toggle, drag-resizable via an inner divider handle, collapses to a ghost reveal button) | **divider handle** (drag or click to resize; disappears when collapsed) | **chat panel** (the full `<ChatThread>`: header + message list + prompt composer; the thread node is stable across collapse/expand).',
-          '**Placement:** as a full-page surface or large panel. Give it an explicit height (e.g. `height: 100vh`). The sidebar is drag-resizable and can be collapsed via the toggle button in its header.',
-          'See the **Code** tab below for the HTML usage; the *SolidJS* story shows the same element inside a Solid component.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** The element used the plain-HTML / any-framework way. */
-export const Default: Story = {
-  args: {
-    placeholder: 'Send a message...',
-    loading: false,
-    suggestionMode: 'submit',
-    proseSize: 'sm',
-    codeTheme: 'github-dark-dimmed',
-    codeHighlight: true,
-    scrollButton: true,
-    search: false,
-    voice: false,
-    slashCompact: false,
-  },
-  render: (args: Record<string, unknown>) => <WorkspaceElement args={args} />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** The same element used inside a SolidJS component (properties via `ref` + `onMount`, events via `addEventListener`). */
-export const InSolidJS: Story = {
-  name: 'In SolidJS',
-  render: () => <WorkspaceElement />,
-  parameters: { docs: { source: { code: SOLID_SNIPPET, language: 'tsx' } } },
-};
-
-const CONTROLLED_SNIPPET = `const ws = document.getElementById('workspace');
-let collapsed = false;
-ws.sidebarCollapsed = collapsed;            // app owns the state
-
-// react to the in-component toggle AND drive it from your own UI
-ws.addEventListener('kai-sidebar-toggle', (e) => {
-  collapsed = e.detail.collapsed;
-  ws.sidebarCollapsed = collapsed;          // persist / restore as you like
-});
-document.getElementById('toggle').onclick = () => {
-  collapsed = !collapsed;
-  ws.sidebarCollapsed = collapsed;          // collapse from outside the header
-};`;
-
-/**
- * Controlled collapse: the app owns `sidebarCollapsed`, drives it as a property,
- * and updates it from `kai-sidebar-toggle`. An external button collapses the
- * sidebar from outside the workspace — only possible because the state is
- * controlled (uncontrolled mode keeps collapse internal to the element).
- */
-export const ControlledSidebar: Story = {
-  name: 'Controlled sidebar',
-  render: () => {
-    let el: WorkspaceEl | undefined;
-    const [collapsed, setCollapsed] = createSignal(false);
-    const drive = (next: boolean) => { setCollapsed(next); if (el) el.sidebarCollapsed = next; };
-    onMount(() => {
-      if (!el) return;
-      el.groups = sampleGroups;
-      el.conversations = sampleConversations;
-      el.activeId = '1';
-      el.messages = sampleMessages;
-      el.models = sampleModels;
-      el.currentModel = 'claude-4';
-      el.chatTitle = 'Web component architecture';
-      el.sidebarCollapsed = collapsed();
-      el.addEventListener('kai-sidebar-toggle', (e) => drive((e as CustomEvent<{ collapsed: boolean }>).detail.collapsed));
-    });
-    return (
-      <div style={{ height: '720px', width: '100%', display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
-        <button type="button" onClick={() => drive(!collapsed())} style={{ 'align-self': 'flex-start', padding: '6px 12px', 'border-radius': '8px', border: '1px solid var(--color-border)', cursor: 'pointer' }}>
-          {collapsed() ? 'Expand' : 'Collapse'} sidebar (from the app)
-        </button>
-        <kai-workspace ref={(e) => (el = e as WorkspaceEl)} style={{ display: 'block', flex: '1', 'min-height': '0' }} />
-      </div>
-    );
-  },
-  parameters: { docs: { source: { code: CONTROLLED_SNIPPET, language: 'js' } } },
-};
-