@weasel-js/labkit 1.4.1 → 1.4.2

package/src/annotations/AnnotationTargets.tsx

@@ -1,3 +1,4 @@
+import type { TrialInfo } from '../state/types';
 import { AnnotationOverlay } from './AnnotationOverlay';
 import type { AnnotationsApi, AnnotationsCapability } from './types';
 
@@ -6,6 +7,9 @@ export interface AnnotationTargetsProps {
   capability: AnnotationsCapability;
   state: unknown;
   config: unknown;
+  /** The trial these targets belong to. `capability.targets` is told it, so a
+   *  consumer holding per-trial refs can hand back this trial's. */
+  trial: TrialInfo;
   annotations: AnnotationsApi;
   activeToolId: string | null;
 }
@@ -15,10 +19,11 @@ export function AnnotationTargets({
   capability,
   state,
   config,
+  trial,
   annotations,
   activeToolId,
 }: AnnotationTargetsProps) {
-  const targets = capability.targets(state, config);
+  const targets = capability.targets(state, config, trial);
 
   return (
     <>

package/src/annotations/Annotations.overlay.test.tsx

@@ -82,6 +82,7 @@ function Harness({ toolId = 'rect' }: { toolId?: string }) {
             capability={capability}
             state={{}}
             config={{}}
+            trial={{ id: 'harness', view: null }}
             annotations={annotations}
             activeToolId={toolId}
           />
@@ -170,6 +171,7 @@ function OneTrial({
         capability={capability}
         state={{}}
         config={{}}
+        trial={{ id: trialId, view: null }}
         annotations={annotations}
         activeToolId="rect"
       />

package/src/annotations/types.ts

@@ -1,5 +1,6 @@
 import type { RefObject } from 'react';
 import type { ViewTransform } from '../instrument/types';
+import type { TrialInfo } from '../state/types';
 import type { MarkScene } from './store';
 
 /** A point in fractions of a target's content box. */
@@ -158,7 +159,9 @@ export interface AnnotationStorage {
 /** Declares that an instrument accepts marks: which regions take them,
  *  optionally what a mark is allowed to mean, and optionally where they live. */
 export interface AnnotationsCapability<TS = unknown, TC = unknown> {
-  targets: (state: TS, config: TC) => readonly AnnotationTarget[];
+  /** `trial` is which trial is asking: a declaration made once per instrument
+   *  is called once per trial, and its targets are that trial's own. */
+  targets: (state: TS, config: TC, trial: TrialInfo) => readonly AnnotationTarget[];
   meaning?: AnnotationMeaning;
   storage?: AnnotationStorage;
   /** Fires after every finished export, labkit's own chrome included. A

package/src/canvas/useOrbit.test.ts

@@ -133,14 +133,18 @@ describe('useOrbit dragging', () => {
     expect(getView()).toEqual(orbitAfterDrag(view, 100, 50));
   });
 
-  it('ends the drag when capture is lost mid-gesture', () => {
+  // The other half of the rule — a detached origin does cancel — is owned by
+  // pointerSession.test.ts, which exercises it without React in the way.
+  it('keeps turning when capture is lost and the element is still in the document', () => {
     const { result, el, getView } = dragSetup();
     act(() => result.current.onPointerDown(press(el, 100, 100)));
     dispatchOn(document, 'pointermove', { buttons: 1, clientX: 200, clientY: 150 });
+    // Chrome releases capture a beat before it delivers pointerup, so ending
+    // here throws away a release that has already been dispatched.
     dispatchOn(el, 'lostpointercapture', {});
-    expect(result.current.isDragging()).toBe(false);
+    expect(result.current.isDragging()).toBe(true);
     dispatchOn(document, 'pointermove', { buttons: 1, clientX: 400, clientY: 400 });
-    expect(getView()).toEqual(orbitAfterDrag(view, 100, 50));
+    expect(getView()).toEqual(orbitAfterDrag(view, 300, 300));
   });
 
   it('reads a move with nothing held as the release that never arrived', () => {

package/src/canvas/usePanZoom.test.ts

@@ -165,14 +165,18 @@ describe('usePanZoom dragging', () => {
     expect(getView().pan).toEqual({ x: 50, y: 20 });
   });
 
-  it('ends the drag when capture is lost mid-gesture', () => {
+  // The other half of the rule — a detached origin does cancel — is owned by
+  // pointerSession.test.ts, which exercises it without React in the way.
+  it('keeps panning when capture is lost and the element is still in the document', () => {
     const { result, el, getView } = dragSetup();
     act(() => result.current.onPointerDown(press(el, 100, 100)));
     dispatchOn(document, 'pointermove', { buttons: 1, clientX: 150, clientY: 120 });
+    // Chrome releases capture a beat before it delivers pointerup, so ending
+    // here throws away a release that has already been dispatched.
     dispatchOn(el, 'lostpointercapture', {});
-    expect(result.current.isDragging()).toBe(false);
+    expect(result.current.isDragging()).toBe(true);
     dispatchOn(document, 'pointermove', { buttons: 1, clientX: 400, clientY: 400 });
-    expect(getView().pan).toEqual({ x: 50, y: 20 });
+    expect(getView().pan).toEqual({ x: 300, y: 300 });
   });
 
   it('reads a move with nothing held as the release that never arrived', () => {

package/src/chrome/ChromeRegions.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { CrosshairIcon, HandIcon, PencilIcon } from '@weasel-js/ui';
+import { CrosshairIcon, HandIcon, PencilIcon, SnapshotIcon } from '@weasel-js/ui';
 import type { ConfigField } from '../controls/types';
 import type { Instrument } from '../instrument/types';
 import { Lab } from '../lab/Lab';
@@ -104,3 +104,44 @@ export const SuppressedAndReplaced: Story = {
     ],
   },
 };
+
+const SUBJECTS = ['Ash', 'Birch', 'Cedar'];
+
+/** A trial titled by its subject rather than its instrument, with the leading
+ *  end of the title bar carrying the control that renames it — and the
+ *  snapshot built-in re-declared into the toolbar, which needs the context
+ *  `onActivate` is handed. */
+export const SubjectTitleAndLead: Story = {
+  args: {
+    instruments: [FullInstrument],
+    defaultInstrument: 'Every Region',
+    title: 'Title Bar Lead',
+    storage: null,
+    suppress: ['snapshot'],
+    chrome: [
+      {
+        id: 'subject',
+        region: 'titlebar',
+        item: {
+          icon: PencilIcon,
+          label: 'Next subject',
+          onActivate: (ctx) => {
+            const i = SUBJECTS.indexOf(ctx.title);
+            ctx.setTitle(SUBJECTS[(i + 1) % SUBJECTS.length]);
+          },
+        },
+      },
+      {
+        id: 'snapshot-in-toolbar',
+        region: 'toolbar',
+        group: 'trial',
+        item: {
+          icon: SnapshotIcon,
+          label: 'Snapshot',
+          showLabel: true,
+          onActivate: (ctx) => ctx.saveSnapshot(),
+        },
+      },
+    ],
+  },
+};

package/src/chrome/builtins.test.ts

@@ -9,9 +9,13 @@ import type { TrialChromeContext } from './types';
 const ctx: TrialChromeContext = {
   trialId: 't1',
   undockedPanels: [],
+  collapsedSections: {},
+  setSectionCollapsed: () => {},
   undockPanel: () => {},
   dockPanel: () => {},
   instrumentName: 'Stub',
+  title: 'Stub',
+  setTitle: () => {},
   isLastTrial: false,
   zoom: 1,
   setZoom: () => {},

package/src/chrome/builtins.tsx

@@ -24,6 +24,22 @@ import type { TrialChromeContext, TrialContribution } from './types';
 
 const ZOOM_STEP = 1.25;
 
+/** The property groups inside a contribution are folded under keys prefixed
+ *  with that contribution's id, so a group called `marks` cannot fold the
+ *  sidebar section of the same name. `ControlPanel` keys by bare label, so the
+ *  prefix goes on here and comes off again. */
+function groupFolds(
+  collapsedSections: Readonly<Record<string, boolean>>,
+  id: string,
+): Record<string, boolean> {
+  const prefix = `${id}/`;
+  const out: Record<string, boolean> = {};
+  for (const [key, value] of Object.entries(collapsedSections)) {
+    if (key.startsWith(prefix)) out[key.slice(prefix.length)] = value;
+  }
+  return out;
+}
+
 /**
  * The contributions a trial gets from what its instrument declared. This is
  * the whole "declaring a capability provides the chrome" rule — it replaces
@@ -180,6 +196,8 @@ export function builtinContributions(
             config={ctx.config as Record<string, unknown>}
             setConfig={(key, value) => ctx.setConfig(String(key), value)}
             renderers={controls}
+            collapsed={groupFolds(ctx.collapsedSections, 'settings')}
+            onCollapse={(label, next) => ctx.setSectionCollapsed(`settings/${label}`, next)}
           />
         ),
       },

package/src/chrome/index.ts

@@ -6,7 +6,7 @@ export type { SidebarRegionProps } from './regions/SidebarRegion';
 export { SidebarRegion } from './regions/SidebarRegion';
 export type { StatusRegionProps } from './regions/StatusRegion';
 export { StatusRegion } from './regions/StatusRegion';
-export type { TitleBarRegionProps } from './regions/TitleBarRegion';
+export type { TitleBarPlacement, TitleBarRegionProps } from './regions/TitleBarRegion';
 export { TitleBarRegion } from './regions/TitleBarRegion';
 export type { ToolbarRegionProps } from './regions/ToolbarRegion';
 export { ToolbarRegion } from './regions/ToolbarRegion';

package/src/chrome/regions/SidebarRegion.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import { useState } from 'react';
 import type { SidebarSection, TrialChromeContext, TrialContribution } from '../types';
 
 /** Props for `<SidebarRegion>`. */
@@ -10,16 +9,17 @@ export interface SidebarRegionProps {
 
 function Section({
   title,
-  defaultCollapsed,
+  collapsed,
+  onCollapsedChange,
   onUndock,
   children,
 }: {
   title: string;
-  defaultCollapsed: boolean;
+  collapsed: boolean;
+  onCollapsedChange: (collapsed: boolean) => void;
   onUndock?: () => void;
   children: ReactNode;
 }) {
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
   return (
     <section className="lk-sidebar-section">
       <div className="lk-sidebar-section__bar">
@@ -27,7 +27,7 @@ function Section({
           type="button"
           className="lk-sidebar-section__head"
           aria-expanded={!collapsed}
-          onClick={() => setCollapsed((c) => !c)}
+          onClick={() => onCollapsedChange(!collapsed)}
         >
           {title}
         </button>
@@ -64,7 +64,8 @@ export function SidebarRegion({ contributions, ctx }: SidebarRegionProps) {
           <Section
             key={c.id}
             title={item.title}
-            defaultCollapsed={item.defaultCollapsed ?? false}
+            collapsed={ctx.collapsedSections[c.id] ?? item.defaultCollapsed ?? false}
+            onCollapsedChange={(next) => ctx.setSectionCollapsed(c.id, next)}
             onUndock={
               item.undockable === false
                 ? undefined

package/src/chrome/regions/TitleBarRegion.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { TrialChromeContext, TrialContribution } from '../types';
+import { TitleBarRegion } from './TitleBarRegion';
+
+const Glyph = () => <svg />;
+const ctx = { trialId: 't1', saveSnapshot: vi.fn() } as unknown as TrialChromeContext;
+
+function item(id: string, over: Partial<TrialContribution> = {}): TrialContribution {
+  return {
+    id,
+    region: 'titlebar',
+    item: { icon: Glyph, label: id, onActivate: () => {} },
+    ...over,
+  } as TrialContribution;
+}
+
+describe('TitleBarRegion', () => {
+  it('renders nothing when it has nothing for its placement', () => {
+    const { container } = render(<TitleBarRegion contributions={[item('lead')]} ctx={ctx} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('takes the contributions that set `end` into the actions span', () => {
+    const { container } = render(
+      <TitleBarRegion contributions={[item('lead'), item('close', { end: true })]} ctx={ctx} />,
+    );
+    expect(container.querySelector('.lk-trial__titlebar-actions')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'close' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'lead' })).toBeNull();
+  });
+
+  it('takes the rest into the lead span', () => {
+    const { container } = render(
+      <TitleBarRegion
+        placement="lead"
+        contributions={[item('lead'), item('close', { end: true })]}
+        ctx={ctx}
+      />,
+    );
+    expect(container.querySelector('.lk-trial__titlebar-lead')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'lead' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'close' })).toBeNull();
+  });
+
+  it('hands onActivate the chrome context', () => {
+    const onActivate = vi.fn();
+    render(
+      <TitleBarRegion
+        contributions={[
+          {
+            id: 'go',
+            region: 'titlebar',
+            end: true,
+            item: { icon: Glyph, label: 'Go', onActivate },
+          },
+        ]}
+        ctx={ctx}
+      />,
+    );
+    screen.getByRole('button', { name: 'Go' }).click();
+    expect(onActivate).toHaveBeenCalledWith(ctx);
+  });
+});

package/src/chrome/regions/TitleBarRegion.tsx

@@ -1,16 +1,23 @@
 import type { ReactNode } from 'react';
 import type { TrialChromeContext, TrialContribution } from '../types';
 
+/** Which end of the title bar a `<TitleBarRegion>` lays out: `'lead'` renders
+ *  the contributions that leave `end` unset, before the title; `'actions'`
+ *  renders the ones that set it, after everything else. */
+export type TitleBarPlacement = 'lead' | 'actions';
+
 /** Props for `<TitleBarRegion>`. */
 export interface TitleBarRegionProps {
   contributions: readonly TrialContribution[];
   ctx: TrialChromeContext;
+  /** Defaults to `'actions'`, where the built-ins live. */
+  placement?: TitleBarPlacement;
 }
 
 function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
   if (c.render) return <span key={c.id}>{c.render(ctx)}</span>;
   if (c.region !== 'titlebar' || !c.item) return null;
-  const { icon: Icon, label, shortcut, disabled, danger } = c.item;
+  const { icon: Icon, label, shortcut, disabled, danger, onActivate } = c.item;
   return (
     <button
       key={c.id}
@@ -19,7 +26,7 @@ function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
       disabled={disabled}
       aria-label={label}
       title={shortcut ? `${label} (${shortcut})` : label}
-      onClick={c.item.onActivate}
+      onClick={() => onActivate(ctx)}
       // The bar behind these buttons is the window drag surface, so a press
       // that lands here must not also start a drag.
       onPointerDown={(e) => e.stopPropagation()}
@@ -30,12 +37,14 @@ function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
   );
 }
 
-/** Lays a trial's `titlebar` contributions out, at the far end of the bar. */
-export function TitleBarRegion({ contributions, ctx }: TitleBarRegionProps) {
-  if (contributions.length === 0) return null;
+/** Lays a trial's `titlebar` contributions out at one end of the bar. */
+export function TitleBarRegion({ contributions, ctx, placement = 'actions' }: TitleBarRegionProps) {
+  const wanted = placement === 'actions';
+  const mine = contributions.filter((c) => (c.end ?? false) === wanted);
+  if (mine.length === 0) return null;
   return (
-    <span className="lk-trial__titlebar-actions">
-      {contributions.map((c) => renderEntry(c, ctx))}
+    <span className={wanted ? 'lk-trial__titlebar-actions' : 'lk-trial__titlebar-lead'}>
+      {mine.map((c) => renderEntry(c, ctx))}
     </span>
   );
 }

package/src/chrome/regions/ToolbarRegion.test.tsx

@@ -42,6 +42,20 @@ describe('ToolbarRegion', () => {
     expect(onActivate).toHaveBeenCalledOnce();
   });
 
+  it('hands onActivate the chrome context', () => {
+    const onActivate = vi.fn();
+    render(
+      <ToolbarRegion
+        contributions={[
+          { id: 'snap', region: 'toolbar', item: { icon: Glyph, label: 'Snap', onActivate } },
+        ]}
+        ctx={ctx}
+      />,
+    );
+    screen.getByRole('button', { name: 'Snap' }).click();
+    expect(onActivate).toHaveBeenCalledWith(ctx);
+  });
+
   it('groups contributions sharing a group into one group element', () => {
     render(
       <ToolbarRegion

package/src/chrome/regions/ToolbarRegion.tsx

@@ -38,7 +38,7 @@ function groupsOf(contributions: readonly TrialContribution[]): Group[] {
 function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
   if (c.render) return <span key={c.id}>{c.render(ctx)}</span>;
   if (c.region !== 'toolbar' || !c.item) return null;
-  const { icon: Icon, label, shortcut, disabled, danger, showLabel, pressed } = c.item;
+  const { icon: Icon, label, shortcut, disabled, danger, showLabel, pressed, onActivate } = c.item;
   return (
     <Toolbar.Button
       key={c.id}
@@ -48,7 +48,7 @@ function renderEntry(c: TrialContribution, ctx: TrialChromeContext): ReactNode {
       pressed={pressed}
       aria-label={label}
       title={shortcut ? `${label} (${shortcut})` : label}
-      onClick={c.item.onActivate}
+      onClick={() => onActivate(ctx)}
     >
       <Icon size={16} />
       {showLabel ? <span>{label}</span> : null}

package/src/chrome/regions/ViewportRegion.tsx

@@ -25,7 +25,7 @@ export function ViewportRegion({ contributions, ctx }: ViewportRegionProps) {
       {contributions.map((c) => {
         if (c.render) return <span key={c.id}>{c.render(ctx)}</span>;
         if (c.region !== 'viewport' || !c.item) return null;
-        const { icon: Icon, label, disabled } = c.item;
+        const { icon: Icon, label, disabled, onActivate } = c.item;
         return (
           <button
             key={c.id}
@@ -34,7 +34,7 @@ export function ViewportRegion({ contributions, ctx }: ViewportRegionProps) {
             aria-label={label}
             title={label}
             disabled={disabled}
-            onClick={c.item.onActivate}
+            onClick={() => onActivate(ctx)}
           >
             <Icon size={16} />
           </button>

package/src/chrome/regions/regions.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import type { TrialChromeContext, TrialContribution } from '../types';
 import { SidebarRegion } from './SidebarRegion';
@@ -9,6 +9,8 @@ const Glyph = () => <svg />;
 const ctx = {
   trialId: 't1',
   undockedPanels: [],
+  collapsedSections: {},
+  setSectionCollapsed: () => {},
   undockPanel: () => {},
   dockPanel: () => {},
 } as unknown as TrialChromeContext;
@@ -45,6 +47,34 @@ describe('SidebarRegion', () => {
     );
     expect(screen.queryByText('hidden')).not.toBeInTheDocument();
   });
+
+  it('takes the trial’s remembered fold over the section’s default', () => {
+    render(
+      <SidebarRegion
+        contributions={[
+          {
+            id: 's',
+            region: 'sidebar',
+            item: { title: 'S', defaultCollapsed: true, body: <p>shown</p> },
+          },
+        ]}
+        ctx={{ ...ctx, collapsedSections: { s: false } }}
+      />,
+    );
+    expect(screen.getByText('shown')).toBeInTheDocument();
+  });
+
+  it('reports a toggle rather than keeping the fold itself', () => {
+    const setSectionCollapsed = vi.fn();
+    render(
+      <SidebarRegion
+        contributions={[{ id: 's', region: 'sidebar', item: { title: 'S', body: <p>body</p> } }]}
+        ctx={{ ...ctx, setSectionCollapsed }}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'S' }));
+    expect(setSectionCollapsed).toHaveBeenCalledWith('s', true);
+  });
 });
 
 describe('StatusRegion', () => {
@@ -83,4 +113,18 @@ describe('ViewportRegion', () => {
     screen.getByRole('button', { name: 'Fit' }).click();
     expect(onActivate).toHaveBeenCalledOnce();
   });
+
+  it('hands onActivate the chrome context', () => {
+    const onActivate = vi.fn();
+    render(
+      <ViewportRegion
+        contributions={[
+          { id: 'fit', region: 'viewport', item: { icon: Glyph, label: 'Fit', onActivate } },
+        ]}
+        ctx={ctx}
+      />,
+    );
+    screen.getByRole('button', { name: 'Fit' }).click();
+    expect(onActivate).toHaveBeenCalledWith(ctx);
+  });
 });

package/src/chrome/types.ts

@@ -24,7 +24,10 @@ export interface ToolbarItem {
   pressed?: boolean;
   /** Render the label beside the glyph rather than only in the tooltip. */
   showLabel?: boolean;
-  onActivate: () => void;
+  /** Handed the trial's chrome context, so a contribution declared from the
+   *  lab can reach `ctx.saveSnapshot()` and the rest without the `render`
+   *  escape. A zero-argument handler stays valid. */
+  onActivate: (ctx: TrialChromeContext) => void;
 }
 
 /** A selectable tool in the palette region. */
@@ -38,7 +41,7 @@ export interface ToolItem {
 /** A titled block in the sidebar. */
 export interface SidebarSection {
   title: string;
-  /** Starts collapsed. The open/closed state itself is the region's. */
+  /** Starts collapsed, until the trial remembers a fold of its own. */
   defaultCollapsed?: boolean;
   /** Offer the tear-out control. On by default; a section that only makes
    *  sense beside its trial sets this false. */
@@ -53,7 +56,8 @@ export interface ViewportControl {
   icon: IconComponent;
   label: string;
   disabled?: boolean;
-  onActivate: () => void;
+  /** Handed the trial's chrome context, as `ToolbarItem.onActivate` is. */
+  onActivate: (ctx: TrialChromeContext) => void;
 }
 
 /** A readout in the status bar. */
@@ -100,6 +104,12 @@ export type TrialContribution =
 export interface TrialChromeContext {
   trialId: string;
   instrumentName: string;
+  /** What the title bar reads, which is the instrument's name until something
+   *  calls `setTitle`. */
+  title: string;
+  /** Retitle this trial; `null` restores the instrument name. Persisted with
+   *  the trial, so a title survives a reload. */
+  setTitle: (title: string | null) => void;
   isLastTrial: boolean;
 
   /** Null when the trial holds a view that is not the 2D one. */
@@ -125,6 +135,14 @@ export interface TrialChromeContext {
   config: unknown;
   setConfig: (key: string, value: unknown) => void;
 
+  /** Which of this trial's collapsible sections are folded. A sidebar
+   *  section's key is its contribution id; a section *inside* a contribution —
+   *  a control panel's property group — is keyed `<contribution id>/<label>`.
+   *  A section absent here is at its own default. Persisted with the trial. */
+  collapsedSections: Readonly<Record<string, boolean>>;
+  /** Fold or unfold one section, keyed as `collapsedSections` is. */
+  setSectionCollapsed: (key: string, collapsed: boolean) => void;
+
   /** Section ids this trial currently has torn out of its sidebar. */
   undockedPanels: readonly string[];
   /** Tear a sidebar section out into the workspace. */

package/src/controls/ControlPanel.test.tsx

@@ -443,3 +443,41 @@ describe('<ControlPanel> suffix', () => {
     expect(container.textContent).toContain('px');
   });
 });
+
+describe('<ControlPanel> collapsible sections', () => {
+  const schema = resolveConfigSchema(
+    f.schema({ showGrid: f.boolean(true), seed: f.number(0).section('Advanced') }),
+    [],
+  );
+  const config = { showGrid: true, seed: 0 };
+
+  it('draws no twisty by default', () => {
+    render(<ControlPanel schema={schema} config={config} setConfig={vi.fn()} />);
+    expect(screen.queryByRole('button', { name: 'Advanced' })).toBeNull();
+    expect(screen.getByLabelText('Seed')).toBeVisible();
+  });
+
+  it('folds a section away when the panel starts closed', () => {
+    render(<ControlPanel schema={schema} config={config} setConfig={vi.fn()} collapse="closed" />);
+    expect(screen.getByLabelText('Seed')).not.toBeVisible();
+    fireEvent.click(screen.getByRole('button', { name: 'Advanced' }));
+    expect(screen.getByLabelText('Seed')).toBeVisible();
+  });
+
+  it('hands a controlled panel its toggles instead of acting on them', () => {
+    const onCollapse = vi.fn();
+    render(
+      <ControlPanel
+        schema={schema}
+        config={config}
+        setConfig={vi.fn()}
+        collapsed={{ Advanced: true }}
+        onCollapse={onCollapse}
+      />,
+    );
+    expect(screen.getByLabelText('Seed')).not.toBeVisible();
+    fireEvent.click(screen.getByRole('button', { name: 'Advanced' }));
+    expect(onCollapse).toHaveBeenCalledWith('Advanced', false);
+    expect(screen.getByLabelText('Seed')).not.toBeVisible();
+  });
+});