@kitn.ai/ui 0.15.0 → 0.16.0

package/src/elements/register.ts

@@ -1,55 +1,21 @@
 // Single entry that registers all kitn custom elements. Importing this file
-// (or the built bundle) defines the elements as a side effect.
-import './conversation-list';
-import './prompt-input';
-import './chat';
-import './chat-workspace';
-// Composable leaf elements (spike — see docs/handoff + examples/composable)
-import './thinking-bar';
-import './model-switcher';
-import './attachments';
-// Phase 1 — message-rendering core
-import './message';
-import './markdown';
-import './code-block';
-import './reasoning';
-import './tool';
-// Phase 2 — header / meta
-import './context-meter';
-import './feedback-bar';
-import './chat-scope-picker';
-// Phase 3 — input ecosystem
-// (NB: SlashCommand is context-bound to PromptInput — it observes the input
-//  value via usePromptInput() — so it is NOT a standalone element. It will fold
-//  into <kai-prompt-input> as a `slash-commands` property in a later pass.)
-import './prompt-suggestions';
-import './file-upload';
-import './voice-input';
-// Phase 4 — indicators & leaves
-import './loader';
-import './text-shimmer';
-import './image';
-import './checkpoint';
-import './message-skills';
-import './source';
-import './response-stream';
-import './empty';
-import './chain-of-thought';
-import './resizable';
-import './file-tree';
-import './artifact';
-import './scroll-button';
-import './popover';
-import './switch';
-// Generative-UI cards (Card Contract)
-import './card';
-import './form';
-import './link-preview';
-import './embed';
-import './confirm-card';
-import './tasks';
-import './choice';
-import './cards';
+// (or the built bundle) defines the elements as a side effect — but ONLY in a
+// browser/DOM context.
+//
+// SSR-safe: the kai-* elements bundle Solid's client runtime, which touches
+// `window` at module-eval (delegateEvents(events, doc = window.document)). With
+// no `window`, a static import would throw. So the actual component registration
+// lives in ./register-impl and is loaded behind a browser check + dynamic
+// import() — static ESM imports hoist + evaluate unconditionally, so a bare `if`
+// cannot gate them; a dynamic import() can. On the server this module is inert
+// (no DOM → no registration → no throw); in the browser it registers as before.
+//
+// Registration is async (a microtask after this module loads). Consumers that
+// need the upgraded element (e.g. the React runtime) guard with
+// customElements.whenDefined(), which resolves once the impl chunk has run.
+if (typeof window !== 'undefined' && typeof customElements !== 'undefined') {
+  void import('./register-impl');
+}
 
 export type { ChatMessage, ChatMessageAction } from './chat-types';
 export { configureCodeHighlighting, isCodeHighlightingEnabled } from '../primitives/highlighter';

package/theme.css

@@ -3,8 +3,10 @@
    utilities, and the .chat-markdown styles. Contains NO global base/reset rules,
    so importing it restyles nothing on its own — a host opts in via the kit's
    components + classes. Rebrand by overriding the --color-* values (optionally
-   scoped to a subtree). */
-@import "tw-animate-css";
+   scoped to a subtree).
+   NOTE: This file is Tailwind-v4 source (requires tailwindcss as a peer). For
+   bundler-based apps that don't use Tailwind, import @kitn.ai/ui/theme.tokens.css
+   instead — it is plain compiled CSS with no toolchain requirements. */
 
 @custom-variant dark (&:is(.dark *));
 

package/src/components/artifact.stories.tsx

