@kitn.ai/ui 0.28.0 → 0.30.0

package/src/elements/chat-types.ts

@@ -1,102 +0,0 @@
-import type { ToolPart, RawOrigin } from '../components/tool-types';
-import type { AttachmentData } from '../components/attachment-types';
-import type { CardEnvelope } from '../primitives/card-contract';
-
-/** Re-exported so consumers of chat-types (and MessagePart) can keep using
- *  RawOrigin unqualified. It is defined in components/tool-types.ts, not here,
- *  to keep the components -> elements import direction one-way. */
-export type { RawOrigin };
-
-/** The five built-in action buttons (each carries its own curated icon + label). */
-export type ChatMessageAction = 'copy' | 'like' | 'dislike' | 'regenerate' | 'edit';
-
-/** A like/dislike feedback vote on an assistant message. */
-export type FeedbackVote = 'like' | 'dislike';
-
-/** A host-defined action button. `icon` is a curated registry name (see
- *  `src/ui/action-icons.ts`); unknown/absent icons render label-only. */
-export interface CustomAction {
-  /** Emitted as the `kai-message-action` detail `action` when clicked. */
-  id: string;
-  /** Visible/`aria-label` text. */
-  label: string;
-  /** A curated icon name from the action-icon registry. */
-  icon?: string;
-  /** Tooltip text shown on hover. Defaults to `label` when omitted. */
-  tooltip?: string;
-}
-
-/** The speaker avatar for a message row. (Mirrors the `…Data` convention of
- *  `AttachmentData`; named to avoid clashing with the `MessageAvatar` component.) */
-export interface AvatarData {
-  /** Image URL. When present, renders an `<img>`. */
-  src?: string;
-  /** Initials/short text shown when there is no `src`. */
-  fallback?: string;
-  /** Alt text for the image. */
-  alt?: string;
-}
-
-/** A citation the model produced. */
-export interface Source {
-  id?: string;
-  url?: string;
-  title?: string;
-  snippet?: string;
-  /** Citation marker number, when the model numbers its citations. */
-  index?: number;
-}
-
-/** The public name for the citation carried by a `source` part, and the argument
- *  type of `AssistantStream.addSource`. The bare `Source` name is already taken
- *  on the public entry by the citation-chip COMPONENT (`./components/source`),
- *  so exporting this interface unaliased would be a duplicate identifier and the
- *  type would be unnameable from `@kitn.ai/ui`. */
-export type MessageSource = Source;
-
-/** One ordered piece of message content. Closed union: extension happens at the CARD
- *  layer via the card registry, not by adding variants here. */
-export type MessagePart =
-  | { type: 'text'; text: string; raw?: RawOrigin }
-  | {
-      type: 'reasoning';
-      text: string;
-      label?: string;
-      /** Provider block index. Keeps parallel reasoning blocks distinct. */
-      index?: number;
-      /** Which provider RESPONSE STREAM `index` was counted in. Anthropic restarts
-       *  content-block indices at 0 for every message, and a multi-round tool loop
-       *  folds several of those messages into ONE assistant turn, so `index` alone
-       *  is not unique within `parts`. Set by the wire adapter, one value per
-       *  `consumeModelStream` call. See `appendReasoningPart`. */
-      streamId?: string;
-      /** Load-bearing on the OpenAI wire, informational on the Anthropic one.
-       *  `toOpenAIMessages({ reasoning: 'include' })` REBUILDS a signed
-       *  `reasoning_details` entry from `text` plus this, because `raw` after a
-       *  streamed turn is a textless fragment: only the final frame carries the
-       *  signature and it has no text, and `appendReasoningPart` resolves `raw`
-       *  last-write-wins. `toAnthropicMessages` ignores this field and echoes
-       *  `raw.payload` verbatim — a thinking block rebuilt from text plus
-       *  signature is a hard 400. */
-      signature?: string;
-      raw?: RawOrigin;
-    }
-  | { type: 'tool'; tool: ToolPart; raw?: RawOrigin }
-  | { type: 'card'; envelope: CardEnvelope; raw?: RawOrigin }
-  | { type: 'source'; source: Source; raw?: RawOrigin }
-  | { type: 'file'; attachment: AttachmentData; raw?: RawOrigin };
-
-export interface ChatMessage {
-  id: string;
-  role: 'user' | 'assistant';
-  /** The ONLY content channel. Ordered. */
-  parts: MessagePart[];
-  /** Action buttons under the message. Chrome, not content. */
-  actions?: (ChatMessageAction | CustomAction)[];
-  /** Optional speaker avatar shown to the left of the message column. */
-  avatar?: AvatarData;
-  /** Controlled feedback vote. When set, it wins over the facade's internal
-   *  optimistic state (`m.feedback ?? feedbackMap[m.id]`), so a host that
-   *  persists votes can re-hydrate them. */
-  feedback?: FeedbackVote;
-}

