@kitn.ai/ui 0.27.0 → 0.29.0

package/src/ui/nav.tsx

@@ -1,282 +0,0 @@
-import { For, Show, type JSX, createSignal, splitProps } from 'solid-js';
-import { ChevronRight } from 'lucide-solid';
-import { cn } from '../utils/cn';
-import { renderIcon } from './icon';
-import { Badge } from './badge';
-
-/** Status tone for a nav item's dot. `primary` is the theme accent; the rest use
- *  the kit's tool hues (the same colors as kai-status / kai-progress-bar). Generic
- *  enough for thread/onboarding states (success = "Completed", info = "Working")
- *  and task-run states (neutral = queued, info = running, success = done,
- *  error = failed). */
-export type NavStatusTone = 'primary' | 'info' | 'success' | 'warning' | 'error' | 'neutral';
-
-/** Dot hue per `tone`, mirroring the kai-status / kai-progress-bar token map. */
-const STATUS_DOT_BG: Record<NavStatusTone, string> = {
-  primary: 'bg-primary',
-  info: 'bg-tool-blue',
-  success: 'bg-tool-green',
-  warning: 'bg-tool-amber',
-  error: 'bg-tool-red',
-  neutral: 'bg-muted-foreground',
-};
-
-/** A small colored status indicator on a nav row. The `label` (when set) is folded
- *  into the row's accessible name; `pulse` adds an animated ping ring. */
-export interface NavItemStatus {
-  tone: NavStatusTone;
-  /** Short status word ("Working", "Failed"). Shown as muted text and announced. */
-  label?: string;
-  /** Animated ping ring (disabled under prefers-reduced-motion). */
-  pulse?: boolean;
-}
-
-export interface KaiNavItem {
-  id: string;
-  label?: string;
-  /** Leading icon: a named icon, an image URL / data-URI, or plain text. */
-  icon?: string;
-  /** Trailing text pill (e.g. "Beta"). */
-  badge?: string;
-  /** Trailing icon (a named icon), e.g. an edit/compose affordance. */
-  trailing?: string;
-  disabled?: boolean;
-  /** Nested items. When present, the row becomes a collapsible group: a parent
-   *  row with a disclosure chevron over an indented child list. Recurses for
-   *  arbitrary depth (primarily 2 levels, e.g. project -> threads). */
-  children?: KaiNavItem[];
-  /** A small colored status dot (+ optional label) on the row. */
-  status?: NavItemStatus;
-  /** Right-aligned muted trailing text (e.g. a relative time, "24d ago").
-   *  Distinct from `trailing` (a hover icon). */
-  meta?: string;
-  /** An interactive trailing action button (`icon` is a named icon; `label` is
-   *  its accessible name). Activating it fires `onItemAction` and does NOT select
-   *  the row. Distinct from `trailing` (a decorative hover icon, not a button). */
-  action?: { icon: string; label: string };
-  /** Render an interactive trailing close (×) button. Activating it fires
-   *  `onItemClose` and does NOT select the row. */
-  closable?: boolean;
-}
-
-export interface NavProps extends JSX.HTMLAttributes<HTMLElement> {
-  items?: KaiNavItem[];
-  /** Active item id (drives aria-current + the selected look). */
-  value?: string;
-  onItemSelect?: (id: string) => void;
-  /** A row's trailing `action` button was activated (not a select). */
-  onItemAction?: (id: string, action?: { icon: string; label: string }) => void;
-  /** A `closable` row's trailing close button was activated (not a select). */
-  onItemClose?: (id: string) => void;
-  /** Ids of group items collapsed on first render. Groups default to expanded. */
-  defaultCollapsed?: string[];
-}
-
-export function Nav(props: NavProps) {
-  const [local, rest] = splitProps(props, [
-    'items', 'value', 'onItemSelect', 'onItemAction', 'onItemClose', 'defaultCollapsed', 'class',
-  ]);
-
-  // Groups default to expanded; `defaultCollapsed` seeds the closed set. Using a
-  // Set keyed by item id keeps expand state independent of the items reference,
-  // so late-arriving items (the element sets `items` post-construction) are open.
-  const [collapsed, setCollapsed] = createSignal<Set<string>>(
-    new Set(local.defaultCollapsed ?? []),
-    { equals: false },
-  );
-  const isExpanded = (id: string) => !collapsed().has(id);
-  const toggle = (id: string) =>
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-
-  return (
-    <nav {...rest} class={cn('flex flex-col gap-0.5', local.class)}>
-      <NavRows
-        items={local.items ?? []}
-        depth={0}
-        value={local.value}
-        onItemSelect={local.onItemSelect}
-        onItemAction={local.onItemAction}
-        onItemClose={local.onItemClose}
-        isExpanded={isExpanded}
-        toggle={toggle}
-      />
-    </nav>
-  );
-}
-
-interface NavRowsProps {
-  items: KaiNavItem[];
-  depth: number;
-  value?: string;
-  onItemSelect?: (id: string) => void;
-  onItemAction?: (id: string, action?: { icon: string; label: string }) => void;
-  onItemClose?: (id: string) => void;
-  isExpanded: (id: string) => boolean;
-  toggle: (id: string) => void;
-}
-
-/** Render one nesting level. Recurses through `children`. */
-function NavRows(props: NavRowsProps) {
-  // When a level has any groups, every row reserves a chevron-width disclosure
-  // column (chevron for groups, a spacer for leaves) so icons/labels line up.
-  const hasGroups = () => props.items.some((i) => (i.children?.length ?? 0) > 0);
-  return (
-    <For each={props.items}>
-      {(item) => {
-        const isGroup = () => (item.children?.length ?? 0) > 0;
-        const expanded = () => props.isExpanded(item.id);
-        const active = () => props.value === item.id;
-        const tone = () => item.status?.tone ?? 'neutral';
-        // Fold the status word + meta into the accessible name so AT gets them
-        // (the dot/label/meta nodes are aria-hidden to avoid double-announcing).
-        const ariaLabel = () => {
-          if (!item.status?.label && !item.meta) return undefined;
-          return [item.label, item.status?.label, item.meta].filter(Boolean).join(', ');
-        };
-        const onClick = () => {
-          if (item.disabled) return;
-          if (isGroup()) props.toggle(item.id);
-          else props.onItemSelect?.(item.id);
-        };
-        // Native buttons handle Enter/Space; add ArrowRight/Left for tree parity.
-        const onKeyDown = (e: KeyboardEvent) => {
-          if (!isGroup() || item.disabled) return;
-          if (e.key === 'ArrowRight' && !expanded()) { e.preventDefault(); props.toggle(item.id); }
-          else if (e.key === 'ArrowLeft' && expanded()) { e.preventDefault(); props.toggle(item.id); }
-        };
-        return (
-          <>
-            {/* The row is a non-interactive wrapper: the selectable item button
-                and the trailing action/close button are SIBLINGS, never nested
-                (a button inside a button is invalid HTML — browsers hoist it out
-                — and trips axe's nested-interactive). Each control owns its own
-                click, so a trailing-button click never reaches the item button's
-                select handler; no event-delegation discrimination is needed. */}
-            <div
-              class={cn(
-                'group relative flex items-center rounded-md transition-colors',
-                'hover:bg-accent',
-                active() && 'bg-accent',
-                item.disabled && 'pointer-events-none opacity-50',
-              )}
-            >
-              <button
-                part="item"
-                type="button"
-                disabled={item.disabled}
-                aria-current={active() ? 'page' : undefined}
-                aria-expanded={isGroup() ? expanded() : undefined}
-                aria-label={ariaLabel()}
-                onClick={onClick}
-                onKeyDown={onKeyDown}
-                style={props.depth > 0 ? { 'padding-left': `${10 + props.depth * 16}px` } : undefined}
-                class={cn(
-                  'flex min-w-0 flex-1 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors',
-                  'text-muted-foreground group-hover:text-foreground',
-                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                  'disabled:pointer-events-none',
-                  active() && 'font-medium text-foreground',
-                )}
-              >
-                <Show
-                  when={isGroup()}
-                  fallback={hasGroups() ? <span class="size-4 shrink-0" aria-hidden="true" /> : null}
-                >
-                  <span
-                    part="chevron"
-                    aria-hidden="true"
-                    class={cn('flex shrink-0 items-center opacity-60 transition-transform', expanded() && 'rotate-90')}
-                  >
-                    <ChevronRight size={16} />
-                  </span>
-                </Show>
-                <Show when={item.icon}>{renderIcon(item.icon, { class: 'size-4 shrink-0' })}</Show>
-                <span class="min-w-0 flex-1 truncate">{item.label}</span>
-                <Show when={item.status}>
-                  <span part="status" class="flex shrink-0 items-center gap-1.5" aria-hidden="true">
-                    <span class="relative inline-flex">
-                      <Show when={item.status!.pulse}>
-                        <span
-                          class={cn(
-                            'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden',
-                            STATUS_DOT_BG[tone()],
-                          )}
-                        />
-                      </Show>
-                      <span class={cn('relative inline-block size-2 rounded-full', STATUS_DOT_BG[tone()])} />
-                    </span>
-                    <Show when={item.status!.label}>
-                      <span class="text-xs text-muted-foreground">{item.status!.label}</span>
-                    </Show>
-                  </span>
-                </Show>
-                <Show when={item.meta}>
-                  <span part="meta" class="shrink-0 text-xs tabular-nums text-muted-foreground" aria-hidden="true">
-                    {item.meta}
-                  </span>
-                </Show>
-                <Show when={item.badge}>
-                  <Badge variant="default" class="px-1.5 py-0 text-micro font-medium uppercase tracking-wide">{item.badge}</Badge>
-                </Show>
-                <Show when={item.trailing}>{renderIcon(item.trailing, { class: 'size-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-60' })}</Show>
-              </button>
-              <Show when={item.action}>
-                <button
-                  part="item-action"
-                  data-nav-action="action"
-                  type="button"
-                  aria-label={item.action!.label}
-                  onClick={() => props.onItemAction?.(item.id, item.action)}
-                  class={cn(
-                    'mr-1 flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground',
-                    'opacity-0 transition-opacity hover:bg-background/70 hover:text-foreground',
-                    'focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                    'group-hover:opacity-100',
-                  )}
-                >
-                  {renderIcon(item.action!.icon, { class: 'size-4' })}
-                </button>
-              </Show>
-              <Show when={item.closable}>
-                <button
-                  part="item-action"
-                  data-nav-action="close"
-                  type="button"
-                  aria-label={item.label ? `Remove ${item.label}` : 'Remove'}
-                  onClick={() => props.onItemClose?.(item.id)}
-                  class={cn(
-                    'mr-1 flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground',
-                    'opacity-0 transition-opacity hover:bg-background/70 hover:text-foreground',
-                    'focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                    'group-hover:opacity-100',
-                  )}
-                >
-                  {renderIcon('x', { class: 'size-4' })}
-                </button>
-              </Show>
-            </div>
-            <Show when={isGroup() && expanded()}>
-              <div part="group" role="group">
-                <NavRows
-                  items={item.children!}
-                  depth={props.depth + 1}
-                  value={props.value}
-                  onItemSelect={props.onItemSelect}
-                  onItemAction={props.onItemAction}
-                  onItemClose={props.onItemClose}
-                  isExpanded={props.isExpanded}
-                  toggle={props.toggle}
-                />
-              </div>
-            </Show>
-          </>
-        );
-      }}
-    </For>
-  );
-}

