@kitn.ai/ui 0.15.0 → 0.16.0

package/src/components/resizable.test.tsx

@@ -1,226 +0,0 @@
-import { describe, it, expect, afterEach, beforeAll } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup } from '@solidjs/testing-library';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '../ui/resizable';
-
-// NOTE on file location: the task brief names `src/components/resizable.tsx`, but
-// in this tree the resizable UI primitives live in `src/ui/resizable.tsx` and the
-// custom element in `src/elements/resizable.tsx`. This test (kept at the requested
-// `src/components/` path) exercises both the UI primitive (`ResizableHandle`
-// dblclick-reset + default-size reflection) and the element (`<kai-resizable>`
-// size-preservation across content-only re-renders).
-
-// jsdom doesn't implement layout: getBoundingClientRect returns all-zeros, so the
-// pixel-driven DRAG math (pointer move → flex-basis) and the live-percent settle
-// are NOT meaningfully testable here. We test the *state logic* that is layout-
-// independent: (a) the panel reflects its default size to a data-* attribute, and
-// (b) dblclick on a handle restores adjacent panels' flex-basis from those
-// defaults, even after their inline basis has been mutated (simulating a drag).
-// The element test asserts that a content-only mutation does NOT clobber a panel's
-// dragged inline flex-basis.
-
-afterEach(cleanup);
-
-describe('ResizablePanel default-size reflection', () => {
-  it('reflects defaultSize to data-default-size-pct (percent) so a handle can reset to it', () => {
-    const { container } = render(() => (
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel defaultSize={30}>a</ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel>b</ResizablePanel>
-      </ResizablePanelGroup>
-    ));
-    const panels = container.querySelectorAll('[style*="flex-basis"]');
-    const first = panels[0] as HTMLElement;
-    expect(first.dataset.defaultSizePct).toBe('30');
-  });
-
-  it('reflects a px defaultSize to data-default-size (pixels)', () => {
-    const { container } = render(() => (
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel defaultSize="280px">a</ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel>b</ResizablePanel>
-      </ResizablePanelGroup>
-    ));
-    const first = container.querySelector('[data-default-size]') as HTMLElement;
-    expect(first?.dataset.defaultSize).toBe('280');
-  });
-});
-
-describe('ResizableHandle dblclick resets adjacent panels to defaults', () => {
-  it('restores both adjacent panels flex-basis from their default sizes on dblclick', () => {
-    const { container } = render(() => (
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel defaultSize={30}>a</ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize={70}>b</ResizablePanel>
-      </ResizablePanelGroup>
-    ));
-    const handle = container.querySelector('[role="separator"]') as HTMLElement;
-    const prev = handle.previousElementSibling as HTMLElement;
-    const next = handle.nextElementSibling as HTMLElement;
-
-    // Simulate the result of a drag: panels carry pixel flex-basis inline.
-    prev.style.flexBasis = '120px';
-    next.style.flexBasis = '480px';
-
-    handle.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
-
-    expect(prev.style.flexBasis).toBe('30%');
-    expect(next.style.flexBasis).toBe('70%');
-  });
-
-  it('resets a panel that has no explicit default back to flexible (clears inline basis)', () => {
-    const { container } = render(() => (
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel defaultSize={30}>a</ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel>b</ResizablePanel>
-      </ResizablePanelGroup>
-    ));
-    const handle = container.querySelector('[role="separator"]') as HTMLElement;
-    const prev = handle.previousElementSibling as HTMLElement;
-    const next = handle.nextElementSibling as HTMLElement;
-
-    prev.style.flexBasis = '120px';
-    next.style.flexBasis = '480px';
-    next.style.flexGrow = '0';
-    next.style.flexShrink = '0';
-
-    handle.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
-
-    expect(prev.style.flexBasis).toBe('30%');
-    // The flexible panel (no default) returns to growing: basis cleared, grow:1.
-    expect(next.style.flexBasis).toBe('');
-    expect(next.style.flexGrow).toBe('1');
-  });
-
-  it('does nothing on a static (locked) handle', () => {
-    const { container } = render(() => (
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel defaultSize={30}>a</ResizablePanel>
-        <ResizableHandle static />
-        <ResizablePanel defaultSize={70}>b</ResizablePanel>
-      </ResizablePanelGroup>
-    ));
-    const handle = container.querySelector('[role="separator"]') as HTMLElement;
-    const prev = handle.previousElementSibling as HTMLElement;
-    prev.style.flexBasis = '120px';
-
-    handle.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
-
-    expect(prev.style.flexBasis).toBe('120px');
-  });
-});
-
-describe('<kai-resizable> size preservation across content-only re-renders', () => {
-  beforeAll(async () => {
-    // Importing registers the custom element. jsdom supports customElements.
-    await import('../elements/resizable');
-  });
-
-  function mount(html: string): HTMLElement {
-    const host = document.createElement('div');
-    host.innerHTML = html;
-    document.body.appendChild(host);
-    return host;
-  }
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('does not clobber a dragged panel flex-basis when an item child re-renders content', async () => {
-    const host = mount(`
-      <kai-resizable orientation="horizontal" style="height:300px;width:600px">
-        <kai-resizable-item size="30%"><p id="content">hi</p></kai-resizable-item>
-        <kai-resizable-item><p>right</p></kai-resizable-item>
-      </kai-resizable>
-    `);
-    const el = host.querySelector('kai-resizable') as HTMLElement & { shadowRoot: ShadowRoot };
-    // Let solid-element upgrade + onMount run.
-    await Promise.resolve();
-    await new Promise((r) => setTimeout(r, 0));
-
-    const panel = el.shadowRoot.querySelector('[data-panel]') as HTMLElement;
-    expect(panel).toBeTruthy();
-
-    // Simulate a settled drag: the handle writes inline flex-basis on the panel.
-    panel.style.flexBasis = '55%';
-
-    // Now mutate ONLY the slotted content of an existing item (no add/remove).
-    const content = host.querySelector('#content') as HTMLElement;
-    content.textContent = 'a new chat message arrived';
-
-    // Allow the MutationObserver microtask + any re-render to flush.
-    await Promise.resolve();
-    await new Promise((r) => setTimeout(r, 0));
-
-    const panelAfter = el.shadowRoot.querySelector('[data-panel]') as HTMLElement;
-    // The dragged basis must survive (the bug reset it to "30%").
-    expect(panelAfter.style.flexBasis).toBe('55%');
-  });
-
-  it('reflects each item default size onto its panel for handle dblclick-reset', async () => {
-    const host = mount(`
-      <kai-resizable orientation="horizontal" style="height:300px;width:600px">
-        <kai-resizable-item size="30%"><p>a</p></kai-resizable-item>
-        <kai-resizable-item><p>b</p></kai-resizable-item>
-      </kai-resizable>
-    `);
-    const el = host.querySelector('kai-resizable') as HTMLElement & { shadowRoot: ShadowRoot };
-    await Promise.resolve();
-    await new Promise((r) => setTimeout(r, 0));
-
-    const panels = el.shadowRoot.querySelectorAll('[data-panel]');
-    expect((panels[0] as HTMLElement).dataset.defaultSizePct).toBe('30');
-    // Second panel has no explicit default → no reflected default size.
-    expect((panels[1] as HTMLElement).dataset.defaultSizePct).toBeUndefined();
-  });
-
-  it('keeps the ORIGINAL default for dblclick-reset even after sizes are persisted', async () => {
-    const host = mount(`
-      <kai-resizable orientation="horizontal" style="height:300px;width:600px">
-        <kai-resizable-item size="30%"><p>a</p></kai-resizable-item>
-        <kai-resizable-item size="70%"><p>b</p></kai-resizable-item>
-      </kai-resizable>
-    `);
-    const el = host.querySelector('kai-resizable') as HTMLElement & { shadowRoot: ShadowRoot };
-    await Promise.resolve();
-    await new Promise((r) => setTimeout(r, 0));
-
-    // Simulate persistence overwriting the live `size` attribute after a drag.
-    const item = host.querySelector('kai-resizable-item') as HTMLElement;
-    item.setAttribute('size', '55%');
-    await Promise.resolve();
-    await new Promise((r) => setTimeout(r, 0));
-
-    const panel = el.shadowRoot.querySelector('[data-panel]') as HTMLElement;
-    // The reflected DEFAULT (for dblclick-reset) stays the original 30, not 55.
-    expect(panel.dataset.defaultSizePct).toBe('30');
-  });
-
-  it('still re-initializes when an item is actually added', async () => {
-    const host = mount(`
-      <kai-resizable orientation="horizontal" style="height:300px;width:600px">
-        <kai-resizable-item size="30%"><p>a</p></kai-resizable-item>
-        <kai-resizable-item><p>b</p></kai-resizable-item>
-      </kai-resizable>
-    `);
-    const el = host.querySelector('kai-resizable') as HTMLElement & { shadowRoot: ShadowRoot };
-    await Promise.resolve();
-    await new Promise((r) => setTimeout(r, 0));
-
-    expect(el.shadowRoot.querySelectorAll('[data-panel]').length).toBe(2);
-
-    const item = document.createElement('kai-resizable-item');
-    item.innerHTML = '<p>c</p>';
-    el.appendChild(item);
-
-    await Promise.resolve();
-    await new Promise((r) => setTimeout(r, 0));
-
-    expect(el.shadowRoot.querySelectorAll('[data-panel]').length).toBe(3);
-  });
-});

