@kitnai/chat 0.1.0

package/src/elements/kitn-chat.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { onMount } from 'solid-js';
+import './register'; // side effect: registers <kitn-chat>, <kitn-conversation-list>, <kitn-prompt-input>
+import type { ChatMessage } from './chat-types';
+
+// 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 {
+      'kitn-chat': JSX.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
+
+const sampleMessages: ChatMessage[] = [
+  { id: '1', role: 'user', content: 'How do I center a div?' },
+  {
+    id: '2',
+    role: 'assistant',
+    content:
+      'The modern way is a grid:\n\n```css\n.box {\n  display: grid;\n  place-items: center;\n}\n```\n\nThat centers the child on both axes.',
+    actions: ['copy', 'like', 'dislike'],
+  },
+];
+
+/** Live demo of the actual `<kitn-chat>` custom element (Shadow DOM and all). */
+function ChatElement() {
+  let el: (HTMLElement & { messages?: ChatMessage[] }) | undefined;
+  onMount(() => {
+    if (el) el.messages = sampleMessages;
+  });
+  return <kitn-chat ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', height: '560px' }} />;
+}
+
+const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
+<kitn-chat id="chat" style="display:block; height:100vh;"></kitn-chat>
+
+<script type="module">
+  import '@kitnai/chat/elements';   // registers the custom elements
+
+  const chat = document.getElementById('chat');
+  chat.messages = [
+    { id: '1', role: 'user', content: 'How do I center a div?' },
+    { id: '2', role: 'assistant', content: 'Use \`display: grid; place-items: center;\`' },
+  ];
+
+  // events are CustomEvents on the element (they do not bubble)
+  chat.addEventListener('submit', (e) => console.log('user sent:', e.detail.value));
+</script>`;
+
+const SOLID_SNIPPET = `import '@kitnai/chat/elements'; // registers the custom elements
+import { onMount } from 'solid-js';
+import type { ChatMessage } from '@kitnai/chat/elements';
+
+function Chat() {
+  let el: HTMLElement & { messages?: ChatMessage[] };
+  const messages: ChatMessage[] = [
+    { id: '1', role: 'user', content: 'How do I center a div?' },
+    { id: '2', role: 'assistant', content: 'Use \`display: grid; place-items: center;\`' },
+  ];
+  onMount(() => { el.messages = messages; });
+  return (
+    <kitn-chat
+      ref={el}
+      style={{ display: 'block', height: '100vh' }}
+      on:submit={(e) => console.log('user sent:', e.detail.value)}
+    />
+  );
+}`;
+
+const meta = {
+  title: 'Web Components/kitn-chat',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: [
+          '`<kitn-chat>` is the framework-agnostic **web component** version of the chat UI — a complete message thread plus prompt input, isolated in **Shadow DOM** so the host page\'s CSS can\'t leak in and the kit\'s styles can\'t leak out. SolidJS is bundled in, so the host needs nothing.',
+          '**When to use:** dropping a full chat into a non-Solid app (React, Vue, Svelte, plain HTML), or anywhere you want zero style conflicts. If you *are* in SolidJS and want fine-grained control, compose the primitives (`ChatContainer`, `Message`, `PromptInput`) instead.',
+          '**How to use:** register once with `import \'@kitnai/chat/elements\'`, set rich data as JS **properties** (`el.messages = [...]`), and listen for **CustomEvents** (`submit`, `messageaction`, `valuechange`) directly on the element.',
+          '**Placement:** as a top-level panel or full-page surface. Give it an explicit height (e.g. `height: 100vh`).',
+          'See the **Code** tab below for the HTML usage; the *SolidJS* story shows the same element inside a Solid component.',
+        ].join('\n\n'),
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** The element used the plain-HTML / any-framework way. */
+export const Default: Story = {
+  render: () => <ChatElement />,
+  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
+};
+
+/** The same element used inside a SolidJS component (properties via `ref`, events via `on:`). */
+export const InSolidJS: Story = {
+  name: 'In SolidJS',
+  render: () => <ChatElement />,
+  parameters: { docs: { source: { code: SOLID_SNIPPET, language: 'tsx' } } },
+};

