@kitn.ai/ui 0.16.0 → 0.18.0

package/dist/components/composer-highlight.d.ts

@@ -0,0 +1,48 @@
+import { HighlightRule } from './composer';
+export interface HighlightMatch {
+    start: number;
+    end: number;
+    class: string | undefined;
+}
+/**
+ * Find all non-overlapping highlight ranges in `text` for the given rules.
+ *
+ * - A string rule is matched as a case-insensitive literal (regex metachars are escaped).
+ * - An object rule uses `new RegExp(pattern, flags ?? 'gi')`.
+ * - Overlapping ranges are resolved in earliest-start order; later ranges that
+ *   overlap an already-claimed span are dropped.
+ * - Zero-width matches are skipped to avoid infinite loops.
+ * - Returns `[]` when nothing matches.
+ */
+export declare function findHighlightMatches(text: string, rules: HighlightRule[]): HighlightMatch[];
+declare global {
+    interface CSSNamespace {
+        highlights?: HighlightRegistry;
+    }
+    interface HighlightRegistry {
+        set(name: string, highlight: CSSHighlight): void;
+        delete(name: string): boolean;
+        has(name: string): boolean;
+    }
+    class CSSHighlight {
+        constructor(...ranges: Range[]);
+    }
+}
+/**
+ * Feature-detect whether the CSS Custom Highlight API is available in the
+ * current environment.  Returns false in jsdom (decoration no-op).
+ */
+export declare function supportsHighlightAPI(): boolean;
+/**
+ * Apply highlight matches to a contenteditable element using the CSS Custom
+ * Highlight API.  Maps text offsets (ZWSP-stripped concatenated text) to DOM
+ * Ranges spanning across text nodes, builds a `Highlight`, and registers it.
+ *
+ * If the API is unavailable (jsdom, older browsers), this is a strict no-op.
+ *
+ * @param root     The contenteditable element.
+ * @param matches  Pre-computed non-overlapping `{start, end}` ranges.
+ * @param zwsp     The ZWSP character used in the editable (passed to avoid
+ *                 a circular import; callers pass ZWSP from composer-dom).
+ */
+export declare function applyHighlights(root: HTMLElement, matches: HighlightMatch[], zwsp: string, name?: string): void;

package/dist/components/composer-history.d.ts

@@ -0,0 +1,34 @@
+import { ComposerDoc } from '../primitives/composer-model';
+/**
+ * Undo/redo history for the composer.
+ *
+ * The browser's native contenteditable undo stack can't track our programmatic
+ * pill insertion/deletion — it leaves pills stuck and replays text edits against
+ * a DOM we changed underneath it, corrupting the content. So we own the history:
+ * a stack of document-model snapshots. Restoring a snapshot re-renders the doc
+ * (pills included, since each snapshot holds full EntityRefs) and the caret.
+ *
+ * Pure module — no DOM. The caller computes `coalesce` (true to merge a run of
+ * consecutive typing into one undo step; false for a structural edit like a pill
+ * insert/delete, which gets its own step).
+ */
+export interface Snapshot {
+    doc: ComposerDoc;
+    caret: number;
+}
+export interface ComposerHistory {
+    /** Record a new state. `coalesce` merges it into the current entry instead of
+     *  pushing a new one (used for consecutive typing). */
+    record(snap: Snapshot, coalesce: boolean): void;
+    /** Step back; returns the snapshot to restore, or null if nothing to undo. */
+    undo(): Snapshot | null;
+    /** Step forward; returns the snapshot to restore, or null if nothing to redo. */
+    redo(): Snapshot | null;
+    /** Replace all history with a single baseline entry (e.g. external value set). */
+    reset(snap: Snapshot): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    /** Current entry count (for tests/debugging). */
+    size(): number;
+}
+export declare function createHistory(initial: Snapshot, limit?: number): ComposerHistory;

package/dist/components/composer.d.ts

