@kitn.ai/ui 0.14.1

package/src/components/conversation-list.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { ConversationList, type ConversationListProps } from './conversation-list';
+import type { ConversationSummary, ConversationGroup } from '../types';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const scope = { type: 'document' as const };
+
+const groups: ConversationGroup[] = [
+  { id: 'today', name: 'Today', sortOrder: 0, createdAt: '2026-04-10' },
+  { id: 'yesterday', name: 'Yesterday', sortOrder: 1, createdAt: '2026-04-09' },
+  { id: 'week', name: 'This Week', sortOrder: 2, createdAt: '2026-04-07' },
+];
+
+const conversations: ConversationSummary[] = [
+  { id: '1', title: 'SolidJS signals explained', groupId: 'today', scope, messageCount: 5, lastMessageAt: '2026-04-10T14:00:00Z', updatedAt: '2026-04-10T14:00:00Z' },
+  { id: '2', title: 'TypeScript generics deep dive', groupId: 'today', scope, messageCount: 12, lastMessageAt: '2026-04-10T10:00:00Z', updatedAt: '2026-04-10T10:00:00Z' },
+  { id: '3', title: 'CSS Grid vs Flexbox', groupId: 'yesterday', scope, messageCount: 8, lastMessageAt: '2026-04-09T16:00:00Z', updatedAt: '2026-04-09T16:00:00Z' },
+  { id: '4', title: 'Setting up Storybook', groupId: 'yesterday', scope, messageCount: 3, lastMessageAt: '2026-04-09T11:00:00Z', updatedAt: '2026-04-09T11:00:00Z' },
+  { id: '5', title: 'Vite configuration tips', groupId: 'week', scope, messageCount: 7, lastMessageAt: '2026-04-08T09:00:00Z', updatedAt: '2026-04-08T09:00:00Z' },
+  { id: '6', title: 'Chrome extension manifest v3', groupId: 'week', scope, messageCount: 15, lastMessageAt: '2026-04-07T14:00:00Z', updatedAt: '2026-04-07T14:00:00Z' },
+];
+
+/**
+ * The conversation/chat history sidebar: a header with new-chat action, a search
+ * box, and grouped, collapsible lists of `ConversationItem`s.
+ */
+const meta = {
+  title: 'Solid (Advanced)/Elements/ConversationList',
+  component: ConversationList,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        'A full chat-history sidebar: header (sidebar toggle + new chat), a built-in search box that filters by title, and conversations bucketed into collapsible, count-badged groups.',
+        '**When to use:** as the left-hand navigation for a chat app — browsing, searching, and switching between past conversations.',
+        '**How to use:** pass `groups` and `conversations` arrays, the `activeId`, and handlers `onSelect(id)` / `onNewChat()` (plus optional `onToggleSidebar()`). Give it a sized, overflow-hidden container.',
+        '**Placement:** the persistent left sidebar of a chat layout.',
+      ]),
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    groups: {
+      control: 'object',
+      description: 'Conversation groups (buckets) to render as collapsible sections.',
+    },
+    conversations: {
+      control: 'object',
+      description: 'Conversation summaries; placed into groups by their `groupId`.',
+    },
+    activeId: {
+      control: 'text',
+      description: 'Id of the currently selected conversation.',
+    },
+    onSelect: {
+      action: 'select',
+      description: 'Fired with the conversation id when a row is clicked.',
+      table: { category: 'Events' },
+    },
+    onNewChat: {
+      action: 'newChat',
+      description: 'Fired when the new-chat (+) button is clicked.',
+      table: { category: 'Events' },
+    },
+    onToggleSidebar: {
+      action: 'toggleSidebar',
+      description: 'Fired when the sidebar-toggle (menu) button is clicked.',
+      table: { category: 'Events' },
+    },
+  },
+  args: {
+    groups,
+    conversations,
+    activeId: '1',
+    onSelect: fn(),
+    onNewChat: fn(),
+    onToggleSidebar: fn(),
+  },
+  render: (args) => (
+    <div class="h-[500px] w-72 border border-border rounded-lg overflow-hidden">
+      <ConversationList {...args} />
+    </div>
+  ),
+} satisfies Meta<typeof ConversationList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { ConversationList } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+const usage = `<ConversationList
+  groups={groups}
+  conversations={conversations}
+  activeId={activeId()}
+  onSelect={setActiveId}
+  onNewChat={() => {}}
+/>`;
+
+/** Interactive playground — edit the groups/conversations arrays and active id via controls. */
+export const Playground: Story = {
+  ...src(usage),
+};
+
+/** Conversations bucketed into Today / Yesterday / This Week. */
+export const WithGroups: Story = {
+  ...src(usage),
+};
+
+/** No conversations — the list renders just its header and search box. */
+export const EmptyState: Story = {
+  args: { groups: [], conversations: [], activeId: undefined },
+  render: (args: ConversationListProps) => (
+    <div class="h-[400px] w-72 border border-border rounded-lg overflow-hidden">
+      <ConversationList {...args} />
+    </div>
+  ),
+  ...src(`<ConversationList
+  groups={[]}
+  conversations={[]}
+  onSelect={() => {}}
+  onNewChat={() => {}}
+/>`),
+};
+
+/** Type in the built-in search box to filter conversations by title. */
+export const WithSearch: Story = {
+  ...src(usage),
+};