package/src/elements/kitn-conversation-list.stories.tsx

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { onMount } from 'solid-js';
+import './register'; // side effect: registers <kitn-chat>, <kitn-conversation-list>, <kitn-prompt-input>
+import type { ConversationGroup, ConversationSummary } from '../types';
+
+// 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 {
+      'kitn-conversation-list': JSX.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
+
+const sampleGroups: ConversationGroup[] = [
+  { id: 'g-work', name: 'Work', sortOrder: 0, createdAt: '2026-06-01T09:00:00.000Z' },
+  { id: 'g-personal', name: 'Personal', sortOrder: 1, createdAt: '2026-06-02T09:00:00.000Z' },
+];
+
+const sampleConversations: ConversationSummary[] = [
+  {
+    id: 'c-1',
+    title: 'Q2 launch plan',
+    groupId: 'g-work',
+    scope: { type: 'collection' },
+    messageCount: 12,
+    lastMessageAt: '2026-06-09T14:20:00.000Z',
+    updatedAt: '2026-06-09T14:20:00.000Z',
+  },
+  {
+    id: 'c-2',
+    title: 'API migration notes',
+    groupId: 'g-work',
+    scope: { type: 'collection' },
+    messageCount: 5,
+    lastMessageAt: '2026-06-08T11:05:00.000Z',
+    updatedAt: '2026-06-08T11:05:00.000Z',
+  },
+  {
+    id: 'c-3',
+    title: 'Weekend trip ideas',
+    groupId: 'g-personal',
+    scope: { type: 'collection' },
+    messageCount: 8,
+    lastMessageAt: '2026-06-07T19:42:00.000Z',
+    updatedAt: '2026-06-07T19:42:00.000Z',
+  },
+  {
+    id: 'c-4',
+    title: 'Untitled chat',
+    scope: { type: 'collection' },
+    messageCount: 1,
+    lastMessageAt: '2026-06-10T08:00:00.000Z',
+    updatedAt: '2026-06-10T08:00:00.000Z',
+  },
+];
+
+/** Live demo of the actual `<kitn-conversation-list>` custom element (Shadow DOM and all). */
+function ConversationListElement() {
+  let el:
+    | (HTMLElement & {
+        groups?: ConversationGroup[];
+        conversations?: ConversationSummary[];
+        activeId?: string;
+      })
+    | undefined;
+  onMount(() => {
+    if (el) {
+      el.groups = sampleGroups;
+      el.conversations = sampleConversations;
+      el.activeId = 'c-1';
+    }
+  });
+  return (
+    <kitn-conversation-list
+      ref={(e) => (el = e as HTMLElement)}
+      style={{ display: 'block', width: '300px', height: '560px' }}
+    />
+  );
+}
+
+const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
+<kitn-conversation-list id="list" style="display:block; width:300px; height:100vh;"></kitn-conversation-list>
+
+<script type="module">
+  import '@kitnai/chat/elements';   // registers the custom elements
+
+  const list = document.getElementById('list');
+  list.groups = [
+    { id: 'g-work', name: 'Work', sortOrder: 0, createdAt: '2026-06-01T09:00:00.000Z' },
+  ];
+  list.conversations = [
+    {
+      id: 'c-1', title: 'Q2 launch plan', groupId: 'g-work',
+      scope: { type: 'collection' }, messageCount: 12,
+      lastMessageAt: '2026-06-09T14:20:00.000Z', updatedAt: '2026-06-09T14:20:00.000Z',
+    },
+  ];
+  list.activeId = 'c-1';
+
+  // events are CustomEvents on the element (they do not bubble)
+  list.addEventListener('select', (e) => console.log('opened:', e.detail.id));
+  list.addEventListener('newchat', () => console.log('new chat'));
+  list.addEventListener('togglesidebar', () => console.log('toggle sidebar'));
+</script>`;
+
+const SOLID_SNIPPET = `import '@kitnai/chat/elements'; // registers the custom elements
+import { onMount } from 'solid-js';
+import type { ConversationGroup, ConversationSummary } from '@kitnai/chat';
+
+function Sidebar() {
+  let el: HTMLElement & {
+    groups?: ConversationGroup[];
+    conversations?: ConversationSummary[];
+    activeId?: string;
+  };
+  const groups: ConversationGroup[] = [
+    { id: 'g-work', name: 'Work', sortOrder: 0, createdAt: '2026-06-01T09:00:00.000Z' },
+  ];
+  const conversations: ConversationSummary[] = [
+    {
+      id: 'c-1', title: 'Q2 launch plan', groupId: 'g-work',
+      scope: { type: 'collection' }, messageCount: 12,
+      lastMessageAt: '2026-06-09T14:20:00.000Z', updatedAt: '2026-06-09T14:20:00.000Z',
+    },
+  ];
+  onMount(() => {
+    el.groups = groups;
+    el.conversations = conversations;
+    el.activeId = 'c-1';
+  });
+  return (
+    <kitn-conversation-list
+      ref={el}
+      style={{ display: 'block', width: '300px', height: '100vh' }}
+      on:select={(e) => console.log('opened:', e.detail.id)}
+      on:newchat={() => console.log('new chat')}
+      on:togglesidebar={() => console.log('toggle sidebar')}
+    />
+  );
+}`;
+
+const meta = {
+  title: 'Web Components/kitn-conversation-list',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: [
+          '`<kitn-conversation-list>` is the framework-agnostic **web component** version of the chat sidebar — a searchable, grouped list of conversations with a "new chat" button, isolated in **Shadow DOM** so the host page\'s CSS can\'t leak in and the kit\'s styles can\'t leak out. SolidJS is bundled in, so the host needs nothing.',
+          '**When to use:** adding a conversation switcher to a non-Solid app (React, Vue, Svelte, plain HTML), or anywhere you want zero style conflicts. If you *are* in SolidJS and want fine-grained control, compose the `ConversationList` primitive instead.',
+          '**How to use:** register once with `import \'@kitnai/chat/elements\'`, set rich data as JS **properties** (`el.groups = [...]`, `el.conversations = [...]`, `el.activeId = \'c-1\'`), and listen for **CustomEvents** (`select`, `newchat`, `togglesidebar`) directly on the element.',
+          '**Placement:** as a fixed-width side panel next to the chat surface. Give it an explicit width and height (e.g. `width: 300px; height: 100vh`).',
+          'See the **Code** tab below for the HTML usage; the *SolidJS* story shows the same element inside a Solid component.',
+        ].join('\n\n'),
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** The element used the plain-HTML / any-framework way. */
+export const Default: Story = {
+  render: () => <ConversationListElement />,
+  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
+};
+
+/** The same element used inside a SolidJS component (properties via `ref`, events via `on:`). */
+export const InSolidJS: Story = {
+  name: 'In SolidJS',
+  render: () => <ConversationListElement />,
+  parameters: { docs: { source: { code: SOLID_SNIPPET, language: 'tsx' } } },
+};

