@kitn.ai/ui 0.27.0 → 0.29.0

package/src/elements/card.tsx

@@ -1,133 +0,0 @@
-import { createSignal, onCleanup, onMount } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Card, type CardAppearance, type CardOrientation } from '../ui/card';
-
-interface Props extends Record<string, unknown> {
-  /** Surface treatment: `outlined` (default) | `filled` | `plain` | `accent`.
-   *  Attribute: `appearance`. */
-  appearance?: CardAppearance;
-  /** `vertical` (default, media on top) | `horizontal` (media at the start) |
-   *  `responsive` (horizontal when the card's container is wide enough, else vertical,
-   *  via a container query on the card's own width). Attribute: `orientation`. */
-  orientation?: CardOrientation;
-  /** The card width below which a `responsive` card collapses to vertical and the
-   *  footer actions stack. A CSS length; default `28rem`. Attribute: `collapse`. */
-  collapse?: string;
-  /** Tighter spacing for dense lists. Attribute: `dense`. */
-  dense?: boolean;
-  /** Show a close (×) that hides the card and emits `kai-dismiss`. Attribute:
-   *  `dismissible`. Off by default. */
-  dismissible?: boolean;
-  /** Render the whole card as a link. Attribute: `href`. Wins over `clickable`. */
-  href?: string;
-  /** `target` for the `href` anchor. Attribute: `target`. */
-  target?: string;
-  /** `rel` for the `href` anchor. Attribute: `rel`. */
-  rel?: string;
-  /** Make the whole card a button (`role="button"`, Enter/Space, hover affordance)
-   *  that emits `kai-card-click`. Attribute: `clickable`. Ignored when `href` is set. */
-  clickable?: boolean;
-}
-
-/** Events fired by `<kai-card>`. */
-interface Events {
-  /** The card was dismissed via its × (it also hides itself). */
-  'kai-dismiss': void;
-  /** A `clickable`/`href` card was activated (click, or Enter/Space). */
-  'kai-card-click': void;
-}
-
-/** The named slots whose occupancy gates a card region. An empty `<slot>` is
- *  always a truthy node, so the facade tracks which are actually filled and only
- *  passes those regions to the primitive. */
-const SLOT_NAMES = ['media', 'header', 'header-actions', 'footer', 'footer-actions'] as const;
-type SlotName = (typeof SLOT_NAMES)[number];
-
-/**
- * `<kai-card>` — the kit's presentational card, modeled on the WebAwesome card:
- * ONE element whose flexibility comes from a few structural slots, `appearance`
- * and `orientation` variants, themeable `::part`s, and a single
- * `--kai-card-spacing` knob. The title/description are not slots — they are body
- * (default slot) or `slot="header"` content you mark up yourself.
- *
- * Slots: `media` (full-bleed image/video/illustration), `header` + `header-actions`,
- * the default slot (body), `footer` + `footer-actions`.
- *
- * Behaviors (all OFF by default): `dismissible` (× → `kai-dismiss`), and
- * `href`/`clickable` (whole card a link/button → `kai-card-click`). A
- * clickable/href card must NOT also contain action buttons.
- *
- * ```html
- * <kai-card appearance="filled" dismissible>
- *   <div slot="media"><img src="…" alt="…" /></div>
- *   <h3 slot="header">2× usage</h3>
- *   Do more with a higher session limit.
- *   <kai-button slot="footer-actions">Start task</kai-button>
- * </kai-card>
- * ```
- */
-defineWebComponent<Props, Events>('kai-card', {
-  appearance: 'outlined',
-  orientation: 'vertical',
-  collapse: '28rem',
-  dense: false,
-  dismissible: false,
-  href: undefined,
-  target: undefined,
-  rel: undefined,
-  clickable: false,
-}, (props, { element, dispatch, flag }) => {
-  // Track which named slots are filled, plus whether the default slot (body) has
-  // any content. Re-read on child mutations so streamed/late content lights up
-  // its region. An unfilled region is never rendered (no stray padding/divider).
-  const [filled, setFilled] = createSignal<Record<SlotName, boolean>>({
-    'media': false, 'header': false, 'header-actions': false, 'footer': false, 'footer-actions': false,
-  });
-  const [hasBody, setHasBody] = createSignal(false);
-
-  onMount(() => {
-    const read = () => {
-      const next = {} as Record<SlotName, boolean>;
-      for (const name of SLOT_NAMES) next[name] = !!element.querySelector(`:scope > [slot="${name}"]`);
-      setFilled(next);
-      // Body = any direct child without a slot attribute (element, or non-blank text).
-      setHasBody(
-        Array.from(element.childNodes).some(
-          (n) =>
-            (n.nodeType === Node.ELEMENT_NODE && !(n as Element).hasAttribute('slot')) ||
-            (n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim() !== ''),
-        ),
-      );
-    };
-    read();
-    const observer = new MutationObserver(read);
-    observer.observe(element, { childList: true, characterData: true, subtree: true });
-    onCleanup(() => observer.disconnect());
-  });
-
-  const region = (name: SlotName) => (filled()[name] ? <slot name={name} /> : undefined);
-
-  return (
-    <Card
-      appearance={props.appearance as CardAppearance}
-      orientation={props.orientation as CardOrientation}
-      collapse={props.collapse as string}
-      dense={flag('dense')}
-      dismissible={flag('dismissible')}
-      href={props.href}
-      target={props.target}
-      rel={props.rel}
-      clickable={flag('clickable')}
-      onDismiss={() => dispatch('kai-dismiss')}
-      onCardClick={() => dispatch('kai-card-click')}
-      media={region('media')}
-      header={region('header')}
-      headerActions={region('header-actions')}
-      footer={region('footer')}
-      footerActions={region('footer-actions')}
-      hasBody={hasBody()}
-    >
-      <slot />
-    </Card>
-  );
-});

