@kitnai/chat 0.6.0 → 0.8.0

package/src/stories/chat-scene.tsx

@@ -256,6 +256,7 @@ export function ChatScene(props: { class?: string }) {
           </div>
           <div class="flex items-center gap-2">
             <select
+              aria-label="Reading size"
               class="bg-muted/40 text-xs text-muted-foreground rounded-lg px-2 py-1.5 outline-none hover:bg-muted/60 transition-colors cursor-pointer"
               value={proseSize()}
               onChange={(e) => setProseSize(e.currentTarget.value as ProseSize)}
@@ -305,10 +306,10 @@ export function ChatScene(props: { class?: string }) {
                     understand why.
                   </MessageContent>
                   <MessageActions class="flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Edit message">
                       <Pencil class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
                       <Copy class="size-3.5" />
                     </Button>
                   </MessageActions>
@@ -325,16 +326,16 @@ export function ChatScene(props: { class?: string }) {
                     {assistantResponse1}
                   </MessageContent>
                   <MessageActions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
                       <Copy class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Good response">
                       <ThumbsUp class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Bad response">
                       <ThumbsDown class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Regenerate response">
                       <RefreshCw class="size-3.5" />
                     </Button>
                   </MessageActions>
@@ -349,10 +350,10 @@ export function ChatScene(props: { class?: string }) {
                     useEffect?
                   </MessageContent>
                   <MessageActions class="flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Edit message">
                       <Pencil class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
                       <Copy class="size-3.5" />
                     </Button>
                   </MessageActions>
@@ -369,16 +370,16 @@ export function ChatScene(props: { class?: string }) {
                     {assistantResponse2}
                   </MessageContent>
                   <MessageActions class="-ml-2.5 flex gap-0">
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
                       <Copy class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Good response">
                       <ThumbsUp class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Bad response">
                       <ThumbsDown class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Regenerate response">
                       <RefreshCw class="size-3.5" />
                     </Button>
                   </MessageActions>
@@ -445,16 +446,16 @@ export function ChatScene(props: { class?: string }) {
 SolidJS's fine-grained reactivity really shines here — updating a single item in React triggers a full virtual DOM diff of all 10,000 items, while SolidJS surgically updates only the changed DOM node.`}
                   </MessageContent>
                   <MessageActions class="-ml-2.5 flex gap-0">
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
                       <Copy class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Good response">
                       <ThumbsUp class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Bad response">
                       <ThumbsDown class="size-3.5" />
                     </Button>
-                    <Button variant="ghost" size="icon-sm" class="rounded-full">
+                    <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Regenerate response">
                       <RefreshCw class="size-3.5" />
                     </Button>
                   </MessageActions>
@@ -533,26 +534,26 @@ SolidJS's fine-grained reactivity really shines here — updating a single item
                 />
                 <PromptInputActions class="mt-2 flex w-full items-center justify-between gap-2 px-3 pb-3">
                   <div class="flex items-center gap-2">
-                    <Button variant="outline" size="icon-sm" class="rounded-full">
+                    <Button variant="outline" size="icon-sm" class="rounded-full" aria-label="Add">
                       <Plus class="size-4" />
                     </Button>
-                    <Button variant="outline" size="sm" class="rounded-full gap-1">
+                    <Button variant="outline" size="sm" class="rounded-full gap-1" aria-label="Search the web">
                       <Globe class="size-4" />
                       Search
                     </Button>
-                    <Button variant="outline" size="icon-sm" class="rounded-full">
+                    <Button variant="outline" size="icon-sm" class="rounded-full" aria-label="More options">
                       <MoreHorizontal class="size-4" />
                     </Button>
                   </div>
                   <div class="flex items-center gap-2">
-                    <Button variant="outline" size="icon-sm" class="rounded-full">
+                    <Button variant="outline" size="icon-sm" class="rounded-full" aria-label="Voice input">
                       <Mic class="size-4" />
                     </Button>
                     <Button
                       size="icon-sm"
                       class="rounded-full"
                       disabled={!inputValue().trim()}
-                    >
+                     aria-label="Send message">
                       <ArrowUp class="size-4" />
                     </Button>
                   </div>

package/src/stories/checkpoint-restore.stories.tsx

@@ -67,9 +67,9 @@ Key design decisions:
 - Support filtering via query params: \`?status=active&assignee=me\``}
                 </MessageContent>
                 <MessageActions>
-                  <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
-                  <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
-                  <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label="Copy message"><Copy class="size-3.5" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label="Good response"><ThumbsUp class="size-3.5" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label="Bad response"><ThumbsDown class="size-3.5" /></Button>
                 </MessageActions>
               </div>
             </Message>
@@ -128,9 +128,9 @@ function authMiddleware(req, res, next) {
 **The tradeoff:** you can't instantly revoke JWTs. Mitigate this with short expiry + a blocklist for critical cases (password change, account compromise).`}
                 </MessageContent>
                 <MessageActions>
-                  <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
-                  <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
-                  <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label="Copy message"><Copy class="size-3.5" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label="Good response"><ThumbsUp class="size-3.5" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label="Bad response"><ThumbsDown class="size-3.5" /></Button>
                 </MessageActions>
               </div>
             </Message>
@@ -197,9 +197,9 @@ interface ApiError {
 Always include the \`requestId\` -- it's invaluable for correlating client errors with server logs.`}
                 </MessageContent>
                 <MessageActions>
-                  <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
-                  <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
-                  <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label="Copy message"><Copy class="size-3.5" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label="Good response"><ThumbsUp class="size-3.5" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label="Bad response"><ThumbsDown class="size-3.5" /></Button>
                 </MessageActions>
               </div>
             </Message>
@@ -212,7 +212,7 @@ Always include the \`requestId\` -- it's invaluable for correlating client error
           <PromptInput>
             <PromptInputTextarea placeholder="Continue the API design..." />
             <PromptInputActions class="justify-end">
-              <Button variant="default" size="icon-sm" class="rounded-full">
+              <Button variant="default" size="icon-sm" class="rounded-full" aria-label="Send message">
                 <ArrowUp class="size-4" />
               </Button>
             </PromptInputActions>

package/src/stories/conversation-with-reasoning.stories.tsx

@@ -125,9 +125,9 @@ Move to a custom sync layer if:
               </MessageContent>
 
               <MessageActions>
-                <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
-                <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
-                <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+                <Button variant="ghost" size="icon-sm" aria-label="Copy message"><Copy class="size-3.5" /></Button>
+                <Button variant="ghost" size="icon-sm" aria-label="Good response"><ThumbsUp class="size-3.5" /></Button>
+                <Button variant="ghost" size="icon-sm" aria-label="Bad response"><ThumbsDown class="size-3.5" /></Button>
               </MessageActions>
             </div>
           </Message>
@@ -140,7 +140,7 @@ Move to a custom sync layer if:
         <PromptInput>
           <PromptInputTextarea placeholder="Ask a follow-up..." />
           <PromptInputActions class="justify-end">
-            <Button variant="default" size="icon-sm" class="rounded-full">
+            <Button variant="default" size="icon-sm" class="rounded-full" aria-label="Send message">
               <ArrowUp class="size-4" />
             </Button>
           </PromptInputActions>

package/src/stories/conversation-with-sources.stories.tsx

@@ -75,9 +75,9 @@ The pattern is consistent: CPU-intensive tasks like **image processing, cryptogr
               </SourceList>
 
               <MessageActions>
-                <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
-                <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
-                <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+                <Button variant="ghost" size="icon-sm" aria-label="Copy message"><Copy class="size-3.5" /></Button>
+                <Button variant="ghost" size="icon-sm" aria-label="Good response"><ThumbsUp class="size-3.5" /></Button>
+                <Button variant="ghost" size="icon-sm" aria-label="Bad response"><ThumbsDown class="size-3.5" /></Button>
               </MessageActions>
             </div>
           </Message>
@@ -139,9 +139,9 @@ The consensus from the Chrome team's analysis is: **use Wasm for compute-heavy i
               </SourceList>
 
               <MessageActions>
-                <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
-                <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
-                <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+                <Button variant="ghost" size="icon-sm" aria-label="Copy message"><Copy class="size-3.5" /></Button>
+                <Button variant="ghost" size="icon-sm" aria-label="Good response"><ThumbsUp class="size-3.5" /></Button>
+                <Button variant="ghost" size="icon-sm" aria-label="Bad response"><ThumbsDown class="size-3.5" /></Button>
               </MessageActions>
             </div>
           </Message>
@@ -154,7 +154,7 @@ The consensus from the Chrome team's analysis is: **use Wasm for compute-heavy i
         <PromptInput>
           <PromptInputTextarea placeholder="Ask about WebAssembly..." />
           <PromptInputActions class="justify-end">
-            <Button variant="default" size="icon-sm" class="rounded-full">
+            <Button variant="default" size="icon-sm" class="rounded-full" aria-label="Send message">
               <ArrowUp class="size-4" />
             </Button>
           </PromptInputActions>

package/src/stories/docs/Accessibility.mdx

@@ -14,7 +14,7 @@ This page describes the accessibility posture, the keyboard model, known limitat
 
 All text and UI chrome meet WCAG 2.1 AA contrast requirements (4.5:1 for body text, 3:1 for large text and UI components) in the default light and dark palettes.
 
-The `theme` attribute on every element (`light | dark | auto`) controls which token set loads. `auto` (the default) follows the OS `prefers-color-scheme` media query, so users who configure dark mode at the OS level get it automatically. Override either set with `--kitn-color-*` tokens — if you do, verify contrast yourself; the kit cannot audit tokens it does not control.
+The `theme` attribute on every element (`light | dark | auto`) controls which token set loads. `auto` (the default) follows the OS `prefers-color-scheme` media query, so users who configure dark mode at the OS level get it automatically. Override either set with `--kc-color-*` tokens — if you do, verify contrast yourself; the kit cannot audit tokens it does not control.
 
 ---
 
@@ -113,7 +113,7 @@ The kit does not carry a "WCAG AA certified" certification — no automated tool
 ## What integrators need to do
 
 1. **Do not hide focus rings.** The kit renders visible focus rings via `:focus-visible`. Do not add `outline: none` or `outline: 0` in your host-page CSS targeting `*` or the element host.
-2. **Verify contrast if you override tokens.** Use a contrast checker after overriding any `--kitn-color-*` token.
+2. **Verify contrast if you override tokens.** Use a contrast checker after overriding any `--kc-color-*` token.
 3. **Provide meaningful conversation titles.** The conversation list announces the `title` field to screen readers. "Chat 1" is less useful than "React integration help".
 4. **Set a meaningful `placeholder`.** The textarea placeholder doubles as an accessible name when no label is associated.
 5. **Check your theme choice.** Using `theme="light"` in a page the user has set to dark mode (or vice versa) can create contrast mismatches between kit components and host-page content. `theme="auto"` (the default) avoids this.

package/src/stories/docs/ForAIAgents.mdx

@@ -35,12 +35,12 @@ An HTML attribute is always a string, so passing `messages`, `models`, `context`
 `suggestions`, or `slashCommands` as an attribute silently fails.
 
 ```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 props (string / number / boolean) work as attributes — for example
@@ -60,7 +60,7 @@ Only scalar props (string / number / boolean) work as attributes — for example
 
 ```js
 import '@kitnai/chat/elements';
-const chat = document.querySelector('kitn-chat');
+const chat = document.querySelector('kc-chat');
 chat.messages = [];
 
 chat.addEventListener('submit', async (e) => {

package/src/stories/docs/GettingStarted.mdx

@@ -5,14 +5,14 @@ import * as FullChat from '../full-chat.stories';
 
 # Getting Started
 
-`<kitn-chat>` is **transport-agnostic**: you give it a `messages` array, it renders the conversation, and it emits a `submit` event when the user sends. You own the request and the streaming; the component owns the UI.
+`<kc-chat>` is **transport-agnostic**: you give it a `messages` array, it renders the conversation, and it emits a `submit` event when the user sends. You own the request and the streaming; the component owns the UI.
 
 ## A web component in ~10 lines
 
 Set rich data as JS **properties** and listen for **events** on the element:
 
 ```html
-<kitn-chat id="chat" style="display:block; height:100vh;"></kitn-chat>
+<kc-chat id="chat" style="display:block; height:100vh;"></kc-chat>
 
 <script type="module">
   import '@kitnai/chat/elements';

package/src/stories/docs/Installation.mdx

@@ -29,7 +29,7 @@ The `@kitnai/chat` entry is shipped as source, so your bundler tree-shakes it do
 
 ## Web components (React, Vue, plain HTML, …)
 
-Build the element bundle, then import it as a **side effect** — that registers `<kitn-chat>`, `<kitn-conversation-list>`, and `<kitn-prompt-input>`:
+Build the element bundle, then import it as a **side effect** — that registers `<kc-chat>`, `<kc-conversations>`, and `<kc-prompt-input>`:
 
 ```bash
 npm run build   # emits dist/kitn-chat.es.js
@@ -60,7 +60,7 @@ The element bundle is a self-contained ES module, so you can load it straight fr
   import 'https://unpkg.com/@kitnai/chat/dist/kitn-chat.es.js';
 </script>
 
-<kitn-chat></kitn-chat>
+<kc-chat></kc-chat>
 ```
 
 - The URLs above track the **latest** release (no version) — they never go stale, so they're ideal for demos and quick starts.

package/src/stories/docs/Integrations.mdx

@@ -13,13 +13,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
 Arrays and objects **must** be set as JavaScript **properties** on the DOM element — never as HTML attributes. An HTML attribute is always a string, so passing `messages`, `models`, `context`, `suggestions`, or `slashCommands` as an attribute silently fails or is ignored.
 
 ```js
-const chat = document.querySelector('kitn-chat');
+const chat = document.querySelector('kc-chat');
 
 // ✅ correct — set as a JS property
 chat.messages = [{ id: '1', role: 'assistant', content: 'Hello!' }];
 
 // ❌ wrong — HTML attribute, always a string, never works
-// <kitn-chat messages="[...]"></kitn-chat>
+// <kc-chat messages="[...]"></kc-chat>
 ```
 
 Scalar values (strings, numbers, booleans) work as attributes: `placeholder`, `loading`, `theme`, `prose-size`, and so on.
@@ -30,7 +30,7 @@ Scalar values (strings, numbers, booleans) work as attributes: `placeholder`, `l
 
 Import the element bundle once as a side-effect (it registers all `kitn-*` custom elements), then set properties and listen for events in a `<script type="module">` block.
 
-> **Want the whole shell in one tag?** `<kitn-chat-workspace>` bundles the conversation-list sidebar, the drag-to-resize handle, and the full chat thread together. Set `conversations`, `messages`, and optionally `models` as properties; listen for `conversationselect` and `submit`. See the <a href="?path=/docs/web-components-kitn-chat-workspace--docs">kitn-chat-workspace story</a> and the <a href="https://github.com/kitn-ai/kitn-chat/blob/main/docs/web-components.md#kitn-chat-workspace--kitnchatworkspace">web-components.md reference</a> for the full API.
+> **Want the whole shell in one tag?** `<kc-workspace>` bundles the conversation-list sidebar, the drag-to-resize handle, and the full chat thread together. Set `conversations`, `messages`, and optionally `models` as properties; listen for `conversationselect` and `submit`. See the <a href="?path=/docs/web-components-kc-workspace--docs">kc-workspace story</a> and the <a href="https://github.com/kitn-ai/chat/blob/main/docs/web-components.md#kc-workspace--kcworkspace">web-components.md reference</a> for the full API.
 
 ```html
 <!DOCTYPE html>
@@ -40,7 +40,7 @@ Import the element bundle once as a side-effect (it registers all `kitn-*` custo
   <link rel="stylesheet" href="./node_modules/@kitnai/chat/dist/theme.tokens.css" />
 </head>
 <body style="height: 100vh; margin: 0;">
-  <kitn-chat id="chat" style="display: block; height: 100%;"></kitn-chat>
+  <kc-chat id="chat" style="display: block; height: 100%;"></kc-chat>
 
   <script type="module">
     import '@kitnai/chat/elements';
@@ -89,10 +89,10 @@ Scalars can go directly in the HTML as attributes:
 
 ```html
 <!-- theme, placeholder, and loading are scalar → safe as attributes -->
-<kitn-chat
+<kc-chat
   theme="dark"
   placeholder="Ask anything…"
-></kitn-chat>
+></kc-chat>
 ```
 
 ---
@@ -102,7 +102,7 @@ Scalars can go directly in the HTML as attributes:
 The kit ships auto-generated, typed React wrappers under `@kitnai/chat/react`. They handle the ref plumbing internally — rich props are set as DOM **properties** and CustomEvents are exposed as `on<Event>` handlers, so you write idiomatic JSX without touching refs yourself.
 
 ```tsx
-import { KitnChat, KitnConversationList } from '@kitnai/chat/react';
+import { KcChat, KcConversations } from '@kitnai/chat/react';
 import { useState } from 'react';
 
 type Message = {
@@ -137,7 +137,7 @@ export function App() {
   };
 
   return (
-    <KitnChat
+    <KcChat
       messages={messages}
       suggestions={['Summarize the chat', 'Start fresh']}
       onSubmit={handleSubmit}
@@ -169,18 +169,18 @@ Component names are the PascalCase of the tag name:
 
 ```tsx
 import {
-  KitnChat,
-  KitnConversationList,
-  KitnPromptInput,
-  KitnMessage,
-  KitnMarkdown,
-  KitnCodeBlock,
-  KitnReasoning,
-  KitnTool,
-  KitnContextMeter,
-  KitnModelSwitcher,
-  KitnAttachments,
-  KitnLoader,
+  KcChat,
+  KcConversations,
+  KcPromptInput,
+  KcMessage,
+  KcMarkdown,
+  KcCodeBlock,
+  KcReasoning,
+  KcTool,
+  KcContext,
+  KcModelSwitcher,
+  KcAttachments,
+  KcLoader,
   // …all 27 elements
 } from '@kitnai/chat/react';
 ```
@@ -223,7 +223,7 @@ export function Chat() {
     return () => el.removeEventListener('submit', onSubmit);
   }, []);
 
-  return <kitn-chat ref={chatRef} style={{ display: 'block', height: '100vh' }} />;
+  return <kc-chat ref={chatRef} style={{ display: 'block', height: '100vh' }} />;
 }
 ```
 
@@ -254,7 +254,7 @@ const handleSubmit = (e: CustomEvent<{ value: string }>) => {
 
 <template>
   <!-- Arrays/objects → .prop modifier; scalars → plain attributes -->
-  <kitn-chat
+  <kc-chat
     :messages.prop="messages"
     placeholder="Ask anything…"
     theme="auto"
@@ -275,7 +275,7 @@ Add `@kitnai/chat/elements` to your `vite.config.ts` / `env.d.ts` once so Vue's
 
 ### Sidebar + chat together (Vue)
 
-Cross-element coordination goes through the host component — the `<kitn-conversation-list>` fires `select`, you update a reactive ref, and pass it into `<kitn-chat>`:
+Cross-element coordination goes through the host component — the `<kc-conversations>` fires `select`, you update a reactive ref, and pass it into `<kc-chat>`:
 
 ```html
 <script setup lang="ts">
@@ -297,13 +297,13 @@ const onSelect = (e: CustomEvent<{ id: string }>) => {
 
 <template>
   <div style="display: flex; height: 100vh;">
-    <kitn-conversation-list
+    <kc-conversations
       :conversations.prop="conversations"
       :active-id="activeId"
       style="width: 260px"
       @select="onSelect"
     />
-    <kitn-chat
+    <kc-chat
       :messages.prop="messages"
       style="flex: 1"
     />
@@ -333,7 +333,7 @@ Svelte's template compiler sets DOM **properties** when you bind with `bind:` or
 </script>
 
 <!-- use:action pattern to set properties -->
-<kitn-chat
+<kc-chat
   use:setProps={{ messages }}
   style="display: block; height: 100vh"
   on:submit={handleSubmit}
@@ -393,7 +393,7 @@ export class AppComponent {
 
 ```html
 <!-- app.component.html -->
-<kitn-chat
+<kc-chat
   [messages]="messages"
   [models]="models"
   [loading]="loading"
@@ -401,7 +401,7 @@ export class AppComponent {
   style="display: block; height: 100vh"
   (submit)="onSubmit($event)"
   (modelchange)="onModelChange($event)"
-></kitn-chat>
+></kc-chat>
 ```
 
 > **Why `[messages]` works:** Angular's `[prop]` binding writes to the element's DOM property (not an attribute), so the property-vs-attribute rule is satisfied automatically. Scalars like `theme` can be plain attributes. `CUSTOM_ELEMENTS_SCHEMA` is required so Angular doesn't error on the unknown `kitn-*` tags.
@@ -509,4 +509,4 @@ async function speakCloud(text) {
 
 ## Speech-to-text
 
-The reverse direction is built in — the kit ships `<kitn-voice-input>` (and a `VoiceInput` SolidJS component). Find it in the sidebar under the component stories.
+The reverse direction is built in — the kit ships `<kc-voice-input>` (and a `VoiceInput` SolidJS component). Find it in the sidebar under the component stories.

package/src/stories/docs/Introduction.mdx

@@ -13,9 +13,9 @@ Message threads, prompt inputs, streaming responses, markdown + code rendering,
 
 ## Why @kitnai/chat
 
-- **Works in any framework** — drop in the framework-agnostic **web components** (`<kitn-chat>`) and they just work in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS, so SolidJS apps can also import the components natively for full compositional control.
+- **Works in any framework** — drop in the framework-agnostic **web components** (`<kc-chat>`) and they just work in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS, so SolidJS apps can also import the components natively for full compositional control.
 - **Zero style conflicts** — the web components render in **Shadow DOM**, so the host page's CSS can't leak in and the kit's Tailwind can't leak out.
-- **Lightweight** — a markdown-only `<kitn-chat>` is **~61 KB gzip**, a single file. Syntax highlighting loads **on demand, per language, with no WASM** — and never loads at all if you don't render code.
+- **Lightweight** — a markdown-only `<kc-chat>` is **~61 KB gzip**, a single file. Syntax highlighting loads **on demand, per language, with no WASM** — and never loads at all if you don't render code.
 - **~50 composable components** across three layers: headless primitives → accessible UI primitives (built in-house, WCAG 2.1 AA — no third-party UI dependency) → AI feature components.
 - **Themeable** — restyle everything by overriding a handful of `--color-*` design tokens.
 
@@ -26,7 +26,7 @@ The kit ships at two layers, and the sidebar reflects that. **Use the right one
 - **Web Components** — the framework-agnostic `<kitn-*>` custom elements. **This is what to copy into a React, Vue, Angular, Svelte, or plain-HTML app.** Data goes on JS properties, interactions come back as events.
 - **Components · SolidJS** and **UI · SolidJS** — the **native SolidJS** components (feature components) and primitives (Button, Dropdown, HoverCard, …) that the web components are *built from*. Their snippets are SolidJS JSX, so **only copy these into a SolidJS app**.
 
-In other words: the `<kitn-chat>` web component is a thin facade over the SolidJS `ChatContainer`/`Message`/… components — same UI, different consumption model. When in doubt, reach for **Web Components**.
+In other words: the `<kc-chat>` web component is a thin facade over the SolidJS `ChatContainer`/`Message`/… components — same UI, different consumption model. When in doubt, reach for **Web Components**.
 
 ## Where to next
 

package/src/stories/docs/Theming.mdx

@@ -64,7 +64,7 @@ document.documentElement.classList.toggle('dark');
 
 ## Appearance settings
 
-`ChatConfig` (SolidJS) and matching properties on `<kitn-chat>` control non-color appearance:
+`ChatConfig` (SolidJS) and matching properties on `<kc-chat>` control non-color appearance:
 
 | Setting | Values | Purpose |
 | --- | --- | --- |
@@ -79,7 +79,7 @@ document.documentElement.classList.toggle('dark');
 ```
 
 ```html
-<kitn-chat prose-size="base" code-theme="github-dark-dimmed"></kitn-chat>
+<kc-chat prose-size="base" code-theme="github-dark-dimmed"></kc-chat>
 ```
 
 That's the whole theming surface — tokens for color, `ChatConfig` for sizing and code. Everything else is encapsulated.

package/src/stories/docs/element-controls.ts

@@ -0,0 +1,60 @@
+import meta from '../../elements/element-meta.json';
+
+type Prop = { name: string; type: string; default?: string; scalar: boolean };
+type ElementMeta = { tag: string; props: Prop[] };
+const all = meta as unknown as ElementMeta[];
+
+// A small, consistent pointer at the top of every Web Component's Docs tab,
+// directing readers to the dedicated API tab (which holds the full generated
+// spec). Keeps the Docs tab focused on examples while keeping the spec one click
+// away — and discoverable, since everyone reads the description first.
+const API_POINTER =
+  '> **Full API reference** — every property, event, default and token is on the **API** tab above.';
+
+/**
+ * Build a Storybook `docs.description` from an element's intro paragraphs, with
+ * the API-tab pointer prepended. The generated spec itself lives in the **API**
+ * tab (see `.storybook/api-tab.tsx`), not inline here.
+ * (`tag` is kept in the signature so callers don't churn if we re-inline later.)
+ */
+export function specDescription(_tag: string, paragraphs: string[]): { component: string } {
+  return { component: [API_POINTER, ...paragraphs].join('\n\n') };
+}
+
+// The Components/UI sibling of API_POINTER — same idea, component vocabulary
+// (props/callbacks/slots rather than properties/events/attributes).
+const COMPONENT_POINTER =
+  '> **Full API reference** — every prop, callback, slot and token is on the **API** tab above.';
+
+/**
+ * Build a Storybook `docs.description` for a SolidJS/UI component story, with the
+ * API-tab pointer prepended. The generated spec (props/callbacks/slots/tokens)
+ * lives on the **API** tab (see `.storybook/api-tab.tsx`), from
+ * `src/components/component-meta.json`.
+ */
+export function componentDescription(paragraphs: string[]): { component: string } {
+  return { component: [COMPONENT_POINTER, ...paragraphs].join('\n\n') };
+}
+
+const enumValues = (type: string): string[] | null => {
+  // string-literal unions like "'light' | 'dark' | 'auto'"
+  const parts = type.split('|').map((s) => s.trim());
+  if (parts.length > 1 && parts.every((p) => /^'[^']*'$/.test(p))) return parts.map((p) => p.slice(1, -1));
+  return null;
+};
+
+/** Storybook argTypes for an element's scalar props (theme select, booleans, text, number). */
+export function argTypesFor(tag: string): Record<string, unknown> {
+  const el = all.find((e) => e.tag === tag);
+  if (!el) return {};
+  const out: Record<string, unknown> = {};
+  for (const p of el.props) {
+    if (!p.scalar) continue;
+    const values = enumValues(p.type);
+    if (values) out[p.name] = { control: 'select', options: values };
+    else if (/boolean/.test(p.type)) out[p.name] = { control: 'boolean' };
+    else if (/number/.test(p.type)) out[p.name] = { control: 'number' };
+    else out[p.name] = { control: 'text' };
+  }
+  return out;
+}

package/src/stories/docs/theme-editor/theme-editor.tsx

@@ -110,6 +110,7 @@ export function ThemeEditor() {
         </div>
         <div class="flex items-center gap-2">
           <select
+            aria-label="Theme preset"
             class="bg-input border border-border rounded-md text-xs px-2 h-8"
             value={presetName()}
             onChange={(e) => loadPreset(e.currentTarget.value)}