@kitnai/chat 0.6.0 → 0.8.0

package/dist/llms/llms.txt

@@ -1,7 +1,7 @@
 <!-- AUTO-GENERATED by scripts/gen-llms.mjs — do not edit by hand. Run `npm run build`. -->
 # @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
 
@@ -16,11 +16,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`).
@@ -30,12 +30,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
 
@@ -43,9 +43,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 {
@@ -64,31 +64,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;
 }
 ```
 
@@ -97,7 +97,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

package/dist/schemas/card-envelope.schema.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/card-envelope.schema.json",
+  "title": "CardEnvelope",
+  "description": "A card the agent/server asks the chat to render. `data` validates against the per-type schema.",
+  "type": "object",
+  "required": ["type", "id", "data"],
+  "properties": {
+    "type": { "type": "string", "minLength": 1 },
+    "id": { "type": "string", "minLength": 1 },
+    "data": {},
+    "title": { "type": "string" }
+  }
+}

package/dist/schemas/card-event.schema.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/card-event.schema.json",
+  "title": "CardEvent",
+  "description": "An event a card emits up to the host. `kind` discriminates the payload.",
+  "type": "object",
+  "required": ["kind"],
+  "properties": {
+    "kind": { "enum": ["ready", "submit-data", "action", "send-prompt", "open", "resize", "state", "dismiss", "error"] },
+    "cardId": { "type": "string" }
+  }
+}

package/dist/schemas/confirm.schema.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/confirm.schema.json",
+  "title": "ConfirmCardData",
+  "description": "Data payload for a `confirm` card (CardEnvelope.data when type='confirm').",
+  "type": "object",
+  "required": ["actions"],
+  "properties": {
+    "heading": {
+      "type": "string",
+      "description": "Optional in-body heading. Distinct from CardEnvelope.title (the card chrome title)."
+    },
+    "body": {
+      "type": "string",
+      "description": "Body text. Plain text in v1 (rendered safely; no HTML injection)."
+    },
+    "tone": {
+      "type": "string",
+      "enum": ["default", "warning", "danger"],
+      "default": "default",
+      "description": "Overall card tone; 'danger' adds a warning icon + accent for destructive approvals.",
+      "x-kc-control": "tone"
+    },
+    "actions": {
+      "type": "array",
+      "minItems": 1,
+      "maxItems": 4,
+      "description": "The choice set. Rendered as buttons in order; max 4 keeps it a decision, not a menu.",
+      "items": {
+        "type": "object",
+        "required": ["id", "label"],
+        "properties": {
+          "id": {
+            "type": "string",
+            "minLength": 1,
+            "description": "Emitted as CardEvent.action. Must be unique within `actions`.",
+            "x-kc-unique": true
+          },
+          "label": { "type": "string", "minLength": 1, "description": "Visible button label." },
+          "style": {
+            "type": "string",
+            "enum": ["primary", "default", "destructive"],
+            "default": "default",
+            "description": "Button emphasis. 'destructive' = red/danger; 'primary' = filled accent.",
+            "x-kc-control": "button-style"
+          },
+          "payload": {
+            "description": "Optional opaque payload echoed back in CardEvent.payload (any JSON)."
+          },
+          "default": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, this action is the keyboard default (Enter) and gets initial focus. At most one should be true; the card uses the first if several are.",
+            "x-kc-default-action": true
+          }
+        }
+      }
+    },
+    "dismissible": {
+      "type": "boolean",
+      "default": false,
+      "description": "Show a close affordance that emits the `dismiss` verb."
+    }
+  }
+}

