@kitn.ai/ui 0.28.0 → 0.29.0

package/src/elements/tabs.tsx

@@ -1,95 +0,0 @@
-import { createSignal } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Tabs, type KaiTabItem, type TabsVariant } from '../ui/tabs';
-
-interface Props extends Record<string, unknown> {
-  /** Tabs to render. Set as a JS property, not an HTML attribute. */
-  items?: KaiTabItem[];
-  /** Controlled selected id. Set as a JS property (or the `value` attribute);
-   *  drive it from your app in response to `kai-tab-change`. Omit for uncontrolled. */
-  value?: string;
-  /** Initial selected id when uncontrolled (use the `default-value` attribute in plain HTML). */
-  defaultValue?: string;
-  /** `segmented` (default, a pill group) or `underline` (an underlined row). */
-  variant?: TabsVariant;
-  /** Stretch the strip to full width, each tab sharing the space equally. */
-  block?: boolean;
-  /** Disable the whole strip. */
-  disabled?: boolean;
-}
-
-interface Events {
-  /** A tab was selected (click, Enter/Space, or arrow-key move). `value` is the item's id. */
-  'kai-tab-change': { value: string };
-}
-
-/**
- * `<kai-tabs>`, an accessible tab strip. Selection only: it emits the chosen id;
- * you render what each tab shows (this is not a content router).
- *
- * Set the `items` property in JavaScript (array, not attribute):
- *
- * ```html
- * <kai-tabs default-value="chat"></kai-tabs>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const tabs = document.querySelector('kai-tabs');
- *   tabs.items = [
- *     { id: 'chat', label: 'Chat', icon: 'message-circle' },
- *     { id: 'cowork', label: 'Cowork' },
- *     { id: 'code', label: 'Code', icon: 'code' },
- *   ];
- *   tabs.addEventListener('kai-tab-change', (e) => console.log(e.detail.value));
- * </script>
- * ```
- *
- * Each tab carries a stable `id`, so you can wire `aria-controls` on the tab and
- * `aria-labelledby` on your own panel. Style the active tab via `::part(tab)[data-active]`.
- */
-defineWebComponent<Props, Events>('kai-tabs', {
-  items: undefined,
-  value: undefined,
-  defaultValue: undefined,
-  variant: 'segmented',
-  block: undefined,
-  disabled: undefined,
-}, (props, { dispatch, flag, expose }) => {
-  // Controlled/uncontrolled selection: `value` (when set) wins; otherwise the
-  // element manages its own, seeded from `defaultValue`. `setValueTo` always
-  // writes the internal value (a no-op visually while controlled) and emits
-  // `kai-tab-change` so a controlling app can update its own state.
-  const [internal, setInternal] = createSignal(props.defaultValue as string | undefined);
-  const value = () => (props.value as string | undefined) ?? internal();
-  const setValueTo = (next: string) => {
-    setInternal(next);
-    dispatch('kai-tab-change', { value: next });
-  };
-
-  let listRef: HTMLDivElement | undefined;
-  expose({
-    /** Select a tab by id (fires `kai-tab-change`). Ignores unknown/disabled ids. */
-    select: (id: string) => {
-      const item = (props.items as KaiTabItem[] | undefined)?.find((it) => it.id === id);
-      if (!item || item.disabled || flag('disabled')) return;
-      setValueTo(id);
-    },
-    /** Focus the active tab (or the first focusable tab). */
-    focus: () => {
-      listRef
-        ?.querySelector<HTMLButtonElement>('[role="tab"][tabindex="0"]:not([disabled])')
-        ?.focus();
-    },
-  });
-
-  return (
-    <Tabs
-      items={props.items as KaiTabItem[] | undefined}
-      value={value()}
-      variant={(props.variant as TabsVariant) ?? 'segmented'}
-      block={flag('block')}
-      disabled={flag('disabled')}
-      onChange={setValueTo}
-      ref={(el) => (listRef = el)}
-    />
-  );
-});

package/src/elements/tasks.tsx

