@kitnai/chat 0.7.0 → 0.8.0

package/src/elements/link-card.tsx

@@ -0,0 +1,34 @@
+import { defineWebComponent } from './define';
+import { LinkCard } from '../components/link-card';
+import type { LinkCardData } from '../primitives/link-preview';
+import { emitCardEvent } from '../primitives/card-routing';
+
+interface Props extends Record<string, unknown> {
+  /** Stable card id correlating every emitted event. Set as an attribute or property. */
+  cardId?: string;
+  /** The link payload (OG metadata). Set as a JS **property** (object). */
+  data?: LinkCardData;
+}
+
+/**
+ * `<kc-link-card>` — a themed, accessible rich link / Open-Graph preview card. It
+ * renders from the supplied `data` (it never fetches; an app may register a
+ * `configureLinkPreview` fetcher for the bare-`{ url }` path). Activating the card
+ * dispatches the bubbling, composed **`kc-card`** CustomEvent with the contract
+ * `open` verb (`{ kind:'open', url, target:'tab' }`) so a host-level listener
+ * routes it through CardPolicy. Set `data` as a JS property; `card-id` via attribute.
+ */
+defineWebComponent<Props>(
+  'kc-link-card',
+  {
+    cardId: undefined,
+    data: undefined,
+  },
+  (props, { element }) => (
+    <LinkCard
+      cardId={props.cardId ?? ''}
+      data={props.data ?? ({ url: '' } as LinkCardData)}
+      onEmit={(event) => emitCardEvent(element, event)}
+    />
+  ),
+);

package/src/elements/{kitn-loader.stories.tsx → loader.stories.tsx}