@@ -1,138 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal } from 'solid-js';
-import { Artifact, type ArtifactFile, type ArtifactTab } from './artifact';
-import { componentDescription } from '../stories/docs/element-controls';
-
-// Storybook serves examples/artifact-fixtures at /artifact-fixtures.
-const BASE = new URL('artifact-fixtures', document.baseURI).href;
-
-const FILES: ArtifactFile[] = [
-  {
-    path: 'index.html',
-    url: `${BASE}/index.html`,
-    type: 'html',
-    language: 'html',
-    code: `<!DOCTYPE html>\n<html lang="en">\n  <head><link rel="stylesheet" href="css/site.css" /></head>\n  <body><h1>Starboard</h1><a href="about.html">About</a></body>\n</html>`,
-  },
-  {
-    path: 'about.html',
-    url: `${BASE}/about.html`,
-    type: 'html',
-    language: 'html',
-    code: `<!DOCTYPE html>\n<html lang="en">\n  <body data-page="about"><h1>About</h1><a href="index.html">Home</a></body>\n</html>`,
-  },
-  {
-    path: 'css/site.css',
-    url: `${BASE}/css/site.css`,
-    type: 'other',
-    language: 'css',
-    code: `:root { --accent: #6ea8fe; }\nbody { font-family: system-ui, sans-serif; }`,
-  },
-  { path: 'assets/logo.svg', url: `${BASE}/assets/logo.svg`, type: 'image' },
-  { path: 'assets/report.pdf', url: `${BASE}/assets/report.pdf`, type: 'pdf' },
-];
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/Artifact',
-  component: Artifact,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A framed, switchable **generated-artifact viewer** — the "canvas / artifacts" pattern. A sandboxed `<iframe>` with a functional nav toolbar (back · forward · reload · home + editable path field) and a **Preview | Code** toggle; the Code tab shows a `FileTree` + the active file source via `CodeBlock`.',
-        '**When to use:** to show an AI-generated artifact your backend hosts (page, doc, image, PDF) beside the conversation. The component frames; your backend serves — so relative links, back/forward and multi-format work natively.',
-        '**How to use:** set `src` to the hosted URL and `files` (`{ path, url?, code?, language?, type? }[]`) for the Code tree. The iframe `sandbox` defaults to `allow-scripts allow-forms` (not `allow-same-origin`). Handle `onNavigate(url)`, `onTabChange(tab)`, `onFileSelect(path)`.',
-        '**Placement:** the preview/canvas panel of a chat shell (e.g. `list | chat | artifact`). It **fills** its container — give the parent a height.',
-      ]),
-    },
-  },
-  argTypes: {
-    files: { control: false },
-    src: { control: 'text' },
-    tab: { control: 'select', options: ['preview', 'code'] },
-    sandbox: { control: 'text' },
-  },
-  args: { src: `${BASE}/index.html`, files: FILES, tab: 'preview' as ArtifactTab },
-  render: (args) => (
-    <div class="h-[520px] w-full max-w-[900px]">
-      <Artifact
-        src={args.src}
-        files={args.files}
-        tab={args.tab}
-        sandbox={args.sandbox}
-        iframeTitle="Starboard artifact preview"
-      />
-    </div>
-  ),
-} satisfies Meta<typeof Artifact>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Artifact } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-export const Playground: Story = {
-  ...src(`<Artifact src={src} files={files} tab="preview" />`),
-};
-
-export const CodeTab: Story = {
-  name: 'Code tab',
-  args: { tab: 'code' as ArtifactTab },
-  render: (args: { src?: string; files: ArtifactFile[] }) => (
-    <div class="h-[520px] w-full max-w-[900px]">
-      <Artifact src={args.src} files={args.files} tab="code" activeFile="index.html" iframeTitle="Starboard artifact preview" />
-    </div>
-  ),
-  ...src(`<Artifact src={src} files={files} tab="code" activeFile="index.html" />`),
-};
-
-/** Controlled — observe the emitted nav model. */
-export const Controlled: Story = {
-  render: () => {
-    const [log, setLog] = createSignal<string[]>([]);
-    const push = (s: string) => setLog((l) => [s, ...l].slice(0, 6));
-    return (
-      <div class="flex flex-col gap-2">
-        <div class="h-[420px] w-full max-w-[900px]">
-          <Artifact
-            src={`${BASE}/index.html`}
-            files={FILES}
-            iframeTitle="Starboard artifact preview"
-            onNavigate={(url) => push(`navigate → ${url}`)}
-            onTabChange={(t) => push(`kai-tab-change → ${t}`)}
-            onFileSelect={(p) => push(`kai-file-select → ${p}`)}
-          />
-        </div>
-        <pre class="m-0 min-h-24 max-w-[900px] rounded-lg bg-muted px-3 py-2.5 text-xs text-muted-foreground">
-          {log().length ? log().join('\n') : '(navigate the preview / switch tabs / pick a file…)'}
-        </pre>
-      </div>
-    );
-  },
-  ...src(`<Artifact src={src} files={files}
-  onNavigate={(url) => …} onTabChange={(t) => …} onFileSelect={(p) => …} />`),
-};
-
-/** PDFs render inline via pdf.js (loaded on demand from a CDN). */
-export const PdfPreview: Story = {
-  name: 'PDF (inline)',
-  render: () => (
-    <div class="h-[520px] w-full max-w-[900px]">
-      <Artifact src={`${BASE}/assets/report.pdf`} files={FILES} />
-    </div>
-  ),
-};
-
-/** Fallback card when inline rendering can't work (here the src 404s). */
-export const PdfFallback: Story = {
-  name: 'PDF (fallback card)',
-  render: () => (
-    <div class="h-[520px] w-full max-w-[900px]">
-      <Artifact src={`${BASE}/assets/does-not-exist.pdf`} />
-    </div>
-  ),
-};

