@kitn.ai/ui 0.14.1 → 0.15.1

package/src/ui/badge.stories.tsx

@@ -1,86 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { Badge } from './badge';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Badge',
-  component: Badge,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A compact pill **badge** for short status text, counts, or citation markers, rendered as an inline `<span>`.',
-        '**When to use:** to annotate a count (unread, results), tag a status/label, or mark an inline source citation in assistant output.',
-        '**How to use:** choose a `variant` (`default` label, `count` numeric pill, `citation` clickable source marker) and pass the text or number as children.',
-        '**Placement:** inline with message text (citations), next to titles or list items (labels), and on toolbar/icon buttons (counts).',
-      ]),
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'count', 'citation'],
-      description: 'Visual style: neutral label, numeric count pill, or clickable citation marker.',
-      table: { defaultValue: { summary: 'default' } },
-    },
-    children: {
-      control: 'text',
-      description: 'Badge content — short text or a number.',
-    },
-  },
-  args: {
-    variant: 'default',
-    children: 'Default badge',
-  },
-  render: (args) => <Badge {...args} />,
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Badge } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — switch the variant and edit the content. */
-export const Playground: Story = {
-  ...src(`<Badge variant="default">Default badge</Badge>`),
-};
-
-export const Default: Story = {
-  args: { variant: 'default', children: 'Default badge' },
-  ...src(`<Badge variant="default">Default badge</Badge>`),
-};
-
-export const Count: Story = {
-  args: { variant: 'count', children: '12' },
-  ...src(`<Badge variant="count">12</Badge>`),
-};
-
-export const Citation: Story = {
-  args: { variant: 'citation', children: '1' },
-  ...src(`<Badge variant="citation">1</Badge>`),
-};
-
-/** All variants side by side (showcase — not driven by controls). */
-export const AllVariants: Story = {
-  render: () => (
-    <div class="flex items-center gap-3">
-      <Badge variant="default">Default</Badge>
-      <Badge variant="count">5</Badge>
-      <Badge variant="citation">1</Badge>
-      <Badge variant="citation">2</Badge>
-      <Badge variant="citation">3</Badge>
-    </div>
-  ),
-  ...src(`<div class="flex items-center gap-3">
-  <Badge variant="default">Default</Badge>
-  <Badge variant="count">5</Badge>
-  <Badge variant="citation">1</Badge>
-  <Badge variant="citation">2</Badge>
-  <Badge variant="citation">3</Badge>
-</div>`),
-};

package/src/ui/button.stories.tsx

