@kitn.ai/ui 0.27.0 → 0.29.0

package/src/elements/checkbox.tsx

@@ -1,134 +0,0 @@
-import { createEffect, createSignal, untrack } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Checkbox } from '../ui/checkbox';
-
-interface Props extends Record<string, unknown> {
-  /** Controlled checked state. Settable and reflected to the `checked` attribute.
-   *  `el.checked = true` (or `<kai-checkbox checked>`) drives it; ticking the box
-   *  updates it and fires `kai-change`. Read `el.checked` for live state. */
-  checked?: boolean;
-  /** Initial checked state on mount (uncontrolled seed). Bare attribute
-   *  (`<kai-checkbox default-checked>`) turns it on. */
-  defaultChecked?: boolean;
-  /** The mixed state, for a parent box whose children are partly ticked. Visual
-   *  plus an accessibility hint: the box still reports `checked === false`. */
-  indeterminate?: boolean;
-  /** Disable interaction. */
-  disabled?: boolean;
-  /** Set the native `required` attribute, and nothing more. Whether an unticked box
-   *  is an error is the application's rule, not the kit's. */
-  required?: boolean;
-  /** Accessible label. The visible text beside the box is the consumer's to render. */
-  label?: string;
-  /** Form-control name (paired with `value`). */
-  name?: string;
-  /** Submitted value when checked (paired with `name`). Defaults to `'on'`. */
-  value?: string;
-}
-
-/** Events fired by `<kai-checkbox>`. */
-interface Events {
-  /** The box was ticked or unticked. */
-  'kai-change': { checked: boolean };
-}
-
-/**
- * `<kai-checkbox>` — a checkbox over a real `<input type="checkbox">`. Drive/read
- * its state with the `checked` property (settable + reflected to the `checked`
- * attribute, so `:host([checked])` and `el.checked` see live state); seed the
- * initial state with `default-checked` and read changes from `kai-change`.
- *
- * ```html
- * <label>
- *   <kai-checkbox default-checked label="Stream responses"></kai-checkbox>
- *   Stream responses
- * </label>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const box = document.querySelector('kai-checkbox');
- *   box.addEventListener('kai-change', (e) => console.log(e.detail.checked));
- *   box.checked = false;    // drive it (no kai-change — the host already knows)
- *   box.indeterminate = true;
- *   box.toggle();           // flip it (fires kai-change)
- * </script>
- * ```
- */
-defineWebComponent<Props, Events>('kai-checkbox', {
-  checked: undefined,
-  defaultChecked: undefined,
-  indeterminate: undefined,
-  disabled: undefined,
-  required: undefined,
-  label: undefined,
-  name: undefined,
-  value: undefined,
-}, (props, ctx) => {
-  const { element, dispatch, flag, expose } = ctx;
-
-  // Lift the on/off state into the facade and drive Checkbox CONTROLLED so the host
-  // can read it (`el.checked` / `:host([checked])`) and set it after mount. Seed from
-  // `defaultChecked` (or a bare `checked` attribute present on mount). This is
-  // kai-switch's structure, deliberately — same contract, same failure modes.
-  const [checked, setChecked] = createSignal(flag('defaultChecked') || flag('checked'));
-
-  // Coerce anything arriving through the `checked` setter (a JS assignment, or the
-  // write-back `attributeChangedCallback` fires when the attribute changes) to a
-  // boolean, falling back to attribute presence to match `flag`'s semantics. The
-  // `undefined` write-back `toggleAttribute` triggers thus resolves to the attribute
-  // just written, equals the signal, and is absorbed by the guard below — no attr⇄prop
-  // feedback loop.
-  const coerce = (v: unknown): boolean =>
-    v === true ? true
-      : v === false ? false
-        : element.hasAttribute('checked') && element.getAttribute('checked') !== 'false';
-
-  // Apply a new checked state and fire kai-change once (the user path). No-op while
-  // disabled.
-  const apply = (next: boolean) => {
-    if (flag('disabled')) return;
-    if (untrack(checked) === next) return;
-    setChecked(next);
-    dispatch('kai-change', { checked: next });
-  };
-
-  // Reads return LIVE state; host writes drive it WITHOUT firing kai-change — the
-  // host already knows what it set. The equality guard kills the reflect write-back.
-  Object.defineProperty(element, 'checked', {
-    get: () => checked(),
-    set: (v: unknown) => { const next = coerce(v); if (untrack(checked) !== next) setChecked(next); },
-    configurable: true,
-    enumerable: true,
-  });
-
-  // Reflect internal checked → the `[checked]` host attribute (for `:host([checked])`).
-  createEffect(() => {
-    const c = checked();
-    if (c !== element.hasAttribute('checked')) element.toggleAttribute('checked', c);
-  });
-
-  expose({
-    /** Flip the box and fire `kai-change` (no-op while disabled). */
-    toggle: () => apply(!untrack(checked)),
-    /** Focus the inner input (the host element can't reach it). */
-    focus: (options?: FocusOptions) =>
-      element.shadowRoot?.querySelector<HTMLInputElement>('input[type="checkbox"]')?.focus(options),
-  });
-
-  return (
-    <>
-      {/* Base sets `:host{display:block}`; a checkbox flows inline beside its text. */}
-      <style>{':host{display:inline-flex}'}</style>
-      <Checkbox
-        checked={checked()}
-        indeterminate={flag('indeterminate')}
-        disabled={flag('disabled')}
-        required={flag('required')}
-        aria-label={props.label as string | undefined}
-        aria-checked={flag('indeterminate') ? 'mixed' : undefined}
-        name={props.name as string | undefined}
-        value={(props.value as string | undefined) ?? 'on'}
-        onChange={(e) => apply(e.currentTarget.checked)}
-      />
-    </>
-  );
-});