package/dist/schemas/embed.schema.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/embed.schema.json",
+  "title": "EmbedCardData",
+  "description": "Lazy media-embed payload (YouTube / Vimeo / generic player URL).",
+  "type": "object",
+  "x-kc-card-type": "embed",
+  "x-kc-contract-version": "1",
+  "required": ["provider"],
+  "additionalProperties": false,
+  "properties": {
+    "provider": {
+      "type": "string",
+      "enum": ["youtube", "vimeo", "generic"],
+      "description": "Media provider. 'generic' frames `url` directly (must be an https embeddable player URL whose origin is app-allowlisted).",
+      "x-kc-control": "select"
+    },
+    "id": {
+      "type": "string",
+      "description": "Provider video id (required for youtube/vimeo when `url` is absent). e.g. 'dQw4w9WgXcQ'.",
+      "maxLength": 64,
+      "pattern": "^[A-Za-z0-9_-]+$"
+    },
+    "url": {
+      "type": "string",
+      "format": "uri",
+      "description": "Full media/watch URL. For youtube/vimeo it is parsed to an id; for 'generic' it is the embeddable player src (https only).",
+      "x-kc-format": "url"
+    },
+    "title": {
+      "type": "string",
+      "description": "Accessible title for the player iframe + the poster label. Strongly recommended for a11y.",
+      "maxLength": 300
+    },
+    "poster": {
+      "type": "string",
+      "format": "uri",
+      "description": "Thumbnail shown before play. When omitted, youtube/vimeo derive a default thumbnail; 'generic' shows a neutral play placeholder.",
+      "x-kc-format": "url"
+    },
+    "start": {
+      "type": "integer",
+      "minimum": 0,
+      "description": "Optional start offset in seconds.",
+      "x-kc-unit": "seconds"
+    },
+    "aspectRatio": {
+      "type": "string",
+      "enum": ["16:9", "4:3", "1:1", "9:16"],
+      "default": "16:9",
+      "description": "Player box aspect ratio (CSS aspect-ratio).",
+      "x-kc-control": "select"
+    }
+  },
+  "allOf": [
+    {
+      "if": { "properties": { "provider": { "const": "generic" } } },
+      "then": { "required": ["url"] }
+    },
+    {
+      "if": { "properties": { "provider": { "enum": ["youtube", "vimeo"] } } },
+      "then": { "anyOf": [{ "required": ["id"] }, { "required": ["url"] }] }
+    }
+  ]
+}

package/dist/schemas/form.result.schema.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/form.result.schema.json",
+  "title": "kc-form submit-data payload",
+  "description": "The CardEvent {kind:'submit-data'} `data` for a form card: an object that validates against the form-definition schema that was sent down in CardEnvelope.data. Standard JSON Schema validation (type/enum/required/min-max/length/pattern) holds. Optional empty strings are omitted.",
+  "type": "object"
+}

package/dist/schemas/form.schema.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/form.schema.json",
+  "title": "kc-form data (a form definition)",
+  "description": "The CardEnvelope.data for a card of type 'form': a JSON Schema (type:'object') describing the fields kc-form renders, plus optional x-kc-* UI hints. The same schema validates the submission.",
+  "type": "object",
+  "required": ["type", "properties"],
+  "properties": {
+    "type": { "const": "object" },
+    "title": { "type": "string" },
+    "description": { "type": "string" },
+    "required": { "type": "array", "items": { "type": "string" } },
+    "properties": {
+      "type": "object"
+    },
+    "x-kc-order": { "type": "array", "items": { "type": "string" } },
+    "x-kc-inlineMax": { "type": "integer", "minimum": 1 },
+    "x-kc-submitLabel": { "type": "string" },
+    "x-kc-dismissible": { "type": "boolean" },
+    "x-kc-actions": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": ["id", "label"],
+        "properties": {
+          "id": { "type": "string" },
+          "label": { "type": "string" },
+          "variant": { "enum": ["default", "ghost", "outline"] }
+        }
+      }
+    }
+  }
+}

package/dist/schemas/link.schema.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/link.schema.json",
+  "title": "LinkCardData",
+  "description": "Rich link / Open-Graph preview payload. The card renders from this; it never fetches.",
+  "type": "object",
+  "x-kc-card-type": "link",
+  "x-kc-contract-version": "1",
+  "required": ["url"],
+  "additionalProperties": false,
+  "properties": {
+    "url": {
+      "type": "string",
+      "format": "uri",
+      "description": "Canonical destination. Opened via the contract `open` verb (target 'tab').",
+      "x-kc-format": "url"
+    },
+    "title": {
+      "type": "string",
+      "description": "OG title (og:title). Falls back to the domain when absent.",
+      "maxLength": 300
+    },
+    "description": {
+      "type": "string",
+      "description": "OG description (og:description). Clamped to 3 lines in the UI.",
+      "maxLength": 1000
+    },
+    "image": {
+      "type": "string",
+      "format": "uri",
+      "description": "Preview image (og:image). Optional; the card degrades gracefully when missing or it fails to load.",
+      "x-kc-format": "url"
+    },
+    "imageAlt": {
+      "type": "string",
+      "description": "Alt text for the preview image. Defaults to the title (or empty = decorative) when omitted.",
+      "maxLength": 300
+    },
+    "favicon": {
+      "type": "string",
+      "format": "uri",
+      "description": "Site favicon shown next to the domain.",
+      "x-kc-format": "url"
+    },
+    "domain": {
+      "type": "string",
+      "description": "Display domain (e.g. 'example.com'). Derived from `url` when omitted.",
+      "maxLength": 253
+    },
+    "siteName": {
+      "type": "string",
+      "description": "OG site name (og:site_name). Shown in place of the domain when present.",
+      "maxLength": 200
+    }
+  }
+}