@@ -1,103 +0,0 @@
-import { defineWebComponent } from './define';
-import { TasksCard, type TasksCardController, type TasksCardData } from '../components/tasks-card';
-import type { CardResolution } from '../primitives/card-contract';
-
-interface Props extends Record<string, unknown> {
-  /** The tasks definition (the CardEnvelope.data). Set as a JS PROPERTY:
-   *  `el.data = { tasks:[…], selectAll, confirmLabel, … }`. Import
-   *  `TasksCardData` from `@kitn.ai/ui` for the full shape. */
-  data?: TasksCardData;
-  /** 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:'submit', data:{ selected:[…] } }`. */
-  resolution?: Record<string, unknown>;
-  /** Controlled selection (task ids; JS property). When set, it wins over local state. */
-  value?: string[];
-  /** Uncontrolled initial selection (task ids; JS property), overlaying per-task `checked`. */
-  defaultValue?: string[];
-  /** Freeze the whole list + Confirm. Attribute: `disabled`. */
-  disabled?: boolean;
-  /** Display-only: rows can't be toggled and show the default cursor (no pointer,
-   *  hover, or focus affordances). Keeps the look as-is. Attribute: `readonly`. */
-  readonly?: boolean;
-}
-
-/** Events fired by `<kai-tasks>`. (Resolution still flows up the bubbling `kai-card`
- *  contract event — `kai-value-change` is the live selection signal, distinct from
- *  the terminal submit.) */
-interface Events {
-  /** The selection changed on a toggle. Carries the selected ids in input
-   *  order. */
-  'kai-value-change': { value: string[] };
-}
-
-/**
- * `<kai-tasks>` — a **selectable** task/plan list (set via the `data` property):
- * checkbox rows + an optional select-all + a confirm button. Toggling rows is local
- * UI state; only the final confirm emits the Card contract's **`submit`** verb
- * up a bubbling **`kai-card`** CustomEvent (`{ kind:'submit', cardId,
- * data:{ selected } }`) with the checked ids in input order. 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 kit tokens.
- *
- * Two looks, one selection model. Default `mode:'select'` = the approval list above.
- * `mode:'progress'` = the onboarding-checklist look (e.g. "Get started 0 / 2"): a
- * header `done / total` count + circular indicators + per-item title/description,
- * and NO confirm button (checking a row IS the action, so the live
- * `kai-value-change` is the signal). The `max` gate, `toggle`/`select` methods, and
- * events all still apply.
- */
-defineWebComponent<Props, Events>(
-  'kai-tasks',
-  {
-    data: undefined,
-    cardId: undefined,
-    heading: undefined,
-    resolution: undefined,
-    value: undefined,
-    defaultValue: undefined,
-    disabled: false,
-    readonly: false,
-  },
-  (props, { element, dispatch, flag, expose }) => {
-    // Pattern C: the TasksCard component owns the selection set + confirm gating and
-    // hands up a controller; the facade captures it and exposes delegating methods.
-    let controller: TasksCardController | undefined;
-    expose({
-      /** Set the checked task ids (local-only, no emit), respecting disabled/max.
-       *  With no arg, select all toggleable rows. */
-      select: (taskIds?: string[]) => controller?.select(taskIds),
-      /** Toggle one task by id, honoring the max gate (no `checked` = flip). */
-      toggle: (taskId: string, checked?: boolean) => controller?.toggle(taskId, checked),
-      /** Confirm the current selection: emits the `submit` CardEvent + resolves
-       *  (only when the min/max gate passes). Named `send`, not `submit`. */
-      send: () => controller?.send(),
-      /** Focus the task group (select-all checkbox if shown, else the first row). */
-      focus: (options?: FocusOptions) => controller?.focus(options),
-      /** Trigger the dismiss path (emit `dismiss` + collapse to the re-openable stub). */
-      dismiss: () => controller?.dismiss(),
-      /** Re-open a dismissed card from its stub (emit `reopen`). */
-      reopen: () => controller?.reopen(),
-    });
-
-    return (
-      <TasksCard
-        data={props.data}
-        cardId={props.cardId ?? (element.id || 'kai-tasks')}
-        heading={props.heading}
-        resolution={props.resolution as CardResolution | undefined}
-        value={props.value as string[] | undefined}
-        defaultValue={props.defaultValue as string[] | undefined}
-        disabled={flag('disabled')}
-        readonly={flag('readonly')}
-        onValueChange={(payload) => dispatch('kai-value-change', payload)}
-        controllerRef={(c) => (controller = c)}
-        hostElement={element}
-      />
-    );
-  },
-);