package/src/elements/cards.tsx

@@ -1,266 +0,0 @@
-// src/elements/cards.tsx
-// <kai-cards> — the web-component list dispatcher. Renders one child kai-* element per
-// envelope (by type→tag), propagates its theme, and routes children's bubbling
-// `kai-card` events through an optional `policy`. The raw events keep bubbling past
-// <kai-cards> (composed) so document-level listeners still work. Unknown types render
-// the Solid CardFallback inline and emit a contract `error`.
-import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, onMount, type JSX } from 'solid-js';
-import { Dynamic } from 'solid-js/web';
-import { defineWebComponent } from './define';
-import type { CardEnvelope, CardEvent, CardPolicy, CardResolution } from '../primitives/card-contract';
-import { CARD_EVENT_NAME, emitCardEvent, routeCardEvent } from '../primitives/card-routing';
-import { BUILTIN_CARD_TAGS, mergeCardTags } from '../primitives/card-registry';
-import type { JsonSchema } from '../primitives/card-validate';
-import { cardValidationMessage, validateCardData, type CardValidationReport } from '../primitives/card-validate-cards';
-import { hasConsumerSchema } from '../components/card-renderer';
-import { CardFallback } from '../components/card-fallback';
-// Register the built-in child card elements so that importing <kai-cards> is self-contained.
-import './form';
-import './confirm-card';
-import './tasks';
-import './choice';
-import './link-preview';
-import './embed';
-
-interface Props extends Record<string, unknown> {
-  /** The stream of card envelopes to render. Set as a JS PROPERTY: `el.cards = [...]`. */
-  cards?: CardEnvelope[];
-  /** Optional type→tag overrides/additions (merged over the built-ins). Property: `el.types`.
-   *  Typed as a plain string map (not the `CardTagMap` alias) so the generated React
-   *  wrapper inlines it instead of emitting an unresolved named type. */
-  types?: Record<string, string>;
-  /** JSON Schemas for the card types this app renders, keyed by envelope type. The
-   *  companion of `types`, 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.schemas = {
-   *  '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, matching
-   *  `mergeCardTags`, where your entry is spread over ours.
-   *
-   *  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. See
-   *  `CardSchemaMap` in components/card-renderer.tsx. */
-  schemas?: Record<string, object>;
-  /** Optional CardPolicy handling child events. Property: `el.policy`. */
-  policy?: CardPolicy;
-  /** Validate each envelope's `data` against the schema for its type before
-   *  rendering it, using a built-in's own schema or yours from `schemas`. Default
-   *  `true`; set `validate-cards="false"` (or `el.validateCards = false`) to opt
-   *  out. A hard failure (wrong type, a missing required field) renders a
-   *  diagnostic naming the field instead of the card; a soft failure (bounds)
-   *  renders the card unchanged. Both emit a contract `error` event. On in
-   *  production too: a model emitting a bad shape is a production failure mode,
-   *  so stripping the check there would hide it from exactly the person who needs
-   *  to see it. */
-  validateCards?: boolean;
-}
-
-/** Events fired by `<kai-cards>`. */
-interface Events {
-  /** A child card transitioned to a resolved/deferred state (an action was chosen, a
-   *  form/tasks submission landed, or it was dismissed). Re-emitted off the host as
-   *  a non-bubbling convenience event so a consumer can observe resolution centrally
-   *  without diffing the cards array. `detail` = `{ cardId, resolution }`. (A
-   *  `reopen` un-resolves a card and has no `CardResolution`, so it does NOT fire
-   *  this; observe reopen via the underlying bubbling `kai-card` event.) */
-  'kai-card-resolved': { cardId: string; resolution: CardResolution };
-}
-
-/** Map a terminal/deferred child CardEvent to the CardResolution it produces. Returns
- *  `undefined` for events that don't resolve a card (ready/error/etc.) and for
- *  `reopen` (which clears resolution → no CardResolution to convey). */
-function resolutionFromEvent(e: CardEvent): CardResolution | undefined {
-  switch (e.kind) {
-    case 'action':
-      return { kind: 'action', action: e.action, payload: e.payload };
-    case 'submit':
-      return { kind: 'submit', data: e.data };
-    case 'dismiss':
-      return { kind: 'dismissed' };
-    default:
-      return undefined;
-  }
-}
-
-/** A single resolved child: a known kai-* tag (props set imperatively), a diagnostic
- *  for data that cannot render, or the unknown-type fallback. */
-function CardSlot(props: {
-  envelope: CardEnvelope;
-  tag?: string;
-  theme: string;
-  validate: boolean;
-  schemas?: Record<string, object>;
-  emit: (e: CardEvent) => void;
-}): JSX.Element {
-  let ref: HTMLElement | undefined;
-
-  // MIRRORS src/remote/provider-runtime.ts:139-147, the same way
-  // components/card-renderer.tsx does. The remote (iframe) transport has validated
-  // every incoming envelope since the contract landed and this native one did not,
-  // so the same bad payload was caught in one transport and rendered silently in the
-  // other. Two tiers: `hard` (nothing to render) replaces the card with a diagnostic
-  // naming the field, `soft` (bounds) renders the card untouched. Both emit `error`.
-  //
-  // OUR schema applies only to OUR element: `types` lets a consumer point a built-in
-  // card type at their own element (`el.types = { confirm: 'my-confirm-el' }`), and
-  // our schema describes our element's data, not theirs.
-  //
-  // A schema the CONSUMER registered through `el.schemas` runs the other way: they
-  // wrote it about their own card, and it is the shape their model was told to
-  // emit, so it applies whichever element draws the type. That is what validates a
-  // `pricing-table` — nobody's built-in, and until this prop existed the one card in
-  // the app that nothing checked. Same rule as components/card-renderer.tsx, which
-  // compares component identity where this compares tag identity; `hasConsumerSchema`
-  // is shared with it so the gate is spelled once.
-  const report = createMemo<CardValidationReport | null>(() => {
-    if (!props.validate) return null;
-    if (!hasConsumerSchema(props.schemas, props.envelope.type) && props.tag !== BUILTIN_CARD_TAGS[props.envelope.type]) {
-      return null;
-    }
-    // `schemas` is passed even when the gate opened on tag identity, so a consumer
-    // schema for a built-in type wins over ours — `schemaFor`'s rule.
-    return validateCardData(props.envelope.type, props.envelope.data, props.schemas as Record<string, JsonSchema> | undefined);
-  });
-  const invalid = () => report()?.tier === 'hard';
-
-  // Set object/string props as DOM properties on the custom element (reactive).
-  createEffect(() => {
-    if (!ref) return;
-    (ref as unknown as { data: unknown }).data = props.envelope.data;
-    (ref as unknown as { cardId: string }).cardId = props.envelope.id;
-    if (props.envelope.title != null) (ref as unknown as { heading: string }).heading = props.envelope.title;
-    (ref as unknown as { resolution: unknown }).resolution = props.envelope.resolution;
-    ref.setAttribute('theme', props.theme);
-    // Stable, queryable id so the host's getCard()/resolve() can find this child
-    // node without relying on the (private, scalar-only) cardId property reflecting.
-    ref.setAttribute('data-card-id', props.envelope.id);
-  });
-  // Hoist the unknown-type error emit to onMount to avoid side-effect-in-JSX lint issue
-  // and to ensure exactly one error fires.
-  onMount(() => {
-    if (!props.tag) {
-      props.emit({ kind: 'error', cardId: props.envelope.id, message: `Unsupported card type: ${props.envelope.type}` });
-    }
-  });
-  // One `error` per distinct problem, both tiers. Keyed on the message, not on
-  // mount: a consumer re-assigning `el.cards` per stream chunk hands this a new
-  // envelope object each time, so an identity-triggered emit would fire per chunk.
-  let lastEmitted: string | null = null;
-  createEffect(() => {
-    const r = report();
-    if (!props.tag) return; // an unknown TYPE already reported itself in onMount
-    if (!r || r.ok) {
-      lastEmitted = null;
-      return;
-    }
-    const message = cardValidationMessage(r);
-    if (message === lastEmitted) return;
-    lastEmitted = message;
-    props.emit({ kind: 'error', cardId: props.envelope.id, message });
-  });
-
-  return (
-    <Show
-      when={props.tag}
-      fallback={<CardFallback type={props.envelope.type} cardId={props.envelope.id} />}
-    >
-      {(tag) => (
-        <Show
-          when={invalid()}
-          // SOFT and valid both take this branch: the card renders as it does today.
-          fallback={<Dynamic component={tag()} ref={ref} />}
-        >
-          <CardFallback type={props.envelope.type} cardId={props.envelope.id} reason={report()!.summary} />
-        </Show>
-      )}
-    </Show>
-  );
-}
-
-defineWebComponent<Props, Events>(
-  'kai-cards',
-  { cards: undefined, types: undefined, schemas: undefined, policy: undefined, validateCards: true },
-  (props, { element, dispatch, expose }) => {
-    // Local working copy of the card list. The `cards` PROP still drives rendering
-    // (a new prop array re-seeds this), but holding a settable copy lets the
-    // imperative resolve()/dismiss() methods flip one envelope's resolution and
-    // re-render the matching child — the imperative twin of a consumer cloning +
-    // reassigning the whole cards array. `on(..., { defer: true })` re-seeds only on
-    // a genuine prop change (mount uses the createSignal seed below), preserving any
-    // pending imperative resolution until the consumer supplies a new prop array.
-    const [cards, setCards] = createSignal<CardEnvelope[]>(props.cards ?? []);
-    createEffect(on(() => props.cards, (next) => setCards(next ?? []), { defer: true }));
-
-    // Route children's bubbling kai-card events through the policy. Attached to the host
-    // element so composed events from each child's shadow root are caught as they bubble.
-    // The handler reads `props.policy` at EVENT time (not mount time) so setting
-    // `el.policy` after the element is in the DOM — the standard host pattern — works.
-    onMount(() => {
-      const handler = (e: Event) => {
-        const detail = (e as CustomEvent<CardEvent>).detail;
-        routeCardEvent(props.policy ?? {}, detail);
-        // Additionally re-emit the non-bubbling convenience event when a child
-        // transitions to a resolved/deferred state — alongside (not instead of) the
-        // existing policy routing + the raw bubbling kai-card event.
-        const resolution = resolutionFromEvent(detail);
-        if (resolution) dispatch('kai-card-resolved', { cardId: detail.cardId, resolution });
-      };
-      element.addEventListener(CARD_EVENT_NAME, handler as EventListener);
-      onCleanup(() => element.removeEventListener(CARD_EVENT_NAME, handler as EventListener));
-    });
-
-    // ── Imperative API (instance methods on the host) ──────────────────────────
-    // Pattern B: the methods operate on the facade's own working copy + the rendered
-    // child DOM nodes. Resolving an envelope sets its `resolution`, which flows down
-    // through CardSlot's effect (sets the child's `resolution` prop) so the child
-    // re-renders into its chromed read-only view.
-    const resolveCard = (cardId: string, resolution: CardResolution) =>
-      setCards((list) =>
-        list.some((env) => env.id === cardId)
-          ? list.map((env) => (env.id === cardId ? { ...env, resolution } : env))
-          : list,
-      );
-    expose({
-      /** Programmatically resolve a child card by id: set that envelope's
-       *  `resolution` so the child re-renders into its read-only/resolved view. The
-       *  imperative twin of the consumer mutating the cards array. No-op for an
-       *  unknown id. */
-      resolve: (cardId: string, resolution: CardResolution) => resolveCard(cardId, resolution),
-      /** Collapse a card to its re-openable stub from the host side. Convenience for
-       *  `resolve(cardId, { kind: 'dismissed' })`. */
-      dismiss: (cardId: string) => resolveCard(cardId, { kind: 'dismissed' }),
-      /** Return the live child element node for a card id (or null) so consumers can
-       *  call that card's own methods (focus/expand/…) without a shadow-DOM query. */
-      getCard: (cardId: string): HTMLElement | null =>
-        element.shadowRoot?.querySelector<HTMLElement>(`[data-card-id="${CSS.escape(cardId)}"]`) ?? null,
-    });
-
-    // Read the facade's REACTIVE `theme` prop, not element.getAttribute (which is
-    // not a tracked dependency) — otherwise a theme change on <kai-cards> after the
-    // children first render never propagates, leaving each child card stuck on its
-    // initial 'auto' (which follows the OS, so cards looked "always dark").
-    const theme = () => ((props as { theme?: string }).theme ?? 'auto');
-    const tags = () => mergeCardTags(props.types);
-    return (
-      <div class="flex flex-col gap-3">
-        <For each={cards()}>
-          {(env) => (
-            <CardSlot
-              envelope={env}
-              tag={tags()[env.type]}
-              theme={theme()}
-              validate={props.validateCards !== false}
-              schemas={props.schemas}
-              emit={(e) => emitCardEvent(element, e)}
-            />
-          )}
-        </For>
-      </div>
-    );
-  },
-);

