@kitn.ai/ui 0.17.0 → 0.18.1

package/src/ui/notice.tsx

@@ -0,0 +1,84 @@
+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

@@ -3,7 +3,8 @@ import {
 } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 import {
-  computePosition, autoUpdate, offset, flip, shift, arrow, hide, type Placement,
+  computePosition, autoUpdate, offset, flip, shift, arrow, hide,
+  getOverflowAncestors, type Placement,
 } from '@floating-ui/dom';
 
 /**
@@ -72,6 +73,84 @@ 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();
 }
 
 /**
@@ -116,8 +195,35 @@ export function usePosition(
         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);
-    onCleanup(cleanup);
+    let ro: ResizeObserver | undefined;
+    if (typeof ResizeObserver === 'function') {
+      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 };

package/src/ui/pane-grid.tsx

@@ -0,0 +1,117 @@
+import { type JSX, For, children as resolveChildren } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface PaneGridProps {
+  /** The panes - arbitrary N. Each top-level child is one tile in the grid. */
+  children: JSX.Element;
+  /** Minimum width of every pane, in px, before columns drop / the grid scrolls.
+   *  Defaults to `280`. */
+  minPaneWidth?: number;
+  /** Minimum height of every pane, in px, before the grid scrolls vertically.
+   *  Defaults to `200`. */
+  minPaneHeight?: number;
+  /** Column cap when the container is wide. Columns fill up to this many, then drop
+   *  to fewer as the container narrows. Defaults to `3`. */
+  maxColumns?: number;
+  /** Gap between panes - any CSS length. Defaults to the kit gap
+   *  (`var(--kai-pane-grid-gap, 0.5rem)`). */
+  gap?: string;
+  /** When set to a valid child index, render ONLY that pane full-bleed (a single
+   *  filling cell) - a simple maximize hook the consumer drives. `null`/`undefined`
+   *  (or an out-of-range index) shows the full tiled grid. */
+  maximizedIndex?: number | null;
+  /** Extra classes for the grid container. */
+  class?: string;
+}
+
+/**
+ * PaneGrid - an N-pane responsive tiling grid with a min-size + scroll floor.
+ *
+ * Lays an arbitrary number of panes out in a CSS grid that fills up to
+ * `maxColumns` columns when wide, then DROPS columns (maxColumns -> ... -> 1) as
+ * the container narrows - so panes never squish below their minimums. Once even one
+ * column can't hold a pane at `minPaneWidth`, the grid SCROLLS instead of shrinking
+ * the panes; rows are kept at least `minPaneHeight` tall the same way. Because new
+ * rows stack downward, the overflow is preferentially VERTICAL - horizontal scroll
+ * only appears when the container is narrower than a single pane's minimum.
+ *
+ * This generalizes the hand-rolled center grid from the Split Workspace demo, where
+ * `kai-resizable` (capped at 3 panes) couldn't express an arbitrary-N tiled grid.
+ *
+ * Column track (computed from the props):
+ *
+ *   repeat(auto-fit, minmax(max(<minPaneWidth>px, (100% - <gaps>) / <maxColumns>), 1fr))
+ *
+ * where `<gaps>` is the total inter-column gap at the cap, `(maxColumns - 1) * gap`.
+ * The inner `max()` is the floor: each track is at least `minPaneWidth`, and at most
+ * `1fr`; the `(100% - gaps) / maxColumns` term is the per-column width WHEN the cap is
+ * filled, so `auto-fit` never packs in more than `maxColumns` columns. As the
+ * container shrinks past the point where a column can be `minPaneWidth` wide, a column
+ * drops; below one pane's minimum, the `overflow:auto` + `min-w-0`/`min-h-0` container
+ * scrolls.
+ *
+ * Maximize: when `maximizedIndex` points at a child, only that pane renders, in a
+ * single `1fr` x `1fr` cell that fills the grid. Restore by clearing the prop.
+ *
+ * The gap default reads `--kai-pane-grid-gap` (fallback `0.5rem`), so a consumer can
+ * retune spacing from outside without passing the prop. Everything is tokenized
+ * (surface/border come from whatever the panes use) - no hardcoded colors, so it
+ * reads correctly in light and dark.
+ */
+export function PaneGrid(props: PaneGridProps) {
+  const minPaneWidth = () => props.minPaneWidth ?? 280;
+  const minPaneHeight = () => props.minPaneHeight ?? 200;
+  const maxColumns = () => Math.max(1, props.maxColumns ?? 3);
+  const gap = () => props.gap ?? 'var(--kai-pane-grid-gap, 0.5rem)';
+
+  // Resolve children to their rendered nodes so a single pane can be picked out for
+  // the maximize hook (mirrors how Resizable reads its panels).
+  const resolved = resolveChildren(() => props.children);
+  const items = (): JSX.Element[] => resolved.toArray() as JSX.Element[];
+
+  // A valid maximize target, or null for the full grid.
+  const maxIndex = (): number | null => {
+    const m = props.maximizedIndex;
+    if (m == null) return null;
+    return m >= 0 && m < items().length ? m : null;
+  };
+
+  const shown = (): JSX.Element[] => {
+    const m = maxIndex();
+    return m == null ? items() : [items()[m]];
+  };
+
+  const gridStyle = (): JSX.CSSProperties => {
+    const g = gap();
+    if (maxIndex() != null) {
+      // One filling cell.
+      return {
+        'grid-template-columns': '1fr',
+        'grid-auto-rows': '1fr',
+        gap: g,
+      };
+    }
+    const cols = maxColumns();
+    // The per-column width when the cap is filled: (container - all gaps) / cols.
+    // Inside max() this is a math sub-expression, so the var/number arithmetic is valid.
+    const capped = `(100% - ${cols - 1} * ${g}) / ${cols}`;
+    return {
+      'grid-template-columns': `repeat(auto-fit, minmax(max(${minPaneWidth()}px, ${capped}), 1fr))`,
+      'grid-auto-rows': `minmax(${minPaneHeight()}px, 1fr)`,
+      gap: g,
+    };
+  };
+
+  return (
+    <div
+      data-pane-grid
+      // min-w-0 / min-h-0 let the grid shrink inside a flex/grid parent so its own
+      // overflow:auto (not the parent) takes over once panes hit their minimums.
+      class={cn('grid h-full w-full min-h-0 min-w-0 overflow-auto', props.class)}
+      tabindex={0}
+      style={gridStyle()}
+    >
+      <For each={shown()}>{(pane) => pane}</For>
+    </div>
+  );
+}

