@kitn.ai/ui 0.14.1 → 0.15.1

package/src/elements/form.stories.tsx

@@ -1,248 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal, onMount, type JSX } from 'solid-js';
-import './form';
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-import type { FormDefinition } from '../components/form';
-import type { CardEvent } from '../primitives/card-contract';
-
-declare module 'solid-js' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'kai-form': JSX.HTMLAttributes<HTMLElement> & {
-        heading?: string;
-        'card-id'?: string;
-        ref?: (el: HTMLElement) => void;
-      };
-    }
-  }
-}
-
-type FormEl = HTMLElement & { data?: FormDefinition; resolution?: Record<string, unknown> };
-
-/** A bordered box the form sits inside. */
-function Frame(props: { children: JSX.Element }) {
-  return <div style={{ 'max-width': '460px' }}>{props.children}</div>;
-}
-
-/** Mounts a <kai-form>, sets `.data`, logs the emitted CardEvent under the render. */
-function FormDemo(props: { def: FormDefinition; cardId: string }) {
-  const [log, setLog] = createSignal<CardEvent[]>([]);
-  let el: FormEl | undefined;
-  onMount(() => {
-    if (!el) return;
-    el.data = props.def;
-    el.addEventListener('kai-card', (e) => {
-      const detail = (e as CustomEvent<CardEvent>).detail;
-      setLog((prev) => [...prev, detail]);
-    });
-  });
-  return (
-    <Frame>
-      <div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
-        <kai-form ref={(e) => (el = e as FormEl)} 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 FEEDBACK: FormDefinition = {
-  type: 'object',
-  title: 'How did we do?',
-  description: 'Two quick questions.',
-  required: ['rating', 'contactOk'],
-  'x-kai-order': ['rating', 'comments', 'plan', 'contactOk'],
-  'x-kai-submitLabel': 'Send feedback',
-  'x-kai-actions': [{ id: 'skip', label: 'Skip', variant: 'ghost' }],
-  properties: {
-    rating: { type: 'integer', title: 'Overall rating', minimum: 1, maximum: 5, 'x-kai-widget': 'rating' },
-    comments: {
-      type: 'string',
-      title: 'Comments',
-      maxLength: 500,
-      'x-kai-widget': 'textarea',
-      'x-kai-placeholder': "What worked, what didn't…",
-    },
-    plan: { type: 'string', title: 'Your plan', enum: ['free', 'pro', 'team'], default: 'free' },
-    contactOk: { type: 'boolean', title: 'OK to contact me about this', default: false },
-  },
-};
-
-const ALL_WIDGETS: FormDefinition = {
-  type: 'object',
-  title: 'Every widget',
-  'x-kai-submitLabel': 'Submit all',
-  properties: {
-    name: { type: 'string', title: 'Name' },
-    bio: { type: 'string', title: 'Bio', maxLength: 300 },
-    email: { type: 'string', title: 'Email', format: 'email' },
-    website: { type: 'string', title: 'Website', format: 'uri' },
-    birthday: { type: 'string', title: 'Birthday', format: 'date' },
-    secret: { type: 'string', title: 'Password', 'x-kai-widget': 'password' },
-    size: { type: 'string', title: 'Size', enum: ['S', 'M', 'L'] },
-    country: { type: 'string', title: 'Country', enum: ['US', 'UK', 'DE', 'FR', 'JP'] },
-    age: { type: 'integer', title: 'Age', minimum: 0, maximum: 120 },
-    volume: { type: 'integer', title: 'Volume', minimum: 0, maximum: 11, 'x-kai-widget': 'slider' },
-    stars: { type: 'integer', title: 'Stars', minimum: 1, maximum: 5, 'x-kai-widget': 'rating' },
-    notify: { type: 'boolean', title: 'Email me updates' },
-    agree: { type: 'boolean', title: 'I agree', 'x-kai-widget': 'checkbox' },
-    tags: { type: 'array', title: 'Tags', items: { type: 'string' } },
-    topics: { type: 'array', title: 'Topics', items: { enum: ['news', 'sports', 'tech'] } },
-    contacts: {
-      type: 'array',
-      title: 'Contacts',
-      items: {
-        type: 'object',
-        properties: { label: { type: 'string', title: 'Label' }, phone: { type: 'string', title: 'Phone' } },
-      },
-    },
-    address: {
-      type: 'object',
-      title: 'Address',
-      properties: { street: { type: 'string', title: 'Street' }, city: { type: 'string', title: 'City' } },
-    },
-  },
-};
-
-const VALIDATION: FormDefinition = {
-  type: 'object',
-  title: 'Create account',
-  required: ['username', 'email', 'age'],
-  properties: {
-    username: { type: 'string', title: 'Username', minLength: 3, maxLength: 12 },
-    email: { type: 'string', title: 'Email', format: 'email' },
-    age: { type: 'integer', title: 'Age', minimum: 13, maximum: 120 },
-  },
-};
-
-const HTML_SNIPPET = (def: FormDefinition) => `<kai-form></kai-form>
-<script type="module">
-  import '@kitn.ai/ui/elements'; // registers the custom elements
-
-  const form = document.querySelector('kai-form');
-  // \`data\` is the CardEnvelope.data — a JSON Schema + x-kai-* UI hints (set as a property).
-  form.data = ${JSON.stringify(def, null, 2)};
-
-  // Cards bubble ONE \`kai-card\` CustomEvent carrying a typed CardEvent.
-  form.addEventListener('kai-card', (e) => {
-    const ev = e.detail; // { kind:'submit', cardId, data } | { kind:'action', ... } | ...
-    if (ev.kind === 'submit') console.log('submission', ev.data);
-  });
-</script>`;
-
-const meta = {
-  title: 'Generative UI/Cards/kai-form',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-form'),
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: specDescription('kai-form', [
-        '`<kai-form>` turns an agent\'s **JSON Schema** "shape" (set via the `data` **property**) into a themed, accessible, validated form inside `<kai-card>` chrome. A valid submission is emitted **up the Card contract** as a bubbling **`kai-card`** CustomEvent of `{ kind: \'submit\', cardId, data }`.',
-        '**Anatomy:** `<kai-card>` chrome (optional heading from `data.title` or `heading` attr) → **field rows** (one per schema property in `x-kai-order` / key order: label + widget; `object` properties become a `<fieldset>`, `array` items become a repeater/checkbox-group/tag-list) → **card footer** (`x-kai-submitLabel` submit `<Button>` + optional `x-kai-actions` secondary buttons; replaced by a read-only `<dl>` summary after a resolved submission).',
-        '**The mapping is deterministic:** `string`→text, `string`+`enum`→radio/select, `string`+`format`→typed inputs, `number`/`integer`→number (or `slider`/`rating` via `x-kai-widget`), `boolean`→switch, `array`→checkbox-group / multi-select / repeater / tag-list, nested `object`→fieldset. `x-kai-*` hints (`x-kai-widget`, `x-kai-order`, `x-kai-submitLabel`, `x-kai-actions`, `x-kai-dismissible`, …) refine the UI and live **inside** the schema, so one source of truth drives both the form and validation.',
-        "**Events** (all frozen Card-contract verbs): `ready` on mount, `submit` on a valid submit, `action` for secondary buttons (`x-kai-actions`), `dismiss` when dismissible, `error` for a malformed definition (renders the inline `kai-card` error). It **never invents events**.",
-        '**The same `CardEnvelope`/`CardEvent` shapes flow over the remote iframe transport unchanged** — this is the *native* card. See the **Code** tab for the full envelope JSON + the HTML wiring.',
-      ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** The worked example: a rating + textarea + enum radio + switch, with a Skip action. */
-export const Feedback: Story = {
-  render: () => <FormDemo def={FEEDBACK} cardId="card-feedback-7f3" />,
-  parameters: { docs: { source: { code: HTML_SNIPPET(FEEDBACK), language: 'html' } } },
-};
-
-/** One form exercising every row of the mapping table. */
-export const AllWidgets: Story = {
-  render: () => <FormDemo def={ALL_WIDGETS} cardId="card-all" />,
-  parameters: { docs: { source: { code: HTML_SNIPPET(ALL_WIDGETS), language: 'html' } } },
-};
-
-/** Required + min/max + format: try submitting empty (inline errors), then fill it in. */
-export const Validation: Story = {
-  render: () => <FormDemo def={VALIDATION} cardId="card-signup" />,
-  parameters: { docs: { source: { code: HTML_SNIPPET(VALIDATION), language: 'html' } } },
-};
-
-const RESOLVED_FORM: FormDefinition = {
-  type: 'object',
-  title: 'Book a demo',
-  'x-kai-order': ['name', 'optIn'],
-  properties: {
-    name: { type: 'string', title: 'Full name' },
-    optIn: { type: 'boolean', title: 'Email me' },
-  },
-};
-
-/** The form after a valid submission — read-only `<dl>` summary + "✓ Submitted", no inputs. */
-export const Resolved: Story = {
-  name: 'Resolved (read-only)',
-  render: () => {
-    let el: FormEl | undefined;
-    onMount(() => {
-      if (!el) return;
-      el.data = RESOLVED_FORM;
-      el.resolution = { kind: 'submit', data: { name: 'Jane Cooper', optIn: true } };
-    });
-    return (
-      <Frame>
-        <kai-form ref={(e) => (el = e as FormEl)} card-id="card-resolved-form" />
-      </Frame>
-    );
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<kai-form></kai-form>
-<script type="module">
-  import '@kitn.ai/ui/elements';
-  const form = document.querySelector('kai-form');
-  form.data = ${JSON.stringify(RESOLVED_FORM, null, 2)};
-  // Setting .resolution renders the chromed read-only summary — no inputs or submit button.
-  form.resolution = { kind: 'submit', data: { name: 'Jane Cooper', optIn: true } };
-</script>`,
-        language: 'html',
-      },
-    },
-  },
-};
-
-/** A malformed `data` → the inline error state + an `error` event (no form rendered). */
-export const InvalidEnvelope: Story = {
-  render: () => <FormDemo def={{ type: 'array' } as unknown as FormDefinition} cardId="card-bad" />,
-  parameters: {
-    docs: {
-      source: {
-        code: `<kai-form></kai-form>
-<script type="module">
-  import '@kitn.ai/ui/elements';
-  const form = document.querySelector('kai-form');
-  // A definition that isn't a JSON-Schema object → inline error + an \`error\` event.
-  form.data = { type: 'array' };
-  form.addEventListener('kai-card', (e) => {
-    if (e.detail.kind === 'error') console.warn('form error:', e.detail.message);
-  });
-</script>`,
-        language: 'html',
-      },
-    },
-  },
-};

package/src/elements/image.stories.tsx

@@ -1,71 +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-image': JSX.HTMLAttributes<HTMLElement>;
-    }
-  }
-}
-
-// A small inline SVG, base64-encoded — the same trick the composable example uses.
-const sampleSvg =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><rect width="96" height="96" rx="16" fill="#7c3aed"/><text x="48" y="62" font-size="44" text-anchor="middle" fill="white">★</text></svg>';
-const sampleBase64 = btoa(unescape(encodeURIComponent(sampleSvg)));
-
-/** Render the actual `<kai-image>` custom element with base64 + media-type. */
-function ImageElement() {
-  let el: (HTMLElement & { base64?: string; alt?: string }) | undefined;
-  onMount(() => {
-    if (el) {
-      el.base64 = sampleBase64;
-      el.alt = 'A purple star';
-      el.setAttribute('media-type', 'image/svg+xml');
-    }
-  });
-  return <kai-image ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '16px' }} />;
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-image id="img" media-type="image/png" alt="A chart"></kai-image>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const img = document.getElementById('img');
-  img.base64 = '<...base64 image data...>';
-  // or set raw bytes as a property:
-  // img.bytes = new Uint8Array([...]);
-</script>`;
-
-const meta = {
-  title: 'Components/Image',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-image'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-image', [
-          '`<kai-image>` is the framework-agnostic **web component** that renders a base64 or byte-array image, showing a skeleton fallback while it resolves, isolated in **Shadow DOM**.',
-          '**When to use:** displaying model-generated or in-memory images (without a hosted URL) in a non-Solid app. In SolidJS, use the `Image` primitive directly.',
-          '**Placement:** inside a message bubble, card body, or artifact preview panel; size it via the parent container — the element is `display: inline-block` and the image fills to the parent\'s width.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set `base64` (paired with the `media-type` attribute) or set raw `bytes` as a **property**, and add `alt` text.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** A base64-encoded SVG with a media type and alt text. */
-export const Default: Story = {
-  render: () => <ImageElement />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};

package/src/elements/link-preview.stories.tsx

@@ -1,209 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal, onMount, type JSX } from 'solid-js';
-import './link-preview'; // side effect: registers <kai-link-preview>
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-import type { LinkPreviewData } from '../primitives/link-preview';
-import { configureLinkPreview } from '../primitives/link-preview';
-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-link-preview': JSX.HTMLAttributes<HTMLElement> & {
-        'card-id'?: string;
-        ref?: (el: HTMLElement) => void;
-      };
-    }
-  }
-}
-
-type LinkPreviewEl = HTMLElement & { cardId?: string; data?: LinkPreviewData };
-
-/** A sized box the card sits in (cards expand to their container width). */
-function Frame(props: { children: JSX.Element }) {
-  return <div style={{ width: '100%', 'max-width': '420px' }}>{props.children}</div>;
-}
-
-/** Mounts a <kai-link-preview>, sets `.data`, logs emitted CardEvents under the render. */
-function LinkPreviewDemo(props: { cardId: string; data: LinkPreviewData }) {
-  const [log, setLog] = createSignal<CardEvent[]>([]);
-  let el: LinkPreviewEl | 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-link-preview ref={(e) => (el = e as LinkPreviewEl)} 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 FULL_ENVELOPE = {
-  type: 'link',
-  id: 'card-link-1',
-  title: 'Shared link',
-  data: {
-    url: 'https://example.com/blog/generative-ui',
-    title: 'Generative UI, explained',
-    description:
-      'How agents render typed, themed cards in the chat — across native components and provider iframes.',
-    image: 'https://placehold.co/1200x630/6366f1/ffffff/png?text=Generative+UI',
-    imageAlt: 'Diagram of the card contract',
-    favicon: 'https://example.com/favicon.ico',
-    siteName: 'Example Blog',
-    domain: 'example.com',
-  },
-} satisfies { type: string; id: string; title: string; data: LinkPreviewData };
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-link-preview id="lc"></kai-link-preview>
-
-<script type="module">
-  import '@kitn.ai/ui/elements'; // registers the custom elements
-
-  const lc = document.getElementById('lc');
-  lc.cardId = 'card-link-1';
-  // \`data\` is a JS property (the CardEnvelope \`data\`):
-  lc.data = ${JSON.stringify(FULL_ENVELOPE.data, null, 2).replace(/\n/g, '\n  ')};
-
-  // Cards bubble a composed \`kai-card\` event carrying a typed CardEvent.
-  // kai-link-preview emits: ready (on mount), open (on click), error (invalid/broken url).
-  lc.addEventListener('kai-card', (e) => {
-    const ev = e.detail; // CardEvent
-    if (ev.kind === 'open' && ev.target === 'tab') {
-      window.open(ev.url, '_blank', 'noopener,noreferrer');
-    }
-  });
-</script>`;
-
-const meta = {
-  title: 'Generative UI/Cards/kai-link-preview',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-link-preview'),
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: specDescription('kai-link-preview', [
-        '`<kai-link-preview>` is a themed, accessible **rich link / Open-Graph preview** card for the generative-UI feature. It speaks the **Card Contract**: data down (a `link` `CardEnvelope`), events up (only the `open` verb, plus lifecycle `ready` / failure `error`).',
-        '**Pure by default:** the card renders from the metadata you supply (`title`, `description`, `image`, `favicon`, `siteName`, `domain`) — it **never fetches**. For the bare-`{ url }` case, an app may opt in to a resolver with `configureLinkPreview({ fetchMetadata })` (CORS means OG scraping needs YOUR backend; there is no built-in network call).',
-        '**Interaction:** the whole card is one link target. Activating it (click / Enter / Space) dispatches the bubbling, composed **`kai-card`** event with `{ kind: \'open\', url, target: \'tab\' }` so a host-level listener routes it through `CardPolicy` (which performs the navigation, after scheme validation).',
-        '**Graceful degradation:** a missing/broken image drops the image region (not an error); an invalid url renders a non-clickable "Invalid link" chip and emits one `error`.',
-        'See the **Code** tab for the `CardEnvelope` JSON + HTML wiring.',
-      ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** Full OG metadata — image, site name, title, description. Click the card to see the emitted `open` event. */
-export const FullPreview: Story = {
-  name: 'Full preview',
-  render: () => <LinkPreviewDemo cardId={FULL_ENVELOPE.id} data={FULL_ENVELOPE.data} />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** No image — the card degrades gracefully to the text + domain layout. */
-export const NoImage: Story = {
-  name: 'No image',
-  render: () => (
-    <LinkPreviewDemo
-      cardId="card-link-2"
-      data={{
-        url: 'https://docs.example.com/guide',
-        title: 'API Guide',
-        description: 'Reference for the public endpoints, auth, and rate limits.',
-        siteName: 'Example Docs',
-      }}
-    />
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: JSON.stringify(
-          {
-            type: 'link',
-            id: 'card-link-2',
-            data: {
-              url: 'https://docs.example.com/guide',
-              title: 'API Guide',
-              description: 'Reference for the public endpoints, auth, and rate limits.',
-              siteName: 'Example Docs',
-            },
-          },
-          null,
-          2,
-        ),
-        language: 'json',
-      },
-    },
-  },
-};
-
-/** Bare URL + a configured fetcher — shows the skeleton → merged render path. */
-export const BareUrlWithFetcher: Story = {
-  name: 'Bare URL + fetcher',
-  render: () => {
-    // Demo only: an app would point this at its own backend/proxy.
-    configureLinkPreview({
-      fetchMetadata: async (url) => {
-        await new Promise((r) => setTimeout(r, 900)); // show the skeleton
-        return {
-          title: 'Resolved by your backend',
-          description: `Metadata for ${url} fetched via configureLinkPreview.`,
-          siteName: 'example.com',
-        };
-      },
-    });
-    return <LinkPreviewDemo cardId="card-link-3" data={{ url: 'https://example.com/bare' }} />;
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `import { configureLinkPreview } from '@kitn.ai/ui';
-
-// Opt in once (points at YOUR backend/proxy — there is no built-in network call):
-configureLinkPreview({
-  fetchMetadata: (url) => fetch('/api/og?url=' + encodeURIComponent(url)).then((r) => r.json()),
-});
-
-// Then a bare { url } envelope resolves to a full preview:
-lc.data = { url: 'https://example.com/bare' };`,
-        language: 'ts',
-      },
-    },
-  },
-};
-
-/** Invalid link — a non-clickable error chip; one `error` event is emitted (visible in the log below). */
-export const InvalidLink: Story = {
-  name: 'Invalid link',
-  render: () => <LinkPreviewDemo cardId="card-link-4" data={{ url: 'not-a-valid-url' }} />,
-};

package/src/elements/loader.stories.tsx

@@ -1,88 +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-loader': JSX.HTMLAttributes<HTMLElement> & {
-        variant?: string;
-        size?: string;
-        text?: string;
-      };
-    }
-  }
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-loader variant="dots" size="md"></kai-loader>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-</script>`;
-
-const meta = {
-  title: 'Components/Loader',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-loader'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-loader', [
-          '`<kai-loader>` is the framework-agnostic **web component** for an animated busy indicator — a dozen styles (circular, dots, wave, bars, text-shimmer, …) selected via the `variant` attribute, isolated in **Shadow DOM**.',
-          '**When to use:** showing a small "working" indicator anywhere outside the chat thread (toolbars, buttons, panels). In SolidJS, use the `Loader` primitive directly.',
-          '**Placement:** inline anywhere a busy state is needed — centered inside a button, floated in a toolbar corner, or as a standalone skeleton in an empty panel; it is `display: inline-flex` by default so it follows normal inline flow.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, then set `variant`, `size`, and (for text variants) `text` as plain HTML attributes.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-const VARIANTS = [
-  'circular', 'classic', 'pulse', 'pulse-dot', 'dots', 'typing',
-  'wave', 'bars', 'terminal', 'text-blink', 'text-shimmer', 'loading-dots',
-];
-
-/** The default circular spinner. */
-export const Default: Story = {
-  render: () => (
-    <div style={{ padding: '24px' }}>
-      <kai-loader variant="circular" size="md" />
-    </div>
-  ),
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** Every variant at the medium size, side by side. */
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', 'flex-wrap': 'wrap', gap: '32px', 'align-items': 'center', padding: '24px' }}>
-      {VARIANTS.map((v) => (
-        <div style={{ display: 'flex', 'flex-direction': 'column', 'align-items': 'center', gap: '8px', 'min-width': '90px' }}>
-          <kai-loader variant={v} size="md" text="Loading" />
-          <code style={{ 'font-size': '11px', opacity: 0.6 }}>{v}</code>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-/** The three sizes (`sm` / `md` / `lg`) of the dots variant. */
-export const Sizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '32px', 'align-items': 'center', padding: '24px' }}>
-      {['sm', 'md', 'lg'].map((s) => (
-        <div style={{ display: 'flex', 'flex-direction': 'column', 'align-items': 'center', gap: '8px' }}>
-          <kai-loader variant="dots" size={s} />
-          <code style={{ 'font-size': '11px', opacity: 0.6 }}>{s}</code>
-        </div>
-      ))}
-    </div>
-  ),
-};