package/src/elements/checkpoint.tsx

@@ -1,47 +0,0 @@
-import { Show } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Checkpoint, CheckpointIcon, CheckpointTrigger } from '../components/checkpoint';
-
-interface Props extends Record<string, unknown> {
-  /** Optional text beside the icon. */
-  label?: string;
-  /** Tooltip on hover. */
-  tooltip?: string;
-  /** Visual button style. */
-  variant?: 'ghost' | 'default' | 'outline';
-  /** Button size (use an `icon*` size for an icon-only checkpoint). */
-  size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
-}
-
-/** Events fired by `<kai-checkpoint>`. */
-interface Events {
-  /** The checkpoint was clicked. */
-  'kai-select': void;
-}
-
-/**
- * `<kai-checkpoint>` — a bookmark/checkpoint button (optional tooltip + label).
- * Emits `select`.
- */
-defineWebComponent<Props, Events>('kai-checkpoint', {
-  label: undefined,
-  tooltip: undefined,
-  variant: 'ghost',
-  size: 'sm',
-}, (props, { dispatch }) => (
-  <Checkpoint>
-    <CheckpointTrigger
-      tooltip={props.tooltip}
-      // Icon-only (no visible label) needs an accessible name: prefer the
-      // tooltip text, else a sensible default. With a visible label, the text
-      // is the name — leave aria-label unset so it isn't duplicated.
-      aria-label={props.label ? undefined : (props.tooltip ?? 'Checkpoint')}
-      variant={props.variant}
-      size={props.size}
-      onClick={() => dispatch('kai-select')}
-    >
-      <CheckpointIcon />
-      <Show when={props.label}><span class="ml-1.5">{props.label}</span></Show>
-    </CheckpointTrigger>
-  </Checkpoint>
-));

package/src/elements/choice.tsx

