@kitnai/chat 0.6.0 → 0.8.0

package/frameworks/react/index.tsx

@@ -1,11 +1,38 @@
 // AUTO-GENERATED by scripts/gen-element-api.mjs — do not edit by hand.
 // Typed React wrappers for every kitn custom element. Usage:
-//   import { KitnMessage } from '@kitnai/chat/react';
-//   <KitnMessage message={msg} onMessageaction={(e) => …} />
-import { createKitnComponent, type KitnBaseProps } from './runtime';
+//   import { KcMessage } from '@kitnai/chat/react';
+//   <KcMessage message={msg} onMessageaction={(e) => …} />
+import { createWebComponent, type WebComponentProps } from './runtime';
+
+
+export interface KcArtifactProps extends WebComponentProps {
+  /** 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;
+  /** Fired when a file is selected. `detail.path`. */
+  onFileselect?: (event: CustomEvent<{ path: string }>) => void;
+  /** Fired when the preview navigates. `detail.url` = the new location. */
+  onNavigate?: (event: CustomEvent<{ url: string }>) => void;
+  /** Fired when the Preview|Code tab changes. `detail.tab`. */
+  onTabchange?: (event: CustomEvent<{ tab: "preview" | "code" }>) => void;
+}
 
+export const KcArtifact = createWebComponent<KcArtifactProps>(
+  'kc-artifact',
+  ["theme","src","files","tab","activeFile","sandbox","iframeTitle"],
+  { onFileselect: 'fileselect', onNavigate: 'navigate', onTabchange: 'tabchange' },
+);
 