package/src/elements/text-shimmer.tsx

@@ -1,28 +0,0 @@
-import { defineWebComponent } from './define';
-import { TextShimmer } from '../components/text-shimmer';
-
-interface Props extends Record<string, unknown> {
-  /** The text to shimmer. */
-  text?: string;
-  /** Element tag to render as (default `span`). */
-  as?: string;
-  /** Animation duration in seconds. */
-  duration?: number;
-  /** Gradient spread (5–45). */
-  spread?: number;
-}
-
-/**
- * `<kai-text-shimmer>` — animated shimmering text. Text via the `text`
- * attribute; `duration`/`spread` tune the effect.
- */
-defineWebComponent<Props>('kai-text-shimmer', {
-  text: '',
-  as: 'span',
-  duration: 4,
-  spread: 20,
-}, (props) => (
-  <TextShimmer as={props.as} duration={props.duration} spread={props.spread} class="text-body">
-    {props.text}
-  </TextShimmer>
-));

package/src/elements/thinking-bar.tsx

@@ -1,43 +0,0 @@
-import { defineWebComponent } from './define';
-import { ThinkingBar } from '../components/thinking-bar';
-
-interface Props extends Record<string, unknown> {
-  /** The shimmering label, e.g. "Thinking…". */
-  text?: string;
-  /** When true, show a "stop" affordance that fires a `stop` event. */
-  stoppable?: boolean;
-  /** Label for the stop affordance. */
-  stopLabel?: string;
-}
-
-/** Events fired by `<kai-thinking-bar>`. */
-interface Events {
-  /** The "stop / answer now" affordance was clicked. */
-  'kai-stop': void;
-}
-
-/**
- * `<kai-thinking-bar>` — a pure leaf element: an animated "thinking" indicator
- * (one of the primitives the batteries-included `<kai-chat>` does NOT surface).
- * Config via attributes, the only interaction (`stop`) comes back as an event.
- */
-defineWebComponent<Props, Events>('kai-thinking-bar', {
-  text: 'Thinking',
-  stoppable: false,
-  stopLabel: 'Answer now',
-}, (props, { dispatch, flag, reflectFlag }) => {
-  // `stoppable` reflects, following kai-tool's `disabled` (its FIX1). Without it the
-  // remove direction is dead: `el.removeAttribute('stoppable')` parses to `undefined`,
-  // the prop was already `undefined` after a bare-attribute add, so no prop change
-  // fires and `flag()`'s non-reactive hasAttribute fallback is never re-read — the
-  // stop affordance stays rendered forever. reflectFlag's coercing read-back resolves
-  // every write through the same `flag()` policy, making both directions reactive.
-  reflectFlag('stoppable');
-  return (
-    <ThinkingBar
-      text={props.text}
-      stopLabel={props.stopLabel}
-      onStop={flag('stoppable') ? () => dispatch('kai-stop') : undefined}
-    />
-  );
-});

package/src/elements/thread.tsx