package/src/components/attachments.stories.tsx

@@ -1,303 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal, For } from 'solid-js';
-import {
-  Attachments,
-  Attachment,
-  AttachmentPreview,
-  AttachmentInfo,
-  AttachmentRemove,
-  AttachmentHoverCard,
-  AttachmentHoverCardTrigger,
-  AttachmentHoverCardContent,
-  AttachmentEmpty,
-} from './attachments';
-import type { AttachmentData } from './attachments';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const sampleAttachments: AttachmentData[] = [
-  {
-    id: '1',
-    type: 'file',
-    filename: 'mountain-landscape.jpg',
-    mediaType: 'image/jpeg',
-    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
-  },
-  {
-    id: '2',
-    type: 'file',
-    filename: 'sunset-beach.png',
-    mediaType: 'image/png',
-    url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=400&fit=crop',
-  },
-  {
-    id: '3',
-    type: 'file',
-    filename: 'architecture-report.pdf',
-    mediaType: 'application/pdf',
-  },
-  {
-    id: '4',
-    type: 'file',
-    filename: 'demo-recording.mp4',
-    mediaType: 'video/mp4',
-  },
-  {
-    id: '5',
-    type: 'file',
-    filename: 'podcast-episode.mp3',
-    mediaType: 'audio/mpeg',
-  },
-  {
-    id: '6',
-    type: 'source-document',
-    filename: 'SolidJS Documentation',
-    title: 'SolidJS Reactivity Guide',
-    url: 'https://solidjs.com/docs',
-  },
-];
-
-const meta = {
-  title: 'Solid (Advanced)/Elements/Attachments',
-  component: Attachments,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A composable container for displaying file and source-document attachments as thumbnails, inline chips, or a vertical list. Built from `Attachments` + per-item `Attachment` with `AttachmentPreview`, `AttachmentInfo`, and `AttachmentRemove` parts.',
-        '**When to use:** to show files a user attached to a prompt, or documents/sources referenced by a message. Choose `grid` for thumbnails, `inline` for compact chips, `list` for a detailed rows view.',
-        '**How to use:** set `variant` on `Attachments`, then map your data to `Attachment` (passing each item via `data` and an `onRemove` handler) and compose the preview/info/remove parts inside.',
-        '**Placement:** prompt input area (pending uploads), message bodies (attached or cited files), and document panels.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['grid', 'inline', 'list'],
-      description: 'Layout of the attachment items.',
-      table: { defaultValue: { summary: 'grid' } },
-    },
-    children: {
-      control: false,
-      description: 'The `Attachment` items to render inside the container.',
-    },
-    class: {
-      control: 'text',
-      description: 'Extra classes for the container element.',
-    },
-  },
-  args: {
-    variant: 'grid',
-  },
-  render: (args) => {
-    const [items, setItems] = createSignal([...sampleAttachments]);
-    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
-    return (
-      <Attachments {...args}>
-        <For each={items()}>
-          {(item) => (
-            <Attachment data={item} onRemove={() => remove(item.id)}>
-              <AttachmentPreview />
-              <AttachmentInfo />
-              <AttachmentRemove />
-            </Attachment>
-          )}
-        </For>
-      </Attachments>
-    );
-  },
-} satisfies Meta<typeof Attachments>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import {
-  Attachments, Attachment, AttachmentPreview, AttachmentInfo, AttachmentRemove,
-} from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — switch `variant` to compare grid / inline / list. */
-export const Playground: Story = {
-  ...src(`<Attachments variant="grid">
-  <For each={items()}>
-    {(item) => (
-      <Attachment data={item} onRemove={() => remove(item.id)}>
-        <AttachmentPreview />
-        <AttachmentInfo />
-        <AttachmentRemove />
-      </Attachment>
-    )}
-  </For>
-</Attachments>`),
-};
-
-export const Grid: Story = {
-  render: () => {
-    const [items, setItems] = createSignal([...sampleAttachments]);
-    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
-    return (
-      <div class="space-y-4">
-        <Attachments variant="grid">
-          <For each={items()}>
-            {(item) => (
-              <Attachment data={item} onRemove={() => remove(item.id)}>
-                <AttachmentPreview />
-                <AttachmentRemove />
-              </Attachment>
-            )}
-          </For>
-        </Attachments>
-        <button
-          class="text-sm text-muted-foreground hover:text-foreground transition-colors"
-          onClick={() => setItems([...sampleAttachments])}
-        >
-          Reset
-        </button>
-      </div>
-    );
-  },
-  ...src(`<Attachments variant="grid">
-  <For each={items()}>
-    {(item) => (
-      <Attachment data={item} onRemove={() => remove(item.id)}>
-        <AttachmentPreview />
-        <AttachmentRemove />
-      </Attachment>
-    )}
-  </For>
-</Attachments>`),
-};
-
-export const Inline: Story = {
-  render: () => {
-    const [items, setItems] = createSignal([...sampleAttachments]);
-    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
-    return (
-      <div class="space-y-4">
-        <Attachments variant="inline">
-          <For each={items()}>
-            {(item) => (
-              <Attachment data={item} onRemove={() => remove(item.id)}>
-                <AttachmentPreview />
-                <AttachmentInfo />
-                <AttachmentRemove />
-              </Attachment>
-            )}
-          </For>
-        </Attachments>
-        <button
-          class="text-sm text-muted-foreground hover:text-foreground transition-colors"
-          onClick={() => setItems([...sampleAttachments])}
-        >
-          Reset
-        </button>
-      </div>
-    );
-  },
-  ...src(`<Attachments variant="inline">
-  <For each={items()}>
-    {(item) => (
-      <Attachment data={item} onRemove={() => remove(item.id)}>
-        <AttachmentPreview />
-        <AttachmentInfo />
-        <AttachmentRemove />
-      </Attachment>
-    )}
-  </For>
-</Attachments>`),
-};
-
-export const List: Story = {
-  render: () => {
-    const [items, setItems] = createSignal([...sampleAttachments]);
-    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
-    return (
-      <div class="w-96 space-y-4">
-        <Attachments variant="list">
-          <For each={items()}>
-            {(item) => (
-              <Attachment data={item} onRemove={() => remove(item.id)}>
-                <AttachmentPreview />
-                <AttachmentInfo showMediaType />
-                <AttachmentRemove />
-              </Attachment>
-            )}
-          </For>
-        </Attachments>
-        <button
-          class="text-sm text-muted-foreground hover:text-foreground transition-colors"
-          onClick={() => setItems([...sampleAttachments])}
-        >
-          Reset
-        </button>
-      </div>
-    );
-  },
-  ...src(`<Attachments variant="list">
-  <For each={items()}>
-    {(item) => (
-      <Attachment data={item} onRemove={() => remove(item.id)}>
-        <AttachmentPreview />
-        <AttachmentInfo showMediaType />
-        <AttachmentRemove />
-      </Attachment>
-    )}
-  </For>
-</Attachments>`),
-};
-
-export const WithHoverCard: Story = {
-  render: () => (
-    <Attachments variant="grid">
-      <AttachmentHoverCard>
-        <AttachmentHoverCardTrigger>
-          <Attachment
-            data={{
-              id: '1',
-              type: 'file',
-              filename: 'mountain-landscape.jpg',
-              mediaType: 'image/jpeg',
-              url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
-            }}
-          >
-            <AttachmentPreview />
-          </Attachment>
-        </AttachmentHoverCardTrigger>
-        <AttachmentHoverCardContent>
-          <img
-            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
-            alt="Mountain landscape"
-            class="max-w-xs rounded"
-          />
-        </AttachmentHoverCardContent>
-      </AttachmentHoverCard>
-    </Attachments>
-  ),
-  ...src(`<Attachments variant="grid">
-  <AttachmentHoverCard>
-    <AttachmentHoverCardTrigger>
-      <Attachment data={item}>
-        <AttachmentPreview />
-      </Attachment>
-    </AttachmentHoverCardTrigger>
-    <AttachmentHoverCardContent>
-      <img src={item.url} alt={item.filename} class="max-w-xs rounded" />
-    </AttachmentHoverCardContent>
-  </AttachmentHoverCard>
-</Attachments>`),
-};
-
-export const Empty: Story = {
-  render: () => (
-    <Attachments variant="grid">
-      <AttachmentEmpty />
-    </Attachments>
-  ),
-  ...src(`<Attachments variant="grid">
-  <AttachmentEmpty />
-</Attachments>`),
-};