package/src/components/scroll-button.stories.tsx

@@ -1,100 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { For } from 'solid-js';
-import { ScrollButton } from './scroll-button';
-import { ChatContainerRoot, ChatContainerContent } from './chat-container';
-import { componentDescription } from '../stories/docs/element-controls';
-
-/**
- * `ScrollButton` reads scroll state from the surrounding `ChatContainerRoot`
- * context, so every story wraps it in a scrollable container. It is hidden
- * (faded out) while pinned to the bottom and appears once you scroll up.
- */
-function ScrollDemo(props: { variant?: 'outline' | 'ghost' | 'default'; size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm'; class?: string }) {
-  return (
-    <div class="relative h-64 w-80 overflow-hidden rounded-lg border">
-      <ChatContainerRoot class="h-full p-4">
-        <ChatContainerContent class="gap-2">
-          <For each={Array.from({ length: 20 })}>
-            {(_, i) => (
-              <div class="rounded-md bg-muted/40 px-3 py-2 text-sm">Message {i() + 1}</div>
-            )}
-          </For>
-        </ChatContainerContent>
-        {/* ScrollButton must live INSIDE ChatContainerRoot (it reads that
-            context); it's absolutely positioned relative to the outer .relative
-            box, so it stays pinned and doesn't scroll with the content. */}
-        <div class="absolute inset-x-0 bottom-3 flex justify-center">
-          <ScrollButton variant={props.variant} size={props.size} class={props.class} />
-        </div>
-      </ChatContainerRoot>
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/ScrollButton',
-  component: ScrollButton,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A floating "scroll to bottom" button wired to the enclosing `ChatContainerRoot`. It calls `scrollToBottom()` on click and animates in/out based on `isAtBottom`.',
-        '**When to use:** in a scrollable message log, to let the user jump back to the latest message after scrolling up. It hides itself automatically while pinned to the bottom.',
-        '**How to use:** render it inside a `ChatContainerRoot` (it consumes that context). Position it with absolute layout and optionally restyle via `variant`, `size`, and `class`.',
-        '**Placement:** overlaid near the bottom-center of the chat message area.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'ghost', 'outline'],
-      description: 'Underlying button visual emphasis.',
-      table: { defaultValue: { summary: 'outline' } },
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'icon', 'icon-sm'],
-      description: 'Underlying button size preset.',
-      table: { defaultValue: { summary: 'sm' } },
-    },
-    class: {
-      control: 'text',
-      description: 'Additional classes merged onto the button.',
-    },
-  },
-  args: {
-    variant: 'outline',
-    size: 'sm',
-  },
-  render: (args) => <ScrollDemo variant={args.variant} size={args.size} class={args.class} />,
-} satisfies Meta<typeof ScrollButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { ScrollButton, ChatContainerRoot, ChatContainerContent } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — scroll up to reveal the button; tweak `variant`/`size`. */
-export const Playground: Story = {
-  ...src(`<div class="relative">
-  <ChatContainerRoot class="h-full overflow-y-auto">
-    <ChatContainerContent>{/* messages */}</ChatContainerContent>
-    {/* inside the Root (reads its context); absolutely positioned to stay pinned */}
-    <div class="absolute inset-x-0 bottom-3 flex justify-center">
-      <ScrollButton />
-    </div>
-  </ChatContainerRoot>
-</div>`),
-};
-
-/** Ghost variant overlaid in a chat area (showcase). */
-export const Ghost: Story = {
-  args: { variant: 'ghost' },
-  ...src(`<ScrollButton variant="ghost" />`),
-};

