@kitnai/chat 0.7.0 → 0.8.1

package/llms-full.txt

@@ -3,7 +3,7 @@
 
 # @kitnai/chat
 
-> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 28 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 38 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 
@@ -18,11 +18,11 @@ npm install solid-js
 This is the single most common mistake. Arrays and objects (`messages`, `models`, `context`, `suggestions`, `slashCommands`, …) MUST be assigned as JavaScript properties on the element. They CANNOT be passed as HTML attributes — an HTML attribute is always a string and will be ignored or mis-parsed.
 
 ```js
-const chat = document.querySelector('kitn-chat');
+const chat = document.querySelector('kc-chat');
 chat.messages = [{ id: '1', role: 'assistant', content: 'Hi!' }]; // ✅ property
 ```
 ```html
-<kitn-chat messages="[...]"></kitn-chat>  <!-- ❌ never works -->
+<kc-chat messages="[...]"></kc-chat>  <!-- ❌ never works -->
 ```
 
 Only scalar values (string/number/boolean) work as attributes (e.g. `placeholder`, `loading`, `theme`).
@@ -32,12 +32,12 @@ Only scalar values (string/number/boolean) work as attributes (e.g. `placeholder
 **Layer 1 — batteries-included web components** (`import '@kitnai/chat/elements'`):
 Drop an element into any framework (React, Vue, plain HTML). Data in via JS properties; interactions out via non-bubbling CustomEvents.
 
-- `<kitn-chat>` — full chat UI (message list + prompt input). The primary starting point.
-- `<kitn-conversation-list>` — sidebar conversation browser with group support.
-- `<kitn-prompt-input>` — standalone composer with send button.
+- `<kc-chat>` — full chat UI (message list + prompt input). The primary starting point.
+- `<kc-conversations>` — sidebar conversation browser with group support.
+- `<kc-prompt-input>` — standalone composer with send button.
 
 **Layer 2 — composable primitives** (`import { … } from '@kitnai/chat'`):
-All 28 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+All 38 elements are also exported individually. Use them for custom layouts or features `<kc-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
 
 ## Key rules for the web components
 
@@ -45,9 +45,9 @@ All 28 elements are also exported individually. Use them for custom layouts or f
 2. **Events are non-bubbling `CustomEvent`s** — listen directly on the element:
    `chat.addEventListener('submit', (e) => console.log(e.detail.value))`
 3. **`theme` attribute** (`'light' | 'dark' | 'auto'`) works on every element. Default `auto` follows `prefers-color-scheme`.
-4. **Theming via CSS custom properties** — override `--kitn-color-*` tokens on `:root`; they pierce Shadow DOM.
+4. **Theming via CSS custom properties** — override `--kc-color-*` tokens on `:root`; they pierce Shadow DOM.
 
-## ChatMessage schema (required for `<kitn-chat>`)
+## ChatMessage schema (required for `<kc-chat>`)
 
 ```ts
 interface ChatMessage {
@@ -66,31 +66,31 @@ interface ChatMessage {
 **Plain HTML / CDN**
 ```html
 <script type="module" src="https://unpkg.com/@kitnai/chat/elements"></script>
-<kitn-chat style="display:block;height:100vh"></kitn-chat>
+<kc-chat style="display:block;height:100vh"></kc-chat>
 <script type="module">
-  const chat = document.querySelector('kitn-chat');
+  const chat = document.querySelector('kc-chat');
   chat.messages = [];
 </script>
 ```
 
 **React** — typed wrappers auto-set properties and expose `on<Event>` props:
 ```tsx
-import { KitnChat } from '@kitnai/chat/react';
-<KitnChat messages={messages} onSubmit={(e) => send(e.detail.value)} />
+import { KcChat } from '@kitnai/chat/react';
+<KcChat messages={messages} onSubmit={(e) => send(e.detail.value)} />
 ```
 
 **Vue** — use the element directly; pass arrays via `.prop`:
 ```vue
-<kitn-chat :messages.prop="messages" @submit="send" />
+<kc-chat :messages.prop="messages" @submit="send" />
 ```
 
 ## Theming
 
 ```css
 :root {
-  --kitn-color-background: #0f0f0f;
-  --kitn-color-primary: #7c3aed;
-  --kitn-color-muted: #1e1e1e;
+  --kc-color-background: #0f0f0f;
+  --kc-color-primary: #7c3aed;
+  --kc-color-muted: #1e1e1e;
 }
 ```
 
@@ -99,7 +99,7 @@ For Tailwind builds: `@import "@kitnai/chat/theme.css"` in your CSS.
 
 ## Docs
 
-- Full element reference (all 28 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Full element reference (all 38 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
 - Machine-readable Custom Elements Manifest: https://unpkg.com/@kitnai/chat/dist/custom-elements.json
 - Working examples: https://github.com/kitn-ai/chat/tree/main/examples
 - Storybook: https://storybook.kitn.dev
@@ -115,13 +115,13 @@ npm install @kitnai/chat
 ```
 
 ### 2 — Pick your layer
-Drop-in: use `<kitn-chat>` for a full chat UI in one tag (`import '@kitnai/chat/elements'`).
-Composable: combine `<kitn-message>`, `<kitn-prompt-input>`, `<kitn-reasoning>`, … in your own markup.
+Drop-in: use `<kc-chat>` for a full chat UI in one tag (`import '@kitnai/chat/elements'`).
+Composable: combine `<kc-message>`, `<kc-prompt-input>`, `<kc-reasoning>`, … in your own markup.
 
 ### 3 — Handle `submit` and stream
 ```js
 import '@kitnai/chat/elements';
-const chat = document.querySelector('kitn-chat');
+const chat = document.querySelector('kc-chat');
 chat.messages = [];
 
 chat.addEventListener('submit', async (e) => {
@@ -150,10 +150,10 @@ chat.addEventListener('submit', async (e) => {
 - Tool calls: add `tools: [{ type: 'search', state: 'output-available', input: {…}, output: {…} }]`.
 - Model switcher: `chat.models = [{ id: 'gpt-4o', name: 'GPT-4o' }]; chat.currentModel = 'gpt-4o';` — listen for `modelchange`.
 - Token meter: `chat.context = { usedTokens: 1200, maxTokens: 128000 };`.
-- History sidebar: add `<kitn-conversation-list>`; listen for `select` and `newchat`.
+- History sidebar: add `<kc-conversations>`; listen for `select` and `newchat`.
 
 ### 5 — Theme
-Override `--kitn-color-*` tokens on `:root` (they pierce Shadow DOM).
+Override `--kc-color-*` tokens on `:root` (they pierce Shadow DOM).
 
 ---
 
@@ -173,11 +173,34 @@ The same rule applies to every array/object property (`models`, `context`, `sugg
 
 ---
 
-## Element reference (28 elements, generated from custom-elements.json)
+## Element reference (38 elements, generated from custom-elements.json)
 
 Every element also accepts the `theme` attribute. Array/object properties are marked with a `—` attribute: they must be set as JS properties.
 
-### `kitn-attachments` / `KitnAttachments`
+### `kc-artifact` / `KcArtifact`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `src` | `src` | `undefined \| string` | URL the preview iframe frames. Consumer-controlled. |
+| `files` | — | `{ path: string; url?: undefined \| string; code?: undefined \| string; language?: undefined \| string; type?: undefined \| "html" \| "pdf" \| "image" \| "other" }[]` | Files for the Code tab tree + each file's preview `url`. Set as a JS property (array). |
+| `tab` | `tab` | `undefined \| "preview" \| "code"` | Active tab: `preview` (default) or `code`. |
+| `activeFile` | `active-file` | `undefined \| string` | Selected file path — syncs the tree highlight, Code source, and preview. |
+| `sandbox` | `sandbox` | `undefined \| string` | iframe `sandbox` override. Secure default `allow-scripts allow-forms` (NOT `allow-same-origin`). |
+| `iframeTitle` | `iframe-title` | `undefined \| string` | Accessible title for the preview iframe. |
+
+**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
+
+| Event | `detail` type | Description |
+|---|---|---|
+| `fileselect` | `CustomEvent<{ path: string }>` | Fired when a file is selected. `detail.path`. |
+| `navigate` | `CustomEvent<{ url: string }>` | Fired when the preview navigates. `detail.url` = the new location. |
+| `tabchange` | `CustomEvent<{ tab: "preview" \| "code" }>` | Fired when the Preview\|Code tab changes. `detail.tab`. |
+
+---
+
+### `kc-attachments` / `KcAttachments`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -198,7 +221,22 @@ Every element also accepts the `theme` attribute. Array/object properties are ma
 
 ---
 
-### `kitn-chain-of-thought` / `KitnChainOfThought`
+### `kc-card` / `KcCard`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `heading` | `heading` | `undefined \| string` | Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. |
+| `description` | `description` | `undefined \| string` | Supporting text under the heading. Attribute: `description`. |
+| `errorMessage` | `error-message` | `undefined \| string` | When set, the card renders its inline error state instead of the body. Attribute: `error-message`. |
+| `dense` | `dense` | `undefined \| false \| true` | Compact spacing for dense lists. Attribute: `dense`. |
+
+_No events._
+
+---
+
+### `kc-chain-of-thought` / `KcChainOfThought`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -210,7 +248,7 @@ _No events._
 
 ---
 
-### `kitn-chat` / `KitnChat`
+### `kc-chat` / `KcChat`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -251,76 +289,7 @@ _No events._
 
 ---
 
-### `kitn-chat-scope-picker` / `KitnChatScopePicker`
-
-**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
-
-| Property | Attribute | Type | Description |
-|---|---|---|---|
-| `availableAuthors` | — | `string[]` | Authors to offer as scope filters. Set as a JS property. |
-| `availableTags` | — | `string[]` | Tags to offer as scope filters. Set as a JS property. |
-| `currentLabel` | `current-label` | `undefined \| string` | The label shown on the trigger for the active scope. |
-
-**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
-
-| Event | `detail` type | Description |
-|---|---|---|
-| `scopechange` | `CustomEvent<{ filters: undefined \| { tags?: undefined \| string[]; authors?: undefined \| string[]; contentType?: undefined \| "transcript" \| "markdown"; dateRange?: undefined \| { from: string; to: string } } }>` | A scope was chosen (`undefined` filters = "All Content"). |
-
----
-
-### `kitn-chat-workspace` / `KitnChatWorkspace`
-
-**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
-
-| Property | Attribute | Type | Description |
-|---|---|---|---|
-| `groups` | — | `{ id: string; userId?: undefined \| string; teamId?: undefined \| string; name: string; sortOrder: number; createdAt: string }[]` | Pre-bucketed conversation groups for the sidebar. Set as a JS property. |
-| `conversations` | — | `{ id: string; title: string; groupId?: undefined \| string; scope: { type: "document" \| "collection"; documentId?: undefined \| string; filters?: undefined \| { tags?: undefined \| string[]; authors?: undefined \| string[]; contentType?: undefined \| "transcript" \| "markdown"; dateRange?: undefined \| { from: string; to: string } } }; messageCount: number; lastMessageAt: string; updatedAt: string }[]` | Flat conversation list (auto-bucketed if `groups` is empty). Set as a JS property. |
-| `activeId` | `active-id` | `undefined \| string` | Id of the open conversation, highlighted in the sidebar. |
-| `messages` | — | `{ id: string; role: "user" \| "assistant"; content: string; reasoning?: undefined \| { text: string; label?: undefined \| string }; tools?: undefined \| { type: string; state: "input-streaming" \| "input-available" \| "output-available" \| "output-error"; input?: undefined \| Record<string, unknown>; output?: undefined \| Record<string, unknown>; toolCallId?: undefined \| string; errorText?: undefined \| string }[]; attachments?: undefined \| { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[]; actions?: undefined \| ("copy" \| "like" \| "dislike" \| "regenerate" \| "edit")[] }[]` | The active conversation's message thread, newest last. Set as a JS property. |
-| `value` | `value` | `undefined \| string` |  |
-| `placeholder` | `placeholder` | `undefined \| string` |  |
-| `loading` | `loading` | `undefined \| false \| true` |  |
-| `suggestions` | — | `undefined \| string[]` |  |
-| `suggestionMode` | `suggestion-mode` | `undefined \| "submit" \| "fill"` |  |
-| `proseSize` | `prose-size` | `undefined \| "xs" \| "sm" \| "base" \| "lg"` |  |
-| `codeTheme` | `code-theme` | `undefined \| string` |  |
-| `codeHighlight` | `code-highlight` | `undefined \| false \| true` |  |
-| `chatTitle` | `chat-title` | `undefined \| string` |  |
-| `models` | — | `undefined \| { id: string; name: string; provider?: undefined \| string }[]` |  |
-| `currentModel` | `current-model` | `undefined \| string` |  |
-| `context` | — | `undefined \| { usedTokens: number; maxTokens: number; inputTokens?: undefined \| number; outputTokens?: undefined \| number; estimatedCost?: undefined \| number }` |  |
-| `scrollButton` | `scroll-button` | `undefined \| false \| true` |  |
-| `search` | `search` | `undefined \| false \| true` |  |
-| `voice` | `voice` | `undefined \| false \| true` |  |
-| `slashCommands` | — | `undefined \| { id: string; label: string; description?: undefined \| string; category?: undefined \| string }[]` |  |
-| `slashActiveIds` | — | `undefined \| string[]` |  |
-| `slashCompact` | `slash-compact` | `undefined \| false \| true` |  |
-| `sidebarWidth` | `sidebar-width` | `undefined \| number` | Sidebar default width as a percent of the workspace (default 22). |
-| `sidebarMinWidth` | `sidebar-min-width` | `undefined \| number` | Sidebar min width in px (default 200). |
-| `sidebarMaxWidth` | `sidebar-max-width` | `undefined \| number` | Sidebar max width in px (default 420). |
-| `sidebarCollapsed` | `sidebar-collapsed` | `undefined \| false \| true` | Initial collapsed state of the sidebar (default false). |
-
-**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
-
-| Event | `detail` type | Description |
-|---|---|---|
-| `conversationselect` | `CustomEvent<{ id: string }>` | A conversation was selected in the sidebar. |
-| `messageaction` | `CustomEvent<{ messageId: string; action: "copy" \| "like" \| "dislike" \| "regenerate" \| "edit" }>` | An action button on a message was clicked. |
-| `modelchange` | `CustomEvent<{ modelId: string }>` | The header model switcher changed. |
-| `newchat` | `CustomEvent<Record<string, never>>` | The "New chat" button was clicked. |
-| `search` | `CustomEvent<Record<string, never>>` | The Search button was clicked. |
-| `sidebartoggle` | `CustomEvent<{ collapsed: false \| true }>` | The sidebar was collapsed or expanded. |
-| `slashselect` | `CustomEvent<{ command: { id: string; label: string; description?: undefined \| string; category?: undefined \| string } }>` | A slash command was chosen from the palette. |
-| `submit` | `CustomEvent<{ value: string; attachments: { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[] }>` | User submitted a message. |
-| `suggestionclick` | `CustomEvent<{ value: string }>` | A suggestion chip was clicked (only in `suggestion-mode="fill"`). |
-| `valuechange` | `CustomEvent<{ value: string }>` | Fired on every input change. |
-| `voice` | `CustomEvent<Record<string, never>>` | The Mic / voice button was clicked. |
-
----
-
-### `kitn-checkpoint` / `KitnCheckpoint`
+### `kc-checkpoint` / `KcCheckpoint`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -339,7 +308,7 @@ _No events._
 
 ---
 
-### `kitn-code-block` / `KitnCodeBlock`
+### `kc-code-block` / `KcCodeBlock`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -355,7 +324,22 @@ _No events._
 
 ---
 
-### `kitn-context-meter` / `KitnContextMeter`
+### `kc-confirm` / `KcConfirm`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `data` | — | `undefined \| Record<string, unknown>` | The confirm definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { body, tone, actions:[…] }`. Import `ConfirmCardData` from `@kitnai/chat` for the full shape. |
+| `cardId` | `card-id` | `undefined \| string` | Stable card id correlating every emitted CardEvent. Attribute: `card-id`. |
+| `heading` | `heading` | `undefined \| string` | Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. |
+| `autofocus` | `autofocus` | `undefined \| false \| true` | Focus the default action on mount (off by default — no focus-stealing). Attribute: `autofocus`. |
+
+_No events._
+
+---
+
+### `kc-context` / `KcContext`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -367,7 +351,7 @@ _No events._
 
 ---
 
-### `kitn-conversation-list` / `KitnConversationList`
+### `kc-conversations` / `KcConversations`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -387,7 +371,20 @@ _No events._
 
 ---
 
-### `kitn-empty` / `KitnEmpty`
+### `kc-embed` / `KcEmbed`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `cardId` | `card-id` | `undefined \| string` | Stable card id correlating every emitted event. Set as an attribute or property. |
+| `data` | — | `undefined \| { provider: "youtube" \| "vimeo" \| "generic"; id?: undefined \| string; url?: undefined \| string; title?: undefined \| string; poster?: undefined \| string; start?: undefined \| number; aspectRatio?: undefined \| "16:9" \| "4:3" \| "1:1" \| "9:16" }` | The embed payload (provider + id/url + options). Set as a JS **property** (object). |
+
+_No events._
+
+---
+
+### `kc-empty` / `KcEmpty`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -400,7 +397,7 @@ _No events._
 
 ---
 
-### `kitn-feedback-bar` / `KitnFeedbackBar`
+### `kc-feedback-bar` / `KcFeedbackBar`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -418,7 +415,25 @@ _No events._
 
 ---
 
-### `kitn-file-upload` / `KitnFileUpload`
+### `kc-file-tree` / `KcFileTree`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `files` | — | `{ path: string; url?: undefined \| string; code?: undefined \| string; language?: undefined \| string; type?: undefined \| "html" \| "pdf" \| "image" \| "other" }[]` | The files to render. Set as a JS property (array of `{ path, url?, code?, language?, type? }`). |
+| `activeFile` | `active-file` | `undefined \| string` | Selected file path — highlighted in the tree. |
+| `defaultExpanded` | — | `undefined \| string[]` | Folder paths expanded initially. Omit to start with all folders open. |
+
+**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
+
+| Event | `detail` type | Description |
+|---|---|---|
+| `select` | `CustomEvent<{ path: string }>` | Fired when a file is selected. `detail.path` = the file's path. |
+
+---
+
+### `kc-file-upload` / `KcFileUpload`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -437,7 +452,21 @@ _No events._
 
 ---
 
-### `kitn-image` / `KitnImage`
+### `kc-form` / `KcForm`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `data` | — | `undefined \| Record<string, unknown>` | The form definition — a JSON Schema (`type:'object'`) + `x-kc-*` UI hints (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { type:'object', properties:{…} }`. Import the `FormDefinition` type from `@kitnai/chat` for the full shape (it is self-referential, so the element types it loosely). |
+| `cardId` | `card-id` | `undefined \| string` | Stable card id correlating every emitted CardEvent. Attribute: `card-id`. |
+| `heading` | `heading` | `undefined \| string` | Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. |
+
+_No events._
+
+---
+
+### `kc-image` / `KcImage`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -452,7 +481,20 @@ _No events._
 
 ---
 
-### `kitn-loader` / `KitnLoader`
+### `kc-link-card` / `KcLinkCard`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `cardId` | `card-id` | `undefined \| string` | Stable card id correlating every emitted event. Set as an attribute or property. |
+| `data` | — | `undefined \| { url: string; title?: undefined \| string; description?: undefined \| string; image?: undefined \| string; imageAlt?: undefined \| string; favicon?: undefined \| string; domain?: undefined \| string; siteName?: undefined \| string }` | The link payload (OG metadata). Set as a JS **property** (object). |
+
+_No events._
+
+---
+
+### `kc-loader` / `KcLoader`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -466,7 +508,7 @@ _No events._
 
 ---
 
-### `kitn-markdown` / `KitnMarkdown`
+### `kc-markdown` / `KcMarkdown`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -481,7 +523,7 @@ _No events._
 
 ---
 
-### `kitn-message` / `KitnMessage`
+### `kc-message` / `KcMessage`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -503,19 +545,7 @@ _No events._
 
 ---
 
-### `kitn-message-skills` / `KitnMessageSkills`
-
-**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
-
-| Property | Attribute | Type | Description |
-|---|---|---|---|
-| `skills` | — | `{ id: string; name: string }[]` | The active skills to badge. Set as a JS property. |
-
-_No events._
-
----
-
-### `kitn-model-switcher` / `KitnModelSwitcher`
+### `kc-model-switcher` / `KcModelSwitcher`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -532,7 +562,7 @@ _No events._
 
 ---
 
-### `kitn-prompt-input` / `KitnPromptInput`
+### `kc-prompt-input` / `KcPromptInput`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -564,47 +594,63 @@ _No events._
 
 ---
 
-### `kitn-prompt-suggestions` / `KitnPromptSuggestions`
+### `kc-reasoning` / `KcReasoning`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
 | Property | Attribute | Type | Description |
 |---|---|---|---|
-| `suggestions` | — | `(string \| { label: string; value?: undefined \| string })[]` | The suggestions. Strings, or `{ label, value }` when the displayed text and the emitted value differ. Set as a JS property. |
-| `variant` | `variant` | `undefined \| "ghost" \| "default" \| "outline"` | Chip style: `'outline'` (default), `'ghost'`, or `'default'` (filled). |
-| `size` | `size` | `undefined \| "sm" \| "lg" \| "md" \| "icon" \| "icon-sm"` | Size preset for each chip. Defaults to the pill default (`'lg'`); pass `'sm'` for smaller pills (or `'md'`). |
-| `block` | `block` | `undefined \| false \| true` | Full-width left-aligned rows instead of pills. |
-| `highlight` | `highlight` | `undefined \| string` | Substring to highlight within each suggestion. |
+| `text` | `text` | `string` | The reasoning text to display. |
+| `label` | `label` | `undefined \| string` | Trigger label. |
+| `open` | `open` | `undefined \| false \| true` | Controlled open state — set as a property (`el.open = true`). Omit for uncontrolled (the trigger toggles it). |
+| `streaming` | `streaming` | `undefined \| false \| true` | While true, auto-expands (and re-collapses when it flips false). |
+| `markdown` | `markdown` | `undefined \| false \| true` | Render `text` as markdown. |
 
 **Events** (non-bubbling `CustomEvent`s — listen directly on the element):
 
 | Event | `detail` type | Description |
 |---|---|---|
-| `select` | `CustomEvent<{ value: string }>` | A suggestion was clicked. |
+| `openchange` | `CustomEvent<{ open: false \| true }>` | Open state changed (via the trigger or streaming auto-open). |
 
 ---
 
-### `kitn-reasoning` / `KitnReasoning`
+### `kc-resizable` / `KcResizable`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
 | Property | Attribute | Type | Description |
 |---|---|---|---|
-| `text` | `text` | `string` | The reasoning text to display. |
-| `label` | `label` | `undefined \| string` | Trigger label. |
-| `open` | `open` | `undefined \| false \| true` | Controlled open state — set as a property (`el.open = true`). Omit for uncontrolled (the trigger toggles it). |
-| `streaming` | `streaming` | `undefined \| false \| true` | While true, auto-expands (and re-collapses when it flips false). |
-| `markdown` | `markdown` | `undefined \| false \| true` | Render `text` as markdown. |
+| `orientation` | `orientation` | `undefined \| "horizontal" \| "vertical"` | Layout axis: `horizontal` (row, default) or `vertical` (column). |
 
 **Events** (non-bubbling `CustomEvent`s — listen directly on the element):
 
 | Event | `detail` type | Description |
 |---|---|---|
-| `openchange` | `CustomEvent<{ open: false \| true }>` | Open state changed (via the trigger or streaming auto-open). |
+| `change` | `CustomEvent<{ sizes: number[] }>` | Fired on drag-end / keyboard resize / visibility change. `detail.sizes` = panel sizes in percent. |
 
 ---
 
-### `kitn-response-stream` / `KitnResponseStream`
+### `kc-resizable-item` / `KcResizableItem`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `size` | `size` | `undefined \| string` | Initial main-axis size: `"280px"` (fixed) or `"25%"`/`25` (percent). Omitted → flexible. |
+| `min` | `min` | `undefined \| string` | Minimum size during resize (px or %). |
+| `max` | `max` | `undefined \| string` | Maximum size during resize (px or %). |
+| `locked` | `locked` | `undefined \| false \| true` | Fix this panel's size; adjacent dividers become non-draggable. |
+| `hidden` | `hidden` | `undefined \| false \| true` | Hide this panel; its divider is dropped and the rest reflow. |
+
+**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
+
+| Event | `detail` type | Description |
+|---|---|---|
+| `change` | `CustomEvent<unknown>` |  |
+
+---
+
+### `kc-response-stream` / `KcResponseStream`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -623,7 +669,37 @@ _No events._
 
 ---
 
-### `kitn-source` / `KitnSource`
+### `kc-scope-picker` / `KcScopePicker`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `availableAuthors` | — | `string[]` | Authors to offer as scope filters. Set as a JS property. |
+| `availableTags` | — | `string[]` | Tags to offer as scope filters. Set as a JS property. |
+| `currentLabel` | `current-label` | `undefined \| string` | The label shown on the trigger for the active scope. |
+
+**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
+
+| Event | `detail` type | Description |
+|---|---|---|
+| `scopechange` | `CustomEvent<{ filters: undefined \| { tags?: undefined \| string[]; authors?: undefined \| string[]; contentType?: undefined \| "transcript" \| "markdown"; dateRange?: undefined \| { from: string; to: string } } }>` | A scope was chosen (`undefined` filters = "All Content"). |
+
+---
+
+### `kc-skills` / `KcSkills`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `skills` | — | `{ id: string; name: string }[]` | The active skills to badge. Set as a JS property. |
+
+_No events._
+
+---
+
+### `kc-source` / `KcSource`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -639,7 +715,7 @@ _No events._
 
 ---
 
-### `kitn-source-list` / `KitnSourceList`
+### `kc-sources` / `KcSources`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -652,7 +728,41 @@ _No events._
 
 ---
 
-### `kitn-text-shimmer` / `KitnTextShimmer`
+### `kc-suggestions` / `KcSuggestions`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `suggestions` | — | `(string \| { label: string; value?: undefined \| string })[]` | The suggestions. Strings, or `{ label, value }` when the displayed text and the emitted value differ. Set as a JS property. |
+| `variant` | `variant` | `undefined \| "ghost" \| "default" \| "outline"` | Chip style: `'outline'` (default), `'ghost'`, or `'default'` (filled). |
+| `size` | `size` | `undefined \| "sm" \| "lg" \| "md" \| "icon" \| "icon-sm"` | Size preset for each chip. Defaults to the pill default (`'lg'`); pass `'sm'` for smaller pills (or `'md'`). |
+| `block` | `block` | `undefined \| false \| true` | Full-width left-aligned rows instead of pills. |
+| `highlight` | `highlight` | `undefined \| string` | Substring to highlight within each suggestion. |
+
+**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
+
+| Event | `detail` type | Description |
+|---|---|---|
+| `select` | `CustomEvent<{ value: string }>` | A suggestion was clicked. |
+
+---
+
+### `kc-task-list` / `KcTaskList`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `data` | — | `undefined \| Record<string, unknown>` | The task-list definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { tasks:[…], selectAll, confirmLabel, … }`. Import `TaskListCardData` from `@kitnai/chat` for the full shape. |
+| `cardId` | `card-id` | `undefined \| string` | Stable card id correlating every emitted CardEvent. Attribute: `card-id`. |
+| `heading` | `heading` | `undefined \| string` | Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. |
+
+_No events._
+
+---
+
+### `kc-text-shimmer` / `KcTextShimmer`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -667,7 +777,7 @@ _No events._
 
 ---
 
-### `kitn-thinking-bar` / `KitnThinkingBar`
+### `kc-thinking-bar` / `KcThinkingBar`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -685,7 +795,7 @@ _No events._
 
 ---
 
-### `kitn-tool` / `KitnTool`
+### `kc-tool` / `KcTool`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -698,7 +808,7 @@ _No events._
 
 ---
 
-### `kitn-voice-input` / `KitnVoiceInput`
+### `kc-voice-input` / `KcVoiceInput`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
 
@@ -716,3 +826,54 @@ _No events._
 
 ---
 
+### `kc-workspace` / `KcWorkspace`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `groups` | — | `{ id: string; userId?: undefined \| string; teamId?: undefined \| string; name: string; sortOrder: number; createdAt: string }[]` | Pre-bucketed conversation groups for the sidebar. Set as a JS property. |
+| `conversations` | — | `{ id: string; title: string; groupId?: undefined \| string; scope: { type: "document" \| "collection"; documentId?: undefined \| string; filters?: undefined \| { tags?: undefined \| string[]; authors?: undefined \| string[]; contentType?: undefined \| "transcript" \| "markdown"; dateRange?: undefined \| { from: string; to: string } } }; messageCount: number; lastMessageAt: string; updatedAt: string }[]` | Flat conversation list (auto-bucketed if `groups` is empty). Set as a JS property. |
+| `activeId` | `active-id` | `undefined \| string` | Id of the open conversation, highlighted in the sidebar. |
+| `messages` | — | `{ id: string; role: "user" \| "assistant"; content: string; reasoning?: undefined \| { text: string; label?: undefined \| string }; tools?: undefined \| { type: string; state: "input-streaming" \| "input-available" \| "output-available" \| "output-error"; input?: undefined \| Record<string, unknown>; output?: undefined \| Record<string, unknown>; toolCallId?: undefined \| string; errorText?: undefined \| string }[]; attachments?: undefined \| { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[]; actions?: undefined \| ("copy" \| "like" \| "dislike" \| "regenerate" \| "edit")[] }[]` | The active conversation's message thread, newest last. Set as a JS property. |
+| `value` | `value` | `undefined \| string` |  |
+| `placeholder` | `placeholder` | `undefined \| string` |  |
+| `loading` | `loading` | `undefined \| false \| true` |  |
+| `suggestions` | — | `undefined \| string[]` |  |
+| `suggestionMode` | `suggestion-mode` | `undefined \| "submit" \| "fill"` |  |
+| `proseSize` | `prose-size` | `undefined \| "xs" \| "sm" \| "base" \| "lg"` |  |
+| `codeTheme` | `code-theme` | `undefined \| string` |  |
+| `codeHighlight` | `code-highlight` | `undefined \| false \| true` |  |
+| `chatTitle` | `chat-title` | `undefined \| string` |  |
+| `models` | — | `undefined \| { id: string; name: string; provider?: undefined \| string }[]` |  |
+| `currentModel` | `current-model` | `undefined \| string` |  |
+| `context` | — | `undefined \| { usedTokens: number; maxTokens: number; inputTokens?: undefined \| number; outputTokens?: undefined \| number; estimatedCost?: undefined \| number }` |  |
+| `scrollButton` | `scroll-button` | `undefined \| false \| true` |  |
+| `search` | `search` | `undefined \| false \| true` |  |
+| `voice` | `voice` | `undefined \| false \| true` |  |
+| `slashCommands` | — | `undefined \| { id: string; label: string; description?: undefined \| string; category?: undefined \| string }[]` |  |
+| `slashActiveIds` | — | `undefined \| string[]` |  |
+| `slashCompact` | `slash-compact` | `undefined \| false \| true` |  |
+| `sidebarWidth` | `sidebar-width` | `undefined \| number` | Sidebar default width as a percent of the workspace (default 22). |
+| `sidebarMinWidth` | `sidebar-min-width` | `undefined \| number` | Sidebar min width in px (default 200). |
+| `sidebarMaxWidth` | `sidebar-max-width` | `undefined \| number` | Sidebar max width in px (default 420). |
+| `sidebarCollapsed` | `sidebar-collapsed` | `undefined \| false \| true` | Initial collapsed state of the sidebar (default false). |
+
+**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
+
+| Event | `detail` type | Description |
+|---|---|---|
+| `conversationselect` | `CustomEvent<{ id: string }>` | A conversation was selected in the sidebar. |
+| `messageaction` | `CustomEvent<{ messageId: string; action: "copy" \| "like" \| "dislike" \| "regenerate" \| "edit" }>` | An action button on a message was clicked. |
+| `modelchange` | `CustomEvent<{ modelId: string }>` | The header model switcher changed. |
+| `newchat` | `CustomEvent<Record<string, never>>` | The "New chat" button was clicked. |
+| `search` | `CustomEvent<Record<string, never>>` | The Search button was clicked. |
+| `sidebartoggle` | `CustomEvent<{ collapsed: false \| true }>` | The sidebar was collapsed or expanded. |
+| `slashselect` | `CustomEvent<{ command: { id: string; label: string; description?: undefined \| string; category?: undefined \| string } }>` | A slash command was chosen from the palette. |
+| `submit` | `CustomEvent<{ value: string; attachments: { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[] }>` | User submitted a message. |
+| `suggestionclick` | `CustomEvent<{ value: string }>` | A suggestion chip was clicked (only in `suggestion-mode="fill"`). |
+| `valuechange` | `CustomEvent<{ value: string }>` | Fired on every input change. |
+| `voice` | `CustomEvent<Record<string, never>>` | The Mic / voice button was clicked. |
+
+---
+