package/dist/schemas/task-list.result.schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/task-list.result.schema.json",
+  "title": "TaskListCardResult",
+  "description": "Payload of CardEvent { kind: 'submit-data' } from a task-list card.",
+  "type": "object",
+  "required": ["selected"],
+  "properties": {
+    "selected": {
+      "type": "array",
+      "description": "Ids of the checked tasks, in the order they appear in `tasks`. Subset of the input task ids.",
+      "items": { "type": "string", "minLength": 1 },
+      "uniqueItems": true
+    }
+  }
+}

package/dist/schemas/task-list.schema.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/task-list.schema.json",
+  "title": "TaskListCardData",
+  "description": "Data payload for a `task-list` card (CardEnvelope.data when type='task-list').",
+  "type": "object",
+  "required": ["tasks"],
+  "properties": {
+    "mode": {
+      "type": "string",
+      "enum": ["select"],
+      "default": "select",
+      "description": "v1 supports only 'select' (toggle + confirm). 'progress' (live AG-UI status) is a future enum value; restricting it now keeps the wire forward-compatible.",
+      "x-kc-mode": true
+    },
+    "heading": {
+      "type": "string",
+      "description": "Optional in-body heading; distinct from CardEnvelope.title."
+    },
+    "tasks": {
+      "type": "array",
+      "minItems": 1,
+      "description": "The selectable rows, rendered in order.",
+      "items": {
+        "type": "object",
+        "required": ["id", "label"],
+        "properties": {
+          "id": {
+            "type": "string",
+            "minLength": 1,
+            "description": "Stable id; the selected ids are returned in the result. Unique within `tasks`.",
+            "x-kc-unique": true
+          },
+          "label": { "type": "string", "minLength": 1, "description": "Row label." },
+          "description": { "type": "string", "description": "Optional secondary line under the label." },
+          "checked": {
+            "type": "boolean",
+            "default": false,
+            "description": "Initial checked state of the row."
+          },
+          "disabled": {
+            "type": "boolean",
+            "default": false,
+            "description": "Row is shown but not toggleable (and excluded from select-all)."
+          }
+        }
+      }
+    },
+    "selectAll": {
+      "type": "boolean",
+      "default": false,
+      "description": "Render a master select-all checkbox above the list.",
+      "x-kc-control": "select-all"
+    },
+    "confirmLabel": {
+      "type": "string",
+      "default": "Confirm",
+      "description": "Label for the confirm button."
+    },
+    "allowEmpty": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, confirm is enabled with zero selected (emits { selected: [] }). If false, confirm is disabled until >=1 selected."
+    },
+    "min": {
+      "type": "integer",
+      "minimum": 0,
+      "description": "Optional minimum number that must be selected to confirm.",
+      "x-kc-select-min": true
+    },
+    "max": {
+      "type": "integer",
+      "minimum": 1,
+      "description": "Optional maximum selectable; further toggles are blocked once reached.",
+      "x-kc-select-max": true
+    }
+  }
+}

package/dist/theme.tokens.css

