@kitnai/chat 0.1.0

package/src/components/model-switcher.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { ModelSwitcher } from './model-switcher';
+
+const multipleModels = [
+  { id: 'claude-sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
+  { id: 'claude-opus', name: 'Claude Opus', provider: 'Anthropic' },
+  { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
+  { id: 'gemini-pro', name: 'Gemini Pro', provider: 'Google' },
+];
+
+const meta = {
+  title: 'Components/ModelSwitcher',
+  component: ModelSwitcher,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'A compact dropdown that shows the active model and lets the user switch between the available **models** (grouped by optional `provider` label).',
+          '**When to use:** when a chat surface offers more than one model. It renders nothing when fewer than two models are provided, so it is safe to mount unconditionally.',
+          '**How to use:** pass the `models` list and the `currentModelId`, then handle `onModelChange` to update your selected-model state.',
+          '**Placement:** the prompt input action bar, a chat header, or a settings/toolbar row near the composer.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    models: {
+      control: 'object',
+      description: 'Selectable models. Each has `id`, `name`, and an optional `provider` label.',
+    },
+    currentModelId: {
+      control: 'text',
+      description: 'The `id` of the currently selected model.',
+    },
+    onModelChange: {
+      action: 'modelChange',
+      description: 'Fired with the chosen model `id` when the user picks a model.',
+      table: { category: 'Events' },
+    },
+    class: {
+      control: 'text',
+      description: 'Extra classes applied to the trigger button.',
+    },
+  },
+  args: {
+    models: multipleModels,
+    currentModelId: 'claude-sonnet',
+    onModelChange: fn(),
+  },
+  render: (args) => <ModelSwitcher {...args} />,
+} satisfies Meta<typeof ModelSwitcher>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { ModelSwitcher } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — tweak the controls to explore the switcher. */
+export const Playground: Story = {
+  ...src(`<ModelSwitcher
+  models={models}
+  currentModelId={modelId()}
+  onModelChange={setModelId}
+/>`),
+};
+
+/** Several models across providers — the dropdown lists them with provider labels. */
+export const MultipleModels: Story = {
+  args: { models: multipleModels, currentModelId: 'claude-sonnet' },
+  ...src(`<ModelSwitcher
+  models={[
+    { id: 'claude-sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
+    { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
+  ]}
+  currentModelId={modelId()}
+  onModelChange={setModelId}
+/>`),
+};
+
+/** A single model — the switcher renders nothing (needs 2+ models). */
+export const SingleModel: Story = {
+  args: {
+    models: [{ id: 'claude-sonnet', name: 'Claude Sonnet' }],
+    currentModelId: 'claude-sonnet',
+  },
+  ...src(`<ModelSwitcher
+  models={[{ id: 'claude-sonnet', name: 'Claude Sonnet' }]}
+  currentModelId="claude-sonnet"
+  onModelChange={setModelId}
+/>`),
+};

package/src/components/model-switcher.tsx