package/src/elements/chain-of-thought.tsx

@@ -1,141 +0,0 @@
-import { createSignal, onMount, onCleanup } from 'solid-js';
-import { defineWebComponent } from './define';
-import {
-  ChainOfThoughtAccordion,
-  type ChainOfThoughtController,
-  type ChainOfThoughtStepData,
-  type ChainOfThoughtType,
-} from '../components/chain-of-thought';
-
-/**
- * A reasoning step descriptor.
- *
- * `id` is an OPTIONAL stable key. The Accordion's open-set keys (used by `value`,
- * `defaultValue`, the `kai-value-change` payload, and the index→key resolution
- * behind the methods) are `step.id` when present, else `String(index)`. Set `id`
- * if you want to drive/observe a step by a meaningful key rather than position.
- */
-type Step = ChainOfThoughtStepData;
-
-interface Props extends Record<string, unknown> {
-  /** The reasoning steps. Set as a JS property. Compound sub-parts collapse to
-   *  this one data model (Route 1). Each `{ label, content?, id? }`. Omit to
-   *  supply the steps as `<kai-step>` light-DOM children instead; when both are
-   *  present the property's steps come first. */
-  steps?: Step[];
-  /** Open mode: `'multiple'` (default, any number of steps open at once) or
-   *  `'single'` (at most one open; opening a step closes the others). */
-  type?: ChainOfThoughtType;
-  /** Controlled open step key(s). When set, it WINS over user interaction (the
-   *  consumer owns the open set). String in `single` mode, string[] in
-   *  `multiple` mode. Set as a JS property. */
-  value?: string | string[];
-  /** Uncontrolled INITIAL open step key(s), seeding which steps render
-   *  expanded. Ignored once `value` is provided. Set as a JS property. */
-  defaultValue?: string | string[];
-}
-
-/** Events fired by `<kai-chain-of-thought>`. */
-interface Events {
-  /** The open set changed, by user click OR an expand()/collapse()/toggle()
-   *  call. `value` is a string in `single` mode, a string[] in `multiple` mode.
-   *  (Maps Radix Accordion's onValueChange.) */
-  'kai-value-change': { value: string | string[] };
-}
-
-/** Parse a single light-DOM `<kai-step>` element into a `Step` descriptor.
- *  Attribute mapping:
- *   - `label`       → Step.label   (the always-visible heading)
- *   - `step-id`     → Step.id      (optional stable open-set key)
- *   - textContent   → Step.content (optional expandable detail)
- */
-export function parseKaiStepElement(n: Element): Step {
-  return {
-    label: n.getAttribute('label') ?? '',
-    content: n.textContent?.trim() || undefined,
-    id: n.getAttribute('step-id') ?? undefined,
-  };
-}
-
-/**
- * `<kai-chain-of-thought>` — step-by-step reasoning with connectors and
- * per-step collapsible detail. An Accordion: by default every step is
- * independently collapsible (`type="multiple"`, all closed); set
- * `type="single"` for one-open-at-a-time.
- *
- * **Route 1 — JS property:** set the `steps` property to an array of
- * `{ label, content?, id? }` objects.
- *
- * **Route 2 — declarative children:** compose `<kai-step>` child elements in
- * light DOM (hidden by the Shadow DOM — pure data carriers). The `label`
- * attribute becomes the step heading; `textContent` becomes the expandable
- * detail; an optional `step-id` becomes the open-set key. Children are merged
- * after any prop steps.
- *
- * ```html
- * <kai-chain-of-thought>
- *   <kai-step label="Understand the request">The user wants composable web components.</kai-step>
- *   <kai-step label="Design the API">Route 1: variant + flags; rich data via properties.</kai-step>
- *   <kai-step label="Build & verify"></kai-step>
- * </kai-chain-of-thought>
- * ```
- */
-defineWebComponent<Props, Events>('kai-chain-of-thought', {
-  steps: [],
-  type: undefined,
-  value: undefined,
-  defaultValue: undefined,
-}, (props, { element, dispatch, expose }) => {
-  // Read declarative <kai-step> children from light DOM.
-  // Shadow DOM with no <slot> suppresses them visually — they're invisible data carriers.
-  const [slottedSteps, setSlottedSteps] = createSignal<Step[]>([]);
-  onMount(() => {
-    const read = () => {
-      const nodes = [...element.querySelectorAll('kai-step')];
-      setSlottedSteps(nodes.map(parseKaiStepElement));
-    };
-    read();
-    const observer = new MutationObserver(read);
-    observer.observe(element, { childList: true, attributes: true, subtree: true });
-    onCleanup(() => observer.disconnect());
-  });
-
-  // Prop steps first; declarative children appended after.
-  const allSteps = () => [...(props.steps ?? []), ...slottedSteps()];
-
-  // ── Imperative API (instance methods on the host) ──────────────────────────
-  // Pattern C: the Accordion component owns the open-set; the facade captures its
-  // controller and exposes index-based methods. Every setter routes through the
-  // component's onValueChange (handleValueChange below) — the single emit point —
-  // so user clicks AND method calls both fire kai-value-change. No prop collisions:
-  // the only props are steps/type/value/defaultValue.
-  let controller: ChainOfThoughtController | undefined;
-  expose({
-    /** Open one step's detail by index, or ALL steps when called with no arg. In
-     *  `single` mode opening one step closes the others (expand-all keeps the
-     *  last). */
-    expand: (index?: number) => controller?.expand(index),
-    /** Close one step's detail by index, or ALL steps when called with no
-     *  arg. */
-    collapse: (index?: number) => controller?.collapse(index),
-    /** Flip one step's open state by index. */
-    toggle: (index?: number) => controller?.toggle(index),
-  });
-
-  // Single emit point for the open set — both user clicks and the methods above
-  // flow through the component's onValueChange to here.
-  const handleValueChange = (value: string | string[]) => {
-    dispatch('kai-value-change', { value });
-  };
-
-  return (
-    <ChainOfThoughtAccordion
-      steps={allSteps()}
-      type={props.type as ChainOfThoughtType | undefined}
-      value={props.value as string | string[] | undefined}
-      defaultValue={props.defaultValue as string | string[] | undefined}
-      onValueChange={handleValueChange}
-      controllerRef={(c) => (controller = c)}
-    />
-  );
-});