@@ -3,64 +3,64 @@
    are self-themed and don't need this; it themes host-page chrome / rebrands). */
 
 :root {
-  --color-background: var(--kitn-color-background, hsl(0 0% 100%));
-  --color-foreground: var(--kitn-color-foreground, hsl(240 10% 3.9%));
-  --color-card: var(--kitn-color-card, hsl(0 0% 100%));
-  --color-card-foreground: var(--kitn-color-card-foreground, hsl(240 10% 3.9%));
-  --color-popover: var(--kitn-color-popover, hsl(0 0% 100%));
-  --color-popover-foreground: var(--kitn-color-popover-foreground, hsl(240 10% 3.9%));
-  --color-primary: var(--kitn-color-primary, hsl(240 5.9% 10%));
-  --color-primary-foreground: var(--kitn-color-primary-foreground, hsl(0 0% 98%));
-  --color-secondary: var(--kitn-color-secondary, hsl(240 4.8% 95.9%));
-  --color-secondary-foreground: var(--kitn-color-secondary-foreground, hsl(240 5.9% 10%));
-  --color-muted: var(--kitn-color-muted, hsl(240 4.8% 95.9%));
-  --color-muted-foreground: var(--kitn-color-muted-foreground, hsl(240 3.8% 43%));
-  --color-accent: var(--kitn-color-accent, hsl(240 4.8% 95.9%));
-  --color-accent-foreground: var(--kitn-color-accent-foreground, hsl(240 5.9% 10%));
-  --color-destructive: var(--kitn-color-destructive, hsl(0 84.2% 60.2%));
-  --color-destructive-foreground: var(--kitn-color-destructive-foreground, hsl(0 0% 98%));
-  --color-border: var(--kitn-color-border, hsl(240 5.9% 90%));
-  --color-input: var(--kitn-color-input, hsl(240 5.9% 90%));
+  --color-background: var(--kc-color-background, hsl(0 0% 100%));
+  --color-foreground: var(--kc-color-foreground, hsl(240 10% 3.9%));
+  --color-card: var(--kc-color-card, hsl(0 0% 100%));
+  --color-card-foreground: var(--kc-color-card-foreground, hsl(240 10% 3.9%));
+  --color-popover: var(--kc-color-popover, hsl(0 0% 100%));
+  --color-popover-foreground: var(--kc-color-popover-foreground, hsl(240 10% 3.9%));
+  --color-primary: var(--kc-color-primary, hsl(240 5.9% 10%));
+  --color-primary-foreground: var(--kc-color-primary-foreground, hsl(0 0% 98%));
+  --color-secondary: var(--kc-color-secondary, hsl(240 4.8% 95.9%));
+  --color-secondary-foreground: var(--kc-color-secondary-foreground, hsl(240 5.9% 10%));
+  --color-muted: var(--kc-color-muted, hsl(240 4.8% 95.9%));
+  --color-muted-foreground: var(--kc-color-muted-foreground, hsl(240 3.8% 43%));
+  --color-accent: var(--kc-color-accent, hsl(240 4.8% 95.9%));
+  --color-accent-foreground: var(--kc-color-accent-foreground, hsl(240 5.9% 10%));
+  --color-destructive: var(--kc-color-destructive, hsl(0 72% 45%));
+  --color-destructive-foreground: var(--kc-color-destructive-foreground, hsl(0 0% 98%));
+  --color-border: var(--kc-color-border, hsl(240 5.9% 90%));
+  --color-input: var(--kc-color-input, hsl(240 5.9% 90%));
   /* Focus ring — a deliberate blue (not a neutral) so keyboard focus is always
      obvious and on-brand in both modes. Light uses a strong blue; dark uses a
      brighter one for contrast on dark surfaces. Both clear WCAG 2.1 non-text
-     contrast (≥3:1) against the kit's backgrounds. Override via --kitn-color-ring. */
-  --color-ring: var(--kitn-color-ring, hsl(217 91% 53%));
+     contrast (≥3:1) against the kit's backgrounds. Override via --kc-color-ring. */
+  --color-ring: var(--kc-color-ring, hsl(217 91% 53%));
   /* Custom scrollbars — thin, rounded, subtle; thumb strengthens on hover. A
      consistent cross-platform look (the kit styles its OWN scroll regions inside
      the shadow root; the track stays transparent so nothing is forced where no
-     scrollbar is needed). Override via --kitn-color-scrollbar-thumb(-hover). */
-  --color-scrollbar-thumb: var(--kitn-color-scrollbar-thumb, hsl(240 5% 80%));
-  --color-scrollbar-thumb-hover: var(--kitn-color-scrollbar-thumb-hover, hsl(240 4% 64%));
-  --color-sidebar: var(--kitn-color-sidebar, hsl(0 0% 100%));
+     scrollbar is needed). Override via --kc-color-scrollbar-thumb(-hover). */
+  --color-scrollbar-thumb: var(--kc-color-scrollbar-thumb, hsl(240 5% 80%));
+  --color-scrollbar-thumb-hover: var(--kc-color-scrollbar-thumb-hover, hsl(240 4% 64%));
+  --color-sidebar: var(--kc-color-sidebar, hsl(0 0% 100%));
   /* Inline `code` accent. Blue text on a translucent blue chip. */
