@kitn.ai/ui 0.28.0 → 0.29.0

package/src/ui/pane-grid.tsx

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

@@ -1,291 +0,0 @@
-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-caption 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-micro 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>
-  );
-}

package/src/ui/pane.tsx

@@ -1,193 +0,0 @@
-import { type JSX, Show } from 'solid-js';
-import { Maximize2, Minimize2, X, Columns2, PanelRight } from 'lucide-solid';
-import { cn } from '../utils/cn';
-
-/** The work state of the pane's agent/process. Drives a tone-colored status dot
- *  (and optional label) in the header. */
-export type PaneStatusTone = 'working' | 'idle' | 'done' | 'error' | 'blocked';
-
-export interface PaneStatus {
-  /** The tone — maps to a semantic status hue (see {@link PANE_STATUS_BG}). */
-  tone: PaneStatusTone;
-  /** Optional text beside the dot (e.g. "Running tests…"). Without it the dot is
-   *  decorative and only the color carries meaning. */
-  label?: string;
-  /** Animate a ping ring on the dot — for the live `working` state. Respects
-   *  prefers-reduced-motion. */
-  pulse?: boolean;
-}
-
-/** tone → status-dot color utility, backed by the kit's tool-* / muted tokens so
- *  it reads correctly in BOTH light and dark without hardcoded colors.
- *  - `working` → blue (in-flight)
- *  - `idle`    → neutral muted (waiting)
- *  - `done`    → green (complete)
- *  - `error`   → red (failed)
- *  - `blocked` → amber (needs input / stalled) */
-export const PANE_STATUS_BG: Record<PaneStatusTone, string> = {
-  working: 'bg-tool-blue',
-  idle: 'bg-muted-foreground',
-  done: 'bg-tool-green',
-  error: 'bg-tool-red',
-  blocked: 'bg-tool-amber',
-};
-
-export interface PaneProps {
-  /** A glyph/avatar shown before the title (an agent icon, a model avatar). */
-  leading?: JSX.Element;
-  /** The pane title — the agent / window name. */
-  title: string;
-  /** A role / label shown under the title (e.g. "Reviewer", "claude-sonnet"). */
-  subtitle?: string;
-  /** A tone-colored status dot (+ optional label) in the header. */
-  status?: PaneStatus;
-  /** Extra header controls, placed BEFORE the built-in window controls. */
-  actions?: JSX.Element;
-  /** The pane body — scrolls inside a `min-h-0 flex-1 overflow-y-auto` region. */
-  children?: JSX.Element;
-  /** A pinned row below the body (e.g. a composer). Stays put while the body scrolls. */
-  footer?: JSX.Element;
-  /** Highlight the frame with a ring/border to signal the ACTIVE pane. */
-  focused?: boolean;
-  /** Show the restore glyph (Minimize2) instead of maximize (Maximize2). */
-  maximized?: boolean;
-  /** Maximize/restore window control. */
-  onMaximize?: () => void;
-  /** Close window control. */
-  onClose?: () => void;
-  /** Optional split control — the button only renders when this is provided. */
-  onSplit?: () => void;
-  /** Optional dock-to-side control — the button only renders when this is provided. */
-  onDock?: () => void;
-  /** Extra classes for the outer frame. */
-  class?: string;
-}
-
-/** A header window-control: a square, muted icon button. */
-function ControlButton(props: { label: string; onClick?: () => void; children: JSX.Element }) {
-  return (
-    <button
-      type="button"
-      aria-label={props.label}
-      onClick={() => props.onClick?.()}
-      class="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground opacity-80 transition-colors hover:bg-hover hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    >
-      {props.children}
-    </button>
-  );
-}
-
-/**
- * Pane — a reusable framed panel for a multi-agent workspace: a header (leading
- * glyph + title/subtitle + status dot + actions + window controls), a scrolling
- * body, and an optional pinned footer (e.g. a composer). It is the "pane frame"
- * every agent tile otherwise re-hand-rolls.
- *
- * Layout: the outer frame is a column flexbox; the header and footer hold their
- * height (`shrink-0`) while the body takes the rest (`min-h-0 flex-1
- * overflow-y-auto`) so content scrolls INSIDE the pane. Give the pane a bounded
- * height (a fixed parent, or `h-full` inside a grid/flex track) for the scroll to
- * engage; the body imposes no padding so content controls its own.
- *
- * Window controls (right side of the header): maximize/restore (Maximize2 ↔
- * Minimize2, toggled by `maximized`) and close (X) are always present; split
- * (Columns2) and dock (PanelRight) only render when `onSplit` / `onDock` are
- * passed. Each fires its callback prop.
- *
- * States: `focused` paints a ring + accent border to mark the active pane;
- * `maximized` swaps the maximize glyph for restore.
- *
- * Colors come entirely from design tokens (surface / border / ring / tool-*),
- * so it reads correctly in light and dark with no hardcoded values. The header,
- * body, footer, and window-control cluster are exposed via
- * `::part(header|body|footer|controls)` for the `kai-pane` facade.
- */
-export function Pane(props: PaneProps) {
-  return (
-    <div
-      data-pane
-      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="header"
-        class="flex shrink-0 items-center gap-2.5 border-b border-border px-3 py-2"
-      >
-        <Show when={props.leading}>
-          <span class="flex shrink-0 items-center text-muted-foreground">{props.leading}</span>
-        </Show>
-        <div class="flex min-w-0 flex-col">
-          <span class="truncate text-sm font-medium leading-tight text-foreground">{props.title}</span>
-          <Show when={props.subtitle}>
-            <span class="truncate text-xs leading-tight text-muted-foreground">{props.subtitle}</span>
-          </Show>
-        </div>
-        <Show when={props.status}>
-          {(status) => (
-            <span
-              class="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground"
-              role={status().label ? 'status' : undefined}
-              aria-label={status().label}
-            >
-              <span class="relative flex size-2">
-                <Show when={status().pulse}>
-                  <span
-                    aria-hidden="true"
-                    class={cn(
-                      'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden',
-                      PANE_STATUS_BG[status().tone],
-                    )}
-                  />
-                </Show>
-                <span
-                  aria-hidden="true"
-                  class={cn('relative inline-flex size-2 rounded-full', PANE_STATUS_BG[status().tone])}
-                />
-              </span>
-              <Show when={status().label}>
-                <span class="truncate">{status().label}</span>
-              </Show>
-            </span>
-          )}
-        </Show>
-        <div part="controls" class="ml-auto flex shrink-0 items-center gap-0.5">
-          {props.actions}
-          <Show when={props.onSplit}>
-            <ControlButton label="Split pane" onClick={props.onSplit}>
-              <Columns2 class="size-4" aria-hidden="true" />
-            </ControlButton>
-          </Show>
-          <Show when={props.onDock}>
-            <ControlButton label="Dock pane" onClick={props.onDock}>
-              <PanelRight class="size-4" aria-hidden="true" />
-            </ControlButton>
-          </Show>
-          <ControlButton
-            label={props.maximized ? 'Restore pane' : 'Maximize pane'}
-            onClick={props.onMaximize}
-          >
-            <Show when={props.maximized} fallback={<Maximize2 class="size-4" aria-hidden="true" />}>
-              <Minimize2 class="size-4" aria-hidden="true" />
-            </Show>
-          </ControlButton>
-          <ControlButton label="Close pane" onClick={props.onClose}>
-            <X class="size-4" aria-hidden="true" />
-          </ControlButton>
-        </div>
-      </div>
-
-      <div part="body" class="min-h-0 flex-1 overflow-y-auto" tabindex={0}>
-        {props.children}
-      </div>
-
-      <Show when={props.footer}>
-        <div part="footer" class="shrink-0 border-t border-border">
-          {props.footer}
-        </div>
-      </Show>
-    </div>
-  );
-}