@kitnai/chat 0.7.0 → 0.8.1

package/src/primitives/pdf-preview.ts

@@ -0,0 +1,121 @@
+// src/primitives/pdf-preview.ts
+// On-demand PDF renderer built on pdf.js, loaded from a CDN only when a PDF is
+// actually shown — so a component set that never renders a PDF ships and runs with
+// ZERO pdf.js bytes (the ~482 KB gzip library is never fetched). When a PDF does
+// appear, pdf.js is dynamically imported from the pinned CDN build and every page
+// is rendered to a <canvas>. Hosts override the loader (self-host / CSP / pin) or
+// disable inline rendering via configurePdfPreview(). Mirrors highlighter.ts.
+
+/** Minimal shape of the pdf.js module + objects we rely on. */
+export interface PdfViewportLike {
+  width: number;
+  height: number;
+}
+export interface PdfPageLike {
+  getViewport(opts: { scale: number }): PdfViewportLike;
+  render(opts: {
+    canvasContext: CanvasRenderingContext2D | null;
+    viewport: PdfViewportLike;
+  }): { promise: Promise<void> };
+}
+export interface PdfDocumentLike {
+  numPages: number;
+  getPage(n: number): Promise<PdfPageLike>;
+}
+export interface PdfjsLike {
+  getDocument(src: { url: string }): { promise: Promise<PdfDocumentLike> };
+  GlobalWorkerOptions: { workerSrc: string };
+}
+
+export interface PdfPreviewOptions {
+  /** Turn inline PDF rendering on/off globally. When false, always show the card. */
+  enabled?: boolean;
+  /** Override the pdf.js module loader (self-host / CSP / version pin). */
+  load?: () => Promise<PdfjsLike>;
+  /** Worker URL. Default = the matching jsDelivr worker for the pinned version. */
+  workerSrc?: string;
+}
+
+/** Pinned, exact (reproducible) — NOT a range. */
+const PDFJS_VERSION = '6.0.227';
+const CDN = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${PDFJS_VERSION}/build`;
+const DEFAULT_LOAD = (): Promise<PdfjsLike> =>
+  // Template literal + @vite-ignore keeps this a runtime fetch (never bundled).
+  import(/* @vite-ignore */ `${CDN}/pdf.min.mjs`) as Promise<PdfjsLike>;
+const DEFAULT_WORKER_SRC = `${CDN}/pdf.worker.min.mjs`;
+
+let enabled = true;
+let loader: () => Promise<PdfjsLike> = DEFAULT_LOAD;
+let workerSrc = DEFAULT_WORKER_SRC;
+
+export function configurePdfPreview(options: PdfPreviewOptions): void {
+  if (options.enabled !== undefined) enabled = options.enabled;
+  if (options.workerSrc !== undefined) workerSrc = options.workerSrc;
+  if (options.load !== undefined) {
+    loader = options.load;
+    pdfjsPromise = null;
+  }
+}
+
+export function isPdfPreviewEnabled(): boolean {
+  return enabled;
+}
+
+export function __resetPdfPreviewForTests(): void {
+  enabled = true;
+  loader = DEFAULT_LOAD;
+  workerSrc = DEFAULT_WORKER_SRC;
+  pdfjsPromise = null;
+}
+
+let pdfjsPromise: Promise<PdfjsLike> | null = null;
+
+/** Load pdf.js once (singleton); set the worker src. Re-loads if the loader changed. */
+function loadPdfjs(): Promise<PdfjsLike> {
+  if (!pdfjsPromise) {
+    const active = loader;
+    pdfjsPromise = (async () => {
+      const mod = await active();
+      const pdfjs = ((mod as unknown as { default?: PdfjsLike }).default ?? mod) as PdfjsLike;
+      pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
+      return pdfjs;
+    })();
+  }
+  return pdfjsPromise;
+}
+
+/**
+ * Render EVERY page of the PDF at `url` into `container` as stacked <canvas>
+ * elements fit to `pxWidth` CSS pixels (rendered at devicePixelRatio for
+ * crispness). Clears `container` first. Resolves `{ pages }`. THROWS on
+ * load / CORS / parse failure — the caller catches and shows the fallback card.
+ */
+export async function renderPdfInto(
+  url: string,
+  container: HTMLElement,
+  pxWidth: number,
+): Promise<{ pages: number }> {
+  const pdfjs = await loadPdfjs();
+  const doc = await pdfjs.getDocument({ url }).promise;
+  container.replaceChildren();
+  const dpr =
+    typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1;
+  for (let n = 1; n <= doc.numPages; n++) {
+    const page = await doc.getPage(n);
+    const base = page.getViewport({ scale: 1 });
+    const scale = base.width > 0 ? pxWidth / base.width : 1;
+    const viewport = page.getViewport({ scale: scale * dpr });
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.floor(viewport.width));
+    canvas.height = Math.max(1, Math.floor(viewport.height));
+    canvas.setAttribute('role', 'img');
+    canvas.setAttribute('aria-label', `Page ${n}`);
+    canvas.style.width = '100%';
+    canvas.style.height = 'auto';
+    canvas.style.display = 'block';
+    const ctx = canvas.getContext('2d');
+    container.appendChild(canvas);
+    await page.render({ canvasContext: ctx, viewport }).promise;
+  }
+  return { pages: doc.numPages };
+}

package/src/stories/chat-panel-layout.stories.tsx

@@ -31,7 +31,7 @@ const userMsg2 = 'And from what I understand, does that need to be another brows
 
 function CopyButton(props: { text: string }) {
   return (
-    <button onClick={() => navigator.clipboard.writeText(props.text)}>
+    <button aria-label="Copy message" onClick={() => navigator.clipboard.writeText(props.text)}>
       <Copy size={14} />
     </button>
   );
@@ -130,6 +130,7 @@ export const ChatGPTStyle: Story = {
                 <Button
                   size="icon-sm"
                   class="rounded-full"
+                  aria-label="Send message"
                   disabled={!input().trim()}
                 >
                   <ArrowUp class="size-4" />

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.