@kitn.ai/ui 0.15.0 → 0.16.0

package/src/elements/markdown.stories.tsx

@@ -1,76 +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-markdown': JSX.HTMLAttributes<HTMLElement>;
-    }
-  }
-}
-
-const sampleMarkdown = `### Markdown
-Renders **bold**, _italic_, \`code\`, and lists:
-- one
-- two
-
-> and blockquotes.
-
-\`\`\`ts
-export function add(a: number, b: number): number {
-  return a + b;
-}
-\`\`\``;
-
-/** Render the actual `<kai-markdown>` custom element with a `content` property. */
-function MarkdownElement(props: { content: string }) {
-  let el: (HTMLElement & { content?: string }) | undefined;
-  onMount(() => {
-    if (el) el.content = props.content;
-  });
-  return (
-    <kai-markdown ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px', 'max-width': '720px' }} />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-markdown id="md" code-theme="github-dark-dimmed"></kai-markdown>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const md = document.getElementById('md');
-  md.content = '### Hello\\nRenders **bold**, _italic_, and \\\`code\\\`.';
-  // md.setAttribute('code-highlight', 'false'); // skip Shiki entirely
-</script>`;
-
-const meta = {
-  title: 'Components/Markdown',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-markdown'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-markdown', [
-          '`<kai-markdown>` is the framework-agnostic **web component** that renders a markdown string (with fenced-code syntax highlighting via Shiki) as a standalone element, isolated in **Shadow DOM**.',
-          '**When to use:** showing model output or any markdown in a non-Solid app without pulling in a markdown stack. In SolidJS, use the `Markdown` primitive directly.',
-          '**Placement:** as a block inside a message row, doc viewer, or standalone content pane; it is `display: block` and expands to fill its container width, so constrain width on the parent.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the source via the `content` **property** (`el.content = '...'`), and tune rendering with the `prose-size`, `code-theme`, and `code-highlight` attributes.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** Headings, emphasis, lists, a blockquote, and a highlighted code fence. */
-export const Default: Story = {
-  render: () => <MarkdownElement content={sampleMarkdown} />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};

package/src/elements/message-skills.declarative.test.tsx

@@ -1,104 +0,0 @@
-/**
- * Unit tests for the declarative `<kai-skill>` light-DOM API of `<kai-skills>`.
- *
- * 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 `parseKaiSkillElement` helper in isolation — it has no
- *      DOM dependencies beyond `Element`, which jsdom provides perfectly.
- *   2. Test that the merged list of prop + slotted items renders badge spans
- *      correctly via `MessageSkills` directly, 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 } from 'solid-js';
-import { parseKaiSkillElement } from './message-skills';
-import { MessageSkills } from '../components/message-skills';
-
-afterEach(cleanup);
-
-// ---------------------------------------------------------------------------
-// parseKaiSkillElement — pure helper
-// ---------------------------------------------------------------------------
-
-describe('parseKaiSkillElement', () => {
-  function makeNode(textContent: string, id?: string): Element {
-    const el = document.createElement('kai-skill');
-    el.textContent = textContent;
-    if (id !== undefined) el.setAttribute('id', id);
-    return el;
-  }
-
-  it('uses textContent as name', () => {
-    const item = parseKaiSkillElement(makeNode('Web Search'));
-    expect(item).toMatchObject({ name: 'Web Search' });
-  });
-
-  it('uses id attribute as id when present', () => {
-    const item = parseKaiSkillElement(makeNode('Web Search', 'web-search'));
-    expect(item).toMatchObject({ id: 'web-search', name: 'Web Search' });
-  });
-
-  it('falls back to textContent as id when id attribute is absent', () => {
-    const item = parseKaiSkillElement(makeNode('Web Search'));
-    expect(item).toMatchObject({ id: 'Web Search', name: 'Web Search' });
-  });
-
-  it('trims leading/trailing whitespace from textContent', () => {
-    const item = parseKaiSkillElement(makeNode('  Code Interpreter  '));
-    expect(item).toMatchObject({ name: 'Code Interpreter' });
-  });
-
-  it('handles empty textContent with an id attribute', () => {
-    const item = parseKaiSkillElement(makeNode('', 'code'));
-    expect(item).toMatchObject({ id: 'code', name: '' });
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Merge + render: prop skills + slotted skills combine correctly
-// ---------------------------------------------------------------------------
-
-interface Skill {
-  id: string;
-  name: string;
-}
-
-describe('MessageSkills rendering with merged skills', () => {
-  it('renders one badge span per skill', () => {
-    const { getByText } = render(() => (
-      <MessageSkills skills={[{ id: 'web-search', name: 'Web Search' }, { id: 'code', name: 'Code' }]} />
-    ));
-    expect(getByText('Web Search')).toBeInTheDocument();
-    expect(getByText('Code')).toBeInTheDocument();
-  });
-
-  it('renders nothing when skills is empty', () => {
-    const { container } = render(() => <MessageSkills skills={[]} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders prop items before declarative (slotted) items', () => {
-    // Simulate the merge: prop first, slotted second.
-    const propSkills: Skill[] = [{ id: 'prop', name: 'Prop Skill' }];
-    const slottedSkills: Skill[] = [{ id: 'slotted', name: 'Slotted Skill' }];
-    const merged = [...propSkills, ...slottedSkills];
-
-    const { getAllByText } = render(() => <MessageSkills skills={merged} />);
-    // Both must be present; order is enforced by DOM order
-    expect(getAllByText(/Prop Skill|Slotted Skill/)).toHaveLength(2);
-  });
-
-  it('parseKaiSkillElement produces items that render correctly', () => {
-    const el = document.createElement('kai-skill');
-    el.textContent = 'Memory';
-    el.setAttribute('id', 'memory');
-
-    const parsed = parseKaiSkillElement(el);
-    const { getByText } = render(() => <MessageSkills skills={[parsed]} />);
-    expect(getByText('Memory')).toBeInTheDocument();
-  });
-});

package/src/elements/message-skills.stories.tsx

@@ -1,114 +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-skills': JSX.HTMLAttributes<HTMLElement>;
-      /** Light-DOM data carrier for declarative skill badges inside `<kai-skills>`. */
-      'kai-skill': JSX.HTMLAttributes<HTMLElement> & {
-        id?: string;
-      };
-    }
-  }
-}
-
-interface Skill {
-  id: string;
-  name: string;
-}
-
-const sampleSkills: Skill[] = [
-  { id: 's1', name: 'web-search' },
-  { id: 's2', name: 'code' },
-];
-
-/** Render the actual `<kai-skills>` custom element with a `skills` property. */
-function MessageSkillsElement(props: { skills: Skill[] }) {
-  let el: (HTMLElement & { skills?: Skill[] }) | undefined;
-  onMount(() => {
-    if (el) el.skills = props.skills;
-  });
-  return (
-    <kai-skills ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px' }} />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-skills id="skills"></kai-skills>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const skills = document.getElementById('skills');
-  skills.skills = [
-    { id: 's1', name: 'web-search' },
-    { id: 's2', name: 'code' },
-  ];
-</script>`;
-
-const meta = {
-  title: 'Components/Skills',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-skills'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-skills', [
-          '`<kai-skills>` is the framework-agnostic **web component** that badges which skills were active for a message, isolated in **Shadow DOM**.',
-          '**When to use:** annotating a message row with the skills/tools it used, in a non-Solid app. In SolidJS, use the `MessageSkills` primitive directly.',
-          '**Placement:** beneath or inline with the message content, typically in the footer of a message row alongside action buttons; it is `display: block` and wraps badges horizontally.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`. Then either (a) set the `skills` **property** to an array of `{ id, name }` objects, or (b) compose `<kai-skill>` child elements — light-DOM data carriers hidden by the Shadow DOM — where the tag's text content is the badge label and the optional `id` attribute is the stable identifier. When both are provided, prop items render first and declarative children are appended after.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** Two active-skill badges set via the `skills` JS property. */
-export const Default: Story = {
-  render: () => <MessageSkillsElement skills={sampleSkills} />,
-  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-skills>
-  <kai-skill id="web-search">Web Search</kai-skill>
-  <kai-skill id="code">Code</kai-skill>
-  <kai-skill id="memory">Memory</kai-skill>
-</kai-skills>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-</script>`;
-
-/**
- * Declare each skill badge as a `<kai-skill>` child element — no `skills`
- * property or JS array wiring needed. The tag's text content is the badge
- * label; the optional `id` attribute is the stable identifier (falls back to
- * the label when absent). Children are light-DOM data carriers hidden by the
- * Shadow DOM — pure data, no visible output of their own.
- * Mix with the `skills` prop: prop items render first, declarative children after.
- */
-export const DeclarativeSkills: Story = {
-  name: 'Declarative Skills (kai-skill)',
-  render: () => (
-    <kai-skills style={{ display: 'block', padding: '16px' }}>
-      <kai-skill id="web-search">Web Search</kai-skill>
-      <kai-skill id="code">Code</kai-skill>
-      <kai-skill id="memory">Memory</kai-skill>
-    </kai-skills>
-  ),
-  parameters: {
-    docs: {
-      source: { code: DECLARATIVE_HTML_SNIPPET, language: 'html' },
-    },
-  },
-};

package/src/elements/message.stories.tsx

@@ -1,218 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { onMount } from 'solid-js';
-import './register'; // side effect: registers the custom elements
-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-message': JSX.HTMLAttributes<HTMLElement>;
-      'kai-action': JSX.HTMLAttributes<HTMLElement> & { icon?: string; tooltip?: string };
-    }
-  }
-}
-
-const assistantMessage: ChatMessage = {
-  id: 'm-a',
-  role: 'assistant',
-  content:
-    "Here's the plan, with a quick code sample:\n\n```js\nconst kit = useChat();\n```\n\nThat wires the kit into your component.",
-  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: [
-    {
-      id: '1',
-      type: 'file',
-      filename: 'architecture.png',
-      mediaType: 'image/png',
-      url:
-        'data:image/svg+xml;utf8,' +
-        encodeURIComponent(
-          '<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><rect width="96" height="96" rx="12" fill="#7c3aed"/><text x="48" y="60" font-size="42" text-anchor="middle" fill="white">◆</text></svg>',
-        ),
-    },
-  ],
-  actions: ['copy', 'like', 'dislike', 'regenerate'],
-};
-
-const userMessage: ChatMessage = {
-  id: 'm-u',
-  role: 'user',
-  content: 'How do I compose these myself?',
-};
-
-const AVATAR_SVG =
-  'data:image/svg+xml;utf8,' +
-  encodeURIComponent(
-    '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect width="64" height="64" fill="#10b981"/><text x="32" y="42" font-size="28" text-anchor="middle" fill="white">K</text></svg>',
-  );
-
-/** An assistant message with an avatar (from `message.avatar`) plus custom + built-in actions. */
-const avatarMessage: ChatMessage = {
-  id: 'm-av',
-  role: 'assistant',
-  content: 'I have an avatar, a custom **Share** action, and the built-in copy/like actions.',
-  avatar: { src: AVATAR_SVG, alt: 'Kitn', fallback: 'K' },
-  actions: ['copy', 'like', { id: 'share', label: 'Share', icon: 'share' }],
-};
-
-/** Render the actual `<kai-message>` custom element with a `message` property and optional attrs. */
-function MessageElement(props: { message: ChatMessage; actionsReveal?: 'always' | 'hover' }) {
-  let el: (HTMLElement & { message?: ChatMessage }) | undefined;
-  onMount(() => {
-    if (!el) return;
-    if (props.actionsReveal) el.setAttribute('actions-reveal', props.actionsReveal);
-    el.message = props.message;
-    el.addEventListener('kai-message-action', (e) =>
-      console.log('kai-message-action', (e as CustomEvent).detail.action),
-    );
-  });
-  return (
-    <kai-message ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px', 'max-width': '720px' }} />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-message id="msg" style="display:block;"></kai-message>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const msg = document.getElementById('msg');
-  msg.message = {
-    id: 'm-a', role: 'assistant',
-    content: "Here's the plan:\\n\\n\\\`\\\`\\\`js\\nconst kit = useChat();\\n\\\`\\\`\\\`",
-    reasoning: { text: 'The user wants X, so I should do Y.' },
-    tools: [{ type: 'search', state: 'output-available', output: { hits: 3 } }],
-    actions: ['copy', 'like', 'dislike', 'regenerate'],
-  };
-
-  // events are CustomEvents on the element (they do not bubble)
-  msg.addEventListener('kai-message-action', (e) => console.log(e.detail.action, e.detail.messageId));
-</script>`;
-
-const meta = {
-  title: 'Components/Message',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-message'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-message', [
-          '`<kai-message>` is the framework-agnostic **web component** for a single message row — markdown/plain content, an optional reasoning block, tool calls, attachments, and action buttons — all rendered from one `message` object (the same shape `<kai-chat>` uses per message). It is the keystone of the "compose your own message list" pattern, isolated in **Shadow DOM**.',
-          "**When to use:** building a custom message thread in a non-Solid app, or anywhere you want to lay out the list yourself but keep the kit's rich message rendering. In SolidJS, compose the `Message` primitives for finer control.",
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the whole row via the `message` **property** (`el.message = {...}`), and listen for the `kai-message-action` **CustomEvent** for action-button clicks. For simple cases, set `role` + `content` attributes instead of a full object.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** A rich assistant message: markdown, reasoning, a tool call, an attachment, and actions. */
-export const Assistant: Story = {
-  render: () => <MessageElement message={assistantMessage} />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** A plain user message (markdown defaults off for the user role). */
-export const User: Story = {
-  render: () => <MessageElement message={userMessage} />,
-};
-
-/** An avatar (from `message.avatar`) laid out beside the content column, with a
- *  custom **Share** action (curated `icon`) alongside the built-in copy/like. */
-export const WithAvatarAndCustomAction: Story = {
-  name: 'Avatar + Custom Action',
-  render: () => <MessageElement message={avatarMessage} />,
-  parameters: {
-    docs: {
-      source: {
-        code: `<kai-message id="msg" style="display:block;"></kai-message>
-<script type="module">
-  import '@kitn.ai/ui/elements';
-  const msg = document.getElementById('msg');
-  msg.message = {
-    id: 'm-av', role: 'assistant', content: 'I have an avatar and a custom Share action.',
-    avatar: { src: '/k.png', alt: 'Kitn', fallback: 'K' },
-    // built-in names AND custom { id, label, icon } descriptors:
-    actions: ['copy', 'like', { id: 'share', label: 'Share', icon: 'share' }],
-  };
-  msg.addEventListener('kai-message-action', (e) => console.log(e.detail.action)); // 'copy' | 'like' | 'share'
-</script>`,
-        language: 'html',
-      },
-    },
-  },
-};
-
-/** Declarative actions — `<kai-action>` light-DOM children instead of a
- *  `message.actions` array. Each carries `id`, a curated `icon`, an optional
- *  `tooltip`, and optional text (the accessible label). Great for plain HTML. */
-export const DeclarativeActions: Story = {
-  name: 'Declarative Actions (kai-action)',
-  render: () => {
-    let el: HTMLElement | undefined;
-    onMount(() => {
-      if (!el) return;
-      el.setAttribute('avatar-fallback', 'AI');
-      el.setAttribute(
-        'content',
-        'Declare each button as a `<kai-action>` child — no `message` object or JS wiring needed.',
-      );
-      el.addEventListener('kai-message-action', (e) =>
-        console.log('kai-message-action', (e as CustomEvent).detail.action),
-      );
-    });
-    return (
-      <kai-message
-        ref={(e) => (el = e as HTMLElement)}
-        style={{ display: 'block', padding: '16px', 'max-width': '720px' }}
-      >
-        <kai-action id="copy" icon="copy" tooltip="Copy"></kai-action>
-        <kai-action id="regenerate" icon="regenerate" tooltip="Regenerate"></kai-action>
-        <kai-action id="share" icon="share" tooltip="Share">Share</kai-action>
-        <kai-action id="bookmark" icon="bookmark" tooltip="Bookmark">Bookmark</kai-action>
-      </kai-message>
-    );
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<kai-message role="assistant" avatar-fallback="AI" content="..." style="display:block;">
-  <kai-action id="copy" icon="copy" tooltip="Copy"></kai-action>
-  <kai-action id="regenerate" icon="regenerate" tooltip="Regenerate"></kai-action>
-  <kai-action id="share" icon="share" tooltip="Share">Share</kai-action>
-  <kai-action id="bookmark" icon="bookmark" tooltip="Bookmark">Bookmark</kai-action>
-</kai-message>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';
-  document.querySelector('kai-message')
-    .addEventListener('kai-message-action', (e) => console.log(e.detail.action)); // 'copy' | 'share' | …
-</script>`,
-        language: 'html',
-      },
-    },
-  },
-};
-
-/** `actions-reveal="hover"` — the action bar is hidden until you hover the row. */
-export const ActionsRevealOnHover: Story = {
-  name: 'Actions Reveal on Hover',
-  render: () => <MessageElement message={avatarMessage} actionsReveal="hover" />,
-  parameters: {
-    docs: {
-      source: {
-        code: `<!-- actions-reveal: 'always' (default) | 'hover' -->
-<kai-message actions-reveal="hover" id="msg" style="display:block;"></kai-message>`,
-        language: 'html',
-      },
-    },
-  },
-};

package/src/elements/model-switcher.declarative.test.tsx

@@ -1,130 +0,0 @@
-/**
- * Unit tests for the declarative `<kai-model>` light-DOM API of
- * `<kai-model-switcher>`.
- *
- * 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 `parseKaiModelElement` helper in isolation — it has no
- *      DOM dependencies beyond `Element`, which jsdom provides perfectly.
- *   2. Test that the merged list of prop + slotted models combines correctly,
- *      mirroring the pattern used in `prompt-suggestions.declarative.test.tsx`.
- */
-import { describe, it, expect } from 'vitest';
-import { parseKaiModelElement } from './model-switcher';
-import type { ModelOption } from '../types';
-
-// ---------------------------------------------------------------------------
-// parseKaiModelElement — pure helper
-// ---------------------------------------------------------------------------
-
-describe('parseKaiModelElement', () => {
-  function makeNode(textContent: string, id?: string, provider?: string): Element {
-    const el = document.createElement('kai-model');
-    el.textContent = textContent;
-    if (id !== undefined) el.setAttribute('id', id);
-    if (provider !== undefined) el.setAttribute('provider', provider);
-    return el;
-  }
-
-  it('maps textContent to name', () => {
-    const item = parseKaiModelElement(makeNode('GPT-4o', 'gpt-4o'));
-    expect(item.name).toBe('GPT-4o');
-  });
-
-  it('maps the id attribute to id', () => {
-    const item = parseKaiModelElement(makeNode('GPT-4o', 'gpt-4o'));
-    expect(item.id).toBe('gpt-4o');
-  });
-
-  it('maps the provider attribute to provider', () => {
-    const item = parseKaiModelElement(makeNode('GPT-4o', 'gpt-4o', 'OpenAI'));
-    expect(item.provider).toBe('OpenAI');
-  });
-
-  it('sets provider to undefined when the attribute is absent', () => {
-    const item = parseKaiModelElement(makeNode('Claude Sonnet', 'sonnet'));
-    expect(item.provider).toBeUndefined();
-  });
-
-  it('trims leading/trailing whitespace from textContent (name)', () => {
-    const item = parseKaiModelElement(makeNode('  Claude Sonnet  ', 'sonnet'));
-    expect(item.name).toBe('Claude Sonnet');
-  });
-
-  it('returns empty string for id when id attribute is absent', () => {
-    const item = parseKaiModelElement(makeNode('GPT-4o'));
-    expect(item.id).toBe('');
-  });
-
-  it('produces the full ModelOption shape', () => {
-    const item = parseKaiModelElement(makeNode('GPT-4o', 'gpt-4o', 'OpenAI'));
-    expect(item).toEqual<ModelOption>({ id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI', description: undefined, group: undefined });
-  });
-
-  it('maps the description and group attributes', () => {
-    const el = document.createElement('kai-model');
-    el.textContent = 'GPT-4o';
-    el.setAttribute('id', 'gpt-4o');
-    el.setAttribute('description', 'Flagship model');
-    el.setAttribute('group', 'Legacy models');
-    const item = parseKaiModelElement(el);
-    expect(item.description).toBe('Flagship model');
-    expect(item.group).toBe('Legacy models');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Merge logic: prop models + slotted models combine correctly
-// ---------------------------------------------------------------------------
-
-describe('prop + declarative merge', () => {
-  function makeNode(textContent: string, id: string, provider?: string): Element {
-    const el = document.createElement('kai-model');
-    el.textContent = textContent;
-    el.setAttribute('id', id);
-    if (provider !== undefined) el.setAttribute('provider', provider);
-    return el;
-  }
-
-  it('renders prop items before declarative (slotted) items', () => {
-    const propModels: ModelOption[] = [{ id: 'opus', name: 'Claude Opus', provider: 'Anthropic' }];
-    const slottedModels = [makeNode('GPT-4o', 'gpt-4o', 'OpenAI')].map(parseKaiModelElement);
-    const merged = [...propModels, ...slottedModels];
-    expect(merged).toHaveLength(2);
-    expect(merged[0].id).toBe('opus');
-    expect(merged[1].id).toBe('gpt-4o');
-  });
-
-  it('works with only declarative children (empty prop array)', () => {
-    const slottedModels = [
-      makeNode('GPT-4o', 'gpt-4o', 'OpenAI'),
-      makeNode('GPT-4o mini', 'gpt-4o-mini', 'OpenAI'),
-    ].map(parseKaiModelElement);
-    const merged = [...[], ...slottedModels];
-    expect(merged).toHaveLength(2);
-    expect(merged[0]).toMatchObject({ id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' });
-    expect(merged[1]).toMatchObject({ id: 'gpt-4o-mini', name: 'GPT-4o mini', provider: 'OpenAI' });
-  });
-
-  it('works with only prop models (no declarative children)', () => {
-    const propModels: ModelOption[] = [
-      { id: 'sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
-      { id: 'haiku', name: 'Claude Haiku', provider: 'Anthropic' },
-    ];
-    const merged = [...propModels, ...([] as ModelOption[])];
-    expect(merged).toHaveLength(2);
-    expect(merged[0].id).toBe('sonnet');
-    expect(merged[1].id).toBe('haiku');
-  });
-
-  it('parseKaiModelElement produces items with the correct event payload key (id → modelId)', () => {
-    // Confirm the parsed `id` field is what gets dispatched as `modelId` in kai-model-change.
-    // The element fires: dispatch('kai-model-change', { modelId }) where modelId = item.id.
-    const node = makeNode('GPT-4o', 'gpt-4o', 'OpenAI');
-    const parsed = parseKaiModelElement(node);
-    // The model-switcher component passes item.id as the modelId in the event.
-    expect(parsed.id).toBe('gpt-4o'); // this becomes e.detail.modelId
-  });
-});