@kitn.ai/ui 0.14.1

package/dist/llms/llms.txt

@@ -0,0 +1,104 @@
+<!-- AUTO-GENERATED by scripts/gen-llms.mjs — do not edit by hand. Run `npm run build`. -->
+# @kitn.ai/ui
+
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 44 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
+
+## Install
+
+```bash
+npm install @kitn.ai/ui
+# SolidJS consumers also need the peer dep:
+npm install solid-js
+```
+
+## #1 rule: array/object data goes on JS PROPERTIES, not HTML attributes
+
+This is the single most common mistake. Arrays and objects (`messages`, `models`, `context`, `suggestions`, `slashCommands`, …) MUST be assigned as JavaScript properties on the element. They CANNOT be passed as HTML attributes — an HTML attribute is always a string and will be ignored or mis-parsed.
+
+```js
+const chat = document.querySelector('kai-chat');
+chat.messages = [{ id: '1', role: 'assistant', content: 'Hi!' }]; // ✅ property
+```
+```html
+<kai-chat messages="[...]"></kai-chat>  <!-- ❌ never works -->
+```
+
+Only scalar values (string/number/boolean) work as attributes (e.g. `placeholder`, `loading`, `theme`).
+
+## Two layers
+
+**Layer 1 — batteries-included web components** (`import '@kitn.ai/ui/elements'`):
+Drop an element into any framework (React, Vue, plain HTML). Data in via JS properties; interactions out via non-bubbling CustomEvents.
+
+- `<kai-chat>` — full chat UI (message list + prompt input). The primary starting point.
+- `<kai-conversations>` — sidebar conversation browser with group support.
+- `<kai-prompt-input>` — standalone composer with send button.
+
+**Layer 2 — composable primitives** (`import { … } from '@kitn.ai/ui'`):
+All 44 elements are also exported individually. Use them for custom layouts or features `<kai-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+
+## Key rules for the web components
+
+1. **Array/object data = JS properties** (see above). Scalars may be attributes.
+2. **Events are non-bubbling `CustomEvent`s** — listen directly on the element:
+   `chat.addEventListener('kai-submit', (e) => console.log(e.detail.value))`
+3. **`theme` attribute** (`'light' | 'dark' | 'auto'`) works on every element. Default `auto` follows `prefers-color-scheme`.
+4. **Theming via CSS custom properties** — override `--kai-color-*` tokens on `:root`; they pierce Shadow DOM.
+
+## ChatMessage schema (required for `<kai-chat>`)
+
+```ts
+interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  reasoning?: { text: string; label?: string };
+  tools?: ToolPart[];
+  attachments?: AttachmentData[];
+  actions?: ('copy' | 'like' | 'dislike' | 'regenerate' | 'edit')[];
+}
+```
+
+## Framework wiring
+
+**Plain HTML / CDN**
+```html
+<script type="module" src="https://unpkg.com/@kitn.ai/ui/elements"></script>
+<kai-chat style="display:block;height:100vh"></kai-chat>
+<script type="module">
+  const chat = document.querySelector('kai-chat');
+  chat.messages = [];
+</script>
+```
+
+**React** — typed wrappers auto-set properties and expose `on<Event>` props:
+```tsx
+import { Chat } from '@kitn.ai/ui/react';
+<Chat messages={messages} onSubmit={(e) => send(e.detail.value)} />
+```
+
+**Vue** — use the element directly; pass arrays via `.prop`:
+```vue
+<kai-chat :messages.prop="messages" @kai-submit="send" />
+```
+
+## Theming
+
+```css
+:root {
+  --kai-color-background: #0f0f0f;
+  --kai-color-primary: #7c3aed;
+  --kai-color-muted: #1e1e1e;
+}
+```
+
+For plain HTML/CDN: `<link rel="stylesheet" href="…/@kitn.ai/ui/theme.tokens.css">`.
+For Tailwind builds: `@import "@kitn.ai/ui/theme.css"` in your CSS.
+
+## Docs
+
+- Full element reference (all 44 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Machine-readable Custom Elements Manifest: https://unpkg.com/@kitn.ai/ui/dist/custom-elements.json
+- Working examples: https://github.com/kitn-ai/ui/tree/main/examples
+- Storybook: https://storybook.kitn.dev
+- Repository: https://github.com/kitn-ai/ui

package/dist/origin.d.ts

@@ -0,0 +1,5 @@
+export declare function assertOrigin(actual: string, expected: string): boolean;
+/** Fail-closed precondition (H-F): the iframe must be cross-origin to the host so
+ *  `allow-same-origin` can't reach host DOM, and `src` must be on the provider origin. */
+export declare function assertCrossOrigin(src: string, providerOrigin: string, hostOrigin: string): void;
+export declare function redactFrame(value: unknown): unknown;

package/dist/provider-runtime.d.ts

@@ -0,0 +1,27 @@
+import { CardEnvelope, CardHost } from '../primitives/card-contract';
+import { JsonSchema } from '../primitives/card-validate';
+/** A provider-side renderer for one card `type`. Renamed (was CardRenderer) per H-K
+ *  to avoid colliding with the exported Solid `<CardRenderer>` component. */
+export interface RemoteCardRenderer {
+    /** The card `type` this renderer handles. */
+    type: string;
+    /** Optional JSON Schema for this type's `data`; validated best-effort before mount. */
+    schema?: JsonSchema;
+    /** Mount into `root`, given the envelope + a CardHost. Return a disposer. */
+    mount(root: HTMLElement, envelope: CardEnvelope, host: CardHost): () => void;
+}
+export interface CreateCardBridgeOptions {
+    /** Element the card mounts into + whose height is observed. */
+    root: HTMLElement;
+    /** Renderers by card type. Unknown type → inline "unsupported card" + event{error}. */
+    renderers: RemoteCardRenderer[];
+    /** Versions this runtime supports (default ['1']). */
+    supportedVersions?: string[];
+}
+export interface CardBridge {
+    /** Begin: listen for `hello`, complete handshake, render on `render`. */
+    start(): void;
+    /** Stop observers + listeners + dispose current card. */
+    stop(): void;
+}
+export declare function createCardBridge(options: CreateCardBridgeOptions): CardBridge;

package/dist/schemas/card-envelope.schema.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/card-envelope.schema.json",
+  "title": "CardEnvelope",
+  "description": "A card the agent/server asks the chat to render. `data` validates against the per-type schema.",
+  "type": "object",
+  "required": ["type", "id", "data"],
+  "properties": {
+    "type": { "type": "string", "minLength": 1 },
+    "id": { "type": "string", "minLength": 1 },
+    "data": {},
+    "title": { "type": "string" }
+  }
+}

package/dist/schemas/card-event.schema.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/card-event.schema.json",
+  "title": "CardEvent",
+  "description": "An event a card emits up to the host. `kind` discriminates the payload.",
+  "type": "object",
+  "required": ["kind"],
+  "properties": {
+    "kind": { "enum": ["ready", "submit", "action", "send-prompt", "open", "resize", "state", "dismiss", "error"] },
+    "cardId": { "type": "string" }
+  }
+}

package/dist/schemas/choice.schema.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/choice.schema.json",
+  "title": "ChoiceCardData",
+  "description": "Data payload for a `choice` card (CardEnvelope.data when type='choice'). A single-select 'pick one of N rich options' card; activating an option emits the `action` verb.",
+  "type": "object",
+  "required": ["options"],
+  "properties": {
+    "prompt": {
+      "type": "string",
+      "description": "Optional question/body text rendered above the options. Distinct from CardEnvelope.title (the card chrome heading)."
+    },
+    "submitLabel": {
+      "type": "string",
+      "description": "Label for the Submit button; default 'Submit'."
+    },
+    "options": {
+      "type": "array",
+      "minItems": 1,
+      "description": "The selectable options, rendered in order. Exactly one can be chosen.",
+      "items": {
+        "type": "object",
+        "required": ["id", "label"],
+        "properties": {
+          "id": {
+            "type": "string",
+            "minLength": 1,
+            "description": "Emitted as CardEvent.action. Must be unique within `options`. (The reserved id '__other__' is used by the allowOther escape.)",
+            "x-kai-unique": true
+          },
+          "label": { "type": "string", "minLength": 1, "description": "Visible option label." },
+          "description": {
+            "type": "string",
+            "description": "Optional secondary line under the label."
+          },
+          "media": {
+            "type": "object",
+            "description": "Optional leading media: an image URL or a named icon.",
+            "properties": {
+              "image": { "type": "string", "description": "Image URL rendered as a leading thumbnail in the row." },
+              "imageAlt": { "type": "string", "description": "Accessible alt text for `image` (decorative if omitted)." },
+              "icon": { "type": "string", "description": "Named icon rendered as a leading glyph." }
+            }
+          },
+          "meta": {
+            "type": "string",
+            "description": "Trailing freeform text (e.g. a price or badge), right-aligned in the row."
+          },
+          "recommended": {
+            "type": "boolean",
+            "default": false,
+            "description": "Renders a small 'Recommended' pill near the label."
+          },
+          "disabled": {
+            "type": "boolean",
+            "default": false,
+            "description": "Option is shown but not selectable, and skipped in keyboard nav."
+          },
+          "payload": {
+            "description": "Optional opaque payload echoed back in CardEvent.payload (any JSON)."
+          }
+        }
+      }
+    },
+    "allowOther": {
+      "description": "Optional free-text escape ('none of these / specify'). `true` appends a final 'Other…' option; an object customizes its `label`/`placeholder`. Selecting it reveals a text input; the shared Submit button then emits `{ kind:'action', action:'__other__', payload:{ text } }`.",
+      "x-kai-control": "allow-other"
+    }
+  }
+}

package/dist/schemas/confirm.schema.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/confirm.schema.json",
+  "title": "ConfirmCardData",
+  "description": "Data payload for a `confirm` card (CardEnvelope.data when type='confirm').",
+  "type": "object",
+  "required": ["actions"],
+  "properties": {
+    "heading": {
+      "type": "string",
+      "description": "Optional in-body heading. Distinct from CardEnvelope.title (the card chrome title)."
+    },
+    "body": {
+      "type": "string",
+      "description": "Body text. Plain text in v1 (rendered safely; no HTML injection)."
+    },
+    "tone": {
+      "type": "string",
+      "enum": ["default", "warning", "danger"],
+      "default": "default",
+      "description": "Overall card tone; 'danger' adds a warning icon + accent for destructive approvals.",
+      "x-kai-control": "tone"
+    },
+    "actions": {
+      "type": "array",
+      "minItems": 1,
+      "maxItems": 4,
+      "description": "The choice set. Rendered as buttons in order; max 4 keeps it a decision, not a menu.",
+      "items": {
+        "type": "object",
+        "required": ["id", "label"],
+        "properties": {
+          "id": {
+            "type": "string",
+            "minLength": 1,
+            "description": "Emitted as CardEvent.action. Must be unique within `actions`.",
+            "x-kai-unique": true
+          },
+          "label": { "type": "string", "minLength": 1, "description": "Visible button label." },
+          "style": {
+            "type": "string",
+            "enum": ["primary", "default", "destructive"],
+            "default": "default",
+            "description": "Button emphasis. 'destructive' = red/danger; 'primary' = filled accent.",
+            "x-kai-control": "button-style"
+          },
+          "payload": {
+            "description": "Optional opaque payload echoed back in CardEvent.payload (any JSON)."
+          },
+          "default": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, this action is the keyboard default (Enter) and gets initial focus. At most one should be true; the card uses the first if several are.",
+            "x-kai-default-action": true
+          }
+        }
+      }
+    },
+    "dismissible": {
+      "type": "boolean",
+      "default": false,
+      "description": "Show a close affordance that emits the `dismiss` verb."
+    }
+  }
+}

package/dist/schemas/embed.schema.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/embed.schema.json",
+  "title": "EmbedCardData",
+  "description": "Lazy media-embed payload (YouTube / Vimeo / generic player URL).",
+  "type": "object",
+  "x-kai-card-type": "embed",
+  "x-kai-contract-version": "1",
+  "required": ["provider"],
+  "additionalProperties": false,
+  "properties": {
+    "provider": {
+      "type": "string",
+      "enum": ["youtube", "vimeo", "generic"],
+      "description": "Media provider. 'generic' frames `url` directly (must be an https embeddable player URL whose origin is app-allowlisted).",
+      "x-kai-control": "select"
+    },
+    "id": {
+      "type": "string",
+      "description": "Provider video id (required for youtube/vimeo when `url` is absent). e.g. 'dQw4w9WgXcQ'.",
+      "maxLength": 64,
+      "pattern": "^[A-Za-z0-9_-]+$"
+    },
+    "url": {
+      "type": "string",
+      "format": "uri",
+      "description": "Full media/watch URL. For youtube/vimeo it is parsed to an id; for 'generic' it is the embeddable player src (https only).",
+      "x-kai-format": "url"
+    },
+    "title": {
+      "type": "string",
+      "description": "Accessible title for the player iframe + the poster label. Strongly recommended for a11y.",
+      "maxLength": 300
+    },
+    "poster": {
+      "type": "string",
+      "format": "uri",
+      "description": "Thumbnail shown before play. When omitted, youtube/vimeo derive a default thumbnail; 'generic' shows a neutral play placeholder.",
+      "x-kai-format": "url"
+    },
+    "start": {
+      "type": "integer",
+      "minimum": 0,
+      "description": "Optional start offset in seconds.",
+      "x-kai-unit": "seconds"
+    },
+    "aspectRatio": {
+      "type": "string",
+      "enum": ["16:9", "4:3", "1:1", "9:16"],
+      "default": "16:9",
+      "description": "Player box aspect ratio (CSS aspect-ratio).",
+      "x-kai-control": "select"
+    }
+  },
+  "allOf": [
+    {
+      "if": { "properties": { "provider": { "const": "generic" } } },
+      "then": { "required": ["url"] }
+    },
+    {
+      "if": { "properties": { "provider": { "enum": ["youtube", "vimeo"] } } },
+      "then": { "anyOf": [{ "required": ["id"] }, { "required": ["url"] }] }
+    }
+  ]
+}

package/dist/schemas/form.result.schema.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/form.result.schema.json",
+  "title": "kai-form submit payload",
+  "description": "The CardEvent {kind:'submit'} `data` for a form card: an object that validates against the form-definition schema that was sent down in CardEnvelope.data. Standard JSON Schema validation (type/enum/required/min-max/length/pattern) holds. Optional empty strings are omitted.",
+  "type": "object"
+}

package/dist/schemas/form.schema.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/form.schema.json",
+  "title": "kai-form data (a form definition)",
+  "description": "The CardEnvelope.data for a card of type 'form': a JSON Schema (type:'object') describing the fields kai-form renders, plus optional x-kai-* UI hints. The same schema validates the submission.",
+  "type": "object",
+  "required": ["type", "properties"],
+  "properties": {
+    "type": { "const": "object" },
+    "title": { "type": "string" },
+    "description": { "type": "string" },
+    "required": { "type": "array", "items": { "type": "string" } },
+    "properties": {
+      "type": "object"
+    },
+    "x-kai-order": { "type": "array", "items": { "type": "string" } },
+    "x-kai-inlineMax": { "type": "integer", "minimum": 1 },
+    "x-kai-submitLabel": { "type": "string" },
+    "x-kai-dismissible": { "type": "boolean" },
+    "x-kai-actions": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": ["id", "label"],
+        "properties": {
+          "id": { "type": "string" },
+          "label": { "type": "string" },
+          "variant": { "enum": ["default", "ghost", "outline"] }
+        }
+      }
+    }
+  }
+}

package/dist/schemas/link.schema.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/link.schema.json",
+  "title": "LinkPreviewData",
+  "description": "Rich link / Open-Graph preview payload. The card renders from this; it never fetches.",
+  "type": "object",
+  "x-kai-card-type": "link",
+  "x-kai-contract-version": "1",
+  "required": ["url"],
+  "additionalProperties": false,
+  "properties": {
+    "url": {
+      "type": "string",
+      "format": "uri",
+      "description": "Canonical destination. Opened via the contract `open` verb (target 'tab').",
+      "x-kai-format": "url"
+    },
+    "title": {
+      "type": "string",
+      "description": "OG title (og:title). Falls back to the domain when absent.",
+      "maxLength": 300
+    },
+    "description": {
+      "type": "string",
+      "description": "OG description (og:description). Clamped to 3 lines in the UI.",
+      "maxLength": 1000
+    },
+    "image": {
+      "type": "string",
+      "format": "uri",
+      "description": "Preview image (og:image). Optional; the card degrades gracefully when missing or it fails to load.",
+      "x-kai-format": "url"
+    },
+    "imageAlt": {
+      "type": "string",
+      "description": "Alt text for the preview image. Defaults to the title (or empty = decorative) when omitted.",
+      "maxLength": 300
+    },
+    "favicon": {
+      "type": "string",
+      "format": "uri",
+      "description": "Site favicon shown next to the domain.",
+      "x-kai-format": "url"
+    },
+    "domain": {
+      "type": "string",
+      "description": "Display domain (e.g. 'example.com'). Derived from `url` when omitted.",
+      "maxLength": 253
+    },
+    "siteName": {
+      "type": "string",
+      "description": "OG site name (og:site_name). Shown in place of the domain when present.",
+      "maxLength": 200
+    }
+  }
+}

package/dist/schemas/tasks.result.schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/tasks.result.schema.json",
+  "title": "TasksCardResult",
+  "description": "Payload of CardEvent { kind: 'submit' } from a tasks card.",
+  "type": "object",
+  "required": ["selected"],
+  "properties": {
+    "selected": {
+      "type": "array",
+      "description": "Ids of the checked tasks, in the order they appear in `tasks`. Subset of the input task ids.",
+      "items": { "type": "string", "minLength": 1 },
+      "uniqueItems": true
+    }
+  }
+}

package/dist/schemas/tasks.schema.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://kitn.ai/schemas/card/tasks.schema.json",
+  "title": "TasksCardData",
+  "description": "Data payload for a `tasks` card (CardEnvelope.data when type='tasks').",
+  "type": "object",
+  "required": ["tasks"],
+  "properties": {
+    "mode": {
+      "type": "string",
+      "enum": ["select"],
+      "default": "select",
+      "description": "v1 supports only 'select' (toggle + confirm). 'progress' (live AG-UI status) is a future enum value; restricting it now keeps the wire forward-compatible.",
+      "x-kai-mode": true
+    },
+    "heading": {
+      "type": "string",
+      "description": "Optional in-body heading; distinct from CardEnvelope.title."
+    },
+    "tasks": {
+      "type": "array",
+      "minItems": 1,
+      "description": "The selectable rows, rendered in order.",
+      "items": {
+        "type": "object",
+        "required": ["id", "label"],
+        "properties": {
+          "id": {
+            "type": "string",
+            "minLength": 1,
+            "description": "Stable id; the selected ids are returned in the result. Unique within `tasks`.",
+            "x-kai-unique": true
+          },
+          "label": { "type": "string", "minLength": 1, "description": "Row label." },
+          "description": { "type": "string", "description": "Optional secondary line under the label." },
+          "checked": {
+            "type": "boolean",
+            "default": false,
+            "description": "Initial checked state of the row."
+          },
+          "disabled": {
+            "type": "boolean",
+            "default": false,
+            "description": "Row is shown but not toggleable (and excluded from select-all)."
+          }
+        }
+      }
+    },
+    "selectAll": {
+      "type": "boolean",
+      "default": false,
+      "description": "Render a master select-all checkbox above the list.",
+      "x-kai-control": "select-all"
+    },
+    "confirmLabel": {
+      "type": "string",
+      "default": "Confirm",
+      "description": "Label for the confirm button."
+    },
+    "allowEmpty": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, confirm is enabled with zero selected (emits { selected: [] }). If false, confirm is disabled until >=1 selected."
+    },
+    "min": {
+      "type": "integer",
+      "minimum": 0,
+      "description": "Optional minimum number that must be selected to confirm.",
+      "x-kai-select-min": true
+    },
+    "max": {
+      "type": "integer",
+      "minimum": 1,
+      "description": "Optional maximum selectable; further toggles are blocked once reached.",
+      "x-kai-select-max": true
+    }
+  }
+}