package/src/elements/chat-workspace.tsx

@@ -1,188 +0,0 @@
-import { createSignal, onMount, onCleanup, untrack } from 'solid-js';
-import { defineWebComponent } from './define';
-import { readSlots, WORKSPACE_SLOTS } from './slots';
-import {
-  WorkspaceShell,
-  type WorkspaceShellController,
-  type WorkspaceAsideSide,
-  type WorkspaceAsideToggleDetail,
-  type WorkspaceAsideResizeDetail,
-} from '../components/workspace-shell';
-
-interface Props extends Record<string, unknown> {
-  /** Controlled collapsed state of the start aside. Set this as a JS property
-   *  (`el.startCollapsed = true`) to drive the aside from your app, updating it
-   *  in response to the `kai-aside-toggle` event. Omit for uncontrolled (the
-   *  element manages it). */
-  startCollapsed?: boolean;
-  /** Initial collapsed state of the start aside when uncontrolled (default
-   *  false). Use the `default-start-collapsed` attribute to start collapsed in
-   *  plain HTML. */
-  defaultStartCollapsed?: boolean;
-  /** Controlled collapsed state of the end aside. Set this as a JS property
-   *  (`el.endCollapsed = true`) to drive the aside from your app, updating it
-   *  in response to the `kai-aside-toggle` event. Omit for uncontrolled (the
-   *  element manages it). */
-  endCollapsed?: boolean;
-  /** Initial collapsed state of the end aside when uncontrolled (default
-   *  false). Use the `default-end-collapsed` attribute to start collapsed in
-   *  plain HTML. */
-  defaultEndCollapsed?: boolean;
-  /** Auto-collapse both asides when the shell's own width drops below this many
-   *  px, and re-expand when it grows back above. Applies to uncontrolled asides
-   *  only (it never fights an app-driven collapsed prop); omit to disable.
-   *  Fires `kai-aside-toggle`. Attribute: `collapse-below`. */
-  collapseBelow?: number;
-  /** Below this shell width in px, an expanded aside renders as an overlay
-   *  drawer over the main region instead of a column beside it. Escape inside
-   *  the drawer closes it and returns focus to the element focused before it
-   *  opened. Omit to disable. Attribute: `drawer-below`. */
-  drawerBelow?: number;
-  /** Density hint. Reflected as a `data-compact` hook on the root (and as the
-   *  `compact` attribute on the element) for your CSS and slotted content; the
-   *  shell itself keeps no other opinion about density. */
-  compact?: boolean;
-}
-
-/** Events fired by `<kai-workspace>`. Layout only: every chat event now belongs
- *  to the part that fires it, inside your own markup. */
-interface Events {
-  /** An aside collapsed or expanded (a method, the breakpoint, the drawer's Escape). */
-  'kai-aside-toggle': WorkspaceAsideToggleDetail;
-  /** The aside was resized (fires per drag step, keyboard nudge, or a handle double-click reset), width in px. */
-  'kai-aside-resize': WorkspaceAsideResizeDetail;
-}
-
-/**
- * `<kai-workspace>` — the chat-agnostic layout shell: five slots (`header` ·
- * `start` · `main` · `end` · `footer`), resize handles between the columns,
- * per-aside collapse, collapse-below-breakpoint, and a mobile drawer mode for
- * the asides. It knows nothing about chat: a file tree in `start` is as valid
- * as `<kai-conversations>`, and the workspace app slots `<kai-conversations>`
- * and `<kai-chat>` into it.
- *
- * ```html
- * <kai-workspace collapse-below="720" drawer-below="640">
- *   <kai-conversations slot="start"></kai-conversations>
- *   <kai-chat></kai-chat>
- * </kai-workspace>
- * ```
- *
- * Aside geometry is CSS custom properties, not props (the `kai-dock` rule):
- * `--kai-workspace-start-width` (280px) · `--kai-workspace-start-min-width`
- * (200px) · `--kai-workspace-start-max-width` (480px) · `--kai-workspace-end-width`
- * (320px) · `--kai-workspace-end-min-width` (200px) · `--kai-workspace-end-max-width`
- * (480px). Read once at upgrade. Parts: `header` · `start` · `main` · `end` ·
- * `footer` (the asides also match `::part(aside)`).
- *
- * **BREAKING (0.24):** this element was a chat
- * preset; it is now a layout shell, and everything chat-shaped is gone from its
- * surface. Where each removed prop went:
- *
- * - `conversations` / `activeId` / `groups` / `noConversations`: set them on your
- *   own `<kai-conversations slot="start">`.
- * - `messages` / `loading` / `proseSize` / `codeTheme` / `codeHighlight` /
- *   `chatTitle` / `scrollButton` / `cardTypes` / `cardSchemas`: set them on your
- *   own `<kai-chat>` in the main region.
- * - `value` / `placeholder` / `suggestions` / `suggestionMode` / `voice` /
- *   `triggers` / `kindIcons` and the renamed `webSearch` (was `search`): the
- *   composer surface on `<kai-chat>` or `<kai-prompt-input>`.
- * - `models` / `currentModel` / `context`: header chrome you slot (a model
- *   picker is a part in a slot, not three orchestrator props).
- * - `sidebarWidth` / `sidebarMinWidth` / `sidebarMaxWidth`: the
- *   `--kai-workspace-start-*` custom properties above.
- * - `sidebarCollapsed` / `defaultSidebarCollapsed`: `startCollapsed` /
- *   `defaultStartCollapsed` (per-aside; the end aside has its own pair).
- * - `collapseBelow`: kept, now collapsing both asides.
- * - `compact`: kept as a reflected density hint; the rail's row density is
- *   `<kai-conversations>`' own `compact`.
- * - Chat events (`kai-submit`, `kai-conversation-select`, `kai-message-action`,
- *   `kai-model-change`, `kai-search`, `kai-voice`, `kai-value-change`,
- *   `kai-suggestion-click`): listen on the part that fires them.
- *   `kai-sidebar-toggle` is now `kai-aside-toggle` with a `side`.
- * - Methods: `toggleSidebar()` / `collapseSidebar()` / `expandSidebar()` are now
- *   `toggleAside(side)` / `collapseAside(side)` / `expandAside(side)`; the
- *   thread methods (`focus`/`clear`/`send`/`scrollToBottom`) live on your
- *   `<kai-chat>`.
- *
- * The migration path for a full app is the `workspace` block scaffold (the kai
- * MCP `scaffold` tool), which emits this composition wired.
- */
-defineWebComponent<Props, Events>('kai-workspace', {
-  startCollapsed: undefined,
-  defaultStartCollapsed: undefined,
-  endCollapsed: undefined,
-  defaultEndCollapsed: undefined,
-  collapseBelow: undefined,
-  drawerBelow: undefined,
-  compact: undefined,
-}, (props, { dispatch, flag, expose, element, reflectFlag }) => {
-  // Which slots the consumer has filled. A bare <slot> is always a truthy JSX
-  // node, so each optional region renders ONLY when readSlots reports projected
-  // light-DOM content (re-read on childList mutation). Main always renders.
-  const [slots, setSlots] = createSignal<Record<string, boolean>>({});
-  onMount(() => {
-    const read = () => setSlots(readSlots(element, WORKSPACE_SLOTS));
-    read();
-    const observer = new MutationObserver(read);
-    observer.observe(element, { childList: true });
-    onCleanup(() => observer.disconnect());
-  });
-
-  // Reflect the read-back flags (the G-05 rule: a bare attribute parses to
-  // `undefined`, so without this the property would contradict the attribute).
-  reflectFlag('compact');
-  reflectFlag('defaultStartCollapsed');
-  reflectFlag('defaultEndCollapsed');
-
-  // Aside geometry from the element's CSS custom properties, read once at
-  // upgrade (inline style first so jsdom, which does not resolve custom
-  // properties through getComputedStyle, still honors a direct set).
-  const readVar = (name: string, fallback: number): number => {
-    const inline = element.style.getPropertyValue(name).trim();
-    const computed = inline || getComputedStyle(element).getPropertyValue(name).trim();
-    const n = parseFloat(computed);
-    return Number.isFinite(n) ? n : fallback;
-  };
-  const geometry = untrack(() => ({
-    startWidth: readVar('--kai-workspace-start-width', 280),
-    startMinWidth: readVar('--kai-workspace-start-min-width', 200),
-    startMaxWidth: readVar('--kai-workspace-start-max-width', 480),
-    endWidth: readVar('--kai-workspace-end-width', 320),
-    endMinWidth: readVar('--kai-workspace-end-min-width', 200),
-    endMaxWidth: readVar('--kai-workspace-end-max-width', 480),
-  }));
-
-  let controller: WorkspaceShellController | undefined;
-  expose({
-    /** Collapse/expand one aside (fires `kai-aside-toggle`). */
-    toggleAside: (side: WorkspaceAsideSide) => controller?.toggleAside(side),
-    /** Force one aside collapsed (fires `kai-aside-toggle`). */
-    collapseAside: (side: WorkspaceAsideSide) => controller?.collapseAside(side),
-    /** Force one aside expanded (fires `kai-aside-toggle`). */
-    expandAside: (side: WorkspaceAsideSide) => controller?.expandAside(side),
-  });
-
-  return (
-    <WorkspaceShell
-      header={slots()['header'] ? <slot name="header" /> : undefined}
-      start={slots()['start'] ? <slot name="start" /> : undefined}
-      end={slots()['end'] ? <slot name="end" /> : undefined}
-      footer={slots()['footer'] ? <slot name="footer" /> : undefined}
-      startCollapsed={props.startCollapsed as boolean | undefined}
-      defaultStartCollapsed={flag('defaultStartCollapsed')}
-      endCollapsed={props.endCollapsed as boolean | undefined}
-      defaultEndCollapsed={flag('defaultEndCollapsed')}
-      collapseBelow={props.collapseBelow as number | undefined}
-      drawerBelow={props.drawerBelow as number | undefined}
-      compact={flag('compact')}
-      {...geometry}
-      onAsideToggle={(detail) => dispatch('kai-aside-toggle', detail)}
-      onAsideResize={(detail) => dispatch('kai-aside-resize', detail)}
-      controllerRef={(c) => (controller = c)}
-    >
-      <slot name="main" />
-      <slot />
-    </WorkspaceShell>
-  );
-});