package/src/components/slash-command.stories.tsx

@@ -1,163 +0,0 @@
-import type { Meta, StoryObj } from "storybook-solidjs-vite";
-import { fn } from "storybook/test";
-import { createSignal } from "solid-js";
-import { SlashCommand, type SlashCommandItem } from "./slash-command";
-import { PromptInput, PromptInputTextarea } from "./prompt-input";
-import { ChatConfig } from "../primitives/chat-config";
-import { componentDescription } from '../stories/docs/element-controls';
-
-const skillCommands: SlashCommandItem[] = [
-  { id: "caveman", label: "Caveman", description: "Ultra-compressed terse responses", category: "Skills" },
-  { id: "detailed", label: "Detailed", description: "Thorough, comprehensive responses", category: "Skills" },
-  { id: "eli5", label: "ELI5", description: "Explain simply, avoid jargon", category: "Skills" },
-  { id: "socratic", label: "Socratic", description: "Ask guiding questions", category: "Skills" },
-  { id: "concise", label: "Concise", description: "Short, direct answers", category: "Skills" },
-];
-
-const mixedCommands: SlashCommandItem[] = [
-  ...skillCommands,
-  { id: "clear", label: "Clear", description: "Clear conversation history", category: "Actions" },
-  { id: "export", label: "Export", description: "Export conversation as markdown", category: "Actions" },
-];
-
-/**
- * `SlashCommand` reads the input value from the enclosing `PromptInput`
- * context, so every story mounts it inside a `PromptInput`. The popup opens
- * when the input starts with `/`.
- */
-function SlashDemo(props: { commands: SlashCommandItem[]; activeIds?: string[]; compact?: boolean; onSelect: (cmd: SlashCommandItem) => void }) {
-  const [value, setValue] = createSignal("/");
-  return (
-    <ChatConfig proseSize="sm">
-      <div style={{ width: "420px" }} class="bg-card rounded-lg p-4">
-        <div class="relative">
-          <PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue("")}>
-            <PromptInputTextarea placeholder="Type / for commands..." class="min-h-[36px] pt-2 pl-3" />
-            <SlashCommand
-              commands={props.commands}
-              activeIds={props.activeIds}
-              compact={props.compact}
-              onSelect={(cmd) => {
-                props.onSelect(cmd);
-                setValue("");
-              }}
-            />
-          </PromptInput>
-        </div>
-        <p class="text-xs text-muted-foreground mt-2 text-center">
-          Type <code class="bg-muted px-1 rounded">/</code> to see commands. Arrow keys + Tab/Enter to select.
-        </p>
-      </div>
-    </ChatConfig>
-  );
-}
-
-const meta = {
-  title: "Solid (Advanced)/Elements/SlashCommand",
-  component: SlashCommand,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: componentDescription([
-        "A keyboard-navigable command palette that pops above a `PromptInput` when the user types `/`. Filters and groups commands by category, with arrow-key navigation and Tab/Enter to select.",
-        "**When to use:** to offer slash commands or toggleable skills/modes directly from the prompt input as the user types `/name`.",
-        "**How to use:** render it as a child of `PromptInput` (it consumes that context). Pass `commands`, handle `onSelect`, and optionally pass `activeIds` to mark active toggles. Set `compact={false}` for two-line rows.",
-        "**Placement:** inside the relative-positioned `PromptInput`, absolutely anchored to the top of the textarea.",
-      ]),
-      controls: { exclude: ["use:eventListener"] },
-    },
-  },
-  argTypes: {
-    commands: {
-      control: "object",
-      description: "List of selectable commands ({ id, label, description?, category? }).",
-    },
-    activeIds: {
-      control: "object",
-      description: "IDs currently marked active — selecting an active command toggles it off.",
-    },
-    compact: {
-      control: "boolean",
-      description: "Single-line rows (label + description side by side). When false, two-line rows.",
-      table: { defaultValue: { summary: "true" } },
-    },
-    onSelect: {
-      action: "select",
-      description: "Fired with the chosen command when an item is selected.",
-      table: { category: "Events" },
-    },
-    class: { control: "text", description: "Additional classes on the popup container." },
-  },
-  args: {
-    commands: skillCommands,
-    compact: true,
-    activeIds: [],
-    onSelect: fn(),
-  },
-  render: (args) => (
-    <SlashDemo commands={args.commands} activeIds={args.activeIds} compact={args.compact} onSelect={args.onSelect} />
-  ),
-} satisfies Meta<typeof SlashCommand>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { SlashCommand, PromptInput, PromptInputTextarea } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — type `/` in the input; tweak `commands`/`compact`/`activeIds`. */
-export const Playground: Story = {
-  ...src(`<PromptInput value={value()} onValueChange={setValue} onSubmit={() => setValue('')}>
-  <PromptInputTextarea placeholder="Type / for commands..." />
-  <SlashCommand commands={commands} onSelect={(cmd) => { /* apply */ }} />
-</PromptInput>`),
-};
-
-/** Compact single-line rows (default). */
-export const Compact: Story = {
-  args: { compact: true },
-  ...src(`<SlashCommand commands={commands} onSelect={handleSelect} />`),
-};
-
-/** Two-line rows with label above description. */
-export const Expanded: Story = {
-  args: { compact: false },
-  ...src(`<SlashCommand commands={commands} compact={false} onSelect={handleSelect} />`),
-};
-
-/** Commands grouped by category (Skills + Actions). */
-export const WithCategories: Story = {
-  args: { commands: mixedCommands },
-  ...src(`const commands = [
-  { id: 'eli5', label: 'ELI5', description: 'Explain simply', category: 'Skills' },
-  { id: 'clear', label: 'Clear', description: 'Clear conversation', category: 'Actions' },
-];
-
-<SlashCommand commands={commands} onSelect={handleSelect} />`),
-};
-
-/** Toggleable skills — active IDs are marked and toggle off when reselected (showcase). */
-export const ActiveToggles: Story = {
-  render: () => {
-    const [selected, setSelected] = createSignal<string[]>(["eli5"]);
-    return (
-      <SlashDemo
-        commands={skillCommands}
-        activeIds={selected()}
-        onSelect={(cmd) =>
-          setSelected((prev) =>
-            prev.includes(cmd.id) ? prev.filter((id) => id !== cmd.id) : [...prev, cmd.id],
-          )
-        }
-      />
-    );
-  },
-  ...src(`<SlashCommand
-  commands={skillCommands}
-  activeIds={selected()}
-  onSelect={(cmd) => toggle(cmd.id)}
-/>`),
-};