package/src/elements/kitn-prompt-input.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { onMount } from 'solid-js';
+import './register'; // side effect: registers <kitn-chat>, <kitn-conversation-list>, <kitn-prompt-input>
+
+// 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 {
+      'kitn-prompt-input': JSX.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
+
+const sampleSuggestions: string[] = [
+  'Summarize this thread',
+  'Draft a reply',
+  'Explain like I am five',
+];
+
+/** Live demo of the actual `<kitn-prompt-input>` custom element (Shadow DOM and all). */
+function PromptInputElement() {
+  let el:
+    | (HTMLElement & {
+        value?: string;
+        placeholder?: string;
+        disabled?: boolean;
+        loading?: boolean;
+        suggestions?: string[];
+      })
+    | undefined;
+  onMount(() => {
+    if (el) {
+      el.placeholder = 'Ask anything...';
+      el.suggestions = sampleSuggestions;
+    }
+  });
+  return (
+    <kitn-prompt-input
+      ref={(e) => (el = e as HTMLElement)}
+      style={{ display: 'block', width: '100%', padding: '16px' }}
+    />
+  );
+}
+
+const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
+<kitn-prompt-input id="input" style="display:block; width:100%;"></kitn-prompt-input>
+
+<script type="module">
+  import '@kitnai/chat/elements';   // registers the custom elements
+
+  const input = document.getElementById('input');
+  input.placeholder = 'Ask anything...';
+  input.suggestions = ['Summarize this thread', 'Draft a reply'];
+  // input.loading = true;   // shows the busy state while a response streams
+  // input.disabled = true;  // blocks typing and submit
+
+  // events are CustomEvents on the element (they do not bubble)
+  input.addEventListener('submit', (e) => console.log('send:', e.detail.value));
+  input.addEventListener('valuechange', (e) => console.log('typing:', e.detail.value));
+  input.addEventListener('suggestionclick', (e) => console.log('picked:', e.detail.value));
+</script>`;
+
+const SOLID_SNIPPET = `import '@kitnai/chat/elements'; // registers the custom elements
+import { onMount } from 'solid-js';
+
+function Composer() {
+  let el: HTMLElement & {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    suggestions?: string[];
+  };
+  onMount(() => {
+    el.placeholder = 'Ask anything...';
+    el.suggestions = ['Summarize this thread', 'Draft a reply'];
+  });
+  return (
+    <kitn-prompt-input
+      ref={el}
+      style={{ display: 'block', width: '100%' }}
+      on:submit={(e) => console.log('send:', e.detail.value)}
+      on:valuechange={(e) => console.log('typing:', e.detail.value)}
+      on:suggestionclick={(e) => console.log('picked:', e.detail.value)}
+    />
+  );
+}`;
+
+const meta = {
+  title: 'Web Components/kitn-prompt-input',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: [
+          '`<kitn-prompt-input>` is the framework-agnostic **web component** version of the chat composer — an auto-resizing textarea with a send button and optional suggestion chips, isolated in **Shadow DOM** so the host page\'s CSS can\'t leak in and the kit\'s styles can\'t leak out. SolidJS is bundled in, so the host needs nothing.',
+          '**When to use:** adding a message composer to a non-Solid app (React, Vue, Svelte, plain HTML), or anywhere you want zero style conflicts. If you *are* in SolidJS and want fine-grained control, compose the `PromptInput` primitives instead.',
+          '**How to use:** register once with `import \'@kitnai/chat/elements\'`, configure it with JS **properties** (`placeholder`, `value`, `disabled`, `loading`, `suggestions`), and listen for **CustomEvents** (`submit`, `valuechange`, `suggestionclick`) directly on the element. Leave `value` unset to let the element manage its own input state.',
+          '**Placement:** pinned to the bottom of a chat surface, full width. Set `loading` while a response streams to show the busy state, and `disabled` to block input entirely.',
+          'See the **Code** tab below for the HTML usage; the *SolidJS* story shows the same element inside a Solid component.',
+        ].join('\n\n'),
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** The element used the plain-HTML / any-framework way. */
+export const Default: Story = {
+  render: () => <PromptInputElement />,
+  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
+};
+
+/** The same element used inside a SolidJS component (properties via `ref`, events via `on:`). */
+export const InSolidJS: Story = {
+  name: 'In SolidJS',
+  render: () => <PromptInputElement />,
+  parameters: { docs: { source: { code: SOLID_SNIPPET, language: 'tsx' } } },
+};