@@ -0,0 +1,86 @@
+import { JSX } from 'solid-js';
+import { ComposerDoc, EntityRef } from '../primitives/composer-model';
+export interface TriggerItem {
+    id: string;
+    label: string;
+    icon?: string;
+    /** Secondary muted text shown beside the label in the menu (Codex-style). */
+    description?: string;
+    /** Section header to group this item under in the menu (e.g. 'Plugins', 'Agents'). */
+    group?: string;
+    /** Entity kind for the inserted pill; overrides the trigger's default `kind` so
+     *  one trigger can mix kinds across sections (e.g. agents + plugins under `@`). */
+    kind?: string;
+    promptText?: string;
+    data?: Record<string, unknown>;
+}
+export interface TriggerDef {
+    char: string;
+    kind: string;
+    items?: TriggerItem[];
+}
+export type HighlightRule = string | {
+    pattern: string;
+    flags?: string;
+    class?: string;
+};
+export interface ComposerChange {
+    doc: ComposerDoc;
+    text: string;
+    entities: EntityRef[];
+}
+/** Imperative handle exposed via `controllerRef` — surfaces the composer's latent
+ *  capabilities (focus/blur the editable, clear the doc, submit, insert a pill) so
+ *  the `<kai-composer>` facade can forward them as instance methods. */
+export interface ComposerController {
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    clear(): void;
+    send(): void;
+    insertEntity(entity: EntityRef): void;
+}
+export interface ComposerProps {
+    value?: string | ComposerDoc;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    maxHeight?: number | string;
+    submitOnEnter?: boolean;
+    triggers?: TriggerDef[];
+    highlights?: HighlightRule[];
+    /** Default icon per entity kind (kind → image URL/data-URI), shown on a pill +
+     *  menu item when the item has no `icon` of its own. Overrides the built-in
+     *  glyphs (agent/plugin). Example: `{ agent: '/icons/bot.svg' }`. */
+    kindIcons?: Record<string, string>;
+    /** Render WITHOUT the rounded frame/background/padding — just the editable +
+     *  placeholder + menu. For embedding inside another frame (e.g. PromptInput). */
+    bare?: boolean;
+    /** Override the editable element's classes (used in `bare` mode to match an
+     *  existing input's exact look). The placeholder mirrors these for alignment. */
+    editableClass?: string;
+    /** Accessible name for the editable (role=textbox). Falls back to the
+     *  placeholder, then "Message input". */
+    ariaLabel?: string;
+    /** Receive the editable element (e.g. to register it for click-to-focus). */
+    editableRef?: (el: HTMLDivElement) => void;
+    /** Receive the imperative controller once mounted. The `<kai-composer>` facade
+     *  forwards these as element methods (focus/blur/clear/send/insertEntity). */
+    controllerRef?: (controller: ComposerController) => void;
+    onChange?: (change: ComposerChange) => void;
+    onSubmit?: (change: ComposerChange) => void;
+    onTrigger?: (info: {
+        char: string;
+        query: string;
+        rect: DOMRect;
+    }) => void;
+    onTriggerClose?: () => void;
+    onEntityAdd?: (entity: EntityRef) => void;
+    onEntityRemove?: (entity: EntityRef) => void;
+    /** The editable gained focus. `focus`/`blur` are NOT composed, so they don't
+     *  escape the shadow root — this re-exposes them. (keydown/paste/focusin/focusout
+     *  are composed and already reach the host as native events; no wrapper needed.) */
+    onFocus?: (e: FocusEvent) => void;
+    /** The editable lost focus. */
+    onBlur?: (e: FocusEvent) => void;
+}
+export declare function Composer(props: ComposerProps): JSX.Element;

package/dist/components/confirm-card.d.ts

@@ -28,6 +28,20 @@ export declare function normalizeActions(actions: unknown): {
 };
 /** The id of the default action (first with `default:true`), if any. */
 export declare function defaultActionId(actions: ConfirmAction[]): string | undefined;