@@ -0,0 +1,36 @@
+import { splitProps, For, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '../ui/dropdown';
+import { Button } from '../ui/button';
+import type { ModelOption } from '../types';
+
+export interface ModelSwitcherProps { models: ModelOption[]; currentModelId: string; onModelChange: (modelId: string) => void; class?: string; }
+
+export function ModelSwitcher(props: ModelSwitcherProps) {
+  const [local] = splitProps(props, ['models', 'currentModelId', 'onModelChange', 'class']);
+  const currentModel = () => local.models.find((m) => m.id === local.currentModelId);
+  return (
+    <Show when={local.models.length > 1}>
+      <Dropdown>
+        <DropdownTrigger as={(triggerProps: any) => (
+          <Button variant="ghost" size="sm" class={cn('gap-1 text-xs text-muted-foreground', local.class)} {...triggerProps}>
+            {currentModel()?.name ?? local.currentModelId}
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+          </Button>
+        )} />
+        <DropdownContent>
+          <For each={local.models}>
+            {(model) => (
+              <DropdownItem onSelect={() => local.onModelChange(model.id)}>
+                <div class="flex flex-col">
+                  <span class={cn('text-sm', model.id === local.currentModelId && 'font-medium text-foreground')}>{model.name}</span>
+                  <Show when={model.provider}><span class="text-xs text-muted-foreground">{model.provider}</span></Show>
+                </div>
+              </DropdownItem>
+            )}
+          </For>
+        </DropdownContent>
+      </Dropdown>
+    </Show>
+  );
+}

package/src/components/prompt-input.stories.tsx

@@ -0,0 +1,223 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { createSignal } from 'solid-js';
+import { PromptInput, PromptInputTextarea, PromptInputActions } from './prompt-input';
+import { Button } from '../ui/button';
+
+const meta = {
+  title: 'Components/PromptInput',
+  component: PromptInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'A composer shell that hosts an auto-resizing `PromptInputTextarea` and a `PromptInputActions` toolbar, with controlled or uncontrolled value, loading, and disabled states.',
+          '**When to use:** as the message input at the bottom of any chat surface, wherever the user types and submits a prompt.',
+          '**How to use:** control text via `value` + `onValueChange` (or leave uncontrolled), wire `onSubmit` (also fired on Enter without Shift), and place your send/stop controls inside `PromptInputActions`. Toggle `isLoading` / `disabled` for in-flight and read-only states.',
+          '**Placement:** pinned at the bottom of the chat column, below the message transcript.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'Controlled text value of the textarea.',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Marks a response as in-flight (e.g. to show a Stop action).',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the textarea and dims the composer.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    maxHeight: {
+      control: 'number',
+      description: 'Max auto-resize height in px (or a CSS length string) before the textarea scrolls.',
+      table: { defaultValue: { summary: '240' } },
+    },
+    onValueChange: {
+      action: 'valueChange',
+      description: 'Fired with the new text whenever the textarea value changes.',
+      table: { category: 'Events' },
+    },
+    onSubmit: {
+      action: 'submit',
+      description: 'Fired on Enter (without Shift), and wherever you call it from an action.',
+      table: { category: 'Events' },
+    },
+    children: {
+      control: false,
+      description: 'Composer contents — usually a textarea plus an actions row.',
+    },
+    class: {
+      control: 'text',
+      description: 'Extra classes for the composer shell.',
+    },
+  },
+  args: {
+    value: '',
+    isLoading: false,
+    disabled: false,
+    maxHeight: 240,
+    onValueChange: fn(),
+    onSubmit: fn(),
+  },
+  render: (args) => (
+    <div class="max-w-xl">
+      <PromptInput {...args}>
+        <PromptInputTextarea placeholder="Ask anything..." />
+        <PromptInputActions>
+          <Button variant="default" size="sm">Send</Button>
+        </PromptInputActions>
+      </PromptInput>
+    </div>
+  ),
+} satisfies Meta<typeof PromptInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { PromptInput, PromptInputTextarea, PromptInputActions, Button } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — toggle loading/disabled and edit the value via controls. */
+export const Playground: Story = {
+  ...src(`<PromptInput value={value()} onValueChange={setValue} onSubmit={send}>
+  <PromptInputTextarea placeholder="Ask anything..." />
+  <PromptInputActions>
+    <Button variant="default" size="sm">Send</Button>
+  </PromptInputActions>
+</PromptInput>`),
+};
+
+/** Empty composer with a Send button disabled until there is text. */
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = createSignal('');
+    return (
+      <div class="max-w-xl">
+        <PromptInput value={value()} onValueChange={setValue}>
+          <PromptInputTextarea placeholder="Ask anything..." />
+          <PromptInputActions>
+            <Button variant="default" size="sm" disabled={!value()}>
+              Send
+            </Button>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+    );
+  },
+  ...src(`<PromptInput value={value()} onValueChange={setValue}>
+  <PromptInputTextarea placeholder="Ask anything..." />
+  <PromptInputActions>
+    <Button variant="default" size="sm" disabled={!value()}>Send</Button>
+  </PromptInputActions>
+</PromptInput>`),
+};
+
+/** Pre-filled with a prompt. */
+export const WithContent: Story = {
+  render: () => {
+    const [value, setValue] = createSignal('Tell me about SolidJS reactive primitives');
+    return (
+      <div class="max-w-xl">
+        <PromptInput value={value()} onValueChange={setValue}>
+          <PromptInputTextarea placeholder="Ask anything..." />
+          <PromptInputActions>
+            <Button variant="default" size="sm">Send</Button>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+    );
+  },
+  ...src(`<PromptInput value={value()} onValueChange={setValue}>
+  <PromptInputTextarea placeholder="Ask anything..." />
+  <PromptInputActions>
+    <Button variant="default" size="sm">Send</Button>
+  </PromptInputActions>
+</PromptInput>`),
+};
+
+/** Read-only composer — `disabled` dims it and blocks input. */
+export const Disabled: Story = {
+  render: () => (
+    <div class="max-w-xl">
+      <PromptInput disabled value="" onValueChange={() => {}}>
+        <PromptInputTextarea placeholder="Chat is disabled..." />
+        <PromptInputActions>
+          <Button variant="default" size="sm" disabled>Send</Button>
+        </PromptInputActions>
+      </PromptInput>
+    </div>
+  ),
+  ...src(`<PromptInput disabled value="" onValueChange={setValue}>
+  <PromptInputTextarea placeholder="Chat is disabled..." />
+  <PromptInputActions>
+    <Button variant="default" size="sm" disabled>Send</Button>
+  </PromptInputActions>
+</PromptInput>`),
+};
+
+/** In-flight — `isLoading` typically pairs with a Stop action. */
+export const Loading: Story = {
+  render: () => (
+    <div class="max-w-xl">
+      <PromptInput isLoading value="" onValueChange={() => {}}>
+        <PromptInputTextarea placeholder="Generating response..." />
+        <PromptInputActions>
+          <Button variant="outline" size="sm">
+            Stop
+          </Button>
+        </PromptInputActions>
+      </PromptInput>
+    </div>
+  ),
+  ...src(`<PromptInput isLoading value={value()} onValueChange={setValue}>
+  <PromptInputTextarea placeholder="Generating response..." />
+  <PromptInputActions>
+    <Button variant="outline" size="sm">Stop</Button>
+  </PromptInputActions>
+</PromptInput>`),
+};
+
+/** A split actions row — a leading icon control and a trailing Send (showcase). */
+export const WithMultipleActions: Story = {
+  render: () => {
+    const [value, setValue] = createSignal('');
+    return (
+      <div class="max-w-xl">
+        <PromptInput value={value()} onValueChange={setValue}>
+          <PromptInputTextarea placeholder="Ask anything..." />
+          <PromptInputActions class="justify-between w-full px-2 pb-1">
+            <div class="flex items-center gap-1">
+              <Button variant="ghost" size="icon-sm">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
+                </svg>
+              </Button>
+            </div>
+            <Button variant="default" size="sm" disabled={!value()}>
+              Send
+            </Button>
+          </PromptInputActions>
+        </PromptInput>
+      </div>
+    );
+  },
+  ...src(`<PromptInput value={value()} onValueChange={setValue}>
+  <PromptInputTextarea placeholder="Ask anything..." />
+  <PromptInputActions class="justify-between w-full px-2 pb-1">
+    <Button variant="ghost" size="icon-sm"><AttachIcon /></Button>
+    <Button variant="default" size="sm" disabled={!value()}>Send</Button>
+  </PromptInputActions>
+</PromptInput>`),
+};