package/src/elements/prompt-input.tsx

@@ -0,0 +1,39 @@
+import { createSignal } from 'solid-js';
+import { defineKitnElement } from './define';
+import { DefaultPromptInput } from './default-input';
+
+interface Props extends Record<string, unknown> {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  suggestions?: string[];
+}
+
+defineKitnElement<Props>('kitn-prompt-input', {
+  value: undefined,
+  placeholder: 'Send a message...',
+  disabled: false,
+  loading: false,
+  suggestions: undefined,
+}, (props, { dispatch }) => {
+  const [internal, setInternal] = createSignal(props.value ?? '');
+  const current = () => props.value ?? internal();
+
+  const handleChange = (v: string) => { setInternal(v); dispatch('valuechange', { value: v }); };
+  const handleSubmit = () => dispatch('submit', { value: current() });
+  const handleSuggestionClick = (v: string) => { handleChange(v); dispatch('suggestionclick', { value: v }); };
+
+  return (
+    <DefaultPromptInput
+      value={current()}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      loading={props.loading}
+      suggestions={props.suggestions}
+      onValueChange={handleChange}
+      onSubmit={handleSubmit}
+      onSuggestionClick={handleSuggestionClick}
+    />
+  );
+});

package/src/elements/register.ts

@@ -0,0 +1,9 @@
+// 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';
+
+export type { ChatMessage, ChatMessageAction } from './chat-types';
+export { configureCodeHighlighting, isCodeHighlightingEnabled } from '../primitives/highlighter';
+export type { CodeHighlightingOptions } from '../primitives/highlighter';