@@ -1,100 +0,0 @@
-import { defineWebComponent } from './define';
-import { ChoiceCard, type ChoiceCardData, type ChoiceController } from '../components/choice-card';
-import type { CardResolution } from '../primitives/card-contract';
-
-interface Props extends Record<string, unknown> {
-  /** The choice definition (the CardEnvelope.data). Set as a JS PROPERTY:
-   *  `el.data = { prompt, options:[…], allowOther?, submitLabel? }`. Import
-   *  `ChoiceCardData` from `@kitn.ai/ui` for the full shape. */
-  data?: ChoiceCardData;
-  /** Stable card id correlating every emitted CardEvent. Attribute: `card-id`. */
-  cardId?: string;
-  /** Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. */
-  heading?: string;
-  /** Set when the user resolved this card; renders the read-only view. Property:
-   *  `el.resolution = { kind:'action', action:'…' }`. */
-  resolution?: Record<string, unknown>;
-  /** Controlled selection: the selected option id. When set, the consumer owns
-   *  the current pick (RadioGroup `value`). Attribute: `value`. */
-  value?: string;
-  /** Option id to pre-select on mount (uncontrolled seed). Attribute: `default-value`. */
-  defaultValue?: string;
-  /** Disable the whole radiogroup + Submit (e.g. while the agent is busy).
-   *  Attribute: `disabled`. */
-  disabled?: boolean;
-}
-
-/** Events fired by `<kai-choice>`. (The terminal submit/dismiss/reopen flow is
- *  emitted via the bubbling `kai-card` contract event — listen for `kai-card`.) */
-interface Events {
-  /** The selection changed BEFORE submit (a row click or the `select()` method).
-   *  Distinct from the terminal `action` verb on the `kai-card` contract event. */
-  'kai-value-change': { value: string };
-}
-
-/**
- * `<kai-choice>` — a single-select **"pick one of N rich options"** card (set via the
- * `data` property): a prompt + a radiogroup of list rows. Clicking a row **selects** it
- * (no emit, fires `kai-value-change`); the **Submit** button below then emits the Card
- * contract's **`action`** verb up a bubbling **`kai-card`** CustomEvent (`{ kind:'action',
- * cardId, action: option.id, payload? }`) and resolves the card so the same pick can't
- * double-fire. An optional `allowOther` free-text escape appends a selectable "Other…" row
- * that reveals an inline input; the same Submit emits `action:'__other__'` with `{ text }`.
- * Also emits `ready` on mount and `error` for a malformed definition (inline error). Routes
- * through a `CardProvider` when present, else the bubbling `kai-card` event. Isolated in
- * Shadow DOM; theme-aware via the shared tokens.
- *
- * Supports controlled selection (`value`), an uncontrolled seed (`defaultValue`), a
- * group-level `disabled`, and instance methods `focus()`/`select(id)`/`send()`/
- * `dismiss()`/`reopen()`.
- */
-defineWebComponent<Props, Events>(
-  'kai-choice',
-  {
-    data: undefined,
-    cardId: undefined,
-    heading: undefined,
-    resolution: undefined,
-    value: undefined,
-    defaultValue: undefined,
-    disabled: undefined,
-  },
-  (props, { element, dispatch, flag, expose }) => {
-    // Pattern C: the ChoiceCard owns selection/submit/dismiss state and hands up a
-    // controller; the facade captures it and exposes delegating methods. The card's
-    // own paths still fire (select → kai-value-change; send → kai-card `action`;
-    // dismiss/reopen → kai-card `dismiss`/`reopen`).
-    let controller: ChoiceController | undefined;
-    expose({
-      /** Focus the radiogroup roving tab stop (or the Other input when selected). */
-      focus: (options?: FocusOptions) => controller?.focus(options),
-      /** Select an option by id locally: no emit, fires kai-value-change (same as a
-       *  row click). Lets a consumer pre-highlight or drive selection externally. */
-      select: (optionId: string) => controller?.select(optionId),
-      /** Submit the current selection: emits the `action` verb on kai-card and
-       *  resolves the card (single-shot). Named `send`, not `submit`, per the shared
-       *  vocabulary. */
-      send: () => controller?.send(),
-      /** Trigger the dismiss path: emits `dismiss` on kai-card and optimistically
-       *  collapses the card to its re-openable stub. */
-      dismiss: () => controller?.dismiss(),
-      /** Re-open a dismissed card from its stub: emits `reopen` on kai-card. */
-      reopen: () => controller?.reopen(),
-    });
-
-    return (
-      <ChoiceCard
-        data={props.data}
-        cardId={props.cardId ?? (element.id || 'kai-choice')}
-        heading={props.heading}
-        resolution={props.resolution as CardResolution | undefined}
-        value={props.value}
-        defaultValue={props.defaultValue}
-        disabled={flag('disabled')}
-        onValueChange={(value) => dispatch('kai-value-change', { value })}
-        controllerRef={(c) => (controller = c)}
-        hostElement={element}
-      />
-    );
-  },
-);

package/src/elements/coachmark.tsx