@@ -1,145 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { Button } from './button';
-import { componentDescription } from '../stories/docs/element-controls';
-
-/**
- * Convention exemplar — every component story should follow this shape:
- * `component`, a description, `argTypes` (controls), `args` (defaults incl.
- * `fn()` for events), a `Playground` story rendered from args, plus showcase
- * stories for notable variations.
- */
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Button',
-  component: Button,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A clickable button with style **variants** and **sizes**, built on a native `<button>` (all standard button attributes pass through).',
-        '**When to use:** any user-triggered action — submitting input, toolbar/icon actions, confirming or dismissing. Use `default` for the primary action, `ghost`/`outline` for secondary or low-emphasis actions.',
-        '**How to use:** set `variant` and `size`, pass label or an icon as children, and wire `onClick`. For icon-only buttons use `size="icon"` / `"icon-sm"` and include an `aria-label`.',
-        '**Placement:** prompt action bars, message action rows, dialogs, toolbars, and empty-state CTAs.',
-      ]),
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'ghost', 'outline'],
-      description: 'Visual emphasis of the button.',
-      table: { defaultValue: { summary: 'default' } },
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'icon', 'icon-sm'],
-      description: 'Height/padding preset. `icon` / `icon-sm` are square for icon-only buttons.',
-      table: { defaultValue: { summary: 'md' } },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disables interaction and dims the button.',
-    },
-    children: {
-      control: 'text',
-      description: 'Button content — text or an icon element.',
-    },
-    onClick: {
-      action: 'click',
-      description: 'Fired when the button is clicked.',
-      table: { category: 'Events' },
-    },
-  },
-  args: {
-    variant: 'default',
-    size: 'md',
-    disabled: false,
-    children: 'Click me',
-    onClick: fn(),
-  },
-  render: (args) => <Button {...args} />,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Attach a clean, copy-paste-ready SolidJS snippet to a story. SolidJS stories
- * can't auto-serialize an args-spread render (it shows `{}`), so we provide real
- * usage code (with the import line, so it's truly paste-ready) that the docs
- * "Show code" / "Copy code" buttons surface. `language: 'tsx'` labels it as SolidJS.
- *
- * Note: `Button` is a SolidJS *component* (a scoped import), not a global custom
- * element, so the unprefixed name can't conflict with anything — alias on import
- * if a host already has a `Button`. Only the web components (`<kai-chat>`, …)
- * are prefixed, because those claim global custom-element tag names.
- */
-const IMPORT = `import { Button } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — tweak the controls to explore every combination. */
-export const Playground: Story = {
-  ...src(`<Button variant="default" size="md" onClick={() => {}}>Click me</Button>`),
-};
-
-export const Ghost: Story = {
-  args: { variant: 'ghost', children: 'Ghost' },
-  ...src(`<Button variant="ghost">Ghost</Button>`),
-};
-
-export const Outline: Story = {
-  args: { variant: 'outline', children: 'Outline' },
-  ...src(`<Button variant="outline">Outline</Button>`),
-};
-
-export const Small: Story = {
-  args: { size: 'sm', children: 'Small' },
-  ...src(`<Button size="sm">Small</Button>`),
-};
-
-export const Large: Story = {
-  args: { size: 'lg', children: 'Large' },
-  ...src(`<Button size="lg">Large</Button>`),
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, children: 'Disabled' },
-  ...src(`<Button disabled>Disabled</Button>`),
-};
-
-const PlusIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-    <line x1="12" y1="5" x2="12" y2="19" />
-    <line x1="5" y1="12" x2="19" y2="12" />
-  </svg>
-);
-
-export const Icon: Story = {
-  args: { size: 'icon', children: <PlusIcon />, 'aria-label': 'Add' } as never,
-  ...src(`<Button size="icon" aria-label="Add">\n  <PlusIcon />\n</Button>`),
-};
-
-/** All variants and sizes side by side (showcase — not driven by controls). */
-export const AllVariants: Story = {
-  render: () => (
-    <div class="flex flex-wrap items-center gap-3">
-      <Button variant="default">Default</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="default" size="sm">Small</Button>
-      <Button variant="default" size="lg">Large</Button>
-      <Button variant="default" size="icon" aria-label="Add"><PlusIcon /></Button>
-    </div>
-  ),
-  ...src(`<div class="flex flex-wrap items-center gap-3">
-  <Button variant="default">Default</Button>
-  <Button variant="ghost">Ghost</Button>
-  <Button variant="outline">Outline</Button>
-  <Button size="sm">Small</Button>
-  <Button size="lg">Large</Button>
-  <Button size="icon" aria-label="Add"><PlusIcon /></Button>
-</div>`),
-};

package/src/ui/collapsible.stories.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Collapsible',
-  component: Collapsible,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A two-state disclosure that expands and collapses a region of content, animating height via a CSS `grid-template-rows` `0fr` → `1fr` transition (no JS measurement, no layout thrash). The trigger carries `aria-expanded`/`aria-controls` and the collapsed content is `inert`, so it is removed from tab order and the accessibility tree. Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).',
-        '**When to use:** to hide secondary detail behind a toggle — a reasoning/"chain of thought" panel, a tool-call payload, an expandable conversation group, an FAQ row.',
-        '**How to use:** wrap `CollapsibleTrigger` and `CollapsibleContent` in a `Collapsible`. The trigger renders a `<button>` by default; pass `as` to render a custom element.',
-      ]),
-    },
-  },
-  render: () => <CollapsibleDemo defaultOpen />,
-} satisfies Meta<typeof Collapsible>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-function CollapsibleDemo(props: { defaultOpen?: boolean }) {
-  return (
-    <Collapsible defaultOpen={props.defaultOpen} class="w-80 rounded-lg border border-border">
-      <CollapsibleTrigger class="group flex w-full items-center justify-between px-3 py-2 text-sm font-medium text-foreground">
-        <span>Reasoning</span>
-        <svg
-          class="size-4 text-muted-foreground transition-transform duration-200 group-data-[expanded]:rotate-180"
-          viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-        >
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <p class="px-3 pb-3 text-sm text-muted-foreground">
-          First I parsed the request, then checked the available tools, and finally
-          composed the answer. This panel is removed from the tab order while collapsed.
-        </p>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}
-
-/** Toggle the trigger to expand/collapse. The chevron rotates via the `data-expanded` attribute. */
-export const Playground: Story = {
-  ...src(`<Collapsible defaultOpen>
-  <CollapsibleTrigger>Reasoning</CollapsibleTrigger>
-  <CollapsibleContent>
-    <p>First I parsed the request, then checked the available tools…</p>
-  </CollapsibleContent>
-</Collapsible>`),
-};
-
-/** Starts collapsed. */
-export const InitiallyClosed: Story = {
-  render: () => <CollapsibleDemo />,
-  ...src(`<Collapsible>
-  <CollapsibleTrigger>Reasoning</CollapsibleTrigger>
-  <CollapsibleContent>…</CollapsibleContent>
-</Collapsible>`),
-};

package/src/ui/dropdown.stories.tsx

@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal } from 'solid-js';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from './dropdown';
-import { buttonVariants } from './button';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Dropdown',
-  component: Dropdown,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'An accessible menu that opens from a trigger, built on the kit\'s DIY overlay core (no third-party dependency). Implements the WAI-ARIA menu-button pattern: `aria-haspopup`/`aria-expanded` wiring, roving focus with Arrow/Home/End, type-ahead, Escape/outside-click dismissal, and focus return to the trigger. Portals into the active shadow root and resolves focus through `getRootNode()` so roving focus works inside web components.',
-        '**When to use:** for a list of *actions* or single-choice options triggered by a button — overflow "⋯" menus, model pickers, scope selectors. For hover-only context use `HoverCard`; for a label use `Tooltip`.',
-        '**How to use:** compose `Dropdown` › `DropdownTrigger` (the button) + `DropdownContent` › one `DropdownItem` per action. Give each item an `onSelect` handler — selecting also closes the menu.',
-      ]),
-    },
-  },
-  render: () => <DropdownDemo />,
-} satisfies Meta<typeof Dropdown>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-function DropdownDemo() {
-  const [last, setLast] = createSignal<string>();
-  return (
-    <div class="space-y-3">
-      <Dropdown>
-        <DropdownTrigger class={buttonVariants({ variant: 'outline' })}>Actions ▾</DropdownTrigger>
-        <DropdownContent>
-          <DropdownItem onSelect={() => setLast('Rename')}>Rename</DropdownItem>
-          <DropdownItem onSelect={() => setLast('Duplicate')}>Duplicate</DropdownItem>
-          <DropdownItem onSelect={() => setLast('Archive')}>Archive</DropdownItem>
-        </DropdownContent>
-      </Dropdown>
-      <p class="text-xs text-muted-foreground">Last selected: {last() ?? '—'}</p>
-    </div>
-  );
-}
-
-/** Click the trigger (or focus it and press ↓ / Enter) to open the menu; Arrow keys move, Escape closes. */
-export const Playground: Story = {
-  ...src(`<Dropdown>
-  <DropdownTrigger class={buttonVariants({ variant: 'outline' })}>Actions ▾</DropdownTrigger>
-  <DropdownContent>
-    <DropdownItem onSelect={() => rename()}>Rename</DropdownItem>
-    <DropdownItem onSelect={() => duplicate()}>Duplicate</DropdownItem>
-    <DropdownItem onSelect={() => archive()}>Archive</DropdownItem>
-  </DropdownContent>
-</Dropdown>`),
-};

package/src/ui/hover-card.stories.tsx

@@ -1,77 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { HoverCard } from './hover-card';
-import { Button } from './button';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/HoverCard',
-  component: HoverCard,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A floating card that opens when its trigger is hovered or focused, built on the kit\'s DIY overlay core (positioning + dismiss + presence — no third-party dependency). Portals into the active shadow root so it never clips, and a transparent "safe bridge" keeps it open while the pointer travels from trigger to card.',
-        '**When to use:** to reveal supplementary, non-essential context on hover — a user/profile preview, a link or citation preview, an attachment summary. For an actionable menu use `Dropdown`; for a one-line label use `Tooltip`.',
-        '**How to use:** pass the trigger element as `trigger` and the card body as `children`. Tune `openDelay` / `closeDelay` (ms) to taste.',
-      ]),
-    },
-  },
-  argTypes: {
-    trigger: { control: false, description: 'The element that opens the card on hover/focus.' },
-    children: { control: false, description: 'The card contents.' },
-    openDelay: { control: 'number', description: 'Delay (ms) before the card opens. Default 0.' },
-    closeDelay: { control: 'number', description: 'Delay (ms) before the card closes after the pointer leaves. Default 300.' },
-    class: { control: 'text', description: 'Extra classes applied to the card body.' },
-  },
-  args: {
-    trigger: <Button variant="outline">@ada</Button>,
-    children: (
-      <div class="flex gap-3">
-        <div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground">AL</div>
-        <div class="space-y-1">
-          <p class="text-sm font-medium text-foreground">Ada Lovelace</p>
-          <p class="text-xs text-muted-foreground">Wrote the first algorithm intended for a machine. Joined in 1843.</p>
-        </div>
-      </div>
-    ),
-  },
-  render: (args) => <HoverCard {...args} />,
-} satisfies Meta<typeof HoverCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { HoverCard } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Hover (or focus) the trigger to reveal a profile preview card. */
-export const Playground: Story = {
-  ...src(`<HoverCard trigger={<Button variant="outline">@ada</Button>}>
-  <ProfilePreview name="Ada Lovelace" />
-</HoverCard>`),
-};
-
-/** A link-preview card, the way it might appear inline in an assistant message. */
-export const LinkPreview: Story = {
-  render: () => (
-    <p class="max-w-md text-sm text-foreground">
-      See the{' '}
-      <HoverCard
-        trigger={<a href="#" class="font-medium text-primary underline underline-offset-2">MDN reference</a>}
-      >
-        <div class="space-y-1">
-          <p class="text-sm font-medium text-foreground">Custom elements — MDN</p>
-          <p class="text-xs text-muted-foreground">developer.mozilla.org</p>
-          <p class="text-xs text-muted-foreground">Define your own HTML elements with the CustomElementRegistry.</p>
-        </div>
-      </HoverCard>{' '}
-      for the full custom-elements API.
-    </p>
-  ),
-  ...src(`<HoverCard trigger={<a href="...">MDN reference</a>}>
-  <LinkPreview title="Custom elements — MDN" host="developer.mozilla.org" />
-</HoverCard>`),
-};

package/src/ui/hover-card.test.tsx

@@ -1,30 +0,0 @@
-/**
- * Unit tests for HoverCardTrigger.
- *
- * The trigger renders as `<As as="span">` — a bare inline span. When the span
- * is dropped into a flex row (e.g. an attachment chip), an inline box doesn't
- * carry the children's block layout and the row collapses. The fix lets the
- * trigger carry layout classes itself, so callers can make it the flex row
- * instead of wrapping the content in an extra div.
- */
-import { describe, it, expect, afterEach } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup } from '@solidjs/testing-library';
-import { HoverCardRoot, HoverCardTrigger } from './hover-card';
-
-afterEach(cleanup);
-
-describe('HoverCardTrigger', () => {
-  it('applies a forwarded class to the trigger element', () => {
-    const { container } = render(() => (
-      <HoverCardRoot>
-        <HoverCardTrigger class="flex items-center gap-1.5">content</HoverCardTrigger>
-      </HoverCardRoot>
-    ));
-
-    const trigger = container.querySelector('span');
-    expect(trigger).toBeTruthy();
-    expect(trigger!.className).toContain('flex');
-    expect(trigger!.className).toContain('items-center');
-  });
-});

package/src/ui/overlay.stories.tsx

@@ -1,115 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal, Show } from 'solid-js';
-import { Portal } from 'solid-js/web';
-import { createPresence, usePosition, useDismiss } from './overlay';
-import { buttonVariants } from './button';
-
-/**
- * `overlay.tsx` is not a component — it's the small DIY toolkit that every
- * floating surface in the kit (Tooltip, HoverCard, Dropdown) is built from,
- * replacing the former third-party UI dependency. Three primitives:
- *
- * - `usePosition(ref, floating, opts)` — anchors `floating` to `ref` via
- *   @floating-ui/dom with flip/shift, tracking it on scroll/resize.
- * - `createPresence(open)` — keeps a node mounted through its CSS exit
- *   animation, then unmounts on `animationend`.
- * - `useDismiss({ enabled, onDismiss, refs })` — Escape + outside-pointerdown
- *   dismissal (no scroll lock).
- *
- * Plus an `As` polymorphic helper for trigger elements.
- */
-const meta: Meta = {
-  title: 'Solid (Advanced)/Primitives/Overlay Core',
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: [
-          "The shared, dependency-free foundation behind every floating surface in the kit — `Tooltip`, `HoverCard`, and `Dropdown` are all assembled from these primitives. It's a toolkit of hooks, not a renderable component.",
-          '**`usePosition(ref, floating, opts)`** anchors a floating node to a trigger via `@floating-ui/dom` (flip/shift, fixed strategy, tracks on scroll/resize). **`createPresence(open)`** keeps the node mounted through its CSS exit animation. **`useDismiss({ enabled, onDismiss, refs })`** handles Escape + outside-click. An **`As`** helper renders a polymorphic trigger.',
-          '**When to use:** only when you need a floating surface the prebuilt components don\'t cover. Reach for `Tooltip` / `HoverCard` / `Dropdown` first — they already wire these together with the correct ARIA and focus behavior.',
-          'The demo below composes all three into a minimal popover; everything portals into the active shadow root via `ChatConfig`.',
-        ].join('\n\n'),
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function PopoverDemo() {
-  const [open, setOpen] = createSignal(false);
-  const [trigger, setTrigger] = createSignal<HTMLElement>();
-  const [content, setContent] = createSignal<HTMLElement>();
-  const presence = createPresence(open);
-  const position = usePosition(trigger, content, { placement: 'bottom-start', gutter: 6 });
-  useDismiss({ enabled: open, onDismiss: () => setOpen(false), refs: () => [trigger(), content()] });
-
-  return (
-    <>
-      <button
-        ref={setTrigger}
-        type="button"
-        class={buttonVariants({ variant: 'outline' })}
-        onClick={() => setOpen(!open())}
-      >
-        {open() ? 'Close' : 'Open'} popover
-      </button>
-      <Show when={presence.present()}>
-        <Portal>
-          <div
-            ref={(el) => { setContent(el); presence.setRef(el); }}
-            data-expanded={presence.state() === 'open' ? '' : undefined}
-            data-closed={presence.state() === 'closed' ? '' : undefined}
-            style={{ position: 'fixed', left: `${position.pos().x}px`, top: `${position.pos().y}px` }}
-            class="z-50 w-64 rounded-lg bg-card p-3 text-sm text-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95"
-          >
-            Positioned by <code class="text-xs">usePosition</code>, kept mounted through its
-            exit animation by <code class="text-xs">createPresence</code>, and closed on
-            Escape / outside-click by <code class="text-xs">useDismiss</code>.
-          </div>
-        </Portal>
-      </Show>
-    </>
-  );
-}
-
-/** A minimal popover hand-built from the three overlay primitives. Click to toggle; click outside or press Escape to dismiss. */
-export const MinimalPopover: Story = {
-  render: () => <PopoverDemo />,
-  parameters: {
-    docs: {
-      source: {
-        code: `import { createPresence, usePosition, useDismiss } from '@kitn.ai/ui';
-
-function PopoverDemo() {
-  const [open, setOpen] = createSignal(false);
-  const [trigger, setTrigger] = createSignal<HTMLElement>();
-  const [content, setContent] = createSignal<HTMLElement>();
-  const presence = createPresence(open);
-  const position = usePosition(trigger, content, { placement: 'bottom-start', gutter: 6 });
-  useDismiss({ enabled: open, onDismiss: () => setOpen(false), refs: () => [trigger(), content()] });
-
-  return (
-    <>
-      <button ref={setTrigger} onClick={() => setOpen(!open())}>Toggle</button>
-      <Show when={presence.present()}>
-        <Portal>
-          <div
-            ref={(el) => { setContent(el); presence.setRef(el); }}
-            style={{ position: 'fixed', left: \`\${position.pos().x}px\`, top: \`\${position.pos().y}px\` }}
-          >
-            …content…
-          </div>
-        </Portal>
-      </Show>
-    </>
-  );
-}`,
-        language: 'tsx',
-      },
-    },
-  },
-};

package/src/ui/popover.stories.tsx

@@ -1,81 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { createSignal, Show, For } from 'solid-js';
-import { Popover, type PopoverProps } from './popover';
-import { Switch } from './switch';
-import { Button } from './button';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Popover',
-  component: Popover,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A **popover**: a trigger that toggles a floating panel of arbitrary content. Unlike `Dropdown` (a `role="menu"` with roving focus), the panel is a `role="dialog"` region, so it holds anything — model rows, toggles, nested groups.',
-        '**When to use:** a "button + card" affordance — a header model menu, a settings popover, an account dropdown with mixed controls. For a simple list of commands, use `Dropdown` instead.',
-        '**How to use:** pass the control as `trigger` and the panel as `children`. Clicking the trigger toggles; Escape or an outside click closes (clicks inside do not). Uncontrolled by default; pass `open` + `onOpenChange` to control it.',
-        '**Placement:** chat headers, toolbars, and anywhere a compact control should reveal a richer card.',
-      ]),
-    },
-  },
-  argTypes: {
-    placement: {
-      control: 'select',
-      options: ['bottom-start', 'bottom', 'bottom-end', 'top-start', 'top', 'top-end', 'left', 'right'],
-      description: 'Floating placement relative to the trigger.',
-      table: { defaultValue: { summary: 'bottom-start' } },
-    },
-    gutter: { control: 'number', description: 'Gap in px between trigger and panel.', table: { defaultValue: { summary: '6' } } },
-    open: { control: 'boolean', description: 'Controlled open state. Omit for click-to-toggle.' },
-  },
-  args: { placement: 'bottom-start', onOpenChange: fn() },
-} satisfies Meta<typeof Popover>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const LEGACY = ['GPT-4o', 'GPT-4.1', 'GPT-4o mini'];
-const row = 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground hover:bg-muted';
-
-/** A model menu rebuilt from the primitive — flagship row, an expandable group,
- *  and a Switch — the kind of card a plain menu can't hold. */
-export const ModelMenu: Story = {
-  render: (args: Partial<PopoverProps>) => {
-    const [legacyOpen, setLegacyOpen] = createSignal(false);
-    return (
-      <Popover {...args} trigger={<Button variant="ghost" size="sm">GPT-5.5 ▾</Button>}>
-        <div style={{ width: '15rem' }}>
-          <button type="button" class={row}>
-            <span style={{ 'font-weight': 600 }}>GPT-5.5</span>
-            <span class="text-caption text-muted-foreground">Flagship</span>
-          </button>
-          <button type="button" class={row} aria-expanded={legacyOpen()} onClick={() => setLegacyOpen(!legacyOpen())}>
-            Legacy models {legacyOpen() ? '▴' : '▾'}
-          </button>
-          <Show when={legacyOpen()}>
-            <For each={LEGACY}>{(m) => <button type="button" class={row} style={{ 'padding-left': '1.75rem' }}>{m}</button>}</For>
-          </Show>
-          <div style={{ height: '1px', margin: '4px 0', background: 'var(--color-border)' }} />
-          <div class={row} style={{ 'justify-content': 'space-between' }}>
-            <span>Temporary chat</span>
-            <Switch label="Temporary chat" />
-          </div>
-        </div>
-      </Popover>
-    );
-  },
-};
-
-/** Minimal — a trigger and a small card. */
-export const Basic: Story = {
-  render: (args: Partial<PopoverProps>) => (
-    <Popover {...args} trigger={<Button size="sm">Open</Button>}>
-      <div style={{ width: '12rem', padding: '0.5rem' }} class="text-sm text-foreground">
-        Any content goes here — this is a <code>role="dialog"</code> panel.
-      </div>
-    </Popover>
-  ),
-};