@weasel-js/labkit 1.7.3 → 1.8.1

package/dist/index.js

@@ -1,46 +1,46 @@
 import { LoupeSwitchContext } from './chunk-2ES4W47N.js';
 export { LoupeSwitchContext } from './chunk-2ES4W47N.js';
-import { createEventBus, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
-export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
-import { useDragDrop, DragOverlay, Palette } from './chunk-2N7UBSS2.js';
-import { useTiledSurface } from './chunk-EESJUSYR.js';
-export { composeRects, toDeviceRect, useTiledSurface } from './chunk-EESJUSYR.js';
+import { createEventBus } from './chunk-UX66USTN.js';
+export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-UX66USTN.js';
+import { useDragDrop, DragOverlay, Palette } from './chunk-J5MDJEOZ.js';
+import { useTiledSurface } from './chunk-QMAY74TP.js';
+export { composeRects, toDeviceRect, useTiledSurface } from './chunk-QMAY74TP.js';
 import { useJob } from './chunk-EFXRM6XQ.js';
 export { useJob } from './chunk-EFXRM6XQ.js';
-import { markCommands, boundsOf, roundFrac, worldToFrac, fracToWorld, fracEncloses, fracContains, POINT_MARK_SHAPE, roundPoints, fromShape, markSvgNodes, toShape } from './chunk-F4ACIK7Z.js';
-export { fracContains, fracEncloses, fracToWorld, markCommands, markSvgNodes, roundFrac, worldToFrac } from './chunk-F4ACIK7Z.js';
-import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TRANSIENT_BUILTINS, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, useLabChromeContext, labContributions, labAnnotationTools, LabHeaderRegion, LabFooterRegion, LabAsideRegion, LabSidebarRegion } from './chunk-4X44DMRS.js';
-export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, ExportMenu, LabAsideRegion, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TRANSIENT_BUILTINS, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useLabChromeContext } from './chunk-4X44DMRS.js';
+import { markCommands, boundsOf, roundFrac, worldToFrac, fracToWorld, fracEncloses, fracContains, POINT_MARK_SHAPE, roundPoints, fromShape, markSvgNodes, toShape } from './chunk-6Q6ACJ3H.js';
+export { fracContains, fracEncloses, fracToWorld, markCommands, markSvgNodes, roundFrac, worldToFrac } from './chunk-6Q6ACJ3H.js';
+import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TRANSIENT_BUILTINS, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, useLabChromeContext, labContributions, labAnnotationTools, LabHeaderRegion, LabFooterRegion, LabAsideRegion, LabSidebarRegion } from './chunk-RN7T7OBO.js';
+export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, ExportMenu, LabAsideRegion, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TRANSIENT_BUILTINS, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useLabChromeContext } from './chunk-RN7T7OBO.js';
 import { AnnotationsContext } from './chunk-3RY6WL5T.js';
 export { AnnotationsContext, useAnnotations, useAnnotationsOptional } from './chunk-3RY6WL5T.js';
-import { Split, JobProgress, Legend } from './chunk-LPGBC63T.js';
-export { JobProgress, Legend, Readout, Split } from './chunk-LPGBC63T.js';
-import { FloatingPanel } from './chunk-XE5HJOPL.js';
-export { FloatingPanel } from './chunk-XE5HJOPL.js';
-import { Toolbar, StatusBar, ScaleIndicator, ZoomControl } from './chunk-4TJ34FXA.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-4TJ34FXA.js';
+import { Split, JobProgress, Legend } from './chunk-KHB3KRRQ.js';
+export { JobProgress, Legend, Readout, Split } from './chunk-KHB3KRRQ.js';
+import { FloatingPanel } from './chunk-7FMZT2WL.js';
+export { FloatingPanel } from './chunk-7FMZT2WL.js';
+import { Toolbar, ScaleIndicator, ZoomControl } from './chunk-RXO5UEGT.js';
+export { FpsMeter, ScaleIndicator, Toolbar, ZoomControl } from './chunk-RXO5UEGT.js';
 import './chunk-CZZPXUOU.js';
-import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-IBVRMHW5.js';
-export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-IBVRMHW5.js';
-import { newId, useWarnIgnoredChange, useOpenOnce, PersistenceContext, createRecordCache, noneAdapter, defaultStorage, usePersistedState } from './chunk-PMLZP7RT.js';
-export { Persistence, createIndexedDbAdapter, createMemoryAdapter, indexedDbAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, usePersistedState } from './chunk-PMLZP7RT.js';
-export { ControlMatrix } from './chunk-HBGH344L.js';
-export { ControlPanel, inDialog, summarizeValue } from './chunk-XSJJTXNA.js';
-import { useConfigSchema } from './chunk-E6NARGU7.js';
-export { sectionTree, useConfigSchema } from './chunk-E6NARGU7.js';
-import { useLabContext, LabContext } from './chunk-Z76KEZAX.js';
+import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-NHIO2O3O.js';
+export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-NHIO2O3O.js';
+import { valueRecord, newId, useWarnIgnoredChange, useOpenOnce, PersistenceContext, createRecordCache, noneAdapter, defaultStorage, usePersistedState } from './chunk-7ALJOVGP.js';
+export { Persistence, createIndexedDbAdapter, createMemoryAdapter, indexedDbAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, usePersistedState } from './chunk-7ALJOVGP.js';
+export { ControlMatrix } from './chunk-4RCVWX4M.js';
+export { ControlPanel, inDialog, summarizeValue } from './chunk-YZA73U4A.js';
+import { useConfigSchema } from './chunk-SQX35X5V.js';
+export { sectionTree, useConfigSchema } from './chunk-SQX35X5V.js';
+import { LabContext, useLabContext } from './chunk-Z76KEZAX.js';
 export { LabContext, useLabContext } from './chunk-Z76KEZAX.js';
