npm - @kitnai/chat - Versions diffs - 0.6.0 → 0.8.0 - Mend

@kitnai/chat 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (211) hide show

package/README.md +9 -9
package/dist/custom-elements.json +1676 -881
package/dist/kitn-chat.es.js +36 -36
package/dist/llms/llms-full.txt +316 -155
package/dist/llms/llms.txt +18 -18
package/dist/schemas/card-envelope.schema.json +14 -0
package/dist/schemas/card-event.schema.json +12 -0
package/dist/schemas/confirm.schema.json +65 -0
package/dist/schemas/embed.schema.json +65 -0
package/dist/schemas/form.result.schema.json +7 -0
package/dist/schemas/form.schema.json +33 -0
package/dist/schemas/link.schema.json +56 -0
package/dist/schemas/task-list.result.schema.json +16 -0
package/dist/schemas/task-list.schema.json +78 -0
package/dist/theme.tokens.css +65 -65
package/dist/tsx-B8rCNbgL.js +1 -0
package/dist/typescript-RycA9KXf.js +1 -0
package/frameworks/react/index.tsx +382 -193
package/frameworks/react/runtime.tsx +2 -2
package/llms-full.txt +316 -155
package/llms.txt +18 -18
package/package.json +5 -2
package/src/components/artifact.stories.tsx +138 -0
package/src/components/artifact.tsx +581 -0
package/src/components/attachments.stories.tsx +7 -8
package/src/components/attachments.tsx +2 -2
package/src/components/card.tsx +110 -0
package/src/components/chain-of-thought.stories.tsx +7 -8
package/src/components/chat-container.stories.tsx +7 -8
package/src/components/chat-container.tsx +4 -0
package/src/components/checkpoint.stories.tsx +7 -8
package/src/components/code-block.stories.tsx +8 -9
package/src/components/component-meta.json +3411 -0
package/src/components/confirm-card.stories.tsx +74 -0
package/src/components/confirm-card.tsx +299 -0
package/src/components/context.stories.tsx +7 -8
package/src/components/conversation-item.stories.tsx +7 -8
package/src/components/conversation-item.tsx +2 -2
package/src/components/conversation-list.stories.tsx +7 -8
package/src/components/conversation-list.tsx +1 -1
package/src/components/embed.tsx +196 -0
package/src/components/empty.stories.tsx +8 -9
package/src/components/feedback-bar.stories.tsx +7 -8
package/src/components/file-tree.stories.tsx +73 -0
package/src/components/file-tree.tsx +383 -0
package/src/components/file-upload.stories.tsx +7 -8
package/src/components/form-widgets.tsx +461 -0
package/src/components/form.tsx +796 -0
package/src/components/image.stories.tsx +7 -8
package/src/components/link-card.tsx +194 -0
package/src/components/loader.stories.tsx +7 -8
package/src/components/markdown.stories.tsx +7 -8
package/src/components/message-narrow.stories.tsx +12 -13
package/src/components/message-skills.stories.tsx +16 -17
package/src/components/message.stories.tsx +17 -18
package/src/components/model-switcher.stories.tsx +7 -8
package/src/components/prompt-input.stories.tsx +8 -9
package/src/components/prompt-suggestion.stories.tsx +7 -8
package/src/components/prompt-suggestion.tsx +3 -3
package/src/components/reasoning.stories.tsx +7 -8
package/src/components/scroll-button.stories.tsx +7 -8
package/src/components/slash-command.stories.tsx +8 -9
package/src/components/slash-command.tsx +2 -2
package/src/components/source.stories.tsx +7 -8
package/src/components/source.tsx +1 -1
package/src/components/task-list-card.stories.tsx +78 -0
package/src/components/task-list-card.tsx +388 -0
package/src/components/text-shimmer.stories.tsx +7 -8
package/src/components/thinking-bar.stories.tsx +7 -8
package/src/components/tool.stories.tsx +7 -8
package/src/components/tool.tsx +2 -2
package/src/components/voice-input.stories.tsx +7 -8
package/src/elements/artifact.stories.tsx +291 -0
package/src/elements/artifact.tsx +72 -0
package/src/elements/{kitn-attachments.stories.tsx → attachments.stories.tsx} +11 -11
package/src/elements/attachments.tsx +4 -4
package/src/elements/card.stories.tsx +118 -0
package/src/elements/card.tsx +40 -0
package/src/elements/catalog.stories.tsx +491 -0
package/src/elements/{kitn-chain-of-thought.stories.tsx → chain-of-thought.stories.tsx} +13 -13
package/src/elements/chain-of-thought.tsx +3 -3
package/src/elements/{kitn-chat-scope-picker.stories.tsx → chat-scope-picker.stories.tsx} +10 -10
package/src/elements/chat-scope-picker.tsx +4 -4
package/src/elements/{kitn-chat-workspace.stories.tsx → chat-workspace.stories.tsx} +71 -29
package/src/elements/chat-workspace.tsx +29 -3
package/src/elements/{kitn-chat.stories.tsx → chat.stories.tsx} +61 -16
package/src/elements/chat.tsx +23 -2
package/src/elements/{kitn-checkpoint.stories.tsx → checkpoint.stories.tsx} +11 -11
package/src/elements/checkpoint.tsx +4 -4
package/src/elements/{kitn-code-block.stories.tsx → code-block.stories.tsx} +10 -10
package/src/elements/code-block.tsx +3 -3
package/src/elements/compiled.css +1 -1
package/src/elements/composed-shell.stories.tsx +316 -0
package/src/elements/confirm-card.stories.tsx +186 -0
package/src/elements/confirm-card.tsx +45 -0
package/src/elements/{kitn-context-meter.stories.tsx → context-meter.stories.tsx} +10 -10
package/src/elements/context-meter.tsx +3 -3
package/src/elements/{kitn-conversation-list.stories.tsx → conversation-list.stories.tsx} +35 -22
package/src/elements/conversation-list.tsx +11 -2
package/src/elements/css.ts +1 -1
package/src/elements/define.tsx +10 -10
package/src/elements/element-meta.json +2649 -0
package/src/elements/element-types.d.ts +251 -125
package/src/elements/embed.stories.tsx +197 -0
package/src/elements/embed.tsx +35 -0
package/src/elements/{kitn-empty.stories.tsx → empty.stories.tsx} +12 -12
package/src/elements/empty.tsx +3 -3
package/src/elements/{kitn-feedback-bar.stories.tsx → feedback-bar.stories.tsx} +11 -11
package/src/elements/feedback-bar.tsx +4 -4
package/src/elements/file-tree.stories.tsx +133 -0
package/src/elements/file-tree.tsx +52 -0
package/src/elements/{kitn-file-upload.stories.tsx → file-upload.stories.tsx} +12 -12
package/src/elements/file-upload.tsx +4 -4
package/src/elements/form.stories.tsx +204 -0
package/src/elements/form.tsx +37 -0
package/src/elements/{kitn-image.stories.tsx → image.stories.tsx} +10 -10
package/src/elements/image.tsx +3 -3
package/src/elements/link-card.stories.tsx +193 -0
package/src/elements/link-card.tsx +34 -0
package/src/elements/{kitn-loader.stories.tsx → loader.stories.tsx} +11 -11
package/src/elements/loader.tsx +3 -3
package/src/elements/{kitn-markdown.stories.tsx → markdown.stories.tsx} +10 -10
package/src/elements/markdown.tsx +3 -3
package/src/elements/{kitn-message-skills.stories.tsx → message-skills.stories.tsx} +10 -10
package/src/elements/message-skills.tsx +3 -3
package/src/elements/{kitn-message.stories.tsx → message.stories.tsx} +12 -12
package/src/elements/message.tsx +5 -5
package/src/elements/{kitn-model-switcher.stories.tsx → model-switcher.stories.tsx} +10 -10
package/src/elements/model-switcher.tsx +5 -5
package/src/elements/{kitn-prompt-input.stories.tsx → prompt-input.stories.tsx} +41 -19
package/src/elements/prompt-input.tsx +5 -5
package/src/elements/{kitn-prompt-suggestions.stories.tsx → prompt-suggestions.stories.tsx} +13 -13
package/src/elements/prompt-suggestions.tsx +4 -4
package/src/elements/{kitn-reasoning.stories.tsx → reasoning.stories.tsx} +10 -10
package/src/elements/reasoning.tsx +4 -4
package/src/elements/register.ts +11 -1
package/src/elements/resizable.stories.tsx +200 -0
package/src/elements/resizable.tsx +264 -0
package/src/elements/{kitn-response-stream.stories.tsx → response-stream.stories.tsx} +10 -10
package/src/elements/response-stream.tsx +4 -4
package/src/elements/{kitn-source-list.stories.tsx → source-list.stories.tsx} +11 -11
package/src/elements/{kitn-source.stories.tsx → source.stories.tsx} +12 -12
package/src/elements/source.tsx +5 -5
package/src/elements/styles.css +140 -1
package/src/elements/task-list-card.stories.tsx +194 -0
package/src/elements/task-list-card.tsx +40 -0
package/src/elements/{kitn-text-shimmer.stories.tsx → text-shimmer.stories.tsx} +10 -10
package/src/elements/text-shimmer.tsx +3 -3
package/src/elements/{kitn-thinking-bar.stories.tsx → thinking-bar.stories.tsx} +11 -11
package/src/elements/thinking-bar.tsx +5 -5
package/src/elements/{kitn-tool.stories.tsx → tool.stories.tsx} +10 -10
package/src/elements/tool.tsx +3 -3
package/src/elements/{kitn-voice-input.stories.tsx → voice-input.stories.tsx} +10 -10
package/src/elements/voice-input.tsx +4 -4
package/src/index.ts +94 -2
package/src/primitives/card-contract.ts +60 -0
package/src/primitives/card-host.tsx +35 -0
package/src/primitives/card-routing.ts +79 -0
package/src/primitives/card-schemas/card-envelope.schema.json +14 -0
package/src/primitives/card-schemas/card-event.schema.json +12 -0
package/src/primitives/card-schemas/confirm.schema.json +65 -0
package/src/primitives/card-schemas/embed.schema.json +65 -0
package/src/primitives/card-schemas/form.result.schema.json +7 -0
package/src/primitives/card-schemas/form.schema.json +33 -0
package/src/primitives/card-schemas/link.schema.json +56 -0
package/src/primitives/card-schemas/task-list.result.schema.json +16 -0
package/src/primitives/card-schemas/task-list.schema.json +78 -0
package/src/primitives/card-validate.ts +95 -0
package/src/primitives/embed-providers.ts +254 -0
package/src/primitives/highlighter.ts +4 -0
package/src/primitives/link-preview.ts +87 -0
package/src/primitives/pdf-preview.ts +121 -0
package/src/stories/chat-panel-layout.stories.tsx +2 -1
package/src/stories/chat-scene.tsx +22 -21
package/src/stories/checkpoint-restore.stories.tsx +10 -10
package/src/stories/conversation-with-reasoning.stories.tsx +4 -4
package/src/stories/conversation-with-sources.stories.tsx +7 -7
package/src/stories/docs/Accessibility.mdx +2 -2
package/src/stories/docs/ForAIAgents.mdx +3 -3
package/src/stories/docs/GettingStarted.mdx +2 -2
package/src/stories/docs/Installation.mdx +2 -2
package/src/stories/docs/Integrations.mdx +29 -29
package/src/stories/docs/Introduction.mdx +3 -3
package/src/stories/docs/Theming.mdx +2 -2
package/src/stories/docs/element-controls.ts +60 -0
package/src/stories/docs/theme-editor/theme-editor.tsx +1 -0
package/src/stories/examples/ChoosingComponents.mdx +94 -0
package/src/stories/examples/sample-data.ts +79 -0
package/src/stories/message-actions.stories.tsx +13 -13
package/src/stories/pattern-centered-conversation.stories.tsx +3 -3
package/src/stories/pattern-docked-widget.stories.tsx +1 -1
package/src/stories/pattern-empty-state.stories.tsx +3 -3
package/src/stories/prompt-input-variants.stories.tsx +13 -13
package/src/stories/streaming-response.stories.tsx +3 -3
package/src/stories/typography.stories.tsx +4 -4
package/src/ui/avatar.stories.tsx +7 -8
package/src/ui/badge.stories.tsx +7 -8
package/src/ui/button.stories.tsx +8 -9
package/src/ui/button.tsx +1 -0
package/src/ui/collapsible.stories.tsx +6 -7
package/src/ui/dropdown.stories.tsx +6 -7
package/src/ui/hover-card.stories.tsx +6 -7
package/src/ui/resizable.stories.tsx +74 -9
package/src/ui/resizable.tsx +351 -71
package/src/ui/scroll-area.stories.tsx +6 -7
package/src/ui/scroll-area.tsx +3 -1
package/src/ui/separator.stories.tsx +7 -8
package/src/ui/skeleton.stories.tsx +7 -8
package/src/ui/textarea.stories.tsx +6 -7
package/src/ui/tooltip.stories.tsx +8 -9
package/theme.css +65 -65

