@kitn.ai/ui 0.15.0 → 0.16.0

package/src/elements/embed.stories.tsx

@@ -1,213 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal, onMount, type JSX } from 'solid-js';
-import './embed'; // side effect: registers <kai-embed>
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-import type { EmbedCardData } from '../primitives/embed-providers';
-import { configureEmbedAllowlist } from '../primitives/embed-providers';
-import type { CardEvent } from '../primitives/card-contract';
-
-// Custom DOM element — declare the tag for JSX.
-declare module 'solid-js' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'kai-embed': JSX.HTMLAttributes<HTMLElement> & {
-        'card-id'?: string;
-        ref?: (el: HTMLElement) => void;
-      };
-    }
-  }
-}
-
-type EmbedEl = HTMLElement & { cardId?: string; data?: EmbedCardData };
-
-/** A sized box the embed sits in. */
-function Frame(props: { children: JSX.Element }) {
-  return <div style={{ width: '100%', 'max-width': '560px' }}>{props.children}</div>;
-}
-
-/** Mounts a <kai-embed>, sets `.data`, logs emitted CardEvents under the render. */
-function EmbedDemo(props: { cardId: string; data: EmbedCardData }) {
-  const [log, setLog] = createSignal<CardEvent[]>([]);
-  let el: EmbedEl | undefined;
-  onMount(() => {
-    if (!el) return;
-    el.cardId = props.cardId;
-    el.data = props.data;
-    el.addEventListener('kai-card', (e) => {
-      const detail = (e as CustomEvent<CardEvent>).detail;
-      setLog((prev) => [...prev, detail]);
-      if (detail.kind === 'open' && detail.target === 'tab') {
-        window.open(detail.url, '_blank', 'noopener,noreferrer');
-      }
-    });
-  });
-  return (
-    <Frame>
-      <div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
-        <kai-embed ref={(e) => (el = e as EmbedEl)} card-id={props.cardId} />
-        <pre
-          style={{
-            margin: 0,
-            'max-height': '180px',
-            overflow: 'auto',
-            background: 'var(--color-muted, #f4f4f5)',
-            'border-radius': '8px',
-            padding: '8px',
-            'font-size': '12px',
-          }}
-        >
-          {log().length === 0 ? '// emitted CardEvents appear here' : JSON.stringify(log(), null, 2)}
-        </pre>
-      </div>
-    </Frame>
-  );
-}
-
-const YT_ENVELOPE = {
-  type: 'embed',
-  id: 'card-embed-1',
-  title: 'Intro video',
-  data: { provider: 'youtube', id: 'dQw4w9WgXcQ', title: 'Product intro', aspectRatio: '16:9' },
-} satisfies { type: string; id: string; title: string; data: EmbedCardData };
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-embed id="em"></kai-embed>
-
-<script type="module">
-  import '@kitn.ai/ui/elements'; // registers the custom elements
-
-  const em = document.getElementById('em');
-  em.cardId = 'card-embed-1';
-  // \`data\` is a JS property (the CardEnvelope \`data\`):
-  em.data = { provider: 'youtube', id: 'dQw4w9WgXcQ', title: 'Product intro' };
-
-  // NO network to YouTube until the user clicks play (privacy-first lazy facade).
-  // kai-embed emits: ready (on mount), open (on "Open on provider" click), error (blocked/invalid).
-  // The optional "Open on YouTube" affordance bubbles a composed \`kai-card\` open event:
-  em.addEventListener('kai-card', (e) => {
-    const ev = e.detail;
-    if (ev.kind === 'open' && ev.target === 'tab') {
-      window.open(ev.url, '_blank', 'noopener,noreferrer');
-    }
-  });
-</script>`;
-
-const meta = {
-  title: 'Generative UI/Cards/kai-embed',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-embed'),
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: specDescription('kai-embed', [
-        '`<kai-embed>` is a **privacy-first lazy media embed** (YouTube / Vimeo / allowlisted generic player) for the generative-UI feature. It speaks the **Card Contract**: data down (an `embed` `CardEnvelope`), events up (only the `open` verb, plus lifecycle `ready` / failure `error`).',
-        '**Lazy facade:** the initial render is just a **poster + play button** — NO provider iframe, NO third-party JS, NO cookies until the user clicks play. YouTube loads via `youtube-nocookie.com`; Vimeo with `dnt=1`. This buys privacy (no tracking until opt-in) and performance (no player JS on load).',
-        '**Security:** `generic` embeds frame an arbitrary https URL, so they are **rejected unless the app allowlists their origin** with `configureEmbedAllowlist([...])` (defaults to empty — an agent cannot frame an arbitrary origin). The player iframe is sandboxed for a *trusted provider* (`allow-scripts allow-same-origin` on a cross-origin player) — contrast `<kai-artifact>`, which trusts nothing.',
-        '**Never a dead end:** a persistent "Open on {provider}" affordance dispatches the `open` verb (so a provider that refuses framing still has a way out). Set `data` as a JS property; `card-id` via attribute.',
-        'See the **Code** tab for the `CardEnvelope` JSON + HTML wiring.',
-      ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** YouTube (lazy) — poster + play; the iframe loads (youtube-nocookie) only on click. `ready` fires on mount; `open` fires if the "Open on YouTube" link is used. */
-export const YouTube: Story = {
-  name: 'YouTube (lazy)',
-  render: () => <EmbedDemo cardId={YT_ENVELOPE.id} data={YT_ENVELOPE.data} />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** Vimeo — supply a `poster` (Vimeo has no static thumbnail URL). */
-export const Vimeo: Story = {
-  render: () => (
-    <EmbedDemo
-      cardId="card-embed-2"
-      data={{
-        provider: 'vimeo',
-        id: '76979871',
-        title: 'Vimeo staff pick',
-        poster: 'https://placehold.co/1280x720/1ab7ea/ffffff/png?text=Vimeo',
-      }}
-    />
-  ),
-};
-
-/** Generic player — an https embed URL whose origin the app has allowlisted. */
-export const Generic: Story = {
-  name: 'Generic player',
-  render: () => {
-    configureEmbedAllowlist(['https://www.youtube-nocookie.com']);
-    return (
-      <EmbedDemo
-        cardId="card-embed-3"
-        data={{
-          provider: 'generic',
-          url: 'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ',
-          title: 'Generic embed',
-          poster: 'https://placehold.co/1280x720/444/fff/png?text=Generic+player',
-        }}
-      />
-    );
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `import { configureEmbedAllowlist } from '@kitn.ai/ui';
-
-// Generic embeds are blocked by default — allowlist the trusted origin first:
-configureEmbedAllowlist(['https://your-player.example.com']);
-
-em.data = {
-  provider: 'generic',
-  url: 'https://your-player.example.com/embed/abc',
-  title: 'Generic embed',
-  poster: 'https://your-cdn.example.com/poster.jpg',
-};`,
-        language: 'ts',
-      },
-    },
-  },
-};
-
-/** Custom aspect ratio — a vertical 9:16 short. */
-export const CustomAspectRatio: Story = {
-  name: 'Custom aspect ratio (9:16)',
-  render: () => (
-    <div style={{ width: '100%', 'max-width': '280px' }}>
-      <EmbedRaw
-        cardId="card-embed-4"
-        data={{ provider: 'youtube', id: 'dQw4w9WgXcQ', title: 'Short', aspectRatio: '9:16' }}
-      />
-    </div>
-  ),
-};
-
-/** Blocked-embed fallback — the "Open on provider" affordance is always present. */
-export const BlockedFallback: Story = {
-  name: 'Blocked-embed fallback',
-  render: () => <EmbedDemo cardId="card-embed-5" data={{ provider: 'youtube', id: 'dQw4w9WgXcQ', title: 'Maybe blocked' }} />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Some providers refuse framing (X-Frame-Options / CSP `frame-ancestors`). We can\'t detect that cross-origin in JS, so the **"Open on {provider}"** affordance is *always* available — a blocked embed is never a dead end.',
-      },
-    },
-  },
-};
-
-// A frame-less variant so the 9:16 story controls its own width.
-function EmbedRaw(props: { cardId: string; data: EmbedCardData }) {
-  let el: EmbedEl | undefined;
-  onMount(() => {
-    if (el) {
-      el.cardId = props.cardId;
-      el.data = props.data;
-    }
-  });
-  return <kai-embed ref={(e) => (el = e as EmbedEl)} />;
-}

package/src/elements/empty.stories.tsx

@@ -1,111 +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-empty': JSX.HTMLAttributes<HTMLElement>;
-    }
-  }
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-empty
-  empty-title="No conversations yet"
-  description="Start a new chat to see it appear here."
->
-  <!-- Route 2 slots: your own icon and actions -->
-  <svg slot="media" width="28" height="28" viewBox="0 0 24 24" fill="none"
-       stroke="currentColor" stroke-width="2">
-    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-  </svg>
-
-  <!-- Slotted actions are light DOM, so style them with your own page CSS
-       (a ghost button with a + icon, here styled inline for portability). -->
-  <button
-    style="display:inline-flex; align-items:center; gap:.45rem;
-           font:500 13.5px/1 system-ui,sans-serif; padding:.5rem .85rem;
-           border-radius:9px; border:1px solid var(--color-border, #e5e5e5);
-           background:transparent; color:inherit; cursor:pointer;"
-  >
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
-         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M5 12h14" /><path d="M12 5v14" />
-    </svg>
-    New chat
-  </button>
-</kai-empty>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-</script>`;
-
-const meta = {
-  title: 'Components/Empty',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-empty'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-empty', [
-          '`<kai-empty>` is the framework-agnostic **web component** for an empty-state block — an icon, a title, a description, and actions — isolated in **Shadow DOM**.',
-          '**When to use:** placeholder UI for an empty list/thread in a non-Solid app. In SolidJS, compose the `Empty*` primitives.',
-          '**Placement:** filling the main content area where a conversation list or message thread would appear; give it (or its parent) a height so the centered layout renders correctly.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set `empty-title` (note `empty-title`, not `title`) and `description` via attributes, and use the **slots** (\"Route 2\") to project your own icon (`slot=\"media\"`) and actions (the default slot).",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** Render the actual `<kai-empty>` custom element with slotted children. */
-function EmptyElement() {
-  let el: HTMLElement | undefined;
-  onMount(() => {
-    if (!el) return;
-    el.setAttribute('empty-title', 'No conversations yet');
-    el.setAttribute('description', 'Start a new chat to see it appear here.');
-  });
-  return (
-    <kai-empty ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '24px' }}>
-      <svg slot="media" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-      </svg>
-      {/* Slotted actions are light DOM — style them with the host page's own
-          CSS. Here a ghost "+ New chat" button, styled inline so it renders
-          correctly in any context (mirrors the composable example's pill-btn). */}
-      <button
-        style={{
-          display: 'inline-flex',
-          'align-items': 'center',
-          gap: '0.45rem',
-          font: '500 13.5px/1 system-ui, sans-serif',
-          padding: '0.5rem 0.85rem',
-          'border-radius': '9px',
-          border: '1px solid var(--color-border, #e5e5e5)',
-          background: 'transparent',
-          color: 'inherit',
-          cursor: 'pointer',
-        }}
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M5 12h14" /><path d="M12 5v14" />
-        </svg>
-        New chat
-      </button>
-    </kai-empty>
-  );
-}
-
-/** An empty state with a slotted icon and an action button. */
-export const Default: Story = {
-  render: () => <EmptyElement />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};