@@ -1,90 +0,0 @@
-import { defineWebComponent } from './define';
-import { Coachmark, type CoachmarkController } from '../components/coachmark';
-import { wireDisclosure } from './disclosure';
-
-interface Props extends Record<string, unknown> {
-  /** Drive/observe open state (Shoelace-style: settable + reflected to the `open`
-   *  attribute; the element still self-manages). Set `el.open = true`, or
-   *  `<kai-coachmark open>`; listen for `kai-open-change`. */
-  open?: boolean;
-  /** Initial open state on mount (uncontrolled seed). */
-  defaultOpen?: boolean;
-  /** The bold title. Named `headline` because `title` collides with the global
-   *  `HTMLElement.title` attribute (it throws at registration). */
-  headline?: string;
-  /** A small badge pill beside the headline (e.g. "New"). */
-  badge?: string;
-  /** Floating placement relative to the anchor (default `bottom`). */
-  placement?: string;
-  /** Color tone: `primary` (default, theme accent), `info` (blue), `success`
-   *  (green), `warning` (amber), or `error` (red), reusing the kit's tool hues. */
-  tone?: 'primary' | 'info' | 'success' | 'warning' | 'error';
-  /** Render the arrow that points at the anchor (default `true`). Set
-   *  `arrow="false"` for a plain bubble with no pointer. */
-  arrow?: boolean;
-}
-
-/** Events fired by `<kai-coachmark>`. */
-interface Events {
-  /** The × dismiss button was pressed. The consumer records that this hint was
-   *  seen so it won't show again. */
-  'kai-dismiss': Record<string, never>;
-  /** The coachmark opened or closed (a method, the ×, or a driven `open`). */
-  'kai-open-change': { open: boolean };
-}
-
-/**
- * `<kai-coachmark>` — an anchored onboarding hint bubble with an arrow. It WRAPS
- * a trigger (the default slot) and points a primary-colored bubble at it: a small
- * `badge` pill, a bold `headline`, the `content` slot body, and a dismiss ×.
- *
- * ```html
- * <kai-coachmark default-open headline="Cowork has a new home" badge="New">
- *   <button>Cowork</button>
- *   <span slot="content">Chat with Claude or switch to Cowork from here.</span>
- * </kai-coachmark>
- * <script type="module">
- *   document.querySelector('kai-coachmark')
- *     .addEventListener('kai-dismiss', () => localStorage.setItem('cowork-hint', 'seen'));
- * </script>
- * ```
- *
- * Open state is the standard disclosure surface: settable+reflecting `open`,
- * `kai-open-change`, and `show()`/`hide()`/`toggle()`; seed with `default-open`.
- * Parts: `bubble` · `arrow` · `badge` · `title` · `dismiss`.
- */
-defineWebComponent<Props, Events>('kai-coachmark', {
-  open: undefined,
-  defaultOpen: undefined,
-  headline: undefined,
-  badge: undefined,
-  placement: undefined,
-  tone: undefined,
-  arrow: true,
-}, (props, ctx) => {
-  const { flag, dispatch } = ctx;
-  let api: CoachmarkController | undefined;
-
-  // The standard disclosure surface: settable+reflecting `open`, kai-open-change,
-  // show/hide/toggle. See ./disclosure. This is the SOLE emitter of kai-open-change.
-  wireDisclosure(ctx, () => api, () => props.open);
-
-  // headline/badge are scalar string props (NOT slots) — pass through directly so
-  // the component's own `Show when={…}` gating drives whether each region renders.
-  // The body is the `content` slot; an empty `<slot>` renders nothing.
-  return (
-    <Coachmark
-      defaultOpen={flag('defaultOpen')}
-      arrow={flag('arrow')}
-      placement={props.placement as never}
-      tone={props.tone as 'primary' | 'info' | 'success' | 'warning' | 'error' | undefined}
-      headline={props.headline as string | undefined}
-      badge={props.badge as string | undefined}
-      content={<slot name="content" />}
-      controllerRef={(a) => (api = a)}
-      onDismiss={() => dispatch('kai-dismiss', {})}
-    >
-      <slot />
-    </Coachmark>
-  );
-});

package/src/elements/code-block.tsx