package/src/components/source-list.test.tsx

@@ -1,152 +0,0 @@
-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 { Source, SourceTrigger, SourceContent, SourceList } from './source';
-import { parseKaiSourceElement } from '../elements/source';
-
-afterEach(cleanup);
-
-// ---------------------------------------------------------------------------
-// parseKaiSourceElement — unit-tests for the attribute→SourceItem mapping
-// ---------------------------------------------------------------------------
-
-describe('parseKaiSourceElement', () => {
-  function makeEl(attrs: Record<string, string | null>): Element {
-    const el = document.createElement('kai-source');
-    for (const [k, v] of Object.entries(attrs)) {
-      if (v !== null) el.setAttribute(k, v);
-    }
-    return el;
-  }
-
-  it('maps href, label, headline→title, description', () => {
-    const el = makeEl({
-      href: 'https://kitn.dev',
-      label: 'kitn',
-      headline: 'kitn — the kit',
-      description: 'Composable SolidJS chat UI.',
-    });
-    expect(parseKaiSourceElement(el)).toEqual({
-      href: 'https://kitn.dev',
-      label: 'kitn',
-      title: 'kitn — the kit',
-      description: 'Composable SolidJS chat UI.',
-      showFavicon: false,
-    });
-  });
-
-  it('sets showFavicon=true for a bare show-favicon attribute', () => {
-    const el = makeEl({ href: 'https://kitn.dev', 'show-favicon': '' });
-    expect(parseKaiSourceElement(el).showFavicon).toBe(true);
-  });
-
-  it('sets showFavicon=false when show-favicon="false"', () => {
-    const el = makeEl({ href: 'https://kitn.dev', 'show-favicon': 'false' });
-    expect(parseKaiSourceElement(el).showFavicon).toBe(false);
-  });
-
-  it('returns undefined for optional attrs when absent', () => {
-    const el = makeEl({ href: 'https://kitn.dev' });
-    const item = parseKaiSourceElement(el);
-    expect(item.label).toBeUndefined();
-    expect(item.title).toBeUndefined();
-    expect(item.description).toBeUndefined();
-  });
-
-  it('falls back to empty string for missing href', () => {
-    const el = makeEl({});
-    expect(parseKaiSourceElement(el).href).toBe('');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// SourceList component — verify citations render as anchor links
-// ---------------------------------------------------------------------------
-
-describe('SourceList with Source children', () => {
-  it('renders citation links for each source', () => {
-    const sources = [
-      { href: 'https://kitn.dev', title: 'kitn', description: 'Composable chat UI.' },
-      { href: 'https://solidjs.com', title: 'SolidJS', description: 'A reactive UI library.' },
-    ];
-
-    const { container } = render(() => (
-      <SourceList>
-        {sources.map((s) => (
-          <Source href={s.href}>
-            <SourceTrigger />
-            <SourceContent title={s.title} description={s.description} />
-          </Source>
-        ))}
-      </SourceList>
-    ));
-
-    const links = container.querySelectorAll('a[href]');
-    // SourceTrigger and SourceContent each render an <a>; 2 sources × 2 = 4
-    expect(links.length).toBeGreaterThanOrEqual(2);
-    const hrefs = [...links].map((a) => a.getAttribute('href'));
-    expect(hrefs).toContain('https://kitn.dev');
-    expect(hrefs).toContain('https://solidjs.com');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// numbered prop — kai-sources web component behavior reproduced at Solid level
-// ---------------------------------------------------------------------------
-
-describe('numbered citations', () => {
-  /** Helper: render N sources with explicit numeric labels (mirroring numbered mode). */
-  function renderNumbered(sources: { href: string; label?: string | number }[]) {
-    return render(() => (
-      <SourceList>
-        <For each={sources}>
-          {(s, i) => (
-            <Source href={s.href}>
-              {/* When numbered is active the element replaces label with i()+1. */}
-              <SourceTrigger label={i() + 1} />
-              <SourceContent title="" description="" />
-            </Source>
-          )}
-        </For>
-      </SourceList>
-    ));
-  }
-
-  it('labels N sources 1..N in order', () => {
-    const sources = [
-      { href: 'https://kitn.dev' },
-      { href: 'https://solidjs.com' },
-      { href: 'https://vitejs.dev' },
-    ];
-
-    const { container } = renderNumbered(sources);
-
-    // SourceTrigger renders a <span> with the label inside the trigger <a>.
-    // Grab all trigger anchors — they have target="_blank".
-    const triggerLinks = [...container.querySelectorAll('a[target="_blank"]')];
-    // One trigger per source (SourceContent also renders an <a target="_blank">,
-    // so we narrow to ones whose text content is a number 1–N).
-    const labels = triggerLinks
-      .map((a) => a.querySelector('span')?.textContent?.trim())
-      .filter(Boolean);
-
-    expect(labels).toEqual(['1', '2', '3']);
-  });
-
-  it('label sequence resets from 1 for each independent list', () => {
-    const firstSources = [{ href: 'https://kitn.dev' }, { href: 'https://solidjs.com' }];
-    const secondSources = [{ href: 'https://vitejs.dev' }, { href: 'https://vitest.dev' }];
-
-    const { container: c1 } = renderNumbered(firstSources);
-    const { container: c2 } = renderNumbered(secondSources);
-
-    const getLabels = (c: HTMLElement) =>
-      [...c.querySelectorAll('a[target="_blank"]')]
-        .map((a) => a.querySelector('span')?.textContent?.trim())
-        .filter(Boolean);
-
-    expect(getLabels(c1)).toEqual(['1', '2']);
-    expect(getLabels(c2)).toEqual(['1', '2']);
-  });
-});