-  --color-code-foreground: var(--kitn-color-code-foreground, hsl(224.3 76.3% 48%));
+  --color-code-foreground: var(--kc-color-code-foreground, hsl(224.3 76.3% 48%));
   /* Tool/status chip hues. Each chip is hue text over a 15% translucent fill of
      the SAME hue (set in tool.tsx). The bare hue is too light to reach WCAG AA
      (4.5:1) on the faint fill in LIGHT mode, so the light values are darkened;
      dark mode keeps brighter hues for AA on the dark fill. Override via
-     --kitn-color-tool-* to retheme. */
-  --color-tool-blue: var(--kitn-color-tool-blue, hsl(217 91% 38%));
-  --color-tool-amber: var(--kitn-color-tool-amber, hsl(38 92% 28%));
-  --color-tool-green: var(--kitn-color-tool-green, hsl(142 71% 26%));
-  --color-tool-red: var(--kitn-color-tool-red, hsl(0 72% 42%));
-  --radius: var(--kitn-radius, 0.6rem);
+     --kc-color-tool-* to retheme. */
+  --color-tool-blue: var(--kc-color-tool-blue, hsl(217 91% 38%));
+  --color-tool-amber: var(--kc-color-tool-amber, hsl(38 92% 28%));
+  --color-tool-green: var(--kc-color-tool-green, hsl(142 71% 26%));
+  --color-tool-red: var(--kc-color-tool-red, hsl(0 72% 42%));
+  --radius: var(--kc-radius, 0.6rem);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   /* Typography scale — semantic sizes shared by all components. Each generates a
      Tailwind utility (text-caption / text-meta / text-body / text-title). To
-     restyle the kit's typography, override the namespaced --kitn-text-* token on
-     :root (e.g. `--kitn-text-body: 0.9375rem`) — it pierces the Shadow DOM via the
-     var() fallback, exactly like the --kitn-color-* tokens. The bare --text-*
+     restyle the kit's typography, override the namespaced --kc-text-* token on
+     :root (e.g. `--kc-text-body: 0.9375rem`) — it pierces the Shadow DOM via the
+     var() fallback, exactly like the --kc-color-* tokens. The bare --text-*
      names stay internal so a host's own --text-* can't collide. (Message/markdown/
      input reading size also scales with the `proseSize` prop; these tokens cover
      the fixed chrome & controls.) */
-  --text-caption: var(--kitn-text-caption, 0.6875rem);  --text-caption--line-height: 1rem;      /* 11px — micro labels, badges, sub-counts */
-  --text-meta: var(--kitn-text-meta, 0.75rem);     --text-meta--line-height: 1.1rem;       /* 12px — controls, toggles, switchers, captions */
-  --text-body: var(--kitn-text-body, 0.875rem);    --text-body--line-height: 1.45rem;      /* 14px — primary reading text */
-  --text-title: var(--kitn-text-title, 1rem);        --text-title--line-height: 1.5rem;      /* 16px — emphasis / headers */
+  --text-caption: var(--kc-text-caption, 0.6875rem);  --text-caption--line-height: 1rem;      /* 11px — micro labels, badges, sub-counts */
+  --text-meta: var(--kc-text-meta, 0.75rem);     --text-meta--line-height: 1.1rem;       /* 12px — controls, toggles, switchers, captions */
+  --text-body: var(--kc-text-body, 0.875rem);    --text-body--line-height: 1.45rem;      /* 14px — primary reading text */
+  --text-title: var(--kc-text-title, 1rem);        --text-title--line-height: 1.5rem;      /* 16px — emphasis / headers */
 }
 
 @keyframes typing { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-2px); opacity: 1 } }