package/src/ui/notice.tsx

@@ -1,84 +0,0 @@
-import { type JSX, Show, createSignal } from 'solid-js';
-import { Info, TriangleAlert, CircleAlert, CircleCheck, X } from 'lucide-solid';
-import { cn } from '../utils/cn';
-import { renderIcon } from './icon';
-
-export type NoticeSeverity = 'neutral' | 'info' | 'warning' | 'error' | 'success';
-
-const SEVERITY_ICON = { neutral: Info, info: Info, warning: TriangleAlert, error: CircleAlert, success: CircleCheck };
-
-/** Icon tint per severity. Neutral stays muted; the rest use the kit's tool hues
- *  (the same on-brand, AA-checked colors used by tool/status chips). */
-const ICON_TONE: Record<NoticeSeverity, string> = {
-  neutral: 'text-muted-foreground',
-  info: 'text-tool-blue',
-  warning: 'text-tool-amber',
-  error: 'text-tool-red',
-  success: 'text-tool-green',
-};
-
-/** The default leading icon for a notice: `null` when `icon="none"`, the named
- *  icon when one is given, else the severity glyph. Exported so the `kai-notice`
- *  facade can use it as the fallback inside a `slot="icon"` escape hatch. */
-export function noticeIconNode(severity: NoticeSeverity, icon?: string): JSX.Element {
-  if (icon === 'none') return null;
-  if (icon) return renderIcon(icon, { class: cn('size-4 shrink-0', ICON_TONE[severity]) });
-  const I = SEVERITY_ICON[severity];
-  return <I class={cn('size-4 shrink-0', ICON_TONE[severity])} aria-hidden="true" />;
-}
-
-export interface NoticeProps {
-  severity?: NoticeSeverity;
-  /** Leading icon: omit for the severity default, `"none"` to hide it, or a named
-   *  icon to override. */
-  icon?: string;
-  /** A custom icon node that replaces the icon region entirely (the `kai-notice`
-   *  facade passes a `slot="icon"` here, with the default icon as its fallback). */
-  iconSlot?: JSX.Element;
-  /** Render a dismiss (×) button that hides the notice and calls `onDismiss`. */
-  dismissible?: boolean;
-  /** Called after the notice is dismissed. */
-  onDismiss?: () => void;
-  /** The message. */
-  children: JSX.Element;
-  /** Optional trailing action (e.g. a link). */
-  action?: JSX.Element;
-  class?: string;
-}
-
-/**
- * A self-contained inline notice / alert: a leading severity icon, a message, an
- * optional trailing action, and an optional dismiss. Carries the right a11y role
- * (`alert` for errors, `status` otherwise). Placement is the consumer's — this is
- * just the notice box.
- */
-export function Notice(props: NoticeProps) {
-  const [open, setOpen] = createSignal(true);
-  const severity = (): NoticeSeverity => props.severity ?? 'neutral';
-  const dismiss = () => { setOpen(false); props.onDismiss?.(); };
-
-  return (
-    <Show when={open()}>
-      <div
-        role={severity() === 'error' ? 'alert' : 'status'}
-        class={cn('flex items-center gap-2.5 rounded-lg bg-surface px-3.5 py-2.5 text-sm', props.class)}
-      >
-        <Show when={props.iconSlot} fallback={noticeIconNode(severity(), props.icon)}>
-          {props.iconSlot}
-        </Show>
-        <div class="flex-1 leading-snug text-muted-foreground">{props.children}</div>
-        <Show when={props.action}>{props.action}</Show>
-        <Show when={props.dismissible}>
-          <button
-            type="button"
-            aria-label="Dismiss"
-            onClick={dismiss}
-            class="-my-1 -mr-1.5 shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          >
-            <X class="size-3.5" aria-hidden="true" />
-          </button>
-        </Show>
-      </div>
-    </Show>
-  );
-}