@@ -1,139 +0,0 @@
-import { createSignal, onMount, onCleanup } from 'solid-js';
-import { defineWebComponent } from './define';
-import { readSlots, THREAD_SLOTS } from './slots';
-import { Thread, type ThreadController } from '../components/thread';
-import { cardComponentsFromTags } from './message';
-import { createMessagesGuard } from './validate-messages';
-import type { ChatMessage } from './chat-types';
-import type { ProseSize } from '../primitives/chat-config';
-
-interface Props extends Record<string, unknown> {
-  /** 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). */
-  messages?: ChatMessage[];
-  /** Show a typing indicator on the pending assistant turn. Set it while
-   *  awaiting the assistant's reply. */
-  loading?: boolean;
-  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`).
-   *  Defaults to `'sm'`. */
-  proseSize?: ProseSize;
-  /** Shiki theme name for syntax-highlighted code blocks (e.g.
-   *  `'github-dark-dimmed'`). */
-  codeTheme?: string;
-  /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain
-   *  `<pre>` blocks (lighter, no highlighter load). Default true. */
-  codeHighlight?: boolean;
-  /** Whether each message's action bar is always visible (`'always'`, default) or
-   *  only revealed on hover of that message row (`'hover'`). */
-  actionsReveal?: 'always' | 'hover';
-  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
-  scrollButton?: boolean;
-  /** Extra classes applied to the thread's inner root. */
-  class?: string;
-  /** 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>;
-}
-
-/** Events fired by `<kai-thread>`. */
-interface Events extends Record<string, unknown> {
-  /** A message's action button was clicked. `action` is the built-in name (`copy`
-   *  / `like` / `dislike` / `regenerate` / `edit`) or a 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' };
-}
-
-/**
- * `<kai-thread>` — the scrolling message list of a chat, as a standalone
- * composable element: one message row per `messages` entry with markdown / code
- * highlight / reasoning + tool panels / avatars / action row, stick-to-bottom
- * scroll with a scroll-to-bottom button, an optional typing indicator, and an
- * `empty` slot. It fills the height its parent gives it and scrolls internally
- * (`:host { display:block; height:100% }`). No composer, header, suggestions, or
- * sidebar — pair it with `<kai-prompt-input>` and your own layout, or reach for
- * the batteries-included `<kai-chat>`. Emits `kai-message-action`; exposes
- * `scrollToBottom()`.
- */
-defineWebComponent<Props, Events>('kai-thread', {
-  messages: undefined,
-  loading: false,
-  proseSize: 'sm',
-  codeTheme: 'github-dark-dimmed',
-  codeHighlight: true,
-  actionsReveal: 'always',
-  scrollButton: true,
-  class: undefined,
-  cardTypes: undefined,
-  cardSchemas: undefined,
-}, (props, { element, dispatch, flag, expose }) => {
-  let controller: ThreadController | undefined;
-
-  // `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 element instead of one message.
-  const validMessages = createMessagesGuard('kai-thread');
-
-  // Detect whether the consumer projected `slot="empty"` content, so the built-in
-  // default only renders when they did NOT.
-  const [slots, setSlots] = createSignal<Record<string, boolean>>({});
-  onMount(() => {
-    const read = () => setSlots(readSlots(element, THREAD_SLOTS));
-    read();
-    const observer = new MutationObserver(read);
-    observer.observe(element, { childList: true });
-    onCleanup(() => observer.disconnect());
-  });
-
-  // Imperative method API — forward the thread's scroll control onto the host.
-  expose({
-    /** Scroll the message list to the bottom (default `'smooth'`). */
-    scrollToBottom: (behavior?: ScrollBehavior) => controller?.scrollToBottom(behavior),
-  });
-
-  return (
-    <>
-      {/* Fill the height the parent gives us and scroll internally, like
-          <kai-resizable>. Consumers only need to give a parent (or the element) a
-          height. */}
-      <style>{':host{display:block;height:100%}'}</style>
-      <Thread
-        class={props.class as string | undefined}
-        messages={validMessages(props.messages)}
-        loading={flag('loading')}
-        proseSize={props.proseSize as ProseSize}
-        codeTheme={props.codeTheme as string}
-        codeHighlight={flag('codeHighlight')}
-        actionsReveal={props.actionsReveal as 'always' | 'hover'}
-        scrollButton={props.scrollButton !== false}
-        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. */
-        cardHostElement={element}
-        empty={slots()['empty'] ? <slot name="empty" /> : undefined}
-        onMessageAction={(detail) => dispatch('kai-message-action', detail)}
-        controllerRef={(c) => (controller = c)}
-      />
-    </>
-  );
-});

package/src/elements/toast.tsx

