UNPKG

@kitn.ai/chat

Version:

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

1,348 lines 170 kB
{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "dist/kitn-chat.es.js", "declarations": [ { "kind": "class", "customElement": true, "tagName": "kc-artifact", "name": "KcArtifactElement", "description": "", "members": [ { "kind": "field", "name": "src", "type": { "text": "undefined | string" }, "description": "URL the preview iframe frames. Consumer-controlled.", "privacy": "public" }, { "kind": "field", "name": "files", "type": { "text": "{ path: string; url?: undefined | string; code?: undefined | string; language?: undefined | string; type?: undefined | \"html\" | \"pdf\" | \"image\" | \"other\" }[]" }, "description": "Files for the Code tab tree + each file's preview `url`. Set as a JS property (array).", "privacy": "public" }, { "kind": "field", "name": "tab", "type": { "text": "undefined | \"preview\" | \"code\"" }, "description": "Active tab: `preview` (default) or `code`.", "privacy": "public" }, { "kind": "field", "name": "activeFile", "type": { "text": "undefined | string" }, "description": "Selected file path — syncs the tree highlight, Code source, and preview.", "privacy": "public" }, { "kind": "field", "name": "sandbox", "type": { "text": "undefined | string" }, "description": "iframe `sandbox` override. Secure default `allow-scripts allow-forms` (NOT `allow-same-origin`).", "privacy": "public" }, { "kind": "field", "name": "iframeTitle", "type": { "text": "undefined | string" }, "description": "Accessible title for the preview iframe.", "privacy": "public" }, { "kind": "field", "name": "maximized", "type": { "text": "undefined | false | true" }, "description": "Reflects the artifact's own maximized view-state (usually driven by the protocol).", "privacy": "public" }, { "kind": "field", "name": "expandable", "type": { "text": "undefined | false | true" }, "description": "Show the expand-to-fill button (OPT-IN).", "privacy": "public" }, { "kind": "field", "name": "openInTab", "type": { "text": "undefined | false | true" }, "description": "Show the open-in-new-tab button (OPT-IN).", "privacy": "public" }, { "kind": "field", "name": "noNav", "type": { "text": "undefined | false | true" }, "description": "Hide back/forward.", "privacy": "public" }, { "kind": "field", "name": "noReload", "type": { "text": "undefined | false | true" }, "description": "Hide reload.", "privacy": "public" }, { "kind": "field", "name": "noHome", "type": { "text": "undefined | false | true" }, "description": "Hide home.", "privacy": "public" }, { "kind": "field", "name": "noPathField", "type": { "text": "undefined | false | true" }, "description": "Hide the address field.", "privacy": "public" }, { "kind": "field", "name": "noTabs", "type": { "text": "undefined | false | true" }, "description": "Hide the Preview|Code toggle.", "privacy": "public" }, { "kind": "field", "name": "standalone", "type": { "text": "undefined | false | true" }, "description": "Standalone chrome: rounded corners + border (else square, borderless in-panel).", "privacy": "public" }, { "kind": "field", "name": "readonlyPath", "type": { "text": "undefined | false | true" }, "description": "Show the address but make it read-only (visible, nav-tracking, non-editable).", "privacy": "public" } ], "attributes": [ { "name": "theme", "type": { "text": "'light' | 'dark' | 'auto'" }, "description": "Color mode (auto follows prefers-color-scheme)." }, { "name": "src", "fieldName": "src", "type": { "text": "undefined | string" }, "description": "URL the preview iframe frames. Consumer-controlled." }, { "name": "tab", "fieldName": "tab", "type": { "text": "undefined | \"preview\" | \"code\"" }, "description": "Active tab: `preview` (default) or `code`." }, { "name": "active-file", "fieldName": "activeFile", "type": { "text": "undefined | string" }, "description": "Selected file path — syncs the tree highlight, Code source, and preview." }, { "name": "sandbox", "fieldName": "sandbox", "type": { "text": "undefined | string" }, "description": "iframe `sandbox` override. Secure default `allow-scripts allow-forms` (NOT `allow-same-origin`)." }, { "name": "iframe-title", "fieldName": "iframeTitle", "type": { "text": "undefined | string" }, "description": "Accessible title for the preview iframe." }, { "name": "maximized", "fieldName": "maximized", "type": { "text": "undefined | false | true" }, "description": "Reflects the artifact's own maximized view-state (usually driven by the protocol)." }, { "name": "expandable", "fieldName": "expandable", "type": { "text": "undefined | false | true" }, "description": "Show the expand-to-fill button (OPT-IN)." }, { "name": "open-in-tab", "fieldName": "openInTab", "type": { "text": "undefined | false | true" }, "description": "Show the open-in-new-tab button (OPT-IN)." }, { "name": "no-nav", "fieldName": "noNav", "type": { "text": "undefined | false | true" }, "description": "Hide back/forward." }, { "name": "no-reload", "fieldName": "noReload", "type": { "text": "undefined | false | true" }, "description": "Hide reload." }, { "name": "no-home", "fieldName": "noHome", "type": { "text": "undefined | false | true" }, "description": "Hide home." }, { "name": "no-path-field", "fieldName": "noPathField", "type": { "text": "undefined | false | true" }, "description": "Hide the address field." }, { "name": "no-tabs", "fieldName": "noTabs", "type": { "text": "undefined | false | true" }, "description": "Hide the Preview|Code toggle." }, { "name": "standalone", "fieldName": "standalone", "type": { "text": "undefined | false | true" }, "description": "Standalone chrome: rounded corners + border (else square, borderless in-panel)." }, { "name": "readonly-path", "fieldName": "readonlyPath", "type": { "text": "undefined | false | true" }, "description": "Show the address but make it read-only (visible, nav-tracking, non-editable)." } ], "events": [ { "name": "kc-file-select", "type": { "text": "CustomEvent<{ path: string }>" }, "description": "Fired when a file is selected. `detail.path`." }, { "name": "kc-maximize-change", "type": { "text": "CustomEvent<{ maximized: false | true }>" }, "description": "Artifact's own maximize button toggled (consumer-observable; non-bubbling)." }, { "name": "kc-navigate", "type": { "text": "CustomEvent<{ url: string }>" }, "description": "Fired when the preview navigates. `detail.url` = the new location." }, { "name": "kc-tab-change", "type": { "text": "CustomEvent<{ tab: \"preview\" | \"code\" }>" }, "description": "Fired when the Preview|Code tab changes. `detail.tab`." } ], "cssProperties": [] }, { "kind": "class", "customElement": true, "tagName": "kc-attachments", "name": "KcAttachmentsElement", "description": "", "members": [ { "kind": "field", "name": "items", "type": { "text": "{ id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]" }, "description": "The attachments to render. Set as a JS property (array).", "privacy": "public" }, { "kind": "field", "name": "variant", "type": { "text": "undefined | \"grid\" | \"inline\" | \"list\"" }, "description": "Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows.", "privacy": "public" }, { "kind": "field", "name": "hoverCard", "type": { "text": "undefined | false | true" }, "description": "Wrap each item in a hover card that previews its details.", "privacy": "public" }, { "kind": "field", "name": "removable", "type": { "text": "undefined | false | true" }, "description": "Show a remove button per item; clicking it fires a `kc-remove` event.", "privacy": "public" }, { "kind": "field", "name": "showMediaType", "type": { "text": "undefined | false | true" }, "description": "Also show the media type beneath the filename (non-grid variants).", "privacy": "public" }, { "kind": "field", "name": "emptyText", "type": { "text": "undefined | string" }, "description": "Text shown when `items` is empty.", "privacy": "public" } ], "attributes": [ { "name": "theme", "type": { "text": "'light' | 'dark' | 'auto'" }, "description": "Color mode (auto follows prefers-color-scheme)." }, { "name": "variant", "fieldName": "variant", "type": { "text": "undefined | \"grid\" | \"inline\" | \"list\"" }, "description": "Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows." }, { "name": "hover-card", "fieldName": "hoverCard", "type": { "text": "undefined | false | true" }, "description": "Wrap each item in a hover card that previews its details." }, { "name": "removable", "fieldName": "removable", "type": { "text": "undefined | false | true" }, "description": "Show a remove button per item; clicking it fires a `kc-remove` event." }, { "name": "show-media-type", "fieldName": "showMediaType", "type": { "text": "undefined | false | true" }, "description": "Also show the media type beneath the filename (non-grid variants)." }, { "name": "empty-text", "fieldName": "emptyText", "type": { "text": "undefined | string" }, "description": "Text shown when `items` is empty." } ], "events": [ { "name": "kc-remove", "type": { "text": "CustomEvent<{ id: string }>" }, "description": "A remove button was clicked." } ], "cssProperties": [] }, { "kind": "class", "customElement": true, "tagName": "kc-card", "name": "KcCardElement", "description": "", "members": [ { "kind": "field", "name": "heading", "type": { "text": "undefined | string" }, "description": "Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`.", "privacy": "public" }, { "kind": "field", "name": "description", "type": { "text": "undefined | string" }, "description": "Supporting text under the heading. Attribute: `description`.", "privacy": "public" }, { "kind": "field", "name": "errorMessage", "type": { "text": "undefined | string" }, "description": "When set, the card renders its inline error state instead of the body. Attribute: `error-message`.", "privacy": "public" }, { "kind": "field", "name": "dense", "type": { "text": "undefined | false | true" }, "description": "Compact spacing for dense lists. Attribute: `dense`.", "privacy": "public" } ], "attributes": [ { "name": "theme", "type": { "text": "'light' | 'dark' | 'auto'" }, "description": "Color mode (auto follows prefers-color-scheme)." }, { "name": "heading", "fieldName": "heading", "type": { "text": "undefined | string" }, "description": "Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`." }, { "name": "description", "fieldName": "description", "type": { "text": "undefined | string" }, "description": "Supporting text under the heading. Attribute: `description`." }, { "name": "error-message", "fieldName": "errorMessage", "type": { "text": "undefined | string" }, "description": "When set, the card renders its inline error state instead of the body. Attribute: `error-message`." }, { "name": "dense", "fieldName": "dense", "type": { "text": "undefined | false | true" }, "description": "Compact spacing for dense lists. Attribute: `dense`." } ], "events": [], "cssProperties": [] }, { "kind": "class", "customElement": true, "tagName": "kc-cards", "name": "KcCardsElement", "description": "", "members": [ { "kind": "field", "name": "cards", "type": { "text": "undefined | { type: string; id: string; data: unknown; title?: undefined | string; resolution?: undefined | { kind: \"action\"; action: string; payload?: unknown; at?: undefined | string } | { kind: \"submit\"; data: unknown; at?: undefined | string } }[]" }, "description": "The stream of card envelopes to render. Set as a JS PROPERTY: `el.cards = [...]`.", "privacy": "public" }, { "kind": "field", "name": "types", "type": { "text": "undefined | Record<string, string>" }, "description": "Optional type→tag overrides/additions (merged over the built-ins). Property: `el.types`. Typed as a plain string map (not the `CardTagMap` alias) so the generated React wrapper inlines it instead of emitting an unresolved named type.", "privacy": "public" }, { "kind": "field", "name": "policy", "type": { "text": "undefined | { onSubmit?: undefined | (cardId: string, data: unknown) => void; onAction?: undefined | (cardId: string, action: string, payload?: unknown) => void; onSendPrompt?: undefined | (text: string, opts: { mode: \"compose\" | \"send\"; context?: unknown; }) => void; onOpen?: undefined | (url: string, target: \"tab\" | \"artifact\") => void; onState?: undefined | (cardId: string, patch: unknown) => void; onDismiss?: undefined | (cardId: string) => void; onError?: undefined | (cardId: string, message: string) => void; maxSendPromptMode?: undefined | \"compose\" | \"send\" }" }, "description": "Optional CardPolicy handling child events. Property: `el.policy`.", "privacy": "public" } ], "attributes": [ { "name": "theme", "type": { "text": "'light' | 'dark' | 'auto'" }, "description": "Color mode (auto follows prefers-color-scheme)." } ], "events": [], "cssProperties": [] }, { "kind": "class", "customElement": true, "tagName": "kc-chain-of-thought", "name": "KcChainOfThoughtElement", "description": "", "members": [ { "kind": "field", "name": "steps", "type": { "text": "{ label: string; content?: undefined | string }[]" }, "description": "The reasoning steps. Set as a JS property. Compound sub-parts collapse to this one data model (Route 1).", "privacy": "public" } ], "attributes": [ { "name": "theme", "type": { "text": "'light' | 'dark' | 'auto'" }, "description": "Color mode (auto follows prefers-color-scheme)." } ], "events": [], "cssProperties": [] }, { "kind": "class", "customElement": true, "tagName": "kc-chat", "name": "KcChatElement", "description": "", "members": [ { "kind": "field", "name": "messages", "type": { "text": "{ id: string; role: \"user\" | \"assistant\"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: \"input-streaming\" | \"input-available\" | \"output-available\" | \"output-error\"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | (\"copy\" | \"like\" | \"dislike\" | \"regenerate\" | \"edit\" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string } }[]" }, "description": "The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions. Set as a JS property (`el.messages = [...]`).", "privacy": "public" }, { "kind": "field", "name": "value", "type": { "text": "undefined | string" }, "description": "Controlled value of the input. When set, the host owns the input text and must update it on `kc-value-change`; leave unset for uncontrolled behavior.", "privacy": "public" }, { "kind": "field", "name": "placeholder", "type": { "text": "undefined | string" }, "description": "Placeholder text shown in the empty input.", "privacy": "public" }, { "kind": "field", "name": "loading", "type": { "text": "undefined | false | true" }, "description": "When true, shows the loading/streaming state and disables submit (use while awaiting the assistant's reply).", "privacy": "public" }, { "kind": "field", "name": "suggestions", "type": { "text": "undefined | string[]" }, "description": "Starter prompts shown above the input when the thread is empty. Clicking one follows `suggestionMode`. Set as a JS property.", "privacy": "public" }, { "kind": "field", "name": "suggestionMode", "type": { "text": "undefined | \"submit\" | \"fill\"" }, "description": "What clicking a suggestion does: `'submit'` (default) sends it immediately as if typed and submitted; `'fill'` just places it in the input.", "privacy": "public" }, { "kind": "field", "name": "persistSuggestions", "type": { "text": "undefined | false | true" }, "description": "Keep suggestions visible after the conversation starts. By default suggestions are conversation starters and hide once `messages` is non-empty; set this to keep them always shown. Default false.", "privacy": "public" }, { "kind": "field", "name": "proseSize", "type": { "text": "undefined | \"xs\" | \"sm\" | \"base\" | \"lg\"" }, "description": "Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`.", "privacy": "public" }, { "kind": "field", "name": "codeTheme", "type": { "text": "undefined | string" }, "description": "Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`).", "privacy": "public" }, { "kind": "field", "name": "codeHighlight", "type": { "text": "undefined | false | true" }, "description": "Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true.", "privacy": "public" }, { "kind": "field", "name": "chatTitle", "type": { "text": "undefined | string" }, "description": "Optional header title shown on the left of the header.", "privacy": "public" }, { "kind": "field", "name": "models", "type": { "text": "undefined | { id: string; name: string; provider?: undefined | string; description?: undefined | string; group?: undefined | string }[]" }, "description": "Optional model list. When set (>1 model) a ModelSwitcher is shown in the header and a `kc-model-change` event fires on selection.", "privacy": "public" }, { "kind": "field", "name": "currentModel", "type": { "text": "undefined | string" }, "description": "The currently selected model id (pairs with `models`).", "privacy": "public" }, { "kind": "field", "name": "context", "type": { "text": "undefined | { usedTokens: number; maxTokens: number; inputTokens?: undefined | number; outputTokens?: undefined | number; estimatedCost?: undefined | number }" }, "description": "Optional context-window token usage. When set, a Context token meter is shown in the header.", "privacy": "public" }, { "kind": "field", "name": "scrollButton", "type": { "text": "undefined | false | true" }, "description": "Show the scroll-to-bottom button inside the scroll area. Default true.", "privacy": "public" }, { "kind": "field", "name": "headerStart", "type": { "text": "undefined | false | true" }, "description": "Whether the host has `slot=\"header-start\"` content (left of the title) — set by the `<kc-chat>` facade so a custom control forces the header open.", "privacy": "public" }, { "kind": "field", "name": "headerEnd", "type": { "text": "undefined | false | true" }, "description": "Whether the host has `slot=\"header-end\"` content (right of the controls).", "privacy": "public" }, { "kind": "field", "name": "search", "type": { "text": "undefined | false | true" }, "description": "Show a Search (Globe) button in the input toolbar; fires a `search` event.", "privacy": "public" }, { "kind": "field", "name": "voice", "type": { "text": "undefined | false | true" }, "description": "Show a Voice (Mic) button in the input toolbar; fires a `voice` event.", "privacy": "public" }, { "kind": "field", "name": "slashCommands", "type": { "text": "undefined | { id: string; label: string; description?: undefined | string; category?: undefined | string }[]" }, "description": "Slash commands — when set, typing `/` in the input opens the command palette and fires `kc-slash-select`. Set as a JS property.", "privacy": "public" }, { "kind": "field", "name": "slashActiveIds", "type": { "text": "undefined | string[]" }, "description": "Command ids to highlight as active in the palette.", "privacy": "public" }, { "kind": "field", "name": "slashCompact", "type": { "text": "undefined | false | true" }, "description": "Single-line palette rows.", "privacy": "public" }, { "kind": "field", "name": "actionsReveal", "type": { "text": "undefined | \"always\" | \"hover\"" }, "description": "Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`).", "privacy": "public" } ], "attributes": [ { "name": "theme", "type": { "text": "'light' | 'dark' | 'auto'" }, "description": "Color mode (auto follows prefers-color-scheme)." }, { "name": "value", "fieldName": "value", "type": { "text": "undefined | string" }, "description": "Controlled value of the input. When set, the host owns the input text and must update it on `kc-value-change`; leave unset for uncontrolled behavior." }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "undefined | string" }, "description": "Placeholder text shown in the empty input." }, { "name": "loading", "fieldName": "loading", "type": { "text": "undefined | false | true" }, "description": "When true, shows the loading/streaming state and disables submit (use while awaiting the assistant's reply)." }, { "name": "suggestion-mode", "fieldName": "suggestionMode", "type": { "text": "undefined | \"submit\" | \"fill\"" }, "description": "What clicking a suggestion does: `'submit'` (default) sends it immediately as if typed and submitted; `'fill'` just places it in the input." }, { "name": "persist-suggestions", "fieldName": "persistSuggestions", "type": { "text": "undefined | false | true" }, "description": "Keep suggestions visible after the conversation starts. By default suggestions are conversation starters and hide once `messages` is non-empty; set this to keep them always shown. Default false." }, { "name": "prose-size", "fieldName": "proseSize", "type": { "text": "undefined | \"xs\" | \"sm\" | \"base\" | \"lg\"" }, "description": "Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`." }, { "name": "code-theme", "fieldName": "codeTheme", "type": { "text": "undefined | string" }, "description": "Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`)." }, { "name": "code-highlight", "fieldName": "codeHighlight", "type": { "text": "undefined | false | true" }, "description": "Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true." }, { "name": "chat-title", "fieldName": "chatTitle", "type": { "text": "undefined | string" }, "description": "Optional header title shown on the left of the header." }, { "name": "current-model", "fieldName": "currentModel", "type": { "text": "undefined | string" }, "description": "The currently selected model id (pairs with `models`)." }, { "name": "scroll-button", "fieldName": "scrollButton", "type": { "text": "undefined | false | true" }, "description": "Show the scroll-to-bottom button inside the scroll area. Default true." }, { "name": "header-start", "fieldName": "headerStart", "type": { "text": "undefined | false | true" }, "description": "Whether the host has `slot=\"header-start\"` content (left of the title) — set by the `<kc-chat>` facade so a custom control forces the header open." }, { "name": "header-end", "fieldName": "headerEnd", "type": { "text": "undefined | false | true" }, "description": "Whether the host has `slot=\"header-end\"` content (right of the controls)." }, { "name": "search", "fieldName": "search", "type": { "text": "undefined | false | true" }, "description": "Show a Search (Globe) button in the input toolbar; fires a `search` event." }, { "name": "voice", "fieldName": "voice", "type": { "text": "undefined | false | true" }, "description": "Show a Voice (Mic) button in the input toolbar; fires a `voice` event." }, { "name": "slash-compact", "fieldName": "slashCompact", "type": { "text": "undefined | false | true" }, "description": "Single-line palette rows." }, { "name": "actions-reveal", "fieldName": "actionsReveal", "type": { "text": "undefined | \"always\" | \"hover\"" }, "description": "Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`)." } ], "events": [ { "name": "kc-message-action", "type": { "text": "CustomEvent<{ messageId: string; action: string }>" }, "description": "An action button on a message was clicked. `action` is the built-in name or custom id." }, { "name": "kc-model-change", "type": { "text": "CustomEvent<{ modelId: string }>" }, "description": "The header model switcher changed." }, { "name": "kc-search", "type": { "text": "CustomEvent<Record<string, never>>" }, "description": "The Search button was clicked." }, { "name": "kc-slash-select", "type": { "text": "CustomEvent<{ command: { id: string; label: string; description?: undefined | string; category?: undefined | string } }>" }, "description": "A slash command was chosen from the palette." }, { "name": "kc-submit", "type": { "text": "CustomEvent<{ value: string; attachments: { id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[] }>" }, "description": "User submitted a message." }, { "name": "kc-suggestion-click", "type": { "text": "CustomEvent<{ value: string }>" }, "description": "A suggestion chip was clicked (only in `suggestion-mode=\"fill\"`)." }, { "name": "kc-value-change", "type": { "text": "CustomEvent<{ value: string }>" }, "description": "Fired on every input change." }, { "name": "kc-voice", "type": { "text": "CustomEvent<Record<string, never>>" }, "description": "The Mic / voice button was clicked." } ], "cssProperties": [] }, { "kind": "class", "customElement": true, "tagName": "kc-checkpoint", "name": "KcCheckpointElement", "description": "", "members": [ { "kind": "field", "name": "label", "type": { "text": "undefined | string" }, "description": "Optional text beside the icon.", "privacy": "public" }, { "kind": "field", "name": "tooltip", "type": { "text": "undefined | string" }, "description": "Tooltip on hover.", "privacy": "public" }, { "kind": "field", "name": "variant", "type": { "text": "undefined | \"ghost\" | \"default\" | \"outline\"" }, "description": "Visual button style.", "privacy": "public" }, { "kind": "field", "name": "size", "type": { "text": "undefined | \"sm\" | \"lg\" | \"md\" | \"icon\" | \"icon-sm\"" }, "description": "Button size (use an `icon*` size for an icon-only checkpoint).", "privacy": "public" } ], "attributes": [ { "name": "theme", "type": { "text": "'light' | 'dark' | 'auto'" }, "description": "Color mode (auto follows prefers-color-scheme)." }, { "name": "label", "fieldName": "label", "type": { "text": "undefined | string" }, "description": "Optional text beside the icon." }, { "name": "tooltip", "fieldName": "tooltip", "type": { "text": "undefined | string" }, "description": "Tooltip on hover." }, { "name": "variant", "fieldName": "variant", "type": { "text": "undefined | \"ghost\" | \"default\" | \"outline\"" }, "description": "Visual button style." }, { "name": "size", "fieldName": "size", "type": { "text": "undefined | \"sm\" | \"lg\" | \"md\" | \"icon\" | \"icon-sm\"" }, "description": "Button size (use an `icon*` size for an icon-only checkpoint)." } ], "events": [ { "name": "kc-select", "type": { "text": "CustomEvent" }, "description": "The checkpoint was clicked." } ], "cssProperties": [] }, { "kind": "class", "customElement": true, "tagName": "kc-choice", "name": "KcChoiceElement", "description": "", "members": [ { "kind": "field", "name": "data", "type": { "text": "undefined | Record<string, unknown>" }, "description": "The choice definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { prompt, options:[…], allowOther?, submitLabel? }`. Import `ChoiceCardData` from `@kitn.ai/chat` for the full shape.", "privacy": "public" }, { "kind": "field", "name": "cardId", "type": { "text": "undefined | string" }, "description": "Stable card id correlating every emitted CardEvent. Attribute: `card-id`.", "privacy": "public" }, { "kind": "field", "name": "heading", "type": { "text": "undefined | string" }, "description": "Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`.", "privacy": "public" }, { "kind": "field", "name": "resolution", "type": { "text": "undefined | Record<string, unknown>" }, "description": "Set when the user resolved this card; renders the read-only view. Property: `el.resolution = { kind:'action', action:'…' }`.", "privacy": "public" } ], "attributes": [ { "name": "theme", "type": { "text": "'light' | 'dark' | 'auto'" }, "description": "Color mode (auto follows prefers-color-scheme)." }, { "name": "card-id", "fieldName": "cardId", "type": { "text": "undefined | string" }, "description": "Stable card id correlating every emitted CardEvent. Attribute: `card-id`." }, { "name": "heading", "fieldName": "heading", "type": { "text": "undefined | string" }, "description": "Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`." } ], "events": [], "cssProperties": [] }, { "kind": "class", "customElement": true, "tagName": "kc-code-block", "name": "KcCodeBlockElement", "description": "", "members": [ { "kind": "field", "name": "code", "type": { "text": "string" }, "description": "The source code to render.", "privacy": "public" }, { "kind": "field", "name": "language", "type": { "text": "undefined | string" }, "description": "Language grammar (e.g. `js`, `python`). Defaults to `tsx`.", "privacy": "public" }, { "kind": "field", "name": "codeTheme", "type": { "text": "undefined | string" }, "description": "Shiki theme name.", "privacy": "public" }, { "kind": "field", "name": "codeHighlight", "type": { "text": "undefined | false | true" }, "description": "Disable syntax highlighting (renders plain text, no Shiki).", "privacy": "public" }, { "kind": "field", "name": "proseSize", "type": { "text": "undefined | \"xs\" | \"sm\" | \"base\" | \"lg\"" }, "description": "Code text sizing.", "privacy": "public" } ], "attributes": [ { "name": "theme", "type": { "text": "'light' | 'dark' | 'auto'" }, "description": "Color mode (auto follows prefers-color-scheme)." }, { "name": "code", "fieldName": "code", "type": { "text": "string" }, "description": "The source code to render." }, { "name": "language", "fieldName": "language", "type": { "text": "undefined | string" }, "description": "Language grammar (e.g. `js`, `python`). Defaults to `tsx`." }, { "name": "code-theme", "fieldName": "codeTheme", "type": { "text": "undefined | string" }, "description": "Shiki theme name." }, { "name": "code-highlight", "fieldName": "codeHighlight", "type": { "text": "undefined | false | true" }, "description": "Disable syntax highlighting (renders plain text, no Shiki)." }, { "name": "prose-size", "fieldName": "proseSize", "type": { "text": "undefined | \"xs\" | \"sm\" | \"base\" | \"lg\"" }, "description": "Code text sizing." } ], "events": [], "cssProperties": [ { "name": "--color-code-foreground" } ] }, { "kind": "class", "customElement": true, "tagName": "kc-confirm", "name": "KcConfirmElement", "description": "", "members": [ { "kind": "field", "name": "data", "type": { "text": "undefined | Record<string, unknown>" }, "description": "The confirm definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { body, tone, actions:[…] }`. Import `ConfirmCardData` from `@kitn.ai/chat` for the full shape.", "privacy": "public" }, { "kind": "field", "name": "cardId", "type": { "text": "undefined | string" }, "description": "Stable card id correlating every emitted CardEvent. Attribute: `card-id`.", "privacy": "public" }, { "kind": "field", "name": "heading", "type": { "text": "undefined | string" }, "description": "Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`.", "privacy": "public" }, { "kind": "field", "name": "autofocus", "type": { "text": "undefined | false | true" }, "description": "Focus the default action on mount (off by default — no focus-stealing). Attribute: `autofocus`.", "privacy": "public" }, {