+/** Imperative handle exposed via `controllerRef` — surfaces the confirm card's
+ *  latent action/dismiss capabilities so the `<kai-confirm>` facade can forward
+ *  them as instance methods (focus/confirm/dismiss/reopen). */
+export interface ConfirmController {
+    /** Focus the default action button (or the first action if none default). */
+    focus(options?: FocusOptions): void;
+    /** Activate an action by id (or the default action when omitted) — emits the
+     *  `action` verb + resolves single-shot. */
+    confirm(actionId?: string): void;
+    /** Dismiss the card — emits `dismiss` + optimistically collapses to the stub. */
+    dismiss(): void;
+    /** Re-open a dismissed card from its stub — emits `reopen`. */
+    reopen(): void;
+}
 export interface ConfirmCardProps {
     /** The confirm definition (CardEnvelope.data). */
     data?: ConfirmCardData;
@@ -45,6 +59,9 @@ export interface ConfirmCardProps {
     class?: string;
     /** When set, render the chromed read-only view instead of the buttons. */
     resolution?: CardResolution;
+    /** Receive the imperative controller once mounted. The `<kai-confirm>` facade
+     *  forwards these as element methods (focus/confirm/dismiss/reopen). */
+    controllerRef?: (controller: ConfirmController) => void;
 }
 /**
  * `ConfirmCard` — a named-intent approval card. Renders a title + body + a small

package/dist/components/conversation-item.d.ts

@@ -3,6 +3,15 @@ export interface ConversationItemProps {
     conversation: ConversationSummary;
     isActive: boolean;
     onSelect: (id: string) => void;
+    /** Dense single-line row: a leading dot + title, no message count. */
+    compact?: boolean;
     class?: string;
 }
+/**
+ * Short relative time from an ISO date string: "just now", "5m ago", "3h ago",
+ * "2d ago", "24d ago". Pure — it snapshots `now` (defaults to `Date.now()`) at
+ * call time, so it re-derives whenever the list re-renders; there is no internal
+ * ticking clock. Returns '' for a missing or unparseable date.
+ */
+export declare function relativeTimeShort(iso?: string, now?: number): string;
 export declare function ConversationItem(props: ConversationItemProps): import("solid-js").JSX.Element;

package/dist/components/conversation-list.d.ts

@@ -1,4 +1,17 @@
+import { JSX } from 'solid-js';
 import { ConversationSummary, ConversationGroup } from '../types';
