@kitn.ai/ui 0.27.0 → 0.29.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,212 +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 } from '../types';
-
-type Props = Omit<ChatThreadProps,
-  'class' | 'onValueChange' | 'onSubmit' | 'onAttachmentsChange' | 'onSuggestionClick' | 'onModelChange'
-  | 'onMessageAction' | 'onWebSearch' | 'onVoice' | 'controllerRef' | 'cardTypes' | 'cardSchemas' | 'cardHostElement' | 'messages'
-  | 'accept' | 'onAttachmentsRejected'
-  // `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>;
-  };
-
-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>;
-}
-
-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,
-}, (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}
-    /* 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')}
-  />
-  );
-});

package/src/elements/checkbox-group.tsx

@@ -1,164 +0,0 @@
-import { createEffect, createSignal, untrack } from 'solid-js';
-import { defineWebComponent } from './define';
-import { CheckboxGroup } from '../ui/checkbox-group';
-// Public shape of the `options` prop; lives in ./element-data-types so the ROOT
-// entry can re-export it (see that file's header).
-import type { KaiCheckboxOption } from './element-data-types';
-
-interface Props extends Record<string, unknown> {
-  /** The choices, top to bottom. Set as a JS PROPERTY (array), never an attribute.
-   *  Rendered in full: the kit never truncates, re-orders or de-duplicates them. */
-  options: KaiCheckboxOption[];
-  /** The FIRST selected value. Settable and reflected to the `value` attribute, so
-   *  `:host([value])` and `el.value` see live state, and a seed can be written in
-   *  markup. Writing it makes that the whole selection; to read or drive the rest,
-   *  use `el.values`. */
-  value?: string;
-  /**
-   * The shared form-control name every box carries, so `FormData.getAll(name)` reads
-   * the whole selection back under one key.
-   *
-   * NO DEFAULT, unlike `<kai-radio-group>`. A radio set needs a shared `name` for the
-   * browser to make it exclusive and arrow-navigable, so one is generated when none is
-   * given; checkboxes are independent controls and behave correctly with no name at
-   * all. Generating one here would submit the selection under a random key, which is
-   * worse than submitting nothing.
-   *
-   * The element is NOT form-associated (no `ElementInternals`, no `setFormValue()`),
-   * the same known gap `<kai-input>` records: the boxes live in a shadow root, so a
-   * surrounding `<form>` collects nothing from them whether or not `name` is set. Read
-   * `el.values`. The name still lands on every inner input, so it is right the day form
-   * association arrives.
-   */
-  name?: string;
-  /** Disable every row. Individual rows carry their own `disabled`. */
-  disabled?: boolean;
-  /** Accessible name for the group. */
-  label?: string;
-}
-
-/** Events fired by `<kai-checkbox-group>`. */
-interface Events {
-  /** A row was ticked or unticked. `values` is the whole selection after the change,
-   *  which is what a multi-select control needs; `value` is the first of them (empty
-   *  when nothing is selected). Both are always present, so neither shape silently
-   *  loses the other. This is `<kai-select>`'s detail, deliberately. */
-  'kai-change': { value: string; values: string[] };
-}
-
-/**
- * `<kai-checkbox-group>` — the kit's "pick any number" control, and
- * `<kai-radio-group>`'s sibling: the same options shape and the same divided row
- * chrome over real `<input type="checkbox">`es, multi-value instead of exclusive. A
- * box per tab stop, Space to toggle and correct announcement are the browser's, not a
- * reimplementation.
- *
- * Feed it `options` (a JS-property array of `{ value, label, description?, disabled? }`),
- * drive and read the selection with the `values` property, and listen for `kai-change`.
- * `value` is the first selected option and is reflected to the `value` attribute.
- *
- * Re-rendering follows the kit's reactivity contract: hand it a NEW array reference,
- * and a new object for any option whose content changed — the rows are a
- * reference-keyed list, so mutating an option in place changes nothing on screen.
- *
- * No validation and no limits: "at least one", "at most three" and anything else that
- * lands in a policy document is the application's rule, not the kit's.
- *
- * ```html
- * <kai-checkbox-group label="Environments" name="env"></kai-checkbox-group>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const group = document.querySelector('kai-checkbox-group');
- *   // ARRAY prop — a JS property, never an attribute.
- *   group.options = [
- *     { value: 'prod', label: 'Production', description: 'Pages the on-call' },
- *     { value: 'staging', label: 'Staging' },
- *     { value: 'dev', label: 'Development' },
- *   ];
- *   group.addEventListener('kai-change', (e) => console.log(e.detail.values));
- *   group.values = ['prod', 'dev']; // drive it (no kai-change — the host already knows)
- * </script>
- * ```
- */
-defineWebComponent<Props, Events>('kai-checkbox-group', {
-  options: [],
-  value: undefined,
-  name: undefined,
-  disabled: undefined,
-  label: undefined,
-}, (props, ctx) => {
-  const { element, dispatch, flag, expose } = ctx;
-
-  // Lift the selection into the facade and drive CheckboxGroup CONTROLLED so the host
-  // can read it (`el.values` / `:host([value])`) and set it after mount. Seed from the
-  // `value` property/attribute present on mount; nothing is auto-selected, because
-  // `options` normally arrives as a property AFTER upgrade (kai-select's structure).
-  const seed = (props.value as string | undefined) ?? element.getAttribute('value') ?? '';
-  const [values, setValues] = createSignal<string[]>(seed ? [seed] : []);
-  const first = () => values()[0] ?? '';
-
-  // Coerce anything arriving through the `value` setter (a JS assignment, or the
-  // attributeChangedCallback write-back the reflect effect below triggers) to a string,
-  // falling back to the live attribute when nullish so the write-back equals the signal
-  // and the guard absorbs it — no attr⇄prop feedback loop.
-  const coerce = (v: unknown): string =>
-    v == null ? (element.getAttribute('value') ?? '') : String(v);
-
-  // Apply a new selection and fire kai-change once (the user-toggle path).
-  const apply = (next: string[]) => {
-    const prev = untrack(values);
-    if (prev.length === next.length && prev.every((v, i) => v === next[i])) return;
-    setValues(next);
-    dispatch('kai-change', { value: next[0] ?? '', values: next });
-  };
-
-  Object.defineProperty(element, 'value', {
-    get: () => first(),
-    set: (v: unknown) => {
-      const next = coerce(v);
-      if (untrack(first) !== next) setValues(next ? [next] : []);
-    },
-    configurable: true,
-    enumerable: true,
-  });
-
-  // The multi-selection read/write side, spelled exactly as `<kai-select multiple>`
-  // spells it. `value` alone cannot represent a checkbox group's selection, and
-  // returning only the first ticked box would be a silent drop.
-  Object.defineProperty(element, 'values', {
-    get: () => values(),
-    set: (v: unknown) => setValues(Array.isArray(v) ? v.map(String) : []),
-    configurable: true,
-    enumerable: true,
-  });
-
-  // Reflect the first value → the `[value]` host attribute (for `:host([value])`).
-  createEffect(() => {
-    const v = first();
-    if (v) {
-      if (element.getAttribute('value') !== v) element.setAttribute('value', v);
-    } else if (element.hasAttribute('value')) {
-      element.removeAttribute('value');
-    }
-  });
-
-  expose({
-    /** Focus the group's first box. Not "the first ticked one", which is
-     *  `<kai-radio-group>`'s rule: a radio group is ONE tab stop that lands on the
-     *  selection, while every checkbox here is its own tab stop, so the entry point is
-     *  simply the top of the list. */
-    focus: (options?: FocusOptions) =>
-      element.shadowRoot?.querySelector<HTMLInputElement>('input[type="checkbox"]')?.focus(options),
-  });
-
-  return (
-    <CheckboxGroup
-      options={(props.options ?? []) as KaiCheckboxOption[]}
-      value={values()}
-      name={props.name as string | undefined}
-      disabled={flag('disabled')}
-      label={props.label as string | undefined}
-      onChange={(next) => apply(next)}
-    />
-  );
-});