package/src/components/attachments.test.tsx

@@ -1,64 +0,0 @@
-/**
- * Unit tests for the Attachments SolidJS primitives.
- *
- * Covers two bugs found while dogfooding `kai-attachments` in the docs site:
- *   1. The per-item layout was not reactive to a post-render variant change —
- *      `Attachment` destructured `variant` from context, capturing it once.
- *   2. `AttachmentHoverCardTrigger` could not carry layout, so the hover trigger
- *      collapsed inline/list rows (it forwards a class now).
- */
-import { describe, it, expect, afterEach } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup } from '@solidjs/testing-library';
-import { createSignal } from 'solid-js';
-import {
-  Attachments,
-  Attachment,
-  AttachmentHoverCard,
-  AttachmentHoverCardTrigger,
-  type AttachmentData,
-  type AttachmentVariant,
-} from './attachments';
-
-afterEach(cleanup);
-
-const fileData: AttachmentData = {
-  id: '1',
-  type: 'file',
-  filename: 'spec.pdf',
-  mediaType: 'application/pdf',
-};
-
-describe('Attachment item layout', () => {
-  it('re-lays out items when the container variant changes after first render', () => {
-    const [variant, setVariant] = createSignal<AttachmentVariant>('grid');
-    const { container } = render(() => (
-      <Attachments variant={variant()}>
-        <Attachment data={fileData} />
-      </Attachments>
-    ));
-
-    const item = () => container.querySelector('.group') as HTMLElement;
-    expect(item().className).toMatch(/size-24/); // grid tile
-
-    setVariant('inline');
-    expect(item().className).not.toMatch(/size-24/); // no longer a grid tile
-    expect(item().className).toMatch(/\bh-8\b/); // inline chip height
-  });
-});
-
-describe('AttachmentHoverCardTrigger', () => {
-  it('forwards a class to the underlying hover trigger so it can carry the row layout', () => {
-    const { container } = render(() => (
-      <AttachmentHoverCard>
-        <AttachmentHoverCardTrigger class="flex items-center gap-1.5">
-          <span>preview</span>
-        </AttachmentHoverCardTrigger>
-      </AttachmentHoverCard>
-    ));
-
-    const trigger = container.querySelector('span');
-    expect(trigger).toBeTruthy();
-    expect(trigger!.className).toContain('flex');
-  });
-});