package/src/elements/composed-shell.stories.tsx ADDED Viewed

@@ -0,0 +1,316 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal, onMount, For, type JSX } from 'solid-js';
+import './register'; // side effect: registers the custom elements
+import {
+  conversations,
+  context,
+  models,
+  slashCommands,
+  thread,
+} from '../stories/examples/sample-data';
+import type { ArtifactFile } from '../components/artifact';
+/**
+ * Examples / Composed chat shell — THE headline. A real chat assembled from leaf
+ * `kc-*` components inside a `<kc-resizable>` layout, wired with sample data +
+ * event handlers in the story script. Paired with the `<kc-chat>` drop-in so the
+ * "batteries-included vs compose-your-own — when do I use which?" contrast is
+ * explicit. Both stories are source-visible (Show code).
+ */
+type AnyEl = HTMLElement & Record<string, unknown>;
+/** Set JS properties (objects/arrays) on an element. */
+const setProps = (el: HTMLElement, props: Record<string, unknown>) => {
+  for (const k in props) (el as AnyEl)[k] = props[k];
+};
+/** Set string/boolean attributes on an element. */
+const setAttrs = (el: HTMLElement, a: Record<string, string | boolean>) => {
+  for (const k in a) {
+    const v = a[k];
+    if (v === false) el.removeAttribute(k);
+    else el.setAttribute(k, v === true ? '' : v);
+  }
+};
+const BASE = '/artifact-fixtures'; // served by .storybook/main.ts staticDirs
+const ARTIFACT_FILES: ArtifactFile[] = [
+  {
+    path: 'index.html',
+    url: `${BASE}/index.html`,
+    type: 'html',
+    language: 'html',
+    code: '<!DOCTYPE html>\n<html><head><title>Starboard</title></head>\n<body><h1>Starboard</h1></body></html>',
+  },
+  { path: 'css/site.css', url: `${BASE}/css/site.css`, type: 'other', language: 'css', code: 'body { font-family: system-ui; }' },
+  { path: 'assets/logo.svg', url: `${BASE}/assets/logo.svg`, type: 'image' },
+];
+/** A bordered frame the shell fills. */
+function Frame(props: { children: JSX.Element; height?: string }) {
+  return (
+    <div
+      style={{
+        height: props.height ?? '560px',
+        width: '100%',
+        border: '1px solid var(--color-border, #e4e4e7)',
+        'border-radius': '12px',
+        overflow: 'hidden',
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}
+const meta = {
+  title: 'Examples/Composed chat shell',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          '# Build your own chat',
+          'Two ways to ship a chat, side by side:',
+          '- **Compose your own** (`Composed shell`) — a `<kc-resizable>` laying out `<kc-conversations>` │ a chat column (`<kc-message>` list + `<kc-context>` meter + `<kc-prompt-input>` + `<kc-suggestions>`) │ `<kc-artifact>`. You own the data flow and event wiring; you control every panel. **Reach for this when the flagship doesn\'t fit** — custom layout, an inspector/canvas panel, bespoke header.',
+          '- **Batteries-included** (`Drop-in <kc-chat>`) — the whole chat surface in one tag. Set `messages`, listen for `submit`. **Reach for this for the 90% path** — a working chat in minutes.',
+          'Same leaf components underneath; the flagship just pre-wires them. See **Examples / Choosing components** for the full decision guide.',
+          'Both stories are source-visible — open **Show code** to read the exact composition + wiring.',
+        ].join('\n\n'),
+      },
+    },
+  },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+// ── B1 · Composed shell ──────────────────────────────────────────────────────
+const SHELL_SNIPPET = `<!-- Compose-your-own chat: a resizable shell built from leaf components -->
+<kc-resizable orientation="horizontal" style="display:block;height:560px">
+  <!-- start: conversation list -->
+  <kc-resizable-item size="22%" min="180px" max="40%">
+    <kc-conversations id="list" style="display:block;height:100%"></kc-conversations>
+  </kc-resizable-item>
+  <!-- main: the chat column (scrolling messages + meter + composer) -->
+  <kc-resizable-item>
+    <div class="chat-col">
+      <div class="messages" id="messages"></div>     <!-- <kc-message> per turn -->
+      <kc-context id="ctx"></kc-context>
+      <kc-suggestions id="suggs"></kc-suggestions>
+      <kc-prompt-input id="input" search voice></kc-prompt-input>
+    </div>
+  </kc-resizable-item>
+  <!-- end: artifact/preview panel (toggle with the 'hidden' attribute) -->
+  <kc-resizable-item size="32%" min="240px">
+    <kc-artifact id="artifact" style="display:block;height:100%"></kc-artifact>
+  </kc-resizable-item>
+</kc-resizable>
+<script type="module">
+  import '@kitnai/chat/elements';
+  // — data in via properties —
+  const list = document.getElementById('list');
+  list.conversations = [/* … */];
+  list.activeId = 'c1';
+  const ctx = document.getElementById('ctx');
+  ctx.context = { usedTokens: 48200, maxTokens: 200000 };
+  const suggs = document.getElementById('suggs');
+  suggs.suggestions = ['Summarize this thread', 'What changed in v0.3?'];
+  const input = document.getElementById('input');
+  input.slashCommands = [{ id: 'summarize', label: '/summarize', category: 'Actions' }];
+  const artifact = document.getElementById('artifact');
+  artifact.src = 'https://your-backend.example/artifacts/abc/index.html';
+  artifact.files = [{ path: 'index.html', url: '…', type: 'html', code: '…' }];
+  // render the message list yourself (you own the thread state)
+  const messages = document.getElementById('messages');
+  let thread = [/* { id, role, content, … } */];
+  const render = () => {
+    messages.innerHTML = '';
+    for (const m of thread) {
+      const el = document.createElement('kc-message');
+      el.message = m;
+      messages.append(el);
+    }
+  };
+  render();
+  // — interactions out via events —
+  list.addEventListener('select', (e) => (list.activeId = e.detail.id));
+  suggs.addEventListener('select', (e) => (input.value = e.detail.value));
+  input.addEventListener('submit', (e) => {
+    thread = [...thread, { id: Date.now() + '', role: 'user', content: e.detail.value }];
+    render();
+    // …call your backend, append the assistant reply, re-render…
+  });
+</script>`;
+export const ComposedShell: Story = {
+  name: 'Composed shell',
+  render: () => {
+    const [messages, setMessages] = createSignal<Record<string, unknown>[]>(thread);
+    let list!: HTMLElement, ctx!: HTMLElement, suggs!: HTMLElement, input!: HTMLElement, artifact!: HTMLElement;
+    const msgRefs: HTMLElement[] = [];
+    onMount(() => {
+      setProps(list, { conversations, activeId: 'c1' });
+      list.addEventListener('select', (e) => ((list as AnyEl).activeId = (e as CustomEvent).detail.id));
+      setProps(ctx, { context });
+      setProps(suggs, { suggestions: ['Summarize this thread', 'What changed in v0.3?', 'Show me the layout code'] });
+      suggs.addEventListener('select', (e) => ((input as AnyEl).value = (e as CustomEvent).detail.value));
+      setProps(input, { slashCommands });
+      setAttrs(input, { search: true, voice: true, placeholder: 'Message the assistant…' });
+      input.addEventListener('submit', (e) => {
+        const value = (e as unknown as CustomEvent).detail.value as string;
+        if (!value) return;
+        setMessages((m) => [...m, { id: Date.now() + '', role: 'user', content: value }]);
+        (input as AnyEl).value = '';
+        setTimeout(() => {
+          setMessages((m) => [
+            ...m,
+            { id: Date.now() + 'a', role: 'assistant', content: 'Echo: ' + value, actions: ['copy'] },
+          ]);
+        }, 500);
+      });
+      setProps(artifact, { src: `${BASE}/index.html`, files: ARTIFACT_FILES });
+      setAttrs(artifact, { 'iframe-title': 'Artifact preview' });
+    });
+    // Keep each <kc-message>'s `message` property in sync as the thread grows.
+    const syncMessages = () => {
+      const list = messages();
+      list.forEach((m, i) => {
+        if (msgRefs[i]) (msgRefs[i] as AnyEl).message = m;
+      });
+    };
+    return (
+      <Frame>
+        <kc-resizable orientation="horizontal">
+          <kc-resizable-item size="22%" min="180px" max="40%">
+            <kc-conversations ref={(e) => (list = e)} style={{ display: 'block', height: '100%' }} />
+          </kc-resizable-item>
+          <kc-resizable-item>
+            <div style={{ height: '100%', display: 'flex', 'flex-direction': 'column', 'min-height': '0' }}>
+              <div
+                style={{
+                  flex: '1',
+                  'min-height': '0',
+                  'overflow-y': 'auto',
+                  padding: '16px',
+                  display: 'flex',
+                  'flex-direction': 'column',
+                  gap: '12px',
+                }}
+              >
+                <For each={messages()}>
+                  {(m, i) => (
+                    <kc-message
+                      ref={(e) => {
+                        msgRefs[i()] = e;
+                        (e as AnyEl).message = m;
+                        queueMicrotask(syncMessages);
+                      }}
+                    />
+                  )}
+                </For>
+              </div>
+              <div
+                style={{
+                  'border-top': '1px solid var(--color-border, #e4e4e7)',
+                  padding: '12px 16px',
+                  display: 'flex',
+                  'flex-direction': 'column',
+                  gap: '8px',
+                }}
+              >
+                <kc-context ref={(e) => (ctx = e)} />
+                <kc-suggestions ref={(e) => (suggs = e)} />
+                <kc-prompt-input ref={(e) => (input = e)} />
+              </div>
+            </div>
+          </kc-resizable-item>
+          <kc-resizable-item size="32%" min="240px">
+            <kc-artifact ref={(e) => (artifact = e)} style={{ display: 'block', height: '100%' }} />
+          </kc-resizable-item>
+        </kc-resizable>
+      </Frame>
+    );
+  },
+  parameters: { docs: { source: { code: SHELL_SNIPPET, language: 'html' } } },
+};
+// ── B2 · Drop-in <kc-chat> ───────────────────────────────────────────────────
+const DROPIN_SNIPPET = `<!-- Batteries-included: the whole chat surface in one tag -->
+<kc-chat id="chat" chat-title="Assistant" search voice
+  style="display:block;height:560px"></kc-chat>
+<script type="module">
+  import '@kitnai/chat/elements';
+  const chat = document.getElementById('chat');
+  chat.models = [{ id: 'opus', name: 'Claude Opus', provider: 'Anthropic' }];
+  chat.currentModel = 'opus';
+  chat.context = { usedTokens: 48200, maxTokens: 200000 };
+  chat.suggestions = ['Summarize this thread', 'What changed in v0.3?'];
+  chat.messages = [
+    { id: '1', role: 'assistant', content: "Hi! I'm the drop-in <kc-chat>. Ask me anything.",
+      actions: ['copy', 'like', 'dislike'] },
+  ];
+  chat.addEventListener('submit', (e) => {
+    chat.messages = [...chat.messages, { id: Date.now() + '', role: 'user', content: e.detail.value }];
+    chat.loading = true;
+    // …call your backend, then append the reply and clear loading…
+  });
+  chat.addEventListener('modelchange', (e) => (chat.currentModel = e.detail.modelId));
+</script>`;
+export const DropInChat: Story = {
+  name: 'Drop-in <kc-chat>',
+  render: () => {
+    let chat!: HTMLElement;
+    onMount(() => {
+      setProps(chat, {
+        models,
+        currentModel: 'opus',
+        context,
+        suggestions: ['Summarize this thread', 'What changed in v0.3?'],
+        messages: [
+          { id: '1', role: 'assistant', content: "Hi! I'm the **drop-in** `<kc-chat>`. Ask me anything.", actions: ['copy', 'like', 'dislike'] },
+        ],
+      });
+      setAttrs(chat, { 'chat-title': 'Assistant', search: true, voice: true });
+      chat.addEventListener('submit', (e) => {
+        const value = (e as unknown as CustomEvent).detail.value as string;
+        const cur = (chat as AnyEl).messages as unknown[];
+        (chat as AnyEl).messages = [...cur, { id: Date.now() + '', role: 'user', content: value }];
+        (chat as AnyEl).loading = true;
+        setTimeout(() => {
+          const cur2 = (chat as AnyEl).messages as unknown[];
+          (chat as AnyEl).messages = [...cur2, { id: Date.now() + 'a', role: 'assistant', content: 'Echo: ' + value, actions: ['copy'] }];
+          (chat as AnyEl).loading = false;
+        }, 600);
+      });
+      chat.addEventListener('modelchange', (e) => ((chat as AnyEl).currentModel = (e as CustomEvent).detail.modelId));
+    });
+    return (
+      <Frame>
+        <kc-chat ref={(e) => (chat = e)} style={{ display: 'block', height: '100%' }} />
+      </Frame>
+    );
+  },
+  parameters: { docs: { source: { code: DROPIN_SNIPPET, language: 'html' } } },
+};