package/src/elements/feedback-bar.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-feedback-bar': JSX.HTMLAttributes<HTMLElement> & {
-        'bar-title'?: string;
-        'collect-detail'?: boolean | string;
-        'detail-title'?: string;
-        'thanks-message'?: string;
-        'on:kai-feedback'?: (e: CustomEvent<{ value: 'helpful' | 'not-helpful' }>) => void;
-        'on:kai-feedback-detail'?: (e: CustomEvent<{ value: 'helpful' | 'not-helpful'; category?: string; comment?: string }>) => void;
-        'on:kai-close'?: (e: CustomEvent) => void;
-      };
-    }
-  }
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-feedback-bar bar-title="Was this helpful?"></kai-feedback-bar>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const bar = document.querySelector('kai-feedback-bar');
-  bar.addEventListener('kai-feedback', (e) => console.log('feedback:', e.detail.value)); // 'helpful' | 'not-helpful'
-  bar.addEventListener('kai-close', () => bar.remove());
-</script>`;
-
-const meta = {
-  title: 'Components/FeedbackBar',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-feedback-bar'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-feedback-bar', [
-          '`<kai-feedback-bar>` is the framework-agnostic **web component** for an inline thumbs up/down feedback banner — isolated in **Shadow DOM**. It owns its own flow: it asks, optionally collects a category + comment on a not-helpful vote (`collect-detail`), then confirms with a thank-you in place. It does **not** disappear on a vote; only the close (X) dismisses it.',
-          '**When to use:** collecting a quick reaction (optionally with a reason) after an answer or a completed task. In SolidJS, use the `FeedbackBar` primitive.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the label via the `bar-title` attribute (`title` is avoided — it's a global HTML attribute). For the richer flow add `collect-detail` and set the `categories` **property** (array). Listen for `kai-feedback` (`{ value }`), `kai-feedback-detail` (`{ value, category?, comment? }`), and `kai-close` **CustomEvents**.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** The default feedback prompt. */
-export const Default: Story = {
-  render: () => (
-    <div style={{ padding: '24px', 'max-width': '480px' }}>
-      <kai-feedback-bar
-        on:kai-feedback={(e) => console.log('feedback:', e.detail.value)}
-        on:kai-close={() => console.log('closed')}
-      />
-    </div>
-  ),
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** A custom label via the `bar-title` attribute. */
-export const CustomTitle: Story = {
-  render: () => (
-    <div style={{ padding: '24px', 'max-width': '480px' }}>
-      <kai-feedback-bar bar-title="Did this answer your question?" />
-    </div>
-  ),
-};
-
-/** The full flow with `collect-detail` — a 👎 vote opens an optional detail form
- *  (category chips from the `categories` property + a comment) before the thanks. */
-export const WithDetail: Story = {
-  render: () => {
-    let el: (HTMLElement & { categories?: string[] }) | undefined;
-    onMount(() => {
-      if (el) el.categories = ['Inaccurate', 'Not helpful', 'Unsafe', 'Other'];
-    });
-    return (
-      <div style={{ padding: '24px', 'max-width': '480px' }}>
-        <kai-feedback-bar
-          ref={(e) => (el = e as HTMLElement)}
-          bar-title="Was this response helpful?"
-          collect-detail
-          on:kai-feedback={(e) => console.log('vote:', e.detail.value)}
-          on:kai-feedback-detail={(e) => console.log('detail:', e.detail)}
-          on:kai-close={() => console.log('closed')}
-        />
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<kai-feedback-bar id="fb" bar-title="Was this response helpful?" collect-detail></kai-feedback-bar>
-<script type="module">
-  import '@kitn.ai/ui/elements';
-  const fb = document.getElementById('fb');
-  fb.categories = ['Inaccurate', 'Not helpful', 'Unsafe', 'Other']; // chips (a JS property)
-  fb.addEventListener('kai-feedback', (e) => console.log('vote:', e.detail.value));
-  fb.addEventListener('kai-feedback-detail', (e) => console.log('detail:', e.detail)); // { value, category?, comment? }
-  fb.addEventListener('kai-close', () => fb.remove());
-</script>`,
-        language: 'html',
-      },
-    },
-  },
-};