-import { useResolvedConfig } from './chunk-YCFKW5RX.js';
-export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, ListNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-YCFKW5RX.js';
+import { useResolvedConfig } from './chunk-T5OEUNCB.js';
+export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, ListNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-T5OEUNCB.js';
 export { fromConfigFields, isLeafVisible } from './chunk-WLMDTI2Q.js';
 import { hasConfigPath, schemaNodeAtPath, applyConfigWrite, resolveAutoConfig, isAuto, isRecord, autoPathsOf, fillConfigDefaults } from './chunk-READTDQX.js';
 export { auto, autoPathsOf, fillConfigDefaults, hasConfigPath, isAuto, resolveAutoConfig, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-READTDQX.js';
-import { CanvasStack, Stage, fitStage } from './chunk-T6DLGEJB.js';
-export { CanvasStack, Stage, fitStage } from './chunk-T6DLGEJB.js';
+import { CanvasStack, Stage, fitStage } from './chunk-XWR2P6MR.js';
+export { CanvasStack, Stage, fitStage } from './chunk-XWR2P6MR.js';
 export { centerOn, zoomAt } from './chunk-ROGJWDQA.js';
 export { screenToWorld, worldToScreen } from './chunk-FG3EXZDV.js';
-import { useSurfaceOptional, useSurfaceCanvas, useTileId, SurfaceContext, SurfaceCanvasContext } from './chunk-WIG6XHJ7.js';
-export { SurfaceCanvasContext, SurfaceContext, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId } from './chunk-WIG6XHJ7.js';
+import { useSurfaceOptional, useSurfaceCanvas, useTileId, useTileInScope, SurfaceContext, SurfaceCanvasContext } from './chunk-6IIKLXBZ.js';
+export { SurfaceCanvasContext, SurfaceContext, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTileInScope } from './chunk-6IIKLXBZ.js';
 import { CameraWheelContext, as2DView, CameraRegistryContext, DEFAULT_VIEW, CameraPublishContext, createCameraRegistry, withZoom } from './chunk-VYVGVBGY.js';
 export { CameraContext, CameraInput, CameraPublishContext, CameraRegistryContext, CameraScope, DEFAULT_VIEW, as2DView, createCameraRegistry, usePublishCamera } from './chunk-VYVGVBGY.js';
 import { applyCamera } from './chunk-ULYYNWGP.js';
@@ -50,12 +50,12 @@ export { CanvasStackContext } from './chunk-ZQIHJXP4.js';
 import { LabStoreContext, TrialIdProvider, TrialIdContext } from './chunk-2YILQ7Y5.js';
 export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
 import './chunk-2RVCB2PT.js';
-import { D2, S2, X, U, G, p4, o3, c, Xt, c6, a6, l5, u3, a5, r3, a8, i3, o5, s4, c7, l9, p, f2, u2, y, O2, b4, l10, S, c8, i4, h2, j, k2, ae2, oe, de, b3, j2, n6, a9, C3, l3, u, v2, d3, j3, r4, n7, r5, i5, p2, f, n8, o4, c5, l8, w, L, n9, j4, xe2, n2 } from './chunk-IRMPZIYU.js';
-export { c as Button, V as CloseIcon, xe as CollapseIcon, _ as CurveField, s as DetailList, c2 as DetailRow, Se as ExpandIcon, l as Icon, u2 as Input, l11 as Jog, D2 as LayerList, re as PauseIcon, ne as PlayIcon, fe2 as PropertyControl, de as PropertyField, b3 as PropertyGroup, oe as PropertyList, ae2 as PropertyPanel, L2 as PropertyRow, se as PropertySpan, B as ResetIcon, O2 as Select, ae as StepBackIcon, $ as StepForwardIcon, ie as StopIcon, x2 as Subpanel, a5 as ToggleBar, oe2 as TokenPanel, H2 as inferTokenType, S2 as moveLayers, O3 as refitScale } from './chunk-IRMPZIYU.js';
-import { serializeSvg } from './chunk-E23Q6A3Y.js';
-import './chunk-XVUKDSYV.js';
-import { makeViewportZoomAction, createScene, asNodeId as asNodeId$1, registerNodeShape, useLatest, WeaselProvider, SceneCanvas, createPointerStore, PointerContextProvider, DepRegistryProvider, ActionsProvider, ActiveToolContextProvider, useActionsRegistry, useDepSource, ActionDisabledReason, useGestureDispatcher, sceneFromJSON, warmRender, renderSceneToPixels, useActiveToolContext } from '@weasel-js/core';
-import { createContext, useState, useRef, useEffect, useInsertionEffect, useCallback, useContext, useMemo, useSyncExternalStore, useLayoutEffect, useId, Children } from 'react';
+import { A2, T, Z, U, V, de, G, p6, o3, c, Xt, c4, a5, l5, u3, s3, r3, a7, i3, o5, s5, c5, l8, p, f3, u2, y, O2, b4, l9, w2, c6, i4, h2, j, k2, ce2, le, ye, b3, j2, n6, a8, C3, l3, u, v3, d2, j3, r4, n7, r5, i5, p2, f2, n8, o4, p4, l7, w, L, n9, j4, xe, n2 } from './chunk-V4SMGEYY.js';
+export { c as Button, V as CloseIcon, we as CollapseIcon, _ as CurveField, s as DetailList, c2 as DetailRow, Te as ExpandIcon, l as Icon, u2 as Input, l10 as Jog, A2 as LayerList, oe as PauseIcon, ae as PlayIcon, be as PropertyControl, ye as PropertyField, b3 as PropertyGroup, le as PropertyList, ce2 as PropertyPanel, L2 as PropertyRow, ue as PropertySpan, B as ResetIcon, O2 as Select, n7 as StatusBar, r5 as StatusBarItem, i5 as StatusBarSpacer, ce as StepBackIcon, $ as StepForwardIcon, se as StopIcon, x2 as Subpanel, s3 as ToggleBar, oe2 as TokenPanel, H2 as inferTokenType, T as moveLayers, O3 as refitScale } from './chunk-V4SMGEYY.js';
+import { serializeSvg } from './chunk-VCK5T6EP.js';
+import './chunk-AVOILDN2.js';
+import { makeViewportZoomAction, createScene, asNodeId as asNodeId$1, registerNodeShape, useLatest, WeaselProvider, SceneCanvas, createPointerStore, PointerContextProvider, DepRegistryProvider, ActionsProvider, ActiveToolContextProvider, useActionsRegistry, useDepSource, ActionDisabledReason, useGestureDispatcher, sceneFromJSON, warmRender, renderSceneToPixels, useActiveToolContext, createHistory, useVisibleRaf, stableStringify } from '@weasel-js/core';
+import { createContext, useState, useRef, useEffect, useInsertionEffect, useCallback, useContext, useSyncExternalStore, useReducer, useLayoutEffect, useMemo, useId, Children } from 'react';
 import { flushSync, createPortal } from 'react-dom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { defineTheme, weaselTheme, colorCount, resolveTheme, colorAt } from '@weasel-js/theme';
@@ -92,7 +92,7 @@ function createMarkDrawOne(opts) {
 }
 function resolveMarkStyle(data, opts) {
   return {
-    color: opts.meaning?.statuses?.find((s3) => s3.id === data.status)?.color,
+    color: opts.meaning?.statuses?.find((s4) => s4.id === data.status)?.color,
     // Read off the node rather than through the store's `isStale`, which
     // wants a projected Annotation this path does not have.
     stale: isStale(data.seen, opts.config, opts.positionDependsOn ?? [])
@@ -105,7 +105,7 @@ function capturePlan(base, format) {
   if (format === "svg") return "svg-document";
   return base?.kind === "svg" ? "svg-document" : "raster-stack";
 }
-function nestBaseSvg(markup, w2, h2) {
+function nestBaseSvg(markup, w3, h2) {
   const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
   const root = doc.documentElement;
   if (doc.getElementsByTagName("parsererror").length > 0 || root.localName !== "svg") {
@@ -113,17 +113,17 @@ function nestBaseSvg(markup, w2, h2) {
   }
   root.setAttribute("x", "0");
   root.setAttribute("y", "0");
-  root.setAttribute("width", String(w2));
+  root.setAttribute("width", String(w3));
   root.setAttribute("height", String(h2));
   return new XMLSerializer().serializeToString(root);
 }
-function embedRasterBase(base, w2, h2, onWarn) {
+function embedRasterBase(base, w3, h2, onWarn) {
   const href = base.kind === "canvas" ? base.canvas.toDataURL() : base.kind === "image" ? base.src : "";
   if (base.kind === "image" && !href.startsWith("data:")) {
     onWarn?.(`base image '${href}' is a reference, so this SVG is not self-contained`);
   }
-  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w2, height: h2 }], {
-    viewBox: { x: 0, y: 0, width: w2, height: h2 }
+  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w3, height: h2 }], {
+    viewBox: { x: 0, y: 0, width: w3, height: h2 }
   });
 }
 function markNodesOf(scene, draw, scale) {
@@ -139,15 +139,15 @@ function markNodesOf(scene, draw, scale) {
 }
 function composeCaptureSvg(args) {
   const { base, scene, draw, scale, onWarn } = args;
-  const { w: w2, h: h2 } = draw.content;
-  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w2, h2) : embedRasterBase(base, w2, h2, onWarn);
+  const { w: w3, h: h2 } = draw.content;
+  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w3, h2) : embedRasterBase(base, w3, h2, onWarn);
   const marksXml = serializeSvg(markNodesOf(scene, draw, scale), {
-    viewBox: { x: 0, y: 0, width: w2, height: h2 },
+    viewBox: { x: 0, y: 0, width: w3, height: h2 },
     onWarn
   });
-  const outW = Math.max(1, Math.round(w2 * scale));
+  const outW = Math.max(1, Math.round(w3 * scale));
   const outH = Math.max(1, Math.round(h2 * scale));
-  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w2} ${h2}">${baseXml}${marksXml}</svg>`;
+  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w3} ${h2}">${baseXml}${marksXml}</svg>`;
 }
 function context2d(width, height) {
   const canvas = document.createElement("canvas");
@@ -283,13 +283,13 @@ var MarkHistory = class {
     return null;
   }
   canUndo(at) {
-    return this.next(this.undoable, (s3) => s3.canUndo(), at) !== null;
+    return this.next(this.undoable, (s4) => s4.canUndo(), at) !== null;
   }
   canRedo(at) {
-    return this.next(this.redoable, (s3) => s3.canRedo(), at) !== null;
+    return this.next(this.redoable, (s4) => s4.canRedo(), at) !== null;
   }
   undo(at) {
-    const target = this.next(this.undoable, (s3) => s3.canUndo(), at);
+    const target = this.next(this.undoable, (s4) => s4.canUndo(), at);
     const scene = target === null ? void 0 : at(target);
     if (!scene) return false;
     this.replaying = "undo";
@@ -300,7 +300,7 @@ var MarkHistory = class {
     }
   }
   redo(at) {
-    const target = this.next(this.redoable, (s3) => s3.canRedo(), at);
+    const target = this.next(this.redoable, (s4) => s4.canRedo(), at);
     const scene = target === null ? void 0 : at(target);
     if (!scene) return false;
     this.replaying = "redo";
@@ -429,21 +429,21 @@ function createAnnotationStore(opts) {
     if (!scene) return [];
     const out = [];
     for (const id of scene.renderOrder()) {
-      const a5 = project(target, String(id));
-      if (a5) out.push(a5);
+      const a4 = project(target, String(id));
+      if (a4) out.push(a4);
     }
     return out;
   };
   const all = () => liveTargets().flatMap(marksOn);
-  const matches = (a5, q) => {
-    if (q.target !== void 0 && a5.target !== q.target) return false;
-    if (q.kind !== void 0 && a5.kind !== q.kind) return false;
-    if (q.status !== void 0 && a5.status !== q.status) return false;
+  const matches = (a4, q) => {
+    if (q.target !== void 0 && a4.target !== q.target) return false;
+    if (q.kind !== void 0 && a4.kind !== q.kind) return false;
+    if (q.status !== void 0 && a4.status !== q.status) return false;
     if (q.tags !== void 0) {
-      const have = a5.tags ?? [];
+      const have = a4.tags ?? [];
       for (const t of q.tags) if (!have.includes(t)) return false;
     }
-    if (q.where && !q.where(a5)) return false;
+    if (q.where && !q.where(a4)) return false;
     return true;
   };
   const nodeOf = (id) => {
@@ -461,17 +461,17 @@ function createAnnotationStore(opts) {
       return parts ? project(parts.target, parts.node) : void 0;
     },
     query(q) {
-      return q ? all().filter((a5) => matches(a5, q)) : all();
+      return q ? all().filter((a4) => matches(a4, q)) : all();
     },
     hitTest(target, pt, tol = 0) {
-      return marksOn(target).filter((a5) => fracContains(a5.frac, pt, tol)).reverse();
+      return marksOn(target).filter((a4) => fracContains(a4.frac, pt, tol)).reverse();
     },
     within(target, box) {
-      return marksOn(target).filter((a5) => fracEncloses(box, a5.frac));
+      return marksOn(target).filter((a4) => fracEncloses(box, a4.frac));
     },
-    isStale(a5, config) {
-      const keys = targetOf(a5.target)?.positionDependsOn ?? [];
-      return isStale(a5.seen, config, keys);
+    isStale(a4, config) {
+      const keys = targetOf(a4.target)?.positionDependsOn ?? [];
+      return isStale(a4.seen, config, keys);
     },
     canUndo() {
       return history.canUndo(historySceneAt);
@@ -624,7 +624,7 @@ function fitView(content, pane) {
   const zoom = content.w > 0 && content.h > 0 ? Math.min(pane.w / content.w, pane.h / content.h) : 1;
   return { zoom: Number.isFinite(zoom) && zoom > 0 ? zoom : 1, pan: { x: 0, y: 0 } };
 }
-var sameRect = (a5, b3) => a5 !== null && a5.x === b3.x && a5.y === b3.y && a5.w === b3.w && a5.h === b3.h;
+var sameRect = (a4, b3) => a4 !== null && a4.x === b3.x && a4.y === b3.y && a4.w === b3.w && a4.h === b3.h;
 function ToolBridge({ toolId }) {
   const tools = useActiveToolContext();
   const setActive = tools.setActive;
@@ -668,6 +668,7 @@ function AnnotationOverlay({
   const configRef = useLatest(config);
   const id = target.id;
   const tileId = useTileId(id);
+  const inScope = useTileInScope(tileId);
   const lastTile = useRef(null);
   useEffect(() => {
     const el = target.ref.current ?? null;
@@ -758,6 +759,7 @@ function AnnotationOverlay({
           className: "lk-annotate__input",
           "data-annotation-target": id,
           "data-idle": annotationToolInfo(activeToolId) ? void 0 : "",
+          hidden: !inScope,
           role: "application",
           "aria-label": `Annotations on ${id}`,
           tabIndex: 0,
@@ -811,6 +813,62 @@ function AnnotationTargets({
     t.id
   )) });
 }
+function createClockRegistry() {
+  const handles = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    for (const l8 of [...listeners]) l8();
+  };
+  return {
+    register(trialId, handle) {
+      handles.set(trialId, handle);
+      notify();
+      return () => {
+        if (handles.get(trialId) !== handle) return;
+        handles.delete(trialId);
+        notify();
+      };
+    },
+    get: (trialId) => handles.get(trialId) ?? null,
+    all: () => handles.values(),
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+var ClockRegistryContext = createContext(null);
+var TrialClockContext = createContext(null);
+
+// src/clock/hooks.ts
+var NO_SUBSCRIBE = () => () => {
+};
+function useTrialClock(trialId) {
+  const registry = useContext(ClockRegistryContext);
+  const own = useContext(TrialClockContext);
+  const lab = useContext(LabContext);
+  useSyncExternalStore(registry?.subscribe ?? NO_SUBSCRIBE, () => registry ? resolve() : own);
+  function resolve() {
+    if (trialId !== void 0) return registry?.get(trialId) ?? null;
+    if (own) return own;
+    const focused = lab?.focusedTrialId;
+    return focused ? registry?.get(focused) ?? null : null;
+  }
+  const clock = resolve()?.clock ?? null;
+  const [, bump] = useReducer((n6) => n6 + 1, 0);
+  useEffect(() => clock?.subscribe(bump), [clock]);
+  return clock;
+}
+function useClockFrame(fn) {
+  const handle = useContext(TrialClockContext);
+  const latest = useLatest(fn);
+  useEffect(
+    () => handle?.onFrame((elapsed, pass) => latest.current(elapsed, pass)),
+    [handle, latest]
+  );
+}
 
 // src/instrument/defineInstrument.ts
 function defineInstrument(spec) {
@@ -870,6 +928,41 @@ function validateConfigSchema(fields) {
   return { valid: errors.length === 0, errors };
 }
 var AnnotationPreloadContext = createContext(null);
+function useClockLoop(registry) {
+  const loop = useVisibleRaf(
+    (timestamp) => {
+      let live = false;
+      for (const { clock } of registry.all()) {
+        if (clock.inert) continue;
+        clock.sync(timestamp);
+        if (!clock.inert) live = true;
+      }
+      if (live) loop.request();
+    },
+    {
+      onResume: () => {
+        for (const { clock } of registry.all()) clock.rebase();
+      }
+    }
+  );
+  useEffect(() => {
+    let unwakes = [];
+    const attach = () => {
+      for (const off2 of unwakes) off2();
+      unwakes = [];
+      for (const { clock } of registry.all()) {
+        unwakes.push(clock.onWake(() => loop.request()));
+        if (!clock.inert) loop.request();
+      }
+    };
+    attach();
+    const off = registry.subscribe(attach);
+    return () => {
+      off();
+      for (const unwake of unwakes) unwake();
+    };
+  }, [registry, loop]);
+}
 
 // src/theme/interstellar.theme.json
 var interstellar_theme_default = {
@@ -938,20 +1031,6 @@ var interstellar_theme_default = {
         type: "color"
       }
     },
-    "fg-muted": {
-      by: "mode",
-      dark: {
-        value: "#a8a8c0",
-        type: "color"
-      }
-    },
-    "fg-subtle": {
-      by: "mode",
-      dark: {
-        value: "#5a5a78",
-        type: "color"
-      }
-    },
     accent: {
       by: "mode",
       dark: {
@@ -1010,6 +1089,180 @@ var interstellarTheme = defineTheme({
   extends: weaselTheme
 });
 
+// src/clock/trialClock.ts
+var passesOf = (loop) => loop === true ? Number.POSITIVE_INFINITY : loop === false ? 1 : Math.max(1, loop);
+var checkRate = (rate, seekable) => {
+  if (!Number.isFinite(rate)) throw new RangeError(`labkit: a clock's rate is finite, not ${rate}`);
+  if (rate < 0 && !seekable)
+    throw new RangeError("labkit: a clock that is not seekable cannot run backward");
+};
+function createTrialClock(spec, start) {
+  const duration = spec.duration ?? Number.POSITIVE_INFINITY;
+  const seekable = spec.seekable ?? true;
+  const openRate = spec.rate ?? 0;
+  checkRate(openRate, seekable);
+  let loop = spec.loop ?? false;
+  let span = duration * passesOf(loop);
+  let rate = start ? start.rate : openRate;
+  let elapsed = start ? Math.min(Math.max(0, start.elapsed), span) : 0;
+  let ramp = null;
+  let last = Number.NaN;
+  let changed = false;
+  let slept = false;
+  let wakeFired = false;
+  const wakes = /* @__PURE__ */ new Set();
+  const subs = /* @__PURE__ */ new Set();
+  const frames = /* @__PURE__ */ new Set();
+  const isInert = () => rate === 0 && ramp === null && !changed;
+  const notify = () => {
+    for (const fn of [...subs]) fn();
+  };
+  const change = () => {
+    changed = true;
+    if (wakeFired) return;
+    wakeFired = true;
+    for (const fn of [...wakes]) fn();
+  };
+  const passAt = () => duration > 0 && Number.isFinite(duration) ? elapsed >= span ? passesOf(loop) - 1 : Math.floor(elapsed / duration) : 0;
+  const phaseAt = () => duration > 0 && Number.isFinite(duration) ? elapsed >= span ? 1 : elapsed % duration / duration : 0;
+  const advance = (dt) => {
+    if (!ramp) return rate * dt;
+    if (dt >= ramp.left) {
+      const area2 = (rate + ramp.to) / 2 * ramp.left + ramp.to * (dt - ramp.left);
+      rate = ramp.to;
+      ramp = null;
+      notify();
+      return area2;
+    }
+    const next = rate + (ramp.to - rate) * dt / ramp.left;
+    const area = (rate + next) / 2 * dt;
+    rate = next;
+    ramp.left -= dt;
+    return area;
+  };
+  const clock = {
+    get elapsed() {
+      return elapsed;
+    },
+    get pass() {
+      return passAt();
+    },
+    get phase() {
+      return phaseAt();
+    },
+    get rate() {
+      return rate;
+    },
+    set rate(next) {
+      checkRate(next, seekable);
+      rate = next;
+      ramp = null;
+      change();
+      notify();
+    },
+    get loop() {
+      return loop;
+    },
+    set loop(next) {
+      loop = next;
+      span = duration * passesOf(loop);
+      elapsed = Math.min(elapsed, span);
+      change();
+      notify();
+    },
+    ramp(to, over) {
+      checkRate(to, seekable);
+      if (!(over > 0)) {
+        clock.rate = to;
+        return;
+      }
+      ramp = { to, left: over };
+      change();
+      notify();
+    },
+    seek(target) {
+      if (!seekable) throw new Error("labkit: this clock is not seekable");
+      elapsed = Math.min(Math.max(0, target), span);
+      change();
+      notify();
+    },
+    sync(timestamp) {
+      const wasChanged = changed;
+      const before = elapsed;
+      if (!Number.isNaN(last) && !slept) {
+        elapsed += advance(Math.max(0, timestamp - last));
+        if (elapsed >= span && rate > 0) {
+          elapsed = span;
+          rate = 0;
+          ramp = null;
+          notify();
+        } else if (elapsed <= 0 && rate < 0) {
+          elapsed = 0;
+          rate = 0;
+          ramp = null;
+          notify();
+        }
+      }
+      last = timestamp;
+      changed = false;
+      wakeFired = false;
+      slept = isInert();
+      if (elapsed !== before || wasChanged) {
+        const pass = passAt();
+        for (const fn of [...frames]) fn(elapsed, pass);
+      }
+    },
+    rebase() {
+      last = Number.NaN;
+    },
+    get inert() {
+      return isInert();
+    },
+    onWake(fn) {
+      wakes.add(fn);
+      return () => {
+        wakes.delete(fn);
+      };
+    },
+    subscribe(fn) {
+      subs.add(fn);
+      return () => {
+        subs.delete(fn);
+      };
+    }
+  };
+  return {
+    clock,
+    reset() {
+      elapsed = 0;
+      rate = openRate;
+      ramp = null;
+      change();
+      notify();
+    },
+    onFrame(fn) {
+      frames.add(fn);
+      return () => {
+        frames.delete(fn);
+      };
+    }
+  };
+}
+
+// src/undo/stateOp.ts
+function stateOp(before, read, write) {
+  let after;
+  const forward = {
+    label: "state",
+    apply: () => write(structuredClone(after)),
+    invert: () => {
+      after = structuredClone(read());
+      return { label: "state", apply: () => write(structuredClone(before)), invert: () => forward };
+    }
+  };
+  return forward;
+}
+
 // src/canvas/cameraZoom.ts
 function atScale(view, scale, at) {
   return {
@@ -1027,6 +1280,36 @@ function zoomCameraTo(camera, zoom) {
   const scale = Math.min(max, Math.max(min, zoom));
   camera.set(atScale(camera.get(), scale, viewMiddle(camera)));
 }
+var PresentationContext = createContext(null);
+function usePresentation() {
+  const value = useContext(PresentationContext);
+  if (!value) throw new Error("[labkit] usePresentation() must be called inside <Lab>");
+  return value;
+}
+function usePresentedTrial(trialId) {
+  const presented = useContext(PresentationContext)?.trialId === trialId;
+  const surface = useSurfaceOptional();
+  const [el, ref] = useState(null);
+  useLayoutEffect(() => {
+    if (!presented || !el || !surface) return;
+    surface.scope(el);
+    return () => surface.scope(null);
+  }, [presented, el, surface]);
+  return { presented, ref };
+}
+function hasPresentParam() {
+  return typeof location !== "undefined" && new URLSearchParams(location.search).has("present");
+}
+var LightboxContext = createContext(null);
+function useLightbox() {
+  return useContext(LightboxContext);
+}
+function useLightboxControl() {
+  const ctx = useContext(LightboxContext);
+  const claim = ctx?.claimControl;
+  useLayoutEffect(() => claim?.(), [claim]);
+  return ctx;
+}
 function TrialBody({ sidebar, children, contentClassName, ...rest }) {
   return /* @__PURE__ */ jsx(
     Split,
@@ -1123,7 +1406,7 @@ function Portalled({
 }
 function UndockedSections({ trialId, sections, onDock }) {
   if (sections.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c7) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c7, onDock }, c7.id)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c6) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c6, onDock }, c6.id)) });
 }
 var NO_OP = () => {
 };
@@ -1145,19 +1428,20 @@ function TrialChrome({
   children
 }) {
   const lab = useLabContext();
+  const { presented, ref: presentedRef } = usePresentedTrial(trialId);
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] TrialChrome requires <LabStoreProvider>");
-  const updateTrialView = useStore(storeCtx.store, (s3) => s3.updateTrialView);
-  const updateTrialSidebarWidth = useStore(storeCtx.store, (s3) => s3.updateTrialSidebarWidth);
-  const setTrialTitle = useStore(storeCtx.store, (s3) => s3.setTrialTitle);
-  const setTrialSectionCollapsed = useStore(storeCtx.store, (s3) => s3.setTrialSectionCollapsed);
-  const updateTrialConfig = useStore(storeCtx.store, (s3) => s3.updateTrialConfig);
-  const updateTrialState = useStore(storeCtx.store, (s3) => s3.updateTrialState);
-  const undockPanelAction = useStore(storeCtx.store, (s3) => s3.undockPanel);
-  const dockPanelAction = useStore(storeCtx.store, (s3) => s3.dockPanel);
-  const undockedPanels = useStore(storeCtx.store, (s3) => s3.undockedPanels);
+  const updateTrialView = useStore(storeCtx.store, (s4) => s4.updateTrialView);
+  const updateTrialSidebarWidth = useStore(storeCtx.store, (s4) => s4.updateTrialSidebarWidth);
+  const setTrialTitle = useStore(storeCtx.store, (s4) => s4.setTrialTitle);
+  const setTrialSectionCollapsed = useStore(storeCtx.store, (s4) => s4.setTrialSectionCollapsed);
+  const updateTrialConfig = useStore(storeCtx.store, (s4) => s4.updateTrialConfig);
+  const updateTrialState = useStore(storeCtx.store, (s4) => s4.updateTrialState);
+  const undockPanelAction = useStore(storeCtx.store, (s4) => s4.undockPanel);
+  const dockPanelAction = useStore(storeCtx.store, (s4) => s4.dockPanel);
+  const undockedPanels = useStore(storeCtx.store, (s4) => s4.undockedPanels);
   const undockedIds = useMemo(
-    () => Object.values(undockedPanels).filter((p4) => p4.trialId === trialId).map((p4) => p4.sectionId),
+    () => Object.values(undockedPanels).filter((p5) => p5.trialId === trialId).map((p5) => p5.sectionId),
     [undockedPanels, trialId]
   );
   const view2d = as2DView(record.view);
@@ -1174,6 +1458,7 @@ function TrialChrome({
     cameras?.subscribe ?? noSubscribe,
     () => cameras?.get(trialId) ?? null
   );
+  const lightbox = useLightboxControl();
   const ctx = useMemo(() => {
     const setZoom = (z) => {
       if (camera) zoomCameraTo(camera, z);
@@ -1194,6 +1479,9 @@ function TrialChrome({
       hasLoupe: loupe != null,
       loupeOn: loupe?.on ?? false,
       toggleLoupe: loupe?.toggle ?? NO_OP,
+      canExpand: lightbox != null,
+      expanded: lightbox?.expanded ?? false,
+      toggleExpanded: lightbox?.toggle ?? NO_OP,
       configSchema,
       configFields: instrument.config ? [] : instrument.configSchema?.() ?? [],
       config: record.config,
@@ -1218,7 +1506,7 @@ function TrialChrome({
       undockedPanels: undockedIds,
       undockPanel: (sectionId, as) => undockPanelAction(trialId, sectionId, as),
       dockPanel: (sectionId) => dockPanelAction(trialId, sectionId),
-      savedSnapshots: lab.savedSnapshots.filter((s3) => s3.trialId === trialId),
+      savedSnapshots: lab.savedSnapshots.filter((s4) => s4.trialId === trialId),
       saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
       loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
       clone: () => lab.cloneTrial(trialId),
@@ -1239,6 +1527,7 @@ function TrialChrome({
     updateTrialState,
     undoBindings,
     loupe,
+    lightbox,
     view2d,
     activeToolId,
     setActiveTool,
@@ -1266,10 +1555,10 @@ function TrialChrome({
     ),
     [instrument, ctx, trialChrome, chrome, suppress, lab.controls]
   );
-  const inRegion = (region) => contributions.filter((c7) => c7.region === region);
+  const inRegion = (region) => contributions.filter((c6) => c6.region === region);
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
-    if (!mod) return;
+    if (!mod || presented) return;
     if (e.key === "z" || e.key === "Z") {
       e.preventDefault();
       if (e.shiftKey) ctx.redo();
@@ -1282,9 +1571,11 @@ function TrialChrome({
   return /* @__PURE__ */ jsxs(
     "section",
     {
+      ref: presentedRef,
       className: "lk-trial",
       "data-trial-id": trialId,
       "data-focused": lab.trials.length > 1 && lab.focusedTrialId === trialId ? "true" : void 0,
+      "data-lk-presented": presented ? "" : void 0,
       "aria-label": `Trial ${title}`,
       tabIndex: -1,
       onKeyDown: handleKeyDown,
@@ -1304,15 +1595,18 @@ function TrialChrome({
             TrialBody,
             {
               width: record.sidebarWidth,
-              onWidthChange: (w2) => updateTrialSidebarWidth(trialId, w2),
-              contentClassName: instrument.canvas || instrument.stage ? "lk-trial__content--flush" : void 0,
+              onWidthChange: (w3) => updateTrialSidebarWidth(trialId, w3),
+              contentClassName: [
+                instrument.canvas || instrument.stage ? "lk-trial__content--flush" : "",
+                presented ? "lk-trial__stage" : ""
+              ].filter(Boolean).join(" ") || void 0,
               sidebar: /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }),
                 /* @__PURE__ */ jsx(
                   UndockedSections,
                   {
                     trialId,
-                    sections: inRegion("sidebar").filter((c7) => undockedIds.includes(c7.id)),
+                    sections: inRegion("sidebar").filter((c6) => undockedIds.includes(c6.id)),
                     onDock: ctx.dockPanel
                   }
                 )
@@ -1336,8 +1630,8 @@ function Trial({ id, chrome, suppress }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] <Trial> requires <LabStoreProvider>");
-  const instruments = useStore(storeCtx.store, (s3) => s3.instruments) ?? lab.instruments;
-  const record = useStore(storeCtx.store, (s3) => s3.trials.find((w2) => w2.id === id));
+  const instruments = useStore(storeCtx.store, (s4) => s4.instruments) ?? lab.instruments;
+  const record = useStore(storeCtx.store, (s4) => s4.trials.find((w3) => w3.id === id));
   const instrument = record ? instruments.find((i4) => i4.name === record.instrumentName) : void 0;
   const kept = useKeptMarks(instrument?.annotations?.storage, id);
   if (!record) {
@@ -1410,14 +1704,15 @@ function TrialRuntime({
   );
   const [pointer] = useState(createPointerStore);
   const canvasContainerRef = useRef(null);
-  const updateTrialState = useStore(store, (s3) => s3.updateTrialState);
-  const updateTrialConfig = useStore(store, (s3) => s3.updateTrialConfig);
-  const updateTrialView = useStore(store, (s3) => s3.updateTrialView);
-  const updateTrialUndoStack = useStore(store, (s3) => s3.updateTrialUndoStack);
-  const updateTrialAnnotations = useStore(store, (s3) => s3.updateTrialAnnotations);
-  const labToolId = useStore(store, (s3) => s3.activeToolId);
-  const setLabTool = useStore(store, (s3) => s3.setLabTool);
-  const setTrialTool = useStore(store, (s3) => s3.setTrialTool);
+  const updateTrialState = useStore(store, (s4) => s4.updateTrialState);
+  const updateTrialConfig = useStore(store, (s4) => s4.updateTrialConfig);
+  const updateTrialView = useStore(store, (s4) => s4.updateTrialView);
+  const setTrialHistory = useStore(store, (s4) => s4.setTrialHistory);
+  const updateTrialClock = useStore(store, (s4) => s4.updateTrialClock);
+  const updateTrialAnnotations = useStore(store, (s4) => s4.updateTrialAnnotations);
+  const labToolId = useStore(store, (s4) => s4.activeToolId);
+  const setLabTool = useStore(store, (s4) => s4.setLabTool);
+  const setTrialTool = useStore(store, (s4) => s4.setTrialTool);
   const schema = useConfigSchema(instrument);
   const { config } = useResolvedConfig(schema, record.config, record.auto);
   const busRef = useRef(null);
@@ -1436,15 +1731,40 @@ function TrialRuntime({
     () => (instrument.canvas?.layers ?? []).filter((l8) => layerVisibility[l8.id] !== false).map((l8) => l8.id),
     [instrument.canvas, layerVisibility]
   );
+  const [clockHandle] = useState(
+    () => instrument.clock ? createTrialClock(instrument.clock, record.clock) : null
+  );
+  const clocks = useContext(ClockRegistryContext);
+  useEffect(() => {
+    if (!clockHandle || !clocks) return;
+    return clocks.register(record.id, clockHandle);
+  }, [clocks, clockHandle, record.id]);
+  useEffect(() => {
+    if (!clockHandle) return;
+    const { clock } = clockHandle;
+    return clock.subscribe(
+      () => updateTrialClock(record.id, { elapsed: clock.elapsed, rate: clock.rate })
+    );
+  }, [clockHandle, record.id, updateTrialClock]);
+  const ticks = useMemo(
+    () => clockHandle ? (fn) => clockHandle.onFrame(() => fn()) : void 0,
+    [clockHandle]
+  );
   const undoCap = instrument.undo;
   const undoEvents = useMemo(() => new Set(undoCap?.snapshotOn ?? ["state.change"]), [undoCap]);
   const maxDepth = undoCap?.maxDepth ?? 50;
   const snapshotIfNeeded = (event) => {
     if (!undoCap || !undoEvents.has(event)) return;
-    const current = store.getState().trials.find((w2) => w2.id === record.id);
+    const current = store.getState().trials.find((w3) => w3.id === record.id);
     if (!current) return;
-    const snap = structuredClone(current.state);
-    updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
+    let history = current.history;
+    if (!history) {
+      history = createHistory(null, { historyLimit: maxDepth });
+      setTrialHistory(record.id, history);
+    }
+    const read = () => store.getState().trials.find((w3) => w3.id === record.id)?.state;
+    const write = (state) => updateTrialState(record.id, state);
+    history.recordEntry([stateOp(structuredClone(current.state), read, write)], event);
   };
   const setView = (v2) => updateTrialView(record.id, v2);
   const stage = instrument.canvas ? void 0 : instrument.stage;
@@ -1573,7 +1893,8 @@ function TrialRuntime({
       },
       activeToolId: resolvedToolId,
       visibleLayers,
-      pointer
+      pointer,
+      ...clockHandle ? { clock: clockHandle.clock } : {}
     },
     emit: (event) => {
       snapshotIfNeeded(event);
@@ -1581,50 +1902,48 @@ function TrialRuntime({
     },
     job: jobCap ? job : void 0
   };
-  const undoState = () => {
-    const result = undo(record.undoStack, structuredClone(record.state));
-    if (!result) return;
-    updateTrialState(record.id, result.snapshot);
-    updateTrialUndoStack(record.id, result.stack);
-  };
-  const redoState = () => {
-    const result = redo(record.undoStack, structuredClone(record.state));
-    if (!result) return;
-    updateTrialState(record.id, result.snapshot);
-    updateTrialUndoStack(record.id, result.stack);
-  };
+  const stateHistory = useHistoryVersion(record.history);
   const undoBindings = undoCap || annotationsCap ? {
-    canUndo: markMoves.undo || (undoCap ? record.undoStack.past.length > 0 : false),
-    canRedo: markMoves.redo || (undoCap ? record.undoStack.future.length > 0 : false),
+    canUndo: markMoves.undo || (undoCap ? stateHistory?.canUndo() ?? false : false),
+    canRedo: markMoves.redo || (undoCap ? stateHistory?.canRedo() ?? false : false),
     undo: () => {
       if (annotationsCap && annotations.undo()) return;
-      if (undoCap) undoState();
+      if (undoCap) stateHistory?.undo();
     },
     redo: () => {
       if (annotationsCap && annotations.redo()) return;
-      if (undoCap) redoState();
+      if (undoCap) stateHistory?.redo();
     }
   } : void 0;
   const loupeBindings = lenses > 0 ? { on: loupeOn, toggle: () => setLoupeOn((v2) => !v2) } : void 0;
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
-    const ordered = layerOrder ? [...baseLayers].sort((a5, b3) => layerOrder.indexOf(a5.id) - layerOrder.indexOf(b3.id)) : baseLayers;
+    const ordered = layerOrder ? [...baseLayers].sort((a4, b3) => layerOrder.indexOf(a4.id) - layerOrder.indexOf(b3.id)) : baseLayers;
+    const clock = clockHandle?.clock;
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
+      timed: layer.timed === true,
       render: (ctx, view, frame) => {
         applyCamera(ctx, view, frame);
-        layer.draw(ctx, { state: record.state, config, zoom: view.zoom });
+        layer.draw(ctx, {
+          state: record.state,
+          config,
+          zoom: view.zoom,
+          elapsed: clock?.elapsed ?? 0,
+          pass: clock?.pass ?? 0,
+          phase: clock?.phase ?? 0
+        });
       }
     }));
-  }, [instrument.canvas, record.state, config, layerVisibility, layerOrder]);
+  }, [instrument.canvas, record.state, config, layerVisibility, layerOrder, clockHandle]);
   const layerDescriptors = useMemo(() => {
     if (!instrument.layers) return [];
     return instrument.layers.ids.map((l8) => typeof l8 === "string" ? { id: l8, label: l8 } : l8);
   }, [instrument.layers]);
   const layerItems = useMemo(() => {
-    const ordered = layerOrder ? [...layerDescriptors].sort((a5, b3) => layerOrder.indexOf(a5.id) - layerOrder.indexOf(b3.id)) : layerDescriptors;
+    const ordered = layerOrder ? [...layerDescriptors].sort((a4, b3) => layerOrder.indexOf(a4.id) - layerOrder.indexOf(b3.id)) : layerDescriptors;
     const pinnedLast = [
       ...ordered.filter((l8) => !l8.alwaysOn),
       ...ordered.filter((l8) => l8.alwaysOn)
@@ -1637,7 +1956,7 @@ function TrialRuntime({
     }));
   }, [layerDescriptors, layerOrder, layerVisibility]);
   const dragDropResult = useDragDrop({
-    capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s3) => s3 },
+    capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s4) => s4 },
     canvasContainerRef,
     view: view2d ?? DEFAULT_VIEW,
     worldSpec: instrument.canvas?.worldSpec,
@@ -1654,8 +1973,8 @@ function TrialRuntime({
   });
   const paletteItems = useMemo(() => {
     if (!instrument.dragDrop) return [];
-    const p4 = instrument.dragDrop.palette;
-    return typeof p4 === "function" ? p4(record.state, config) : p4;
+    const p5 = instrument.dragDrop.palette;
+    return typeof p5 === "function" ? p5(record.state, config) : p5;
   }, [instrument.dragDrop, record.state, config]);
   const layersWithFeedback = useMemo(() => {
     if (!dragDropResult.drag?.feedback) return canvasLayers;
@@ -1694,6 +2013,7 @@ function TrialRuntime({
           onResize: placeView,
           minZoom: instrument.canvas.minZoom,
           maxZoom: instrument.canvas.maxZoom,
+          ticks,
           children: instrument.render(renderCtx)
         }
       ),
@@ -1723,11 +2043,11 @@ function TrialRuntime({
   );
   const layerListNode = useMemo(
     () => instrument.layers && layerDescriptors.length > 0 ? /* @__PURE__ */ jsx(
-      D2,
+      A2,
       {
         items: layerItems,
         onReorder: (move) => {
-          setLayerOrder(S2(layerItems, move).map((l8) => l8.id));
+          setLayerOrder(T(layerItems, move).map((l8) => l8.id));
           bus.emit("layers.reorder");
         },
         onVisibilityChange: (lid, visible) => {
@@ -1768,7 +2088,7 @@ function TrialRuntime({
     }
   ) : null;
   const scopedBody = /* @__PURE__ */ jsx(WeaselProvider, { isolate: true, children: /* @__PURE__ */ jsx(PointerContextProvider, { store: pointer, children: /* @__PURE__ */ jsx(CameraPublishContext.Provider, { value: publishCamera, children: /* @__PURE__ */ jsx(LoupeSwitchContext.Provider, { value: loupeSwitch, children: body }) }) }) });
-  return /* @__PURE__ */ jsx(TrialIdProvider, { trialId: record.id, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: annotationsCap ? provided : null, children: /* @__PURE__ */ jsx(CameraWheelContext.Provider, { value: wheelSlot, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(TrialIdProvider, { trialId: record.id, children: /* @__PURE__ */ jsx(TrialClockContext.Provider, { value: clockHandle, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: annotationsCap ? provided : null, children: /* @__PURE__ */ jsx(CameraWheelContext.Provider, { value: wheelSlot, children: /* @__PURE__ */ jsxs(
     TrialChrome,
     {
       job: jobCap ? job : void 0,
@@ -1788,7 +2108,13 @@ function TrialRuntime({
         annotationOverlays
       ]
     }
-  ) }) }) });
+  ) }) }) }) });
+}
+var NO_SUBSCRIBE2 = () => () => {
+};
+function useHistoryVersion(history) {
+  useSyncExternalStore(history?.subscribe ?? NO_SUBSCRIBE2, () => history?.getVersion() ?? 0);
+  return history;
 }
 
 // src/trial/trialOps.ts
@@ -1841,8 +2167,7 @@ function addTrial(trials, instruments, instrumentName, options = {}) {
     instrumentName,
     config,
     state,
-    view: initialView(instrument),
-    undoStack: { past: [], future: [] }
+    view: initialView(instrument)
   };
   if (options.config) record.configSeed = seeded.config;
   if (seeded.autoPaths.length > 0) record.autoSeed = seeded.autoPaths;
@@ -1850,26 +2175,26 @@ function addTrial(trials, instruments, instrumentName, options = {}) {
   return [...trials, record];
 }
 function cloneTrial(trials, id) {
-  const sourceIdx = trials.findIndex((w2) => w2.id === id);
+  const sourceIdx = trials.findIndex((w3) => w3.id === id);
   const source = trials[sourceIdx];
   if (!source) return trials;
+  const { history: _history, ...rest } = source;
   const clone = {
-    ...source,
+    ...rest,
     id: newId(),
     config: structuredClone(source.config),
     state: structuredClone(source.state),
-    view: structuredClone(source.view),
-    undoStack: { past: [], future: [] }
+    view: structuredClone(source.view)
   };
   return [...trials.slice(0, sourceIdx + 1), clone, ...trials.slice(sourceIdx + 1)];
 }
 function closeTrial(trials, id) {
   if (trials.length <= 1) return trials;
-  const next = trials.filter((w2) => w2.id !== id);
+  const next = trials.filter((w3) => w3.id !== id);
   return next.length === trials.length ? trials : next;
 }
 function resetTrial(trials, id, instruments) {
-  const idx = trials.findIndex((w2) => w2.id === id);
+  const idx = trials.findIndex((w3) => w3.id === id);
   const current = trials[idx];
   if (!current) return trials;
   const instrument = findInstrument(instruments, current.instrumentName);
@@ -1887,7 +2212,7 @@ function resetTrial(trials, id, instruments) {
   return [...trials.slice(0, idx), reset, ...trials.slice(idx + 1)];
 }
 function swapTrial(trials, instruments, id, instrumentName, options = {}) {
-  const idx = trials.findIndex((w2) => w2.id === id);
+  const idx = trials.findIndex((w3) => w3.id === id);
   const current = trials[idx];
   if (!current) return trials;
   const [record] = addTrial([], instruments, instrumentName, options);
@@ -1895,10 +2220,10 @@ function swapTrial(trials, instruments, id, instrumentName, options = {}) {
   return [...trials.slice(0, idx), record, ...trials.slice(idx + 1)];
 }
 function reorderTrials(trials, ids) {
-  const byId = new Map(trials.map((w2) => [w2.id, w2]));
-  const named = ids.map((id) => byId.get(id)).filter((w2) => w2 !== void 0);
-  const seen = new Set(named.map((w2) => w2.id));
-  const rest = trials.filter((w2) => !seen.has(w2.id));
+  const byId = new Map(trials.map((w3) => [w3.id, w3]));
+  const named = ids.map((id) => byId.get(id)).filter((w3) => w3 !== void 0);
+  const seen = new Set(named.map((w3) => w3.id));
+  const rest = trials.filter((w3) => !seen.has(w3.id));
   return [...named, ...rest];
 }
 function findOvershoot(bound, items, tolerance = 1) {
@@ -1913,7 +2238,7 @@ function findOvershoot(bound, items, tolerance = 1) {
   return worst;
 }
 function tagAndClasses(el) {
-  return el.tagName.toLowerCase() + [...el.classList].map((c7) => `.${c7}`).join("");
+  return el.tagName.toLowerCase() + [...el.classList].map((c6) => `.${c6}`).join("");
 }
 function describeElement(el) {
   if (el.classList.length > 0) return tagAndClasses(el);
@@ -1996,7 +2321,7 @@ function LabHeader({ addTrial: addTrial2 = true }) {
       ]
     }
   ) : /* @__PURE__ */ jsx(
-    p4,
+    p6,
     {
       "aria-label": "Add trial",
       label: "Add trial\u2026",
@@ -2012,7 +2337,7 @@ function LabThemeSwitcher() {
 function LabPalette({ tools, contributions }) {
   const ctx = useLabChromeContext();
   const all = labContributions(tools, contributions);
-  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c7) => c7.region === "palette"), ctx });
+  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c6) => c6.region === "palette"), ctx });
 }
 function LabRoot({ children, mode = "auto", className }) {
   const resolved = useResolvedColorMode(mode);
@@ -2031,13 +2356,13 @@ function locate(url) {
 function currentPage(path, pages) {
   const here = locate(path);
   const onDoc = (doc) => here.doc.endsWith(doc);
-  const routed = pages.findIndex((p4) => {
-    if (!p4.href.includes("#")) return false;
-    const page = locate(p4.href);
+  const routed = pages.findIndex((p5) => {
+    if (!p5.href.includes("#")) return false;
+    const page = locate(p5.href);
     return onDoc(page.doc) && (here.route === page.route || here.route.startsWith(`${page.route}/`));
   });
   if (routed >= 0) return routed;
-  return pages.findIndex((p4) => !p4.href.includes("#") && onDoc(locate(p4.href).doc));
+  return pages.findIndex((p5) => !p5.href.includes("#") && onDoc(locate(p5.href).doc));
 }
 function LabSwitcher({ title, pages, path, className }) {
   const [open, setOpen] = useState(false);
@@ -2126,6 +2451,91 @@ function LabShell({
     footer && /* @__PURE__ */ jsx("footer", { className: "lk-shell-footer", children: footer })
   ] });
 }
+var NONE = { below: [], above: [] };
+var LightboxLayersContext = createContext(NONE);
+function LightboxLayers({ below, above, children }) {
+  const value = useMemo(
+    () => ({ below: below ?? NONE.below, above: above ?? NONE.above }),
+    [below, above]
+  );
+  return /* @__PURE__ */ jsx(LightboxLayersContext.Provider, { value, children });
+}
+function useLightboxLayers() {
+  return useContext(LightboxLayersContext);
+}
+function LabSurface({ bodyRef, children }) {
+  const outerSurface = useSurfaceOptional();
+  const outerOver = useSurfaceCanvas("over");
+  const outerUnder = useSurfaceCanvas("under");
+  const [ownOver, setOwnOver] = useState(null);
+  const [ownUnder, setOwnUnder] = useState(null);
+  const [underLayer, setUnderLayer] = useState(null);
+  const [overLayer, setOverLayer] = useState(null);
+  const ownOverRef = useRef(null);
+  const ownUnderRef = useRef(null);
+  const bufferRef = useRef({ w: 0, h: 0 });
+  const surfaceRef = useRef(null);
+  const onFrame = useCallback((frame) => {
+    const canvases2 = [ownUnderRef.current, ownOverRef.current].filter((c6) => c6 !== null);
+    if (canvases2.length === 0) return;
+    const w3 = Math.round(frame.size.width * frame.dpr);
+    const h2 = Math.round(frame.size.height * frame.dpr);
+    if (bufferRef.current.w !== w3 || bufferRef.current.h !== h2) {
+      bufferRef.current = { w: w3, h: h2 };
+      for (const c6 of canvases2) {
+        c6.width = w3;
+        c6.height = h2;
+        c6.style.width = `${frame.size.width}px`;
+        c6.style.height = `${frame.size.height}px`;
+      }
+      surfaceRef.current?.invalidateAll();
+      return;
+    }
+  }, []);
+  const ownSurface = useTiledSurface({ onFrame });
+  useInsertionEffect(() => {
+    surfaceRef.current = ownSurface;
+  }, [ownSurface]);
+  const attachOwnSurface = ownSurface.containerRef;
+  const overLayerRef = useCallback(
+    (el) => {
+      setOverLayer(el);
+      attachOwnSurface(el);
+    },
+    [attachOwnSurface]
+  );
+  const surface = outerSurface ?? ownSurface;
+  const canvases = useMemo(
+    () => outerSurface ? { over: outerOver, under: outerUnder } : { over: ownOver, under: ownUnder },
+    [outerSurface, outerOver, outerUnder, ownOver, ownUnder]
+  );
+  const below = useMemo(() => [underLayer], [underLayer]);
+  const above = useMemo(() => [overLayer], [overLayer]);
+  const body = /* @__PURE__ */ jsxs("div", { className: "lk-lab__body", ref: bodyRef, children: [
+    outerSurface ? null : /* @__PURE__ */ jsx("div", { className: "lk-lab__layer lk-lab__layer--under", ref: setUnderLayer, children: /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        className: "lk-lab__surface",
+        ref: (el) => {
+          ownUnderRef.current = el;
+          setOwnUnder(el);
+        }
+      }
+    ) }),
+    children,
+    outerSurface ? null : /* @__PURE__ */ jsx("div", { className: "lk-lab__layer lk-lab__layer--over", ref: overLayerRef, children: /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        className: "lk-lab__surface",
+        ref: (el) => {
+          ownOverRef.current = el;
+          setOwnOver(el);
+        }
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: surface, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: canvases, children: /* @__PURE__ */ jsx(LightboxLayers, { below, above, children: body }) }) });
+}
 var ZOOM_ID = "viewport.zoom";
 var NO_TOOLS = /* @__PURE__ */ new Map();
 var CHANNELS = { contextMenu: false, ingest: false };
@@ -2158,8 +2568,8 @@ function LabZoomControls() {
     cameras?.subscribe ?? noSubscribe2,
     () => cameras && focusedTrialId ? cameras.get(focusedTrialId) : null
   );
-  const zoom = useStore(storeCtx.store, (s3) => {
-    const record = s3.trials.find((t) => t.id === focusedTrialId);
+  const zoom = useStore(storeCtx.store, (s4) => {
+    const record = s4.trials.find((t) => t.id === focusedTrialId);
     return as2DView(record?.view)?.zoom ?? null;
   });
   const live = zoom !== null && camera !== null;
@@ -2201,7 +2611,7 @@ function LabZoomControls() {
         title: hint("Zoom out", "out"),
         disabled: !canOut,
         onClick: run("out"),
-        children: /* @__PURE__ */ jsx(X, { size: 16 })
+        children: /* @__PURE__ */ jsx(Z, { size: 16 })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -2229,6 +2639,311 @@ function LabZoomControls() {
 }
 var noSubscribe2 = () => () => {
 };
+var NEBULA_SLOTS = [
+  { cx: "18%", cy: "30%", sx: "60%", sy: "80%", stop: "70%" },
+  { cx: "78%", cy: "70%", sx: "55%", sy: "90%", stop: "65%" },
+  { cx: "50%", cy: "50%", sx: "50%", sy: "70%", stop: "75%" },
+  { cx: "12%", cy: "82%", sx: "50%", sy: "70%", stop: "70%" },
+  { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
+];
+function buildNebula(list, theme, mode, density) {
+  const ctx = { theme, resolved: resolveTheme(theme, { mode, density }) };
+  const n6 = colorCount(list, ctx) ?? NEBULA_SLOTS.length;
+  const colors = Array.from({ length: n6 }, (_2, i4) => colorAt(list, i4, ctx));
+  const blobs = colors.map((c6, i4) => {
+    const p5 = NEBULA_SLOTS[i4 % NEBULA_SLOTS.length];
+    return `radial-gradient(ellipse ${p5.sx} ${p5.sy} at ${p5.cx} ${p5.cy}, color-mix(in srgb, ${c6} 22%, transparent), transparent ${p5.stop})`;
+  });
+  blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
+  return blobs.join(", ");
+}
+function presentStorageKey(storageKey) {
+  return `${storageKey}:present`;
+}
+var SEED_RECORD = valueRecord(null, "lk-present-seed");
+function seedPresentedTrial(store, records, { instruments, defaultInstrument }, seed) {
+  const instrument = seed.instrument ?? defaultInstrument;
+  const fingerprint = stableStringify({ ...seed, instrument });
+  const trials = store.getState().trials;
+  if (trials.length > 0 && records.get(SEED_RECORD) === fingerprint) return;
+  const record = addTrial([], instruments, instrument, { config: seed.config })[0];
+  if (!record) return;
+  store.setState({ trials: [] });
+  store.getState().addTrial({
+    ...record,
+    ..."state" in seed ? { state: seed.state } : {},
+    ..."view" in seed ? { view: seed.view } : {}
+  });
+  records.set(SEED_RECORD, fingerprint);
+}
+function seedDefaultTrial(store, instruments, defaultInstrument) {
+  if (store.getState().trials.length > 0) return;
+  const record = addTrial([], instruments, defaultInstrument)[0];
+  if (!record) return;
+  store.getState().addTrial(record);
+}
+function openUnstoredLab(options, seed) {
+  const { instruments, defaultInstrument, mode } = options;
+  const store = createLabStore({ initialMode: mode ?? "auto", instruments });
+  const records = createRecordCache({ storage: noneAdapter, prefix: "", writable: false });
+  if (seed) seedPresentedTrial(store, records, options, seed);
+  else seedDefaultTrial(store, instruments, defaultInstrument);
+  return { store, records, close: () => records.close(), marks: /* @__PURE__ */ new Map() };
+}
+async function openStoredLab(options, storageKey, storage, seed) {
+  const { instruments, defaultInstrument, mode } = options;
+  const opened = await openLabStore({
+    storageKey,
+    storage: storage ?? await defaultStorage(),
+    initialMode: mode ?? "auto",
+    instruments
+  });
+  if (seed) seedPresentedTrial(opened.store, opened.records, options, seed);
+  else seedDefaultTrial(opened.store, instruments, defaultInstrument);
+  const marks = /* @__PURE__ */ new Map();
+  await Promise.all(
+    opened.store.getState().trials.map(async (trial) => {
+      const kept = instruments.find((i4) => i4.name === trial.instrumentName)?.annotations?.storage;
+      if (!kept) return;
+      try {
+        marks.set(trial.id, await kept.load());
+      } catch (error) {
+        console.warn(`[labkit] could not load the marks of trial "${trial.id}"`, error);
+        marks.set(trial.id, null);
+      }
+    })
+  );
+  return { ...opened, marks };
+}
+function useFocusPick(labBody, store, pick) {
+  useEffect(() => {
+    if (!labBody) return;
+    const pickFrom = (node) => {
+      const owned = new Set(store.getState().trials.map((t) => t.id));
+      const nearest = (from) => from?.closest(".lk-trial[data-trial-id]") ?? null;
+      let trial = typeof node?.closest === "function" ? nearest(node) : null;
+      while (trial && !owned.has(trial.dataset.trialId ?? "")) trial = nearest(trial.parentElement);
+      if (trial?.dataset.trialId) pick(trial.dataset.trialId);
+    };
+    const onInput = (event) => pickFrom(event.target);
+    let pending;
+    const doc = labBody.ownerDocument;
+    const win = doc.defaultView;
+    const onBlur = () => {
+      clearTimeout(pending);
+      pending = setTimeout(() => pickFrom(doc.activeElement), 0);
+    };
+    labBody.addEventListener("pointerdown", onInput, true);
+    labBody.addEventListener("focusin", onInput, true);
+    win?.addEventListener("blur", onBlur);
+    return () => {
+      clearTimeout(pending);
+      labBody.removeEventListener("pointerdown", onInput, true);
+      labBody.removeEventListener("focusin", onInput, true);
+      win?.removeEventListener("blur", onBlur);
+    };
+  }, [labBody, store, pick]);
+}
+
+// src/lightbox/modal.ts
+var OWN_DOUBLE_CLICK = [
+  "button",
+  "a[href]",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  '[contenteditable]:not([contenteditable="false"])',
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="combobox"]',
+  '[role="link"]',
+  '[role="menuitem"]',
+  '[role="option"]',
+  '[role="radio"]',
+  '[role="separator"]',
+  '[role="slider"]',
+  '[role="spinbutton"]',
+  '[role="switch"]',
+  '[role="tab"]',
+  '[role="textbox"]',
+  "[data-lk-lightbox-ignore]"
+].join(",");
+function opensLightbox(event, root) {
+  if (event.defaultPrevented) return false;
+  const target = event.target;
+  if (!(target instanceof Element)) return true;
+  const owner = target.closest(OWN_DOUBLE_CLICK);
+  return owner === null || !root.contains(owner);
+}
+function inertOutside(keep) {
+  const path = /* @__PURE__ */ new Set();
+  for (const el of keep) {
+    for (let node = el; node && node !== document.body; node = node.parentElement) {
+      path.add(node);
+    }
+  }
+  const marked = [];
+  for (const node of path) {
+    const parent = node.parentElement;
+    if (!parent) continue;
+    for (const sibling of Array.from(parent.children)) {
+      if (path.has(sibling) || sibling.hasAttribute("inert")) continue;
+      sibling.setAttribute("inert", "");
+      marked.push(sibling);
+    }
+  }
+  return () => {
+    for (const sibling of marked) sibling.removeAttribute("inert");
+  };
+}
+function liftStack(stack, self) {
+  if (typeof self.showPopover !== "function") return () => {
+  };
+  stack.forEach((el, i4) => {
+    el.setAttribute("popover", "manual");
+    if (el !== self) el.setAttribute("data-lk-lightbox-layer", "");
+    if (i4 === 0) el.setAttribute("data-lk-lightbox-scrim", "");
+    el.showPopover();
+  });
+  return () => {
+    for (const el of [...stack].reverse()) {
+      if (el.matches(":popover-open")) el.hidePopover();
+      el.removeAttribute("popover");
+      el.removeAttribute("data-lk-lightbox-layer");
+      el.removeAttribute("data-lk-lightbox-scrim");
+    }
+  };
+}
+function dialogProps(label) {
+  return {
+    role: "dialog",
+    "aria-modal": true,
+    "aria-label": label,
+    "data-wzl-portal-host": ""
+  };
+}
+function Lightbox({
+  children,
+  label = "Expanded view",
+  disabled = false,
+  expandOnDoubleClick = false,
+  expanded: expandedProp,
+  onExpandedChange,
+  className
+}) {
+  const [own, setOwn] = useState(false);
+  const expanded = !disabled && (expandedProp ?? own);
+  const onChangeRef = useLatest(onExpandedChange);
+  const expandedRef = useLatest(expanded);
+  const rootRef = useRef(null);
+  const closeRef = useRef(null);
+  const [claims, setClaims] = useState(0);
+  const layers = useLightboxLayers();
+  const surface = useSurfaceOptional();
+  const set = useCallback(
+    (next) => {
+      if (next === expandedRef.current) return;
+      setOwn(next);
+      onChangeRef.current?.(next);
+    },
+    [expandedRef, onChangeRef]
+  );
+  const ctx = useMemo(
+    () => disabled ? null : {
+      expanded,
+      open: () => set(true),
+      close: () => set(false),
+      toggle: () => set(!expandedRef.current),
+      claimControl: () => {
+        setClaims((n6) => n6 + 1);
+        return () => setClaims((n6) => n6 - 1);
+      }
+    },
+    [disabled, expanded, set, expandedRef]
+  );
+  useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!expanded || !el) return;
+    const returnTo = document.activeElement;
+    const stack = [...layers.below, el, ...layers.above].filter(
+      (layer) => layer !== null
+    );
+    const unlift = liftStack(stack, el);
+    const release = inertOutside(stack);
+    surface?.scope(el);
+    closeRef.current?.focus({ preventScroll: true });
+    return () => {
+      surface?.scope(null);
+      release();
+      unlift();
+      if (returnTo?.isConnected) returnTo.focus({ preventScroll: true });
+    };
+  }, [expanded, layers, surface]);
+  useEffect(() => {
+    if (!expanded) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      e.preventDefault();
+      set(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [expanded, set]);
+  const onDoubleClick = (e) => {
+    if (disabled || !expandOnDoubleClick || !opensLightbox(e, e.currentTarget)) return;
+    e.preventDefault();
+    set(!expanded);
+  };
+  const onClick = (e) => {
+    if (expanded && e.target === e.currentTarget) set(false);
+  };
+  const classes = ["lk-lightbox"];
+  if (expanded) classes.push("lk-lightbox--expanded");
+  if (className) classes.push(className);
+  let control = null;
+  if (expanded) {
+    control = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: closeRef,
+        type: "button",
+        className: "lk-lightbox__button lk-lightbox__close",
+        "aria-label": "Close expanded view",
+        title: "Close (Esc)",
+        onClick: () => set(false),
+        children: /* @__PURE__ */ jsx(V, { size: 16 })
+      }
+    );
+  } else if (!disabled && claims === 0) {
+    control = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "lk-lightbox__button lk-lightbox__open",
+        "aria-label": "Expand",
+        title: "Expand",
+        onClick: () => set(true),
+        children: /* @__PURE__ */ jsx(de, { size: 16 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(LightboxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: classes.join(" "),
+      ...expanded ? dialogProps(label) : null,
+      onDoubleClick,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "lk-lightbox__frame", children }),
+        control
+      ]
+    }
+  ) });
+}
 var ZONE_ID = asNodeId("lk-workspace");
 var STRATEGIES = { grid: gridStrategy, floating: floatingStrategy };
 var FLOAT_ZONE_ID = asNodeId("lk-workspace-floating");
@@ -2253,11 +2968,11 @@ function createWorkspaceStore(grid) {
   return store;
 }
 function extentOf(store, id) {
-  const p4 = store.getNode(id)?.membership?.placement;
-  if (!p4) return null;
+  const p5 = store.getNode(id)?.membership?.placement;
+  if (!p5) return null;
   const out = {};
-  if (p4.size) out.size = p4.size;
-  if (p4.span) out.span = p4.span;
+  if (p5.size) out.size = p5.size;
+  if (p5.span) out.span = p5.span;
   return Object.keys(out).length > 0 ? out : null;
 }
 function PanelFrame({ panel, floating = false }) {
@@ -2275,14 +2990,16 @@ function Workspace({
   onLayoutChange,
   gap = 12,
   padding = 0,
-  viewport
+  viewport,
+  lightbox = true,
+  expandOnDoubleClick = false
 }) {
   const items = Children.toArray(children);
-  const tilePanels = useMemo(() => (panels ?? []).filter((p4) => p4.as === "tile"), [panels]);
-  const floatPanels = useMemo(() => (panels ?? []).filter((p4) => p4.as === "floating"), [panels]);
+  const tilePanels = useMemo(() => (panels ?? []).filter((p5) => p5.as === "tile"), [panels]);
+  const floatPanels = useMemo(() => (panels ?? []).filter((p5) => p5.as === "floating"), [panels]);
   const idKey = JSON.stringify([
     ...items.map((_2, i4) => ids?.[i4] ?? `lk-ws-${i4}`),
-    ...tilePanels.map((p4) => `lk-panel-${p4.key}`)
+    ...tilePanels.map((p5) => `lk-panel-${p5.key}`)
   ]);
   const nodeIds = useMemo(() => JSON.parse(idKey).map(asNodeId), [idKey]);
   const layoutRef = useLatest(layout);
@@ -2332,9 +3049,11 @@ function Workspace({
     [onReorder]
   );
   const chrome = useMemo(() => {
+    const lightboxFor = typeof lightbox === "function" ? lightbox : () => lightbox;
+    const doubleClickFor = typeof expandOnDoubleClick === "function" ? expandOnDoubleClick : () => expandOnDoubleClick;
     const byId = new Map(nodeIds.map((id, i4) => [id, items[i4]]));
     const panelByNode = new Map(
-      tilePanels.map((p4) => [`lk-panel-${p4.key}`, p4])
+      tilePanels.map((p5) => [`lk-panel-${p5.key}`, p5])
     );
     return {
       [PANEL_KIND]: ({ node }) => {
@@ -2343,16 +3062,29 @@ function Workspace({
         return /* @__PURE__ */ jsx(PanelFrame, { panel });
       },
       [KIND]: ({ node }) => {
-        const content = byId.get(node.id) ?? null;
-        if (!reorderable) return content;
+        const id = String(node.id);
+        const tile = (
+          // `disabled` rather than leaving the wrapper out, so turning the
+          // lightbox off cannot remount the tile.
+          /* @__PURE__ */ jsx(
+            Lightbox,
+            {
+              className: "lk-trial-tile",
+              disabled: !lightboxFor(id),
+              expandOnDoubleClick: doubleClickFor(id),
+              children: byId.get(node.id) ?? null
+            }
+          )
+        );
+        if (!reorderable) return tile;
         return (
           // No grip strip: the trial's own title bar is the drag surface.
-          /* @__PURE__ */ jsx(TrialDragContext.Provider, { value: { nodeId: node.id }, children: /* @__PURE__ */ jsx("div", { className: "lk-trial-tile", children: content }) })
+          /* @__PURE__ */ jsx(TrialDragContext.Provider, { value: { nodeId: node.id }, children: tile })
         );
       }
     };
-  }, [nodeIds, items, reorderable, tilePanels]);
-  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p4) => /* @__PURE__ */ jsx(PanelFrame, { panel: p4, floating: true }, p4.key)) });
+  }, [nodeIds, items, reorderable, tilePanels, lightbox, expandOnDoubleClick]);
+  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p5) => /* @__PURE__ */ jsx(PanelFrame, { panel: p5, floating: true }, p5.key)) });
   const grid = /* @__PURE__ */ jsx(
     Container,
     {
@@ -2374,42 +3106,6 @@ function Workspace({
     ] })
   ) : reorderable ? /* @__PURE__ */ jsx(DragProvider, { children: grid }) : grid }) });
 }
-function seedDefaultTrial(store, instruments, defaultInstrument) {
-  if (store.getState().trials.length > 0) return;
-  const record = addTrial([], instruments, defaultInstrument)[0];
-  if (!record) return;
-  const { undoStack: _undoStack, ...rest } = record;
-  store.getState().addTrial(rest);
-}
-function openUnstoredLab({ instruments, defaultInstrument, mode }) {
-  const store = createLabStore({ initialMode: mode ?? "auto", instruments });
-  seedDefaultTrial(store, instruments, defaultInstrument);
-  const records = createRecordCache({ storage: noneAdapter, prefix: "", writable: false });
-  return { store, records, close: () => records.close(), marks: /* @__PURE__ */ new Map() };
-}
-async function openStoredLab({ instruments, defaultInstrument, mode }, storageKey, storage) {
-  const opened = await openLabStore({
-    storageKey,
-    storage: storage ?? await defaultStorage(),
-    initialMode: mode ?? "auto",
-    instruments
-  });
-  seedDefaultTrial(opened.store, instruments, defaultInstrument);
-  const marks = /* @__PURE__ */ new Map();
-  await Promise.all(
-    opened.store.getState().trials.map(async (trial) => {
-      const kept = instruments.find((i4) => i4.name === trial.instrumentName)?.annotations?.storage;
-      if (!kept) return;
-      try {
-        marks.set(trial.id, await kept.load());
-      } catch (error) {
-        console.warn(`[labkit] could not load the marks of trial "${trial.id}"`, error);
-        marks.set(trial.id, null);
-      }
-    })
-  );
-  return { ...opened, marks };
-}
 function LabFallback({
   title,
   mode,
@@ -2438,24 +3134,6 @@ function LabFallback({
     }
   );
 }
-var NEBULA_SLOTS = [
-  { cx: "18%", cy: "30%", sx: "60%", sy: "80%", stop: "70%" },
-  { cx: "78%", cy: "70%", sx: "55%", sy: "90%", stop: "65%" },
-  { cx: "50%", cy: "50%", sx: "50%", sy: "70%", stop: "75%" },
-  { cx: "12%", cy: "82%", sx: "50%", sy: "70%", stop: "70%" },
-  { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
-];
-function buildNebula(list, theme, mode, density) {
-  const ctx = { theme, resolved: resolveTheme(theme, { mode, density }) };
-  const n6 = colorCount(list, ctx) ?? NEBULA_SLOTS.length;
-  const colors = Array.from({ length: n6 }, (_2, i4) => colorAt(list, i4, ctx));
-  const blobs = colors.map((c7, i4) => {
-    const p4 = NEBULA_SLOTS[i4 % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p4.sx} ${p4.sy} at ${p4.cx} ${p4.cy}, color-mix(in srgb, ${c7} 22%, transparent), transparent ${p4.stop})`;
-  });
-  blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
-  return blobs.join(", ");
-}
 function LabPanes({
   contributions,
   children
@@ -2471,7 +3149,7 @@ function LabPanes({
     void 0,
     { scope: "lab" }
   );
-  const main = contributions.some((c7) => c7.region === "aside") ? /* @__PURE__ */ jsx(
+  const main = contributions.some((c6) => c6.region === "aside") ? /* @__PURE__ */ jsx(
     Split,
     {
       className: "lk-lab__panes",
@@ -2481,15 +3159,15 @@ function LabPanes({
       label: "Lab aside",
       defaultWidth: 320,
       width: asideWidth,
-      onWidthChange: (w2) => {
-        setAsideWidth(w2);
+      onWidthChange: (w3) => {
+        setAsideWidth(w3);
         surface?.invalidateRects();
       },
       sidebar: /* @__PURE__ */ jsx(LabAsideRegion, { contributions }),
       children
     }
   ) : children;
-  if (!contributions.some((c7) => c7.region === "sidebar")) return main;
+  if (!contributions.some((c6) => c6.region === "sidebar")) return main;
   return /* @__PURE__ */ jsx(
     Split,
     {
@@ -2499,8 +3177,8 @@ function LabPanes({
       label: "Lab sidebar",
       defaultWidth: 260,
       width: sidebarWidth,
-      onWidthChange: (w2) => {
-        setSidebarWidth(w2);
+      onWidthChange: (w3) => {
+        setSidebarWidth(w3);
         surface?.invalidateRects();
       },
       sidebar: /* @__PURE__ */ jsx(LabSidebarRegion, { contributions }),
@@ -2512,13 +3190,21 @@ function Lab(props) {
   if (process.env.NODE_ENV !== "production" && props.instruments.length === 0) {
     throw new Error("[labkit] <Lab> requires a non-empty `instruments` array");
   }
-  const { storageKey, storage } = props;
-  useWarnIgnoredChange("<Lab>", { storageKey, storage });
-  const opened = useOpenOnce(
-    () => storageKey === void 0 ? openUnstoredLab(props) : openStoredLab(props, storageKey, storage)
-  );
+  const { storageKey, storage, present } = props;
+  useWarnIgnoredChange("<Lab>", { storageKey, storage, present });
+  const [startsPresenting] = useState(() => present === true || hasPresentParam());
+  if (process.env.NODE_ENV !== "production" && props.seed && !startsPresenting) {
+    warnSeedIgnored();
+  }
+  const opened = useOpenOnce(() => {
+    const seed = startsPresenting ? props.seed ?? {} : void 0;
+    if (storageKey === void 0) return openUnstoredLab(props, seed);
+    const key = startsPresenting ? presentStorageKey(storageKey) : storageKey;
+    return openStoredLab(props, key, storage, seed);
+  });
   if (!opened) {
     if (props.fallback !== void 0) return props.fallback;
+    if (startsPresenting) return null;
     return /* @__PURE__ */ jsx(
       LabFallback,
       {
@@ -2531,7 +3217,13 @@ function Lab(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(LabRuntime, { ...props, opened });
+  return /* @__PURE__ */ jsx(LabRuntime, { ...props, opened, startsPresenting });
+}
+var seedWarned = false;
+function warnSeedIgnored() {
+  if (seedWarned) return;
+  seedWarned = true;
+  console.warn("[labkit] <Lab> reads `seed` only when it starts presenting; it is ignored here");
 }
 function LabRuntime({
   instruments,
@@ -2546,100 +3238,58 @@ function LabRuntime({
   chrome,
   labChrome,
   suppress,
+  expandOnDoubleClick = false,
   addTrial: addTrial2,
   zoom = true,
   tools,
   configRules,
   controls,
   children,
-  opened
+  opened,
+  startsPresenting
 }) {
   const { store } = opened;
   useLayoutEffect(() => {
     store.getState().setInstruments(instruments);
   }, [instruments, store]);
-  const trials = useStore(store, (s3) => s3.trials);
+  const trials = useStore(store, (s4) => s4.trials);
   const [cameras] = useState(createCameraRegistry);
+  const [clocks] = useState(createClockRegistry);
+  useClockLoop(clocks);
   const [focusPick, setFocusPick] = useState(null);
   const focusedTrialId = trials.some((t) => t.id === focusPick) ? focusPick : trials[0]?.id ?? null;
-  const savedSnapshots = useStore(store, (s3) => s3.savedSnapshots);
-  const modeValue = useStore(store, (s3) => s3.mode);
-  const layout = useStore(store, (s3) => s3.layout);
-  const undockedPanels = useStore(store, (s3) => s3.undockedPanels);
+  const [presentedBy, setPresentedBy] = useState(
+    startsPresenting ? "mount" : null
+  );
+  const presenting = presentedBy !== null;
+  const presentation = useMemo(
+    () => ({
+      active: presenting,
+      enter: () => setPresentedBy((by) => by ?? "enter"),
+      exit: () => setPresentedBy(null),
+      trialId: presenting ? focusedTrialId : null
+    }),
+    [presenting, focusedTrialId]
+  );
+  const savedSnapshots = useStore(store, (s4) => s4.savedSnapshots);
+  const modeValue = useStore(store, (s4) => s4.mode);
+  const layout = useStore(store, (s4) => s4.layout);
+  const undockedPanels = useStore(store, (s4) => s4.undockedPanels);
   const panelHostsRef = useRef(null);
   if (panelHostsRef.current === null) panelHostsRef.current = createPanelHostRegistry();
-  const outerSurface = useSurfaceOptional();
-  const outerOver = useSurfaceCanvas("over");
-  const outerUnder = useSurfaceCanvas("under");
-  const [ownOver, setOwnOver] = useState(null);
-  const [ownUnder, setOwnUnder] = useState(null);
-  const ownOverRef = useRef(null);
-  const ownUnderRef = useRef(null);
-  const bufferRef = useRef({ w: 0, h: 0 });
-  const surfaceRef = useRef(null);
-  const onFrame = useCallback((frame) => {
-    const canvases = [ownUnderRef.current, ownOverRef.current].filter((c7) => c7 !== null);
-    if (canvases.length === 0) return;
-    const w2 = Math.round(frame.size.width * frame.dpr);
-    const h2 = Math.round(frame.size.height * frame.dpr);
-    if (bufferRef.current.w !== w2 || bufferRef.current.h !== h2) {
-      bufferRef.current = { w: w2, h: h2 };
-      for (const c7 of canvases) {
-        c7.width = w2;
-        c7.height = h2;
-        c7.style.width = `${frame.size.width}px`;
-        c7.style.height = `${frame.size.height}px`;
-      }
-      surfaceRef.current?.invalidateAll();
-      return;
-    }
-  }, []);
-  const ownSurface = useTiledSurface({ onFrame });
-  useInsertionEffect(() => {
-    surfaceRef.current = ownSurface;
-  }, [ownSurface]);
   const [labBody, setLabBody] = useState(null);
-  const attachOwnSurface = ownSurface.containerRef;
-  const labBodyRef = useCallback(
-    (el) => {
-      setLabBody(el);
-      if (!outerSurface) attachOwnSurface(el);
-    },
-    [outerSurface, attachOwnSurface]
-  );
   useLabFitWarning(labBody);
+  useFocusPick(labBody, store, setFocusPick);
   useEffect(() => {
-    if (!labBody) return;
-    const pick = (node) => {
-      const owned = new Set(store.getState().trials.map((t) => t.id));
-      const nearest = (from) => from?.closest(".lk-trial[data-trial-id]") ?? null;
-      let trial = typeof node?.closest === "function" ? nearest(node) : null;
-      while (trial && !owned.has(trial.dataset.trialId ?? "")) trial = nearest(trial.parentElement);
-      if (trial?.dataset.trialId) setFocusPick(trial.dataset.trialId);
-    };
-    const onInput = (event) => pick(event.target);
-    let pending;
+    if (presentedBy !== "enter" || !labBody) return;
     const doc = labBody.ownerDocument;
-    const win = doc.defaultView;
-    const onBlur = () => {
-      clearTimeout(pending);
-      pending = setTimeout(() => pick(doc.activeElement), 0);
-    };
-    labBody.addEventListener("pointerdown", onInput, true);
-    labBody.addEventListener("focusin", onInput, true);
-    win?.addEventListener("blur", onBlur);
-    return () => {
-      clearTimeout(pending);
-      labBody.removeEventListener("pointerdown", onInput, true);
-      labBody.removeEventListener("focusin", onInput, true);
-      win?.removeEventListener("blur", onBlur);
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      setPresentedBy(null);
     };
-  }, [labBody, store]);
-  const surface = outerSurface ?? ownSurface;
-  const surfaceCanvases = useMemo(
-    () => outerSurface ? { over: outerOver, under: outerUnder } : { over: ownOver, under: ownUnder },
-    [outerSurface, outerOver, outerUnder, ownOver, ownUnder]
-  );
+    doc.addEventListener("keydown", onKeyDown);
+    return () => doc.removeEventListener("keydown", onKeyDown);
+  }, [presentedBy, labBody]);
   const workspacePanels = useMemo(
     () => Object.entries(undockedPanels).map(([key, panel]) => ({
       key,
@@ -2654,8 +3304,8 @@ function LabRuntime({
     () => labContributions([...annotationTools, ...tools ?? []], labChrome),
     [annotationTools, tools, labChrome]
   );
-  const hasFooterChrome = labChromeAll.some((c7) => c7.region === "footer");
-  const hasPaneChrome = labChromeAll.some((c7) => c7.region === "sidebar" || c7.region === "aside");
+  const hasFooterChrome = labChromeAll.some((c6) => c6.region === "footer");
+  const hasPaneChrome = labChromeAll.some((c6) => c6.region === "sidebar" || c6.region === "aside");
   useEffect(() => {
     if (mode && mode !== store.getState().mode) {
       store.getState().setMode(mode);
@@ -2663,14 +3313,14 @@ function LabRuntime({
   }, [mode, store]);
   const contextValue = useMemo(() => {
     const replaceTrials = (next) => {
-      const currentById = new Map(store.getState().trials.map((w2) => [w2.id, w2]));
-      const merged = next.map((w2) => currentById.get(w2.id) ?? w2);
+      const currentById = new Map(store.getState().trials.map((w3) => [w3.id, w3]));
+      const merged = next.map((w3) => currentById.get(w3.id) ?? w3);
       store.setState({ trials: merged });
     };
     const replaceAndFocusAdded = (next) => {
-      const before = new Set(store.getState().trials.map((w2) => w2.id));
+      const before = new Set(store.getState().trials.map((w3) => w3.id));
       replaceTrials(next);
-      const added = next.find((w2) => !before.has(w2.id));
+      const added = next.find((w3) => !before.has(w3.id));
       if (added) setFocusPick(added.id);
     };
     return {
@@ -2695,7 +3345,7 @@ function LabRuntime({
         const current = store.getState();
         const next = swapTrial(current.trials, instruments, id, instrumentName, options);
         if (next === current.trials) return;
-        const record = next[current.trials.findIndex((w2) => w2.id === id)];
+        const record = next[current.trials.findIndex((w3) => w3.id === id)];
         const { [id]: extent, ...layoutRest } = current.layout;
         if (extent) current.setLayout({ ...layoutRest, [record.id]: extent });
         replaceTrials(next);
@@ -2705,17 +3355,18 @@ function LabRuntime({
       focusTrial: (id) => setFocusPick(id),
       resetTrial: (id) => {
         const next = resetTrial(store.getState().trials, id, instruments);
-        const record = next.find((w2) => w2.id === id);
+        const record = next.find((w3) => w3.id === id);
         if (!record) return;
-        store.setState((s3) => ({
-          trials: s3.trials.map(
-            (w2) => w2.id === id ? { ...w2, config: record.config, state: record.state, view: record.view } : w2
+        store.setState((s4) => ({
+          trials: s4.trials.map(
+            (w3) => w3.id === id ? { ...w3, config: record.config, state: record.state, view: record.view } : w3
           )
         }));
+        clocks.get(id)?.reset();
       },
       savedSnapshots,
       saveSnapshot: (trialId, name) => {
-        const taken = store.getState().savedSnapshots.filter((s3) => s3.trialId === trialId).length;
+        const taken = store.getState().savedSnapshots.filter((s4) => s4.trialId === trialId).length;
         store.getState().saveSnapshot(trialId, name ?? `Snapshot ${taken + 1}`);
       },
       loadSnapshot: (trialId, snapshotId) => {
@@ -2732,6 +3383,7 @@ function LabRuntime({
       controls
     };
   }, [
+    clocks,
     instruments,
     trials,
     focusedTrialId,
@@ -2753,21 +3405,25 @@ function LabRuntime({
     Workspace,
     {
       panels: workspacePanels,
-      ids: trials.map((w2) => w2.id),
+      ids: trials.map((w3) => w3.id),
       resizable: true,
       reorderable: true,
       onReorder: (ids) => contextValue.reorderTrials(ids),
       layout,
       onLayoutChange: (next) => store.getState().setLayout(next),
-      children: trials.map((w2) => /* @__PURE__ */ jsx(Trial, { id: w2.id, chrome, suppress }, w2.id))
+      expandOnDoubleClick: typeof expandOnDoubleClick === "function" ? (id) => {
+        const trial = trials.find((t) => t.id === id);
+        return trial ? expandOnDoubleClick(trial) : false;
+      } : expandOnDoubleClick,
+      children: trials.map((w3) => /* @__PURE__ */ jsx(Trial, { id: w3.id, chrome, suppress }, w3.id))
     }
   );
-  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(PersistenceContext.Provider, { value: opened.records, children: /* @__PURE__ */ jsx(AnnotationPreloadContext.Provider, { value: opened.marks, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(CameraRegistryContext.Provider, { value: cameras, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(PersistenceContext.Provider, { value: opened.records, children: /* @__PURE__ */ jsx(AnnotationPreloadContext.Provider, { value: opened.marks, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(PresentationContext.Provider, { value: presentation, children: /* @__PURE__ */ jsx(CameraRegistryContext.Provider, { value: cameras, children: /* @__PURE__ */ jsx(ClockRegistryContext.Provider, { value: clocks, children: /* @__PURE__ */ jsx(
     ThemeProvider,
     {
       theme,
       selection: { mode: resolvedMode, density: density ?? "comfortable" },
-      className: "lk-lab",
+      className: presenting ? "lk-lab lk-lab--present" : "lk-lab",
       style: backdropStyle,
       children: /* @__PURE__ */ jsx(
         LabShell,
@@ -2782,53 +3438,22 @@ function LabRuntime({
           ] }) : footer,
           header: /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(LabHeader, { ...addTrial2 !== void 0 ? { addTrial: addTrial2 } : {} }),
-            zoom ? /* @__PURE__ */ jsx(LabZoom, {}) : null,
+            zoom && !presenting ? /* @__PURE__ */ jsx(LabZoom, {}) : null,
             children,
             /* @__PURE__ */ jsx(LabHeaderRegion, { contributions: labChromeAll }),
             /* @__PURE__ */ jsx(LabThemeSwitcher, {})
           ] }),
-          children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: panelHostsRef.current, children: /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: surface, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: surfaceCanvases, children: /* @__PURE__ */ jsxs("div", { className: "lk-lab__body", ref: labBodyRef, children: [
-            outerSurface ? null : (
-              // Two buffers stacked around the trials, both inert —
-              // each tile takes input from its own box. A tile's marks
-              // annotate the instrument's DOM from over it; an opaque
-              // renderer sits under it, so the pane can still hold a
-              // label. The under one is first so it paints first.
-              /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  "canvas",
-                  {
-                    className: "lk-lab__surface lk-lab__surface--under",
-                    ref: (el) => {
-                      ownUnderRef.current = el;
-                      setOwnUnder(el);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "canvas",
-                  {
-                    className: "lk-lab__surface lk-lab__surface--over",
-                    ref: (el) => {
-                      ownOverRef.current = el;
-                      setOwnOver(el);
-                    }
-                  }
-                )
-              ] })
-            ),
-            hasPaneChrome ? /* @__PURE__ */ jsxs(LabPanes, { contributions: labChromeAll, children: [
-              /* @__PURE__ */ jsx(LabPalette, { contributions: labChromeAll }),
-              workspace
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(LabPalette, { contributions: labChromeAll }),
-              workspace
-            ] })
-          ] }) }) }) })
+          children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: panelHostsRef.current, children: /* @__PURE__ */ jsx(LabSurface, { bodyRef: setLabBody, children: hasPaneChrome ? /* @__PURE__ */ jsxs(LabPanes, { contributions: labChromeAll, children: [
+            /* @__PURE__ */ jsx(LabPalette, { contributions: labChromeAll }),
+            workspace
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(LabPalette, { contributions: labChromeAll }),
+            workspace
+          ] }) }) })
         }
       )
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) }) });
 }
 function LabBoundary({ children }) {
   return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: null, children: /* @__PURE__ */ jsx(PersistenceContext.Provider, { value: null, children: /* @__PURE__ */ jsx(AnnotationPreloadContext.Provider, { value: null, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: null, children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: { over: null, under: null }, children: /* @__PURE__ */ jsx(TrialIdContext.Provider, { value: null, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: null, children: /* @__PURE__ */ jsx(CameraWheelContext.Provider, { value: null, children: /* @__PURE__ */ jsx(CanvasStackContext.Provider, { value: null, children: /* @__PURE__ */ jsx(TrialDragContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: null, children }) }) }) }) }) }) }) }) }) }) }) }) });
@@ -2940,9 +3565,9 @@ function ButtonsAndToggles() {
       /* @__PURE__ */ jsx(Xt, { status: "muted", children: "MUTED" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Checkbox, Switch", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
-      /* @__PURE__ */ jsx(c6, { isSelected: snap, onChange: setSnap, children: "Snap to grid" }),
-      /* @__PURE__ */ jsx(c6, { isIndeterminate: true, children: "Mixed" }),
-      /* @__PURE__ */ jsx(a6, { isSelected: wifi, onChange: setWifi, children: "Wifi" })
+      /* @__PURE__ */ jsx(c4, { isSelected: snap, onChange: setSnap, children: "Snap to grid" }),
+      /* @__PURE__ */ jsx(c4, { isIndeterminate: true, children: "Mixed" }),
+      /* @__PURE__ */ jsx(a5, { isSelected: wifi, onChange: setWifi, children: "Wifi" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "RadioGroup", children: /* @__PURE__ */ jsxs(l5, { label: "Snap mode", orientation: "horizontal", defaultValue: "grid", children: [
       /* @__PURE__ */ jsx(u3, { value: "off", children: "Off" }),
@@ -2951,7 +3576,7 @@ function ButtonsAndToggles() {
     ] }) }),
     /* @__PURE__ */ jsxs(Cell, { label: "ToggleBar", children: [
       /* @__PURE__ */ jsx(
-        a5,
+        s3,
         {
           ariaLabel: "Align",
           value: align,
@@ -2964,7 +3589,7 @@ function ButtonsAndToggles() {
         }
       ),
       /* @__PURE__ */ jsx(
-        a5,
+        s3,
         {
           ariaLabel: "Align, flat",
           variant: "flat",
@@ -2990,7 +3615,7 @@ function ButtonsAndToggles() {
         }
       ),
       /* @__PURE__ */ jsx(
-        a8,
+        a7,
         {
           items: [
             { value: "undo", label: "Undo", onAction: () => {
@@ -3003,7 +3628,7 @@ function ButtonsAndToggles() {
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "MenuButton, Disclosure", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
       /* @__PURE__ */ jsx(
-        p4,
+        p6,
         {
           label: "Add trial\u2026",
           onAction: () => {
@@ -3017,19 +3642,19 @@ function ButtonsAndToggles() {
       /* @__PURE__ */ jsx(i3, { open, onToggle: () => setOpen((o4) => !o4), label: "Shapes" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Tabs", children: /* @__PURE__ */ jsxs(o5, { children: [
-      /* @__PURE__ */ jsxs(s4, { "aria-label": "Sections", children: [
-        /* @__PURE__ */ jsx(c7, { id: "props", children: "Props" }),
-        /* @__PURE__ */ jsx(c7, { id: "events", children: "Events" }),
-        /* @__PURE__ */ jsx(c7, { id: "snapshot", children: "Snapshot" })
+      /* @__PURE__ */ jsxs(s5, { "aria-label": "Sections", children: [
+        /* @__PURE__ */ jsx(c5, { id: "props", children: "Props" }),
+        /* @__PURE__ */ jsx(c5, { id: "events", children: "Events" }),
+        /* @__PURE__ */ jsx(c5, { id: "snapshot", children: "Snapshot" })
       ] }),
-      /* @__PURE__ */ jsx(l9, { id: "props", children: "Props panel." }),
-      /* @__PURE__ */ jsx(l9, { id: "events", children: "Events panel." }),
-      /* @__PURE__ */ jsx(l9, { id: "snapshot", children: "Snapshot panel." })
+      /* @__PURE__ */ jsx(l8, { id: "props", children: "Props panel." }),
+      /* @__PURE__ */ jsx(l8, { id: "events", children: "Events panel." }),
+      /* @__PURE__ */ jsx(l8, { id: "snapshot", children: "Snapshot panel." })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Keycaps", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
       /* @__PURE__ */ jsx(p, { keys: [{ label: "\u2318" }, { label: "\u21E7" }, { label: "K" }], separator: "+" }),
-      /* @__PURE__ */ jsx(f2, { label: "K" }),
-      /* @__PURE__ */ jsx(f2, { label: "\u2325", variant: "minimal" })
+      /* @__PURE__ */ jsx(f3, { label: "K" }),
+      /* @__PURE__ */ jsx(f3, { label: "\u2325", variant: "minimal" })
     ] }) })
   ] });
 }
@@ -3089,9 +3714,9 @@ function FieldsAndPickers() {
       )
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "RangeSlider, Slider", children: [
-      /* @__PURE__ */ jsx(l10, { label: "Range", defaultValue: [20, 80], minValue: 0, maxValue: 100 }),
+      /* @__PURE__ */ jsx(l9, { label: "Range", defaultValue: [20, 80], minValue: 0, maxValue: 100 }),
       /* @__PURE__ */ jsx(
-        l10,
+        l9,
         {
           label: "Opacity",
           defaultValue: 75,
@@ -3101,7 +3726,7 @@ function FieldsAndPickers() {
         }
       ),
       /* @__PURE__ */ jsx(
-        S,
+        w2,
         {
           ariaLabel: "Pair",
           min: 0,
@@ -3116,7 +3741,7 @@ function FieldsAndPickers() {
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "DetentSlider, InlineRange", children: [
       /* @__PURE__ */ jsx(
-        c8,
+        c6,
         {
           items: [0.25, 0.5, 1, 2, 4],
           value: rate,
@@ -3171,9 +3796,9 @@ function PanelsAndRows() {
   ]);
   const [panelCollapsed, setPanelCollapsed] = useState(false);
   return /* @__PURE__ */ jsxs(Section, { title: "Panels & property rows", children: [
-    /* @__PURE__ */ jsx(Cell, { label: "PropertyPanel", children: /* @__PURE__ */ jsx(ae2, { title: "Shape", children: /* @__PURE__ */ jsxs(oe, { children: [
+    /* @__PURE__ */ jsx(Cell, { label: "PropertyPanel", children: /* @__PURE__ */ jsx(ce2, { title: "Shape", children: /* @__PURE__ */ jsxs(le, { children: [
       /* @__PURE__ */ jsx(
-        de,
+        ye,
         {
           kind: "number",
           control: "slider",
@@ -3186,7 +3811,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        de,
+        ye,
         {
           kind: "number",
           control: "slider",
@@ -3199,7 +3824,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        de,
+        ye,
         {
           kind: "color",
           label: "Fill",
@@ -3209,9 +3834,9 @@ function PanelsAndRows() {
           onAlphaChange: setAlpha
         }
       ),
-      /* @__PURE__ */ jsx(de, { kind: "color", label: "Stroke", value: stroke, onChange: setStroke }),
+      /* @__PURE__ */ jsx(ye, { kind: "color", label: "Stroke", value: stroke, onChange: setStroke }),
       /* @__PURE__ */ jsx(
-        de,
+        ye,
         {
           kind: "number",
           label: "Count",
@@ -3223,7 +3848,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        de,
+        ye,
         {
           kind: "enum",
           label: "Line cap",
@@ -3236,7 +3861,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        de,
+        ye,
         {
           kind: "enum",
           control: "toggle",
@@ -3250,10 +3875,10 @@ function PanelsAndRows() {
           ]
         }
       ),
-      /* @__PURE__ */ jsx(de, { kind: "string", label: "Label", value: label, onChange: setLabel }),
-      /* @__PURE__ */ jsx(de, { kind: "boolean", label: "Visible", value: visible, onChange: setVisible }),
+      /* @__PURE__ */ jsx(ye, { kind: "string", label: "Label", value: label, onChange: setLabel }),
+      /* @__PURE__ */ jsx(ye, { kind: "boolean", label: "Visible", value: visible, onChange: setVisible }),
       /* @__PURE__ */ jsx(b3, { title: "Bevel", defaultCollapsed: true, children: /* @__PURE__ */ jsx(
-        de,
+        ye,
         {
           kind: "number",
           control: "slider",
@@ -3276,10 +3901,10 @@ function PanelsAndRows() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "LayerList", children: /* @__PURE__ */ jsx(
-      D2,
+      A2,
       {
         items: layers,
-        onReorder: (move) => setLayers(S2(layers, move)),
+        onReorder: (move) => setLayers(T(layers, move)),
         renderBody: (item) => /* @__PURE__ */ jsxs("div", { children: [
           "settings for ",
           item.label
@@ -3287,7 +3912,7 @@ function PanelsAndRows() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "Sidebar, SidebarPanel", children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__box", children: /* @__PURE__ */ jsx(n6, { side: "right", ariaLabel: "Specimen sidebar", children: /* @__PURE__ */ jsx(
-      a9,
+      a8,
       {
         title: "Selection",
         collapsed: panelCollapsed,
@@ -3312,7 +3937,7 @@ function OverlaysAndFeedback() {
       ] }),
       /* @__PURE__ */ jsx("button", { type: "button", ref: calloutAnchor, onClick: () => setCalloutOpen(true), children: "Callout" }),
       /* @__PURE__ */ jsx(
-        v2,
+        v3,
         {
           triggerRef: calloutAnchor,
           isOpen: calloutOpen,
@@ -3324,7 +3949,7 @@ function OverlaysAndFeedback() {
       ),
       /* @__PURE__ */ jsx(c, { onClick: () => setDialogOpen(true), children: "Dialog" }),
       /* @__PURE__ */ jsx(
-        d3,
+        d2,
         {
           isOpen: dialogOpen,
           onOpenChange: setDialogOpen,
@@ -3376,7 +4001,7 @@ function ListsAndData() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "DataGrid", children: /* @__PURE__ */ jsx(
-      f,
+      f2,
       {
         rows: [
           { id: "1", name: "accent", count: 3 },
@@ -3407,14 +4032,14 @@ function ToolChrome() {
       },
       id
     )) }) }),
-    /* @__PURE__ */ jsx(Cell, { label: "ToolOptionsBar", children: /* @__PURE__ */ jsxs(c5, { label: "Text", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "ToolOptionsBar", children: /* @__PURE__ */ jsxs(p4, { label: "Text", children: [
       /* @__PURE__ */ jsx(c, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Bold", children: "B" }),
       /* @__PURE__ */ jsx(c, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Italic", children: "I" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "ResizeHandle", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__box", children: [
       /* @__PURE__ */ jsx("div", { className: "lk-specimen__box-main", children: "content" }),
       /* @__PURE__ */ jsx(
-        l8,
+        l7,
         {
           value: paneWidth,
           min: 100,
@@ -3538,7 +4163,7 @@ function EditorsAndPlots() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "Timeline", wide: true, children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__timeline", children: /* @__PURE__ */ jsx(
-      xe2,
+      xe,
       {
         tracks,
         duration: 2e3,
@@ -3563,10 +4188,6 @@ function LabChrome() {
       /* @__PURE__ */ jsx(Toolbar.Group, { end: true, children: /* @__PURE__ */ jsx(Toolbar.Button, { onClick: () => {
       }, children: "Save" }) })
     ] }) }),
-    /* @__PURE__ */ jsx(Cell, { label: "StatusBar", children: /* @__PURE__ */ jsxs(StatusBar, { children: [
-      /* @__PURE__ */ jsx(StatusBar.Section, { children: "Items: 12" }),
-      /* @__PURE__ */ jsx(StatusBar.Section, { children: "Zoom: 100%" })
-    ] }) }),
     /* @__PURE__ */ jsxs(Cell, { label: "Legend, JobProgress", children: [
       /* @__PURE__ */ jsx(Legend, { entries: LEGEND }),
       /* @__PURE__ */ jsx(JobProgress, { job: JOB })
@@ -3601,6 +4222,6 @@ function Specimen({ className }) {
   ] });
 }
 
-export { AnnotationOverlay, AnnotationTargets, Lab, LabBoundary, LabPalette, LabRoot, LabShell, LabSwitcher, LabZoom, SPECIMEN_SECTIONS, Specimen, Trial, TrialBody, TrialChrome, Workspace, addTrial, annotationsFromJSON, capturePlan, captureTarget, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, currentPage, defineInstrument, fitView, fromWeaselView, interstellarTheme, isStale, reorderTrials, resetTrial, resolveMarkStyle, seenFrom, toWeaselView, validateConfigSchema };
+export { AnnotationOverlay, AnnotationTargets, Lab, LabBoundary, LabPalette, LabRoot, LabShell, LabSwitcher, LabZoom, Lightbox, LightboxLayers, SPECIMEN_SECTIONS, Specimen, Trial, TrialBody, TrialChrome, Workspace, addTrial, annotationsFromJSON, capturePlan, captureTarget, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, currentPage, defineInstrument, fitView, fromWeaselView, interstellarTheme, isStale, reorderTrials, resetTrial, resolveMarkStyle, seenFrom, toWeaselView, useClockFrame, useLightbox, useLightboxControl, useLightboxLayers, usePresentation, useTrialClock, validateConfigSchema };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map