@principal-ai/subsystems-react 0.53.6 → 0.55.0

package/src/subsystem/C4NodeCard.test.ts

@@ -221,7 +221,6 @@ describe('nodeSubtitle', () => {
 
   test('is empty when nothing is stated — there is no fallback', () => {
     const withTech = node({ technology: 'Bun + Electrobun' });
-    const withMembers = node({ constructs: ['function', 'store'], members: ['a', 'b'] });
     const component = node({
       kind: 'component',
       component: {
@@ -232,7 +231,7 @@ describe('nodeSubtitle', () => {
         purl: 'pkg:x#src/subsystem/model.ts',
       },
     });
-    for (const n of [withTech, withMembers, component]) {
+    for (const n of [withTech, component]) {
       expect(nodeSubtitle(n)).toBe('');
     }
   });

package/src/subsystem/C4NodeCard.tsx

@@ -91,6 +91,15 @@ const CARD_PAD_Y = 10;
 /** The card's flex `gap`, between each of its rows. */
 const CARD_GAP = 3;
 
+/**
+ * Space a component card reserves above and below the constructs nested inside
+ * it when it is grown (a component with constructs becomes an ELK parent, the
+ * same way an opened container does). A component has no technology row and no
+ * collapse affordance, so this is its label slot plus padding.
+ */
+export const COMPONENT_HEADER_PAD = CARD_PAD_Y * 2 + LABEL_SLOT_H + CARD_GAP;
+export const COMPONENT_FOOTER_PAD = CARD_PAD_Y;
+
 /** The description's line height, as a multiple of its font size. */
 const DESC_LINE_HEIGHT = 1.35;
 
@@ -416,9 +425,22 @@ export interface C4NodeCardProps {
    * the grown card to host its component cards.
    */
   children?: React.ReactNode;
+  /**
+   * Delay the width/height transition by this many ms — the drill-down
+   * sequences the fade before the move/grow, so the size change waits it out.
+   * @default 0
+   */
+  transitionDelayMs?: number;
+  /**
+   * The width/height transition duration, in ms. The graph passes its
+   * `MORPH_MS` so the grow and the component reveal (`settled`) share one clock
+   * and cannot drift apart.
+   * @default 420
+   */
+  sizeTransitionMs?: number;
 }
 
-export function C4NodeCard({ node, selected = false, handles, onClick, componentCount = 0, onExpand, width, height, showDescription = true, children }: C4NodeCardProps) {
+export function C4NodeCard({ node, selected = false, handles, onClick, componentCount = 0, onExpand, width, height, showDescription = true, children, transitionDelayMs = 0, sizeTransitionMs = 420 }: C4NodeCardProps) {
   const { theme } = useTheme();
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
   const style = nodeStyle(node, theme, selected);
@@ -465,7 +487,7 @@ export function C4NodeCard({ node, selected = false, handles, onClick, component
         // rather than drawn outside the boundary. The description is clamped above
         // so that clipping is never what you actually see.
         height: reservedHeight,
-        transition: 'width 420ms ease-out, height 420ms ease-out',
+        transition: `width ${sizeTransitionMs}ms ease-out ${transitionDelayMs}ms, height ${sizeTransitionMs}ms ease-out ${transitionDelayMs}ms`,
         overflow: 'hidden',
         boxSizing: 'border-box',
         display: 'flex',

package/src/subsystem/ComponentDeclaration.tsx

@@ -16,7 +16,7 @@ import {
   type SubsystemComponent,
   type SubsystemDeclTokenKind,
 } from './model';
-import type { SubsystemOpenFileOptions } from './declarationRef';
+import type { SpanFreshness, SubsystemOpenFileOptions } from './declarationRef';
 import { parseSourceLocation } from './declarationRef';
 import { resolveComponentDeclaration } from './formatDeclaration';
 import { tokenizeComponent } from './tokenizeComponent';
@@ -101,10 +101,11 @@ export interface ComponentVerificationState {
     inlineParameters?: number;
   };
   declaration?: {
-    freshness: 'fresh' | 'stale' | 'missing' | 'unanchored' | 'unchecked';
-    ref?: {
+    freshness: SpanFreshness;
+    span?: {
       startLine: number;
-      lineHash: string;
+      endLine: number;
+      contentHash: string;
     };
   };
 }
@@ -235,7 +236,7 @@ function verificationSummary(
     const declFresh = v.declaration?.freshness;
     const declBit =
       declFresh && declFresh !== 'unanchored'
-        ? ` · declaration ${declFresh}${v.declaration?.ref ? ` L${v.declaration.ref.startLine}` : ''}`
+        ? ` · declaration ${declFresh}${v.declaration?.span ? ` L${v.declaration.span.startLine}` : ''}`
         : '';
     const anchorBit = `exact → ${v.anchor?.label ?? v.anchor?.nodeId ?? 'node'}${loc}${declBit}`;
     if (v.construct && v.construct.match !== true) {
@@ -418,10 +419,14 @@ export function ComponentDeclaration({
   }, [inspection]);
 
   const declarationStartLine =
-    component.declarationRef?.startLine ??
-    verification?.declaration?.ref?.startLine ??
+    component.declarationSpan?.startLine ??
+    verification?.declaration?.span?.startLine ??
     parseSourceLocation(verification?.anchor?.source_location) ??
     undefined;
+  const declarationEndLine =
+    component.declarationSpan?.endLine ??
+    verification?.declaration?.span?.endLine ??
+    undefined;
 
   const externalKind =
     (component.declaration?.kind ?? component.construct) === 'external';
@@ -434,7 +439,12 @@ export function ComponentDeclaration({
     if (!onOpenFile || !component.file) return;
     onOpenFile(
       component.file,
-      declarationStartLine != null ? { startLine: declarationStartLine } : undefined,
+      declarationStartLine != null
+        ? {
+            startLine: declarationStartLine,
+            ...(declarationEndLine != null ? { endLine: declarationEndLine } : {}),
+          }
+        : undefined,
     );
   };
 

package/src/subsystem/ConstructsCatalog.tsx

@@ -75,12 +75,23 @@ const FileDrawerContent = memo(function FileDrawerContent({
   render,
   file,
   startLine,
+  endLine,
 }: {
   render: (file: string, opts?: SubsystemOpenFileOptions) => ReactNode;
   file: string;
   startLine?: number;
+  endLine?: number;
 }) {
-  return <>{render(file, startLine != null ? { startLine } : undefined)}</>;
+  return (
+    <>
+      {render(
+        file,
+        startLine != null
+          ? { startLine, ...(endLine != null ? { endLine } : {}) }
+          : undefined,
+      )}
+    </>
+  );
 });
 
 interface FileTreeNode {
@@ -236,9 +247,11 @@ export function ConstructsCatalog({
   const [purposeOverrides, setPurposeOverrides] = useState<
     Record<string, boolean>
   >({});
-  const [drawer, setDrawer] = useState<{ file: string; startLine?: number } | null>(
-    null,
-  );
+  const [drawer, setDrawer] = useState<{
+    file: string;
+    startLine?: number;
+    endLine?: number;
+  } | null>(null);
 
   const visibleSet = useMemo(() => new Set(visibleAliases), [visibleAliases]);
   const visibleComponents = useMemo(
@@ -314,7 +327,7 @@ export function ConstructsCatalog({
     if (!drawer) return;
     const match =
       orderedComponents.find(
-        (c) => c.file === drawer.file && c.declarationRef?.startLine === drawer.startLine,
+        (c) => c.file === drawer.file && c.declarationSpan?.startLine === drawer.startLine,
       ) ?? orderedComponents.find((c) => c.file === drawer.file);
     if (!match) return;
     document
@@ -508,9 +521,10 @@ export function ConstructsCatalog({
   const onOpenFile = useCallback(
     (file: string, opts?: SubsystemOpenFileOptions) => {
       const startLine = opts?.startLine;
+      const endLine = opts?.endLine;
       setDrawer((prev) => {
         if (prev?.file === file && prev.startLine === startLine) return null;
-        return { file, startLine };
+        return { file, startLine, endLine };
       });
       onFileSelect?.(file);
     },
@@ -1013,12 +1027,12 @@ export function ConstructsCatalog({
                         const lineOpen =
                           fileOpen &&
                           drawer.startLine != null &&
-                          c.declarationRef?.startLine === drawer.startLine;
+                          c.declarationSpan?.startLine === drawer.startLine;
                         // A combined header owns the path, so declarations under
                         // it drop their own badge; those with no known line just
                         // render unnumbered. Without a header, keep the badge.
                         const numbered =
-                          hasFile && c.declarationRef?.startLine != null;
+                          hasFile && c.declarationSpan?.startLine != null;
                         // The header names the external kind, so the body just
                         // names the construct.
                         const isExt = c.construct === 'external';
@@ -1099,6 +1113,7 @@ export function ConstructsCatalog({
               render={renderDrawerContent}
               file={drawer.file}
               startLine={drawer.startLine}
+              endLine={drawer.endLine}
             />
           ) : null}
         </FileDrawer>

package/src/subsystem/GraphSidebar.test.tsx

@@ -0,0 +1,152 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { createElement } from 'react';
+import { Window } from 'happy-dom';
+import { cleanup, fireEvent, render } from '@testing-library/react/pure';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { GraphSidebar } from './GraphSidebar';
+
+// Bun's happy-dom test environment isn't registered (no @happy-dom/global-
+// registrator), so wire the DOM primitives React DOM needs before rendering.
+const dom = new Window();
+const globals = globalThis as unknown as Record<string, unknown>;
+globals.window = dom;
+globals.document = dom.document;
+globals.navigator = dom.navigator;
+globals.HTMLElement = dom.HTMLElement;
+globals.Node = dom.Node;
+globals.Element = dom.Element;
+globals.Event = dom.Event;
+globals.getComputedStyle = dom.getComputedStyle.bind(dom);
+globals.requestAnimationFrame = dom.requestAnimationFrame.bind(dom);
+globals.cancelAnimationFrame = dom.cancelAnimationFrame.bind(dom);
+globals.localStorage = dom.localStorage;
+globals.matchMedia = dom.matchMedia.bind(dom);
+
+afterEach(cleanup);
+
+function renderSidebar(props: Record<string, unknown>) {
+  return render(
+    createElement(
+      ThemeProvider,
+      { theme: defaultEditorTheme },
+      createElement(GraphSidebar as never, props as never),
+    ),
+  );
+}
+
+const sidebarColumn = (container: HTMLElement) =>
+  container.querySelector('div[style*="border-right"]') as HTMLElement;
+
+describe('GraphSidebar chrome', () => {
+  test('renders the sidebar column and resize handle', () => {
+    const { container, getByText, getByLabelText } = renderSidebar({
+      header: createElement('span', null, 'title'),
+      sidebarBody: createElement('span', null, 'panel'),
+    });
+    expect(getByText('title')).toBeTruthy();
+    expect(getByText('panel')).toBeTruthy();
+    expect(getByLabelText('Resize sidebar')).toBeTruthy();
+    // Uncontrolled width defaults to 320px.
+    expect(sidebarColumn(container).style.width).toBe('320px');
+  });
+
+  test('hidden renders nothing — no column, no handle', () => {
+    const { queryByLabelText, queryByText } = renderSidebar({
+      hidden: true,
+      header: createElement('span', null, 'title'),
+    });
+    expect(queryByText('title')).toBeNull();
+    expect(queryByLabelText('Resize sidebar')).toBeNull();
+  });
+
+  test('tabs render a strip and report the change', () => {
+    let changed: string | null = null;
+    const { getByRole } = renderSidebar({
+      tabs: [
+        { id: 'a', label: 'Alpha' },
+        { id: 'b', label: 'Beta' },
+      ],
+      activeTab: 'a',
+      onTabChange: (id: string) => {
+        changed = id;
+      },
+      sidebarBody: createElement('span', null, 'body'),
+    });
+    expect(getByRole('tablist')).toBeTruthy();
+    fireEvent.click(getByRole('tab', { name: 'Beta' }));
+    expect(changed).toBe('b');
+  });
+
+  test('no tabs renders a single body without a strip', () => {
+    const { queryByRole, getByText } = renderSidebar({
+      sidebarBody: createElement('span', null, 'body'),
+    });
+    expect(getByText('body')).toBeTruthy();
+    expect(queryByRole('tablist')).toBeNull();
+  });
+
+  test('bodyHidden hides the lower panel but keeps the header', () => {
+    const { getByText, queryByText } = renderSidebar({
+      header: createElement('span', null, 'header'),
+      sidebarBody: createElement('span', null, 'body'),
+      bodyHidden: true,
+    });
+    expect(getByText('header')).toBeTruthy();
+    expect(queryByText('body')).toBeNull();
+  });
+
+  test('controlled width applies to the column and reports drag changes', () => {
+    let reports = 0;
+    const { container, getByLabelText } = renderSidebar({
+      width: 400,
+      onWidthChange: () => {
+        reports++;
+      },
+      sidebarBody: createElement('span', null, 'panel'),
+    });
+    expect(sidebarColumn(container).style.width).toBe('400px');
+    const handle = getByLabelText('Resize sidebar');
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 140 });
+    fireEvent.mouseUp(document);
+    // Controlled: the width only reports — the prop stays authoritative.
+    expect(sidebarColumn(container).style.width).toBe('400px');
+    expect(reports).toBeGreaterThan(0);
+  });
+
+  test('an uncontrolled drag resizes the column', () => {
+    const { container, getByLabelText } = renderSidebar({
+      sidebarBody: createElement('span', null, 'panel'),
+    });
+    const handle = getByLabelText('Resize sidebar');
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 180 });
+    fireEvent.mouseUp(document);
+    expect(sidebarColumn(container).style.width).toBe('400px');
+  });
+
+  test('a drag ends by persisting the width under persistKey', () => {
+    const { getByLabelText } = renderSidebar({
+      persistKey: 'gs-test',
+      sidebarBody: createElement('span', null, 'panel'),
+    });
+    const handle = getByLabelText('Resize sidebar');
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 200 });
+    fireEvent.mouseUp(document);
+    expect(window.localStorage.getItem('principal.subsystems.sidebarWidth.gs-test')).toBe('420');
+  });
+
+  test('reports drag state to the wrapper', () => {
+    const states: boolean[] = [];
+    const { getByLabelText } = renderSidebar({
+      onDraggingChange: (d: boolean) => states.push(d),
+      sidebarBody: createElement('span', null, 'panel'),
+    });
+    const handle = getByLabelText('Resize sidebar');
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 140 });
+    fireEvent.mouseUp(document);
+    expect(states).toEqual([true, false]);
+  });
+});

package/src/subsystem/GraphSidebar.tsx

@@ -0,0 +1,300 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+
+/**
+ * GraphSidebar — the side panel of a graph layout, extracted from
+ * SubsystemComponentGraph so the panel itself is its own component. The host
+ * supplies everything it shows:
+ *
+ *  - `header` — the upper block (title, actions, description…). Scrollable;
+ *    takes the flexible share of the column when `stretchHeader` is set so a
+ *    long description can unpack without squeezing the lower panel to death.
+ *  - `tabs` + `activeTab`/`onTabChange` — an optional tab strip above the
+ *    lower panel. Omit for a single-panel sidebar.
+ *  - `sidebarBody` — the lower panel content (the active tab's body).
+ *  - `footer` — pinned beneath the scrollable body.
+ *
+ * The panel is pure chrome — it owns nothing graph-specific (not the selection
+ * state, not the trails, not the file tree). That state stays in the graph,
+ * because the canvas dims from the same facts the sidebar renders; which is
+ * exactly why the chrome — and only the chrome — is what's shared.
+ *
+ * The right edge is the resize handle. Width is draggable, clamped to
+ * `minWidth`/`maxWidth`, and persisted to localStorage under
+ * `principal.subsystems.sidebarWidth.<persistKey>` when a `persistKey` is set
+ * (controlled widths instead hand every change to `onWidthChange`, and persist
+ * nothing).
+ *
+ * `onDraggingChange` reports drag state so a wrapper (see GraphWithSidebar)
+ * can lock its whole row against text selection during a resize.
+ */
+
+export interface GraphSidebarTab {
+  id: string;
+  label: string;
+}
+
+export interface GraphSidebarProps {
+  /** Upper block of the sidebar: title, actions, description — whatever the
+   *  graph wants above the divider. Scrolls when the sidebar is short. */
+  header?: ReactNode;
+  /** Tab strip above the lower panel. When set, `sidebarBody` renders as the
+   *  active tab's body. Omit for a single-panel sidebar. */
+  tabs?: ReadonlyArray<GraphSidebarTab>;
+  activeTab?: string;
+  onTabChange?: (id: string) => void;
+  /** Lower panel content — the active tab's body when `tabs` is set. */
+  sidebarBody?: ReactNode;
+  /** Pinned footer of the lower panel, beneath its scrollable body. */
+  footer?: ReactNode;
+  /** Hide the sidebar entirely (and the resize handle); nothing renders. */
+  hidden?: boolean;
+  /** Hide the lower panel so only the header shows. */
+  bodyHidden?: boolean;
+  /** Give the header the flexible share of the column, pinning the lower
+   *  panel at half height (e.g. a description that unpacks on demand). */
+  stretchHeader?: boolean;
+  /** Controlled sidebar width (px). */
+  width?: number;
+  onWidthChange?: (width: number) => void;
+  /** Uncontrolled starting width; a stored width for `persistKey` wins. */
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  /** Fired when a drag-resize gesture ends (hosts re-fit their canvas here). */
+  onResizeEnd?: () => void;
+  /** localStorage key the sidebar width persists under. */
+  persistKey?: string;
+  /** Aria-label for the tab strip. */
+  tabListLabel?: string;
+  /** Reports drag state so a wrapper can lock its row against selection
+   *  while the sidebar is being resized. */
+  onDraggingChange?: (dragging: boolean) => void;
+}
+
+const DEFAULT_MIN_WIDTH = 240;
+const DEFAULT_MAX_WIDTH = 600;
+const DEFAULT_WIDTH = 320;
+const SIDEBAR_WIDTH_STORAGE_PREFIX = 'principal.subsystems.sidebarWidth.';
+
+function readStoredWidth(persistKey: string | undefined): number | null {
+  if (!persistKey || typeof window === 'undefined') return null;
+  try {
+    const raw = window.localStorage.getItem(SIDEBAR_WIDTH_STORAGE_PREFIX + persistKey);
+    if (!raw) return null;
+    const parsed = Number(raw);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+export function GraphSidebar({
+  header,
+  tabs,
+  activeTab,
+  onTabChange,
+  sidebarBody,
+  footer,
+  hidden = false,
+  bodyHidden = false,
+  stretchHeader = false,
+  width,
+  onWidthChange,
+  defaultWidth = DEFAULT_WIDTH,
+  minWidth = DEFAULT_MIN_WIDTH,
+  maxWidth = DEFAULT_MAX_WIDTH,
+  onResizeEnd,
+  persistKey,
+  tabListLabel = 'Sidebar sections',
+  onDraggingChange,
+}: GraphSidebarProps) {
+  const { theme } = useTheme();
+  const controlled = width !== undefined;
+  const hasTabs = (tabs?.length ?? 0) > 0;
+  const sidebarVisible = !hidden;
+
+  // Uncontrolled width: seeded from storage when a persistKey is set, else the
+  // default. A new persistKey (a different model) restarts the panel at that
+  // model's stored width.
+  const [intWidth, setIntWidth] = useState(() => readStoredWidth(persistKey) ?? defaultWidth);
+  useEffect(() => {
+    if (controlled) return;
+    setIntWidth(readStoredWidth(persistKey) ?? defaultWidth);
+  }, [persistKey, defaultWidth, controlled]);
+
+  const effectiveWidth = controlled ? (width as number) : intWidth;
+
+  // Drag-resize: capture the grab, track on the document, release on mouseup,
+  // persisting only then — not on every mousemove.
+  const [dragging, setDragging] = useState(false);
+  const dragStartX = useRef(0);
+  // Mirror of the current width for the mouseup handler (a closure over the
+  // drag-start render would persist the stale start width).
+  const currentWidthRef = useRef(effectiveWidth);
+  currentWidthRef.current = effectiveWidth;
+
+  const onResizeStart = useCallback(
+    (e: ReactMouseEvent) => {
+      e.preventDefault();
+      dragStartX.current = e.clientX;
+      currentWidthRef.current = effectiveWidth;
+      setDragging(true);
+      onDraggingChange?.(true);
+    },
+    [effectiveWidth, onDraggingChange],
+  );
+
+  useEffect(() => {
+    if (!dragging) return;
+    const onMove = (e: MouseEvent) => {
+      const next = Math.min(
+        Math.max(currentWidthRef.current + (e.clientX - dragStartX.current), minWidth),
+        maxWidth,
+      );
+      if (controlled) {
+        onWidthChange?.(next);
+      } else {
+        setIntWidth(next);
+      }
+    };
+    const onUp = () => {
+      setDragging(false);
+      onDraggingChange?.(false);
+      if (persistKey && typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem(
+            SIDEBAR_WIDTH_STORAGE_PREFIX + persistKey,
+            String(currentWidthRef.current),
+          );
+        } catch {
+          // Storage unavailable — the width just isn't remembered.
+        }
+      }
+      onResizeEnd?.();
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+  }, [dragging, minWidth, maxWidth, controlled, onWidthChange, onResizeEnd, persistKey, onDraggingChange]);
+
+  if (!sidebarVisible) return null;
+
+  const clampedWidth = Math.min(Math.max(effectiveWidth, minWidth), maxWidth);
+
+  return (
+    <>
+      <div
+        style={{
+          width: clampedWidth,
+          minWidth: clampedWidth,
+          borderRight: `1px solid ${theme.colors.border}`,
+          background: theme.colors.backgroundSecondary ?? theme.colors.background,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          userSelect: dragging ? 'none' : undefined,
+        }}
+      >
+        {header != null && (
+          <div
+            style={{
+              flex: stretchHeader ? 1 : '0 0 auto',
+              minHeight: 0,
+              overflowY: 'auto',
+              padding: 16,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 12,
+            }}
+          >
+            {header}
+          </div>
+        )}
+        {!bodyHidden && (hasTabs || sidebarBody != null || footer != null) && (
+          <div
+            style={{
+              ...(stretchHeader ? { height: '50%' as const } : { flex: 1, minHeight: 0 }),
+              minHeight: 160,
+              flexShrink: 0,
+              borderTop: header != null ? `1px solid ${theme.colors.border}` : undefined,
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden',
+            }}
+          >
+            {hasTabs && (
+              <div
+                role="tablist"
+                aria-label={tabListLabel}
+                style={{
+                  display: 'flex',
+                  width: '100%',
+                  flexShrink: 0,
+                  borderBottom: `1px solid ${theme.colors.border}`,
+                  background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                }}
+              >
+                {tabs!.map((tab) => (
+                  <button
+                    key={tab.id}
+                    type="button"
+                    role="tab"
+                    aria-selected={activeTab === tab.id}
+                    onClick={() => onTabChange?.(tab.id)}
+                    style={{
+                      flex: 1,
+                      minWidth: 0,
+                      padding: '8px 8px',
+                      border: 'none',
+                      borderRadius: 0,
+                      background: activeTab === tab.id ? theme.colors.background : 'transparent',
+                      color:
+                        activeTab === tab.id ? theme.colors.text : theme.colors.textSecondary,
+                      fontSize: theme.fontSizes[1],
+                      fontFamily: theme.fonts.monospace,
+                      textTransform: 'capitalize',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    {tab.label}
+                  </button>
+                ))}
+              </div>
+            )}
+            <div
+              style={{
+                flex: 1,
+                minHeight: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+              }}
+            >
+              {sidebarBody}
+            </div>
+            {footer}
+          </div>
+        )}
+      </div>
+
+      <div
+        onMouseDown={onResizeStart}
+        aria-label="Resize sidebar"
+        title="Drag to resize"
+        style={{
+          width: 3,
+          flexShrink: 0,
+          cursor: 'col-resize',
+          background: theme.colors.border,
+          transition: 'background 120ms ease',
+          zIndex: 1,
+        }}
+      />
+    </>
+  );
+}