package/src/elements/styles.css

@@ -0,0 +1,12 @@
+/* Element-bundle stylesheet. Compiled to compiled.css and injected into each
+   custom element's shadow root. Mirrors .storybook/styles.css but scans src/. */
+@import "tailwindcss";
+@import "../../theme.css";
+@plugin "@tailwindcss/typography";
+
+@source "../";
+
+@layer base {
+  :host { display: block; }
+  * { border-color: var(--color-border); }
+}

package/src/index.ts

@@ -0,0 +1,128 @@
+// Shared types (folded in from @tab-zen/shared)
+export type { ModelOption, SearchFilters, ConversationScope, ConversationSummary, ConversationGroup } from './types';
+
+// Utilities
+export { cn } from './utils/cn';
+
+// Layer 1: Headless Primitives
+export { useAutoResize } from './primitives/use-auto-resize';
+export { useStickToBottom } from './primitives/use-stick-to-bottom';
+export { useTextStream } from './primitives/use-text-stream';
+export type { UseTextStreamOptions, TextStreamSegment } from './primitives/use-text-stream';
+export { useVoiceRecorder } from './primitives/use-voice-recorder';
+export type { UseVoiceRecorderOptions } from './primitives/use-voice-recorder';
+export { ChatConfig, useChatConfig, proseClass, textClass } from './primitives/chat-config';
+export type { ChatConfigValue, ProseSize, ChatConfigProps } from './primitives/chat-config';
+export { configureCodeHighlighting, isCodeHighlightingEnabled } from './primitives/highlighter';
+export type { CodeHighlightingOptions } from './primitives/highlighter';
+
+// Layer 2: UI Primitives
+export { Button, buttonVariants } from './ui/button';
+export type { ButtonProps } from './ui/button';
+export { Avatar } from './ui/avatar';
+export type { AvatarProps } from './ui/avatar';
+export { Tooltip } from './ui/tooltip';
+export { HoverCard } from './ui/hover-card';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible';
+export { ScrollArea } from './ui/scroll-area';
+export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from './ui/dropdown';
+export { Textarea } from './ui/textarea';
+export type { TextareaProps } from './ui/textarea';
+export { Badge } from './ui/badge';
+export type { BadgeProps } from './ui/badge';
+export { Separator } from './ui/separator';
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './ui/resizable';
+export type { ResizablePanelGroupProps, ResizablePanelProps, ResizableHandleProps } from './ui/resizable';
+export { Skeleton } from './ui/skeleton';
+export { Dialog, DialogTrigger, DialogContent } from './ui/dialog';
+
+// Layer 3: AI/Feature Components
+export {
+  ChatContainer, ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor,
+  useChatContainer,
+} from './components/chat-container';
+export { Message, MessageAvatar, MessageContent, MessageActions, MessageAction, MessageCopyButton } from './components/message';
+export type { MessageCopyButtonProps } from './components/message';
+export { MessageSkills } from './components/message-skills';
+export type { Skill as MessageSkill } from './components/message-skills';
+export {
+  PromptInput, PromptInputTextarea, PromptInputActions, PromptInputAction,
+  usePromptInput,
+} from './components/prompt-input';
+export { SlashCommand } from './components/slash-command';
+export type { SlashCommandItem, SlashCommandProps } from './components/slash-command';
+export { ResponseStream } from './components/response-stream';
+export { Markdown } from './components/markdown';
+export { CodeBlock, CodeBlockCode, CodeBlockGroup } from './components/code-block';
+export { Loader } from './components/loader';
+export type { LoaderVariant, LoaderSize, LoaderProps } from './components/loader';
+export {
+  CircularLoader, ClassicLoader, PulseLoader, PulseDotLoader,
+  DotsLoader, TypingLoader, WaveLoader, BarsLoader,
+  TerminalLoader, TextBlinkLoader, TextShimmerLoader, TextDotsLoader,
+} from './components/loader';
+export { FeedbackBar } from './components/feedback-bar';
+export {
+  ChainOfThought, ChainOfThoughtStep, ChainOfThoughtTrigger,
+  ChainOfThoughtContent, ChainOfThoughtItem,
+} from './components/chain-of-thought';
+export { Source, SourceTrigger, SourceContent, SourceList } from './components/source';
+export { PromptSuggestion } from './components/prompt-suggestion';
+export {
+  Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, emptyMediaVariants,
+} from './components/empty';
+export type {
+  EmptyProps, EmptyHeaderProps, EmptyMediaProps, EmptyTitleProps, EmptyDescriptionProps, EmptyContentProps,
+} from './components/empty';
+export { ScrollButton } from './components/scroll-button';
+export { TextShimmer } from './components/text-shimmer';
+export { Checkpoint, CheckpointIcon, CheckpointTrigger } from './components/checkpoint';
+export type { CheckpointProps, CheckpointIconProps, CheckpointTriggerProps } from './components/checkpoint';
+export {
+  Context,
+  ContextTrigger,
+  ContextContent,
+  ContextContentHeader,
+  ContextContentBody,
+  ContextContentFooter,
+  ContextInputUsage,
+  ContextOutputUsage,
+  ContextReasoningUsage,
+  ContextCacheUsage,
+} from './components/context';
+export type {
+  ContextProps,
+  ContextTriggerProps,
+  ContextContentProps,
+  ContextContentHeaderProps,
+  ContextContentBodyProps,
+  ContextContentFooterProps,
+  ContextUsageRowProps,
+} from './components/context';
+export { VoiceInput } from './components/voice-input';
+export { ConversationList } from './components/conversation-list';
+export { ConversationItem } from './components/conversation-item';
+export { ModelSwitcher } from './components/model-switcher';
+export { ChatScopePicker } from './components/chat-scope-picker';
+export { Tool } from './components/tool';
+export type { ToolPart, ToolProps } from './components/tool';
+export { ThinkingBar } from './components/thinking-bar';
+export type { ThinkingBarProps } from './components/thinking-bar';
+export { Reasoning, ReasoningTrigger, ReasoningContent } from './components/reasoning';
+export type { ReasoningProps, ReasoningTriggerProps, ReasoningContentProps } from './components/reasoning';
+export { Image } from './components/image';
+export type { ImageProps, GeneratedImageLike } from './components/image';
+export { FileUpload, FileUploadTrigger, FileUploadContent } from './components/file-upload';
+export type { FileUploadProps, FileUploadTriggerProps, FileUploadContentProps } from './components/file-upload';
+export {
+  Attachments, Attachment, AttachmentPreview, AttachmentInfo, AttachmentRemove,
+  AttachmentHoverCard, AttachmentHoverCardTrigger, AttachmentHoverCardContent,
+  AttachmentEmpty, getMediaCategory, getAttachmentLabel,
+  useAttachmentsContext, useAttachmentContext,
+} from './components/attachments';
+export type {
+  AttachmentData, AttachmentMediaCategory, AttachmentVariant,
+  AttachmentsProps, AttachmentProps, AttachmentPreviewProps,
+  AttachmentInfoProps, AttachmentRemoveProps, AttachmentEmptyProps,
+  AttachmentHoverCardProps, AttachmentHoverCardTriggerProps, AttachmentHoverCardContentProps,
+} from './components/attachments';