package/src/elements/chat-scope-picker.tsx

@@ -1,65 +0,0 @@
-import { defineWebComponent } from './define';
-import { ChatScopePicker } from '../components/chat-scope-picker';
-import { wireDisclosure } from './disclosure';
-import type { DropdownController } from '../ui/dropdown';
-import type { SearchFilters } from '../types';
-
-interface Props extends Record<string, unknown> {
-  /** Authors to offer as scope filters. Omit to drop the Authors section (for a
-   *  tag-only picker). Set as a JS property. */
-  availableAuthors?: string[];
-  /** Tags to offer as scope filters. Omit to drop the Tags section (for an
-   *  author-only picker). Set as a JS property. */
-  availableTags?: string[];
-  /** The label shown on the trigger for the active scope. */
-  currentLabel?: string;
-  /** Drive/observe the dropdown's open state (Shoelace-style: settable + reflected
-   *  to the `open` attribute, the dropdown still self-manages on click/keyboard).
-   *  Set `el.open = true`, or `<kai-scope-picker open>`; listen for `kai-open-change`. */
-  open?: boolean;
-  /** Initial open state on mount (uncontrolled seed). */
-  defaultOpen?: boolean;
-  /** Disable the trigger: click/keyboard and `show()` no longer open the dropdown. */
-  disabled?: boolean;
-}
-
-/** Events fired by `<kai-scope-picker>`. */
-interface Events {
-  /** A scope was chosen (`undefined` filters = "All Content"). */
-  'kai-scope-change': { filters: SearchFilters | undefined };
-  /** The scope dropdown opened or closed (by click, keyboard, Escape, outside-click, or a method). */
-  'kai-open-change': { open: boolean };
-}
-
-/**
- * `<kai-scope-picker>` — a dropdown to scope a chat by author or tag.
- * Options via `available-authors`/`available-tags` properties; emits
- * `kai-scope-change`.
- */
-defineWebComponent<Props, Events>('kai-scope-picker', {
-  availableAuthors: [],
-  availableTags: [],
-  currentLabel: 'All Content',
-  open: undefined,
-  defaultOpen: undefined,
-  disabled: undefined,
-}, (props, ctx) => {
-  const { dispatch, flag } = ctx;
-  let api: DropdownController | undefined;
-
-  // The standard overlay surface: settable+reflecting `open`, kai-open-change,
-  // show/hide/toggle, disabled-gating. See ./disclosure.
-  wireDisclosure(ctx, () => api, () => props.open);
-
-  return (
-    <ChatScopePicker
-      currentLabel={props.currentLabel ?? 'All Content'}
-      availableAuthors={props.availableAuthors ?? []}
-      availableTags={props.availableTags ?? []}
-      onScopeChange={(filters) => dispatch('kai-scope-change', { filters })}
-      defaultOpen={flag('defaultOpen')}
-      disabled={flag('disabled')}
-      controllerRef={(a) => (api = a)}
-    />
-  );
-});