@@ -1,106 +0,0 @@
-import { defineWebComponent } from './define';
-import { ToastRegion, type ToastDismissReason, type ToastPosition, type ToastAppearance } from '../components/toast';
-import { toast as toastStore, type ToastItem } from '../primitives/toast-store';
-
-interface Props extends Record<string, unknown> {
-  /** The toasts to render. Newest is shown on top. Set as a JS property (array);
-   *  pass a new array reference to update. Omit for an empty region, which is
-   *  the normal resting state and how the imperative `toast()` API starts.
-   *  Note the handover: the first `toast()` call ADOPTS a region you placed in
-   *  markup (no second region mounts) and binds the imperative store to this
-   *  property, replacing any array you set. Drive a region as data OR via
-   *  `toast()`, not both at once. */
-  toasts?: ToastItem[];
-  /** Stack anchor: `'top-center'` (default), `'top-right'`, `'bottom-center'`, … */
-  position?: ToastPosition;
-  /** Max simultaneously-visible toasts; the rest queue. Defaults to `3`. */
-  max?: number;
-  /** Stacking: 'expanded' (default, full column) | 'collapsed' (Sonner-style
-   *  pile that expands on hover/focus). Attribute: stack. */
-  stack?: 'expanded' | 'collapsed';
-  /** Default appearance for this region's toasts: `'pill'` (default, compact) |
-   *  `'card'` (richer, with a description line). A per-toast `appearance` wins.
-   *  Attribute: `appearance`. */
-  appearance?: ToastAppearance;
-  /** Default high-contrast inverse treatment for this region's toasts. A per-toast
-   *  `inverse` wins. Off by default. Attribute: `inverse`. */
-  inverse?: boolean;
-  /** Container element to anchor this region to (JS property). Set by the store
-   *  for a scoped region; unset = the global viewport region. */
-  target?: HTMLElement;
-}
-
-interface Events {
-  /** A toast left the stack. `reason` is `'timeout' | 'close' | 'action'`. */
-  'kai-dismiss': { id: string; reason: ToastDismissReason };
-  /** A toast's action button was pressed. */
-  'kai-action': { id: string; label: string };
-}
-
-/**
- * `<kai-toast-region>` — the viewport overlay that renders the toast stack.
- *
- * It is the substrate behind the imperative `toast()` API: the store lazily
- * mounts ONE of these on `document.body` and binds the list to `toasts`. It is
- * also usable declaratively — set `el.toasts = [...]` (a JS property, never an
- * attribute) and listen for `kai-dismiss` / `kai-action`.
- *
- * The two modes meet gracefully: `toast()` ADOPTS the first connected
- * `<kai-toast-region>` already in the document instead of mounting a second
- * one, and creates its own on `document.body` only when none exists. Adoption
- * keeps your authored attributes (position/stack/appearance) but binds the
- * imperative store to `toasts`, replacing an array you were driving as data —
- * so within one app, either own the array or call `toast()`, not both. With
- * two or more regions placed, the first in document order is adopted and a
- * one-time console.warn flags the ambiguity.
- *
- * Because it is a real `kai-*` element it carries its own shadow root + the
- * shared kit stylesheet, so it is viewport-positioned AND kit-styled.
- *
- * Stack-level defaults are also declarative: `<kai-toast-region appearance="card"
- * inverse>` makes every toast that doesn't set its own `appearance`/`inverse`
- * render as an inverted card. A per-toast value always wins.
- *
- * Your app chrome must stay below the toast layer; set `--kai-toast-z`
- * (default 100) on the host to move the layer.
- */
-defineWebComponent<Props, Events>('kai-toast-region', {
-  toasts: [],
-  position: 'top-center',
-  max: 3,
-  stack: 'expanded',
-  appearance: 'pill',
-  inverse: false,
-  target: undefined,
-}, (props, { dispatch, flag }) => {
-  // `max` may arrive as a string attribute (`<kai-toast-region max="2">`).
-  const max = () => {
-    const raw = props.max as unknown;
-    const n = typeof raw === 'string' ? parseInt(raw, 10) : raw;
-    return typeof n === 'number' && !Number.isNaN(n) ? n : 3;
-  };
-
-  const remove = (id: string) => {
-    // Drop from the shared store (imperative path). For purely-declarative
-    // consumers the store simply won't contain the id — the dispatched event
-    // is the signal for them to update their own `toasts` array.
-    toastStore.dismiss(id);
-  };
-
-  return (
-    <ToastRegion
-      toasts={props.toasts ?? []}
-      position={props.position}
-      max={max()}
-      stack={props.stack as 'expanded' | 'collapsed' | undefined}
-      appearance={props.appearance as ToastAppearance | undefined}
-      inverse={flag('inverse')}
-      target={props.target as HTMLElement | undefined}
-      onDismiss={(id, reason) => {
-        remove(id);
-        dispatch('kai-dismiss', { id, reason });
-      }}
-      onAction={(id, label) => dispatch('kai-action', { id, label })}
-    />
-  );
-});