@@ -1,60 +0,0 @@
-import { defineWebComponent } from './define';
-import { CodeBlock, CodeBlockCode } from '../components/code-block';
-import { ChatConfig, useChatConfig, type ProseSize } from '../primitives/chat-config';
-
-interface Props extends Record<string, unknown> {
-  /** The source code to render. */
-  code: string;
-  /** Language grammar (e.g. `js`, `python`). Defaults to `tsx`. */
-  language?: string;
-  /** Shiki theme name. */
-  codeTheme?: string;
-  /** Disable syntax highlighting (renders plain text, no Shiki). */
-  codeHighlight?: boolean;
-  /**
-   * Show the copy button. **Defaults to ON**, because this element is documented
-   * as shipping one. Opt out with `copy="false"` or `el.copy = false`.
-   */
-  copy?: boolean;
-  /** Code text sizing. */
-  proseSize?: ProseSize;
-}
-
-/**
- * `<kai-code-block>` — one syntax-highlighted code block (with a copy button).
- * Code via the `code` property; `language`/`code-theme` via attributes.
- *
- * The copy button is ON by default and writes the raw `code` property, never the
- * highlighted markup. Turn it off with `copy="false"`. Style it via
- * `kai-code-block::part(copy)`.
- */
-defineWebComponent<Props>('kai-code-block', {
-  code: '',
-  language: undefined,
-  codeTheme: 'github-dark-dimmed',
-  codeHighlight: true,
-  copy: true,
-  proseSize: 'sm',
-}, (props, { flag }) => {
-  const outer = useChatConfig();
-  return (
-    <ChatConfig
-      proseSize={props.proseSize}
-      codeTheme={props.codeTheme}
-      codeHighlight={flag('codeHighlight')}
-      portalMount={outer.portalMount()}
-    >
-      {/* The ELEMENT opts in; the Solid `CodeBlock` default stays OFF so markdown and
-          artifact are untouched. `copyText` is the raw property — the button must
-          never copy what Shiki produced. `copy` is NOT reflected, matching
-          `codeHighlight` beside it: reflecting a default-ON flag would stamp `copy=""`
-          on every instance for no benefit, and the runtime-attribute hazard that
-          earned `reflectFlag` elsewhere needs a BARE attribute, which is a no-op on a
-          flag that is already on. The meaningful spelling, `copy="false"`, is a real
-          prop change and is pinned as one. */}
-      <CodeBlock copy={flag('copy')} copyText={props.code}>
-        <CodeBlockCode code={props.code} language={props.language} />
-      </CodeBlock>
-    </ChatConfig>
-  );
-});

package/src/elements/command.tsx