@@ -1,14 +1,13 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import './register'; // side effect: registers the custom elements
-import { ElementSpec } from '../stories/docs/element-spec';
-import { argTypesFor } from '../stories/docs/element-controls';
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      'kitn-loader': JSX.HTMLAttributes<HTMLElement> & {
+      'kc-loader': JSX.HTMLAttributes<HTMLElement> & {
         variant?: string;
         size?: string;
         text?: string;
@@ -18,27 +17,25 @@ declare module 'solid-js' {
 }
 
 const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kitn-loader variant="dots" size="md"></kitn-loader>
+<kc-loader variant="dots" size="md"></kc-loader>
 
 <script type="module">
   import '@kitnai/chat/elements';   // registers the custom elements
 </script>`;
 
 const meta = {
-  title: 'Web Components/kitn-loader',
+  title: 'Web Components/kc-loader',
   tags: ['autodocs'],
-  argTypes: argTypesFor('kitn-loader'),
+  argTypes: argTypesFor('kc-loader'),
   parameters: {
     layout: 'fullscreen',
     docs: {
-      description: {
-        component: [
-          '`<kitn-loader>` is the framework-agnostic **web component** for an animated busy indicator — a dozen styles (circular, dots, wave, bars, text-shimmer, …) selected via the `variant` attribute, isolated in **Shadow DOM**.',
+      description: specDescription('kc-loader', [
+          '`<kc-loader>` is the framework-agnostic **web component** for an animated busy indicator — a dozen styles (circular, dots, wave, bars, text-shimmer, …) selected via the `variant` attribute, isolated in **Shadow DOM**.',
           '**When to use:** showing a small "working" indicator anywhere outside the chat thread (toolbars, buttons, panels). In SolidJS, use the `Loader` primitive directly.',
           "**How to use:** register once with `import '@kitnai/chat/elements'`, then set `variant`, `size`, and (for text variants) `text` as plain HTML attributes.",
           'See the **Code** tab for HTML usage.',
-        ].join('\n\n'),
-      },
+        ]),
     },
   },
 } satisfies Meta;
@@ -46,12 +43,6 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
-/** Full generated API reference — properties, events, tokens, and composed-from. */
-export const API: Story = {
-  render: () => <ElementSpec tag="kitn-loader" />,
-  parameters: { layout: 'padded' },
-};
-
 const VARIANTS = [
   'circular', 'classic', 'pulse', 'pulse-dot', 'dots', 'typing',
   'wave', 'bars', 'terminal', 'text-blink', 'text-shimmer', 'loading-dots',
@@ -61,7 +52,7 @@ const VARIANTS = [
 export const Default: Story = {
   render: () => (
     <div style={{ padding: '24px' }}>
-      <kitn-loader variant="circular" size="md" />
+      <kc-loader variant="circular" size="md" />
     </div>
   ),
   parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
@@ -73,7 +64,7 @@ export const AllVariants: Story = {
     <div style={{ display: 'flex', 'flex-wrap': 'wrap', gap: '32px', 'align-items': 'center', padding: '24px' }}>
       {VARIANTS.map((v) => (
         <div style={{ display: 'flex', 'flex-direction': 'column', 'align-items': 'center', gap: '8px', 'min-width': '90px' }}>
-          <kitn-loader variant={v} size="md" text="Loading" />
+          <kc-loader variant={v} size="md" text="Loading" />
           <code style={{ 'font-size': '11px', opacity: 0.6 }}>{v}</code>
         </div>
       ))}
@@ -87,7 +78,7 @@ export const Sizes: Story = {
     <div style={{ display: 'flex', gap: '32px', 'align-items': 'center', padding: '24px' }}>
       {['sm', 'md', 'lg'].map((s) => (
         <div style={{ display: 'flex', 'flex-direction': 'column', 'align-items': 'center', gap: '8px' }}>
-          <kitn-loader variant="dots" size={s} />
+          <kc-loader variant="dots" size={s} />
           <code style={{ 'font-size': '11px', opacity: 0.6 }}>{s}</code>
         </div>
       ))}

package/src/elements/loader.tsx

@@ -1,4 +1,4 @@
-import { defineKitnElement } from './define';
+import { defineWebComponent } from './define';
 import { Loader, type LoaderVariant, type LoaderSize } from '../components/loader';
 
 interface Props extends Record<string, unknown> {
@@ -13,10 +13,10 @@ interface Props extends Record<string, unknown> {
 }
 
 /**
- * `<kitn-loader>` — an animated loader. `variant` selects the style (circular,
+ * `<kc-loader>` — an animated loader. `variant` selects the style (circular,
  * dots, wave, text-shimmer, …); `size` and `text` are attributes.
  */
-defineKitnElement<Props>('kitn-loader', {
+defineWebComponent<Props>('kc-loader', {
   variant: 'circular',
   size: 'md',
   text: undefined,

package/src/elements/{kitn-markdown.stories.tsx → markdown.stories.tsx}

@@ -1,15 +1,14 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
-import { ElementSpec } from '../stories/docs/element-spec';
-import { argTypesFor } from '../stories/docs/element-controls';
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      'kitn-markdown': JSX.HTMLAttributes<HTMLElement>;
+      'kc-markdown': JSX.HTMLAttributes<HTMLElement>;
     }
   }
 }
@@ -27,19 +26,19 @@ export function add(a: number, b: number): number {
 }
 \`\`\``;
 
-/** Render the actual `<kitn-markdown>` custom element with a `content` property. */
+/** Render the actual `<kc-markdown>` custom element with a `content` property. */
 function MarkdownElement(props: { content: string }) {
   let el: (HTMLElement & { content?: string }) | undefined;
   onMount(() => {
     if (el) el.content = props.content;
   });
   return (
-    <kitn-markdown ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px', 'max-width': '720px' }} />
+    <kc-markdown ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px', 'max-width': '720px' }} />
   );
 }
 
 const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kitn-markdown id="md" code-theme="github-dark-dimmed"></kitn-markdown>
+<kc-markdown id="md" code-theme="github-dark-dimmed"></kc-markdown>
 
 <script type="module">
   import '@kitnai/chat/elements';   // registers the custom elements
@@ -50,20 +49,18 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 </script>`;
 
 const meta = {
-  title: 'Web Components/kitn-markdown',
+  title: 'Web Components/kc-markdown',
   tags: ['autodocs'],
-  argTypes: argTypesFor('kitn-markdown'),
+  argTypes: argTypesFor('kc-markdown'),
   parameters: {
     layout: 'fullscreen',
     docs: {
-      description: {
-        component: [
-          '`<kitn-markdown>` is the framework-agnostic **web component** that renders a markdown string (with fenced-code syntax highlighting via Shiki) as a standalone element, isolated in **Shadow DOM**.',
+      description: specDescription('kc-markdown', [
+          '`<kc-markdown>` is the framework-agnostic **web component** that renders a markdown string (with fenced-code syntax highlighting via Shiki) as a standalone element, isolated in **Shadow DOM**.',
           '**When to use:** showing model output or any markdown in a non-Solid app without pulling in a markdown stack. In SolidJS, use the `Markdown` primitive directly.',
           "**How to use:** register once with `import '@kitnai/chat/elements'`, set the source via the `content` **property** (`el.content = '...'`), and tune rendering with the `prose-size`, `code-theme`, and `code-highlight` attributes.",
           'See the **Code** tab for HTML usage.',
-        ].join('\n\n'),
-      },
+        ]),
     },
   },
 } satisfies Meta;
@@ -71,12 +68,6 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
-/** Full generated API reference — properties, events, tokens, and composed-from. */
-export const API: Story = {
-  render: () => <ElementSpec tag="kitn-markdown" />,
-  parameters: { layout: 'padded' },
-};
-
 /** Headings, emphasis, lists, a blockquote, and a highlighted code fence. */
 export const Default: Story = {
   render: () => <MarkdownElement content={sampleMarkdown} />,

package/src/elements/markdown.tsx

@@ -1,4 +1,4 @@
-import { defineKitnElement } from './define';
+import { defineWebComponent } from './define';
 import { Markdown } from '../components/markdown';
 import { ChatConfig, useChatConfig, type ProseSize } from '../primitives/chat-config';
 
@@ -14,11 +14,11 @@ interface Props extends Record<string, unknown> {
 }
 
 /**
- * `<kitn-markdown>` — renders markdown (with fenced-code syntax highlighting) as
+ * `<kc-markdown>` — renders markdown (with fenced-code syntax highlighting) as
  * a standalone element. Content via the `content` property; sizing/highlighting
  * via attributes.
  */
-defineKitnElement<Props>('kitn-markdown', {
+defineWebComponent<Props>('kc-markdown', {
   content: '',
   proseSize: 'sm',
   codeTheme: 'github-dark-dimmed',

package/src/elements/{kitn-message-skills.stories.tsx → message-skills.stories.tsx}

@@ -1,15 +1,14 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
-import { ElementSpec } from '../stories/docs/element-spec';
-import { argTypesFor } from '../stories/docs/element-controls';
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      'kitn-message-skills': JSX.HTMLAttributes<HTMLElement>;
+      'kc-skills': JSX.HTMLAttributes<HTMLElement>;
     }
   }
 }
@@ -24,19 +23,19 @@ const sampleSkills: Skill[] = [
   { id: 's2', name: 'code' },
 ];
 
-/** Render the actual `<kitn-message-skills>` custom element with a `skills` property. */
+/** Render the actual `<kc-skills>` custom element with a `skills` property. */
 function MessageSkillsElement(props: { skills: Skill[] }) {
   let el: (HTMLElement & { skills?: Skill[] }) | undefined;
   onMount(() => {
     if (el) el.skills = props.skills;
   });
   return (
-    <kitn-message-skills ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px' }} />
+    <kc-skills ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px' }} />
   );
 }
 
 const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kitn-message-skills id="skills"></kitn-message-skills>
+<kc-skills id="skills"></kc-skills>
 
 <script type="module">
   import '@kitnai/chat/elements';   // registers the custom elements
@@ -49,20 +48,18 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 </script>`;
 
 const meta = {
-  title: 'Web Components/kitn-message-skills',
+  title: 'Web Components/kc-skills',
   tags: ['autodocs'],
-  argTypes: argTypesFor('kitn-message-skills'),
+  argTypes: argTypesFor('kc-skills'),
   parameters: {
     layout: 'fullscreen',
     docs: {
-      description: {
-        component: [
-          '`<kitn-message-skills>` is the framework-agnostic **web component** that badges which skills were active for a message, isolated in **Shadow DOM**.',
+      description: specDescription('kc-skills', [
+          '`<kc-skills>` is the framework-agnostic **web component** that badges which skills were active for a message, isolated in **Shadow DOM**.',
           '**When to use:** annotating a message row with the skills/tools it used, in a non-Solid app. In SolidJS, use the `MessageSkills` primitive directly.',
           "**How to use:** register once with `import '@kitnai/chat/elements'`, then set the `skills` **property** to an array of `{ id, name }`.",
           'See the **Code** tab for HTML usage.',
-        ].join('\n\n'),
-      },
+        ]),
     },
   },
 } satisfies Meta;
@@ -70,12 +67,6 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
-/** Full generated API reference — properties, events, tokens, and composed-from. */
-export const API: Story = {
-  render: () => <ElementSpec tag="kitn-message-skills" />,
-  parameters: { layout: 'padded' },
-};
-
 /** Two active-skill badges. */
 export const Default: Story = {
   render: () => <MessageSkillsElement skills={sampleSkills} />,

package/src/elements/message-skills.tsx

@@ -1,4 +1,4 @@
-import { defineKitnElement } from './define';
+import { defineWebComponent } from './define';
 import { MessageSkills } from '../components/message-skills';
 
 interface Skill {
@@ -14,9 +14,9 @@ interface Props extends Record<string, unknown> {
 }
 
 /**
- * `<kitn-message-skills>` — badges showing which skills were active for a
+ * `<kc-skills>` — badges showing which skills were active for a
  * message. Data via the `skills` property.
  */
-defineKitnElement<Props>('kitn-message-skills', {
+defineWebComponent<Props>('kc-skills', {
   skills: [],
 }, (props) => <MessageSkills skills={props.skills} />);

package/src/elements/{kitn-message.stories.tsx → message.stories.tsx}

@@ -2,15 +2,14 @@ import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
 import type { ChatMessage } from './chat-types';
-import { ElementSpec } from '../stories/docs/element-spec';
-import { argTypesFor } from '../stories/docs/element-controls';
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      'kitn-message': JSX.HTMLAttributes<HTMLElement>;
+      'kc-message': JSX.HTMLAttributes<HTMLElement>;
     }
   }
 }
@@ -19,7 +18,7 @@ const assistantMessage: ChatMessage = {
   id: 'm-a',
   role: 'assistant',
   content:
-    "Here's the plan, with a quick code sample:\n\n```js\nconst kit = useKitn();\n```\n\nThat wires the kit into your component.",
+    "Here's the plan, with a quick code sample:\n\n```js\nconst kit = useChat();\n```\n\nThat wires the kit into your component.",
   reasoning: { text: 'The user wants X, so I should do Y then Z.', label: 'Reasoning' },
   tools: [{ type: 'search', state: 'output-available', input: { query: 'kitn docs' }, output: { hits: 3 } }],
   attachments: [
@@ -44,19 +43,19 @@ const userMessage: ChatMessage = {
   content: 'How do I compose these myself?',
 };
 
-/** Render the actual `<kitn-message>` custom element with a `message` property. */
+/** Render the actual `<kc-message>` custom element with a `message` property. */
 function MessageElement(props: { message: ChatMessage }) {
   let el: (HTMLElement & { message?: ChatMessage }) | undefined;
   onMount(() => {
     if (el) el.message = props.message;
   });
   return (
-    <kitn-message ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px', 'max-width': '720px' }} />
+    <kc-message ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px', 'max-width': '720px' }} />
   );
 }
 
 const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kitn-message id="msg" style="display:block;"></kitn-message>
+<kc-message id="msg" style="display:block;"></kc-message>
 
 <script type="module">
   import '@kitnai/chat/elements';   // registers the custom elements
@@ -64,7 +63,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
   const msg = document.getElementById('msg');
   msg.message = {
     id: 'm-a', role: 'assistant',
-    content: "Here's the plan:\\n\\n\\\`\\\`\\\`js\\nconst kit = useKitn();\\n\\\`\\\`\\\`",
+    content: "Here's the plan:\\n\\n\\\`\\\`\\\`js\\nconst kit = useChat();\\n\\\`\\\`\\\`",
     reasoning: { text: 'The user wants X, so I should do Y.' },
     tools: [{ type: 'search', state: 'output-available', output: { hits: 3 } }],
     actions: ['copy', 'like', 'dislike', 'regenerate'],
@@ -75,20 +74,18 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 </script>`;
 
 const meta = {
-  title: 'Web Components/kitn-message',
+  title: 'Web Components/kc-message',
   tags: ['autodocs'],
-  argTypes: argTypesFor('kitn-message'),
+  argTypes: argTypesFor('kc-message'),
   parameters: {
     layout: 'fullscreen',
     docs: {
-      description: {
-        component: [
-          '`<kitn-message>` is the framework-agnostic **web component** for a single message row — markdown/plain content, an optional reasoning block, tool calls, attachments, and action buttons — all rendered from one `message` object (the same shape `<kitn-chat>` uses per message). It is the keystone of the "compose your own message list" pattern, isolated in **Shadow DOM**.',
+      description: specDescription('kc-message', [
+          '`<kc-message>` is the framework-agnostic **web component** for a single message row — markdown/plain content, an optional reasoning block, tool calls, attachments, and action buttons — all rendered from one `message` object (the same shape `<kc-chat>` uses per message). It is the keystone of the "compose your own message list" pattern, isolated in **Shadow DOM**.',
           "**When to use:** building a custom message thread in a non-Solid app, or anywhere you want to lay out the list yourself but keep the kit's rich message rendering. In SolidJS, compose the `Message` primitives for finer control.",
           "**How to use:** register once with `import '@kitnai/chat/elements'`, set the whole row via the `message` **property** (`el.message = {...}`), and listen for the `messageaction` **CustomEvent** for action-button clicks. For simple cases, set `role` + `content` attributes instead of a full object.",
           'See the **Code** tab for HTML usage.',
-        ].join('\n\n'),
-      },
+        ]),
     },
   },
 } satisfies Meta;
@@ -96,12 +93,6 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
-/** Full generated API reference — properties, events, tokens, and composed-from. */
-export const API: Story = {
-  render: () => <ElementSpec tag="kitn-message" />,
-  parameters: { layout: 'padded' },
-};
-
 /** A rich assistant message: markdown, reasoning, a tool call, an attachment, and actions. */
 export const Assistant: Story = {
   render: () => <MessageElement message={assistantMessage} />,

package/src/elements/message.tsx

@@ -1,5 +1,5 @@
 import { For, Show, type Component } from 'solid-js';
-import { defineKitnElement } from './define';
+import { defineWebComponent } from './define';
 import { ChatConfig, useChatConfig, type ProseSize } from '../primitives/chat-config';
 import { Message, MessageContent, MessageActions } from '../components/message';
 import { Reasoning, ReasoningTrigger, ReasoningContent } from '../components/reasoning';
@@ -26,7 +26,7 @@ interface Props extends Record<string, unknown> {
   codeHighlight?: boolean;
 }
 
-/** Events fired by `<kitn-message>`. */
+/** Events fired by `<kc-message>`. */
 interface Events {
   /** An action button was clicked. */
   messageaction: { messageId: string; action: ChatMessageAction };
@@ -40,12 +40,12 @@ const ACTION_ICON: Record<ChatMessageAction, Component<{ class?: string }>> = {
 };
 
 /**
- * `<kitn-message>` — a single message row: markdown/plain content, reasoning,
+ * `<kc-message>` — a single message row: markdown/plain content, reasoning,
  * tool calls, attachments, and action buttons, rendered from one `message`
- * object (the same shape `<kitn-chat>` uses per message). The keystone of the
+ * object (the same shape `<kc-chat>` uses per message). The keystone of the
  * "compose your own message list" pattern. Emits `messageaction`.
  */
-defineKitnElement<Props, Events>('kitn-message', {
+defineWebComponent<Props, Events>('kc-message', {
   message: undefined,
   role: 'assistant',
   content: undefined,

package/src/elements/{kitn-model-switcher.stories.tsx → model-switcher.stories.tsx}

@@ -2,15 +2,14 @@ import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
 import type { ModelOption } from '../types';
-import { ElementSpec } from '../stories/docs/element-spec';
-import { argTypesFor } from '../stories/docs/element-controls';
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      'kitn-model-switcher': JSX.HTMLAttributes<HTMLElement>;
+      'kc-model-switcher': JSX.HTMLAttributes<HTMLElement>;
     }
   }
 }
@@ -21,7 +20,7 @@ const models: ModelOption[] = [
   { id: 'haiku', name: 'Claude Haiku', provider: 'Anthropic' },
 ];
 
-/** Render `<kitn-model-switcher>` with `models` set as a property; tracks selection. */
+/** Render `<kc-model-switcher>` with `models` set as a property; tracks selection. */
 function SwitcherElement(props: { models: ModelOption[]; current?: string }) {
   let el: (HTMLElement & { models?: ModelOption[]; currentModel?: string }) | undefined;
   onMount(() => {
@@ -35,12 +34,12 @@ function SwitcherElement(props: { models: ModelOption[]; current?: string }) {
     });
   });
   return (
-    <kitn-model-switcher ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '40px' }} />
+    <kc-model-switcher ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '40px' }} />
   );
 }
 
 const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kitn-model-switcher id="ms"></kitn-model-switcher>
+<kc-model-switcher id="ms"></kc-model-switcher>
 
 <script type="module">
   import '@kitnai/chat/elements';   // registers the custom elements
@@ -55,20 +54,18 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 </script>`;
 
 const meta = {
-  title: 'Web Components/kitn-model-switcher',
+  title: 'Web Components/kc-model-switcher',
   tags: ['autodocs'],
-  argTypes: argTypesFor('kitn-model-switcher'),
+  argTypes: argTypesFor('kc-model-switcher'),
   parameters: {
     layout: 'fullscreen',
     docs: {
-      description: {
-        component: [
-          '`<kitn-model-switcher>` is the framework-agnostic **web component** for picking the active model — a dropdown showing each model\'s name and provider — isolated in **Shadow DOM**. It mirrors the switcher inside `<kitn-chat>` as a standalone, composable piece.',
+      description: specDescription('kc-model-switcher', [
+          '`<kc-model-switcher>` is the framework-agnostic **web component** for picking the active model — a dropdown showing each model\'s name and provider — isolated in **Shadow DOM**. It mirrors the switcher inside `<kc-chat>` as a standalone, composable piece.',
           '**When to use:** building your own chat header and want the model picker on its own. In SolidJS, use the `ModelSwitcher` primitive.',
           "**How to use:** register once with `import '@kitnai/chat/elements'`, set the `models` **property** (and optionally `currentModel`), and listen for the `modelchange` **CustomEvent**. Note: like the underlying primitive, it only renders when more than one model is provided.",
           'See the **Code** tab for HTML usage.',
-        ].join('\n\n'),
-      },
+        ]),
     },
   },
 } satisfies Meta;
@@ -76,12 +73,6 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
-/** Full generated API reference — properties, events, tokens, and composed-from. */
-export const API: Story = {
-  render: () => <ElementSpec tag="kitn-model-switcher" />,
-  parameters: { layout: 'padded' },
-};
-
 /** A three-model picker; selecting updates the trigger label. */
 export const Default: Story = {
   render: () => <SwitcherElement models={models} current="opus" />,

package/src/elements/model-switcher.tsx

@@ -1,4 +1,4 @@
-import { defineKitnElement } from './define';
+import { defineWebComponent } from './define';
 import { ModelSwitcher } from '../components/model-switcher';
 import type { ModelOption } from '../types';
 
@@ -9,21 +9,21 @@ interface Props extends Record<string, unknown> {
   currentModel?: string;
 }
 
-/** Events fired by `<kitn-model-switcher>`. */
+/** Events fired by `<kc-model-switcher>`. */
 interface Events {
   /** A model was selected. */
   modelchange: { modelId: string };
 }
 
 /**
- * `<kitn-model-switcher>` — an event-emitting leaf element. Data in via the
+ * `<kc-model-switcher>` — an event-emitting leaf element. Data in via the
  * `models` property, selection out via a `modelchange` event. Mirrors the
- * header switcher inside `<kitn-chat>` as a standalone, composable piece.
+ * header switcher inside `<kc-chat>` as a standalone, composable piece.
  *
  * Note: like the underlying primitive, this only renders when more than one
  * model is provided.
  */
-defineKitnElement<Props, Events>('kitn-model-switcher', {
+defineWebComponent<Props, Events>('kc-model-switcher', {
   models: [],
   currentModel: undefined,
 }, (props, { dispatch }) => (