package/src/elements/confirm-card.stories.tsx ADDED Viewed

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal, onMount, type JSX } from 'solid-js';
+import './confirm-card';
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
+import type { ConfirmCardData } from '../components/confirm-card';
+import type { CardEvent } from '../primitives/card-contract';
+declare module 'solid-js' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'kc-confirm': JSX.HTMLAttributes<HTMLElement> & {
+        heading?: string;
+        'card-id'?: string;
+        ref?: (el: HTMLElement) => void;
+      };
+    }
+  }
+}
+type ConfirmEl = HTMLElement & { data?: ConfirmCardData };
+function Frame(props: { children: JSX.Element }) {
+  return <div style={{ 'max-width': '460px' }}>{props.children}</div>;
+}
+/** Mounts a <kc-confirm>, sets `.data`, logs the emitted CardEvent under the render. */
+function ConfirmDemo(props: { def: ConfirmCardData; cardId: string; heading?: string }) {
+  const [log, setLog] = createSignal<CardEvent[]>([]);
+  let el: ConfirmEl | undefined;
+  onMount(() => {
+    if (!el) return;
+    el.data = props.def;
+    el.addEventListener('kc-card', (e) => {
+      const detail = (e as CustomEvent<CardEvent>).detail;
+      setLog((prev) => [...prev, detail]);
+    });
+  });
+  return (
+    <Frame>
+      <div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
+        <kc-confirm ref={(e) => (el = e as ConfirmEl)} card-id={props.cardId} heading={props.heading} />
+        <pre
+          style={{
+            margin: 0,
+            'max-height': '180px',
+            overflow: 'auto',
+            background: 'var(--color-muted, #f4f4f5)',
+            'border-radius': '8px',
+            padding: '8px',
+            'font-size': '12px',
+          }}
+        >
+          {log().length === 0 ? '// emitted CardEvents appear here' : JSON.stringify(log(), null, 2)}
+        </pre>
+      </div>
+    </Frame>
+  );
+}
+const APPROVE: ConfirmCardData = {
+  body: 'This will apply 3 pending migrations to production. This cannot be undone.',
+  tone: 'warning',
+  actions: [
+    { id: 'approve', label: 'Run migration', style: 'primary', default: true },
+    { id: 'reject', label: 'Cancel' },
+  ],
+};
+const DESTRUCTIVE: ConfirmCardData = {
+  body: 'Permanently delete 12 files from the workspace? This cannot be undone.',
+  tone: 'danger',
+  actions: [
+    { id: 'delete', label: 'Delete files', style: 'destructive', default: true },
+    { id: 'cancel', label: 'Keep them' },
+  ],
+};
+const CHOICES: ConfirmCardData = {
+  heading: 'Where should I deploy?',
+  body: 'Pick a target environment for this build.',
+  actions: [
+    { id: 'staging', label: 'Staging', default: true },
+    { id: 'preview', label: 'Preview' },
+    { id: 'prod', label: 'Production', style: 'primary' },
+  ],
+};
+const DISMISSIBLE: ConfirmCardData = {
+  body: 'Send the drafted email to the customer?',
+  dismissible: true,
+  actions: [
+    { id: 'send', label: 'Send', style: 'primary', default: true },
+    { id: 'edit', label: 'Edit first' },
+  ],
+};
+const HEADING_MAP: Record<string, string | undefined> = {
+  'card-approve': 'Run database migration?',
+  'card-delete': 'Delete files?',
+  'card-deploy': undefined,
+  'card-send': 'Send email?',
+};
+const HTML_SNIPPET = (def: ConfirmCardData, cardId: string) => {
+  const heading = HEADING_MAP[cardId];
+  return `<kc-confirm${heading ? ` heading="${heading}"` : ''}></kc-confirm>
+<script type="module">
+  import '@kitnai/chat/elements'; // registers the custom elements
+  const el = document.querySelector('kc-confirm');
+  // \`data\` is the CardEnvelope.data (set as a property).
+  el.data = ${JSON.stringify(def, null, 2)};
+  // Cards bubble ONE \`kc-card\` CustomEvent carrying a typed CardEvent.
+  el.addEventListener('kc-card', (e) => {
+    const ev = e.detail; // { kind:'action', cardId, action, payload? } | { kind:'dismiss', ... } | ...
+    if (ev.kind === 'action') console.log('chose', ev.action);
+  });
+</script>`;
+};
+const meta = {
+  title: 'Generative UI/Cards/kc-confirm',
+  tags: ['autodocs'],
+  argTypes: argTypesFor('kc-confirm'),
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: specDescription('kc-confirm', [
+        "`<kc-confirm>` is a **named-intent approval** card (set via the `data` **property**): a title + body + a small set of action buttons. Activating an action emits the Card contract's **`action`** verb up a bubbling **`kc-card`** CustomEvent of `{ kind: 'action', cardId, action, payload? }`, then **resolves** the card (other actions disabled, the chosen one marked) so the same approval can't double-fire.",
+        '**Action styles:** `primary` (filled accent), `default` (outline), `destructive` (red/danger). A `tone:\'danger\'` and any destructive action add a warning icon + danger accent — never color alone. At most one action can be `default:true` (the keyboard default; gets focus only when `autofocus` is set, which is **off** by default to avoid focus-stealing mid-stream).',
+        '**Events** (all frozen Card-contract verbs): `ready` on mount, `action` on choice, `dismiss` for the optional close affordance (`dismissible:true`), `error` for a malformed definition (renders the inline `kc-card` error). It **never invents events**. The same shapes flow over the remote iframe transport unchanged.',
+      ]),
+    },
+  },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+/** The canonical two-action approval (Approve / Reject). */
+export const ApproveReject: Story = {
+  render: () => <ConfirmDemo def={APPROVE} cardId="card-approve" heading="Run database migration?" />,
+  parameters: { docs: { source: { code: HTML_SNIPPET(APPROVE, 'card-approve'), language: 'html' } } },
+};
+/** A destructive action (`tone:'danger'` + `style:'destructive'`) — danger styling, no color-only cue. */
+export const Destructive: Story = {
+  render: () => <ConfirmDemo def={DESTRUCTIVE} cardId="card-delete" heading="Delete files?" />,
+  parameters: { docs: { source: { code: HTML_SNIPPET(DESTRUCTIVE, 'card-delete'), language: 'html' } } },
+};
+/** A small choice set (3 actions, one `default:true`). */
+export const ChoiceSet: Story = {
+  render: () => <ConfirmDemo def={CHOICES} cardId="card-deploy" />,
+  parameters: { docs: { source: { code: HTML_SNIPPET(CHOICES, 'card-deploy'), language: 'html' } } },
+};
+/** A dismissible approval (a close affordance emits the `dismiss` verb). */
+export const Dismissible: Story = {
+  render: () => <ConfirmDemo def={DISMISSIBLE} cardId="card-send" heading="Send email?" />,
+  parameters: { docs: { source: { code: HTML_SNIPPET(DISMISSIBLE, 'card-send'), language: 'html' } } },
+};
+/** A malformed `data` (empty `actions`) → the inline error state + an `error` event. */
+export const ErrorState: Story = {
+  render: () => <ConfirmDemo def={{ actions: [] } as unknown as ConfirmCardData} cardId="card-bad" />,
+  parameters: {
+    docs: {
+      source: {
+        code: `<kc-confirm></kc-confirm>
+<script type="module">
+  import '@kitnai/chat/elements';
+  const el = document.querySelector('kc-confirm');
+  // No actions → inline error state + an \`error\` event.
+  el.data = { actions: [] };
+  el.addEventListener('kc-card', (e) => {
+    if (e.detail.kind === 'error') console.warn('confirm error:', e.detail.message);
+  });
+</script>`,
+        language: 'html',
+      },
+    },
+  },
+};