@@ -1,197 +0,0 @@
-import { createEffect, createMemo, createSignal, createUniqueId, on } from 'solid-js';
-import { CommandList, type CommandGroup } from '../ui/command';
-import { defineWebComponent } from './define';
-import type { KaiCommandItem } from './element-data-types';
-
-// The item shape lives in ./element-data-types so the ROOT entry can re-export it
-// (a per-element module's shipped .d.ts is `export {};`). Re-exported here so
-// `import type { KaiCommandItem } from './command'` keeps working.
-export type { KaiCommandItem } from './element-data-types';
-
-interface Props extends Record<string, unknown> {
-  /** Flat list of items. Set as a JS property, not an HTML attribute. */
-  items?: KaiCommandItem[];
-  /** Placeholder text for the search input. */
-  placeholder?: string;
-  /** Label shown when no items match the current query. */
-  emptyLabel?: string;
-}
-
-interface Events {
-  /** Fired when the user selects an item (click or Enter). */
-  'kai-select': { id: string };
-  /** Fired on every keystroke in the search input. */
-  'kai-query-change': { value: string };
-  /** Fired when the highlighted/active item changes, via Arrow keys or when
-   *  filtering re-clamps the active row. `id` is the newly active item's id, or
-   *  `undefined` when no item is active (e.g. the filtered list is empty). Lets a
-   *  host preview the active item without committing a selection. */
-  'kai-active-change': { id: string | undefined };
-}
-
-/**
- * `<kai-command>` — a grouped, filterable command/mention palette.
- *
- * Set the `items` property in JavaScript (array, not attribute), listen for
- * `kai-select` to know which item was picked, and `kai-query-change` to mirror
- * the search query to your own logic (e.g. async server-side filtering).
- *
- * ```html
- * <kai-command placeholder="Search…"></kai-command>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const el = document.querySelector('kai-command');
- *   el.items = [
- *     { id: 'foo', label: 'Foo', icon: 'search', shortcut: 'Mod+K', group: 'Recent' },
- *   ];
- *   el.addEventListener('kai-select', (e) => console.log(e.detail.id));
- * </script>
- * ```
- */
-defineWebComponent<Props, Events>('kai-command', {
-  items: undefined,
-  placeholder: undefined,
-  emptyLabel: undefined,
-}, (props, { dispatch, element, expose }) => {
-  const listboxId = createUniqueId();
-  const [query, setQuery] = createSignal('');
-  const [activeId, setActiveId] = createSignal<string | undefined>(undefined);
-
-  /** Items cast to the correct type; defaults to empty array. */
-  const allItems = () => (props.items as KaiCommandItem[] | undefined) ?? [];
-
-  /** Items filtered by the current query (label or description, case-insensitive). */
-  const filteredItems = createMemo<KaiCommandItem[]>(() => {
-    const q = query().toLowerCase();
-    if (!q) return allItems();
-    return allItems().filter(
-      (item) =>
-        item.label.toLowerCase().includes(q) ||
-        (item.description?.toLowerCase().includes(q) ?? false),
-    );
-  });
-
-  /** Filtered items grouped by `group`, preserving first-appearance order. */
-  const groupedItems = createMemo<CommandGroup[]>(() => {
-    const groups: CommandGroup[] = [];
-    for (const item of filteredItems()) {
-      let g = groups.find((x) => x.group === item.group);
-      if (!g) {
-        g = { group: item.group, items: [] };
-        groups.push(g);
-      }
-      g.items.push({ id: item.id, label: item.label, icon: item.icon, description: item.description, shortcut: item.shortcut });
-    }
-    return groups;
-  });
-
-  /** Flat ordered array of filtered item ids — used for keyboard navigation. */
-  const flatIds = createMemo<string[]>(() => filteredItems().map((item) => item.id));
-
-  /** Clamp/reset activeId when the filtered list changes. */
-  createEffect(() => {
-    const ids = flatIds();
-    const current = activeId();
-    if (!current || !ids.includes(current)) {
-      setActiveId(ids[0]);
-    }
-  });
-
-  /** Mirror the active/highlighted item out as `kai-active-change` whenever it
-   *  changes (Arrow keys or a filter-driven re-clamp). Skips the initial settle
-   *  by only firing when the value actually differs from the previous one. */
-  createEffect(on(activeId, (id, prev) => {
-    if (id !== prev) dispatch('kai-active-change', { id });
-  }));
-
-  function select(id: string) {
-    dispatch('kai-select', { id });
-  }
-
-  function handleInput(e: Event) {
-    const value = (e.currentTarget as HTMLInputElement).value;
-    setQuery(value);
-    dispatch('kai-query-change', { value });
-  }
-
-  function handleKeyDown(e: KeyboardEvent) {
-    const ids = flatIds();
-    if (!ids.length) return;
-
-    const current = activeId();
-    const idx = current !== undefined ? ids.indexOf(current) : -1;
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setActiveId(ids[(idx + 1) % ids.length]);
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      setActiveId(ids[(idx - 1 + ids.length) % ids.length]);
-    } else if (e.key === 'Enter') {
-      e.preventDefault();
-      const id = activeId();
-      if (id !== undefined) select(id);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      setQuery('');
-      dispatch('kai-query-change', { value: '' });
-    }
-  }
-
-  // ── Imperative API (instance methods on the host) ──────────────────────────
-  // Counterpart to the kai-* events: lets a host make the palette type-ready and
-  // reset its query without reaching into the shadow root.
-  expose({
-    /** Focus the search combobox input inside the shadow root so the palette is
-     *  type-ready on demand (Shadow-DOM autofocus is unreliable, so hosts call
-     *  this after opening the palette). */
-    focus: (options?: FocusOptions) =>
-      element.shadowRoot
-        ?.querySelector<HTMLInputElement>('input[role="combobox"], input')
-        ?.focus(options),
-    /** Blur the focused search input. */
-    blur: () =>
-      element.shadowRoot
-        ?.querySelector<HTMLInputElement>('input[role="combobox"], input')
-        ?.blur(),
-    /** Reset the search query to empty, re-showing all items, and fire
-     *  `kai-query-change` with `''`. Mirrors the Escape-key behavior. */
-    clear: () => {
-      setQuery('');
-      dispatch('kai-query-change', { value: '' });
-    },
-  });
-
-  return (
-    <div class="flex flex-col overflow-hidden">
-      <div class="border-b border-border px-3 py-2">
-        <input
-          type="text"
-          role="combobox"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-autocomplete="list"
-          aria-controls={listboxId}
-          value={query()}
-          placeholder={(props.placeholder as string | undefined) ?? 'Search…'}
-          // No `focus-visible:outline-none` here. It used to suppress the base
-          // focus ring and put nothing in its place, so keyboard users had no
-          // indication of where they were in the palette.
-          class="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground"
-          onInput={handleInput}
-          onKeyDown={handleKeyDown}
-        />
-      </div>
-      <div class="overflow-y-auto max-h-[320px]">
-        <CommandList
-          id={listboxId}
-          ariaLabel="Results"
-          groups={groupedItems()}
-          activeId={activeId()}
-          onSelect={select}
-          emptyLabel={(props.emptyLabel as string | undefined) ?? 'No results'}
-        />
-      </div>
-    </div>
-  );
-});