package/src/components/prompt-input.tsx

@@ -0,0 +1,190 @@
+import { type JSX, splitProps, createSignal, createContext, useContext, createEffect, on } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useChatConfig, textClass } from '../primitives/chat-config';
+
+// --- Context ---
+
+interface PromptInputContextType {
+  isLoading: boolean;
+  value: () => string;
+  setValue: (value: string) => void;
+  maxHeight: number | string;
+  onSubmit?: () => void;
+  disabled?: boolean;
+  textareaRef: HTMLTextAreaElement | undefined;
+  setTextareaRef: (el: HTMLTextAreaElement) => void;
+}
+
+const PromptInputContext = createContext<PromptInputContextType>();
+
+function usePromptInput() {
+  const ctx = useContext(PromptInputContext);
+  if (!ctx) throw new Error('PromptInput subcomponents must be used within PromptInput');
+  return ctx;
+}
+
+// --- PromptInput (Root) ---
+
+export interface PromptInputProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  isLoading?: boolean;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  maxHeight?: number | string;
+  onSubmit?: () => void;
+  children: JSX.Element;
+  disabled?: boolean;
+}
+
+function PromptInput(props: PromptInputProps) {
+  const [local, rest] = splitProps(props, [
+    'isLoading', 'value', 'onValueChange', 'maxHeight', 'onSubmit',
+    'children', 'disabled', 'class', 'onClick',
+  ]);
+
+  const [internalValue, setInternalValue] = createSignal(local.value ?? '');
+  let textareaRef: HTMLTextAreaElement | undefined;
+
+  const handleChange = (newValue: string) => {
+    setInternalValue(newValue);
+    local.onValueChange?.(newValue);
+  };
+
+  const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (e) => {
+    if (!local.disabled) textareaRef?.focus();
+    if (typeof local.onClick === 'function') {
+      (local.onClick as (e: MouseEvent & { currentTarget: HTMLDivElement }) => void)(e);
+    }
+  };
+
+  return (
+    <PromptInputContext.Provider
+      value={{
+        isLoading: local.isLoading ?? false,
+        value: () => local.value ?? internalValue(),
+        setValue: local.onValueChange ?? handleChange,
+        maxHeight: local.maxHeight ?? 240,
+        onSubmit: local.onSubmit,
+        disabled: local.disabled,
+        get textareaRef() { return textareaRef; },
+        setTextareaRef: (el) => { textareaRef = el; },
+      }}
+    >
+      <div
+        onClick={handleClick}
+        class={cn(
+          'bg-muted/40 cursor-text rounded-xl p-2 shadow-xs',
+          local.disabled && 'cursor-not-allowed opacity-60',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </PromptInputContext.Provider>
+  );
+}
+
+// --- PromptInputTextarea ---
+
+export interface PromptInputTextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  disableAutosize?: boolean;
+}
+
+function PromptInputTextarea(props: PromptInputTextareaProps) {
+  const [local, rest] = splitProps(props, ['class', 'onKeyDown', 'disableAutosize']);
+  const ctx = usePromptInput();
+  const config = useChatConfig();
+
+  function adjustHeight(el: HTMLTextAreaElement | undefined) {
+    if (!el || local.disableAutosize) return;
+    el.style.height = 'auto';
+    const maxH = ctx.maxHeight;
+    if (typeof maxH === 'number') {
+      el.style.height = `${Math.min(el.scrollHeight, maxH)}px`;
+    } else {
+      el.style.height = `min(${el.scrollHeight}px, ${maxH})`;
+    }
+  }
+
+  function handleRef(el: HTMLTextAreaElement) {
+    ctx.setTextareaRef(el);
+    adjustHeight(el);
+  }
+
+  createEffect(on(
+    () => [ctx.value(), ctx.maxHeight, local.disableAutosize],
+    () => {
+      if (ctx.textareaRef && !local.disableAutosize) {
+        adjustHeight(ctx.textareaRef);
+      }
+    }
+  ));
+
+  function handleInput(e: InputEvent & { currentTarget: HTMLTextAreaElement }) {
+    adjustHeight(e.currentTarget);
+    ctx.setValue(e.currentTarget.value);
+  }
+
+  function handleKeyDown(e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      ctx.onSubmit?.();
+    }
+    if (typeof local.onKeyDown === 'function') {
+      (local.onKeyDown as (e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) => void)(e);
+    }
+  }
+
+  return (
+    <textarea
+      ref={handleRef}
+      value={ctx.value()}
+      onInput={handleInput}
+      onKeyDown={handleKeyDown}
+      class={cn(
+        'text-primary min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
+        textClass(config.proseSize()),
+        local.class
+      )}
+      rows={1}
+      disabled={ctx.disabled}
+      {...rest}
+    />
+  );
+}
+
+// --- PromptInputActions ---
+
+export interface PromptInputActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function PromptInputActions(props: PromptInputActionsProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <div class={cn('flex items-center gap-2', local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+}
+
+// --- PromptInputAction ---
+
+export interface PromptInputActionProps {
+  tooltip?: string;
+  children: JSX.Element;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  class?: string;
+}
+
+function PromptInputAction(props: PromptInputActionProps) {
+  return <>{props.children}</>;
+}
+
+export {
+  PromptInput,
+  PromptInputTextarea,
+  PromptInputActions,
+  PromptInputAction,
+  usePromptInput,
+};

package/src/components/prompt-suggestion.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { PromptSuggestion } from './prompt-suggestion';
+
+const meta = {
+  title: 'Components/PromptSuggestion',
+  component: PromptSuggestion,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A clickable suggestion chip built on `Button` — renders as a rounded pill, a full-width list row (`block`), or a search-style row that highlights a matching substring (`highlight`).',
+          '**When to use:** offer the user ready-made prompts to send — empty-state starter questions, follow-up suggestions, or a filtered list of matching prompts as they type.',
+          '**How to use:** pass the prompt text as children and wire `onClick` to submit it. Use `block` for stacked, left-aligned list rows; pass `highlight` to emphasize a matched substring (forces list-row layout). Override `variant`/`size` to restyle.',
+          '**Placement:** chat empty states, below the prompt input as follow-ups, or in a suggestion dropdown.',
+        ].join('\n\n'),
+      },
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Suggestion content — the prompt text (or an element).',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'ghost', 'outline'],
+      description: 'Button visual emphasis. Defaults vary by mode (`outline` pill, `ghost` highlight).',
+      table: { defaultValue: { summary: 'outline' } },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'icon', 'icon-sm'],
+      description: 'Button size preset. Defaults vary by mode.',
+      table: { defaultValue: { summary: 'lg' } },
+    },
+    highlight: {
+      control: 'text',
+      description: 'Substring to emphasize within the text. When set, renders as a list row with the match highlighted.',
+    },
+    block: {
+      control: 'boolean',
+      description: 'Render as a full-width, left-aligned list row that wraps long text instead of a pill. Ignored in highlight mode.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    onClick: {
+      action: 'click',
+      description: 'Fired when the suggestion is clicked.',
+      table: { category: 'Events' },
+    },
+  },
+  args: {
+    children: 'Tell me about TypeScript',
+    variant: 'outline',
+    block: false,
+    onClick: fn(),
+  },
+  render: (args) => <PromptSuggestion {...args} />,
+} satisfies Meta<typeof PromptSuggestion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { PromptSuggestion } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — tweak the controls to explore every mode. */
+export const Playground: Story = {
+  ...src(`<PromptSuggestion onClick={() => send('Tell me about TypeScript')}>
+  Tell me about TypeScript
+</PromptSuggestion>`),
+};
+
+export const WithHighlight: Story = {
+  args: { highlight: 'TypeScript', children: 'Tell me about TypeScript generics' },
+  ...src(`<PromptSuggestion highlight="TypeScript">
+  Tell me about TypeScript generics
+</PromptSuggestion>`),
+};
+
+export const Block: Story = {
+  name: 'Block (list idiom)',
+  args: { block: true, children: 'What does being a Catalyst mean for how I work with others?' },
+  ...src(`<PromptSuggestion block>
+  What does being a Catalyst mean for how I work with others?
+</PromptSuggestion>`),
+};
+
+/** A row of pill suggestions (showcase — not driven by controls). */
+export const MultipleSuggestions: Story = {
+  render: () => (
+    <div class="flex flex-wrap gap-2">
+      <PromptSuggestion>What is SolidJS?</PromptSuggestion>
+      <PromptSuggestion>Explain reactive signals</PromptSuggestion>
+      <PromptSuggestion>Compare SolidJS vs React</PromptSuggestion>
+      <PromptSuggestion>Best practices for state management</PromptSuggestion>
+    </div>
+  ),
+  ...src(`<div class="flex flex-wrap gap-2">
+  <PromptSuggestion>What is SolidJS?</PromptSuggestion>
+  <PromptSuggestion>Explain reactive signals</PromptSuggestion>
+  <PromptSuggestion>Compare SolidJS vs React</PromptSuggestion>
+  <PromptSuggestion>Best practices for state management</PromptSuggestion>
+</div>`),
+};
+
+/** Filtered list with a highlighted match (showcase). */
+export const WithHighlightedSearch: Story = {
+  render: () => (
+    <div class="w-72 space-y-1">
+      <PromptSuggestion highlight="solid">How does SolidJS handle reactivity?</PromptSuggestion>
+      <PromptSuggestion highlight="solid">What makes SolidJS fast?</PromptSuggestion>
+      <PromptSuggestion highlight="solid">SolidJS vs Svelte comparison</PromptSuggestion>
+    </div>
+  ),
+  ...src(`<div class="w-72 space-y-1">
+  <PromptSuggestion highlight="solid">How does SolidJS handle reactivity?</PromptSuggestion>
+  <PromptSuggestion highlight="solid">What makes SolidJS fast?</PromptSuggestion>
+  <PromptSuggestion highlight="solid">SolidJS vs Svelte comparison</PromptSuggestion>
+</div>`),
+};
+
+/** Stacked, full-width list rows (showcase). */
+export const BlockList: Story = {
+  name: 'Block list',
+  render: () => (
+    <div class="w-72 flex flex-col gap-1">
+      <PromptSuggestion block>What does being a Catalyst mean for how I work with others?</PromptSuggestion>
+      <PromptSuggestion block>How do my Dominance and Influence styles play off each other?</PromptSuggestion>
+      <PromptSuggestion block>Where might my lower Conscientiousness trip me up?</PromptSuggestion>
+    </div>
+  ),
+  ...src(`<div class="w-72 flex flex-col gap-1">
+  <PromptSuggestion block>What does being a Catalyst mean for how I work with others?</PromptSuggestion>
+  <PromptSuggestion block>How do my Dominance and Influence styles play off each other?</PromptSuggestion>
+  <PromptSuggestion block>Where might my lower Conscientiousness trip me up?</PromptSuggestion>
+</div>`),
+};