package/src/ui/pane-group.tsx

@@ -0,0 +1,291 @@
+import { type JSX, For, Show } from 'solid-js';
+import { MoreHorizontal, X } from 'lucide-solid';
+import { type PaneStatusTone } from './pane';
+import { cn } from '../utils/cn';
+
+/** The work state of a tab's agent/process, mapped to the kit's tool / status
+ *  hues — the SAME vocabulary as {@link './pane'.PaneStatus} and the AgentCard:
+ *  working = blue, idle = muted, done = green, error = red, blocked = amber. */
+export interface PaneTabStatus {
+  /** Which hue the numbered badge takes. */
+  tone: PaneStatusTone;
+  /** Optional status word shown on the active tab, on hover, and always for a
+   *  needs-attention / error tab. Without it only the badge color carries state. */
+  label?: string;
+  /** Animate a ping ring around the badge — for the live `working` state.
+   *  Respects prefers-reduced-motion. */
+  pulse?: boolean;
+}
+
+/** One tab in a {@link PaneGroup}: an agent/window shown in the strip. */
+export interface PaneTab {
+  /** Stable id, emitted as the selected value throughout. */
+  id: string;
+  /** The tab name (the agent / window title). */
+  name: string;
+  /** Run status — drives the numbered badge color + the status word. Defaults to
+   *  an `idle` (muted) badge with no word. */
+  status?: PaneTabStatus;
+  /** Raise the attention treatment: an amber ring + the status word always shown.
+   *  The "this one wants you" signal. */
+  needsAttention?: boolean;
+  /** The keyboard NUMBER shown inside the badge (the ⌥-jump hint). Defaults to the
+   *  tab's 1-based position in the strip. */
+  number?: number;
+}
+
+export interface PaneGroupProps {
+  /** The tabs, left → right. Each is one agent/window in the group. */
+  tabs: PaneTab[];
+  /** The active tab id. Defaults to the first tab. Drive it from `onTabChange`. */
+  active?: string;
+  /** A tab was selected (click, Enter/Space, or arrow-key move). */
+  onTabChange?: (id: string) => void;
+  /** A tab's close (×) was clicked. The consumer drops the tab from `tabs`. */
+  onTabClose?: (id: string) => void;
+  /** A tab's "…" overflow was clicked. The consumer wires the actual menu; the
+   *  group only surfaces the affordance. Omit to hide the "…" button. */
+  onTabMenu?: (id: string) => void;
+  /** Highlight the frame with a ring/border to mark this as the ACTIVE group in a
+   *  multi-group layout. */
+  focused?: boolean;
+  /** The active pane's body — the consumer owns it and swaps it on `onTabChange`. */
+  children?: JSX.Element;
+  /** Extra classes for the outer frame. */
+  class?: string;
+}
+
+/** tone → numbered-badge background (the kit's tool hues + muted for idle). */
+const TONE_BG: Record<PaneStatusTone, string> = {
+  working: 'bg-tool-blue',
+  idle: 'bg-muted-foreground',
+  done: 'bg-tool-green',
+  error: 'bg-tool-red',
+  blocked: 'bg-tool-amber',
+};
+
+/** tone → badge digit color (contrasts the solid badge fill). */
+const TONE_BADGE_FG: Record<PaneStatusTone, string> = {
+  working: 'text-white',
+  idle: 'text-background',
+  done: 'text-white',
+  error: 'text-white',
+  blocked: 'text-white',
+};
+
+/** tone → matching text color for the inline status word. */
+const TONE_TEXT: Record<PaneStatusTone, string> = {
+  working: 'text-tool-blue',
+  idle: 'text-muted-foreground',
+  done: 'text-tool-green',
+  error: 'text-tool-red',
+  blocked: 'text-tool-amber',
+};
+
+/**
+ * PaneGroup — an editor group: a TAB STRIP (numbered-status-badge tabs) over a
+ * single CONTENT area showing the active tab's pane body. The reusable "one column
+ * = a group of agents shown as tabs" primitive from the Multi-Agent Workspace,
+ * extracted from the hand-rolled group in the Split Workspace demo.
+ *
+ * Each tab leads with a small TONE-COLORED NUMBERED BADGE — the color encodes the
+ * agent's run status, the digit is its keyboard (⌥-jump) number, unifying status +
+ * hint into one element — then the name, then the status WORD (shown on the active
+ * tab, on hover, and always for a needs-attention / error tab), an optional "…"
+ * overflow, and a close "×". The active tab is highlighted; a needs-attention tab
+ * carries an amber ring even when inactive.
+ *
+ * Composition: the group owns the tab UX; the CONSUMER owns the pane content. It
+ * renders `children` as the active pane's body and swaps it in response to
+ * `onTabChange`. Selection-only — it never routes content itself.
+ *
+ * Accessibility: a `role="group"` ("Open panes") strip of real `<button>` tab
+ * activators (NOT `role="tab"`, so the strip can legally own the per-tab menu/close
+ * buttons) with roving tabindex + Arrow/Home/End navigation; the active activator is
+ * marked `aria-current="true"`, and the body is the `role="tabpanel"`. Colors are all
+ * token-backed (surface / border / ring / tool-*), so it reads in light and dark.
+ * The strip, each tab, and the body are exposed via `::part(tabs|tab|body)` for
+ * the `kai-pane-group` facade. Give the group a bounded height for the body scroll.
+ */
+export function PaneGroup(props: PaneGroupProps) {
+  const tabs = () => props.tabs ?? [];
+  const activeId = () => props.active ?? tabs()[0]?.id;
+
+  // Roving tabindex needs exactly one tab in the tab order: the active tab gets it,
+  // else the first, so the strip is always reachable by Tab.
+  const rovingId = () => {
+    const a = activeId();
+    if (a !== undefined && tabs().some((t) => t.id === a)) return a;
+    return tabs()[0]?.id;
+  };
+
+  const tabEls: Record<string, HTMLElement> = {};
+  const select = (id: string) => props.onTabChange?.(id);
+
+  // Arrow/Home/End move + select (activate on focus move); Enter/Space select.
+  // Only handled from the tab itself, never from its nested ×/… buttons.
+  const onKeyDown = (e: KeyboardEvent, tab: PaneTab) => {
+    if (e.currentTarget !== e.target) return;
+    const list = tabs();
+    if (list.length === 0) return;
+    const i = list.findIndex((t) => t.id === tab.id);
+    let next: PaneTab | undefined;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        next = list[(i + 1) % list.length];
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        next = list[(i - 1 + list.length) % list.length];
+        break;
+      case 'Home':
+        next = list[0];
+        break;
+      case 'End':
+        next = list[list.length - 1];
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        select(tab.id);
+        return;
+      default:
+        return;
+    }
+    if (next) {
+      e.preventDefault();
+      select(next.id);
+      tabEls[next.id]?.focus();
+    }
+  };
+
+  const TabItem = (p: { tab: PaneTab; index: number }) => {
+    const tab = () => p.tab;
+    const tone = (): PaneStatusTone => tab().status?.tone ?? 'idle';
+    const isActive = () => tab().id === activeId();
+    const num = () => tab().number ?? p.index + 1;
+    // The status word shows on the active tab, on hover, and always when the tab
+    // needs attention or has errored.
+    const alwaysWord = () => isActive() || !!tab().needsAttention || tone() === 'error';
+    // Outer wrapper is a plain div (no ARIA role) so the activator button and
+    // the menu/close buttons are siblings -- no nested-interactive violation.
+    return (
+      <div
+        class={cn(
+          'group/tab relative flex shrink-0 items-center rounded-md text-xs',
+          isActive()
+            ? 'bg-background text-foreground shadow-sm ring-1 ring-border'
+            : 'text-muted-foreground hover:bg-hover hover:text-foreground',
+          tab().needsAttention && !isActive() && 'ring-1 ring-tool-amber/50',
+        )}
+        data-active={isActive() ? '' : undefined}
+        data-needs-attention={tab().needsAttention ? '' : undefined}
+      >
+        {/* Button-group activator (NOT role="tab") so the strip can legally own the
+            sibling menu/close buttons. aria-current marks the active pane. */}
+        <button
+          ref={(el) => { tabEls[tab().id] = el; }}
+          type="button"
+          part="tab"
+          tabindex={tab().id === rovingId() ? 0 : -1}
+          aria-current={isActive() ? 'true' : undefined}
+          onClick={() => select(tab().id)}
+          onKeyDown={(e) => onKeyDown(e, tab())}
+          class="flex cursor-pointer items-center gap-1.5 py-1 pl-1.5 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        >
+          {/* Numbered status badge: color = status, digit = the ⌥-jump number. */}
+          <span class="relative flex size-[18px] shrink-0" aria-hidden="true">
+            <Show when={tab().status?.pulse}>
+              <span class={cn('absolute inset-0 animate-ping rounded opacity-60 motion-reduce:hidden', TONE_BG[tone()])} />
+            </Show>
+            <span
+              class={cn(
+                'relative flex size-[18px] items-center justify-center rounded text-[11px] font-bold leading-none tabular-nums',
+                TONE_BG[tone()],
+                TONE_BADGE_FG[tone()],
+              )}
+            >
+              {num()}
+            </span>
+          </span>
+
+          <span class="max-w-[8rem] truncate font-medium">{tab().name}</span>
+
+          <Show when={tab().status?.label}>
+            <span
+              class={cn(
+                'truncate text-[10px] font-medium',
+                TONE_TEXT[tone()],
+                alwaysWord() ? 'inline' : 'hidden group-hover/tab:inline',
+              )}
+            >
+              {tab().status!.label}
+            </span>
+          </Show>
+        </button>
+
+        {/* menu/close are siblings to the activator, not descendants -- no nested-interactive. */}
+        <span class="ml-0.5 flex shrink-0 items-center pr-1">
+          <Show when={props.onTabMenu}>
+            <button
+              type="button"
+              part="menu"
+              aria-label={`${tab().name} tab actions`}
+              aria-haspopup="menu"
+              onClick={(e) => { e.stopPropagation(); props.onTabMenu?.(tab().id); }}
+              class={cn(
+                'flex size-5 items-center justify-center rounded text-muted-foreground transition-colors',
+                'hover:bg-surface-sunken hover:text-foreground',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+                isActive() ? 'opacity-100' : 'opacity-0 group-hover/tab:opacity-100',
+              )}
+            >
+              <MoreHorizontal class="size-3.5" aria-hidden="true" />
+            </button>
+          </Show>
+          <Show when={props.onTabClose}>
+            <button
+              type="button"
+              part="close"
+              aria-label={`Close ${tab().name}`}
+              onClick={(e) => { e.stopPropagation(); props.onTabClose?.(tab().id); }}
+              class={cn(
+                'flex size-5 items-center justify-center rounded text-muted-foreground transition-colors',
+                'hover:bg-surface-sunken hover:text-foreground',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+                isActive() ? 'opacity-100' : 'opacity-0 group-hover/tab:opacity-100',
+              )}
+            >
+              <X class="size-3.5" aria-hidden="true" />
+            </button>
+          </Show>
+        </span>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      data-pane-group
+      class={cn(
+        'flex h-full min-h-0 flex-col overflow-hidden rounded-xl border bg-surface',
+        props.focused ? 'border-ring ring-2 ring-inset ring-ring/35' : 'border-border',
+        props.class,
+      )}
+    >
+      <div
+        part="tabs"
+        role="group"
+        aria-label="Open panes"
+        class="flex shrink-0 items-center gap-1 overflow-x-auto border-b border-border px-1.5 py-1"
+      >
+        <For each={tabs()}>{(tab, i) => <TabItem tab={tab} index={i()} />}</For>
+      </div>
+
+      <div part="body" role="tabpanel" class="min-h-0 flex-1 overflow-y-auto">
+        {props.children}
+      </div>
+    </div>
+  );
+}