package/src/components/conversation-list.tsx

@@ -0,0 +1,101 @@
+import { splitProps, For, Show, createSignal, createMemo } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../ui/collapsible';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { ScrollArea } from '../ui/scroll-area';
+import { ConversationItem } from './conversation-item';
+import type { ConversationSummary, ConversationGroup } from '../types';
+
+export interface ConversationListProps {
+  groups: ConversationGroup[];
+  conversations: ConversationSummary[];
+  activeId?: string;
+  onSelect: (id: string) => void;
+  onNewChat: () => void;
+  onToggleSidebar?: () => void;
+  class?: string;
+}
+
+export function ConversationList(props: ConversationListProps) {
+  const [local] = splitProps(props, ['groups', 'conversations', 'activeId', 'onSelect', 'onNewChat', 'onToggleSidebar', 'class']);
+  const [searchQuery, setSearchQuery] = createSignal('');
+
+  const filteredConversations = createMemo(() => {
+    const q = searchQuery().toLowerCase();
+    if (!q) return local.conversations;
+    return local.conversations.filter((c) => c.title.toLowerCase().includes(q));
+  });
+
+  const groupedConversations = createMemo(() => {
+    const grouped = new Map<string | undefined, ConversationSummary[]>();
+    for (const conv of filteredConversations()) {
+      const key = conv.groupId;
+      if (!grouped.has(key)) grouped.set(key, []);
+      grouped.get(key)!.push(conv);
+    }
+    return grouped;
+  });
+
+  const ungrouped = createMemo(() => groupedConversations().get(undefined) ?? []);
+
+  return (
+    <div class={cn('flex flex-col h-full bg-sidebar', local.class)}>
+      <div class="flex items-center justify-between p-3 pb-2">
+        <div class="flex items-center gap-2">
+          <Button variant="ghost" size="icon-sm" aria-label="Toggle sidebar" onClick={local.onToggleSidebar}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+          </Button>
+          <span class="text-sm font-semibold text-foreground">Chats</span>
+        </div>
+        <Button variant="ghost" size="icon-sm" aria-label="New chat" onClick={local.onNewChat}>
+          <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>
+        </Button>
+      </div>
+      <div class="px-3 pb-2">
+        <div class="flex items-center gap-2 rounded-md bg-muted/40 px-2.5 py-1.5">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <input type="text" value={searchQuery()} onInput={(e) => setSearchQuery(e.currentTarget.value)} placeholder="Search chats..."
+            aria-label="Search chats"
+            class="bg-transparent text-[13px] text-foreground placeholder:text-muted-foreground rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring w-full" />
+        </div>
+      </div>
+      <ScrollArea class="flex-1 px-2">
+        <For each={local.groups}>
+          {(group) => {
+            const convs = createMemo(() => groupedConversations().get(group.id) ?? []);
+            return (
+              <Show when={convs().length > 0}>
+                <GroupSection name={group.name} count={convs().length} conversations={convs()} activeId={local.activeId} onSelect={local.onSelect} />
+              </Show>
+            );
+          }}
+        </For>
+        <Show when={ungrouped().length > 0}>
+          <GroupSection name="Ungrouped" count={ungrouped().length} conversations={ungrouped()} activeId={local.activeId} onSelect={local.onSelect} />
+        </Show>
+      </ScrollArea>
+    </div>
+  );
+}
+
+function GroupSection(props: { name: string; count: number; conversations: ConversationSummary[]; activeId?: string; onSelect: (id: string) => void }) {
+  const [open, setOpen] = createSignal(true);
+  return (
+    <Collapsible open={open()} onOpenChange={setOpen}>
+      <CollapsibleTrigger class="flex items-center gap-1.5 w-full px-1.5 py-1 rounded-md text-[13px] text-muted-foreground font-medium hover:bg-muted/30 transition-colors cursor-pointer mt-1.5">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          class={cn('transition-transform', !open() && '-rotate-90')}><polyline points="6 9 12 15 18 9"/></svg>
+        <span>{props.name}</span>
+        <Badge variant="count" class="ml-auto text-[11px]">{props.count}</Badge>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div class="pl-2 mt-0.5 space-y-0.5">
+          <For each={props.conversations}>
+            {(conv) => <ConversationItem conversation={conv} isActive={conv.id === props.activeId} onSelect={props.onSelect} />}
+          </For>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/components/default-input.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, cleanup, fireEvent } from '@solidjs/testing-library';
+import { createSignal } from 'solid-js';
+import { DefaultPromptInput } from '../elements/default-input';
+
+// jsdom doesn't implement Element.scrollTo; some inner controls may call it.
+if (!Element.prototype.scrollTo) (Element.prototype as unknown as { scrollTo: () => void }).scrollTo = () => {};
+
+afterEach(cleanup);
+
+const noop = () => {};
+
+describe('DefaultPromptInput disabled state', () => {
+  it('renders the textarea and send button as disabled', () => {
+    const { container } = render(() => (
+      <DefaultPromptInput
+        value="hello"
+        disabled
+        onValueChange={noop}
+        onSubmit={noop}
+        onSuggestionClick={noop}
+      />
+    ));
+    const textarea = container.querySelector('textarea');
+    const send = container.querySelector('[data-testid="send"]');
+    expect(textarea).toBeDisabled();
+    expect(send).toBeDisabled();
+  });
+
+  it('does not call onSubmit when the send button is clicked while disabled', () => {
+    const onSubmit = vi.fn();
+    const { container } = render(() => (
+      <DefaultPromptInput
+        value="hello"
+        disabled
+        onValueChange={noop}
+        onSubmit={onSubmit}
+        onSuggestionClick={noop}
+      />
+    ));
+    const send = container.querySelector('[data-testid="send"]') as HTMLButtonElement;
+    fireEvent.click(send);
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('does not call onSubmit when Enter is pressed while disabled', () => {
+    const onSubmit = vi.fn();
+    const { container } = render(() => (
+      <DefaultPromptInput
+        value="hello"
+        disabled
+        onValueChange={noop}
+        onSubmit={onSubmit}
+        onSuggestionClick={noop}
+      />
+    ));
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+    fireEvent.keyDown(textarea, { key: 'Enter' });
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('reactively disables/enables the textarea when `disabled` changes after mount', () => {
+    const [disabled, setDisabled] = createSignal(false);
+    const { container } = render(() => (
+      <DefaultPromptInput
+        value="hi"
+        disabled={disabled()}
+        onValueChange={noop}
+        onSubmit={noop}
+        onSuggestionClick={noop}
+      />
+    ));
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+    expect(textarea).not.toBeDisabled();
+    setDisabled(true);
+    expect(textarea).toBeDisabled(); // fails if PromptInput context captures `disabled` statically
+    setDisabled(false);
+    expect(textarea).not.toBeDisabled();
+  });
+
+  it('still submits via Enter when not disabled (sanity)', () => {
+    const onSubmit = vi.fn();
+    const { container } = render(() => (
+      <DefaultPromptInput
+        value="hello"
+        onValueChange={noop}
+        onSubmit={onSubmit}
+        onSuggestionClick={noop}
+      />
+    ));
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
+    fireEvent.keyDown(textarea, { key: 'Enter' });
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('DefaultPromptInput leading/trailing slots', () => {
+  it('renders a leading and trailing named slot', () => {
+    const { container } = render(() => (
+      <DefaultPromptInput
+        value=""
+        onValueChange={noop}
+        onSubmit={noop}
+        onSuggestionClick={noop}
+      />
+    ));
+    expect(container.querySelector('slot[name="leading"]')).toBeTruthy();
+    expect(container.querySelector('slot[name="trailing"]')).toBeTruthy();
+  });
+});

package/src/components/embed.tsx

@@ -0,0 +1,196 @@
+import {
+  type JSX,
+  splitProps,
+  createSignal,
+  createEffect,
+  createMemo,
+  on,
+  onMount,
+  Show,
+} from 'solid-js';
+import { cn } from '../utils/cn';
+import { Play, Video, ExternalLink, TriangleAlert } from 'lucide-solid';
+import type { CardEvent } from '../primitives/card-contract';
+import {
+  type EmbedCardData,
+  type ResolvedEmbed,
+  resolveEmbed,
+  watchUrl,
+  providerLabel,
+  aspectRatioValue,
+} from '../primitives/embed-providers';
+
+export interface EmbedProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onError'> {
+  /** The card id correlating every emitted event. */
+  cardId: string;
+  /** The embed payload (data-down). */
+  data: EmbedCardData;
+  /** Emit a contract CardEvent up (host routes it). */
+  onEmit?: (event: CardEvent) => void;
+}
+
+/**
+ * `Embed` — a privacy-first lazy media facade. Initial render is a poster + a play
+ * button: NO provider iframe, NO provider JS, NO cookies until the user opts in.
+ * On play it swaps in the provider `<iframe>` (youtube-nocookie / vimeo dnt /
+ * allowlisted generic). A persistent "Open on {provider}" affordance routes the
+ * contract `open` verb so a blocked embed is never a dead end. The only verbs it
+ * emits are lifecycle `ready`, `open`, and failure `error`.
+ */
+export function Embed(props: EmbedProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['cardId', 'data', 'onEmit', 'class']);
+
+  const emit = (event: CardEvent) => local.onEmit?.(event);
+
+  const [playing, setPlaying] = createSignal(false);
+  const [posterBroken, setPosterBroken] = createSignal(false);
+  let playerRegion: HTMLDivElement | undefined;
+
+  // Resolve the provider URL/poster/sandbox; capture a resolution error to render inline.
+  const resolved = createMemo<{ ok: true; value: ResolvedEmbed } | { ok: false; error: string }>(
+    () => {
+      try {
+        return { ok: true, value: resolveEmbed(local.data) };
+      } catch (e) {
+        return { ok: false, error: e instanceof Error ? e.message : String(e) };
+      }
+    },
+  );
+
+  const ratio = createMemo(() => aspectRatioValue(local.data.aspectRatio));
+  const titleText = () => local.data.title ?? 'Embedded video';
+  const poster = createMemo(() =>
+    resolved().ok && !posterBroken() ? (resolved() as { value: ResolvedEmbed }).value.posterUrl : undefined,
+  );
+  const watch = createMemo(() => watchUrl(local.data));
+  const label = () => providerLabel(local.data.provider);
+
+  onMount(() => emit({ kind: 'ready', cardId: local.cardId }));
+
+  // Resolution failure → a single `error` event (defense in depth; the schema allOf
+  // and the origin allowlist should catch most of these earlier).
+  createEffect(
+    on(resolved, (r) => {
+      if (!r.ok) emit({ kind: 'error', cardId: local.cardId, message: r.error });
+    }),
+  );
+
+  // Reset facade state when the payload changes.
+  createEffect(
+    on(
+      () => local.data,
+      () => {
+        setPlaying(false);
+        setPosterBroken(false);
+      },
+      { defer: true },
+    ),
+  );
+
+  const play = () => {
+    if (!resolved().ok) return;
+    setPlaying(true);
+    // Move focus into the player region for SR/keyboard continuity.
+    queueMicrotask(() => playerRegion?.focus());
+  };
+  const onPlayKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      play();
+    }
+  };
+  const openOnProvider = () => {
+    const w = watch();
+    if (w) emit({ kind: 'open', cardId: local.cardId, url: w, target: 'tab' });
+  };
+
+  return (
+    <div
+      class={cn('overflow-hidden rounded-xl border border-border bg-card text-card-foreground', local.class)}
+      {...rest}
+    >
+      <div class="relative w-full bg-black" style={{ 'aspect-ratio': ratio() }}>
+        <Show
+          when={resolved().ok}
+          fallback={
+            <div
+              role="img"
+              aria-label="Can't load this video"
+              class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-muted p-4 text-center text-sm text-muted-foreground"
+            >
+              <TriangleAlert size={28} aria-hidden="true" />
+              <span>Can't load this video</span>
+            </div>
+          }
+        >
+          <Show
+            when={playing()}
+            fallback={
+              <button
+                type="button"
+                aria-label={`Play ${local.data.title ?? 'video'}`}
+                class="group absolute inset-0 flex h-full w-full items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+                onClick={() => play()}
+                onKeyDown={onPlayKeyDown}
+              >
+                {/* Poster (or a neutral placeholder when absent/broken). */}
+                <Show
+                  when={poster()}
+                  fallback={
+                    <div
+                      class="absolute inset-0 bg-gradient-to-br from-zinc-800 to-zinc-950"
+                      aria-hidden="true"
+                    />
+                  }
+                >
+                  <img
+                    src={poster()}
+                    alt={local.data.title ?? ''}
+                    class="absolute inset-0 h-full w-full object-cover"
+                    onError={() => setPosterBroken(true)}
+                  />
+                </Show>
+                <span
+                  class="relative flex h-14 w-14 items-center justify-center rounded-full bg-black/60 text-white shadow-lg transition-transform motion-safe:group-hover:scale-110"
+                  aria-hidden="true"
+                >
+                  <Play size={26} fill="currentColor" />
+                </span>
+              </button>
+            }
+          >
+            <div ref={(el) => (playerRegion = el)} tabindex="-1" class="absolute inset-0 outline-none">
+              <iframe
+                src={(resolved() as { value: ResolvedEmbed }).value.embedUrl}
+                title={titleText()}
+                sandbox={(resolved() as { value: ResolvedEmbed }).value.sandbox}
+                allow={(resolved() as { value: ResolvedEmbed }).value.allow}
+                allowfullscreen
+                class="absolute inset-0 h-full w-full border-0"
+              />
+            </div>
+          </Show>
+        </Show>
+      </div>
+      {/* Footer: title + the always-available "Open on {provider}" fallback affordance. */}
+      <div class="flex items-center justify-between gap-2 px-3 py-2">
+        <span class="flex min-w-0 items-center gap-1.5 text-sm text-foreground">
+          <Video size={14} class="shrink-0 opacity-70" aria-hidden="true" />
+          <span class="truncate">{local.data.title ?? label()}</span>
+        </span>
+        <Show when={watch()}>
+          <button
+            type="button"
+            class="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => openOnProvider()}
+          >
+            Open on {label()}
+            <ExternalLink size={12} aria-hidden="true" />
+          </button>
+        </Show>
+      </div>
+    </div>
+  );
+}
+
+export type { EmbedCardData } from '../primitives/embed-providers';