@weasel-js/labkit 1.2.0 → 1.3.0-pre.0

package/src/trial/Trial.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import type { Instrument } from '../instrument/types';
@@ -6,92 +6,9 @@ import { Lab } from '../lab/Lab';
 import { LabContext, type LabContextValue } from '../lab/LabContext';
 import { LabStoreContext } from '../state/context';
 import { createLabStore } from '../state/store';
-import type { TrialRecord } from '../state/types';
-import { DefaultToolbar } from './DefaultToolbar';
-import type { TrialToolbarContext } from './slotTypes';
+import type { SavedSnapshot, TrialRecord } from '../state/types';
 import { TrialChrome } from './TrialChrome';
 
-function makeCtx(overrides: Partial<TrialToolbarContext> = {}): TrialToolbarContext {
-  return {
-    trialId: 'ws-1',
-    instrumentName: 'Stub',
-    hasUndo: false,
-    canUndo: false,
-    canRedo: false,
-    undo: vi.fn(),
-    redo: vi.fn(),
-    zoom: 1,
-    setZoom: vi.fn(),
-    zoomIn: vi.fn(),
-    zoomOut: vi.fn(),
-    resetZoom: vi.fn(),
-    hasCanvas: false,
-    savedSnapshots: [],
-    saveSnapshot: vi.fn(),
-    loadSnapshot: vi.fn(),
-    clone: vi.fn(),
-    reset: vi.fn(),
-    close: vi.fn(),
-    isLastTrial: false,
-    ...overrides,
-  };
-}
-
-describe('<DefaultToolbar>', () => {
-  it('renders close button', () => {
-    render(<DefaultToolbar ctx={makeCtx()} />);
-    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
-  });
-
-  it('disables close when isLastTrial is true', () => {
-    render(<DefaultToolbar ctx={makeCtx({ isLastTrial: true })} />);
-    expect(screen.getByRole('button', { name: /close/i })).toBeDisabled();
-  });
-
-  it('omits undo/redo buttons when hasUndo is false', () => {
-    render(<DefaultToolbar ctx={makeCtx({ hasUndo: false })} />);
-    expect(screen.queryByRole('button', { name: /undo/i })).toBeNull();
-    expect(screen.queryByRole('button', { name: /redo/i })).toBeNull();
-  });
-
-  it('shows undo/redo buttons when hasUndo is true', () => {
-    render(<DefaultToolbar ctx={makeCtx({ hasUndo: true, canUndo: true, canRedo: false })} />);
-    expect(screen.getByRole('button', { name: /undo/i })).not.toBeDisabled();
-    expect(screen.getByRole('button', { name: /redo/i })).toBeDisabled();
-  });
-
-  it('omits zoom buttons when hasCanvas is false', () => {
-    render(<DefaultToolbar ctx={makeCtx({ hasCanvas: false })} />);
-    expect(screen.queryByTitle('Zoom in')).toBeNull();
-    expect(screen.queryByTitle('Zoom out')).toBeNull();
-  });
-
-  it('shows zoom controls when hasCanvas is true', () => {
-    render(<DefaultToolbar ctx={makeCtx({ hasCanvas: true, zoom: 1.5 })} />);
-    expect(screen.getByTitle('Zoom in')).toBeInTheDocument();
-    expect(screen.getByTitle('Zoom out')).toBeInTheDocument();
-    expect(screen.getByText('150%')).toBeInTheDocument();
-  });
-
-  it('shows load select when snapshots exist', () => {
-    const ctx = makeCtx({
-      savedSnapshots: [
-        {
-          id: 's1',
-          name: 'First',
-          trialId: 'ws-1',
-          instrumentName: 'Stub',
-          config: {},
-          state: {},
-          savedAt: 1,
-        },
-      ],
-    });
-    render(<DefaultToolbar ctx={ctx} />);
-    expect(screen.getByRole('combobox', { name: /load snapshot/i })).toBeInTheDocument();
-  });
-});
-
 const stubInstrument: Instrument = {
   name: 'Stub',
   defaultConfig: () => ({}),
@@ -113,6 +30,7 @@ type ChromeProps = Parameters<typeof TrialChrome>[0];
 function ChromeHarness({
   children,
   labOverrides,
+  instrument = stubInstrument,
   ...props
 }: { children?: ReactNode; labOverrides?: Partial<LabContextValue> } & Partial<ChromeProps>) {
   const store = createLabStore({
@@ -120,7 +38,7 @@ function ChromeHarness({
     storage: { read: () => null, write: () => {} },
   });
   const labCtx: LabContextValue = {
-    instruments: [stubInstrument],
+    instruments: [instrument],
     trials: [stubRecord],
     addTrial: vi.fn(),
     cloneTrial: vi.fn(),
@@ -141,7 +59,7 @@ function ChromeHarness({
         <TrialChrome
           trialId="ws-1"
           record={stubRecord}
-          instrument={stubInstrument}
+          instrument={instrument}
           isLastTrial={false}
           {...props}
         >
@@ -158,15 +76,47 @@ describe('<TrialChrome>', () => {
     expect(screen.getByTestId('content')).toBeInTheDocument();
   });
 
-  it('renders default toolbar when no toolbar prop is given', () => {
+  it('renders the built-in trial actions', () => {
+    render(<ChromeHarness />);
+    expect(screen.getByRole('button', { name: 'Close trial' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Clone trial' })).toBeInTheDocument();
+  });
+
+  it('disables close on the last trial', () => {
+    render(<ChromeHarness isLastTrial />);
+    expect(screen.getByRole('button', { name: /close/i })).toBeDisabled();
+  });
+
+  it('omits undo and redo unless the instrument declares undo', () => {
     render(<ChromeHarness />);
-    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Undo' })).toBeNull();
+    render(
+      <ChromeHarness
+        instrument={{ ...stubInstrument, undo: {} }}
+        undoBindings={{ canUndo: true, canRedo: false, undo: vi.fn(), redo: vi.fn() }}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Undo' })).not.toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Redo' })).toBeDisabled();
+  });
+
+  it('offers the snapshot loader once a snapshot exists', () => {
+    const snapshot: SavedSnapshot = {
+      id: 's1',
+      name: 'First',
+      trialId: 'ws-1',
+      instrumentName: 'Stub',
+      config: {},
+      state: {},
+      savedAt: 1,
+    };
+    render(<ChromeHarness labOverrides={{ savedSnapshots: [snapshot] }} />);
+    expect(screen.getByRole('button', { name: /load snapshot/i })).toBeInTheDocument();
   });
 
-  it('renders custom toolbar when toolbar prop is provided', () => {
-    render(<ChromeHarness toolbar={() => <div data-testid="custom-toolbar">custom</div>} />);
-    expect(screen.getByTestId('custom-toolbar')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /close/i })).toBeNull();
+  it('renders a consumer contribution alongside the built-ins', () => {
+    render(<ChromeHarness chrome={[{ id: 'mine', region: 'status', item: { text: 'ready' } }]} />);
+    expect(screen.getByText('ready')).toBeInTheDocument();
   });
 
   it('Cmd+S triggers saveSnapshot', () => {
@@ -178,10 +128,31 @@ describe('<TrialChrome>', () => {
   });
 });
 
-describe('<Lab> + TrialChrome integration', () => {
+describe('chrome regions in a mounted lab', () => {
+  function renderLabWith(instrument: Instrument) {
+    return render(<Lab title="T" instruments={[instrument]} defaultInstrument={instrument.name} />);
+  }
+
+  it('puts zoom in the viewport region and not in the toolbar', () => {
+    renderLabWith({ ...stubInstrument, canvas: { layers: [] }, undo: {} });
+    const toolbar = document.querySelector('.lk-trial__toolbar') as HTMLElement;
+    const viewport = document.querySelector('.lk-viewport-controls') as HTMLElement;
+    expect(within(viewport).getByRole('button', { name: 'Zoom in' })).toBeInTheDocument();
+    expect(within(toolbar).queryByRole('button', { name: 'Zoom in' })).toBeNull();
+  });
+
+  it('renders no undo group for an instrument that does not declare undo', () => {
+    renderLabWith({ ...stubInstrument, canvas: { layers: [] } });
+    expect(screen.queryByRole('button', { name: 'Undo' })).toBeNull();
+  });
+
+  it('renders no viewport region for an instrument with no canvas', () => {
+    renderLabWith(stubInstrument);
+    expect(document.querySelector('.lk-viewport-controls')).toBeNull();
+  });
+
   it('Lab provides context for nested TrialChrome', () => {
-    render(<Lab instruments={[stubInstrument]} defaultInstrument="Stub" />);
-    // Lab seeds a trial; no chrome rendered without children — sanity check Lab mounts.
+    renderLabWith(stubInstrument);
     expect(document.querySelector('.lk-lab')).toBeTruthy();
   });
 });

package/src/trial/Trial.tsx

@@ -2,14 +2,10 @@ import { type ReactNode, useContext, useMemo, useRef, useState } from 'react';
 import { useStore } from 'zustand/react';
 import { CanvasStack } from '../canvas/CanvasStack';
 import type { CanvasLayerDescriptor } from '../canvas/useLayerScheduler';
+import type { TrialContribution } from '../chrome/types';
 import { DragOverlay, useDragDrop } from '../dragdrop/DragDropRuntime';
 import { Palette } from '../dragdrop/Palette';
-import type {
-  Instrument,
-  LayerDescriptor,
-  PaletteItem,
-  RenderContext,
-} from '../instrument/types';
+import type { Instrument, LayerDescriptor, PaletteItem, RenderContext } from '../instrument/types';
 import { useJob } from '../job/useJob';
 import { useLabContext } from '../lab/LabContext';
 import { LayerList } from '../layers/LayerList';
@@ -25,11 +21,16 @@ import { TrialChrome } from './TrialChrome';
 /** Props for `<Trial>`. */
 export interface TrialProps {
   id: string;
+  /** Contributions the lab adds to this trial's chrome, merged after the
+   *  instrument's own. */
+  chrome?: readonly TrialContribution[];
+  /** Built-in contribution ids to drop. Throws on an id that is not there. */
+  suppress?: readonly string[];
 }
 
 /** Renders one trial from the lab store: looks up its record and
  *  instrument, and mounts the instrument inside the trial chrome. */
-export function Trial({ id }: TrialProps) {
+export function Trial({ id, chrome, suppress }: TrialProps) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error('[labkit] <Trial> requires <LabStoreProvider>');
@@ -49,6 +50,8 @@ export function Trial({ id }: TrialProps) {
       instrument={instrument}
       store={storeCtx.store}
       isLast={lab.trials.length <= 1}
+      chrome={chrome}
+      suppress={suppress}
     />
   );
 }
@@ -58,14 +61,19 @@ interface TrialRuntimeProps {
   instrument: Instrument;
   store: LabStore;
   isLast: boolean;
+  chrome?: readonly TrialContribution[];
+  suppress?: readonly string[];
 }
 
-function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps) {
+function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: TrialRuntimeProps) {
   const canvasContainerRef = useRef<HTMLDivElement | null>(null);
   const updateTrialState = useStore(store, (s) => s.updateTrialState);
   const updateTrialConfig = useStore(store, (s) => s.updateTrialConfig);
   const updateTrialView = useStore(store, (s) => s.updateTrialView);
   const updateTrialUndoStack = useStore(store, (s) => s.updateTrialUndoStack);
+  const labToolId = useStore(store, (s) => s.activeToolId);
+  const setLabTool = useStore(store, (s) => s.setLabTool);
+  const setTrialTool = useStore(store, (s) => s.setTrialTool);
 
   const busRef = useRef<EventBus | null>(null);
   if (busRef.current === null) busRef.current = createEventBus();
@@ -88,6 +96,17 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
 
   const setView = (v: unknown): void => updateTrialView(record.id, v);
 
+  // A trial gets its own slot when its instrument declares tools; otherwise it
+  // reads the lab's. Which slot a change writes follows from the same thing.
+  const declaresTools = instrument.tools != null;
+  const resolvedToolId = declaresTools
+    ? (record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? null)
+    : labToolId;
+  const setActiveTool = (id: string): void => {
+    if (declaresTools) setTrialTool(record.id, id);
+    else setLabTool(id);
+  };
+
   // `CanvasStack` and the zoom controls are 2D; a trial holding another view shape
   // gets the default here and simply never renders them.
   const view2d = as2DView(record.view);
@@ -127,6 +146,7 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
         if (!view2d) return;
         updateTrialView(record.id, { ...view2d, zoom: z });
       },
+      activeToolId: resolvedToolId,
     },
     emit: (event) => {
       snapshotIfNeeded(event);
@@ -175,7 +195,7 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
 
   const layerDescriptors: LayerDescriptor[] = useMemo(() => {
     if (!instrument.layers) return [];
-    return instrument.layers.ids.map((lid) => ({ id: lid, label: lid }));
+    return instrument.layers.ids.map((l) => (typeof l === 'string' ? { id: l, label: l } : l));
   }, [instrument.layers]);
 
   const dragDropResult = useDragDrop({
@@ -228,15 +248,13 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
   let body: ReactNode;
   if (instrument.canvas) {
     body = (
-      <div
-        ref={canvasContainerRef}
-        className="lk-trial__canvas-host"
-        style={{ width: '100%', height: '100%', position: 'relative' }}
-      >
+      <div ref={canvasContainerRef} className="lk-trial__canvas-host">
         <CanvasStack
           layers={layersWithFeedback}
           view={view2d ?? DEFAULT_VIEW}
           onViewChange={setView}
+          minZoom={instrument.canvas.minZoom}
+          maxZoom={instrument.canvas.maxZoom}
         >
           {instrument.render(renderCtx)}
         </CanvasStack>
@@ -247,26 +265,50 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
     body = instrument.render(renderCtx);
   }
 
-  const paletteNode =
-    paletteItems.length > 0 ? (
-      <Palette items={paletteItems} onDragStart={dragDropResult.startDrag} />
-    ) : null;
+  const startDrag = dragDropResult.startDrag;
+  const paletteNode = useMemo(
+    () =>
+      paletteItems.length > 0 ? <Palette items={paletteItems} onDragStart={startDrag} /> : null,
+    [paletteItems, startDrag],
+  );
+
+  const layerListNode = useMemo(
+    () =>
+      instrument.layers && layerDescriptors.length > 0 ? (
+        <LayerList
+          layers={layerDescriptors}
+          visibility={layerVisibility}
+          onReorder={(next) => {
+            setLayerOrder(next.map((l) => l.id));
+            bus.emit('layers.reorder');
+          }}
+          onToggle={(lid, visible) => {
+            setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
+            bus.emit('layers.toggle');
+          }}
+        />
+      ) : null,
+    [instrument.layers, layerDescriptors, layerVisibility, bus],
+  );
 
-  const layerListNode =
-    instrument.layers && layerDescriptors.length > 0 ? (
-      <LayerList
-        layers={layerDescriptors}
-        visibility={layerVisibility}
-        onReorder={(next) => {
-          setLayerOrder(next.map((l) => l.id));
-          bus.emit('layers.reorder');
-        }}
-        onToggle={(lid, visible) => {
-          setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
-          bus.emit('layers.toggle');
-        }}
-      />
-    ) : null;
+  const extraChrome = useMemo<TrialContribution[]>(() => {
+    const out: TrialContribution[] = [];
+    if (paletteNode) {
+      out.push({
+        id: 'dragdrop-palette',
+        region: 'sidebar',
+        item: { title: 'Parts', body: paletteNode },
+      });
+    }
+    if (layerListNode) {
+      out.push({
+        id: 'layer-list',
+        region: 'sidebar',
+        item: { title: 'Layers', body: layerListNode },
+      });
+    }
+    return out;
+  }, [paletteNode, layerListNode]);
 
   return (
     <TrialChrome
@@ -276,12 +318,11 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
       instrument={instrument}
       isLastTrial={isLast}
       undoBindings={undoBindings}
-      sidebarExtras={
-        <>
-          {paletteNode}
-          {layerListNode}
-        </>
-      }
+      trialChrome={extraChrome}
+      chrome={chrome}
+      suppress={suppress}
+      activeToolId={resolvedToolId}
+      setActiveTool={setActiveTool}
     >
       {body}
     </TrialChrome>

package/src/trial/TrialChrome.tsx

@@ -1,22 +1,23 @@
 import { type KeyboardEvent, type ReactNode, useContext, useMemo } from 'react';
 import { useStore } from 'zustand/react';
+import { builtinContributions } from '../chrome/builtins';
+import { mergeContributions, suppressContributions } from '../chrome/merge';
+import { PaletteRegion } from '../chrome/regions/PaletteRegion';
+import { SidebarRegion } from '../chrome/regions/SidebarRegion';
+import { StatusRegion } from '../chrome/regions/StatusRegion';
+import { TitleBarRegion } from '../chrome/regions/TitleBarRegion';
+import { ToolbarRegion } from '../chrome/regions/ToolbarRegion';
+import { ViewportRegion } from '../chrome/regions/ViewportRegion';
+import type { TrialChromeContext, TrialContribution, TrialRegion } from '../chrome/types';
+import { useConfigSchema } from '../config/useConfigSchema';
 import type { Instrument } from '../instrument/types';
 import type { JobHandle } from '../job/types';
 import { useLabContext } from '../lab/LabContext';
+import { JobProgress } from '../primitives/JobProgress';
 import { LabStoreContext } from '../state/context';
 import type { TrialRecord } from '../state/types';
 import { as2DView } from '../state/view';
-import { DefaultSidebar } from './DefaultSidebar';
-import { DefaultStatusBar } from './DefaultStatusBar';
-import { DefaultToolbar } from './DefaultToolbar';
-import type {
-  SidebarSlot,
-  StatusBarSlot,
-  ToolbarSlot,
-  TrialSidebarContext,
-  TrialStatusBarContext,
-  TrialToolbarContext,
-} from './slotTypes';
+import { TrialTitleBar } from './TrialTitleBar';
 
 export interface UndoBindings {
   canUndo: boolean;
@@ -31,30 +32,40 @@ export interface TrialChromeProps {
   record: TrialRecord;
   instrument: Instrument;
   isLastTrial: boolean;
-  toolbar?: ToolbarSlot;
-  sidebar?: SidebarSlot;
-  statusBar?: StatusBarSlot;
   undoBindings?: UndoBindings;
   /** Supplied when the instrument declares a `job`. */
   job?: JobHandle;
-  sidebarExtras?: ReactNode;
+  /** Contributions the trial runtime itself adds — the drag palette and the
+   *  layer list, which depend on runtime state the instrument cannot reach. */
+  trialChrome?: readonly TrialContribution[];
+  /** Contributions from the lab, merged last. */
+  chrome?: readonly TrialContribution[];
+  /** Built-in contribution ids to drop. Throws on an id that is not there. */
+  suppress?: readonly string[];
+  /** The trial's resolved tool slot, and the setter that writes whichever
+   *  slot it resolved to. `Trial` owns the resolution. */
+  activeToolId?: string | null;
+  setActiveTool?: (id: string) => void;
   children: ReactNode;
 }
 
-/** The frame around a running instrument — toolbar, sidebar, status bar —
- *  each replaceable by a slot. Assembles the slot contexts and wires the undo
- *  keyboard shortcuts. */
+const NO_OP = (): void => {};
+
+/** The frame around a running instrument. Builds one chrome context, assembles
+ *  the contributions the instrument, the runtime and the lab declare, and hands
+ *  each region its slice. */
 export function TrialChrome({
   trialId,
   record,
   instrument,
   isLastTrial,
-  toolbar,
-  sidebar,
-  statusBar,
   undoBindings,
   job,
-  sidebarExtras,
+  trialChrome,
+  chrome,
+  suppress,
+  activeToolId = null,
+  setActiveTool = NO_OP,
   children,
 }: TrialChromeProps) {
   const lab = useLabContext();
@@ -68,7 +79,9 @@ export function TrialChrome({
   // and goes inert when the trial holds something else — an orbit, say.
   const view2d = as2DView(record.view);
 
-  const toolbarCtx = useMemo<TrialToolbarContext>(() => {
+  const configSchema = useConfigSchema(instrument);
+
+  const ctx = useMemo<TrialChromeContext>(() => {
     const setZoom = (z: number): void => {
       if (!view2d) return;
       updateTrialView(trialId, { ...view2d, zoom: z });
@@ -76,32 +89,15 @@ export function TrialChrome({
     return {
       trialId,
       instrumentName: record.instrumentName,
-      hasUndo: instrument.undo != null,
+      isLastTrial,
+      zoom: view2d ? view2d.zoom : null,
+      setZoom,
       canUndo: undoBindings?.canUndo ?? false,
       canRedo: undoBindings?.canRedo ?? false,
-      undo: undoBindings?.undo ?? (() => {}),
-      redo: undoBindings?.redo ?? (() => {}),
-      zoom: view2d?.zoom ?? 1,
-      setZoom,
-      zoomIn: () => setZoom((view2d?.zoom ?? 1) * 1.25),
-      zoomOut: () => setZoom((view2d?.zoom ?? 1) * 0.8),
-      resetZoom: () => setZoom(1),
-      hasCanvas: instrument.canvas != null,
-      savedSnapshots: lab.savedSnapshots.filter((s) => s.trialId === trialId),
-      saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
-      loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
-      clone: () => lab.cloneTrial(trialId),
-      reset: () => lab.resetTrial(trialId),
-      close: () => lab.closeTrial(trialId),
-      isLastTrial,
-    };
-  }, [trialId, record, instrument, lab, isLastTrial, updateTrialView, undoBindings, view2d]);
-
-  const sidebarCtx = useMemo<TrialSidebarContext>(
-    () => ({
-      trialId,
-      instrumentName: record.instrumentName,
-      configFields: instrument.configSchema?.() ?? [],
+      undo: undoBindings?.undo ?? NO_OP,
+      redo: undoBindings?.redo ?? NO_OP,
+      configSchema,
+      configFields: instrument.config ? [] : (instrument.configSchema?.() ?? []),
       config: record.config,
       setConfig: (key, value) => {
         const prevConfig = record.config as Record<string, unknown>;
@@ -117,26 +113,58 @@ export function TrialChrome({
           updateTrialState(trialId, nextState as never);
         }
       },
-    }),
-    [trialId, record, instrument, updateTrialConfig, updateTrialState],
+      savedSnapshots: lab.savedSnapshots.filter((s) => s.trialId === trialId),
+      saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
+      loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
+      clone: () => lab.cloneTrial(trialId),
+      reset: () => lab.resetTrial(trialId),
+      close: () => lab.closeTrial(trialId),
+      activeToolId,
+      setActiveTool,
+    };
+  }, [
+    trialId,
+    record,
+    instrument,
+    lab,
+    isLastTrial,
+    updateTrialView,
+    updateTrialConfig,
+    updateTrialState,
+    undoBindings,
+    view2d,
+    activeToolId,
+    setActiveTool,
+    configSchema,
+  ]);
+
+  const contributions = useMemo(
+    () =>
+      suppressContributions(
+        mergeContributions(
+          builtinContributions(instrument, ctx, lab.controls),
+          [...(instrument.chrome ?? [])],
+          [...(trialChrome ?? [])],
+          [...(chrome ?? [])],
+        ),
+        suppress ?? [],
+      ),
+    [instrument, ctx, trialChrome, chrome, suppress, lab.controls],
   );
 
-  const statusCtx: TrialStatusBarContext = {
-    trialId,
-    instrumentName: record.instrumentName,
-    zoom: view2d ? view2d.zoom : null,
-  };
+  const inRegion = (region: TrialRegion): TrialContribution[] =>
+    contributions.filter((c) => c.region === region);
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {
+  const handleKeyDown = (e: KeyboardEvent<HTMLElement>): void => {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
     if (e.key === 'z' || e.key === 'Z') {
       e.preventDefault();
-      if (e.shiftKey) toolbarCtx.redo();
-      else toolbarCtx.undo();
+      if (e.shiftKey) ctx.redo();
+      else ctx.undo();
     } else if (e.key === 's' || e.key === 'S') {
       e.preventDefault();
-      toolbarCtx.saveSnapshot();
+      ctx.saveSnapshot();
     }
   };
 
@@ -144,37 +172,28 @@ export function TrialChrome({
     <section
       className="lk-trial"
       aria-label={`Trial ${record.instrumentName}`}
+      tabIndex={-1}
       onKeyDown={handleKeyDown}
     >
+      <TrialTitleBar title={record.instrumentName}>
+        <TitleBarRegion contributions={inRegion('titlebar')} ctx={ctx} />
+      </TrialTitleBar>
       <div className="lk-trial__toolbar">
-        {toolbar ? toolbar(toolbarCtx) : <DefaultToolbar ctx={toolbarCtx} />}
+        <ToolbarRegion contributions={inRegion('toolbar')} ctx={ctx} />
       </div>
       <div className="lk-trial__body">
+        <PaletteRegion contributions={inRegion('palette')} ctx={ctx} />
         <div className="lk-trial__sidebar">
-          {sidebar ? sidebar(sidebarCtx) : <DefaultSidebar ctx={sidebarCtx} />}
-          {sidebarExtras}
+          <SidebarRegion contributions={inRegion('sidebar')} ctx={ctx} />
+        </div>
+        <div className={`lk-trial__content${instrument.canvas ? ' lk-trial__content--flush' : ''}`}>
+          {children}
+          <ViewportRegion contributions={inRegion('viewport')} ctx={ctx} />
         </div>
-        <div className="lk-trial__content">{children}</div>
       </div>
       <div className="lk-trial__status">
-        {job ? (
-          <div className="lk-trial__job">
-            <span className="lk-trial__job-count">
-              {job.done}
-              {job.total === null ? '' : ` / ${job.total}`}
-            </span>
-            {job.failures.length > 0 ? (
-              <span className="lk-trial__job-failures">{job.failures.length} failed</span>
-            ) : null}
-            {job.error ? <span className="lk-trial__job-error">{job.error}</span> : null}
-            {job.status === 'running' ? (
-              <button type="button" className="lk-trial__job-cancel" onClick={job.cancel}>
-                Cancel
-              </button>
-            ) : null}
-          </div>
-        ) : null}
-        {statusBar ? statusBar(statusCtx) : <DefaultStatusBar ctx={statusCtx} />}
+        {job ? <JobProgress job={job} /> : null}
+        <StatusRegion contributions={inRegion('status')} ctx={ctx} />
       </div>
     </section>
   );