package/src/elements/file-tree.stories.tsx

@@ -1,134 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal, onMount, type JSX } from 'solid-js';
-import './register'; // side effect: registers the custom elements
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-import type { FileTreeFile } from '../components/file-tree';
-
-declare module 'solid-js' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'kai-file-tree': JSX.HTMLAttributes<HTMLElement> & {
-        'active-file'?: string;
-        ref?: (el: HTMLElement) => void;
-      };
-    }
-  }
-}
-
-const FILES: FileTreeFile[] = [
-  { path: 'index.html', type: 'html' },
-  { path: 'about.html', type: 'html' },
-  { path: 'css/site.css', type: 'other', language: 'css' },
-  { path: 'src/app.ts', type: 'other', language: 'ts' },
-  { path: 'src/lib/format.ts', type: 'other', language: 'ts' },
-  { path: 'src/lib/parse.ts', type: 'other', language: 'ts' },
-  { path: 'assets/logo.svg', type: 'image' },
-  { path: 'assets/report.pdf', type: 'pdf' },
-];
-
-/** A bordered, sized box the tree fills + scrolls within. */
-function Frame(props: { children: JSX.Element }) {
-  return (
-    <div
-      style={{
-        height: '320px',
-        width: '280px',
-        border: '1px solid var(--color-border, #e4e4e7)',
-        'border-radius': '10px',
-        overflow: 'hidden',
-      }}
-    >
-      {props.children}
-    </div>
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-file-tree style="display:block;height:320px"></kai-file-tree>
-
-<script type="module">
-  import '@kitn.ai/ui/elements'; // registers the custom elements
-
-  const tree = document.querySelector('kai-file-tree');
-  // \`files\` is a JS property (array). Folders are derived from \`/\` in each path.
-  tree.files = [
-    { path: 'index.html', type: 'html' },
-    { path: 'src/app.ts', type: 'other' },
-    { path: 'src/lib/format.ts', type: 'other' },
-    { path: 'assets/logo.svg', type: 'image' },
-  ];
-  tree.setAttribute('active-file', 'src/app.ts');
-  tree.addEventListener('kai-select', (e) => console.log('selected', e.detail.path));
-</script>`;
-
-const meta = {
-  title: 'Components/FileTree',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-file-tree'),
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: specDescription('kai-file-tree', [
-        '`<kai-file-tree>` is the framework-agnostic **web component** for a collapsible, keyboard-navigable **file explorer** built from a flat list of `/`-delimited paths (nested folders are derived automatically). ARIA `tree`/`treeitem`. Isolated in **Shadow DOM**.',
-        '**When to use:** any time you need a file/folder tree — the Code tab of `<kai-artifact>` uses it, but it ships public so you can reuse it standalone (a project explorer, an attachments browser, a doc outline).',
-        "**How to use:** register once with `import '@kitn.ai/ui/elements'`, then set the `files` **property** (a JS array of `{ path, url?, code?, language?, type? }`). Folders come from the `/` in each `path`; `type` picks the icon. Set `active-file` to highlight a row, `default-expanded` to control which folders open. Listen for **`select`** (`detail.path`). Arrow keys navigate; Enter/Space selects or toggles.",
-        '**Anatomy:** a scrollable ARIA `tree` of **folder nodes** (collapsible `treeitem` groups, derived from `/`-delimited path segments) and **file leaf nodes** (selectable `treeitem` rows with a type icon; the `active-file` row is highlighted). Folders auto-expand on first render; click or arrow-key to collapse/expand.',
-        '**Placement:** a sidebar/explorer column — inside `<kai-artifact>`, a `<kai-resizable>` panel, or any file-picker surface. It **fills** its container, so give the parent (or the element) a height.',
-        'See the **Code** tab for HTML usage.',
-      ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** Interactive playground — click rows, use arrow keys / Enter to navigate. */
-export const Playground: Story = {
-  render: () => {
-    const [selected, setSelected] = createSignal('src/app.ts');
-    let el: HTMLElement & { files?: FileTreeFile[] };
-    onMount(() => {
-      if (!el) return;
-      el.files = FILES;
-      el.addEventListener('kai-select', (e) => {
-        const path = (e as CustomEvent).detail.path as string;
-        setSelected(path);
-        el.setAttribute('active-file', path);
-      });
-    });
-    return (
-      <div style={{ display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
-        <Frame>
-          <kai-file-tree
-            ref={(e) => (el = e as HTMLElement & { files?: FileTreeFile[] })}
-            active-file={selected()}
-          />
-        </Frame>
-        <span style={{ 'font-size': '13px', color: 'var(--color-muted-foreground, #71717a)' }}>
-          Selected: <code>{selected()}</code>
-        </span>
-      </div>
-    );
-  },
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** A deeper, nested layout with mixed file types. */
-export const Nested: Story = {
-  render: () => {
-    let el: HTMLElement & { files?: FileTreeFile[] };
-    onMount(() => {
-      if (el) el.files = FILES;
-    });
-    return (
-      <Frame>
-        <kai-file-tree
-          ref={(e) => (el = e as HTMLElement & { files?: FileTreeFile[] })}
-          active-file="src/lib/format.ts"
-        />
-      </Frame>
-    );
-  },
-};

package/src/elements/file-upload.stories.tsx

@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-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-file-upload': JSX.HTMLAttributes<HTMLElement> & {
-        multiple?: boolean | string;
-        accept?: string;
-        disabled?: boolean | string;
-        label?: string;
-        'on:kai-files-added'?: (e: CustomEvent<{ files: File[] }>) => void;
-      };
-    }
-  }
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-file-upload accept="image/*" label="Drop images here"></kai-file-upload>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  document.querySelector('kai-file-upload')
-    .addEventListener('kai-files-added', (e) =>
-      console.log(e.detail.files.map((f) => f.name)));
-</script>`;
-
-const meta = {
-  title: 'Components/FileUpload',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-file-upload'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-file-upload', [
-          '`<kai-file-upload>` is the framework-agnostic **web component** for a click / drag-and-drop file dropzone — isolated in **Shadow DOM**.',
-          '**When to use:** accepting file or image uploads in a non-Solid app. In SolidJS, compose the `FileUpload` primitives.',
-          '**Placement:** above or replacing the prompt input, or in a dedicated upload panel; fills its container width (set a `max-width` on the parent to constrain the dropzone).',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the `accept` / `multiple` / `label` attributes, and listen for the `kai-files-added` **CustomEvent** (`e.detail.files` is a `File[]`). The default dropzone label can be replaced with your own markup via the default `<slot>`.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** A dropzone accepting any files. */
-export const Default: Story = {
-  render: () => (
-    <div style={{ padding: '24px', 'max-width': '480px' }}>
-      <kai-file-upload
-        on:kai-files-added={(e: CustomEvent<{ files: File[] }>) =>
-          console.log(e.detail.files.map((f) => f.name))}
-      />
-    </div>
-  ),
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** Restricted to images, single file, with a custom label. */
-export const ImagesOnly: Story = {
-  render: () => (
-    <div style={{ padding: '24px', 'max-width': '480px' }}>
-      <kai-file-upload accept="image/*" multiple={false} label="Click or drop an image" />
-    </div>
-  ),
-};
-
-/** A disabled dropzone (non-interactive). */
-export const Disabled: Story = {
-  render: () => (
-    <div style={{ padding: '24px', 'max-width': '480px' }}>
-      <kai-file-upload disabled label="Uploads are disabled" />
-    </div>
-  ),
-};