package/src/elements/chat.tsx

@@ -1,304 +0,0 @@
-import { createSignal, onCleanup, onMount } from 'solid-js';
-import { defineWebComponent } from './define';
-import { CHAT_SLOTS, readSlots } from './slots';
-import { ChatThread, type ChatThreadProps, type ChatThreadContextUsage, type ChatThreadController } from '../components/chat-thread';
-import { cardComponentsFromTags } from './message';
-import { createMessagesGuard } from './validate-messages';
-import type { AttachmentData } from '../components/attachments';
-import type { RejectedAttachment } from './default-input';
-import type { ChatMessage } from './chat-types';
-import type { TriggerDef } from '../components/composer';
-import type { ComposerDoc } from '../primitives/composer-model';
-import type { ProseSize } from '../primitives/chat-config';
-import type { ModelOption, HomeConfig, HomeLinkEntry } from '../types';
-import type { ConversationStore } from '../primitives/conversation-store';
-
-type Props = Omit<ChatThreadProps,
-  'class' | 'onValueChange' | 'onSubmit' | 'onAttachmentsChange' | 'onSuggestionClick' | 'onModelChange'
-  | 'onMessageAction' | 'onWebSearch' | 'onVoice' | 'controllerRef' | 'cardTypes' | 'cardSchemas' | 'cardHostElement' | 'messages'
-  | 'accept' | 'onAttachmentsRejected'
-  // `conversations`/`store` are re-declared below (own doc comments, matching
-  // this element's own attribute/property conventions) rather than left to
-  // flow through `Omit`'s pass-through — same reason `messages` is excluded
-  // above. Left unexcluded, the intersection carries TWO declarations of the
-  // same property (the inherited `ChatThreadProps` one plus the re-declared
-  // one below) and `gen-element-api.mjs` concatenates both JSDoc comments into
-  // one duplicated, em-dash-laden description.
-  | 'conversations' | 'store'
-  // `home` is re-declared below for the same reason as `conversations`/`store`
-  // above (own element-facing doc comment rather than the ChatThread-level one
-  // flowing through `Omit`'s pass-through). `onHomeLink` is wired internally
-  // (JSX prop on `<ChatThread>` below) as a dispatched `kai-home-link` event,
-  // matching every other ChatThread callback on this element — same reasoning
-  // as `onConversationLoad` just below.
-  | 'home' | 'onHomeLink'
-  // `onConversationLoad` is wired internally (below, JSX prop on
-  // `<ChatThread>`) as a dispatched `kai-conversation-load` event — matching
-  // every other ChatThread callback on this element — rather than left as a
-  // settable JS property: a `JSX.Element`-shaped callback prop has no HTML-
-  // consumer analogue the way `store`/`messages` do, and the kai- contract's
-  // idiom for "this thread wants to tell you something" is already an event.
-  // Excluded from `Props` for the same reason `onValueChange`/`onSubmit`/etc
-  // are excluded above: it is not a property a consumer of `<kai-chat>` sets.
-  | 'onConversationLoad'
-  // `hostOpen`/`onUnreadChange` (unread indicators, 2026-08-26) are the SAME
-  // "types without forwarding" trap as `onConversationLoad` above, for the
-  // same reason: this facade does not read either off the host element and
-  // forward it onto `<ChatThread>` below. Both exist for a caller composing
-  // `ChatThread` directly as a Solid component with its OWN show/hide chrome
-  // to report through `hostOpen` and its own sibling control (a `Dock`'s
-  // `unread` badge) to mirror `onUnreadChange` onto — the construct engine's
-  // emitted App is the motivating case (codegen.ts's `emitChatThreadUnreadProps`),
-  // exactly like `headerEndContent`/`emptyContent` below. `<kai-chat>` has no
-  // such sibling chrome of its own to report to or read from, so there is
-  // nothing here for either prop to DO — left unexcluded, `gen-element-api.mjs`
-  // would still type them into the public API and docs as settable properties
-  // that silently do nothing when set.
-  | 'hostOpen' | 'onUnreadChange'
-  // `headerEndContent`/`emptyContent` are JSX.Element escape hatches for a caller
-  // composing `ChatThread` directly as a Solid component (see their doc comments in
-  // chat-thread.tsx — the construct-engine's emitted App is the motivating case).
-  // `<kai-chat>` is the OPPOSITE shape: a custom element crossing the shadow-DOM
-  // boundary, where a `JSX.Element` value cannot exist for a consumer to construct
-  // (React/Vue/plain HTML have no such type) and the facade already has its own
-  // working mechanism for both regions — `slot="header-end"` and `slot="empty"`.
-  // Omitted here rather than left to flow through `Omit`'s default pass-through:
-  // without this, `gen-element-api.mjs` picked them up and put a JSX.Element type
-  // (which it stringifies as Solid's internal array-like union — meaningless to a
-  // web-component consumer) into `<kai-chat>`'s public prop surface and docs.
-  | 'headerEndContent' | 'emptyContent'> & Record<string, unknown> & {
-    /** Which attachment media types the user may stage, in HTML `accept` syntax:
-     *  `<kai-chat accept="image/*,application/pdf">`. A plain string, so unlike
-     *  `messages` it DOES work as an attribute. Omitted means no filter.
-     *
-     *  MEDIA TYPES ONLY -- exact (`image/png`) or subtype wildcard (`text/*`).
-     *  HTML allows a file extension here and this does not: `accept=".py"` THROWS
-     *  with the entry named, rather than silently resolving to a picker that
-     *  accepts nothing.
-     *
-     *  It can only NARROW what the kit can already encode: `accept="image/*"`
-     *  resolves to the four image formats both APIs take, not to every image type
-     *  the OS offers. Pass the SAME string to `toOpenAIMessages(msgs, { accept })`
-     *  and the picker and the wire cannot disagree -- both resolve it through
-     *  `resolveMediaPolicy` against one declaration. That declaration is readable
-     *  as `encodableMediaTypes()` from `@kitn.ai/ui/wire`, if you would rather
-     *  build your own picker than use this prop. */
-    accept?: string;
-    /** The full message thread to render, newest last. Each entry carries its
-     *  role, ordered `parts`, and optional actions/avatar/feedback. Set as a JS
-     *  property (`el.messages = [...]`); a NEW array reference per streaming
-     *  chunk re-renders (mutating in place does not). Omit for an empty thread.
-     *
-     *  Re-declared here (rather than inherited from `ChatThreadProps`) because
-     *  the ELEMENT registers a `[]` default and renders the empty state without
-     *  it, while the SolidJS `<ChatThread>` component still requires it. The
-     *  facade hands it a validated array either way. Matches `<kai-thread>`. */
-    messages?: ChatMessage[];
-    /** Optional card type -> custom-element tag overrides/additions for `card`
-     *  parts (merged over the built-ins). Property: `el.cardTypes`. Typed as a
-     *  plain string map (not the `CardTagMap` alias) so the generated React
-     *  wrapper inlines it instead of emitting an unresolved named type. */
-    cardTypes?: Record<string, string>;
-    /** JSON Schemas for the card types this app renders, keyed by envelope type. The
-     *  companion of `cardTypes`, which says what DRAWS a card while this says what a
-     *  VALID one looks like. An OBJECT, so it is a JS property only: `el.cardSchemas
-     *  = { 'pricing-table': pricingSchema }`, never an attribute.
-     *  `createCardRegistry(...).validationSchemas` is exactly this shape.
-     *
-     *  Without it the kit validates its own seven built-ins and leaves your own card
-     *  type, the one your app actually cares about, as the only unchecked thing on
-     *  screen. A schema here WINS over a built-in of the same name.
-     *
-     *  Typed `Record<string, object>` rather than `Record<string, JsonSchema>`
-     *  deliberately: an imported `.json` schema widens `"type"` to `string`, and an
-     *  authored one carries `$schema`/`title`/`description`/`additionalProperties`,
-     *  so the tighter type would reject both of the normal ways to supply one. */
-    cardSchemas?: Record<string, object>;
-    /** Turns on the prior-conversations list (a list-toggle button in the
-     *  header, plus a second list view sharing the panel, C-1). Attribute-
-     *  settable like every other boolean flag on this element:
-     *  `<kai-chat conversations>`. Requires `store`. A row select, "new
-     *  conversation," or the visitor's mount-time auto-restore all deliver
-     *  their messages the same way: listen for `kai-conversation-load` and
-     *  set `el.messages` from `event.detail.messages` (a fresh array): this
-     *  element does not update `messages` for you. Set with no `store`, the
-     *  underlying `ChatThread` decides loudly (one console.error) and stays
-     *  visually off; this facade always supplies its own internal load
-     *  handler (the `kai-conversation-load` dispatch below), so the second
-     *  ChatThread guard, missing `onConversationLoad`, never trips here,
-     *  even for a consumer who never listens for the event. Default false. */
-    conversations?: boolean;
-    /** The adapter this thread persists conversations through: an object of
-     *  three functions (`list`/`load`/`save`; `ConversationStore`, exported
-     *  from `@kitn.ai/ui`'s `primitives/conversation-store`). A JS PROPERTY
-     *  ONLY: `el.store = myAdapter`. It can never be an attribute, since a
-     *  function-bearing object has no HTML string form, the same reasoning
-     *  that keeps `messages`/`cardSchemas` property-only (the kai- contract:
-     *  array/object props are JS properties, never attributes). Two built-ins
-     *  ship: `localStorageStore(name, userId?)` and `fetchStore(url, userId?)`. */
-    store?: ConversationStore;
-    /** Turns on the widget home screen (Intercom-pattern): the panel boots into
-     *  a `home` view, with a greeting, most-recent-conversation card, a "new
-     *  conversation" CTA, and host-defined links, plus a Home/Messages tab bar
-     *  for switching back to the thread. An OBJECT, so it is a JS property only:
-     *  `el.home = { greeting: { title: 'Hey' }, links: [...] }`, never an
-     *  attribute (the kai- contract: array/object props are JS properties).
-     *  A `links` entry with no `href` fires `kai-home-link` with that entry when
-     *  tapped, rather than navigating; one WITH `href` opens it directly
-     *  (only when the URL passes the kit's own scheme allowlist). Omit for the
-     *  no-home widget (chat view only, unchanged). */
-    home?: HomeConfig;
-  };
-
-interface Events {
-  /** User submitted a message. */
-  'kai-submit': { value: string; attachments: AttachmentData[] };
-  /** Fired on every input change. */
-  'kai-value-change': { value: string };
-  /** The staged attachments changed (file added or removed). Carries the full
-   *  current list so a consumer can react in real time. */
-  'kai-attachments-change': { attachments: AttachmentData[] };
-  /** One or more picked files were refused because `accept` excluded them. The
-   *  element renders NO message of its own: it reports the facts (name, media
-   *  type, whether the kit could have sent it) and what the user should see is
-   *  the application's call. Only ever fires when `accept` is set. */
-  'kai-attachments-rejected': { rejected: RejectedAttachment[] };
-  /** A suggestion chip was clicked (only in `suggestion-mode="fill"`). */
-  'kai-suggestion-click': { value: string };
-  /** An action button on a message was clicked. `action` is the built-in name or
-   *  custom id. `state` is present only for the toggleable feedback votes:
-   *  `'on'` when a like/dislike is set, `'off'` when re-tapped to clear. */
-  'kai-message-action': { messageId: string; action: string; state?: 'on' | 'off' };
-  /** The header model switcher changed. */
-  'kai-model-change': { modelId: string };
-  /** The web-search (Globe) toolbar button was clicked. */
-  'kai-web-search': Record<string, never>;
-  /** The Mic / voice button was clicked. */
-  'kai-voice': Record<string, never>;
-  /** A conversation's history loaded: a row tap in the list, "new
-   *  conversation," or the visitor's own mount-time auto-restore of their
-   *  most recent thread (only fires when `conversations` is on and a `store`
-   *  is set). `detail.id` is that conversation's id, `undefined` for the
-   *  "new conversation" case (no id exists until the first message mints
-   *  one, C-6). Set `el.messages = event.detail.messages` (already a fresh
-   *  array) to actually render it, since this element does not do that for
-   *  you; `messages` stays your own state like everywhere else on this
-   *  element. */
-  'kai-conversation-load': { id: string | undefined; messages: ChatMessage[] };
-  /** A `home.links` entry with no `href` was activated (tapped/clicked/Enter).
-   *  Meaningful only when `home` is set. */
-  'kai-home-link': { entry: HomeLinkEntry };
-}
-
-defineWebComponent<Props, Events>('kai-chat', {
-  messages: [], value: undefined, placeholder: 'Send a message...', loading: false,
-  suggestions: undefined, suggestionMode: 'submit', persistSuggestions: false, proseSize: 'sm',
-  codeTheme: 'github-dark-dimmed', codeHighlight: true, chatTitle: undefined,
-  models: undefined, currentModel: undefined, context: undefined, scrollButton: true,
-  attach: true, webSearch: false, voice: false, triggers: undefined, kindIcons: undefined,
-  actionsReveal: 'always', cardTypes: undefined, cardSchemas: undefined, accept: undefined,
-  reasoning: undefined, reasoningOpen: undefined, conversations: false, store: undefined,
-  home: undefined,
-}, (props, { dispatch, flag, reflectFlag, element, expose }) => {
-  // `messages` is an untyped boundary: a consumer can hand it anything at
-  // runtime (a pre-0.20.0 `{ id, role, content }` array, in particular). Skip
-  // the invalid entries rather than let `groupMessageParts` throw deep inside a
-  // render pass, which would blank the whole chat instead of one message.
-  const validMessages = createMessagesGuard('kai-chat');
-
-  // Slot detection is driven by the CHAT_SLOTS registry (single source of truth)
-  // so slot names never drift between the view, the facade, and the docs.
-  const [slots, setSlots] = createSignal<Record<string, boolean>>({});
-  const slot = (name: string) => slots()[name] === true;
-  onMount(() => {
-    const read = () => setSlots(readSlots(element, CHAT_SLOTS));
-    read();
-    const observer = new MutationObserver(read);
-    observer.observe(element, { childList: true });
-    onCleanup(() => observer.disconnect());
-  });
-
-  // Reflect streaming state to a host attribute so slotted composer/notice CSS
-  // can react without reading internals (e.g. :host([loading]) ::slotted(...)).
-  // reflectFlag, not a hand-rolled toggleAttribute effect: the reflection is what
-  // makes the property read back `undefined`, so the two belong in one call. See
-  // WebComponentContext.reflectFlag.
-  reflectFlag('loading');
-
-  // Imperative method API — forward the chat-thread controller onto the host
-  // (focus the composer, clear it, send programmatically, scroll the thread).
-  let controller: ChatThreadController | undefined;
-  expose({
-    /** Focus the composer, meaning the contenteditable (or textarea) inside the
-     *  shadow root. A native `focus()` on the host lands on the host itself and
-     *  never reaches it, so this is the only way to focus the input
-     *  programmatically. */
-    focus: (options?: FocusOptions) => controller?.focus(options),
-    /** Blur whatever currently holds focus inside the shadow root. The companion
-     *  to `focus()`, for the same reason: a native `blur()` on the host misses
-     *  the real focus target. */
-    blur: () => (element.shadowRoot?.activeElement as HTMLElement | null)?.blur(),
-    /** Empty the COMPOSER: drops the draft text and every staged attachment, then
-     *  fires `kai-value-change` with `''`. It does NOT touch the thread. `messages`
-     *  is the consumer's own state, so clearing history stays the consumer's call. */
-    clear: () => controller?.clear(),
-    /** Submit whatever the composer currently holds, on the same path as Enter or
-     *  the send button: fires `kai-submit` with that value plus the staged
-     *  attachments, then drops the attachments. It takes no argument, so to send
-     *  text the user never typed, set `el.value` first. There is no empty-check,
-     *  so an empty composer still fires. The draft is cleared afterwards only when
-     *  `value` is uncontrolled; a controlled host owns its value and clears it
-     *  itself. Named `send`, not `submit`, to match the shared vocabulary. */
-    send: () => controller?.send(),
-    /** Scroll the message viewport to the newest message. Defaults to `'smooth'`;
-     *  pass `'instant'` to jump without animating. */
-    scrollToBottom: (behavior?: ScrollBehavior) => controller?.scrollToBottom(behavior),
-  });
-
-  return (
-  <ChatThread
-    messages={validMessages(props.messages)} value={props.value as string | ComposerDoc | undefined} placeholder={props.placeholder as string}
-    loading={flag('loading')} suggestions={props.suggestions as string[] | undefined}
-    suggestionMode={props.suggestionMode as 'submit' | 'fill'} persistSuggestions={flag('persistSuggestions')}
-    proseSize={props.proseSize as ProseSize}
-    codeTheme={props.codeTheme as string} codeHighlight={flag('codeHighlight')}
-    chatTitle={props.chatTitle as string | undefined} models={props.models as ModelOption[] | undefined}
-    currentModel={props.currentModel as string | undefined} context={props.context as ChatThreadContextUsage | undefined}
-    scrollButton={props.scrollButton !== false} attach={flag('attach')} webSearch={flag('webSearch')} voice={flag('voice')}
-    reasoning={props.reasoning as 'full' | 'compact' | 'off' | undefined}
-    reasoningOpen={flag('reasoningOpen')}
-    triggers={props.triggers as TriggerDef[] | undefined}
-    kindIcons={props.kindIcons as Record<string, string> | undefined}
-    actionsReveal={props.actionsReveal as 'always' | 'hover'}
-    cardTypes={cardComponentsFromTags(props.cardTypes as Record<string, string> | undefined, (props as { theme?: string }).theme)}
-    cardSchemas={props.cardSchemas as Record<string, object> | undefined}
-    conversations={flag('conversations')}
-    store={props.store as ConversationStore | undefined}
-    onConversationLoad={(messages, id) => dispatch('kai-conversation-load', { id, messages })}
-    home={props.home as HomeConfig | undefined}
-    onHomeLink={(entry) => dispatch('kai-home-link', { entry })}
-    /* F-26: card parts emit off THIS element as the bubbling `kai-card` event,
-       so `listenForCardEvents(el)` / addEventListener('kai-card') work. */
-    cardHostElement={element}
-    onValueChange={(value) => dispatch('kai-value-change', { value })}
-    onSubmit={(detail) => dispatch('kai-submit', detail)}
-    accept={props.accept as string | undefined}
-    onAttachmentsChange={(attachments) => dispatch('kai-attachments-change', { attachments })}
-    onAttachmentsRejected={(rejected) => dispatch('kai-attachments-rejected', { rejected })}
-    onSuggestionClick={(value) => dispatch('kai-suggestion-click', { value })}
-    onModelChange={(modelId) => dispatch('kai-model-change', { modelId })}
-    onMessageAction={(detail) => dispatch('kai-message-action', detail)}
-    onWebSearch={() => dispatch('kai-web-search', {})}
-    onVoice={() => dispatch('kai-voice', {})}
-    controllerRef={(c) => (controller = c)}
-    headerStart={slot('header-start')}
-    headerEnd={slot('header-end')}
-    headerFull={slot('header')}
-    sidebar={slot('sidebar')}
-    empty={slot('empty')}
-    composer={slot('composer')}
-    composerActions={slot('composer-actions')}
-    footer={slot('footer')}
-  />
-  );
-});