@weasel-js/labkit 1.0.3 → 1.1.0

package/dist/{chunk-73PXCRCR.js → chunk-NRKWVTVT.js}

@@ -1,4 +1,4 @@
-import { s, p } from './chunk-N5KTQKQA.js';
+import { c, p } from './chunk-C6GJKPUI.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -29,7 +29,7 @@ function LayerStack({
     });
   }, [items]);
   const dragItems = items.map((it) => ({ id: String(it.id), label: it.kind }));
-  const drag = s({
+  const drag = c({
     items: dragItems,
     selectedIds: [],
     onReorder: (ids, targetIndex) => {
@@ -46,8 +46,8 @@ function LayerStack({
     }
   });
   const toggleExpanded = (id) => {
-    setExpandedIds((s2) => {
-      const n = new Set(s2);
+    setExpandedIds((s) => {
+      const n = new Set(s);
       if (n.has(id)) n.delete(id);
       else n.add(id);
       return n;
@@ -157,5 +157,5 @@ function DragHandleGlyph() {
 }
 
 export { LayerStack };
-//# sourceMappingURL=chunk-73PXCRCR.js.map
-//# sourceMappingURL=chunk-73PXCRCR.js.map
+//# sourceMappingURL=chunk-NRKWVTVT.js.map
+//# sourceMappingURL=chunk-NRKWVTVT.js.map

package/dist/chunk-NRKWVTVT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/layers/LayerStack.tsx"],"names":[],"mappings":"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","file":"chunk-NRKWVTVT.js","sourcesContent":["import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';\nimport { dlog, useReorderDragList } from '../../passthrough/weasel-ui';\n\n/** One card in a layer stack: its identity, the label shown when collapsed,\n *  and the optional select hoisted into its header. */\nexport interface LayerStackItem {\n  /** Stable id used for keys, onRemove, onReorder. Numeric to match\n   *  common id-from-nextId conventions; string ids also work. */\n  id: number | string;\n  /** Short kind label rendered in the header when no primary select\n   *  is hoisted (e.g. \"shadow\", \"stroke\"). */\n  kind: string;\n  /** When present, hoist this select into the card header so the user\n   *  can switch mode/shape without expanding. */\n  primaryValue?: string;\n  primaryOptions?: string[];\n  /** Accent CSS color used as the left border / index-badge fill. */\n  accent?: string;\n  /** Optional badge text rendered before the primary control\n   *  (e.g. tail index \"1\", \"2\", \"3\"). When omitted a drag handle\n   *  glyph renders in its place. */\n  badge?: string;\n  /** Initial expanded state. Defaults to true for newly-added items. */\n  defaultExpanded?: boolean;\n}\n\n/** Props for `<LayerStack>`. */\nexport interface LayerStackProps {\n  title: string;\n  items: LayerStackItem[];\n  /** Kinds the user can add via the header palette. */\n  paletteKinds: string[];\n  onAdd: (kind: string) => void;\n  onRemove: (id: number | string) => void;\n  onReorder: (orderedIds: Array<number | string>) => void;\n  onPrimaryChange: (id: number | string, nextValue: string) => void;\n  /** Render the body controls for each item. */\n  renderBody: (item: LayerStackItem) => ReactNode;\n  /** Hide the title + palette row (used when an outer wrap renders its\n   *  own head — see speech-balloons Tails panel). */\n  hideHead?: boolean;\n}\n\n/** A drag-reorderable stack of expandable cards, with a palette in the header\n *  for adding more. The body of each card is the caller's to render. */\nexport function LayerStack({\n  title,\n  items,\n  paletteKinds,\n  onAdd,\n  onRemove,\n  onReorder,\n  onPrimaryChange,\n  renderBody,\n  hideHead,\n}: LayerStackProps) {\n  const [expandedIds, setExpandedIds] = useState<Set<number | string>>(\n    () => new Set(items.filter((i) => i.defaultExpanded !== false).map((i) => i.id)),\n  );\n\n  useEffect(() => {\n    setExpandedIds((prev) => {\n      let next: Set<number | string> | null = null;\n      for (const item of items) {\n        if (item.defaultExpanded === false) continue;\n        if (prev.has(item.id)) continue;\n        if (next === null) next = new Set(prev);\n        next.add(item.id);\n      }\n      return next ?? prev;\n    });\n  }, [items]);\n\n  const dragItems = items.map((it) => ({ id: String(it.id), label: it.kind }));\n  const drag = useReorderDragList({\n    items: dragItems,\n    selectedIds: [],\n    onReorder: (ids, targetIndex) => {\n      dlog('layer-stack', 'onReorder', { ids, targetIndex });\n      const orig = items.map((i) => i.id);\n      const moving = new Set(ids);\n      const remaining = orig.filter((id) => !moving.has(String(id)));\n      const movedIds = items.map((i) => i.id).filter((id) => moving.has(String(id)));\n      // weasel reports targetIndex against the original list (which includes\n      // the dragged row). Each moved item that originally sat before\n      // targetIndex needs to shift the insertion point left by one.\n      const shift = orig.filter((id, idx) => moving.has(String(id)) && idx < targetIndex).length;\n      const adjusted = targetIndex - shift;\n      const out = [...remaining];\n      out.splice(adjusted, 0, ...movedIds);\n      onReorder(out);\n    },\n  });\n\n  const toggleExpanded = (id: number | string) => {\n    setExpandedIds((s) => {\n      const n = new Set(s);\n      if (n.has(id)) n.delete(id);\n      else n.add(id);\n      return n;\n    });\n  };\n\n  return (\n    <div className=\"lk-layer-stack\">\n      {!hideHead && (\n        <div className=\"lk-layer-stack__head\">\n          <h2 className=\"lk-layer-stack__title\">{title}</h2>\n          <div className=\"lk-layer-stack__palette\">\n            {paletteKinds.map((k) => (\n              <button\n                key={k}\n                type=\"button\"\n                className=\"lk-layer-stack__add\"\n                onClick={() => {\n                  dlog('layer-stack', 'onAdd', { kind: k });\n                  onAdd(k);\n                }}\n                aria-label={`Add ${k}`}\n              >\n                {k}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      <div\n        className=\"lk-layer-stack__list\"\n        ref={drag.containerProps.ref as RefCallback<HTMLDivElement>}\n        onPointerMove={drag.containerProps.onPointerMove}\n        onPointerUp={drag.containerProps.onPointerUp}\n        onPointerCancel={drag.containerProps.onPointerCancel}\n      >\n        {items.map((item, i) => {\n          const expanded = expandedIds.has(item.id);\n          const draggedId = drag.state.draggedIds?.[0];\n          const isDragging = draggedId === String(item.id);\n          const showHintBefore = drag.state.targetIndex === i && draggedId !== String(item.id);\n          const showHintAfter = drag.state.targetIndex === items.length && i === items.length - 1;\n          const cardCls = [\n            'lk-layer-card',\n            expanded ? 'is-expanded' : 'is-collapsed',\n            isDragging ? 'is-dragging' : '',\n            item.accent ? 'has-accent' : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n          const cardStyle = item.accent\n            ? ({ '--lk-layer-card-accent': item.accent } as CSSProperties)\n            : undefined;\n          const { onPointerDown } = drag.rowProps(String(item.id), i);\n          return (\n            <div key={item.id} className=\"lk-layer-card-wrap\">\n              {showHintBefore && <div className=\"lk-layer-stack__drop-hint\" />}\n              <div className={cardCls} data-testid={`lk-layer-card-${item.id}`} style={cardStyle}>\n                <div className=\"lk-layer-card__head\">\n                  <button\n                    type=\"button\"\n                    className=\"lk-layer-card__handle\"\n                    aria-label={`Drag to reorder layer ${item.id}`}\n                    onPointerDown={onPointerDown}\n                    onClick={() => toggleExpanded(item.id)}\n                  >\n                    {item.badge ?? <DragHandleGlyph />}\n                  </button>\n                  {item.primaryValue !== undefined && item.primaryOptions ? (\n                    <select\n                      className=\"lk-layer-card__primary\"\n                      value={item.primaryValue}\n                      aria-label={`Primary select for layer ${item.id}`}\n                      onChange={(e) => onPrimaryChange(item.id, e.target.value)}\n                      onClick={(e) => e.stopPropagation()}\n                    >\n                      {item.primaryOptions.map((o) => (\n                        <option key={o} value={o}>\n                          {o}\n                        </option>\n                      ))}\n                    </select>\n                  ) : (\n                    <span className=\"lk-layer-card__kind\">{item.kind}</span>\n                  )}\n                  <button\n                    type=\"button\"\n                    className=\"lk-layer-card__remove\"\n                    aria-label=\"Remove layer\"\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onRemove(item.id);\n                    }}\n                  >\n                    ✕\n                  </button>\n                </div>\n                {expanded && <div className=\"lk-layer-card__body\">{renderBody(item)}</div>}\n              </div>\n              {showHintAfter && <div className=\"lk-layer-stack__drop-hint\" />}\n            </div>\n          );\n        })}\n        {items.length === 0 && (\n          <div className=\"lk-layer-stack__empty\">No layers — add one above.</div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction DragHandleGlyph() {\n  return (\n    <svg width=\"12\" height=\"16\" viewBox=\"0 0 8 16\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"2\" cy=\"3\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"3\" r=\"1.1\" />\n      <circle cx=\"2\" cy=\"8\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"8\" r=\"1.1\" />\n      <circle cx=\"2\" cy=\"13\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"13\" r=\"1.1\" />\n    </svg>\n  );\n}\n"]}

package/dist/dragdrop/index.d.ts

@@ -1,3 +1,3 @@
-export { D as DragDropCapability, b as DragFeedback, P as PaletteItem } from '../_dts/index-CFlDPeZh.js';
+export { D as DragDropCapability, c as DragFeedback, P as PaletteItem } from '../_dts/index-iAP6XbH3.js';
 import 'react';
 import '../_dts/types-x92Kfeme.js';

package/dist/index.d.ts

@@ -2,20 +2,20 @@ export { CanvasLayerDescriptor, CanvasStack, CanvasStackContext, CanvasStackCont
 export { ControlPanel } from './controls/index.js';
 import { C as ConfigField } from './_dts/types-x92Kfeme.js';
 export { a as CheckboxField, b as ColorField, c as ConfigFieldBase, d as ConfigFieldType, N as NumberField, S as SelectField, e as SelectOption, f as SliderField, T as TextField } from './_dts/types-x92Kfeme.js';
-import { I as Instrument } from './_dts/index-CFlDPeZh.js';
-export { C as CanvasCapability, a as CanvasLayer, D as DragDropCapability, b as DragFeedback, H as HitResult, L as LayerCapability, c as LayerDescriptor, P as PaletteItem, d as Point, R as RenderContext, S as SystemEvent, U as UndoCapability, V as ViewTransform } from './_dts/index-CFlDPeZh.js';
+import { I as Instrument, a as InstrumentList } from './_dts/index-iAP6XbH3.js';
+export { C as CanvasCapability, b as CanvasLayer, D as DragDropCapability, c as DragFeedback, H as HitResult, L as LayerCapability, d as LayerDescriptor, P as PaletteItem, e as Point, R as RenderContext, S as SystemEvent, U as UndoCapability, V as ViewTransform } from './_dts/index-iAP6XbH3.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { S as StorageAdapter, o as LabMode, W as WorkspaceRecord, e as SavedSnapshot } from './_dts/useExperimentState-vrttakTt.js';
-export { C as CreateLabStoreOptions, E as ExperimentStateHandle, b as LabStoreContext, c as LabStoreProvider, d as LabStoreState, U as UndoStack, f as WorkspaceIdContext, g as WorkspaceIdProvider, i as createMemoryAdapter, l as localStorageAdapter, n as noneAdapter, s as sessionStorageAdapter, u as urlHashAdapter, j as useExperimentState, k as useLabStore, m as useWorkspaceId } from './_dts/useExperimentState-vrttakTt.js';
+import { a as StorageAdapter, w as LabMode, T as TrialRecord, h as SavedSnapshot } from './_dts/useTrialState-DYe2vUwN.js';
+export { C as CURRENT_DOCUMENT_VERSION, b as CreateLabStoreOptions, L as LabDocument, e as LabStoreContext, f as LabStoreProvider, g as LabStoreState, S as SerializedTrial, i as TrialIdContext, j as TrialIdProvider, k as TrialStateHandle, U as UndoStack, m as createMemoryAdapter, n as labDocumentKey, o as localStorageAdapter, p as noneAdapter, q as quarantineKey, s as sessionStorageAdapter, u as urlHashAdapter, r as useLabStore, t as useTrialId, v as useTrialState } from './_dts/useTrialState-DYe2vUwN.js';
 export { LayerList, LayerListProps } from './layers/index.js';
 export { FpsMeter, ScaleIndicator, ScaleIndicatorProps, Sidebar, SidebarProps, StatusBar, StatusBarProps, Toolbar, ToolbarProps } from './primitives/index.js';
 export { LayerStack, LayerStackItem, LayerStackProps } from './ui/layers/index.js';
 export { EventBus, EventListener, clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './undo/index.js';
 import 'zustand/vanilla';
 
-/** Which optional capabilities an instrument declared — what the workspace
+/** Which optional capabilities an instrument declared — what the trial
  *  consults to decide which chrome to show. */
 interface CapabilityFlags {
     hasCanvas: boolean;
@@ -41,17 +41,9 @@ interface ValidationResult {
  *  fields whose own constraints do not hold. */
 declare function validateConfigSchema(fields: ConfigField[]): ValidationResult;
 
-/** A grid's column and row counts. */
-interface GridDims {
-    cols: number;
-    rows: number;
-}
-/** The most nearly square grid that fits `count` items. */
-declare function gridDims(count: number): GridDims;
-
 /** Props for `<Lab>`. */
 interface LabProps {
-    instruments: Instrument[];
+    instruments: InstrumentList;
     defaultInstrument: string;
     storage?: StorageAdapter | null;
     storageKey?: string;
@@ -66,23 +58,24 @@ interface LabProps {
     title?: string;
     children?: ReactNode;
 }
-/** The lab runtime: creates the store, provides it, and renders one workspace
- *  per record in a grid. Each workspace runs one of `instruments`. */
+/** The lab runtime: creates the store, provides it, and renders one trial
+ *  per record in a grid. Each trial runs one of `instruments`. */
 declare function Lab({ instruments, defaultInstrument, storage, storageKey, mode, nebula, title, children, }: LabProps): react_jsx_runtime.JSX.Element;
 
 /** Lab-wide state and commands: the available instruments, the open
- *  workspaces and the operations over them, saved snapshots, and the color
+ *  trials and the operations over them, saved snapshots, and the color
  *  mode. */
 interface LabContextValue {
-    instruments: Instrument[];
-    workspaces: WorkspaceRecord[];
-    addWorkspace: (instrumentName: string) => void;
-    cloneWorkspace: (id: string) => void;
-    closeWorkspace: (id: string) => void;
-    resetWorkspace: (id: string) => void;
+    instruments: InstrumentList;
+    trials: TrialRecord[];
+    addTrial: (instrumentName: string) => void;
+    cloneTrial: (id: string) => void;
+    closeTrial: (id: string) => void;
+    resetTrial: (id: string) => void;
+    reorderTrials: (ids: readonly string[]) => void;
     savedSnapshots: SavedSnapshot[];
-    saveSnapshot: (workspaceId: string, name?: string) => void;
-    loadSnapshot: (workspaceId: string, snapshotId: string) => void;
+    saveSnapshot: (trialId: string, name?: string) => void;
+    loadSnapshot: (trialId: string, snapshotId: string) => void;
     deleteSnapshot: (snapshotId: string) => void;
     mode: LabMode;
     setMode: (m: LabMode) => void;
@@ -105,15 +98,65 @@ interface LabShellProps {
 }
 /** Page frame for a lab: a titled header, a body, and an optional footer,
  *  themed for the resolved color mode. Presentational only — use `<Lab>` when
- *  the workspace runtime is wanted too. */
+ *  the trial runtime is wanted too. */
 declare function LabShell({ title, children, header, footer, mode }: LabShellProps): react_jsx_runtime.JSX.Element;
 
-/** Props for `<WorkspaceGrid>`. */
-interface WorkspaceGridProps {
+/** A tile's persisted extent, keyed by the id its caller gave it. Grid resizes
+ *  write `span`; `size` is here because a strategy swap would write that. */
+type TrialLayout = Record<string, {
+    size?: {
+        w?: number;
+        h?: number;
+    };
+    span?: {
+        cols?: number;
+        rows?: number;
+    };
+}>;
+interface WorkspaceProps {
     children: ReactNode;
+    /**
+     * Stable id per child, positionally matched. Supply these whenever a tile
+     * can be closed from the middle: without them a tile is identified by its
+     * position, so closing one shifts every id after it and the panes inherit
+     * each other's dragged extents. `layout` and `reorderable` both key off
+     * these, so neither means much without them.
+     */
+    ids?: readonly string[];
+    /** Draggable seams between tiles. Off by default — an even tiling is the
+     *  behavior every existing caller has. */
+    resizable?: boolean;
+    /** Let a tile be dragged to a new position. Off by default. The grid never
+     *  reorders `children` itself: it reports the order a drop would produce and
+     *  the caller commits it. */
+    reorderable?: boolean;
+    /** The full id list a drop would produce, in its new order. */
+    onReorder?: (ids: string[]) => void;
+    /** Extents from a previous session, applied to tiles as they register. */
+    layout?: TrialLayout;
+    /** Fires when a tile's extent changes. Persist it and hand it back as
+     *  `layout` to make a resize survive a reload. */
+    onLayoutChange?: (layout: TrialLayout) => void;
+    gap?: number;
+    padding?: number;
+    /**
+     * Fixed tiling extent. Omit in an app — the grid measures its own box. Supply
+     * it where nothing measures, notably jsdom: at a zero measurement the grid
+     * renders no tiles at all.
+     */
+    viewport?: {
+        w: number;
+        h: number;
+    };
 }
-/** Lays its children out in the most nearly square grid that fits them. */
-declare function WorkspaceGrid({ children }: WorkspaceGridProps): react_jsx_runtime.JSX.Element;
+/**
+ * Auto-balanced tiling of trials, `ceil(sqrt(n))` columns wide.
+ *
+ * Tiles are absolutely positioned at the rects `gridStrategy` computes, not
+ * laid out by CSS — `windease/styles.css` (folded into
+ * `@weasel-js/labkit/styles.css`) carries the rules that positioning depends on.
+ */
+declare function Workspace({ children, ids, resizable, reorderable, onReorder, layout, onLayoutChange, gap, padding, viewport, }: WorkspaceProps): react_jsx_runtime.JSX.Element;
 
 type TokenValue = string | number | readonly (string | number)[];
 /**
@@ -153,6 +196,128 @@ interface Theme {
  */
 declare const interstellarTheme: Theme;
 
+/** What a trial hands its toolbar: which instrument is running, the undo
+ *  state and commands, the zoom controls, and the snapshot commands. */
+interface TrialToolbarContext {
+    trialId: string;
+    instrumentName: string;
+    hasUndo: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+    zoom: number;
+    setZoom: (z: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    hasCanvas: boolean;
+    savedSnapshots: SavedSnapshot[];
+    saveSnapshot: (name?: string) => void;
+    loadSnapshot: (snapshotId: string) => void;
+    clone: () => void;
+    reset: () => void;
+    close: () => void;
+    isLastTrial: boolean;
+}
+/** What a trial hands its sidebar: the instrument's config schema, its
+ *  current values, and the setter. */
+interface TrialSidebarContext {
+    trialId: string;
+    instrumentName: string;
+    configFields: ConfigField[];
+    config: unknown;
+    setConfig: (key: string, value: unknown) => void;
+}
+/** What a trial hands its status bar. */
+interface TrialStatusBarContext {
+    trialId: string;
+    instrumentName: string;
+    zoom: number;
+}
+/** Replaces a trial's toolbar. Receives everything the default one uses,
+ *  so a custom toolbar need not reach into the store. */
+type ToolbarSlot = (ctx: TrialToolbarContext) => ReactNode;
+/** Replaces a trial's sidebar. */
+type SidebarSlot = (ctx: TrialSidebarContext) => ReactNode;
+/** Replaces a trial's status bar. */
+type StatusBarSlot = (ctx: TrialStatusBarContext) => ReactNode;
+
+/** Props for `<DefaultSidebar>`. */
+interface DefaultSidebarProps {
+    ctx: TrialSidebarContext;
+}
+/** The sidebar a trial renders when no `sidebar` slot is supplied: a
+ *  control panel over the instrument's config schema. */
+declare function DefaultSidebar({ ctx }: DefaultSidebarProps): react_jsx_runtime.JSX.Element;
+
+/** Props for `<DefaultStatusBar>`. */
+interface DefaultStatusBarProps {
+    ctx: TrialStatusBarContext;
+}
+/** The status bar a trial renders when no `statusBar` slot is supplied:
+ *  the instrument's name and the current zoom. */
+declare function DefaultStatusBar({ ctx }: DefaultStatusBarProps): react_jsx_runtime.JSX.Element;
+
+/** Props for `<DefaultToolbar>`. */
+interface DefaultToolbarProps {
+    ctx: TrialToolbarContext;
+}
+/** The toolbar a trial renders when no `toolbar` slot is supplied. Only
+ *  shows the controls the instrument's declared capabilities support. */
+declare function DefaultToolbar({ ctx }: DefaultToolbarProps): react_jsx_runtime.JSX.Element;
+
+/** Props for `<Trial>`. */
+interface TrialProps {
+    id: string;
+}
+/** Renders one trial from the lab store: looks up its record and
+ *  instrument, and mounts the instrument inside the trial chrome. */
+declare function Trial({ id }: TrialProps): react_jsx_runtime.JSX.Element;
+
+interface UndoBindings {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+}
+/** Props for `<TrialChrome>`. */
+interface TrialChromeProps {
+    trialId: string;
+    record: TrialRecord;
+    instrument: Instrument;
+    isLastTrial: boolean;
+    toolbar?: ToolbarSlot;
+    sidebar?: SidebarSlot;
+    statusBar?: StatusBarSlot;
+    undoBindings?: UndoBindings;
+    sidebarExtras?: ReactNode;
+    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. */
+declare function TrialChrome({ trialId, record, instrument, isLastTrial, toolbar, sidebar, statusBar, undoBindings, sidebarExtras, children, }: TrialChromeProps): react_jsx_runtime.JSX.Element;
+
+/** Append a new trial running `instrumentName`, at that instrument's
+ *  default config and initial state. */
+declare function addTrial(trials: TrialRecord[], instruments: InstrumentList, instrumentName: string): TrialRecord[];
+/** Insert a deep copy of a trial directly after it. The copy starts with
+ *  an empty undo history — the original's is not shared. */
+declare function cloneTrial(trials: TrialRecord[], id: string): TrialRecord[];
+/** Remove a trial, unless it is the last one — a lab always has at least
+ *  one. */
+declare function closeTrial(trials: TrialRecord[], id: string): TrialRecord[];
+/** Return a trial to its instrument's defaults, keeping its id and its
+ *  place in the list. */
+declare function resetTrial(trials: TrialRecord[], id: string, instruments: InstrumentList): TrialRecord[];
+/**
+ * Reorder to match `ids`. Ids the list doesn't mention keep their relative
+ * order at the end, and ids it names that no longer exist are dropped — a
+ * reorder that raced a close should not resurrect the closed trial.
+ */
+declare function reorderTrials(trials: TrialRecord[], ids: readonly string[]): TrialRecord[];
+
 /** An annotation drawn over a curve plot: a shaded band across a range of x,
  *  or a vertical line at one x. */
 type CurveMark = {
@@ -430,121 +595,5 @@ interface ToggleRowProps<T extends string> {
  *  visible at once. */
 declare function ToggleRow<T extends string>({ label, value, options, onChange, layout, }: ToggleRowProps<T>): react_jsx_runtime.JSX.Element;
 
-/** What a workspace hands its toolbar: which instrument is running, the undo
- *  state and commands, the zoom controls, and the snapshot commands. */
-interface WorkspaceToolbarContext {
-    workspaceId: string;
-    instrumentName: string;
-    hasUndo: boolean;
-    canUndo: boolean;
-    canRedo: boolean;
-    undo: () => void;
-    redo: () => void;
-    zoom: number;
-    setZoom: (z: number) => void;
-    zoomIn: () => void;
-    zoomOut: () => void;
-    resetZoom: () => void;
-    hasCanvas: boolean;
-    savedSnapshots: SavedSnapshot[];
-    saveSnapshot: (name?: string) => void;
-    loadSnapshot: (snapshotId: string) => void;
-    clone: () => void;
-    reset: () => void;
-    close: () => void;
-    isLastWorkspace: boolean;
-}
-/** What a workspace hands its sidebar: the instrument's config schema, its
- *  current values, and the setter. */
-interface WorkspaceSidebarContext {
-    workspaceId: string;
-    instrumentName: string;
-    configFields: ConfigField[];
-    config: unknown;
-    setConfig: (key: string, value: unknown) => void;
-}
-/** What a workspace hands its status bar. */
-interface WorkspaceStatusBarContext {
-    workspaceId: string;
-    instrumentName: string;
-    zoom: number;
-}
-/** Replaces a workspace's toolbar. Receives everything the default one uses,
- *  so a custom toolbar need not reach into the store. */
-type ToolbarSlot = (ctx: WorkspaceToolbarContext) => ReactNode;
-/** Replaces a workspace's sidebar. */
-type SidebarSlot = (ctx: WorkspaceSidebarContext) => ReactNode;
-/** Replaces a workspace's status bar. */
-type StatusBarSlot = (ctx: WorkspaceStatusBarContext) => ReactNode;
-
-/** Props for `<DefaultSidebar>`. */
-interface DefaultSidebarProps {
-    ctx: WorkspaceSidebarContext;
-}
-/** The sidebar a workspace renders when no `sidebar` slot is supplied: a
- *  control panel over the instrument's config schema. */
-declare function DefaultSidebar({ ctx }: DefaultSidebarProps): react_jsx_runtime.JSX.Element;
-
-/** Props for `<DefaultStatusBar>`. */
-interface DefaultStatusBarProps {
-    ctx: WorkspaceStatusBarContext;
-}
-/** The status bar a workspace renders when no `statusBar` slot is supplied:
- *  the instrument's name and the current zoom. */
-declare function DefaultStatusBar({ ctx }: DefaultStatusBarProps): react_jsx_runtime.JSX.Element;
-
-/** Props for `<DefaultToolbar>`. */
-interface DefaultToolbarProps {
-    ctx: WorkspaceToolbarContext;
-}
-/** The toolbar a workspace renders when no `toolbar` slot is supplied. Only
- *  shows the controls the instrument's declared capabilities support. */
-declare function DefaultToolbar({ ctx }: DefaultToolbarProps): react_jsx_runtime.JSX.Element;
-
-/** Props for `<Workspace>`. */
-interface WorkspaceProps {
-    id: string;
-}
-/** Renders one workspace from the lab store: looks up its record and
- *  instrument, and mounts the instrument inside the workspace chrome. */
-declare function Workspace({ id }: WorkspaceProps): react_jsx_runtime.JSX.Element;
-
-interface UndoBindings {
-    canUndo: boolean;
-    canRedo: boolean;
-    undo: () => void;
-    redo: () => void;
-}
-/** Props for `<WorkspaceChrome>`. */
-interface WorkspaceChromeProps {
-    workspaceId: string;
-    record: WorkspaceRecord;
-    instrument: Instrument;
-    isLastWorkspace: boolean;
-    toolbar?: ToolbarSlot;
-    sidebar?: SidebarSlot;
-    statusBar?: StatusBarSlot;
-    undoBindings?: UndoBindings;
-    sidebarExtras?: ReactNode;
-    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. */
-declare function WorkspaceChrome({ workspaceId, record, instrument, isLastWorkspace, toolbar, sidebar, statusBar, undoBindings, sidebarExtras, children, }: WorkspaceChromeProps): react_jsx_runtime.JSX.Element;
-
-/** Append a new workspace running `instrumentName`, at that instrument's
- *  default config and initial state. */
-declare function addWorkspace(workspaces: WorkspaceRecord[], instruments: Instrument[], instrumentName: string): WorkspaceRecord[];
-/** Insert a deep copy of a workspace directly after it. The copy starts with
- *  an empty undo history — the original's is not shared. */
-declare function cloneWorkspace(workspaces: WorkspaceRecord[], id: string): WorkspaceRecord[];
-/** Remove a workspace, unless it is the last one — a lab always has at least
- *  one. */
-declare function closeWorkspace(workspaces: WorkspaceRecord[], id: string): WorkspaceRecord[];
-/** Return a workspace to its instrument's defaults, keeping its id and its
- *  place in the list. */
-declare function resetWorkspace(workspaces: WorkspaceRecord[], id: string, instruments: Instrument[]): WorkspaceRecord[];
-
-export { CheckboxRow, ColorRow, ConfigField, CurveField, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Instrument, Lab, LabContext, LabMode, LabShell, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SavedSnapshot, SelectRow, SliderRow, StorageAdapter, Subpanel, TextRow, ToggleRow, Workspace, WorkspaceChrome, WorkspaceGrid, WorkspaceRecord, addWorkspace, cloneWorkspace, closeWorkspace, defineInstrument, detectCapabilities, gridDims, interstellarTheme, resetWorkspace, useLabContext, validateConfigSchema };
-export type { CapabilityFlags, CheckboxRowProps, ColorRowProps, CurveFieldProps, CurveMark, DefaultSidebarProps, DefaultStatusBarProps, DefaultToolbarProps, EffectCardListItem, EffectCardListProps, EffectCardProps, GridDims, LabContextValue, LabProps, LabShellProps, NumberRowProps, PropertyGroupProps, PropertyListPack, PropertyListProps, PropertyPanelProps, PropertyRowLayout, PropertyRowProps, PropertyRowVariant, SelectRowProps, SidebarSlot, SliderRowProps, StatusBarSlot, SubpanelProps, TextRowProps, ToggleRowProps, ToolbarSlot, ValidationResult, WorkspaceChromeProps, WorkspaceGridProps, WorkspaceProps, WorkspaceSidebarContext, WorkspaceStatusBarContext, WorkspaceToolbarContext };
+export { CheckboxRow, ColorRow, ConfigField, CurveField, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Instrument, InstrumentList, Lab, LabContext, LabMode, LabShell, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SavedSnapshot, SelectRow, SliderRow, StorageAdapter, Subpanel, TextRow, ToggleRow, Trial, TrialChrome, TrialRecord, Workspace, addTrial, cloneTrial, closeTrial, defineInstrument, detectCapabilities, interstellarTheme, reorderTrials, resetTrial, useLabContext, validateConfigSchema };
+export type { CapabilityFlags, CheckboxRowProps, ColorRowProps, CurveFieldProps, CurveMark, DefaultSidebarProps, DefaultStatusBarProps, DefaultToolbarProps, EffectCardListItem, EffectCardListProps, EffectCardProps, LabContextValue, LabProps, LabShellProps, NumberRowProps, PropertyGroupProps, PropertyListPack, PropertyListProps, PropertyPanelProps, PropertyRowLayout, PropertyRowProps, PropertyRowVariant, SelectRowProps, SidebarSlot, SliderRowProps, StatusBarSlot, SubpanelProps, TextRowProps, ToggleRowProps, ToolbarSlot, TrialChromeProps, TrialProps, TrialSidebarContext, TrialStatusBarContext, TrialToolbarContext, ValidationResult, WorkspaceProps };