package/src/ui/overlay.tsx

@@ -1,277 +0,0 @@
-import {
-  createSignal, createEffect, onCleanup, splitProps, type Accessor, type JSX,
-} from 'solid-js';
-import { Dynamic } from 'solid-js/web';
-import {
-  computePosition, autoUpdate, offset, flip, shift, arrow, hide,
-  getOverflowAncestors, type Placement,
-} from '@floating-ui/dom';
-
-/**
- * Keep a node mounted through its CSS exit animation.
- * Open  -> present=true, state='open'  (enter animation via base classes)
- * Close -> state='closed' (data-closed triggers tw-animate-css animate-out),
- *          then unmount on `animationend`. If no animation is defined
- *          (e.g. jsdom), unmount on the next microtask.
- */
-export function createPresence(show: Accessor<boolean>) {
-  const [present, setPresent] = createSignal(show());
-  const [state, setState] = createSignal<'open' | 'closed'>(show() ? 'open' : 'closed');
-  let node: Element | undefined;
-  let generation = 0;
-  const setRef = (el: Element) => { node = el; };
-
-  createEffect((prev: boolean | undefined) => {
-    const visible = show();
-    if (visible) {
-      generation++;
-      setPresent(true);
-      setState('open');
-    } else if (prev) {
-      setState('closed');
-      const el = node;
-      const hasAnim = el && (() => {
-        const cs = getComputedStyle(el);
-        return cs.animationName !== 'none' && parseFloat(cs.animationDuration || '0') > 0;
-      })();
-      if (!el || !hasAnim) {
-        const gen = ++generation;
-        queueMicrotask(() => { if (gen === generation) setPresent(false); });
-        return visible;
-      }
-      const animEl = el as HTMLElement;
-      const onEnd = (e: AnimationEvent) => {
-        if (e.target !== animEl) return;
-        animEl.removeEventListener('animationend', onEnd);
-        setPresent(false);
-      };
-      animEl.addEventListener('animationend', onEnd);
-      onCleanup(() => animEl.removeEventListener('animationend', onEnd));
-    }
-    return visible;
-  });
-
-  return { present, state, setRef };
-}
-
-export type AsTag = string | ((props: Record<string, any>) => JSX.Element);
-
-/**
- * Polymorphic element. `as` may be a tag name (default 'span') or a render
- * function that receives the forwarded props (render-prop style `as={fn}`).
- * Uses splitProps (NOT destructuring) so reactive forwarded props such as
- * aria-expanded stay reactive. All extra props (incl. `ref`, event handlers,
- * aria-*) are forwarded. `children` is left in `rest` so it forwards naturally.
- */
-export function As(props: { as?: AsTag; children?: JSX.Element; [k: string]: any }) {
-  const [local, rest] = splitProps(props, ['as']);
-  if (typeof local.as === 'function') return local.as(rest);
-  return <Dynamic component={local.as ?? 'span'} {...rest} />;
-}
-
-export interface UsePositionOptions {
-  placement?: Placement;
-  gutter?: number;
-  arrowEl?: Accessor<HTMLElement | undefined>;
-  /**
-   * Fired ONCE when the reference (anchor) "goes away" — either removed from the
-   * document OR hidden behind an `inert` ancestor (e.g. a modal/takeover that
-   * inert-s the background while open). In both cases the anchor is no longer a
-   * valid, interactive target, so the caller should close the overlay and unmount
-   * its portal instead of leaving it orphaned (floating over an inert background or
-   * anchored to a node that no longer exists). Anchored overlays portal OUT of the
-   * trigger's subtree, so Solid's onCleanup does not catch an anchor that is
-   * removed/inerted independently of the overlay component. Wire this to set the
-   * overlay's open state to false.
-   */
-  onDisconnect?: () => void;
-}
-
-/**
- * True if `node` sits inside an `inert` subtree. Climbs ACROSS shadow boundaries:
- * an anchor often lives inside a web component's shadow root (kai-coachmark renders
- * its anchor span in its own shadow) while `inert` lands on a LIGHT-DOM ancestor of
- * the host (kai-screen inert-s its siblings, e.g. kai-workspace). `closest('[inert]')`
- * alone cannot see that because it halts at the shadow root, so after each tree we
- * hop to the host of the containing ShadowRoot and keep climbing.
- */
-function inInertSubtree(node: Node | null): boolean {
-  let n: Node | null = node;
-  while (n) {
-    if (n instanceof Element && n.closest('[inert]')) return true;
-    const root = n.getRootNode();
-    n = root instanceof ShadowRoot ? root.host : null;
-  }
-  return false;
-}
-
-/**
- * Watch for the reference element "going away" and fire `onDisconnect` exactly
- * once. The anchor is gone when it is either removed from the document OR hidden
- * behind an `inert` ancestor (`inInertSubtree(reference)`, which crosses shadow
- * boundaries) — the latter is how a modal/takeover (e.g. kai-screen) makes the
- * background non-interactive while leaving it in the DOM. Either way the anchor is
- * no longer a valid target and the overlay must close.
- *
- * Uses a MutationObserver on BOTH the document and the anchor's root node: the
- * document catches the anchor's host being removed and any ancestor gaining
- * `inert` (and light-DOM removals), while the anchor's root node — a ShadowRoot
- * for kai-* elements — catches removals INSIDE the shadow tree, which a
- * document-level observer can't see through encapsulation. We observe childList
- * (DOM removals) AND the `inert` attribute, then re-check the anchor after any
- * mutation. Guarded for environments without MutationObserver. Returns a teardown
- * that disconnects the observer.
- */
-function watchAnchorGone(ref: HTMLElement, onDisconnect: () => void): () => void {
-  if (typeof MutationObserver !== 'function') return () => {};
-  let fired = false;
-  // "Live" = connected AND not buried under an inert ancestor (across shadow roots).
-  const isLive = () => ref.isConnected && !inInertSubtree(ref);
-  // Only fire after the anchor has actually been live, so a one-off setup while
-  // detached/inert can never trigger a false disconnect.
-  let everLive = isLive();
-  const check = () => {
-    if (fired) return;
-    if (isLive()) { everLive = true; return; }
-    if (!everLive) return;
-    fired = true;
-    obs.disconnect();
-    onDisconnect();
-  };
-  const obs = new MutationObserver(check);
-  const roots = new Set<Node>();
-  if (typeof document !== 'undefined') roots.add(document);
-  const rootNode = ref.getRootNode();
-  if (rootNode) roots.add(rootNode);
-  for (const root of roots) {
-    try {
-      obs.observe(root, {
-        childList: true, subtree: true, attributes: true, attributeFilter: ['inert'],
-      });
-    } catch { /* unobservable root */ }
-  }
-  return () => obs.disconnect();
-}
-
-/**
- * Position `floating` relative to `reference` using fixed strategy + autoUpdate,
- * so the element tracks the trigger on scroll/resize (fix DD-2). Writes
- * position into the returned `pos` signal; caller applies it as inline style.
- *
- * `options` (placement/gutter) are read at setup time — pass static values;
- * reactive option changes won't reposition until the next autoUpdate tick.
- */
-export function usePosition(
-  reference: Accessor<HTMLElement | undefined>,
-  floating: Accessor<HTMLElement | undefined>,
-  options: UsePositionOptions = {},
-) {
-  const [pos, setPos] = createSignal<{ x: number; y: number; placement: Placement }>(
-    { x: 0, y: 0, placement: options.placement ?? 'bottom' },
-  );
-  const [arrowPos, setArrowPos] = createSignal<{ x?: number; y?: number }>({});
-  // True when the trigger has scrolled out of view (clipped by an ancestor or the
-  // viewport). Callers should hide the floating node so it doesn't stick to the
-  // edge — Floating UI's `hide` middleware. autoUpdate keeps this live on scroll.
-  const [hidden, setHidden] = createSignal(false);
-
-  createEffect(() => {
-    const ref = reference();
-    const float = floating();
-    if (!ref || !float) return;
-    const update = () => {
-      // `hide()` is read last so it reflects the final, shifted/flipped position.
-      const middleware = [offset(options.gutter ?? 8), flip(), shift({ padding: 8 })];
-      const aEl = options.arrowEl?.();
-      if (aEl) middleware.push(arrow({ element: aEl }));
-      middleware.push(hide());
-      computePosition(ref, float, {
-        placement: options.placement ?? 'bottom',
-        strategy: 'fixed',
-        middleware,
-      }).then(({ x, y, placement, middlewareData }) => {
-        setPos({ x, y, placement });
-        if (middlewareData.arrow) setArrowPos({ x: middlewareData.arrow.x, y: middlewareData.arrow.y });
-        setHidden(!!middlewareData.hide?.referenceHidden);
-      });
-    };
-    // autoUpdate tracks scroll, window resize, reference/floating ResizeObserver,
-    // and reference layout-shifts (IntersectionObserver). But its `ancestorResize`
-    // only listens for DOM `resize` events (which ONLY `window` fires), so an
-    // ANCESTOR element resizing (e.g. a sibling resizable sidebar reflowing the
-    // anchor's container without resizing the anchor itself) is caught only by the
-    // threshold-based layoutShift, which lags during a continuous drag. Add a
-    // ResizeObserver across the reference and its overflow ancestors so the
-    // floating node follows the anchor on any layout resize. Both are torn down
-    // on unmount via onCleanup.
-    const cleanup = autoUpdate(ref, float, update);
-    let ro: ResizeObserver | undefined;
-    // Only a REAL element can be observed. The composer's trigger menu anchors to a
-    // VIRTUAL reference (a caret-rect object exposing just getBoundingClientRect, no
-    // DOM node); ResizeObserver.observe() throws "parameter 1 is not of type 'Element'"
-    // on it, and that uncaught throw aborts this effect before onCleanup registers,
-    // which corrupted the menu's reactive scope so it never re-opened after the first
-    // time. autoUpdate already tracks the virtual anchor; this ResizeObserver is a
-    // real-element-only add-on for ancestor/element resizes.
-    if (typeof ResizeObserver === 'function' && ref instanceof Element) {
-      ro = new ResizeObserver(update);
-      ro.observe(ref);
-      for (const ancestor of getOverflowAncestors(ref)) {
-        if (ancestor instanceof Element) ro.observe(ancestor);
-      }
-    }
-    // When the anchor goes away (removed from the DOM or buried under an inert
-    // ancestor), close the overlay so its portal unmounts instead of floating
-    // orphaned. Independent of autoUpdate/ResizeObserver.
-    const disconnectWatch = options.onDisconnect
-      ? watchAnchorGone(ref, options.onDisconnect)
-      : undefined;
-    onCleanup(() => {
-      cleanup();
-      ro?.disconnect();
-      disconnectWatch?.();
-    });
-  });
-
-  return { pos, arrowPos, hidden };
-}
-
-export type DismissReason = 'escape' | 'outside';
-
-export interface UseDismissOptions {
-  enabled: Accessor<boolean>;
-  onDismiss: (reason: DismissReason) => void;
-  /** Elements considered "inside" (trigger + content). Pointerdown outside all of them dismisses. */
-  refs: () => (HTMLElement | undefined)[];
-}
-
-/**
- * Escape key + outside-pointerdown dismissal. Does NOT lock page scroll (fix DD-1).
- *
- * `onDismiss` and `refs` are captured at call time (component setup), which is
- * fine in SolidJS since components don't re-run — ensure they close over mutable
- * variables, not stale values.
- */
-export function useDismiss(opts: UseDismissOptions) {
-  createEffect(() => {
-    if (!opts.enabled()) return;
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') opts.onDismiss('escape'); };
-    const onPointer = (e: PointerEvent) => {
-      const target = e.target as Node;
-      const inside = opts.refs().some((el) => el && el.contains(target));
-      if (!inside) opts.onDismiss('outside');
-    };
-    // Captured at SETUP and closed over, never re-resolved as a global inside
-    // `onCleanup`: cleanup can run after the host removed the DOM globals (a
-    // `kai-*` release is deferred one microtask past detachment, so an
-    // environment teardown gets in between), and a bare `document` there throws.
-    // See tests/components/teardown-without-dom-globals.test.tsx.
-    const doc = document;
-    doc.addEventListener('keydown', onKey);
-    doc.addEventListener('pointerdown', onPointer, true);
-    onCleanup(() => {
-      doc.removeEventListener('keydown', onKey);
-      doc.removeEventListener('pointerdown', onPointer, true);
-    });
-  });
-}