@@ -78,35 +78,35 @@
 @keyframes collapsible-down { from { height: 0; opacity: 0 } to { height: var(--kb-collapsible-content-height); opacity: 1 } }
 @keyframes collapsible-up { from { height: var(--kb-collapsible-content-height); opacity: 1 } to { height: 0; opacity: 0 } }
 .dark {
-  --color-background: var(--kitn-color-background, hsl(50 2% 9%));
-  --color-foreground: var(--kitn-color-foreground, hsl(0 0% 98%));
-  --color-card: var(--kitn-color-card, hsl(45 4% 12%));
-  --color-card-foreground: var(--kitn-color-card-foreground, hsl(0 0% 98%));
-  --color-popover: var(--kitn-color-popover, hsl(45 4% 12%));
-  --color-popover-foreground: var(--kitn-color-popover-foreground, hsl(0 0% 98%));
-  --color-primary: var(--kitn-color-primary, hsl(0 0% 98%));
-  --color-primary-foreground: var(--kitn-color-primary-foreground, hsl(45 4% 11%));
-  --color-secondary: var(--kitn-color-secondary, hsl(45 4% 17%));
-  --color-secondary-foreground: var(--kitn-color-secondary-foreground, hsl(0 0% 98%));
-  --color-muted: var(--kitn-color-muted, hsl(45 4% 17%));
-  --color-muted-foreground: var(--kitn-color-muted-foreground, hsl(45 4% 64%));
-  --color-accent: var(--kitn-color-accent, hsl(45 4% 17%));
-  --color-accent-foreground: var(--kitn-color-accent-foreground, hsl(0 0% 98%));
-  --color-destructive: var(--kitn-color-destructive, hsl(0 62.8% 30.6%));
-  --color-destructive-foreground: var(--kitn-color-destructive-foreground, hsl(0 0% 98%));
-  --color-border: var(--kitn-color-border, hsl(45 4% 17%));
-  --color-input: var(--kitn-color-input, hsl(45 4% 17%));
-  --color-ring: var(--kitn-color-ring, hsl(217 91% 68%));
-  --color-scrollbar-thumb: var(--kitn-color-scrollbar-thumb, hsl(45 3% 30%));
-  --color-scrollbar-thumb-hover: var(--kitn-color-scrollbar-thumb-hover, hsl(45 3% 42%));
-  --color-sidebar: var(--kitn-color-sidebar, hsl(50 2% 7%));
-  --color-code-foreground: var(--kitn-color-code-foreground, hsl(213 94% 78%));
+  --color-background: var(--kc-color-background, hsl(50 2% 9%));
+  --color-foreground: var(--kc-color-foreground, hsl(0 0% 98%));
+  --color-card: var(--kc-color-card, hsl(45 4% 12%));
+  --color-card-foreground: var(--kc-color-card-foreground, hsl(0 0% 98%));
+  --color-popover: var(--kc-color-popover, hsl(45 4% 12%));
+  --color-popover-foreground: var(--kc-color-popover-foreground, hsl(0 0% 98%));
+  --color-primary: var(--kc-color-primary, hsl(0 0% 98%));
+  --color-primary-foreground: var(--kc-color-primary-foreground, hsl(45 4% 11%));
+  --color-secondary: var(--kc-color-secondary, hsl(45 4% 17%));
+  --color-secondary-foreground: var(--kc-color-secondary-foreground, hsl(0 0% 98%));
+  --color-muted: var(--kc-color-muted, hsl(45 4% 17%));
+  --color-muted-foreground: var(--kc-color-muted-foreground, hsl(45 4% 64%));
+  --color-accent: var(--kc-color-accent, hsl(45 4% 17%));
+  --color-accent-foreground: var(--kc-color-accent-foreground, hsl(0 0% 98%));
+  --color-destructive: var(--kc-color-destructive, hsl(0 62.8% 30.6%));
+  --color-destructive-foreground: var(--kc-color-destructive-foreground, hsl(0 0% 98%));
+  --color-border: var(--kc-color-border, hsl(45 4% 17%));
+  --color-input: var(--kc-color-input, hsl(45 4% 17%));
+  --color-ring: var(--kc-color-ring, hsl(217 91% 68%));
+  --color-scrollbar-thumb: var(--kc-color-scrollbar-thumb, hsl(45 3% 30%));
+  --color-scrollbar-thumb-hover: var(--kc-color-scrollbar-thumb-hover, hsl(45 3% 42%));
+  --color-sidebar: var(--kc-color-sidebar, hsl(50 2% 7%));
+  --color-code-foreground: var(--kc-color-code-foreground, hsl(213 94% 78%));
 
   /* Tool/status chip hues — dark mode. Brighter hues reach AA on the dark fill. */
-  --color-tool-blue: var(--kitn-color-tool-blue, hsl(217 91% 70%));
-  --color-tool-amber: var(--kitn-color-tool-amber, hsl(38 92% 50%));
-  --color-tool-green: var(--kitn-color-tool-green, hsl(142 71% 45%));
-  --color-tool-red: var(--kitn-color-tool-red, hsl(0 84% 70%));
+  --color-tool-blue: var(--kc-color-tool-blue, hsl(217 91% 70%));
+  --color-tool-amber: var(--kc-color-tool-amber, hsl(38 92% 50%));
+  --color-tool-green: var(--kc-color-tool-green, hsl(142 71% 45%));
+  --color-tool-red: var(--kc-color-tool-red, hsl(0 84% 70%));
 }
 
 /* Self-contained markdown styling — replaces the typography plugin's `prose`.