@kitn.ai/ui 0.17.0 → 0.18.1

package/dist/react/index.d.ts

@@ -1,4 +1,26 @@
-import { WebComponentProps } from './runtime';
+import { registerAll, WebComponentProps } from './runtime';
+export { registerAll };
+export { useKaiChat } from './use-kai-chat';
+export type { UseKaiChatOptions, KaiChatController, ChatMessage } from './use-kai-chat';
+export interface AgentCardProps extends WebComponentProps {
+    /** The agent's name — the primary label. Attribute: `name`. */
+    name?: string;
+    /** Selected / focused state: highlighted border + surface. Attribute: `active`. */
+    active?: boolean;
+    /** Raise a prominent "Needs you" pill plus a glowing amber edge — the attention-routing signal that pulls focus to this agent. Attribute: `needs-attention`. */
+    needsAttention?: boolean;
+    /** Run status — a JS PROPERTY (object), not an attribute. Shape: `{ tone, label?, pulse? }`, where `tone` is one of `working` | `idle` | `done` | `error` | `blocked` (maps to the kit's tool hues), `label` is an optional short string beside the dot, and `pulse` animates the dot. Set it with `el.status = { tone: 'working', label: 'Working', pulse: true }`. */
+    status?: {
+        tone: "working" | "idle" | "done" | "error" | "blocked";
+        label?: string;
+        pulse?: boolean;
+    };
+    /** The card was activated — clicked, or Enter / Space while focused. Promote this agent back to focus. */
+    onActivate?: (event: CustomEvent) => void;
+    /** The trailing "..." kebab was clicked. The consumer opens its own menu; the card only surfaces the affordance (the click does not also activate the card). */
+    onMenu?: (event: CustomEvent) => void;
+}
+export declare const AgentCard: import('react').ForwardRefExoticComponent<AgentCardProps & import('react').RefAttributes<HTMLElement>>;
 export interface ArtifactProps extends WebComponentProps {
     /** URL the preview iframe frames. Consumer-controlled. */
     src?: string;
@@ -9,9 +31,14 @@ export interface ArtifactProps extends WebComponentProps {
         code?: undefined | string;
         language?: undefined | string;
         type?: undefined | "html" | "pdf" | "image" | "other";
+        additions?: undefined | number;
+        deletions?: undefined | number;
+        status?: undefined | "added" | "modified" | "deleted" | "renamed" | "untracked";
     }[];
-    /** Active tab: `preview` (default) or `code`. */
+    /** Controlled active tab: `preview` or `code`. When set, the artifact follows it (re-asserted on change). Leave unset for an uncontrolled tab (see `defaultTab`). */
     tab?: "preview" | "code";
+    /** Uncontrolled INITIAL tab (used only when `tab` is unset). Default `preview`. Seeds the starting tab; the user can then switch freely without the consumer re-asserting a controlled `tab`. */
+    defaultTab?: "preview" | "code";
     /** Selected file path — syncs the tree highlight, Code source, and preview. */
     activeFile?: string;
     /** iframe `sandbox` override. Secure default `allow-scripts allow-forms` (NOT `allow-same-origin`). */
@@ -38,6 +65,8 @@ export interface ArtifactProps extends WebComponentProps {
     standalone?: boolean;
     /** Show the address but make it read-only (visible, nav-tracking, non-editable). */
     readonlyPath?: boolean;
+    /** Friendly address shown in the path field instead of the real current url (read-only, non-navigable). Use when the framed url is not consumer-facing (e.g. a `data:` blob) so a clean address shows instead of leaking it. Scalar string: set as the `display-url` attribute or the `displayUrl` property. */
+    displayUrl?: string;
     /** Fired when a file is selected. `detail.path`. */
     onFileSelect?: (event: CustomEvent<{
         path: string;
@@ -82,15 +111,68 @@ export interface AttachmentsProps extends WebComponentProps {
     }>) => void;
 }
 export declare const Attachments: import('react').ForwardRefExoticComponent<AttachmentsProps & import('react').RefAttributes<HTMLElement>>;
+export interface AvatarProps extends WebComponentProps {
+    /** Image URL/data-URI. When absent, the `fallback` initials show instead. */
+    src?: string;
+    /** Alt text for the image. Defaults to `fallback`. */
+    alt?: string;
+    /** Short text shown when there's no image — usually initials (e.g. "JD", "AI"). */
+    fallback?: string;
+    /** Size token: `sm` | `md` (default) | `lg`. */
+    size?: "sm" | "md" | "lg";
+}
+export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & import('react').RefAttributes<HTMLElement>>;
+export interface BadgeProps extends WebComponentProps {
+    /** `default` (muted pill) · `count` (compact number badge) · `citation` (filled primary, for inline citation markers). Defaults to `default`. */
+    variant?: "default" | "count" | "citation";
+}
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLElement>>;
+export interface ButtonProps extends WebComponentProps {
+    /** Visual style. `default` (filled), `subtle` (muted text, hover tint — the toolbar icon look), `ghost` (transparent, hover fill), `outline`, or `destructive`. Defaults to `default`. */
+    variant?: "default" | "subtle" | "ghost" | "outline" | "destructive";
+    /** Size token. `icon` / `icon-sm` are square (for icon-only buttons); `sm` / `md` / `lg` size text buttons. Defaults to `md`. */
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm";
+    /** Leading icon: a named icon (e.g. `"mic"`, `"plus"`), an image URL/data-URI, or plain text. Renders before any slotted label. */
+    icon?: string;
+    /** Trailing icon, after the label (e.g. `"chevron-down"` for a menu affordance). */
+    iconTrailing?: string;
+    /** Accessible name. REQUIRED for icon-only buttons (no visible text); ignored when you slot visible text, which already names the button. */
+    label?: string;
+    /** Disable the button (non-interactive, dimmed). */
+    disabled?: boolean;
+    /** Stretch the button to the full width of its container (a block button) — e.g. a card CTA or a stacked action. Attribute: `full`. */
+    full?: boolean;
+    /** Justify the button's content: `start`, `center` (default), or `end`. Combine with `full` for a full-width, left-aligned button. */
+    align?: "start" | "center" | "end";
+    /** Native button `type`. Defaults to `button` (so it never submits a form). */
+    type?: "button" | "submit" | "reset";
+    /** The button was activated (pointer or keyboard). Carries no detail. The native `click` also bubbles (composed) for consumers who prefer it. */
+    onClick?: (event: CustomEvent) => void;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLElement>>;
 export interface CardProps extends WebComponentProps {
-    /** Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. */
-    heading?: string;
-    /** Supporting text under the heading. Attribute: `description`. */
-    description?: string;
-    /** When set, the card renders its inline error state instead of the body. Attribute: `error-message`. */
-    errorMessage?: string;
-    /** Compact spacing for dense lists. Attribute: `dense`. */
+    /** Surface treatment: `outlined` (default) | `filled` | `plain` | `accent`. Attribute: `appearance`. */
+    appearance?: "outlined" | "filled" | "plain" | "accent";
+    /** `vertical` (default, media on top) | `horizontal` (media at the start) | `responsive` (horizontal when the card's container is wide enough, else vertical — a container query on the card's own width). Attribute: `orientation`. */
+    orientation?: "vertical" | "horizontal" | "responsive";
+    /** The card width below which a `responsive` card collapses to vertical and the footer actions stack. A CSS length; default `28rem`. Attribute: `collapse`. */
+    collapse?: string;
+    /** Tighter spacing for dense lists. Attribute: `dense`. */
     dense?: boolean;
+    /** Show a close (×) that hides the card and emits `kai-dismiss`. Attribute: `dismissible`. Off by default. */
+    dismissible?: boolean;
+    /** Render the whole card as a link. Attribute: `href`. Wins over `clickable`. */
+    href?: string;
+    /** `target` for the `href` anchor. Attribute: `target`. */
+    target?: string;
+    /** `rel` for the `href` anchor. Attribute: `rel`. */
+    rel?: string;
+    /** Make the whole card a button (`role="button"`, Enter/Space, hover affordance) that emits `kai-card-click`. Attribute: `clickable`. Ignored when `href` is set. */
+    clickable?: boolean;
+    /** A `clickable`/`href` card was activated (click, or Enter/Space). */
+    onCardClick?: (event: CustomEvent) => void;
+    /** The card was dismissed via its × (it also hides itself). */
+    onDismiss?: (event: CustomEvent) => void;
 }
 export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLElement>>;
 export interface CardsProps extends WebComponentProps {
@@ -135,14 +217,46 @@ export interface CardsProps extends WebComponentProps {
         onError?: (cardId: string, message: string) => void;
         maxSendPromptMode?: "compose" | "send";
     };
+    /** A child card transitioned to a resolved/deferred state (an action was chosen, a form/tasks submission landed, or it was dismissed) — re-emitted off the host as a non-bubbling convenience event so a consumer can observe resolution centrally without diffing the cards array. `detail` = `{ cardId, resolution }`. (A `reopen` un-resolves a card and has no `CardResolution`, so it does NOT fire this — observe reopen via the underlying bubbling `kai-card` event.) */
+    onCardResolved?: (event: CustomEvent<{
+        cardId: string;
+        resolution: {
+            kind: "action";
+            action: string;
+            payload?: unknown;
+            at?: undefined | string;
+        } | {
+            kind: "submit";
+            data: unknown;
+            at?: undefined | string;
+        } | {
+            kind: "dismissed";
+            at?: undefined | string;
+        } | {
+            kind: "expired";
+            reason?: undefined | string;
+            at?: undefined | string;
+        };
+    }>) => void;
 }
 export declare const Cards: import('react').ForwardRefExoticComponent<CardsProps & import('react').RefAttributes<HTMLElement>>;
 export interface ChainOfThoughtProps extends WebComponentProps {
-    /** The reasoning steps. Set as a JS property. Compound sub-parts collapse to this one data model (Route 1). */
+    /** The reasoning steps. Set as a JS property. Compound sub-parts collapse to this one data model (Route 1). Each `{ label, content?, id? }`. */
     steps: {
         label: string;
         content?: undefined | string;
+        id?: undefined | string;
     }[];
+    /** Open mode: `'multiple'` (default — any number of steps open at once) or `'single'` (at most one open; opening a step closes the others). */
+    type?: "single" | "multiple";
+    /** Controlled open step key(s). When set, it WINS over user interaction (the consumer owns the open set). String in `single` mode, string[] in `multiple` mode. Set as a JS property. */
+    value?: string | string[];
+    /** Uncontrolled INITIAL open step key(s) — seeds which steps render expanded. Ignored once `value` is provided. Set as a JS property. */
+    defaultValue?: string | string[];
+    /** The open set changed — by user click OR an expand()/collapse()/toggle() call. `value` is a string in `single` mode, a string[] in `multiple` mode. (Maps Radix Accordion's onValueChange.) */
+    onValueChange?: (event: CustomEvent<{
+        value: string | string[];
+    }>) => void;
 }
 export declare const ChainOfThought: import('react').ForwardRefExoticComponent<ChainOfThoughtProps & import('react').RefAttributes<HTMLElement>>;
 export interface ChatProps extends WebComponentProps {
@@ -184,8 +298,21 @@ export interface ChatProps extends WebComponentProps {
         };
         feedback?: undefined | "like" | "dislike";
     }[];
-    /** Controlled value of the input. When set, the host owns the input text and must update it on `kai-value-change`; leave unset for uncontrolled behavior. */
-    value?: string;
+    /** Value of the input. A **string** is controlled (the host owns the text and updates it on `kai-value-change`). A **ComposerDoc** is a one-time seed that pre-populates pills; the user then edits freely. Leave unset for uncontrolled. */
+    value?: string | ({
+        type: "text";
+        text: string;
+    } | {
+        type: "entity";
+        entity: {
+            kind: string;
+            id: string;
+            label: string;
+            icon?: string;
+            promptText?: string;
+            data?: Record<string, unknown>;
+        };
+    })[];
     /** Placeholder text shown in the empty input. */
     placeholder?: string;
     /** When true, shows the loading/streaming state and disables submit (use while awaiting the assistant's reply). */
@@ -197,7 +324,7 @@ export interface ChatProps extends WebComponentProps {
     /** 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. */
     persistSuggestions?: boolean;
     /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`. */
-    proseSize?: "xs" | "sm" | "base" | "lg";
+    proseSize?: "sm" | "lg" | "xs" | "base";
     /** Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`). */
     codeTheme?: string;
     /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true. */
@@ -228,23 +355,52 @@ export interface ChatProps extends WebComponentProps {
     headerStart?: boolean;
     /** Whether the host has `slot="header-end"` content (right of the controls). */
     headerEnd?: boolean;
+    /** REPLACE — full custom header in place of the built-in title/model/context bar. */
+    headerFull?: boolean;
+    /** INJECT — left sidebar column (e.g. a conversation list / your own nav). */
+    sidebar?: boolean;
+    /** REPLACE — custom zero-state rendered in the message area while the thread is empty (replaces the empty message list only; the composer and its suggestions still render). */
+    empty?: boolean;
+    /** REPLACE — full custom composer in place of the built-in prompt input. The projected content wires its own submit (the data-flow boundary). */
+    composer?: boolean;
+    /** INJECT — accessory row just above the composer (e.g. extra actions). */
+    composerActions?: boolean;
+    /** INJECT — footer row below the composer (disclaimers, token meter, …). */
+    footer?: boolean;
     /** Show a Search (Globe) button in the input toolbar; fires a `search` event. */
     search?: boolean;
     /** Show a Voice (Mic) button in the input toolbar; fires a `voice` event. */
     voice?: boolean;
-    /** Slash commands — when set, typing `/` in the input opens the command palette and fires `kai-slash-select`. Set as a JS property. */
-    slashCommands?: {
-        id: string;
-        label: string;
-        description?: string;
-        category?: string;
+    /** Rich entity triggers — each `{ char, kind, items }` opens a caret-anchored menu that inserts an atomic pill (`/` skills, `@` agents/plugins). Set as a JS property; forwarded to the input. */
+    triggers?: {
+        char: string;
+        kind: string;
+        items?: {
+            id: string;
+            label: string;
+            icon?: string;
+            description?: string;
+            group?: string;
+            kind?: string;
+            promptText?: string;
+            data?: Record<string, unknown>;
+        }[];
     }[];
-    /** Command ids to highlight as active in the palette. */
-    slashActiveIds?: string[];
-    /** Single-line palette rows. */
-    slashCompact?: boolean;
+    /** Default icon per entity kind (kind → image src) for pills/menu items. */
+    kindIcons?: Record<string, string>;
     /** Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`). */
     actionsReveal?: "always" | "hover";
+    /** The staged attachments changed (file added or removed). Carries the full current list so a consumer can react in real time. */
+    onAttachmentsChange?: (event: CustomEvent<{
+        attachments: {
+            id: string;
+            type: "file" | "source-document";
+            filename?: undefined | string;
+            mediaType?: undefined | string;
+            url?: undefined | string;
+            title?: undefined | string;
+        }[];
+    }>) => void;
     /** An action button on a message was clicked. `action` is the built-in name or custom id. `state` is present only for the toggleable feedback votes: `'on'` when a like/dislike is set, `'off'` when re-tapped to clear. */
     onMessageAction?: (event: CustomEvent<{
         messageId: string;
@@ -257,15 +413,6 @@ export interface ChatProps extends WebComponentProps {
     }>) => void;
     /** The Search button was clicked. */
     onSearch?: (event: CustomEvent<Record<string, never>>) => void;
-    /** A slash command was chosen from the palette. */
-    onSlashSelect?: (event: CustomEvent<{
-        command: {
-            id: string;
-            label: string;
-            description?: undefined | string;
-            category?: undefined | string;
-        };
-    }>) => void;
     /** User submitted a message. */
     onSubmit?: (event: CustomEvent<{
         value: string;
@@ -296,9 +443,9 @@ export interface CheckpointProps extends WebComponentProps {
     /** Tooltip on hover. */
     tooltip?: string;
     /** Visual button style. */
-    variant?: "ghost" | "default" | "outline";
+    variant?: "default" | "ghost" | "outline";
     /** Button size (use an `icon*` size for an icon-only checkpoint). */
-    size?: "sm" | "lg" | "md" | "icon" | "icon-sm";
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm";
     /** The checkpoint was clicked. */
     onSelect?: (event: CustomEvent) => void;
 }
@@ -312,8 +459,41 @@ export interface ChoiceProps extends WebComponentProps {
     heading?: string;
     /** Set when the user resolved this card; renders the read-only view. Property: `el.resolution = { kind:'action', action:'…' }`. */
     resolution?: Record<string, unknown>;
+    /** Controlled selection — the selected option id. When set, the consumer owns the current pick (RadioGroup `value`). Attribute: `value`. */
+    value?: string;
+    /** Option id to pre-select on mount (uncontrolled seed). Attribute: `default-value`. */
+    defaultValue?: string;
+    /** Disable the whole radiogroup + Submit (e.g. while the agent is busy). Attribute: `disabled`. */
+    disabled?: boolean;
+    /** The selection changed BEFORE submit (a row click or the `select()` method). Distinct from the terminal `action` verb on the `kai-card` contract event. */
+    onValueChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
 }
 export declare const Choice: import('react').ForwardRefExoticComponent<ChoiceProps & import('react').RefAttributes<HTMLElement>>;
+export interface CoachmarkProps extends WebComponentProps {
+    /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute; the element still self-manages). Set `el.open = true`, or `<kai-coachmark open>`; listen for `kai-open-change`. */
+    open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** The bold title. Named `headline` because `title` collides with the global `HTMLElement.title` attribute (it throws at registration). */
+    headline?: string;
+    /** A small badge pill beside the headline (e.g. "New"). */
+    badge?: string;
+    /** Floating placement relative to the anchor (default `bottom`). */
+    placement?: string;
+    /** Color tone: `primary` (default, theme accent), `info` (blue), `success` (green), `warning` (amber), or `error` (red) — reusing the kit's tool hues. */
+    tone?: "error" | "primary" | "info" | "success" | "warning";
+    /** Render the arrow that points at the anchor (default `true`). Set `arrow="false"` for a plain bubble with no pointer. */
+    arrow?: boolean;
+    /** The × dismiss button was pressed. The consumer records that this hint was seen so it won't show again. */
+    onDismiss?: (event: CustomEvent<Record<string, never>>) => void;
+    /** The coachmark opened or closed (a method, the ×, or a driven `open`). */
+    onOpenChange?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
+}
+export declare const Coachmark: import('react').ForwardRefExoticComponent<CoachmarkProps & import('react').RefAttributes<HTMLElement>>;
 export interface CodeBlockProps extends WebComponentProps {
     /** The source code to render. */
     code: string;
@@ -324,9 +504,37 @@ export interface CodeBlockProps extends WebComponentProps {
     /** Disable syntax highlighting (renders plain text, no Shiki). */
     codeHighlight?: boolean;
     /** Code text sizing. */
-    proseSize?: "xs" | "sm" | "base" | "lg";
+    proseSize?: "sm" | "lg" | "xs" | "base";
 }
 export declare const CodeBlock: import('react').ForwardRefExoticComponent<CodeBlockProps & import('react').RefAttributes<HTMLElement>>;
+export interface CommandProps extends WebComponentProps {
+    /** Flat list of items. Set as a JS property — not an HTML attribute. */
+    items?: {
+        id: string;
+        label: string;
+        icon?: string;
+        description?: string;
+        shortcut?: string;
+        group?: string;
+    }[];
+    /** Placeholder text for the search input. */
+    placeholder?: string;
+    /** Label shown when no items match the current query. */
+    emptyLabel?: string;
+    /** Fired when the highlighted/active item changes — via Arrow keys or when filtering re-clamps the active row. `id` is the newly active item's id, or `undefined` when no item is active (e.g. the filtered list is empty). Lets a host preview the active item without committing a selection. */
+    onActiveChange?: (event: CustomEvent<{
+        id: undefined | string;
+    }>) => void;
+    /** Fired on every keystroke in the search input. */
+    onQueryChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    /** Fired when the user selects an item (click or Enter). */
+    onSelect?: (event: CustomEvent<{
+        id: string;
+    }>) => void;
+}
+export declare const Command: import('react').ForwardRefExoticComponent<CommandProps & import('react').RefAttributes<HTMLElement>>;
 export interface CompareProps extends WebComponentProps {
     /** The compare definition (prompt + the two candidates). Set as a JS PROPERTY: `el.data = { prompt, candidates: [A, B], collapse? }`. Import `ResponseCompareData` from `@kitn.ai/ui` for the full shape. */
     data?: Record<string, unknown>;
@@ -337,7 +545,7 @@ export interface CompareProps extends WebComponentProps {
     /** Layout: `'auto'` (default — columns when wide, tabs when narrow, by CONTAINER width) | `'columns'` (side-by-side) | `'tabs'` (pills to switch). Attribute: `layout`. */
     layout?: "auto" | "columns" | "tabs";
     /** Prose/text size for the rendered candidates. Attribute: `prose-size`. */
-    proseSize?: "xs" | "sm" | "base" | "lg";
+    proseSize?: "sm" | "lg" | "xs" | "base";
     /** Shiki theme for code blocks in the candidates. Attribute: `code-theme`. */
     codeTheme?: string;
     /** Whether code blocks are syntax-highlighted. Attribute: `code-highlight`. */
@@ -359,6 +567,147 @@ export interface CompareProps extends WebComponentProps {
     }>) => void;
 }
 export declare const Compare: import('react').ForwardRefExoticComponent<CompareProps & import('react').RefAttributes<HTMLElement>>;
+export interface ComposerProps extends WebComponentProps {
+    /** Controlled value — string or a full ComposerDoc (set as JS property). */
+    value?: string | ({
+        type: "text";
+        text: string;
+    } | {
+        type: "entity";
+        entity: {
+            kind: string;
+            id: string;
+            label: string;
+            icon?: string;
+            promptText?: string;
+            data?: Record<string, unknown>;
+        };
+    })[];
+    /** Placeholder text shown when the composer is empty. */
+    placeholder?: string;
+    /** Disable the composer entirely (non-interactive). */
+    disabled?: boolean;
+    /** Show a loading/streaming state and block submit. */
+    loading?: boolean;
+    /** Maximum height in px before the content scrolls. Default 240. */
+    maxHeight?: string | number;
+    /** Whether pressing Enter (without Shift) submits. Default true. */
+    submitOnEnter?: boolean;
+    /** Trigger definitions — set as a JS property. */
+    triggers?: {
+        char: string;
+        kind: string;
+        items?: {
+            id: string;
+            label: string;
+            icon?: string;
+            description?: string;
+            group?: string;
+            kind?: string;
+            promptText?: string;
+            data?: Record<string, unknown>;
+        }[];
+    }[];
+    /** Keyword highlight rules — set as a JS property. */
+    highlights?: (string | {
+        pattern: string;
+        flags?: string;
+        class?: string;
+    })[];
+    /** Default icon per entity kind (kind → image URL/data-URI) for items without their own `icon`. Overrides the built-in agent/plugin glyphs. JS property. */
+    kindIcons?: Record<string, string>;
+    /** The composer lost focus. */
+    onBlur?: (event: CustomEvent<{
+        originalEvent: FocusEvent;
+    }>) => void;
+    /** An entity pill was inserted into the composer. */
+    onEntityAdd?: (event: CustomEvent<{
+        entity: {
+            kind: string;
+            id: string;
+            label: string;
+            icon?: undefined | string;
+            promptText?: undefined | string;
+            data?: undefined | Record<string, unknown>;
+        };
+    }>) => void;
+    /** An entity pill was deleted from the composer. */
+    onEntityRemove?: (event: CustomEvent<{
+        entity: {
+            kind: string;
+            id: string;
+            label: string;
+            icon?: undefined | string;
+            promptText?: undefined | string;
+            data?: undefined | Record<string, unknown>;
+        };
+    }>) => void;
+    /** The composer gained focus. `focus`/`blur` are NOT composed natively, so they don't escape the shadow root — these re-expose them on the host. (For `keydown`/`paste`/`focusin`/`focusout`, listen NATIVELY on `<kai-composer>`: they're composed and already cross the shadow boundary.) */
+    onFocus?: (event: CustomEvent<{
+        originalEvent: FocusEvent;
+    }>) => void;
+    /** The user submitted the composer (Enter or programmatic submit). */
+    onSubmit?: (event: CustomEvent<{
+        doc: ({
+            type: "text";
+            text: string;
+        } | {
+            type: "entity";
+            entity: {
+                kind: string;
+                id: string;
+                label: string;
+                icon?: undefined | string;
+                promptText?: undefined | string;
+                data?: undefined | Record<string, unknown>;
+            };
+        })[];
+        text: string;
+        entities: {
+            kind: string;
+            id: string;
+            label: string;
+            icon?: undefined | string;
+            promptText?: undefined | string;
+            data?: undefined | Record<string, unknown>;
+        }[];
+    }>) => void;
+    /** A trigger character was detected at the caret (e.g. `/` or `@`). */
+    onTrigger?: (event: CustomEvent<{
+        char: string;
+        query: string;
+        rect: DOMRect;
+    }>) => void;
+    /** The active trigger was dismissed (Escape, space, or outside click). */
+    onTriggerClose?: (event: CustomEvent<Record<string, never>>) => void;
+    /** The content changed (fires on every input event). */
+    onValueChange?: (event: CustomEvent<{
+        doc: ({
+            type: "text";
+            text: string;
+        } | {
+            type: "entity";
+            entity: {
+                kind: string;
+                id: string;
+                label: string;
+                icon?: undefined | string;
+                promptText?: undefined | string;
+                data?: undefined | Record<string, unknown>;
+            };
+        })[];
+        text: string;
+        entities: {
+            kind: string;
+            id: string;
+            label: string;
+            icon?: undefined | string;
+            promptText?: undefined | string;
+            data?: undefined | Record<string, unknown>;
+        }[];
+    }>) => void;
+}
+export declare const Composer: import('react').ForwardRefExoticComponent<ComposerProps & import('react').RefAttributes<HTMLElement>>;
 export interface ConfirmProps extends WebComponentProps {
     /** The confirm definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { body, tone, actions:[…] }`. Import `ConfirmCardData` from `@kitn.ai/ui` for the full shape. */
     data?: Record<string, unknown>;
@@ -424,19 +773,60 @@ export interface ConversationsProps extends WebComponentProps {
         messageCount: number;
         lastMessageAt: string;
         updatedAt: string;
+        trailing?: undefined | string;
     }[];
     /** The id of the currently-open conversation, highlighted in the list. */
     activeId?: string;
+    /** Controlled collapsed state. Set as a JS property (`el.collapsed = true`) to drive the rail from your app, updating it in response to `kai-collapse-toggle`. Omit for uncontrolled (the element manages it). Collapsed shrinks the rail to a floating reopen button. */
+    collapsed?: boolean;
+    /** Initial collapsed state when uncontrolled (default false). Use the `default-collapsed` attribute to start collapsed in plain HTML. */
+    defaultCollapsed?: boolean;
+    /** The rail was collapsed or expanded (via the toggle, the reopen button, or a `collapse()`/`expand()`/`toggle()` call). */
+    onCollapseToggle?: (event: CustomEvent<{
+        collapsed: boolean;
+    }>) => void;
     /** A conversation was selected. */
     onConversationSelect?: (event: CustomEvent<{
         id: string;
     }>) => void;
     /** The "New chat" button was clicked. */
     onNewChat?: (event: CustomEvent<Record<string, never>>) => void;
+    /** The built-in search box query changed (typing, or a programmatic `clear()` which fires it with `''`). Lets a consumer mirror or server-side the filter. */
+    onSearch?: (event: CustomEvent<{
+        query: string;
+    }>) => void;
     /** The sidebar toggle was clicked. */
     onToggleSidebar?: (event: CustomEvent<Record<string, never>>) => void;
 }
 export declare const Conversations: import('react').ForwardRefExoticComponent<ConversationsProps & import('react').RefAttributes<HTMLElement>>;
+export interface DialogProps extends WebComponentProps {
+    /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute; the element still self-manages on Escape/backdrop). Set `el.open = true`, or `<kai-dialog open>`; listen for `kai-open-change`. */
+    open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** The dialog opened or closed (Escape, backdrop click, a driven `open`, or a method). */
+    onOpenChange?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
+}
+export declare const Dialog: import('react').ForwardRefExoticComponent<DialogProps & import('react').RefAttributes<HTMLElement>>;
+export interface EditableLabelProps extends WebComponentProps {
+    /** The label text — settable and reflected to the `value` attribute. Read `el.value` for live state. */
+    value?: string;
+    /** Controlled edit state. `el.editing = true` opens the field; reflected to the `editing` attribute. */
+    editing?: boolean;
+    /** Placeholder shown while editing / when the value is empty. */
+    placeholder?: string;
+    /** Disable entering edit mode. */
+    disabled?: boolean;
+    /** Edit was cancelled (Esc); the text is restored. */
+    onCancel?: (event: CustomEvent<Record<string, never>>) => void;
+    /** Committed a changed value (Enter / blur). */
+    onRename?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+}
+export declare const EditableLabel: import('react').ForwardRefExoticComponent<EditableLabelProps & import('react').RefAttributes<HTMLElement>>;
 export interface EmbedProps extends WebComponentProps {
     /** Stable card id correlating every emitted event. Set as an attribute or property. */
     cardId?: string;
@@ -489,18 +879,23 @@ export interface FeedbackBarProps extends WebComponentProps {
 }
 export declare const FeedbackBar: import('react').ForwardRefExoticComponent<FeedbackBarProps & import('react').RefAttributes<HTMLElement>>;
 export interface FileTreeProps extends WebComponentProps {
-    /** The files to render. Set as a JS property (array of `{ path, url?, code?, language?, type? }`). */
+    /** The files to render. Set as a JS property (array of `{ path, url?, code?, language?, type?, additions?, deletions?, status? }`). */
     files: {
         path: string;
         url?: undefined | string;
         code?: undefined | string;
         language?: undefined | string;
         type?: undefined | "html" | "pdf" | "image" | "other";
+        additions?: undefined | number;
+        deletions?: undefined | number;
+        status?: undefined | "added" | "modified" | "deleted" | "renamed" | "untracked";
     }[];
     /** Selected file path — highlighted in the tree. */
     activeFile?: string;
     /** Folder paths expanded initially. Omit to start with all folders open. */
     defaultExpanded?: string[];
+    /** Show a changed-files summary header (file count + summed `+/-` + Collapse-all). Attribute: `summary`. Off by default. */
+    summary?: boolean;
     /** Fired when a file is selected. `detail.path` = the file's path. */
     onSelect?: (event: CustomEvent<{
         path: string;
@@ -531,8 +926,45 @@ export interface FormProps extends WebComponentProps {
     heading?: string;
     /** Set when the user resolved this card; renders the read-only view. Property: `el.resolution = { kind:'submit', data:{…} }`. */
     resolution?: Record<string, unknown>;
+    /** Controlled field values (JS property). When set, it wins over local edits. */
+    values?: Record<string, unknown>;
+    /** Initial values overlaying the schema defaults (uncontrolled seed; JS property). */
+    defaultValues?: Record<string, unknown>;
+    /** Disable all fields + submit. Attribute: `disabled`. */
+    disabled?: boolean;
+    /** The form's values changed on input — current coerced values + validity. */
+    onValuesChange?: (event: CustomEvent<{
+        values: Record<string, unknown>;
+        valid: boolean;
+    }>) => void;
 }
 export declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<HTMLElement>>;
+export interface HoverCardProps extends WebComponentProps {
+    /** Delay (ms) before the card opens on hover. Defaults to 0 (focus opens it immediately too). */
+    openDelay?: number;
+    /** Delay (ms) before it closes after the pointer leaves. Defaults to 300. */
+    closeDelay?: number;
+    /** Preferred placement: `'top' | 'bottom' | 'left' | 'right'` (+ optional `-start`/`-end`). Defaults to `'bottom'`; flips to stay in view. */
+    placement?: string;
+    /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute, the element still self-manages on hover). Set `el.open = true`, or `<kai-hover-card open>`; listen for `kai-open-change`. */
+    open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** Suppress the hover behavior entirely without unmounting. */
+    disabled?: boolean;
+    /** The card opened or closed (by hover/focus, outside-click, or a method). */
+    onOpenChange?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
+}
+export declare const HoverCard: import('react').ForwardRefExoticComponent<HoverCardProps & import('react').RefAttributes<HTMLElement>>;
+export interface IconProps extends WebComponentProps {
+    /** A curated icon name (e.g. `"mic"`, `"globe"`), an image URL/data-URI, or plain text. */
+    name?: string;
+    /** Size token: `sm` | `md` (default) | `lg`. */
+    size?: "sm" | "md" | "lg";
+}
+export declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<HTMLElement>>;
 export interface ImageProps extends WebComponentProps {
     /** Base64-encoded image data (pair with `media-type`). */
     base64?: string;
@@ -544,6 +976,54 @@ export interface ImageProps extends WebComponentProps {
     mediaType?: string;
 }
 export declare const Image: import('react').ForwardRefExoticComponent<ImageProps & import('react').RefAttributes<HTMLElement>>;
+export interface InputProps extends WebComponentProps {
+    /** Native input type: `text` (default) · `email` · `url` · `search` · `tel` · `password` · `number`. Single-line only. */
+    type?: string;
+    /** Controlled value — settable and reflected to the `value` attribute. `el.value = 'hi'` drives it (no event); typing updates it and fires `kai-input`. Read `el.value` for live state. */
+    value?: string;
+    /** Placeholder shown when empty. */
+    placeholder?: string;
+    /** Field label, linked to the input. */
+    label?: string;
+    /** Helper text below the control. */
+    hint?: string;
+    /** Error text; flips the field invalid (`aria-invalid` + destructive border). */
+    error?: string;
+    /** Control density: `sm` or `md`. Defaults to `md`. */
+    size?: "sm" | "md";
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Make the input read-only. */
+    readonly?: boolean;
+    /** Mark the input required. */
+    required?: boolean;
+    /** Force the invalid state without an `error` string. */
+    invalid?: boolean;
+    /** Form-control name. */
+    name?: string;
+    /** Autofill hint forwarded to the inner input (e.g. `email`, `current-password`). */
+    autocomplete?: string;
+    /** Virtual-keyboard hint forwarded to the inner input (e.g. `numeric`, `email`). */
+    inputmode?: string;
+    /** The value was committed (blur). */
+    onChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    /** The value changed per keystroke. */
+    onInput?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+}
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLElement>>;
+export interface KbdProps extends WebComponentProps {
+    /** Shortcut spec — tokens joined by `+` (e.g. `Mod+Shift+K`). Omit it to show default-slot content instead. Display only; the element does not bind keys. */
+    keys?: string;
+    /** `mac` uses ⌘/⌥, `other` uses Ctrl. `auto` (default) sniffs the OS. */
+    platform?: "other" | "auto" | "mac";
+    /** Cap size: `sm` or `md`. Defaults to `md`. */
+    size?: "sm" | "md";
+}
+export declare const Kbd: import('react').ForwardRefExoticComponent<KbdProps & import('react').RefAttributes<HTMLElement>>;
 export interface LinkPreviewProps extends WebComponentProps {
     /** Stable card id correlating every emitted event. Set as an attribute or property. */
     cardId?: string;
@@ -564,7 +1044,7 @@ export interface LoaderProps extends WebComponentProps {
     /** The animation style: `'circular' | 'classic' | 'pulse' | 'pulse-dot' | 'dots' | 'typing' | 'wave' | 'bars' | 'terminal' | 'text-blink' | 'text-shimmer' | 'loading-dots'`. Defaults to `'circular'`. */
     variant?: "circular" | "classic" | "pulse" | "pulse-dot" | "dots" | "typing" | "wave" | "bars" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots";
     /** Loader size: `'sm' | 'md' | 'lg'`. Defaults to `'md'`. */
-    size?: "sm" | "lg" | "md";
+    size?: "sm" | "md" | "lg";
     /** Label for the text-based variants. */
     text?: string;
 }
@@ -573,13 +1053,55 @@ export interface MarkdownProps extends WebComponentProps {
     /** The markdown source to render. */
     content: string;
     /** Text/markdown sizing. */
-    proseSize?: "xs" | "sm" | "base" | "lg";
+    proseSize?: "sm" | "lg" | "xs" | "base";
     /** Shiki theme for fenced code blocks. */
     codeTheme?: string;
     /** Disable syntax highlighting (no Shiki loads). */
     codeHighlight?: boolean;
 }
 export declare const Markdown: import('react').ForwardRefExoticComponent<MarkdownProps & import('react').RefAttributes<HTMLElement>>;
+export interface MenuProps extends WebComponentProps {
+    /** Tree of menu items. Set as a JS property — not an HTML attribute. */
+    items?: {
+        id?: string;
+        label?: string;
+        icon?: string;
+        shortcut?: string;
+        checked?: boolean;
+        radioGroup?: string;
+        disabled?: boolean;
+        separator?: boolean;
+        heading?: boolean;
+        items?: Record<string, unknown>[];
+    }[];
+    /** Optional placement hint (unused by the underlying Dropdown which always positions bottom-start, kept for future extension). */
+    placement?: string;
+    /** Built-in trigger: leading icon (a named icon like `"plus"`, an image URL/data-URI, or text). Use this instead of slotting `slot="trigger"` for the common case — a slotted trigger overrides it. */
+    triggerIcon?: string;
+    /** Built-in trigger: a text label (e.g. `"High"`). */
+    triggerLabel?: string;
+    /** Built-in trigger: a trailing icon (e.g. `"chevron-down"` for a select look). */
+    triggerIconTrailing?: string;
+    /** Accessible name for an icon-only trigger (no visible label). */
+    label?: string;
+    /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute, the menu still self-manages on click/keyboard). Set `el.open = true`, or `<kai-menu open>`; listen for `kai-open-change`. */
+    open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** Disable the trigger — click/keyboard and `show()` no longer open the menu. */
+    disabled?: boolean;
+    /** The menu opened or closed (by click, keyboard, Escape, outside-click, or a method). */
+    onOpenChange?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
+    /** Fired when the user selects a leaf item. - Plain items: `{ id }`. - Checkbox items: `{ id, checked }` where `checked` is the NEW state. - Radio items: `{ id, radioGroup }` — the consumer marks `id` as the selected one in `radioGroup` and clears the others. */
+    onSelect?: (event: CustomEvent<{
+        id: string;
+        checked?: undefined | boolean;
+        radioGroup?: undefined | string;
+    }>) => void;
+}
+export declare const Menu: import('react').ForwardRefExoticComponent<MenuProps & import('react').RefAttributes<HTMLElement>>;
 export interface MessageProps extends WebComponentProps {
     /** The full message object. Set as a JS property. */
     message?: {
@@ -626,7 +1148,7 @@ export interface MessageProps extends WebComponentProps {
     /** Force markdown on/off. Defaults to on for assistant, off for user. */
     markdown?: boolean;
     /** Text/markdown sizing for the message body. */
-    proseSize?: "xs" | "sm" | "base" | "lg";
+    proseSize?: "sm" | "lg" | "xs" | "base";
     /** Shiki theme name used for fenced code blocks in the content. */
     codeTheme?: string;
     /** Disable syntax highlighting for code blocks (no Shiki loads). */
@@ -637,6 +1159,8 @@ export interface MessageProps extends WebComponentProps {
     avatarSrc?: string;
     /** Convenience avatar fallback text (used when `message.avatar` is not set). */
     avatarFallback?: string;
+    /** Avatar rail mode. `'none'` omits the avatar rail entirely so the body spans the full row (predictable layout when you never show avatars). Any other value keeps the default behaviour: the built-in avatar when one resolves, or your `slot="avatar"` content when projected (which REPLACES the built-in). */
+    avatar?: string;
     /** An action button was clicked. `action` is the built-in name or custom id. `state` is present only for the toggleable feedback votes: `'on'` when a like/dislike is set, `'off'` when re-tapped to clear. */
     onMessageAction?: (event: CustomEvent<{
         messageId: string;
@@ -656,28 +1180,192 @@ export interface ModelSwitcherProps extends WebComponentProps {
     }[];
     /** The currently-selected model id. Defaults to the first model. */
     currentModel?: string;
+    /** Drive/observe the dropdown's open state (Shoelace-style: settable + reflected to the `open` attribute, the dropdown still self-manages on click/keyboard). Set `el.open = true`, or `<kai-model-switcher open>`; listen for `kai-open-change`. */
+    open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** Disable the trigger — click/keyboard and `show()` no longer open the dropdown. */
+    disabled?: boolean;
     /** A model was selected. */
     onModelChange?: (event: CustomEvent<{
         modelId: string;
     }>) => void;
+    /** The model dropdown opened or closed (by click, keyboard, Escape, outside-click, or a method). */
+    onOpenChange?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
 }
 export declare const ModelSwitcher: import('react').ForwardRefExoticComponent<ModelSwitcherProps & import('react').RefAttributes<HTMLElement>>;
+export interface NavProps extends WebComponentProps {
+    /** The nav items. Set as a JS property (array, not an attribute). Each item may carry `children` (a collapsible group), a `status` dot, and trailing `meta` text. */
+    items?: {
+        id: string;
+        label?: string;
+        icon?: string;
+        badge?: string;
+        trailing?: string;
+        disabled?: boolean;
+        children?: Record<string, unknown>[];
+        status?: {
+            tone: "error" | "primary" | "info" | "success" | "warning" | "neutral";
+            label?: string;
+            pulse?: boolean;
+        };
+        meta?: string;
+        action?: {
+            icon: string;
+            label: string;
+        };
+        closable?: boolean;
+    }[];
+    /** Active item id (controlled). */
+    value?: string;
+    /** Initial active id when uncontrolled. */
+    defaultValue?: string;
+    /** Ids of group items collapsed on first render (groups default to expanded). Set as a JS property (array). */
+    defaultCollapsed?: string[];
+    /** A row's trailing `action` button was activated (not a select). `value` is the item id; `action` echoes the item's `{ icon, label }`. */
+    onNavItemAction?: (event: CustomEvent<{
+        value: string;
+        action?: undefined | {
+            icon: string;
+            label: string;
+        };
+    }>) => void;
+    /** A `closable` row's trailing close button was activated (not a select). `value` is the item id. */
+    onNavItemClose?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    /** A nav item was activated. */
+    onNavSelect?: (event: CustomEvent<{
+        id: string;
+    }>) => void;
+}
+export declare const Nav: import('react').ForwardRefExoticComponent<NavProps & import('react').RefAttributes<HTMLElement>>;
+export interface NoticeProps extends WebComponentProps {
+    /** `neutral` (default) · `info` · `warning` · `error` · `success`. Drives the leading icon's color and the a11y role (`alert` for errors, else `status`). */
+    severity?: "error" | "info" | "success" | "warning" | "neutral";
+    /** Leading icon: omit for the severity default, `"none"` to hide it, or a named icon to override. */
+    icon?: string;
+    /** Show a dismiss (×) that hides the notice and emits `kai-dismiss`. */
+    dismissible?: boolean;
+    /** The notice was dismissed via its × (it also hides itself). */
+    onDismiss?: (event: CustomEvent) => void;
+}
+export declare const Notice: import('react').ForwardRefExoticComponent<NoticeProps & import('react').RefAttributes<HTMLElement>>;
+export interface PaneProps extends WebComponentProps {
+    /** The pane title (the agent / window name). Named `headline` because `title` collides with the global `HTMLElement.title` attribute (it throws at registration). Attribute: `headline`. */
+    headline?: string;
+    /** A role / label shown under the title (e.g. "Reviewer", "claude-sonnet"). Attribute: `subtitle`. */
+    subtitle?: string;
+    /** Show the restore glyph instead of maximize, and signal the maximized view-state. Drive it yourself in response to `kai-maximize`. Attribute: `maximized`. */
+    maximized?: boolean;
+    /** Highlight the frame with a ring/border to mark the ACTIVE pane. Attribute: `focused`. */
+    focused?: boolean;
+    /** Show a split-pane window control that fires `kai-split`. Off by default. Attribute: `show-split`. */
+    showSplit?: boolean;
+    /** Show a dock-to-side window control that fires `kai-dock`. Off by default. Attribute: `show-dock`. */
+    showDock?: boolean;
+    /** A tone-colored status dot (+ optional label) in the header. An object `{ tone, label?, pulse? }` set as a JS PROPERTY (not an attribute). */
+    status?: {
+        tone: "working" | "idle" | "done" | "error" | "blocked";
+        label?: string;
+        pulse?: boolean;
+    };
+    /** The close (×) control was clicked. */
+    onClose?: (event: CustomEvent) => void;
+    /** The dock control was clicked (only present when `show-dock`). */
+    onDock?: (event: CustomEvent) => void;
+    /** The maximize/restore control was clicked. `detail.maximized` is the intended NEXT state — drive the `maximized` prop yourself from it. */
+    onMaximize?: (event: CustomEvent<{
+        maximized: boolean;
+    }>) => void;
+    /** The split control was clicked (only present when `show-split`). */
+    onSplit?: (event: CustomEvent) => void;
+}
+export declare const Pane: import('react').ForwardRefExoticComponent<PaneProps & import('react').RefAttributes<HTMLElement>>;
+export interface PaneGroupProps extends WebComponentProps {
+    /** The tabs to render. An array of `{ id, name, status?, needsAttention?, number? }` set as a JS PROPERTY (not an HTML attribute). */
+    tabs?: {
+        id: string;
+        name: string;
+        status?: {
+            tone: "working" | "idle" | "done" | "error" | "blocked";
+            label?: string;
+            pulse?: boolean;
+        };
+        needsAttention?: boolean;
+        number?: number;
+    }[];
+    /** The active tab id (controlled, and reflected to the `active` ATTRIBUTE so `::part`/`[active]` selectors and the per-tab named slot follow it). Set it as the `active` attribute or drive it from `kai-tab-change`; omit for uncontrolled (the first tab). */
+    active?: string;
+    /** Highlight the frame as the ACTIVE group in a multi-group layout. Attribute: `focused`. */
+    focused?: boolean;
+    /** A tab was selected (click, Enter/Space, or arrow-key move). `detail.id` is the tab's id. */
+    onTabChange?: (event: CustomEvent<{
+        id: string;
+    }>) => void;
+    /** A tab's close (×) was clicked. Drop the tab from `tabs` yourself. */
+    onTabClose?: (event: CustomEvent<{
+        id: string;
+    }>) => void;
+    /** A tab's "…" overflow was clicked. Open your own menu from `detail.id`. */
+    onTabMenu?: (event: CustomEvent<{
+        id: string;
+    }>) => void;
+}
+export declare const PaneGroup: import('react').ForwardRefExoticComponent<PaneGroupProps & import('react').RefAttributes<HTMLElement>>;
 export interface PopoverProps extends WebComponentProps {
     /** Floating placement relative to the trigger (floating-ui placement). */
     placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
     /** Gap in px between the trigger and the panel. */
     gutter?: number;
-    /** Controlled open state. Set as a JS property (`el.open = true`) to drive the popover from your app; omit for the default click-to-toggle behaviour. */
+    /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute, the element still self-manages on click). Set `el.open = true`, or `<kai-popover open>`; listen for `kai-open-change`. */
     open?: boolean;
-    /** The popover wants to open or close (click, Escape, or outside-click). */
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** Turn the popover off while keeping the trigger mounted (clicks and `show()` no longer open it). */
+    disabled?: boolean;
+    /** The popover opened or closed (click, Escape, outside-click, or a method). */
     onOpenChange?: (event: CustomEvent<{
         open: boolean;
     }>) => void;
 }
 export declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLElement>>;
+export interface ProgressBarProps extends WebComponentProps {
+    /** Current progress value (0..max). Attribute: `value`. */
+    value?: number;
+    /** The value `value` runs to (default 100). Attribute: `max`. */
+    max?: number;
+    /** Optional caption above the track. Attribute: `label`. */
+    label?: string;
+    /** Fill color: `primary` (default), `success`, `warning`, `error`, `info`. Attribute: `tone`. */
+    tone?: string;
+}
+export declare const ProgressBar: import('react').ForwardRefExoticComponent<ProgressBarProps & import('react').RefAttributes<HTMLElement>>;
+export interface PromptDockProps extends WebComponentProps {
+    /** How the tray frames the input — the SPATIAL inset axis: `inset` (default, the classic recessed frame on every side) | `edge` (top/bottom inset only; the input sits flush left/right so the lips span the full width) | `none` (no inset; the lips attach directly as a plain stack). Attribute: `frame`. */
+    frame?: "none" | "inset" | "edge";
+    /** How the tray surface looks — the VISUAL axis, orthogonal to `frame`: `soft` (default, sunken surface + border + radius) | `outlined` (transparent + border + radius) | `filled` (sunken, no border, + radius) | `plain` (bare). Attribute: `appearance`. */
+    appearance?: "outlined" | "filled" | "plain" | "soft";
+}
+export declare const PromptDock: import('react').ForwardRefExoticComponent<PromptDockProps & import('react').RefAttributes<HTMLElement>>;
 export interface PromptInputProps extends WebComponentProps {
-    /** Controlled value of the input. When set, the host owns the text and must update it on `kai-value-change`; leave unset for uncontrolled behavior. */
-    value?: string;
+    /** Value of the input, as a JS property. A **string** is the controlled text mirror (the host owns it and updates on `kai-value-change`). A **ComposerDoc** (array of text/entity segments) is a one-time **seed** that pre-populates pills (skills/agents/plugins); the user then edits freely. Leave unset for uncontrolled behavior. `kai-submit`/`kai-value-change` always emit `value` as the flattened string (back-compat) plus the structured `doc` + `entities`. */
+    value?: string | ({
+        type: "text";
+        text: string;
+    } | {
+        type: "entity";
+        entity: {
+            kind: string;
+            id: string;
+            label: string;
+            icon?: string;
+            promptText?: string;
+            data?: Record<string, unknown>;
+        };
+    })[];
     /** Placeholder text shown in the empty input. */
     placeholder?: string;
     /** Disable the input and submit button entirely (non-interactive). */
@@ -688,23 +1376,16 @@ export interface PromptInputProps extends WebComponentProps {
     suggestions?: string[];
     /** What clicking a suggestion does: `'submit'` (default) sends it immediately as if typed and submitted; `'fill'` just places it in the input. */
     suggestionMode?: "submit" | "fill";
-    /** Slash commands — when set, typing `/` opens the command palette. Set as a JS property. */
-    slashCommands?: {
-        id: string;
-        label: string;
-        description?: string;
-        category?: string;
-    }[];
-    /** Command ids to highlight as active. */
-    slashActiveIds?: string[];
-    /** Single-line palette rows. */
-    slashCompact?: boolean;
     /** Show a Search (Globe) button in the left toolbar; clicking it fires a `search` event. */
     search?: boolean;
     /** Show a Voice (Mic) button in the left toolbar; clicking it fires a `voice` event. */
     voice?: boolean;
     /** When set and `loading` is true, the send button is replaced by a Stop button (square icon, "Stop" aria-label). Clicking it fires `kai-stop`. */
     stoppable?: boolean;
+    /** Send-button visibility. `'always'` (default) always shows it; `'auto'` shows it only when there's text/attachments (an empty composer hides it — Enter still submits). To hide it entirely (Enter-only), it's pure CSS: `::part(send){display:none}` — no prop needed. Restyle via `::part(send)`. The Stop button (`stoppable` + `loading`) is unaffected. */
+    submit?: "always" | "auto";
+    /** When `false`, hides the built-in paperclip attach button even though the element otherwise supports attachments. Use this when a `+` menu in `toolbar-start` already exposes "Add files", to avoid a duplicate control. Defaults to `true`. */
+    attach?: boolean;
     /** Attachments to seed the input with (so a consumer can pre-populate staged files without an upload). Set as a JS property; the element then manages its own attachment state from there (add via the paperclip, remove per chip). */
     attachments?: {
         id: string;
@@ -714,22 +1395,63 @@ export interface PromptInputProps extends WebComponentProps {
         url?: string;
         title?: string;
     }[];
-    /** The Search (Globe) toolbar button was clicked. */
-    onSearch?: (event: CustomEvent<Record<string, never>>) => void;
-    /** A slash command was chosen from the palette. */
-    onSlashSelect?: (event: CustomEvent<{
-        command: {
+    /** Rich entity triggers — each `{ char, kind, items }` opens a caret-anchored menu that inserts an atomic pill. Convention: `/` → skills, `@` → agents (plugins are the grouping/provenance of those items). Set as a JS property. */
+    triggers?: {
+        char: string;
+        kind: string;
+        items?: {
             id: string;
             label: string;
-            description?: undefined | string;
-            category?: undefined | string;
-        };
+            icon?: string;
+            description?: string;
+            group?: string;
+            kind?: string;
+            promptText?: string;
+            data?: Record<string, unknown>;
+        }[];
+    }[];
+    /** Default icon per entity kind (kind → image URL/data-URI) for pills/menu items without their own `icon`. Overrides the built-in agent/plugin glyphs. JS property. */
+    kindIcons?: Record<string, string>;
+    /** The staged attachments changed — a file was added (via the paperclip) or removed (per-chip ×). Carries the full current list so a consumer can react in real time (validate, show upload progress, toggle the send button). */
+    onAttachmentsChange?: (event: CustomEvent<{
+        attachments: {
+            id: string;
+            type: "file" | "source-document";
+            filename?: undefined | string;
+            mediaType?: undefined | string;
+            url?: undefined | string;
+            title?: undefined | string;
+        }[];
     }>) => void;
+    /** The Search (Globe) toolbar button was clicked. */
+    onSearch?: (event: CustomEvent<Record<string, never>>) => void;
     /** The Stop button was clicked while `stoppable` and `loading` are both true. */
     onStop?: (event: CustomEvent<Record<string, never>>) => void;
-    /** The user submitted the prompt (Enter or send button) with its attachments. */
+    /** The user submitted the prompt (Enter or send button). `value` is the flattened text (back-compat); `doc` is the structured document and `entities` the inserted pills (skills/agents) for downstream expansion. */
     onSubmit?: (event: CustomEvent<{
         value: string;
+        doc: ({
+            type: "text";
+            text: string;
+        } | {
+            type: "entity";
+            entity: {
+                kind: string;
+                id: string;
+                label: string;
+                icon?: undefined | string;
+                promptText?: undefined | string;
+                data?: undefined | Record<string, unknown>;
+            };
+        })[];
+        entities: {
+            kind: string;
+            id: string;
+            label: string;
+            icon?: undefined | string;
+            promptText?: undefined | string;
+            data?: undefined | Record<string, unknown>;
+        }[];
         attachments: {
             id: string;
             type: "file" | "source-document";
@@ -747,9 +1469,31 @@ export interface PromptInputProps extends WebComponentProps {
     onToolbarAction?: (event: CustomEvent<{
         action: string;
     }>) => void;
-    /** The input text changed (fires on every keystroke). */
+    /** The input changed (fires on every edit). Carries the flattened `value` plus the structured `doc` + `entities`. */
     onValueChange?: (event: CustomEvent<{
         value: string;
+        doc: ({
+            type: "text";
+            text: string;
+        } | {
+            type: "entity";
+            entity: {
+                kind: string;
+                id: string;
+                label: string;
+                icon?: undefined | string;
+                promptText?: undefined | string;
+                data?: undefined | Record<string, unknown>;
+            };
+        })[];
+        entities: {
+            kind: string;
+            id: string;
+            label: string;
+            icon?: undefined | string;
+            promptText?: undefined | string;
+            data?: undefined | Record<string, unknown>;
+        }[];
     }>) => void;
     /** The Voice (Mic) toolbar button was clicked. */
     onVoice?: (event: CustomEvent<Record<string, never>>) => void;
@@ -760,13 +1504,17 @@ export interface ReasoningProps extends WebComponentProps {
     text: string;
     /** Trigger label. */
     label?: string;
-    /** Controlled open state — set as a property (`el.open = true`). Omit for uncontrolled (the trigger toggles it). */
+    /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute; the element still self-manages on trigger click + while streaming). Set `el.open = true`; listen for `kai-open-change`. */
     open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
     /** While true, auto-expands (and re-collapses when it flips false). */
     streaming?: boolean;
     /** Render `text` as markdown. */
     markdown?: boolean;
-    /** Open state changed (via the trigger or streaming auto-open). */
+    /** Gate the disclosure trigger — programmatic `show()/hide()/toggle()` still work, but the trigger click no longer toggles. */
+    disabled?: boolean;
+    /** The reasoning block expanded or collapsed (via the trigger, streaming auto-open, or a method). */
     onOpenChange?: (event: CustomEvent<{
         open: boolean;
     }>) => void;
@@ -785,7 +1533,7 @@ export interface RemoteProps extends WebComponentProps {
 export declare const Remote: import('react').ForwardRefExoticComponent<RemoteProps & import('react').RefAttributes<HTMLElement>>;
 export interface ResizableProps extends WebComponentProps {
     /** Layout axis: `horizontal` (row, default) or `vertical` (column). */
-    orientation?: "horizontal" | "vertical";
+    orientation?: "vertical" | "horizontal";
     /** Which item index is maximized (null = none). Declarative source of truth. */
     maximizedIndex?: null | number;
     /** Fired on drag-end / keyboard resize / visibility change. `detail.sizes` = panel sizes in percent. */
@@ -810,6 +1558,8 @@ export interface ResizableItemProps extends WebComponentProps {
     locked?: boolean;
     /** Hide this panel; its divider is dropped and the rest reflow. */
     hidden?: boolean;
+    /** Collapse this panel — same layout effect as `hidden` (divider dropped, the rest reflow), but it WORKS as a bare boolean from framework JSX. A plain `<kai-resizable-item collapsed>` in React/Solid/Vue/Svelte collapses the panel at the first render; `hidden` does not, because a JSX boolean sets neither the `hidden` attribute nor the IDL property on a custom element, so the parent never sees it. The facade reflects `collapsed` to a `collapsed` attribute the parent reads. Prefer this over `hidden` for declarative collapse. */
+    collapsed?: boolean;
     onChange?: (event: CustomEvent<unknown>) => void;
     onMaximizeChange?: (event: CustomEvent<unknown>) => void;
 }
@@ -834,6 +1584,16 @@ export interface ScopePickerProps extends WebComponentProps {
     availableTags: string[];
     /** The label shown on the trigger for the active scope. */
     currentLabel?: string;
+    /** Drive/observe the dropdown's open state (Shoelace-style: settable + reflected to the `open` attribute, the dropdown still self-manages on click/keyboard). Set `el.open = true`, or `<kai-scope-picker open>`; listen for `kai-open-change`. */
+    open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** Disable the trigger — click/keyboard and `show()` no longer open the dropdown. */
+    disabled?: boolean;
+    /** The scope dropdown opened or closed (by click, keyboard, Escape, outside-click, or a method). */
+    onOpenChange?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
     /** A scope was chosen (`undefined` filters = "All Content"). */
     onScopeChange?: (event: CustomEvent<{
         filters: undefined | {
@@ -848,17 +1608,115 @@ export interface ScopePickerProps extends WebComponentProps {
     }>) => void;
 }
 export declare const ScopePicker: import('react').ForwardRefExoticComponent<ScopePickerProps & import('react').RefAttributes<HTMLElement>>;
+export interface ScreenProps extends WebComponentProps {
+    /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute; the element still self-manages). Set `el.open = true`, or `<kai-screen open>`; listen for `kai-open-change`. */
+    open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** Header title text. A projected `title` slot overrides it. (Named `headline` because `title` collides with the global `HTMLElement.title` attribute.) */
+    headline?: string;
+    /** Show the back button (default true). */
+    back?: boolean;
+    /** Opt out of marking sibling elements inert/aria-hidden while open (for unusual layouts). */
+    noInert?: boolean;
+    /** Back navigation intent: the back button or Escape. The consumer flips their own routing in response (the screen knows nothing about the trigger). */
+    onBack?: (event: CustomEvent<Record<string, never>>) => void;
+    /** The screen opened or closed (a method, `Escape` close, or driven `open`). */
+    onOpenChange?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
+}
+export declare const Screen: import('react').ForwardRefExoticComponent<ScreenProps & import('react').RefAttributes<HTMLElement>>;
+export interface ScrollAreaProps extends WebComponentProps {
+    /** Which axis scrolls. `vertical` (default) · `horizontal` · `both`. The cross axis is clamped so content can't overflow it. */
+    orientation?: "vertical" | "horizontal" | "both";
+}
+export declare const ScrollArea: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLElement>>;
 export interface ScrollButtonProps extends WebComponentProps {
     /** CSS id of the scroll container to control. When omitted the element walks up the DOM (outside its own shadow root) to find the nearest scrollable ancestor. Mirrors the `for` convention of `<label for="...">`. */
     for?: string;
     /** Button visual variant: `'outline' | 'ghost' | 'default'`. Defaults to `'outline'`. */
-    variant?: "ghost" | "default" | "outline";
+    variant?: "default" | "ghost" | "outline";
     /** Button size token. Defaults to `'icon'` (square). */
-    size?: "sm" | "lg" | "md" | "icon" | "icon-sm";
+    size?: "sm" | "md" | "lg" | "icon" | "icon-sm";
     /** Emitted when the user clicks the button and `scrollToBottom()` is called. Carries no detail — consumers use it to know a manual scroll occurred. */
     onScroll?: (event: CustomEvent) => void;
 }
 export declare const ScrollButton: import('react').ForwardRefExoticComponent<ScrollButtonProps & import('react').RefAttributes<HTMLElement>>;
+export interface SearchProps extends WebComponentProps {
+    /** Controlled query — settable and reflected to the `value` attribute. Read `el.value` for live state. */
+    value?: string;
+    /** Placeholder. Defaults to `Search…`. */
+    placeholder?: string;
+    /** Leading icon-NAME string (a curated name, URL, or text), resolved to a glyph the same way `kai-button`'s `icon` is. Defaults to `search`. */
+    icon?: string;
+    /** Debounce window for `kai-search`, in ms. Defaults to `200`. */
+    debounce?: number;
+    /** Show a spinner in place of the leading icon while results load. */
+    loading?: boolean;
+    /** Optional shortcut hint shown (as a `kai-kbd`) while the field is empty, e.g. `Mod+K`. Display only; it does not bind the key. */
+    shortcut?: string;
+    /** The field committed (blur). */
+    onChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    /** The query changed (debounced live, and on clear). */
+    onSearch?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    /** Enter was pressed. */
+    onSubmit?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+}
+export declare const Search: import('react').ForwardRefExoticComponent<SearchProps & import('react').RefAttributes<HTMLElement>>;
+export interface SegmentedProps extends WebComponentProps {
+    /** The selectable segments, left to right. Set as a JS property (array). */
+    options: {
+        value: string;
+        label: string;
+        icon?: undefined | string;
+    }[];
+    /** Controlled selected `value` — settable and reflected to the `value` attribute. `el.value = 'preview'` drives it; choosing a segment updates it and fires `kai-change`. Read `el.value` for live state. */
+    value?: string;
+    /** Control density: `sm` or `md`. Defaults to `md`. */
+    size?: "sm" | "md";
+    /** A segment was chosen. */
+    onChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+}
+export declare const Segmented: import('react').ForwardRefExoticComponent<SegmentedProps & import('react').RefAttributes<HTMLElement>>;
+export interface SeparatorProps extends WebComponentProps {
+    /** `horizontal` (default, block + full-width) or `vertical` (a rule inside a flex/grid row — it stretches to the row height). */
+    orientation?: "vertical" | "horizontal";
+}
+export declare const Separator: import('react').ForwardRefExoticComponent<SeparatorProps & import('react').RefAttributes<HTMLElement>>;
+export interface SettingItemProps extends WebComponentProps {
+    /** Row label (primary text). Attribute: `label`. */
+    label?: string;
+    /** Optional secondary description under the label. Attribute: `description`. */
+    description?: string;
+}
+export declare const SettingItem: import('react').ForwardRefExoticComponent<SettingItemProps & import('react').RefAttributes<HTMLElement>>;
+export interface SettingsGroupProps extends WebComponentProps {
+    /** Small section heading shown above the card. Attribute: `heading`. */
+    heading?: string;
+    /** Optional muted description under the heading. Attribute: `description`. */
+    description?: string;
+}
+export declare const SettingsGroup: import('react').ForwardRefExoticComponent<SettingsGroupProps & import('react').RefAttributes<HTMLElement>>;
+export interface SkeletonProps extends WebComponentProps {
+    /** `text` (one or more lines), `rect` (a block), or `circle` (round). Defaults to `text`. */
+    variant?: "text" | "rect" | "circle";
+    /** CSS width (e.g. `'12rem'`, `'60%'`). Defaults to full width (responsive); for `circle` it is the diameter. */
+    width?: string;
+    /** CSS height. Defaults per variant (a text line height; circle = width). */
+    height?: string;
+    /** `text` only: number of lines; the last is shorter. Defaults to 1. */
+    lines?: number;
+}
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLElement>>;
 export interface SkillsProps extends WebComponentProps {
     /** The active skills to badge. Set as a JS property. */
     skills: {
@@ -895,16 +1753,30 @@ export interface SourcesProps extends WebComponentProps {
     numbered?: boolean;
 }
 export declare const Sources: import('react').ForwardRefExoticComponent<SourcesProps & import('react').RefAttributes<HTMLElement>>;
+export interface StatusProps extends WebComponentProps {
+    /** Presence/notification state → color. `new` (default) maps to the blue hue. */
+    status?: "new" | "online" | "busy" | "away" | "offline";
+    /** Animated ping ring (off by default; respects prefers-reduced-motion). */
+    pulse?: boolean;
+    /** Accessible name. Without it the dot is decorative. */
+    label?: string;
+    /** `sm` (default) or `md`. */
+    size?: "sm" | "md";
+}
+export declare const Status: import('react').ForwardRefExoticComponent<StatusProps & import('react').RefAttributes<HTMLElement>>;
 export interface SuggestionsProps extends WebComponentProps {
     /** The suggestions. Strings, or `{ label, value }` when the displayed text and the emitted value differ. Set as a JS property. */
     suggestions: (string | {
         label: string;
         value?: undefined | string;
+        icon?: undefined | string;
     })[];
     /** Chip style: `'outline'` (default), `'ghost'`, or `'default'` (filled). */
-    variant?: "ghost" | "default" | "outline";
-    /** Size preset for each chip. Defaults to the pill default (`'lg'`); pass `'sm'` for smaller pills (or `'md'`). */
-    size?: "sm" | "lg" | "md" | "icon" | "icon-sm";
+    variant?: "default" | "ghost" | "outline";
+    /** Row height for `layout="list"`: `'md'` (default) or `'lg'` for taller rows. Chips are unaffected. */
+    size?: "md" | "lg";
+    /** Layout: `'chips'` (default) renders a wrapping row of rounded pills; `'list'` renders a vertical, full-width "Ideas for you" list — each row is left-aligned with a leading `icon`, a label, and a hover background. */
+    layout?: "list" | "chips";
     /** Full-width left-aligned rows instead of pills. */
     block?: boolean;
     /** Substring to highlight within each suggestion. */
@@ -916,18 +1788,48 @@ export interface SuggestionsProps extends WebComponentProps {
 }
 export declare const Suggestions: import('react').ForwardRefExoticComponent<SuggestionsProps & import('react').RefAttributes<HTMLElement>>;
 export interface SwitchProps extends WebComponentProps {
-    /** Initial checked state. Bare attribute (`<kai-switch checked>`) turns it on. */
+    /** Controlled checked state — settable and reflected to the `checked` attribute. `el.checked = true` (or `<kai-switch checked>`) drives it; the toggle UI updates it and fires `kai-change`. Read `el.checked` for live state. */
     checked?: boolean;
+    /** Initial checked state on mount (uncontrolled seed). Bare attribute (`<kai-switch default-checked>`) turns it on. */
+    defaultChecked?: boolean;
     /** Disable interaction. */
     disabled?: boolean;
     /** Accessible label. */
     label?: string;
+    /** Form-control name (paired with `value`). */
+    name?: string;
+    /** Submitted value when checked (paired with `name`). Defaults to `'on'`. */
+    value?: string;
     /** The toggle changed. */
     onChange?: (event: CustomEvent<{
         checked: boolean;
     }>) => void;
 }
 export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLElement>>;
+export interface TabsProps extends WebComponentProps {
+    /** Tabs to render. Set as a JS property, not an HTML attribute. */
+    items?: {
+        id: string;
+        label?: string;
+        icon?: string;
+        disabled?: boolean;
+    }[];
+    /** Controlled selected id. Set as a JS property (or the `value` attribute); drive it from your app in response to `kai-tab-change`. Omit for uncontrolled. */
+    value?: string;
+    /** Initial selected id when uncontrolled (use the `default-value` attribute in plain HTML). */
+    defaultValue?: string;
+    /** `segmented` (default, a pill group) or `underline` (an underlined row). */
+    variant?: "segmented" | "underline";
+    /** Stretch the strip to full width, each tab sharing the space equally. */
+    block?: boolean;
+    /** Disable the whole strip. */
+    disabled?: boolean;
+    /** A tab was selected (click, Enter/Space, or arrow-key move). `value` is the item's id. */
+    onTabChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+}
+export declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLElement>>;
 export interface TasksProps extends WebComponentProps {
     /** The tasks definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { tasks:[…], selectAll, confirmLabel, … }`. Import `TasksCardData` from `@kitn.ai/ui` for the full shape. */
     data?: Record<string, unknown>;
@@ -937,6 +1839,18 @@ export interface TasksProps extends WebComponentProps {
     heading?: string;
     /** Set when the user resolved this card; renders the read-only view. Property: `el.resolution = { kind:'submit', data:{ selected:[…] } }`. */
     resolution?: Record<string, unknown>;
+    /** Controlled selection (task ids; JS property). When set, it wins over local state. */
+    value?: string[];
+    /** Uncontrolled initial selection (task ids; JS property), overlaying per-task `checked`. */
+    defaultValue?: string[];
+    /** Freeze the whole list + Confirm. Attribute: `disabled`. */
+    disabled?: boolean;
+    /** Display-only: rows can't be toggled and show the default cursor (no pointer, hover, or focus affordances). Keeps the look as-is. Attribute: `readonly`. */
+    readonly?: boolean;
+    /** The selection changed on a toggle — the selected ids in input order. */
+    onValueChange?: (event: CustomEvent<{
+        value: string[];
+    }>) => void;
 }
 export declare const Tasks: import('react').ForwardRefExoticComponent<TasksProps & import('react').RefAttributes<HTMLElement>>;
 export interface TextShimmerProps extends WebComponentProps {
@@ -966,7 +1880,10 @@ export interface ToastRegionProps extends WebComponentProps {
     toasts: {
         id: string;
         message: string;
-        variant?: undefined | "neutral" | "success";
+        variant?: undefined | "error" | "info" | "success" | "warning" | "neutral";
+        appearance?: undefined | "pill" | "card";
+        inverse?: undefined | boolean;
+        description?: undefined | string;
         action?: undefined | {
             label: string;
             onAction: () => void | false;
@@ -981,6 +1898,10 @@ export interface ToastRegionProps extends WebComponentProps {
     max?: number;
     /** Stacking: 'expanded' (default, full column) | 'collapsed' (Sonner-style pile that expands on hover/focus). Attribute: stack. */
     stack?: "expanded" | "collapsed";
+    /** Default appearance for this region's toasts: `'pill'` (default, compact) | `'card'` (richer, with a description line). A per-toast `appearance` wins. Attribute: `appearance`. */
+    appearance?: "pill" | "card";
+    /** Default high-contrast inverse treatment for this region's toasts. A per-toast `inverse` wins. Off by default. Attribute: `inverse`. */
+    inverse?: boolean;
     /** Container element to anchor this region to (JS property). Set by the store for a scoped region; unset = the global viewport region. */
     target?: HTMLElement;
     /** A toast's action button was pressed. */
@@ -1005,25 +1926,85 @@ export interface ToolProps extends WebComponentProps {
         toolCallId?: string;
         errorText?: string;
     };
-    /** Start expanded. */
+    /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute; the element still self-manages on trigger click). Set `el.open = true`, or `<kai-tool open>`; listen for `kai-open-change`. */
     open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** Gate the disclosure trigger — programmatic `show()/hide()/toggle()` still work, but the trigger click no longer toggles. */
+    disabled?: boolean;
+    /** The panel expanded or collapsed (by trigger click or a method). */
+    onOpenChange?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
 }
 export declare const Tool: import('react').ForwardRefExoticComponent<ToolProps & import('react').RefAttributes<HTMLElement>>;
+export interface TooltipProps extends WebComponentProps {
+    /** The hint text shown on hover/focus of the slotted trigger. */
+    content?: string;
+    /** Delay (ms) before the tooltip appears on hover. Defaults to 600. Focus shows it immediately regardless. */
+    openDelay?: number;
+    /** Delay (ms) before it hides after the pointer leaves. Defaults to 0 (hides immediately). */
+    closeDelay?: number;
+    /** Preferred placement: `'top' | 'bottom' | 'left' | 'right'` (+ optional `-start`/`-end`). Defaults to `'top'`; flips to stay in view. */
+    placement?: string;
+    /** Drive/observe open state (Shoelace-style: settable + reflected to the `open` attribute, the element still self-manages on hover/focus). Set `el.open = true`, or `<kai-tooltip open>`; listen for `kai-open-change`. */
+    open?: boolean;
+    /** Initial open state on mount (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** Turn the tooltip off while keeping the trigger mounted (hover/focus and `show()` no longer open it). */
+    disabled?: boolean;
+    /** The tooltip opened or closed (by hover/focus, outside-click, or a method). */
+    onOpenChange?: (event: CustomEvent<{
+        open: boolean;
+    }>) => void;
+}
+export declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLElement>>;
 export interface VoiceInputProps extends WebComponentProps {
     /** Transcriber the host supplies — records audio, returns the text. This is a **function-valued property** (`el.transcribe = async blob => '...'`) because a value-returning callback can't be modelled as a fire-and-forget event. */
     transcribe?: (audio: Blob) => Promise<string>;
     /** Disable the mic button (non-interactive). */
     disabled?: boolean;
-    /** Raw audio captured (before transcription) — for hosts that prefer to handle transcription themselves instead of via the `transcribe` property. */
+    /** BCP-47 language tag for the native `SpeechRecognition` path (e.g. `en-US`). Attribute: `recognition-lang` (the plain `lang` attribute is reserved by `HTMLElement` and can't be a custom-element property). No effect when `transcribe` is set or the browser lacks SpeechRecognition. */
+    recognitionLang?: string;
+    /** Emit live partial transcripts (`kai-transcript-interim`) during native recognition. Attribute: `interim`. No-op on the transcribe/fallback paths. */
+    interim?: boolean;
+    /** Raw audio captured (before transcription) — for hosts that prefer to handle transcription themselves instead of via the `transcribe` property. Also the unsupported-fallback signal: no `transcribe`, no SpeechRecognition, so only the blob is produced (no text). */
     onAudioCaptured?: (event: CustomEvent<{
         blob: Blob;
     }>) => void;
-    /** Transcription completed (the `transcribe` property resolved). */
+    /** Recording started or stopped — lets the host drive its own UI (waveform, push-to-talk indicator) in sync with the mic. Fires on real transitions only (manual click and programmatic start()/stop()), never on mount. */
+    onRecordingChange?: (event: CustomEvent<{
+        recording: boolean;
+    }>) => void;
+    /** Live partial transcript during native recognition (only when `interim` is set). Fires repeatedly before the final `kai-transcription`. */
+    onTranscriptInterim?: (event: CustomEvent<{
+        text: string;
+    }>) => void;
+    /** Final transcript — the `transcribe` property resolved, OR native `SpeechRecognition` produced final text (no `transcribe` set). */
     onTranscription?: (event: CustomEvent<{
         text: string;
     }>) => void;
 }
 export declare const VoiceInput: import('react').ForwardRefExoticComponent<VoiceInputProps & import('react').RefAttributes<HTMLElement>>;
+export interface VoiceOutputProps extends WebComponentProps {
+    /** The utterance to read aloud. */
+    text?: string;
+    /** Speak automatically when `text` is set/changed. */
+    autoplay?: boolean;
+    /** TTS model seam the host supplies — given text, returns an audio `Blob` to play. This is a **function-valued property** (`el.synthesize = async text => blob`); when set, the native `speechSynthesis` path is bypassed. Mirrors `<kai-voice-input>`'s `transcribe`. A value-returning callback can't be modelled as a fire-and-forget event, hence a property. */
+    synthesize?: (text: string) => Promise<Blob>;
+    /** Disable the button (non-interactive). */
+    disabled?: boolean;
+    /** Playback started or stopped — drive your own UI in sync. Fires on real transitions only (manual click and programmatic speak()/stop()), never on mount. */
+    onSpeakingChange?: (event: CustomEvent<{
+        speaking: boolean;
+    }>) => void;
+    /** The model path (`synthesize`) resolved audio — the raw `Blob` before playback. */
+    onSynthesized?: (event: CustomEvent<{
+        blob: Blob;
+    }>) => void;
+}
+export declare const VoiceOutput: import('react').ForwardRefExoticComponent<VoiceOutputProps & import('react').RefAttributes<HTMLElement>>;
 export interface WorkspaceProps extends WebComponentProps {
     /** Pre-bucketed conversation groups for the sidebar. Set as a JS property. */
     groups: {
@@ -1055,6 +2036,7 @@ export interface WorkspaceProps extends WebComponentProps {
         messageCount: number;
         lastMessageAt: string;
         updatedAt: string;
+        trailing?: undefined | string;
     }[];
     /** Id of the open conversation, highlighted in the sidebar. */
     activeId?: string;
@@ -1101,7 +2083,7 @@ export interface WorkspaceProps extends WebComponentProps {
     loading?: boolean;
     suggestions?: string[];
     suggestionMode?: "submit" | "fill";
-    proseSize?: "xs" | "sm" | "base" | "lg";
+    proseSize?: "sm" | "lg" | "xs" | "base";
     codeTheme?: string;
     codeHighlight?: boolean;
     chatTitle?: string;
@@ -1123,17 +2105,26 @@ export interface WorkspaceProps extends WebComponentProps {
     scrollButton?: boolean;
     search?: boolean;
     voice?: boolean;
-    slashCommands?: {
-        id: string;
-        label: string;
-        description?: string;
-        category?: string;
+    /** Rich entity triggers (`/` skills, `@` agents/plugins) forwarded to the input. */
+    triggers?: {
+        char: string;
+        kind: string;
+        items?: {
+            id: string;
+            label: string;
+            icon?: string;
+            description?: string;
+            group?: string;
+            kind?: string;
+            promptText?: string;
+            data?: Record<string, unknown>;
+        }[];
     }[];
-    slashActiveIds?: string[];
-    slashCompact?: boolean;
-    /** Sidebar default width as a percent of the workspace (default 22). */
+    /** Default icon per entity kind (kind → image src) forwarded to the input. */
+    kindIcons?: Record<string, string>;
+    /** Sidebar default width as a percent of the workspace (default 26). */
     sidebarWidth?: number;
-    /** Sidebar min width in px (default 200). */
+    /** Sidebar min width in px (default 240). */
     sidebarMinWidth?: number;
     /** Sidebar max width in px (default 420). */
     sidebarMaxWidth?: number;
@@ -1141,6 +2132,12 @@ export interface WorkspaceProps extends WebComponentProps {
     sidebarCollapsed?: boolean;
     /** Initial collapsed state when uncontrolled (default false). Use the `default-sidebar-collapsed` attribute to start collapsed in plain HTML. */
     defaultSidebarCollapsed?: boolean;
+    /** Auto-collapse the rail when the workspace's own width drops below this many px, and re-expand when it grows back above. Uncontrolled only (it never fights an app-driven `sidebarCollapsed`); omit to disable. Fires `kai-sidebar-toggle`. Attribute: `collapse-below`. */
+    collapseBelow?: number;
+    /** Render Recents as dense single-line rows (a leading dot + title, no count). */
+    compact?: boolean;
+    /** Suppress the built-in ConversationList so the `sidebar-header` slot owns the whole rail flex region (for apps that supply their own rail nav). Default false. Attribute: `no-conversations`. */
+    noConversations?: boolean;
     /** A conversation was selected in the sidebar. */
     onConversationSelect?: (event: CustomEvent<{
         id: string;
@@ -1163,15 +2160,6 @@ export interface WorkspaceProps extends WebComponentProps {
     onSidebarToggle?: (event: CustomEvent<{
         collapsed: boolean;
     }>) => void;
-    /** A slash command was chosen from the palette. */
-    onSlashSelect?: (event: CustomEvent<{
-        command: {
-            id: string;
-            label: string;
-            description?: undefined | string;
-            category?: undefined | string;
-        };
-    }>) => void;
     /** User submitted a message. */
     onSubmit?: (event: CustomEvent<{
         value: string;