package/src/elements/confirm-card.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import { defineWebComponent } from './define';
+import { ConfirmCard, type ConfirmCardData } from '../components/confirm-card';
+interface Props extends Record<string, unknown> {
+  /** The confirm definition (the CardEnvelope.data). Set as a JS PROPERTY:
+   *  `el.data = { body, tone, actions:[…] }`. Import `ConfirmCardData` from
+   *  `@kitnai/chat` for the full shape. */
+  data?: Record<string, unknown>;
+  /** Stable card id correlating every emitted CardEvent. Attribute: `card-id`. */
+  cardId?: string;
+  /** Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. */
+  heading?: string;
+  /** Focus the default action on mount (off by default — no focus-stealing).
+   *  Attribute: `autofocus`. */
+  autofocus?: boolean;
+}
+/**
+ * `<kc-confirm>` — a named-intent **approval** card (set via the `data` property):
+ * a title + body + a small set of action buttons. Activating an action emits the
+ * Card contract's **`action`** verb up a bubbling **`kc-card`** CustomEvent
+ * (`{ kind:'action', cardId, action, payload }`) and resolves the card so the same
+ * approval can't double-fire. Also emits `ready` on mount, `dismiss` for the
+ * optional close affordance, and `error` for a malformed definition (inline error).
+ * Routes through a `CardProvider` when present, else the bubbling `kc-card` event.
+ * Isolated in Shadow DOM; theme-aware via the shared kit tokens.
+ */
+defineWebComponent<Props>(
+  'kc-confirm',
+  {
+    data: undefined,
+    cardId: undefined,
+    heading: undefined,
+    autofocus: false,
+  },
+  (props, { element, flag }) => (
+    <ConfirmCard
+      data={props.data as ConfirmCardData | undefined}
+      cardId={props.cardId ?? (element.id || 'kc-confirm')}
+      heading={props.heading}
+      autofocus={flag('autofocus')}
+      hostElement={element}
+    />
+  ),
+);