package/src/primitives/chat-config.tsx

@@ -0,0 +1,76 @@
+import { createContext, useContext, type Accessor, type JSX } from 'solid-js';
+
+export type ProseSize = 'xs' | 'sm' | 'base' | 'lg';
+
+export interface ChatConfigValue {
+  /** Prose/text size for messages, markdown, and UI elements */
+  proseSize: Accessor<ProseSize>;
+  /** Shiki theme for code blocks */
+  codeTheme: Accessor<string>;
+  /** Node Kobalte overlays portal into; undefined → document.body */
+  portalMount: Accessor<HTMLElement | undefined>;
+  /** Whether code blocks are syntax-highlighted; false → plain text, no Shiki loaded */
+  codeHighlight: Accessor<boolean>;
+}
+
+const defaultConfig: ChatConfigValue = {
+  proseSize: () => 'base' as ProseSize,
+  codeTheme: () => 'github-dark-dimmed',
+  portalMount: () => undefined,
+  codeHighlight: () => true,
+};
+
+const ChatConfigContext = createContext<ChatConfigValue>(defaultConfig);
+
+export interface ChatConfigProps {
+  proseSize?: ProseSize;
+  codeTheme?: string;
+  portalMount?: HTMLElement;
+  codeHighlight?: boolean;
+  children: JSX.Element;
+}
+
+/**
+ * Provides chat-wide appearance settings to all child components.
+ * Set once at the top level — MessageContent, Markdown, CodeBlock,
+ * ConversationList, and PromptInput all read from this.
+ */
+export function ChatConfig(props: ChatConfigProps) {
+  const value: ChatConfigValue = {
+    proseSize: () => props.proseSize ?? 'base',
+    codeTheme: () => props.codeTheme ?? 'github-dark-dimmed',
+    portalMount: () => props.portalMount,
+    codeHighlight: () => props.codeHighlight ?? true,
+  };
+
+  return (
+    <ChatConfigContext.Provider value={value}>
+      {props.children}
+    </ChatConfigContext.Provider>
+  );
+}
+
+/** Read the current chat config. Returns defaults if no provider is present. */
+export function useChatConfig(): ChatConfigValue {
+  return useContext(ChatConfigContext)!;
+}
+
+/** Maps prose size to Tailwind prose class */
+export function proseClass(size: ProseSize): string {
+  switch (size) {
+    case 'xs': return 'prose-sm text-xs';
+    case 'sm': return 'prose-sm';
+    case 'base': return '';
+    case 'lg': return 'prose-lg';
+  }
+}
+
+/** Maps prose size to a text class for non-prose elements (sidebar, input) */
+export function textClass(size: ProseSize): string {
+  switch (size) {
+    case 'xs': return 'text-xs';
+    case 'sm': return 'text-sm';
+    case 'base': return 'text-base';
+    case 'lg': return 'text-lg';
+  }
+}