@kitnai/chat 0.6.0 → 0.8.0

package/src/elements/element-types.d.ts

@@ -1,6 +1,6 @@
 // AUTO-GENERATED by scripts/gen-element-api.mjs — do not edit by hand.
 // Typed custom-element interfaces + HTMLElementTagNameMap augmentation, so
-// `document.querySelector('kitn-message')` is typed and gets prop autocomplete.
+// `document.querySelector('kc-message')` is typed and gets prop autocomplete.
 
 
 // Re-exports for `import { … } from '@kitnai/chat/elements'`.
@@ -8,7 +8,24 @@ export type { ChatMessage, ChatMessageAction } from './chat-types';
 export { configureCodeHighlighting, isCodeHighlightingEnabled } from '../primitives/highlighter';
 export type { CodeHighlightingOptions } from '../primitives/highlighter';
 
-export interface KitnAttachmentsElement extends HTMLElement {
+export interface KcArtifactElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** URL the preview iframe frames. Consumer-controlled. */
+  src?: string;
+  /** Files for the Code tab tree + each file's preview `url`. Set as a JS property (array). */
+  files: { path: string; url?: undefined | string; code?: undefined | string; language?: undefined | string; type?: undefined | "html" | "pdf" | "image" | "other" }[];
+  /** Active tab: `preview` (default) or `code`. */
+  tab?: "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`). */
+  sandbox?: string;
+  /** Accessible title for the preview iframe. */
+  iframeTitle?: string;
+}
+
+export interface KcAttachmentsElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The attachments to render. Set as a JS property (array). */
@@ -25,14 +42,27 @@ export interface KitnAttachmentsElement extends HTMLElement {
   emptyText?: string;
 }
 
-export interface KitnChainOfThoughtElement extends HTMLElement {
+export interface KcCardElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** 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`. */
+  dense?: boolean;
+}
+
+export interface KcChainOfThoughtElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The reasoning steps. Set as a JS property. Compound sub-parts collapse to this one data model (Route 1). */
   steps: { label: string; content?: undefined | string }[];
 }
 
-export interface KitnChatElement extends HTMLElement {
+export interface KcChatElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions. Set as a JS property (`el.messages = [...]`). */
@@ -75,57 +105,7 @@ export interface KitnChatElement extends HTMLElement {
   slashCompact?: boolean;
 }
 
-export interface KitnChatScopePickerElement extends HTMLElement {
-  /** Color mode (`auto` follows prefers-color-scheme). */
-  theme?: 'light' | 'dark' | 'auto';
-  /** Authors to offer as scope filters. Set as a JS property. */
-  availableAuthors: string[];
-  /** Tags to offer as scope filters. Set as a JS property. */
-  availableTags: string[];
-  /** The label shown on the trigger for the active scope. */
-  currentLabel?: string;
-}
-
-export interface KitnChatWorkspaceElement extends HTMLElement {
-  /** Color mode (`auto` follows prefers-color-scheme). */
-  theme?: 'light' | 'dark' | 'auto';
-  /** Pre-bucketed conversation groups for the sidebar. Set as a JS property. */
-  groups: { id: string; userId?: undefined | string; teamId?: undefined | string; name: string; sortOrder: number; createdAt: string }[];
-  /** Flat conversation list (auto-bucketed if `groups` is empty). Set as a JS property. */
-  conversations: { id: string; title: string; groupId?: undefined | string; scope: { type: "document" | "collection"; documentId?: undefined | string; filters?: undefined | { tags?: undefined | string[]; authors?: undefined | string[]; contentType?: undefined | "transcript" | "markdown"; dateRange?: undefined | { from: string; to: string } } }; messageCount: number; lastMessageAt: string; updatedAt: string }[];
-  /** Id of the open conversation, highlighted in the sidebar. */
-  activeId?: string;
-  /** The active conversation's message thread, newest last. Set as a JS property. */
-  messages: { id: string; role: "user" | "assistant"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | ("copy" | "like" | "dislike" | "regenerate" | "edit")[] }[];
-  value?: string;
-  placeholder?: string;
-  loading?: boolean;
-  suggestions?: string[];
-  suggestionMode?: "submit" | "fill";
-  proseSize?: "xs" | "sm" | "base" | "lg";
-  codeTheme?: string;
-  codeHighlight?: boolean;
-  chatTitle?: string;
-  models?: { id: string; name: string; provider?: string }[];
-  currentModel?: string;
-  context?: { usedTokens: number; maxTokens: number; inputTokens?: number; outputTokens?: number; estimatedCost?: number };
-  scrollButton?: boolean;
-  search?: boolean;
-  voice?: boolean;
-  slashCommands?: { id: string; label: string; description?: string; category?: string }[];
-  slashActiveIds?: string[];
-  slashCompact?: boolean;
-  /** Sidebar default width as a percent of the workspace (default 22). */
-  sidebarWidth?: number;
-  /** Sidebar min width in px (default 200). */
-  sidebarMinWidth?: number;
-  /** Sidebar max width in px (default 420). */
-  sidebarMaxWidth?: number;
-  /** Initial collapsed state of the sidebar (default false). */
-  sidebarCollapsed?: boolean;
-}
-
-export interface KitnCheckpointElement extends HTMLElement {
+export interface KcCheckpointElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** Optional text beside the icon. */
@@ -138,7 +118,7 @@ export interface KitnCheckpointElement extends HTMLElement {
   size?: "sm" | "lg" | "md" | "icon" | "icon-sm";
 }
 
-export interface KitnCodeBlockElement extends HTMLElement {
+export interface KcCodeBlockElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The source code to render. */
@@ -153,14 +133,27 @@ export interface KitnCodeBlockElement extends HTMLElement {
   proseSize?: "xs" | "sm" | "base" | "lg";
 }
 
-export interface KitnContextMeterElement extends HTMLElement {
+export interface KcConfirmElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The confirm definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { body, tone, actions:[…] }`. Import `ConfirmCardData` from `@kitnai/chat` for the full shape. */
+  data?: Record<string, unknown>;
+  /** Stable card id correlating every emitted CardEvent. Attribute: `card-id`. */
+  cardId?: string;
+  /** Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. */
+  heading?: string;
+  /** Focus the default action on mount (off by default — no focus-stealing). Attribute: `autofocus`. */
+  autofocus?: boolean;
+}
+
+export interface KcContextElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** Token-usage data. Set as a JS property. */
   context?: { usedTokens: number; maxTokens: number; inputTokens?: number; outputTokens?: number; reasoningTokens?: number; cacheTokens?: number; estimatedCost?: number };
 }
 