+/**
+ * The collapsed-rail fallback: a floating reopen button shown when the
+ * conversation sidebar is collapsed. Shared by `kai-workspace` (its collapsed
+ * branch) and the standalone `kai-conversations` (collapsed mode), so the rail
+ * collapses identically in both. Renders only the button; the host owns the
+ * surrounding region (the workspace puts the thread beside it, the standalone
+ * element stands alone). `onExpand` reopens the rail.
+ */
+export declare function CollapsedRail(props: {
+    onExpand: () => void;
+    class?: string;
+}): JSX.Element;
 export interface ConversationListProps {
     groups: ConversationGroup[];
     conversations: ConversationSummary[];
@@ -6,6 +19,28 @@ export interface ConversationListProps {
     onSelect: (id: string) => void;
     onNewChat: () => void;
     onToggleSidebar?: () => void;
+    /** Replaces the built-in title bar (toggle / "Chats" / New chat). */
+    header?: JSX.Element;
+    /** A row below the list (e.g. account / settings / usage). */
+    footer?: JSX.Element;
+    /** Replaces the built-in "no conversations yet" state. */
+    empty?: JSX.Element;
+    /** Dense single-line rows (a leading dot + title, no message count). */
+    compact?: boolean;
+    /** Fired whenever the built-in search box query changes (typing or a
+     *  programmatic `clear()`). Lets the facade surface a `kai-search` event. */
+    onSearchChange?: (query: string) => void;
+    /** Receive the imperative controller once mounted. The `kai-conversations`
+     *  facade uses it to focus / clear the internal search input. */
+    controllerRef?: (controller: ConversationListController) => void;
     class?: string;
 }
-export declare function ConversationList(props: ConversationListProps): import("solid-js").JSX.Element;
+/** Imperative handle exposed via `controllerRef` — surfaces the internal search
+ *  box to the `kai-conversations` facade (the searchQuery signal lives here). */
+export interface ConversationListController {
+    /** Focus the built-in search `<input>`. */
+    focus(options?: FocusOptions): void;
+    /** Clear the internal search query (resets the list filter). */
+    clearSearch(): void;
+}
+export declare function ConversationList(props: ConversationListProps): JSX.Element;

package/dist/components/dismissed-stub.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+/** The card types that render a dismissed stub, mapped to their intent verb. */
+export type DismissedCardType = 'confirm' | 'choice' | 'form' | 'tasks';
+/** Map a card `type` to its dismissed-stub intent label ("Proposed:", "Choose:",
+ *  "Form:", "Tasks:"). Falls back to a capitalized type for unknown card types. */
+export declare function stubIntent(type: string): string;
+export interface DismissedStubProps {
+    /** The card type, used to derive the intent label ("Proposed:" etc.). */
+    type: string;
+    /** The card's title/heading; shown after the intent label. Falls back gracefully. */
+    title?: string;
+    /** Re-open handler. The owning card emits `{ kind:'reopen', cardId }`. */
+    onReopen: () => void;
+    /** The Reopen button label. Default 'Reopen'. */
+    reopenLabel?: string;
+    class?: string;
+}
+/**
+ * `DismissedStub` — the compact stub a card collapses to after it's been dismissed.
+ * Group-labelled for a11y; the Reopen affordance is a ghost button.
+ */
+export declare function DismissedStub(props: DismissedStubProps): JSX.Element;

package/dist/components/file-tree.d.ts

@@ -11,7 +11,18 @@ export interface FileTreeFile {
     language?: string;
     /** Kind — drives the icon + whether Code applies. */
     type?: 'html' | 'pdf' | 'image' | 'other';
+    /** Lines added vs the base. Rendered as a trailing `+N` stat (success hue,
+     *  tabular-nums). Only shown when present; omit for a plain file row. */
+    additions?: number;
+    /** Lines removed vs the base. Rendered as a trailing `-N` stat (error hue). */
+    deletions?: number;
+    /** Change status vs the base. Drives a small trailing status letter in the
+     *  conventional VCS hue (added=green, modified=amber, deleted=red,
+     *  renamed=blue, untracked=muted). Only shown when present. */
+    status?: 'added' | 'modified' | 'deleted' | 'renamed' | 'untracked';
 }
+/** A change status a file can carry. */
+export type FileStatus = NonNullable<FileTreeFile['status']>;
 /** A folder node in the built tree. */
 export interface FileTreeFolderNode {
     kind: 'folder';
@@ -48,6 +59,10 @@ export interface FileTreeProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>,
     onSelect?: (path: string, file: FileTreeFile) => void;
     /** Folder paths expanded by default. When omitted, all folders start open. */
     defaultExpanded?: string[];
+    /** Show a summary header above the tree: the changed-file count, the summed
+     *  `+additions / -deletions`, and a Collapse-all/Expand-all toggle wired to the
+     *  folder-expand state. Off by default (no header — unchanged behavior). */
+    summary?: boolean;
 }
 /**
  * `FileTree` — a collapsible, keyboard-navigable file explorer built from a flat

package/dist/components/form.d.ts

@@ -77,6 +77,27 @@ export declare function summarizeForm(def: FormDefinition, data: Record<string,
 /** Build the result object: coerced values with empty optional fields omitted.
  *  `false` and `0` are kept (they are real values, not "empty"). */
 export declare function buildResult(def: FormDefinition, values: Record<string, unknown>): Record<string, unknown>;
+/** Imperative handle exposed via `controllerRef` — surfaces the form's latent
+ *  capabilities (focus the first/first-invalid control, validate, programmatic
+ *  send, reset to defaults, dismiss/reopen) so the `<kai-form>` facade can forward
+ *  them as instance methods. */
+export interface FormController {
+    /** Focus the first control, or the first INVALID control after a failed validation. */
+    focus(options?: FocusOptions): void;
+    /** Run full validation + submit: focus the first invalid field on failure, else emit `submit`. */
+    send(): void;
+    /** Run client-side validation now and return per-field errors WITHOUT submitting. */
+    validate(): {
+        valid: boolean;
+        errors?: Record<string, string>;
+    };
+    /** Re-seed from each field's `default` and clear errors. */
+    reset(): void;
+    /** Trigger the dismiss path (emit `dismiss` + collapse to the re-openable stub). */
+    dismiss(): void;
+    /** Re-open a dismissed card from its stub (emit `reopen`). */
+    reopen(): void;
+}
 export interface FormProps {
     /** The form definition (CardEnvelope.data). */
     data?: FormDefinition;
@@ -92,6 +113,19 @@ export interface FormProps {
     class?: string;
     /** When set, render the chromed read-only view instead of the form inputs. */
     resolution?: CardResolution;
+    /** Controlled field values — when set, this wins over internal/uncontrolled state. */
+    values?: Record<string, unknown>;
+    /** Initial values overlaying the schema defaults (uncontrolled seed). */
+    defaultValues?: Record<string, unknown>;
+    /** Disable all fields + submit. */
+    disabled?: boolean;
+    /** Fires on input with the current coerced values + validity (distinct from submit). */
+    onValuesChange?: (payload: {
+        values: Record<string, unknown>;
+        valid: boolean;
+    }) => void;
+    /** Receive the imperative controller once mounted. */
+    controllerRef?: (controller: FormController) => void;
 }
 /**
  * `Form` — renders a JSON-Schema form definition into themed, accessible widgets

package/dist/components/markdown.d.ts

@@ -3,6 +3,9 @@ export interface MarkdownProps {
     id?: string;
     class?: string;
     codeTheme?: string;
+    /** Optional `::part` name(s) to expose on the rendered root. Lets callers
+     *  (e.g. the message bubble) surface a styleable part through the shadow. */
+    part?: string;
 }
 declare function Markdown(props: MarkdownProps): import("solid-js").JSX.Element;
 export { Markdown };

package/dist/components/message.d.ts

@@ -1,5 +1,7 @@
 import { JSX } from 'solid-js';
-import { ChatMessageAction, CustomAction } from '../elements/chat-types';
+import { ChatMessageAction, CustomAction, FeedbackVote } from '../elements/chat-types';
+import { ToolPart } from './tool';
+import { AttachmentData } from './attachments';
 export interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {
     children: JSX.Element;
 }
@@ -14,6 +16,10 @@ declare function MessageAvatar(props: MessageAvatarProps): JSX.Element;
 export interface MessageContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
     children: JSX.Element | string;
     markdown?: boolean;
+    /** `::part` name(s) exposed on the content node. The body passes
+     *  `"bubble content"` so consumers can target either the rounded bubble or the
+     *  text region from outside the shadow boundary. */
+    part?: string;
 }
 declare function MessageContent(props: MessageContentProps): JSX.Element;
 export interface MessageActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {
@@ -28,6 +34,13 @@ export interface MessageActionBarProps {
     reveal?: 'always' | 'hover';
     /** Fired with the built-in name or the custom action id when a button is clicked. */
     onAction: (id: string) => void;
+    /** The active feedback vote. When `'like'`/`'dislike'` is set, that button is
+     *  marked pressed (filled) and the OTHER vote button animates out. `undefined`
+     *  shows both. Pure/prop-driven so the bar survives re-renders. */
+    activeFeedback?: FeedbackVote;
+    /** When true, the `copy` button shows its emerald check icon instead of the
+     *  copy glyph (cleared by the owner after ~2s). */
+    copied?: boolean;
     class?: string;
 }
 /**
@@ -36,8 +49,64 @@ export interface MessageActionBarProps {
  * descriptors use their `label` plus `actionIcon(icon)` (label-only when the
  * icon is unknown or absent). `reveal="hover"` makes the bar fade in on the
  * parent `.group`'s hover.
+ *
+ * Pure/prop-driven: feedback (`activeFeedback`) and copy (`copied`) state are
+ * owned by the parent facade and passed in — the bar holds no internal signals,
+ * so it survives the new-array-per-chunk re-renders of a streaming thread. With
+ * a vote active, the chosen `like`/`dislike` button is marked `aria-pressed` +
+ * filled and the other vote button collapses its width (sliding the active thumb
+ * into its place) via a 0fr↔1fr grid transition. The
+ * `copy` button swaps to an emerald check while `copied`.
  */
 declare function MessageActionBar(props: MessageActionBarProps): JSX.Element;
+export interface MessageBodyProps {
+    /** The message text/markdown. */
+    content: string;
+    /** Optional collapsible reasoning block, rendered above the content. */
+    reasoning?: {
+        text: string;
+        label?: string;
+    };
+    /** Tool-call parts, rendered above the content. */
+    tools?: ToolPart[];
+    /** Inline attachment previews, rendered above the content. */
+    attachments?: AttachmentData[];
+    /** Whether this is a user message (right-aligned bubble) vs an assistant
+     *  message (full-width transparent). */
+    isUser: boolean;
+    /** Whether the content renders as markdown. */
+    markdown: boolean;
+    /** Action-bar entries — built-in names and/or custom descriptors. When empty
+     *  the bar is not rendered. */
+    actions?: (ChatMessageAction | CustomAction)[];
+    /** `'always'` (default) keeps the bar visible; `'hover'` reveals it on parent
+     *  `.group` hover. */
+    actionsReveal?: 'always' | 'hover';
+    /** Fired with the built-in name or custom id when an action is clicked. */
+    onAction?: (id: string) => void;
+    /** The currently-active feedback vote, so the bar can mark like/dislike and
+     *  hide the other. */
+    activeFeedback?: FeedbackVote;
+    /** When true, the copy button shows its "copied" check icon. */
+    copied?: boolean;
+    /** INJECT slot projected at the TOP of the body — above the reasoning / tools /
+     *  content. A per-message header: a model-name label, a role + timestamp line.
+     *  In the `<kai-message>` shadow this is `<slot name="before-body" />`. */
+    beforeBody?: JSX.Element;
+    /** INJECT slot projected at the BOTTOM of the body — below the action bar. A
+     *  citation / sources row, a token-cost / latency line. In the `<kai-message>`
+     *  shadow this is `<slot name="after-body" />`. */
+    afterBody?: JSX.Element;
+}
+/**
+ * The shared message body: an optional reasoning block, tool calls, inline
+ * attachments, the content bubble, and the action bar — in that order. This is
+ * the single source of truth for how a message renders, consumed by `ChatThread`
+ * (the `<For>` over `messages`), the standalone `<kai-message>` facade, and (in
+ * future) `kai-compare` for each candidate. Pure/prop-driven: all interaction
+ * state (copied, feedback vote) is owned above and passed in.
+ */
+declare function MessageBody(props: MessageBodyProps): JSX.Element;
 export interface MessageActionProps {
     tooltip: string;
     children: JSX.Element;
@@ -51,4 +120,4 @@ export interface MessageCopyButtonProps {
     class?: string;
 }
 declare function MessageCopyButton(props: MessageCopyButtonProps): JSX.Element;
-export { Message, MessageAvatar, MessageContent, MessageActions, MessageActionBar, MessageAction, MessageCopyButton };
+export { Message, MessageAvatar, MessageContent, MessageActions, MessageActionBar, MessageBody, MessageAction, MessageCopyButton };

package/dist/components/model-switcher.d.ts

@@ -1,8 +1,15 @@
+import { DropdownController } from '../ui/dropdown';
 import { ModelOption } from '../types';
 export interface ModelSwitcherProps {
     models: ModelOption[];
     currentModelId: string;
     onModelChange: (modelId: string) => void;
     class?: string;
+    /** Initial open state of the dropdown (uncontrolled seed). */
+    defaultOpen?: boolean;
+    /** Disable the trigger — click/keyboard no longer open the dropdown. */
+    disabled?: boolean;
+    /** Receive the dropdown's open controller (forwarded from the inner Dropdown). */
+    controllerRef?: (api: DropdownController) => void;
 }
 export declare function ModelSwitcher(props: ModelSwitcherProps): import("solid-js").JSX.Element;

package/dist/components/prompt-input.d.ts

@@ -1,18 +1,21 @@
 import { JSX } from 'solid-js';
+import { TriggerDef, ComposerChange } from './composer';
+import { ComposerDoc } from '../primitives/composer-model';
 interface PromptInputContextType {
     isLoading: boolean;
-    value: () => string;
+    value: () => string | ComposerDoc;
     setValue: (value: string) => void;
     maxHeight: number | string;
     onSubmit?: () => void;
     disabled?: boolean;
-    textareaRef: HTMLTextAreaElement | undefined;
-    setTextareaRef: (el: HTMLTextAreaElement) => void;
+    textareaRef: HTMLElement | undefined;
+    setTextareaRef: (el: HTMLElement) => void;
 }
 declare function usePromptInput(): PromptInputContextType;
 export interface PromptInputProps extends JSX.HTMLAttributes<HTMLDivElement> {
     isLoading?: boolean;
-    value?: string;
+    /** String = controlled text; ComposerDoc = a seed that pre-populates pills. */
+    value?: string | ComposerDoc;
     onValueChange?: (value: string) => void;
     maxHeight?: number | string;
     onSubmit?: () => void;
@@ -22,6 +25,12 @@ export interface PromptInputProps extends JSX.HTMLAttributes<HTMLDivElement> {
 declare function PromptInput(props: PromptInputProps): JSX.Element;
 export interface PromptInputTextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
     disableAutosize?: boolean;
+    /** Rich entity triggers (`/`, `@`) forwarded to the composer. */
+    triggers?: TriggerDef[];
+    /** Default icon per entity kind (kind → image src), forwarded to the composer. */
+    kindIcons?: Record<string, string>;
+    /** Structured change (doc + entities) from the composer, on every edit. */
+    onComposerChange?: (change: ComposerChange) => void;
 }
 declare function PromptInputTextarea(props: PromptInputTextareaProps): JSX.Element;
 export interface PromptInputActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {

package/dist/components/prompt-suggestion.d.ts

@@ -2,12 +2,20 @@ import { JSX } from 'solid-js';
 export interface PromptSuggestionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
     children: JSX.Element | string;
     variant?: 'outline' | 'ghost' | 'default';
-    size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+    /** Row height for the `list` layout: `'md'` (default) or `'lg'` for taller
+     *  rows (more vertical padding). Chips/block/highlight are unaffected. */
+    size?: 'md' | 'lg';
+    /** Optional leading icon (named icon, image URL/data-URI, or text). */
+    icon?: string;
     highlight?: string;
     /** Render as a full-width, left-aligned list row (the "suggested questions"
      *  idiom) instead of a rounded pill. Wraps long text. Ignored in highlight
      *  mode, which is always a list row. */
     block?: boolean;
+    /** Render as a full-width "Ideas for you" list row: a leading icon, a
+     *  left-aligned label, and a hover background. Like `block`, but keeps the
+     *  leading icon. Ignored in highlight mode. */
+    list?: boolean;
 }
 declare function PromptSuggestion(props: PromptSuggestionProps): JSX.Element;
 export { PromptSuggestion };

package/dist/components/reasoning.d.ts

@@ -1,10 +1,23 @@
-import { JSX } from 'solid-js';
+import { JSX, Accessor } from 'solid-js';
+/** Imperative open controller, handed to a parent (the kai-reasoning facade) via
+ *  `controllerRef` so it can drive/observe open state — mirrors
+ *  CollapsibleController/HoverCardController. */
+export interface ReasoningController {
+    open: Accessor<boolean>;
+    setOpen: (v: boolean) => void;
+}
 export interface ReasoningProps {
     children: JSX.Element;
     class?: string;
     open?: boolean;
+    /** Initial open state (uncontrolled seed). */
+    defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     isStreaming?: boolean;
+    /** Gate the trigger — programmatic control via the controller still works. */
+    disabled?: boolean;
+    /** Receive the open controller (open accessor + setOpen) once mounted. */
+    controllerRef?: (api: ReasoningController) => void;
 }
 declare function Reasoning(props: ReasoningProps): JSX.Element;
 export interface ReasoningTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/components/response-compare-types.d.ts

@@ -0,0 +1,66 @@
+import { ToolPart } from './tool';
+import { AttachmentData } from './attachments';
+/** One assistant response in a comparison. Rendered identically to an assistant
+ *  message (reasoning + tools + attachments + markdown content) via `MessageBody`. */
+export interface CompareCandidate {
+    /** Stable id, unique within the pair; echoed back in the selection. */
+    id: string;
+    /** The response text/markdown. */
+    content: string;
+    /** Optional collapsible reasoning block. */
+    reasoning?: {
+        text: string;
+        label?: string;
+    };
+    /** Tool-call parts rendered above the content. */
+    tools?: ToolPart[];
+    /** Inline attachment previews rendered above the content. */
+    attachments?: AttachmentData[];
+    /** Optional short column label (e.g. "A" / "B" / "Concise"). */
+    label?: string;
+    /** Optional model name shown as a sub-label. */
+    model?: string;
+    /** When true this candidate is still streaming — its pick control is disabled
+     *  and a per-column shimmer shows until it (and its sibling) settle. */
+    streaming?: boolean;
+}
+/** The two-candidate tuple. Enforced at the type level; validated at runtime by
+ *  `normalizeCandidates`. */
+export type ComparePair = [CompareCandidate, CompareCandidate];
+/** How the card collapses once the user picks. `'winner'` (default) shows just the
+ *  chosen candidate's body; `'none'` keeps both columns but marks the choice. */
+export type CompareCollapse = 'winner' | 'none';
+/** The compare definition (set as the `data` JS property on `<kai-compare>`). */
+export interface ResponseCompareData {
+    /** Optional prompt/question shown above the two columns. */
+    prompt?: string;
+    /** Exactly two candidates: [A, B]. */
+    candidates: ComparePair;
+    /** Collapse behaviour after a pick. Default `'winner'`. */
+    collapse?: CompareCollapse;
+}
+/** Emitted (and re-hydratable) when the user picks. The consumer pairs
+ *  `(prompt, chosenId, rejectedIds)` for preference capture / RLHF. */
+export interface CompareSelection {
+    /** The id of the chosen candidate. */
+    chosenId: string;
+    /** The id(s) of the rejected candidate(s) — for a pair, the other one. */
+    rejectedIds: string[];
+    /** Epoch ms when the pick was made. */
+    at?: number;
+}
+/**
+ * Validate + normalize the candidate list. A compare requires EXACTLY two
+ * candidates with unique, non-empty string ids. Returns the usable pair, or an
+ * error message when the definition is unusable (rendered as an inline error /
+ * emitted as a `kai-error`). Modeled on `normalizeOptions`.
+ */
+export declare function normalizeCandidates(candidates: unknown): {
+    candidates: ComparePair | null;
+    error?: string;
+};
+/** Build the selection payload for choosing `chosenId` out of the pair (the other
+ *  candidate is the rejected one). Stamps `at` with the current time. */
+export declare function buildSelection(pair: ComparePair, chosenId: string): CompareSelection;
+/** Whether any candidate in the pair is still streaming (pick stays disabled). */
+export declare function isAnyStreaming(pair: ComparePair | null): boolean;