package/src/elements/{kitn-context-meter.stories.tsx → context-meter.stories.tsx} RENAMED Viewed

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
 interface ContextUsage {
   usedTokens: number;
@@ -17,7 +18,7 @@ declare module 'solid-js' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      'kitn-context-meter': JSX.HTMLAttributes<HTMLElement>;
+      'kc-context': JSX.HTMLAttributes<HTMLElement>;
     }
   }
 }
@@ -32,19 +33,19 @@ const usage: ContextUsage = {
   estimatedCost: 0.42,
 };
-/** Render `<kitn-context-meter>` with the `context` set as a JS property. */
+/** Render `<kc-context>` with the `context` set as a JS property. */
 function MeterElement(props: { context: ContextUsage }) {
   let el: (HTMLElement & { context?: ContextUsage }) | undefined;
   onMount(() => {
     if (el) el.context = props.context;
   });
   return (
-    <kitn-context-meter ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '40px' }} />
+    <kc-context ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '40px' }} />
   );
 }
 const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kitn-context-meter id="ctx"></kitn-context-meter>
+<kc-context id="ctx"></kc-context>
 <script type="module">
   import '@kitnai/chat/elements';   // registers the custom elements
@@ -58,19 +59,18 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 </script>`;
 const meta = {
-  title: 'Web Components/kitn-context-meter',
+  title: 'Web Components/kc-context',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kc-context'),
   parameters: {
     layout: 'fullscreen',
     docs: {
-      description: {
-        component: [
-          '`<kitn-context-meter>` is the framework-agnostic **web component** for a token/context-window usage meter — a compact gauge with a hover-card breakdown (input / output / reasoning / cache + estimated cost) — isolated in **Shadow DOM**.',
+      description: specDescription('kc-context', [
+          '`<kc-context>` is the framework-agnostic **web component** for a token/context-window usage meter — a compact gauge with a hover-card breakdown (input / output / reasoning / cache + estimated cost) — isolated in **Shadow DOM**.',
           '**When to use:** showing how much of the context window a conversation is using, typically in a chat header. In SolidJS, compose the `Context` primitives.',
           "**How to use:** register once with `import '@kitnai/chat/elements'`, then set the `context` **property** with the usage object. Hover the meter to reveal the breakdown.",
           'See the **Code** tab for HTML usage.',
-        ].join('\n\n'),
-      },
+        ]),
     },
   },
 } satisfies Meta;

package/src/elements/context-meter.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Show } from 'solid-js';
-import { defineKitnElement } from './define';
+import { defineWebComponent } from './define';
 import {
   Context,
   ContextTrigger,
@@ -36,11 +36,11 @@ interface Props extends Record<string, unknown> {
 }
 /**
- * `<kitn-context-meter>` — a token/context-window usage meter with a hover-card
+ * `<kc-context>` — a token/context-window usage meter with a hover-card
  * breakdown (input/output/reasoning/cache + estimated cost). Data via the
  * `context` property.
  */
-defineKitnElement<Props>('kitn-context-meter', {
+defineWebComponent<Props>('kc-context', {
   context: undefined,
 }, (props) => (
   <Show when={props.context}>