-export interface KitnConversationListElement extends HTMLElement {
+export interface KcConversationsElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** Pre-bucketed conversation groups (e.g. "Today", "Yesterday"), each with its own conversations. Use this when you want to control the grouping/headers yourself; otherwise pass a flat `conversations` array. Set as a JS property. */
@@ -171,7 +164,16 @@ export interface KitnConversationListElement extends HTMLElement {
   activeId?: string;
 }
 
-export interface KitnEmptyElement extends HTMLElement {
+export interface KcEmbedElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Stable card id correlating every emitted event. Set as an attribute or property. */
+  cardId?: string;
+  /** The embed payload (provider + id/url + options). Set as a JS **property** (object). */
+  data?: { provider: "youtube" | "vimeo" | "generic"; id?: string; url?: string; title?: string; poster?: string; start?: number; aspectRatio?: "16:9" | "4:3" | "1:1" | "9:16" };
+}
+
+export interface KcEmptyElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** Title text. Attribute: `empty-title` (`title` is a global HTML attribute). */
@@ -180,14 +182,25 @@ export interface KitnEmptyElement extends HTMLElement {
   description?: string;
 }
 
-export interface KitnFeedbackBarElement extends HTMLElement {
+export interface KcFeedbackBarElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The banner label (e.g. "Was this helpful?"). Attribute: `bar-title` (`title` is avoided — it's a global HTML attribute). */
   barTitle?: string;
 }
 
-export interface KitnFileUploadElement extends HTMLElement {
+export interface KcFileTreeElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The files to render. Set as a JS property (array of `{ path, url?, code?, language?, type? }`). */
+  files: { path: string; url?: undefined | string; code?: undefined | string; language?: undefined | string; type?: undefined | "html" | "pdf" | "image" | "other" }[];
+  /** Selected file path — highlighted in the tree. */
+  activeFile?: string;
+  /** Folder paths expanded initially. Omit to start with all folders open. */
+  defaultExpanded?: string[];
+}
+
+export interface KcFileUploadElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** Allow selecting multiple files (default true). */
@@ -200,7 +213,18 @@ export interface KitnFileUploadElement extends HTMLElement {
   label?: string;
 }
 
-export interface KitnImageElement extends HTMLElement {
+export interface KcFormElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The form definition — a JSON Schema (`type:'object'`) + `x-kc-*` UI hints (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { type:'object', properties:{…} }`. Import the `FormDefinition` type from `@kitnai/chat` for the full shape (it is self-referential, so the element types it loosely). */
+  data?: Record<string, unknown>;
+  /** Stable card id correlating every emitted CardEvent. Attribute: `card-id`. */
+  cardId?: string;
+  /** Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. */
+  heading?: string;
+}
+
+export interface KcImageElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** Base64-encoded image data (pair with `media-type`). */
@@ -213,7 +237,16 @@ export interface KitnImageElement extends HTMLElement {
   mediaType?: string;
 }
 
-export interface KitnLoaderElement extends HTMLElement {
+export interface KcLinkCardElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Stable card id correlating every emitted event. Set as an attribute or property. */
+  cardId?: string;
+  /** The link payload (OG metadata). Set as a JS **property** (object). */
+  data?: { url: string; title?: string; description?: string; image?: string; imageAlt?: string; favicon?: string; domain?: string; siteName?: string };
+}
+
+export interface KcLoaderElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The animation style: `'circular' | 'classic' | 'pulse' | 'pulse-dot' | 'dots' | 'typing' | 'wave' | 'bars' | 'terminal' | 'text-blink' | 'text-shimmer' | 'loading-dots'`. Defaults to `'circular'`. */
@@ -224,7 +257,7 @@ export interface KitnLoaderElement extends HTMLElement {
   text?: string;
 }
 
-export interface KitnMarkdownElement extends HTMLElement {
+export interface KcMarkdownElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The markdown source to render. */
@@ -237,7 +270,7 @@ export interface KitnMarkdownElement extends HTMLElement {
   codeHighlight?: boolean;
 }
 
-export interface KitnMessageElement extends HTMLElement {
+export interface KcMessageElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The full message object. Set as a JS property. */
@@ -256,14 +289,7 @@ export interface KitnMessageElement extends HTMLElement {
   codeHighlight?: boolean;
 }
 
-export interface KitnMessageSkillsElement extends HTMLElement {
-  /** Color mode (`auto` follows prefers-color-scheme). */
-  theme?: 'light' | 'dark' | 'auto';
-  /** The active skills to badge. Set as a JS property. */
-  skills: { id: string; name: string }[];
-}
-
-export interface KitnModelSwitcherElement extends HTMLElement {
+export interface KcModelSwitcherElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The selectable models. Set as a JS property (array). */
@@ -272,7 +298,7 @@ export interface KitnModelSwitcherElement extends HTMLElement {
   currentModel?: string;
 }
 
-export interface KitnPromptInputElement extends HTMLElement {
+export interface KcPromptInputElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** Controlled value of the input. When set, the host owns the text and must update it on `valuechange`; leave unset for uncontrolled behavior. */
@@ -301,22 +327,7 @@ export interface KitnPromptInputElement extends HTMLElement {
   attachments?: { id: string; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[];
 }
 
-export interface KitnPromptSuggestionsElement extends HTMLElement {
-  /** Color mode (`auto` follows prefers-color-scheme). */
-  theme?: 'light' | 'dark' | 'auto';
-  /** 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 })[];
-  /** 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";
-  /** Full-width left-aligned rows instead of pills. */
-  block?: boolean;
-  /** Substring to highlight within each suggestion. */
-  highlight?: string;
-}
-
-export interface KitnReasoningElement extends HTMLElement {
+export interface KcReasoningElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The reasoning text to display. */
@@ -331,7 +342,29 @@ export interface KitnReasoningElement extends HTMLElement {
   markdown?: boolean;
 }
 
-export interface KitnResponseStreamElement extends HTMLElement {
+export interface KcResizableElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Layout axis: `horizontal` (row, default) or `vertical` (column). */
+  orientation?: "horizontal" | "vertical";
+}
+
+export interface KcResizableItemElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Initial main-axis size: `"280px"` (fixed) or `"25%"`/`25` (percent). Omitted → flexible. */
+  size?: string;
+  /** Minimum size during resize (px or %). */
+  min?: string;
+  /** Maximum size during resize (px or %). */
+  max?: string;
+  /** Fix this panel's size; adjacent dividers become non-draggable. */
+  locked?: boolean;
+  /** Hide this panel; its divider is dropped and the rest reflow. */
+  hidden?: boolean;
+}
+
+export interface KcResponseStreamElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** Text to stream. A string, or an `AsyncIterable<string>` (set as a JS property — async iterables can't be HTML attributes). */
@@ -344,7 +377,25 @@ export interface KitnResponseStreamElement extends HTMLElement {
   as?: string;
 }
 
-export interface KitnSourceElement extends HTMLElement {
+export interface KcScopePickerElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Authors to offer as scope filters. Set as a JS property. */
+  availableAuthors: string[];
+  /** Tags to offer as scope filters. Set as a JS property. */
+  availableTags: string[];
+  /** The label shown on the trigger for the active scope. */
+  currentLabel?: string;
+}
+
+export interface KcSkillsElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The active skills to badge. Set as a JS property. */
+  skills: { id: string; name: string }[];
+}
+
+export interface KcSourceElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The URL this citation links to (the domain also seeds the default label/favicon). */
@@ -359,7 +410,7 @@ export interface KitnSourceElement extends HTMLElement {
   showFavicon?: boolean;
 }
 
-export interface KitnSourceListElement extends HTMLElement {
+export interface KcSourcesElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The sources to render. Set as a JS property. */
@@ -368,7 +419,33 @@ export interface KitnSourceListElement extends HTMLElement {
   showFavicon?: boolean;
 }
 
-export interface KitnTextShimmerElement extends HTMLElement {
+export interface KcSuggestionsElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** 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 })[];
+  /** 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";
+  /** Full-width left-aligned rows instead of pills. */
+  block?: boolean;
+  /** Substring to highlight within each suggestion. */
+  highlight?: string;
+}
+
+export interface KcTaskListElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The task-list definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { tasks:[…], selectAll, confirmLabel, … }`. Import `TaskListCardData` from `@kitnai/chat` for the full shape. */
+  data?: Record<string, unknown>;
+  /** Stable card id correlating every emitted CardEvent. Attribute: `card-id`. */
+  cardId?: string;
+  /** Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. */
+  heading?: string;
+}
+
+export interface KcTextShimmerElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The text to shimmer. */
@@ -381,7 +458,7 @@ export interface KitnTextShimmerElement extends HTMLElement {
   spread?: number;
 }
 
-export interface KitnThinkingBarElement extends HTMLElement {
+export interface KcThinkingBarElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The shimmering label, e.g. "Thinking…". */
@@ -392,7 +469,7 @@ export interface KitnThinkingBarElement extends HTMLElement {
   stopLabel?: string;
 }
 
-export interface KitnToolElement extends HTMLElement {
+export interface KcToolElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The tool-call to display. Set as a JS property. */
@@ -401,7 +478,7 @@ export interface KitnToolElement extends HTMLElement {
   open?: boolean;
 }
 
-export interface KitnVoiceInputElement extends HTMLElement {
+export interface KcVoiceInputElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** 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. */
@@ -410,35 +487,84 @@ export interface KitnVoiceInputElement extends HTMLElement {
   disabled?: boolean;
 }
 
+export interface KcWorkspaceElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Pre-bucketed conversation groups for the sidebar. Set as a JS property. */
+  groups: { id: string; userId?: undefined | string; teamId?: undefined | string; name: string; sortOrder: number; createdAt: string }[];
+  /** Flat conversation list (auto-bucketed if `groups` is empty). Set as a JS property. */
+  conversations: { id: string; title: string; groupId?: undefined | string; scope: { type: "document" | "collection"; documentId?: undefined | string; filters?: undefined | { tags?: undefined | string[]; authors?: undefined | string[]; contentType?: undefined | "transcript" | "markdown"; dateRange?: undefined | { from: string; to: string } } }; messageCount: number; lastMessageAt: string; updatedAt: string }[];
+  /** Id of the open conversation, highlighted in the sidebar. */
+  activeId?: string;
+  /** The active conversation's message thread, newest last. Set as a JS property. */
+  messages: { id: string; role: "user" | "assistant"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | ("copy" | "like" | "dislike" | "regenerate" | "edit")[] }[];
+  value?: string;
+  placeholder?: string;
+  loading?: boolean;
+  suggestions?: string[];
+  suggestionMode?: "submit" | "fill";
+  proseSize?: "xs" | "sm" | "base" | "lg";
+  codeTheme?: string;
+  codeHighlight?: boolean;
+  chatTitle?: string;
+  models?: { id: string; name: string; provider?: string }[];
+  currentModel?: string;
+  context?: { usedTokens: number; maxTokens: number; inputTokens?: number; outputTokens?: number; estimatedCost?: number };
+  scrollButton?: boolean;
+  search?: boolean;
+  voice?: boolean;
+  slashCommands?: { id: string; label: string; description?: string; category?: string }[];
+  slashActiveIds?: string[];
+  slashCompact?: boolean;
+  /** Sidebar default width as a percent of the workspace (default 22). */
+  sidebarWidth?: number;
+  /** Sidebar min width in px (default 200). */
+  sidebarMinWidth?: number;
+  /** Sidebar max width in px (default 420). */
+  sidebarMaxWidth?: number;
+  /** Initial collapsed state of the sidebar (default false). */
+  sidebarCollapsed?: boolean;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
-    'kitn-attachments': KitnAttachmentsElement;
-    'kitn-chain-of-thought': KitnChainOfThoughtElement;
-    'kitn-chat': KitnChatElement;
-    'kitn-chat-scope-picker': KitnChatScopePickerElement;
-    'kitn-chat-workspace': KitnChatWorkspaceElement;
-    'kitn-checkpoint': KitnCheckpointElement;
-    'kitn-code-block': KitnCodeBlockElement;
-    'kitn-context-meter': KitnContextMeterElement;
-    'kitn-conversation-list': KitnConversationListElement;
-    'kitn-empty': KitnEmptyElement;
-    'kitn-feedback-bar': KitnFeedbackBarElement;
-    'kitn-file-upload': KitnFileUploadElement;
-    'kitn-image': KitnImageElement;
-    'kitn-loader': KitnLoaderElement;
-    'kitn-markdown': KitnMarkdownElement;
-    'kitn-message': KitnMessageElement;
-    'kitn-message-skills': KitnMessageSkillsElement;
-    'kitn-model-switcher': KitnModelSwitcherElement;
-    'kitn-prompt-input': KitnPromptInputElement;
-    'kitn-prompt-suggestions': KitnPromptSuggestionsElement;
-    'kitn-reasoning': KitnReasoningElement;
-    'kitn-response-stream': KitnResponseStreamElement;
-    'kitn-source': KitnSourceElement;
-    'kitn-source-list': KitnSourceListElement;
-    'kitn-text-shimmer': KitnTextShimmerElement;
-    'kitn-thinking-bar': KitnThinkingBarElement;
-    'kitn-tool': KitnToolElement;
-    'kitn-voice-input': KitnVoiceInputElement;
+    'kc-artifact': KcArtifactElement;
+    'kc-attachments': KcAttachmentsElement;
+    'kc-card': KcCardElement;
+    'kc-chain-of-thought': KcChainOfThoughtElement;
+    'kc-chat': KcChatElement;
+    'kc-checkpoint': KcCheckpointElement;
+    'kc-code-block': KcCodeBlockElement;
+    'kc-confirm': KcConfirmElement;
+    'kc-context': KcContextElement;
+    'kc-conversations': KcConversationsElement;
+    'kc-embed': KcEmbedElement;
+    'kc-empty': KcEmptyElement;
+    'kc-feedback-bar': KcFeedbackBarElement;
+    'kc-file-tree': KcFileTreeElement;
+    'kc-file-upload': KcFileUploadElement;
+    'kc-form': KcFormElement;
+    'kc-image': KcImageElement;
+    'kc-link-card': KcLinkCardElement;
+    'kc-loader': KcLoaderElement;
+    'kc-markdown': KcMarkdownElement;
+    'kc-message': KcMessageElement;
+    'kc-model-switcher': KcModelSwitcherElement;
+    'kc-prompt-input': KcPromptInputElement;
+    'kc-reasoning': KcReasoningElement;
+    'kc-resizable': KcResizableElement;
+    'kc-resizable-item': KcResizableItemElement;
+    'kc-response-stream': KcResponseStreamElement;
+    'kc-scope-picker': KcScopePickerElement;
+    'kc-skills': KcSkillsElement;
+    'kc-source': KcSourceElement;
+    'kc-sources': KcSourcesElement;
+    'kc-suggestions': KcSuggestionsElement;
+    'kc-task-list': KcTaskListElement;
+    'kc-text-shimmer': KcTextShimmerElement;
+    'kc-thinking-bar': KcThinkingBarElement;
+    'kc-tool': KcToolElement;
+    'kc-voice-input': KcVoiceInputElement;
+    'kc-workspace': KcWorkspaceElement;
   }
 }