package/src/elements/tool.tsx

@@ -1,78 +0,0 @@
-import { createSignal, Show } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Tool, type ToolPart } from '../components/tool';
-import { wireDisclosure } from './disclosure';
-import type { CollapsibleController } from '../ui/collapsible';
-
-interface Props extends Record<string, unknown> {
-  /** The tool-call to display. Set as a JS property. */
-  tool?: ToolPart;
-  /** Drive/observe open state (Shoelace-style: settable + reflected to the `open`
-   *  attribute; the element still self-manages on trigger click). Set
-   *  `el.open = true`, or `<kai-tool open>`; listen for `kai-open-change`. */
-  open?: boolean;
-  /** Initial open state on mount (uncontrolled seed). */
-  defaultOpen?: boolean;
-  /** Gate the disclosure trigger: programmatic `show()/hide()/toggle()` still
-   *  work, but the trigger click no longer toggles. */
-  disabled?: boolean;
-}
-
-/** Events fired by `<kai-tool>`. */
-interface Events {
-  /** The panel expanded or collapsed (by trigger click or a method). */
-  'kai-open-change': { open: boolean };
-}
-
-/**
- * `<kai-tool>` — a collapsible tool-call panel (input/output inspection with a
- * state badge). Data via the `tool` property. Open state is the standard overlay
- * surface: settable+reflecting `open`, `kai-open-change`, and
- * `show()`/`hide()`/`toggle()` (gated by `disabled`); seed with `defaultOpen`.
- */
-defineWebComponent<Props, Events>('kai-tool', {
-  tool: undefined,
-  open: undefined,
-  defaultOpen: undefined,
-  disabled: undefined,
-}, (props, ctx) => {
-  const { flag, reflectFlag } = ctx;
-
-  // A SIGNAL, not a `let`. This facade gates its whole subtree on `<Show when={props.tool}>`,
-  // and `tool` is an object prop, so the only sequence a consumer of the HTML spelling
-  // has is markup-then-assign: the element connects with no tool, renders nothing, and
-  // the Collapsible — and therefore the controller — arrives a tick later.
-  //
-  // With a plain `let`, wireDisclosure's effects ran once against `undefined` and never
-  // again, because the getter they were handed was not reactive and a bare `open`
-  // attribute never changes `props.open` to re-trigger them. Net result: `<kai-tool open>`
-  // silently stayed shut while `el.open` read back `true` — the property and the
-  // rendering disagreed. Making the controller reactive is the whole fix: the effects
-  // re-run the moment it lands. `Tool` already tracks its own copy this way internally.
-  // Pinned by the ordering rows in tests/elements/tool.test.tsx.
-  const [api, setApi] = createSignal<CollapsibleController>();
-
-  // The standard disclosure surface: settable+reflecting `open`, kai-open-change,
-  // show/hide/toggle, disabled-gating. See ./disclosure. This is the SOLE emitter
-  // of kai-open-change — the Tool/Collapsible no longer wires its own.
-  wireDisclosure(ctx, api, () => props.open);
-
-  // `disabled` reflects too, following kai-dock. Without it the prop is write-only in
-  // the read direction AND deaf in the write one: `el.setAttribute('disabled', '')`
-  // after mount is parsed by component-register to `undefined`, so the prop never
-  // changes and nothing re-renders. reflectFlag's coercing setter resolves that
-  // `undefined` back through the same `flag()` policy, which is what makes the plain
-  // HTML gesture work at runtime and not only at parse time (findings G-05).
-  reflectFlag('disabled');
-
-  return (
-    <Show when={props.tool}>
-      <Tool
-        toolPart={props.tool!}
-        defaultOpen={flag('defaultOpen')}
-        disabled={flag('disabled')}
-        controllerRef={(a) => setApi(a)}
-      />
-    </Show>
-  );
-});