@kitn.ai/ui 0.14.1

package/src/components/resizable.test.tsx

@@ -0,0 +1,226 @@
+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/response-stream.tsx

@@ -0,0 +1,103 @@
+import { splitProps, Show, For, createEffect, on } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useTextStream } from '../primitives/use-text-stream';
+
+export type Mode = 'typewriter' | 'fade';
+
+export interface ResponseStreamProps {
+  textStream: string | AsyncIterable<string>;
+  mode?: Mode;
+  speed?: number;
+  class?: string;
+  onComplete?: () => void;
+  as?: string;
+  fadeDuration?: number;
+  segmentDelay?: number;
+  characterChunkSize?: number;
+}
+
+function ResponseStream(props: ResponseStreamProps) {
+  const [local] = splitProps(props, [
+    'textStream', 'mode', 'speed', 'class', 'onComplete',
+    'as', 'fadeDuration', 'segmentDelay', 'characterChunkSize',
+  ]);
+
+  const mode = () => local.mode ?? 'typewriter';
+  const speed = () => local.speed ?? 20;
+
+  const stream = useTextStream({
+    mode: mode(),
+    speed: speed(),
+    characterChunkSize: local.characterChunkSize,
+    fadeDuration: local.fadeDuration,
+  });
+
+  createEffect(on(
+    () => local.textStream,
+    (source) => {
+      if (source) stream.startStreaming(source);
+    }
+  ));
+
+  createEffect(on(
+    () => stream.isComplete(),
+    (complete) => {
+      if (complete) local.onComplete?.();
+    }
+  ));
+
+  const fadeStyle = () => {
+    const dur = local.fadeDuration ?? Math.round(1000 / Math.sqrt(Math.min(100, Math.max(1, speed()))));
+    return `
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      .fade-segment {
+        display: inline-block;
+        opacity: 0;
+        animation: fadeIn ${dur}ms ease-out forwards;
+      }
+      .fade-segment-space {
+        white-space: pre;
+      }
+    `;
+  };
+
+  const segDelay = () => {
+    if (typeof local.segmentDelay === 'number') return Math.max(0, local.segmentDelay);
+    const normalizedSpeed = Math.min(100, Math.max(1, speed()));
+    return Math.max(1, Math.round(100 / Math.sqrt(normalizedSpeed)));
+  };
+
+  return (
+    <div class={local.class}>
+      <Show
+        when={mode() === 'fade'}
+        fallback={<>{stream.displayedText()}</>}
+      >
+        <style>{fadeStyle()}</style>
+        <div class="relative">
+          <For each={stream.segments()}>
+            {(segment, idx) => {
+              const isWhitespace = () => /^\s+$/.test(segment.text);
+              return (
+                <span
+                  class={cn(
+                    'fade-segment',
+                    isWhitespace() && 'fade-segment-space'
+                  )}
+                  style={{ 'animation-delay': `${idx() * segDelay()}ms` }}
+                >
+                  {segment.text}
+                </span>
+              );
+            }}
+          </For>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+export { ResponseStream };

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

@@ -0,0 +1,100 @@
+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/scroll-button.tsx

@@ -0,0 +1,34 @@
+import { cn } from '../utils/cn';
+import { Button } from '../ui/button';
+import { useChatContainer } from './chat-container';
+import { ChevronDown } from 'lucide-solid';
+
+export interface ScrollButtonProps {
+  class?: string;
+  variant?: 'outline' | 'ghost' | 'default';
+  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+}
+
+function ScrollButton(props: ScrollButtonProps) {
+  const { isAtBottom, scrollToBottom } = useChatContainer();
+
+  return (
+    <Button
+      variant={props.variant ?? 'outline'}
+      size={props.size ?? 'sm'}
+      aria-label="Scroll to bottom"
+      class={cn(
+        'h-10 w-10 rounded-full transition-all duration-150 ease-out',
+        !isAtBottom()
+          ? 'translate-y-0 scale-100 opacity-100'
+          : 'pointer-events-none translate-y-4 scale-95 opacity-0',
+        props.class
+      )}
+      onClick={() => scrollToBottom()}
+    >
+      <ChevronDown class="h-5 w-5" />
+    </Button>
+  );
+}
+
+export { ScrollButton };

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

@@ -0,0 +1,163 @@
+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)}
+/>`),
+};