-export interface KitnAttachmentsProps extends KitnBaseProps {
+export interface KcAttachmentsProps extends WebComponentProps {
   /** The attachments to render. Set as a JS property (array). */
   items: { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[];
   /** Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows. */
@@ -22,24 +49,41 @@ export interface KitnAttachmentsProps extends KitnBaseProps {
   onRemove?: (event: CustomEvent<{ id: string }>) => void;
 }
 
-export const KitnAttachments = createKitnComponent<KitnAttachmentsProps>(
-  'kitn-attachments',
+export const KcAttachments = createWebComponent<KcAttachmentsProps>(
+  'kc-attachments',
   ["theme","items","variant","hoverCard","removable","showMediaType","emptyText"],
   { onRemove: 'remove' },
 );
 
-export interface KitnChainOfThoughtProps extends KitnBaseProps {
+export interface KcCardProps 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`. */
+  dense?: boolean;
+}
+
+export const KcCard = createWebComponent<KcCardProps>(
+  'kc-card',
+  ["theme","heading","description","errorMessage","dense"],
+  {  },
+);
+
+export interface KcChainOfThoughtProps extends WebComponentProps {
   /** 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 const KitnChainOfThought = createKitnComponent<KitnChainOfThoughtProps>(
-  'kitn-chain-of-thought',
+export const KcChainOfThought = createWebComponent<KcChainOfThoughtProps>(
+  'kc-chain-of-thought',
   ["theme","steps"],
   {  },
 );
 
-export interface KitnChatProps extends KitnBaseProps {
+export interface KcChatProps extends WebComponentProps {
   /** 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 = [...]`). */
   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")[] }[];
   /** Controlled value of the input. When set, the host owns the input text and must update it on `valuechange`; leave unset for uncontrolled behavior. */
@@ -78,94 +122,31 @@ export interface KitnChatProps extends KitnBaseProps {
   slashActiveIds?: string[];
   /** Single-line palette rows. */
   slashCompact?: boolean;
-  onMessageaction?: (event: CustomEvent<unknown>) => void;
-  onModelchange?: (event: CustomEvent<unknown>) => void;
-  onSearch?: (event: CustomEvent<unknown>) => void;
-  onSlashselect?: (event: CustomEvent<unknown>) => void;
-  onSubmit?: (event: CustomEvent<unknown>) => void;
-  onSuggestionclick?: (event: CustomEvent<unknown>) => void;
-  onValuechange?: (event: CustomEvent<unknown>) => void;
-  onVoice?: (event: CustomEvent<unknown>) => void;
-}
-
-export const KitnChat = createKitnComponent<KitnChatProps>(
-  'kitn-chat',
-  ["theme","messages","value","placeholder","loading","suggestions","suggestionMode","proseSize","codeTheme","codeHighlight","chatTitle","models","currentModel","context","scrollButton","search","voice","slashCommands","slashActiveIds","slashCompact"],
-  { onMessageaction: 'messageaction', onModelchange: 'modelchange', onSearch: 'search', onSlashselect: 'slashselect', onSubmit: 'submit', onSuggestionclick: 'suggestionclick', onValuechange: 'valuechange', onVoice: 'voice' },
-);
-
-export interface KitnChatScopePickerProps extends KitnBaseProps {
-  /** 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;
-  /** A scope was chosen (`undefined` filters = "All Content"). */
-  onScopechange?: (event: CustomEvent<{ filters: undefined | { tags?: undefined | string[]; authors?: undefined | string[]; contentType?: undefined | "transcript" | "markdown"; dateRange?: undefined | { from: string; to: string } } }>) => void;
+  /** An action button on a message was clicked. */
+  onMessageaction?: (event: CustomEvent<{ messageId: string; action: "copy" | "like" | "dislike" | "regenerate" | "edit" }>) => void;
+  /** The header model switcher changed. */
+  onModelchange?: (event: CustomEvent<{ modelId: string }>) => 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; attachments: { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[] }>) => void;
+  /** A suggestion chip was clicked (only in `suggestion-mode="fill"`). */
+  onSuggestionclick?: (event: CustomEvent<{ value: string }>) => void;
+  /** Fired on every input change. */
+  onValuechange?: (event: CustomEvent<{ value: string }>) => void;
+  /** The Mic / voice button was clicked. */
+  onVoice?: (event: CustomEvent<Record<string, never>>) => void;
 }
 
-export const KitnChatScopePicker = createKitnComponent<KitnChatScopePickerProps>(
-  'kitn-chat-scope-picker',
-  ["theme","availableAuthors","availableTags","currentLabel"],
-  { onScopechange: 'scopechange' },
-);
-
-export interface KitnChatWorkspaceProps extends KitnBaseProps {
-  /** 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;
-  onConversationselect?: (event: CustomEvent<unknown>) => void;
-  onMessageaction?: (event: CustomEvent<unknown>) => void;
-  onModelchange?: (event: CustomEvent<unknown>) => void;
-  onNewchat?: (event: CustomEvent<unknown>) => void;
-  onSearch?: (event: CustomEvent<unknown>) => void;
-  onSidebartoggle?: (event: CustomEvent<unknown>) => void;
-  onSlashselect?: (event: CustomEvent<unknown>) => void;
-  onSubmit?: (event: CustomEvent<unknown>) => void;
-  onSuggestionclick?: (event: CustomEvent<unknown>) => void;
-  onValuechange?: (event: CustomEvent<unknown>) => void;
-  onVoice?: (event: CustomEvent<unknown>) => void;
-}
-
-export const KitnChatWorkspace = createKitnComponent<KitnChatWorkspaceProps>(
-  'kitn-chat-workspace',
-  ["theme","groups","conversations","activeId","messages","value","placeholder","loading","suggestions","suggestionMode","proseSize","codeTheme","codeHighlight","chatTitle","models","currentModel","context","scrollButton","search","voice","slashCommands","slashActiveIds","slashCompact","sidebarWidth","sidebarMinWidth","sidebarMaxWidth","sidebarCollapsed"],
-  { onConversationselect: 'conversationselect', onMessageaction: 'messageaction', onModelchange: 'modelchange', onNewchat: 'newchat', onSearch: 'search', onSidebartoggle: 'sidebartoggle', onSlashselect: 'slashselect', onSubmit: 'submit', onSuggestionclick: 'suggestionclick', onValuechange: 'valuechange', onVoice: 'voice' },
+export const KcChat = createWebComponent<KcChatProps>(
+  'kc-chat',
+  ["theme","messages","value","placeholder","loading","suggestions","suggestionMode","proseSize","codeTheme","codeHighlight","chatTitle","models","currentModel","context","scrollButton","search","voice","slashCommands","slashActiveIds","slashCompact"],
+  { onMessageaction: 'messageaction', onModelchange: 'modelchange', onSearch: 'search', onSlashselect: 'slashselect', onSubmit: 'submit', onSuggestionclick: 'suggestionclick', onValuechange: 'valuechange', onVoice: 'voice' },
 );
 
-export interface KitnCheckpointProps extends KitnBaseProps {
+export interface KcCheckpointProps extends WebComponentProps {
   /** Optional text beside the icon. */
   label?: string;
   /** Tooltip on hover. */
@@ -178,13 +159,13 @@ export interface KitnCheckpointProps extends KitnBaseProps {
   onSelect?: (event: CustomEvent) => void;
 }
 
-export const KitnCheckpoint = createKitnComponent<KitnCheckpointProps>(
-  'kitn-checkpoint',
+export const KcCheckpoint = createWebComponent<KcCheckpointProps>(
+  'kc-checkpoint',
   ["theme","label","tooltip","variant","size"],
   { onSelect: 'select' },
 );
 
-export interface KitnCodeBlockProps extends KitnBaseProps {
+export interface KcCodeBlockProps extends WebComponentProps {
   /** The source code to render. */
   code: string;
   /** Language grammar (e.g. `js`, `python`). Defaults to `tsx`. */
@@ -197,55 +178,88 @@ export interface KitnCodeBlockProps extends KitnBaseProps {
   proseSize?: "xs" | "sm" | "base" | "lg";
 }
 
-export const KitnCodeBlock = createKitnComponent<KitnCodeBlockProps>(
-  'kitn-code-block',
+export const KcCodeBlock = createWebComponent<KcCodeBlockProps>(
+  'kc-code-block',
   ["theme","code","language","codeTheme","codeHighlight","proseSize"],
   {  },
 );
 
-export interface KitnContextMeterProps extends KitnBaseProps {
+export interface KcConfirmProps extends WebComponentProps {
+  /** 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 const KcConfirm = createWebComponent<KcConfirmProps>(
+  'kc-confirm',
+  ["theme","data","cardId","heading","autofocus"],
+  {  },
+);
+
+export interface KcContextProps extends WebComponentProps {
   /** Token-usage data. Set as a JS property. */
   context?: { usedTokens: number; maxTokens: number; inputTokens?: number; outputTokens?: number; reasoningTokens?: number; cacheTokens?: number; estimatedCost?: number };
 }
 
-export const KitnContextMeter = createKitnComponent<KitnContextMeterProps>(
-  'kitn-context-meter',
+export const KcContext = createWebComponent<KcContextProps>(
+  'kc-context',
   ["theme","context"],
   {  },
 );
 
-export interface KitnConversationListProps extends KitnBaseProps {
+export interface KcConversationsProps extends WebComponentProps {
   /** 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. */
   groups: { id: string; userId?: undefined | string; teamId?: undefined | string; name: string; sortOrder: number; createdAt: string }[];
   /** A flat list of conversation summaries; the component buckets them by recency for you. Ignored when `groups` is provided. 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 }[];
   /** The id of the currently-open conversation, highlighted in the list. */
   activeId?: string;
-  onNewchat?: (event: CustomEvent<unknown>) => void;
-  onSelect?: (event: CustomEvent<unknown>) => void;
-  onTogglesidebar?: (event: CustomEvent<unknown>) => void;
+  /** The "New chat" button was clicked. */
+  onNewchat?: (event: CustomEvent<Record<string, never>>) => void;
+  /** A conversation was selected. */
+  onSelect?: (event: CustomEvent<{ id: string }>) => void;
+  /** The sidebar toggle was clicked. */
+  onTogglesidebar?: (event: CustomEvent<Record<string, never>>) => void;
 }
 
-export const KitnConversationList = createKitnComponent<KitnConversationListProps>(
-  'kitn-conversation-list',
+export const KcConversations = createWebComponent<KcConversationsProps>(
+  'kc-conversations',
   ["theme","groups","conversations","activeId"],
   { onNewchat: 'newchat', onSelect: 'select', onTogglesidebar: 'togglesidebar' },
 );
 
-export interface KitnEmptyProps extends KitnBaseProps {
+export interface KcEmbedProps extends WebComponentProps {
+  /** 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 const KcEmbed = createWebComponent<KcEmbedProps>(
+  'kc-embed',
+  ["theme","cardId","data"],
+  {  },
+);
+
+export interface KcEmptyProps extends WebComponentProps {
   /** Title text. Attribute: `empty-title` (`title` is a global HTML attribute). */
   emptyTitle?: string;
   /** Description text. */
   description?: string;
 }
 
-export const KitnEmpty = createKitnComponent<KitnEmptyProps>(
-  'kitn-empty',
+export const KcEmpty = createWebComponent<KcEmptyProps>(
+  'kc-empty',
   ["theme","emptyTitle","description"],
   {  },
 );
 
-export interface KitnFeedbackBarProps extends KitnBaseProps {
+export interface KcFeedbackBarProps extends WebComponentProps {
   /** The banner label (e.g. "Was this helpful?"). Attribute: `bar-title` (`title` is avoided — it's a global HTML attribute). */
   barTitle?: string;
   /** The user dismissed the banner. */
@@ -256,13 +270,30 @@ export interface KitnFeedbackBarProps extends KitnBaseProps {
   onNothelpful?: (event: CustomEvent) => void;
 }
 
-export const KitnFeedbackBar = createKitnComponent<KitnFeedbackBarProps>(
-  'kitn-feedback-bar',
+export const KcFeedbackBar = createWebComponent<KcFeedbackBarProps>(
+  'kc-feedback-bar',
   ["theme","barTitle"],
   { onClose: 'close', onHelpful: 'helpful', onNothelpful: 'nothelpful' },
 );
 
-export interface KitnFileUploadProps extends KitnBaseProps {
+export interface KcFileTreeProps extends WebComponentProps {
+  /** 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[];
+  /** Fired when a file is selected. `detail.path` = the file's path. */
+  onSelect?: (event: CustomEvent<{ path: string }>) => void;
+}
+
+export const KcFileTree = createWebComponent<KcFileTreeProps>(
+  'kc-file-tree',
+  ["theme","files","activeFile","defaultExpanded"],
+  { onSelect: 'select' },
+);
+
+export interface KcFileUploadProps extends WebComponentProps {
   /** Allow selecting multiple files (default true). */
   multiple?: boolean;
   /** `accept` attribute for the file picker (e.g. `image/*`). */
@@ -275,13 +306,28 @@ export interface KitnFileUploadProps extends KitnBaseProps {
   onFilesadded?: (event: CustomEvent<{ files: File[] }>) => void;
 }
 
-export const KitnFileUpload = createKitnComponent<KitnFileUploadProps>(
-  'kitn-file-upload',
+export const KcFileUpload = createWebComponent<KcFileUploadProps>(
+  'kc-file-upload',
   ["theme","multiple","accept","disabled","label"],
   { onFilesadded: 'filesadded' },
 );
 
-export interface KitnImageProps extends KitnBaseProps {
+export interface KcFormProps extends WebComponentProps {
+  /** 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 const KcForm = createWebComponent<KcFormProps>(
+  'kc-form',
+  ["theme","data","cardId","heading"],
+  {  },
+);
+
+export interface KcImageProps extends WebComponentProps {
   /** Base64-encoded image data (pair with `media-type`). */
   base64?: string;
   /** Raw image bytes (set as a JS property). */
@@ -292,13 +338,26 @@ export interface KitnImageProps extends KitnBaseProps {
   mediaType?: string;
 }
 
-export const KitnImage = createKitnComponent<KitnImageProps>(
-  'kitn-image',
+export const KcImage = createWebComponent<KcImageProps>(
+  'kc-image',
   ["theme","base64","bytes","alt","mediaType"],
   {  },
 );
 
-export interface KitnLoaderProps extends KitnBaseProps {
+export interface KcLinkCardProps extends WebComponentProps {
+  /** 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 const KcLinkCard = createWebComponent<KcLinkCardProps>(
+  'kc-link-card',
+  ["theme","cardId","data"],
+  {  },
+);
+
+export interface KcLoaderProps 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'`. */
@@ -307,13 +366,13 @@ export interface KitnLoaderProps extends KitnBaseProps {
   text?: string;
 }
 
-export const KitnLoader = createKitnComponent<KitnLoaderProps>(
-  'kitn-loader',
+export const KcLoader = createWebComponent<KcLoaderProps>(
+  'kc-loader',
   ["theme","variant","size","text"],
   {  },
 );
 
-export interface KitnMarkdownProps extends KitnBaseProps {
+export interface KcMarkdownProps extends WebComponentProps {
   /** The markdown source to render. */
   content: string;
   /** Text/markdown sizing. */
@@ -324,13 +383,13 @@ export interface KitnMarkdownProps extends KitnBaseProps {
   codeHighlight?: boolean;
 }
 
-export const KitnMarkdown = createKitnComponent<KitnMarkdownProps>(
-  'kitn-markdown',
+export const KcMarkdown = createWebComponent<KcMarkdownProps>(
+  'kc-markdown',
   ["theme","content","proseSize","codeTheme","codeHighlight"],
   {  },
 );
 
-export interface KitnMessageProps extends KitnBaseProps {
+export interface KcMessageProps extends WebComponentProps {
   /** The full message object. Set as a JS property. */
   message?: { id: string; role: "user" | "assistant"; content: string; reasoning?: { text: string; label?: string }; tools?: { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: Record<string, unknown>; output?: Record<string, unknown>; toolCallId?: string; errorText?: string }[]; attachments?: { id: string; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[]; actions?: ("copy" | "like" | "dislike" | "regenerate" | "edit")[] };
   /** Convenience for simple cases when not passing a `message` object. */
@@ -349,24 +408,13 @@ export interface KitnMessageProps extends KitnBaseProps {
   onMessageaction?: (event: CustomEvent<{ messageId: string; action: "copy" | "like" | "dislike" | "regenerate" | "edit" }>) => void;
 }
 
-export const KitnMessage = createKitnComponent<KitnMessageProps>(
-  'kitn-message',
+export const KcMessage = createWebComponent<KcMessageProps>(
+  'kc-message',
   ["theme","message","role","content","markdown","proseSize","codeTheme","codeHighlight"],
   { onMessageaction: 'messageaction' },
 );
 
-export interface KitnMessageSkillsProps extends KitnBaseProps {
-  /** The active skills to badge. Set as a JS property. */
-  skills: { id: string; name: string }[];
-}
-
-export const KitnMessageSkills = createKitnComponent<KitnMessageSkillsProps>(
-  'kitn-message-skills',
-  ["theme","skills"],
-  {  },
-);
-
-export interface KitnModelSwitcherProps extends KitnBaseProps {
+export interface KcModelSwitcherProps extends WebComponentProps {
   /** The selectable models. Set as a JS property (array). */
   models: { id: string; name: string; provider?: undefined | string }[];
   /** The currently-selected model id. Defaults to the first model. */
@@ -375,13 +423,13 @@ export interface KitnModelSwitcherProps extends KitnBaseProps {
   onModelchange?: (event: CustomEvent<{ modelId: string }>) => void;
 }
 
-export const KitnModelSwitcher = createKitnComponent<KitnModelSwitcherProps>(
-  'kitn-model-switcher',
+export const KcModelSwitcher = createWebComponent<KcModelSwitcherProps>(
+  'kc-model-switcher',
   ["theme","models","currentModel"],
   { onModelchange: 'modelchange' },
 );
 
-export interface KitnPromptInputProps extends KitnBaseProps {
+export interface KcPromptInputProps extends WebComponentProps {
   /** Controlled value of the input. When set, the host owns the text and must update it on `valuechange`; leave unset for uncontrolled behavior. */
   value?: string;
   /** Placeholder text shown in the empty input. */
@@ -407,7 +455,7 @@ export interface KitnPromptInputProps extends KitnBaseProps {
   /** 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; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[];
   /** The Search (Globe) toolbar button was clicked. */
-  onSearch?: (event: CustomEvent<undefined>) => void;
+  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;
   /** The user submitted the prompt (Enter or send button) with its attachments. */
@@ -417,37 +465,16 @@ export interface KitnPromptInputProps extends KitnBaseProps {
   /** The input text changed (fires on every keystroke). */
   onValuechange?: (event: CustomEvent<{ value: string }>) => void;
   /** The Voice (Mic) toolbar button was clicked. */
-  onVoice?: (event: CustomEvent<undefined>) => void;
+  onVoice?: (event: CustomEvent<Record<string, never>>) => void;
 }
 
-export const KitnPromptInput = createKitnComponent<KitnPromptInputProps>(
-  'kitn-prompt-input',
+export const KcPromptInput = createWebComponent<KcPromptInputProps>(
+  'kc-prompt-input',
   ["theme","value","placeholder","disabled","loading","suggestions","suggestionMode","slashCommands","slashActiveIds","slashCompact","search","voice","attachments"],
   { onSearch: 'search', onSlashselect: 'slashselect', onSubmit: 'submit', onSuggestionclick: 'suggestionclick', onValuechange: 'valuechange', onVoice: 'voice' },
 );
 
-export interface KitnPromptSuggestionsProps extends KitnBaseProps {
-  /** 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;
-  /** A suggestion was clicked. */
-  onSelect?: (event: CustomEvent<{ value: string }>) => void;
-}
-
-export const KitnPromptSuggestions = createKitnComponent<KitnPromptSuggestionsProps>(
-  'kitn-prompt-suggestions',
-  ["theme","suggestions","variant","size","block","highlight"],
-  { onSelect: 'select' },
-);
-
-export interface KitnReasoningProps extends KitnBaseProps {
+export interface KcReasoningProps extends WebComponentProps {
   /** The reasoning text to display. */
   text: string;
   /** Trigger label. */
@@ -462,13 +489,46 @@ export interface KitnReasoningProps extends KitnBaseProps {
   onOpenchange?: (event: CustomEvent<{ open: boolean }>) => void;
 }
 
-export const KitnReasoning = createKitnComponent<KitnReasoningProps>(
-  'kitn-reasoning',
+export const KcReasoning = createWebComponent<KcReasoningProps>(
+  'kc-reasoning',
   ["theme","text","label","open","streaming","markdown"],
   { onOpenchange: 'openchange' },
 );
 
-export interface KitnResponseStreamProps extends KitnBaseProps {
+export interface KcResizableProps extends WebComponentProps {
+  /** Layout axis: `horizontal` (row, default) or `vertical` (column). */
+  orientation?: "horizontal" | "vertical";
+  /** Fired on drag-end / keyboard resize / visibility change. `detail.sizes` = panel sizes in percent. */
+  onChange?: (event: CustomEvent<{ sizes: number[] }>) => void;
+}
+
+export const KcResizable = createWebComponent<KcResizableProps>(
+  'kc-resizable',
+  ["theme","orientation"],
+  { onChange: 'change' },
+);
+
+export interface KcResizableItemProps extends WebComponentProps {
+  /** 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;
+  onChange?: (event: CustomEvent<unknown>) => void;
+}
+
+export const KcResizableItem = createWebComponent<KcResizableItemProps>(
+  'kc-resizable-item',
+  ["theme","size","min","max","locked","hidden"],
+  { onChange: 'change' },
+);
+
+export interface KcResponseStreamProps extends WebComponentProps {
   /** Text to stream. A string, or an `AsyncIterable<string>` (set as a JS property — async iterables can't be HTML attributes). */
   text?: string | AsyncIterable<string>;
   /** Reveal animation. */
@@ -481,13 +541,41 @@ export interface KitnResponseStreamProps extends KitnBaseProps {
   onComplete?: (event: CustomEvent) => void;
 }
 
-export const KitnResponseStream = createKitnComponent<KitnResponseStreamProps>(
-  'kitn-response-stream',
+export const KcResponseStream = createWebComponent<KcResponseStreamProps>(
+  'kc-response-stream',
   ["theme","text","mode","speed","as"],
   { onComplete: 'complete' },
 );
 
-export interface KitnSourceProps extends KitnBaseProps {
+export interface KcScopePickerProps extends WebComponentProps {
+  /** 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;
+  /** A scope was chosen (`undefined` filters = "All Content"). */
+  onScopechange?: (event: CustomEvent<{ filters: undefined | { tags?: undefined | string[]; authors?: undefined | string[]; contentType?: undefined | "transcript" | "markdown"; dateRange?: undefined | { from: string; to: string } } }>) => void;
+}
+
+export const KcScopePicker = createWebComponent<KcScopePickerProps>(
+  'kc-scope-picker',
+  ["theme","availableAuthors","availableTags","currentLabel"],
+  { onScopechange: 'scopechange' },
+);
+
+export interface KcSkillsProps extends WebComponentProps {
+  /** The active skills to badge. Set as a JS property. */
+  skills: { id: string; name: string }[];
+}
+
+export const KcSkills = createWebComponent<KcSkillsProps>(
+  'kc-skills',
+  ["theme","skills"],
+  {  },
+);
+
+export interface KcSourceProps extends WebComponentProps {
   /** The URL this citation links to (the domain also seeds the default label/favicon). */
   href?: string;
   /** Trigger label (defaults to the domain). */
@@ -500,26 +588,62 @@ export interface KitnSourceProps extends KitnBaseProps {
   showFavicon?: boolean;
 }
 
-export const KitnSource = createKitnComponent<KitnSourceProps>(
-  'kitn-source',
+export const KcSource = createWebComponent<KcSourceProps>(
+  'kc-source',
   ["theme","href","label","headline","description","showFavicon"],
   {  },
 );
 
-export interface KitnSourceListProps extends KitnBaseProps {
+export interface KcSourcesProps extends WebComponentProps {
   /** The sources to render. Set as a JS property. */
   sources: { href: string; title?: undefined | string; description?: undefined | string; label?: undefined | string; showFavicon?: undefined | boolean }[];
   /** Show favicons on all items (per-item `showFavicon` overrides). */
   showFavicon?: boolean;
 }
 
-export const KitnSourceList = createKitnComponent<KitnSourceListProps>(
-  'kitn-source-list',
+export const KcSources = createWebComponent<KcSourcesProps>(
+  'kc-sources',
   ["theme","sources","showFavicon"],
   {  },
 );
 
-export interface KitnTextShimmerProps extends KitnBaseProps {
+export interface KcSuggestionsProps 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 })[];
+  /** 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;
+  /** A suggestion was clicked. */
+  onSelect?: (event: CustomEvent<{ value: string }>) => void;
+}
+
+export const KcSuggestions = createWebComponent<KcSuggestionsProps>(
+  'kc-suggestions',
+  ["theme","suggestions","variant","size","block","highlight"],
+  { onSelect: 'select' },
+);
+
+export interface KcTaskListProps extends WebComponentProps {
+  /** 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 const KcTaskList = createWebComponent<KcTaskListProps>(
+  'kc-task-list',
+  ["theme","data","cardId","heading"],
+  {  },
+);
+
+export interface KcTextShimmerProps extends WebComponentProps {
   /** The text to shimmer. */
   text?: string;
   /** Element tag to render as (default `span`). */
@@ -530,13 +654,13 @@ export interface KitnTextShimmerProps extends KitnBaseProps {
   spread?: number;
 }
 
-export const KitnTextShimmer = createKitnComponent<KitnTextShimmerProps>(
-  'kitn-text-shimmer',
+export const KcTextShimmer = createWebComponent<KcTextShimmerProps>(
+  'kc-text-shimmer',
   ["theme","text","as","duration","spread"],
   {  },
 );
 
-export interface KitnThinkingBarProps extends KitnBaseProps {
+export interface KcThinkingBarProps extends WebComponentProps {
   /** The shimmering label, e.g. "Thinking…". */
   text?: string;
   /** When true, show a "stop" affordance that fires a `stop` event. */
@@ -547,26 +671,26 @@ export interface KitnThinkingBarProps extends KitnBaseProps {
   onStop?: (event: CustomEvent) => void;
 }
 
-export const KitnThinkingBar = createKitnComponent<KitnThinkingBarProps>(
-  'kitn-thinking-bar',
+export const KcThinkingBar = createWebComponent<KcThinkingBarProps>(
+  'kc-thinking-bar',
   ["theme","text","stoppable","stopLabel"],
   { onStop: 'stop' },
 );
 
-export interface KitnToolProps extends KitnBaseProps {
+export interface KcToolProps extends WebComponentProps {
   /** The tool-call to display. Set as a JS property. */
   tool?: { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: Record<string, unknown>; output?: Record<string, unknown>; toolCallId?: string; errorText?: string };
   /** Start expanded. */
   open?: boolean;
 }
 
-export const KitnTool = createKitnComponent<KitnToolProps>(
-  'kitn-tool',
+export const KcTool = createWebComponent<KcToolProps>(
+  'kc-tool',
   ["theme","tool","open"],
   {  },
 );
 
-export interface KitnVoiceInputProps extends KitnBaseProps {
+export interface KcVoiceInputProps 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). */
@@ -577,8 +701,73 @@ export interface KitnVoiceInputProps extends KitnBaseProps {
   onTranscription?: (event: CustomEvent<{ text: string }>) => void;
 }
 
-export const KitnVoiceInput = createKitnComponent<KitnVoiceInputProps>(
-  'kitn-voice-input',
+export const KcVoiceInput = createWebComponent<KcVoiceInputProps>(
+  'kc-voice-input',
   ["theme","transcribe","disabled"],
   { onAudiocaptured: 'audiocaptured', onTranscription: 'transcription' },
 );
+
+export interface KcWorkspaceProps extends WebComponentProps {
+  /** 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;
+  /** A conversation was selected in the sidebar. */
+  onConversationselect?: (event: CustomEvent<{ id: string }>) => void;
+  /** An action button on a message was clicked. */
+  onMessageaction?: (event: CustomEvent<{ messageId: string; action: "copy" | "like" | "dislike" | "regenerate" | "edit" }>) => void;
+  /** The header model switcher changed. */
+  onModelchange?: (event: CustomEvent<{ modelId: string }>) => void;
+  /** The "New chat" button was clicked. */
+  onNewchat?: (event: CustomEvent<Record<string, never>>) => void;
+  /** The Search button was clicked. */
+  onSearch?: (event: CustomEvent<Record<string, never>>) => void;
+  /** The sidebar was collapsed or expanded. */
+  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; attachments: { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[] }>) => void;
+  /** A suggestion chip was clicked (only in `suggestion-mode="fill"`). */
+  onSuggestionclick?: (event: CustomEvent<{ value: string }>) => void;
+  /** Fired on every input change. */
+  onValuechange?: (event: CustomEvent<{ value: string }>) => void;
+  /** The Mic / voice button was clicked. */
+  onVoice?: (event: CustomEvent<Record<string, never>>) => void;
+}
+
+export const KcWorkspace = createWebComponent<KcWorkspaceProps>(
+  'kc-workspace',
+  ["theme","groups","conversations","activeId","messages","value","placeholder","loading","suggestions","suggestionMode","proseSize","codeTheme","codeHighlight","chatTitle","models","currentModel","context","scrollButton","search","voice","slashCommands","slashActiveIds","slashCompact","sidebarWidth","sidebarMinWidth","sidebarMaxWidth","sidebarCollapsed"],
+  { onConversationselect: 'conversationselect', onMessageaction: 'messageaction', onModelchange: 'modelchange', onNewchat: 'newchat', onSearch: 'search', onSidebartoggle: 'sidebartoggle', onSlashselect: 'slashselect', onSubmit: 'submit', onSuggestionclick: 'suggestionclick', onValuechange: 'valuechange', onVoice: 'voice' },
+);