@weasel-js/labkit 1.4.4 → 1.5.0

package/dist/index.js

@@ -1,54 +1,62 @@
+import { resolveLoupe, TrialLoupe } from './chunk-ZPH5WTWF.js';
+export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-ZPH5WTWF.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-RS3HRQWU.js';
-import { useSurfaceOptional, useSurfaceCanvas, useTileId, useTiledSurface, SurfaceContext, SurfaceCanvasContext } from './chunk-FQMJUVHJ.js';
-export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTiledSurface } from './chunk-FQMJUVHJ.js';
+import { useTiledSurface } from './chunk-QLSV2N3G.js';
+export { composeRects, rectsEqual, toDeviceRect, useTiledSurface } from './chunk-QLSV2N3G.js';
 import { useJob } from './chunk-HXXTULDN.js';
 export { useJob } from './chunk-HXXTULDN.js';
-import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, AnnotationsContext } from './chunk-64ZCN3DA.js';
-export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationsContext, ExportMenu, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, mergeContributions, suppressContributions, useAnnotations, useAnnotationsOptional } from './chunk-64ZCN3DA.js';
-import { JobProgress } from './chunk-MOM3GOVY.js';
-export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-MOM3GOVY.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-SMHP6XZ4.js';
-import { newId, createLabStore, panelKey, noneAdapter } from './chunk-2P6PP5N4.js';
-export { CURRENT_DOCUMENT_VERSION, createMemoryAdapter, dockPanel, labDocumentKey, localStorageAdapter, noneAdapter, panelKey, quarantineKey, sessionStorageAdapter, undockPanel, urlHashAdapter, useTrialState } from './chunk-2P6PP5N4.js';
-import { LabStoreContext, TrialIdProvider } from './chunk-2YILQ7Y5.js';
-export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
-import { fromConfigFields } from './chunk-U3IYHIAE.js';
-export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-U3IYHIAE.js';
+import { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, AnnotationsContext, useLabChromeContext, labContributions, LabHeaderRegion, LabFooterRegion, LabSidebarRegion } from './chunk-NS64DXMN.js';
+export { AnnotationsContext, ExportMenu, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useAnnotations, useAnnotationsOptional, useLabChromeContext } from './chunk-NS64DXMN.js';
+import { Split, JobProgress } from './chunk-EKIICY6X.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar, Split } from './chunk-EKIICY6X.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-KJALCDWE.js';
+import { createLabStore, openLabStore, panelKey } from './chunk-67SJLMC7.js';
+export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-67SJLMC7.js';
+import { newId, useWarnIgnoredChange, useOpenOnce, PersistenceContext, createRecordCache, noneAdapter, defaultStorage, usePersistedState } from './chunk-RWNDDKOH.js';
+export { Persistence, createIndexedDbAdapter, createMemoryAdapter, indexedDbAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, usePersistedState } from './chunk-RWNDDKOH.js';
+export { ControlPanel } from './chunk-TQBBYTAF.js';
+import { useConfigSchema } from './chunk-6ZDGOZQV.js';
+export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useConfigSchema } from './chunk-6ZDGOZQV.js';
+import { useLabContext, LabContext } from './chunk-NDRYLVOW.js';
+export { LabContext, useLabContext } from './chunk-NDRYLVOW.js';
+export { fromConfigFields, isLeafVisible } from './chunk-UU3NJO6N.js';
 import { hasConfigPath, schemaNodeAtPath, withValueAtPath, fillConfigDefaults } from './chunk-E44SU6XS.js';
 export { fillConfigDefaults, hasConfigPath, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-E44SU6XS.js';
-import { CanvasStack } from './chunk-I6JCVE24.js';
-export { CanvasStack, PITCH_LIMIT, clampPitch, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-I6JCVE24.js';
-import { LayerList } from './chunk-BKFVHKJH.js';
-export { LayerList } from './chunk-BKFVHKJH.js';
-import './chunk-SBXNQW4G.js';
-import { E, w, T, C, g, r6 } from './chunk-W3ECWC2K.js';
-export { N2 as CheckboxRow, M2 as ColorRow, y3 as CurveField, z as EffectCard, V as EffectCardList, c3 as LayerStack, F as NumberRow, H as PropertyGroup, T2 as PropertyList, w2 as PropertyPanel, D as PropertyRow, E2 as PropertySpan, I as SelectRow, A2 as SliderRow, R as Subpanel, P2 as TextRow, L2 as ToggleRow } from './chunk-W3ECWC2K.js';
-import { resolveLoupe, TrialLoupe } from './chunk-TJ7QY3OC.js';
-export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-TJ7QY3OC.js';
-export { centerOn, zoomAt } from './chunk-CTRKTLYZ.js';
+import { CameraWheelContext, as2DView, DEFAULT_VIEW, CanvasStack, Stage, withZoom, fitStage } from './chunk-PGETSEDK.js';
+export { CanvasStack, DEFAULT_VIEW, PITCH_LIMIT, Stage, as2DView, clampPitch, fitStage, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-PGETSEDK.js';
+export { centerOn, zoomAt } from './chunk-H6ZAOWNE.js';
 import { applyCamera } from './chunk-2AYGEN57.js';
 export { DEFAULT_FRAME, applyCamera, resolveFrame, screenToWorld, worldToScreen } from './chunk-2AYGEN57.js';
+import { useSurfaceOptional, useSurfaceCanvas, useTileId, SurfaceContext, SurfaceCanvasContext } from './chunk-WIG6XHJ7.js';
+export { SurfaceCanvasContext, SurfaceContext, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId } from './chunk-WIG6XHJ7.js';
 export { CanvasStackContext } from './chunk-CQLQPQ4P.js';
-import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext, getMarker, getPaintKind, boundsOfPath, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, SCRIPT_METRICS } from '@weasel-js/core';
+import { LabStoreContext, TrialIdProvider } from './chunk-2YILQ7Y5.js';
+export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
+import { LayerList } from './chunk-MUKOW3TC.js';
+export { LayerList } from './chunk-MUKOW3TC.js';
+import './chunk-SBXNQW4G.js';
+import { E, w, T, p, u, c, n, f, r2, h, C, l5, r6 } from './chunk-S2SHZRD7.js';
+export { a3 as Button, P3 as CheckboxRow, N2 as ColorRow, b3 as CurveField, B as EffectCard, H as EffectCardList, c3 as LayerStack, I as NumberRow, U2 as PropertyGroup, E2 as PropertyList, T2 as PropertyPanel, O as PropertyRow, D as PropertySpan, L as SelectRow, j2 as SliderRow, z as Subpanel, F as TextRow, r6 as ToggleBar, R as ToggleRow } from './chunk-S2SHZRD7.js';
+import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext, getMarker, getPaintKind, boundsOfPath, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, resolveAlign, SCRIPT_METRICS } from '@weasel-js/core';
 import { tileGeometry } from '@weasel-js/core/patterns-builtin';
-import { createContext, useState, useRef, useEffect, useContext, useMemo, useId, useCallback, Children, useLayoutEffect, useSyncExternalStore } from 'react';
-import { createPortal } from 'react-dom';
+import { createContext, useState, useRef, useEffect, useCallback, useContext, useMemo, useId, Children, useLayoutEffect, useSyncExternalStore } from 'react';
+import { flushSync, createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useStore } from 'zustand/react';
-import { asNodeId, Store, createNode, stripStrategy, floatingStrategy, gridStrategy } from 'windease';
-import { Provider, StrategyRegistryProvider, Container, DragProvider, useDragHandle } from 'windease/react';
+import { Provider, StrategyRegistryProvider, DragProvider, Container, useDragHandle } from 'windease/react';
+import { asNodeId, Store, createNode, floatingStrategy, gridStrategy } from 'windease';
 
 var IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
-function multiply(a, b) {
+function multiply(a2, b2) {
   return [
-    a[0] * b[0] + a[2] * b[1],
-    a[1] * b[0] + a[3] * b[1],
-    a[0] * b[2] + a[2] * b[3],
-    a[1] * b[2] + a[3] * b[3],
-    a[0] * b[4] + a[2] * b[5] + a[4],
-    a[1] * b[4] + a[3] * b[5] + a[5]
+    a2[0] * b2[0] + a2[2] * b2[1],
+    a2[1] * b2[0] + a2[3] * b2[1],
+    a2[0] * b2[2] + a2[2] * b2[3],
+    a2[1] * b2[2] + a2[3] * b2[3],
+    a2[0] * b2[4] + a2[2] * b2[5] + a2[4],
+    a2[1] * b2[4] + a2[3] * b2[5] + a2[5]
   ];
 }
 function isIdentity(m, eps = 1e-9) {
@@ -56,13 +64,17 @@ function isIdentity(m, eps = 1e-9) {
 }
 function formatMatrix(m) {
   if (isIdentity(m)) return null;
-  return `matrix(${m.map((n) => trimNumber(n)).join(" ")})`;
+  return `matrix(${m.map((n2) => trimNumber(n2)).join(" ")})`;
 }
-function trimNumber(n) {
-  if (!Number.isFinite(n)) return "0";
-  const r2 = Math.round(n * 1e6) / 1e6;
-  if (Number.isInteger(r2)) return String(r2);
-  return String(r2);
+function trimNumber(n2) {
+  if (!Number.isFinite(n2)) return "0";
+  const r3 = Math.round(n2 * 1e6) / 1e6;
+  if (Number.isInteger(r3)) return String(r3);
+  return String(r3);
+}
+function anchorOffset(style, width) {
+  const edge = resolveAlign(style?.align ?? "left", style?.direction ?? "ltr");
+  return edge === "center" ? width / 2 : edge === "right" ? width : 0;
 }
 function patternSpecOf(paint) {
   return "tile" in paint.pattern ? paint.pattern : null;
@@ -110,32 +122,32 @@ function escapeAttr(s) {
 }
 function serializePathD(path) {
   if (path.kind === "rect") {
-    const { x, y: y2, width, height } = path;
-    return `M${trimNumber(x)} ${trimNumber(y2)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}Z`;
+    const { x, y, width, height } = path;
+    return `M${trimNumber(x)} ${trimNumber(y)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}Z`;
   }
   const cmds = path.commands;
   const xs = path.coords;
   const out = [];
   let ci = 0;
   for (let i = 0; i < cmds.length; i++) {
-    const c2 = cmds[i];
-    if (c2 === PATH_M) {
+    const c3 = cmds[i];
+    if (c3 === PATH_M) {
       out.push(`M${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
       ci += 2;
-    } else if (c2 === PATH_L) {
+    } else if (c3 === PATH_L) {
       out.push(`L${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
       ci += 2;
-    } else if (c2 === PATH_C) {
+    } else if (c3 === PATH_C) {
       out.push(
         `C${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])} ${trimNumber(xs[ci + 4])} ${trimNumber(xs[ci + 5])}`
       );
       ci += 6;
-    } else if (c2 === PATH_Q) {
+    } else if (c3 === PATH_Q) {
       out.push(
         `Q${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])}`
       );
       ci += 4;
-    } else if (c2 === PATH_Z) {
+    } else if (c3 === PATH_Z) {
       out.push("Z");
     }
   }
@@ -259,7 +271,7 @@ function serializeSvg(nodes, opts = {}) {
     }
   }
   const defsXml = registry.toDefsXml(opts.onWarn);
-  const bodyXml = nodes.map((n) => nodeXml(n, registry, namespaces)).join("");
+  const bodyXml = nodes.map((n2) => nodeXml(n2, registry, namespaces)).join("");
   const titleXml = opts.title && opts.title.length > 0 ? `<title>${escapeText(opts.title)}</title>` : "";
   return `<svg ${rootAttrs.join(" ")}>${titleXml}${defsXml}${docMetaXml}${bodyXml}</svg>`;
 }
@@ -304,18 +316,18 @@ function metaElementsXml(meta, namespaces) {
   return out;
 }
 function registerPaintServers(nodes, registry) {
-  for (const n of nodes) {
-    if (n.kind === "group") {
-      registerPaintServers(n.children, registry);
-    } else if (n.kind === "path") {
-      if (n.fill.kind === "gradient") registry.register(n.fill.paint);
-      if (n.stroke && n.stroke.paint.kind === "gradient") registry.register(n.stroke.paint.paint);
-      registerMarkers(n.stroke, registry);
-    } else if (n.kind === "text") {
-      registerTextPaint(n.fill, registry);
-      registerTextPaint(n.stroke?.paint, registry);
-      registerMarkers(n.stroke, registry);
-      for (const run of n.runs ?? []) {
+  for (const n2 of nodes) {
+    if (n2.kind === "group") {
+      registerPaintServers(n2.children, registry);
+    } else if (n2.kind === "path") {
+      if (n2.fill.kind === "gradient") registry.register(n2.fill.paint);
+      if (n2.stroke && n2.stroke.paint.kind === "gradient") registry.register(n2.stroke.paint.paint);
+      registerMarkers(n2.stroke, registry);
+    } else if (n2.kind === "text") {
+      registerTextPaint(n2.fill, registry);
+      registerTextPaint(n2.stroke?.paint, registry);
+      registerMarkers(n2.stroke, registry);
+      for (const run of n2.runs ?? []) {
         registerTextPaint(run.fill, registry);
         registerTextPaint(run.stroke?.paint, registry);
       }
@@ -377,19 +389,19 @@ function groupXml(node, registry, namespaces) {
   }
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
-  const body = node.children.map((c2) => nodeXml(c2, registry, namespaces)).join("");
+  const body = node.children.map((c3) => nodeXml(c3, registry, namespaces)).join("");
   return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
 }
 function pathXml(node, registry, namespaces) {
   const attrs = [`d="${serializePathD(node.path)}"`];
   const fillAttrs = paintAttrs(node.fill, "fill", registry);
-  for (const a of fillAttrs) attrs.push(a);
+  for (const a2 of fillAttrs) attrs.push(a2);
   if (node.path.kind === "polygon" && node.path.fillRule === "evenodd") {
     attrs.push(`fill-rule="evenodd"`);
   }
   if (node.stroke) {
     const strokeAttrs = strokeAttrsFor(node.stroke, registry);
-    for (const a of strokeAttrs) attrs.push(a);
+    for (const a2 of strokeAttrs) attrs.push(a2);
   } else {
     attrs.push('stroke="none"');
   }
@@ -397,9 +409,9 @@ function pathXml(node, registry, namespaces) {
     attrs.push(`opacity="${trimNumber(node.opacity)}"`);
   }
   if (node.rotation != null && node.rotation !== 0) {
-    const b = pathBounds(node.path);
-    const cx = b.minX + (b.maxX - b.minX) / 2;
-    const cy = b.minY + (b.maxY - b.minY) / 2;
+    const b2 = pathBounds(node.path);
+    const cx = b2.minX + (b2.maxX - b2.minX) / 2;
+    const cy = b2.minY + (b2.maxY - b2.minY) / 2;
     const deg = node.rotation * 180 / Math.PI;
     attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
   }
@@ -495,42 +507,42 @@ function strokeAttrsFor(stroke, registry) {
 }
 function computeBounds(nodes) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  const visit = (n, ctm) => {
-    if (n.kind === "group") {
-      const childCtm = n.transform ? multiply(ctm, n.transform) : ctm;
-      n.children.forEach((c2) => visit(c2, childCtm));
+  const visit = (n2, ctm) => {
+    if (n2.kind === "group") {
+      const childCtm = n2.transform ? multiply(ctm, n2.transform) : ctm;
+      n2.children.forEach((c3) => visit(c3, childCtm));
       return;
     }
-    const b = n.kind === "text" || n.kind === "image" ? { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height } : pathBounds(n.path);
-    const local = n.rotation ? rotateAboutCenter(ctm, b, n.rotation) : ctm;
-    for (const [x, y2] of corners(b)) {
-      const px = local[0] * x + local[2] * y2 + local[4];
-      const py = local[1] * x + local[3] * y2 + local[5];
+    const b2 = n2.kind === "text" || n2.kind === "image" ? { minX: n2.x, minY: n2.y, maxX: n2.x + n2.width, maxY: n2.y + n2.height } : pathBounds(n2.path);
+    const local = n2.rotation ? rotateAboutCenter(ctm, b2, n2.rotation) : ctm;
+    for (const [x, y] of corners(b2)) {
+      const px = local[0] * x + local[2] * y + local[4];
+      const py = local[1] * x + local[3] * y + local[5];
       if (px < minX) minX = px;
       if (py < minY) minY = py;
       if (px > maxX) maxX = px;
       if (py > maxY) maxY = py;
     }
   };
-  nodes.forEach((n) => visit(n, IDENTITY_MATRIX));
+  nodes.forEach((n2) => visit(n2, IDENTITY_MATRIX));
   if (!Number.isFinite(minX)) {
     return { x: 0, y: 0, width: 0, height: 0 };
   }
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
-function corners(b) {
-  return [[b.minX, b.minY], [b.maxX, b.minY], [b.maxX, b.maxY], [b.minX, b.maxY]];
+function corners(b2) {
+  return [[b2.minX, b2.minY], [b2.maxX, b2.minY], [b2.maxX, b2.maxY], [b2.minX, b2.maxY]];
 }
-function rotateAboutCenter(ctm, b, angle) {
-  const cx = (b.minX + b.maxX) / 2;
-  const cy = (b.minY + b.maxY) / 2;
-  const c2 = Math.cos(angle);
+function rotateAboutCenter(ctm, b2, angle) {
+  const cx = (b2.minX + b2.maxX) / 2;
+  const cy = (b2.minY + b2.maxY) / 2;
+  const c3 = Math.cos(angle);
   const s = Math.sin(angle);
-  return multiply(ctm, [c2, s, -s, c2, cx - cx * c2 + cy * s, cy - cx * s - cy * c2]);
+  return multiply(ctm, [c3, s, -s, c3, cx - cx * c3 + cy * s, cy - cx * s - cy * c3]);
 }
 function textXml(node, registry, namespaces) {
   const attrs = [
-    `x="${trimNumber(node.x)}"`,
+    `x="${trimNumber(node.x + anchorOffset(node.style, node.width))}"`,
     `y="${trimNumber(node.y)}"`,
     `dominant-baseline="text-before-edge"`,
     // The runs model stores real line breaks; SVG's default whitespace
@@ -556,6 +568,7 @@ function textXml(node, registry, namespaces) {
   }
   const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
   if (decoration) attrs.push(`text-decoration="${decoration}"`);
+  if (style?.wrap) attrs.push('data-weasel-wrap="true"');
   if (node.fill === null) {
     attrs.push('fill="none"');
   } else if (node.fill) {
@@ -569,7 +582,7 @@ function textXml(node, registry, namespaces) {
       attrs.push(`fill="url(#${id})"`);
     }
   }
-  for (const a of coreStrokeAttrs(node.stroke, registry)) attrs.push(a);
+  for (const a2 of coreStrokeAttrs(node.stroke, registry)) attrs.push(a2);
   if (node.opacity != null && node.opacity !== 1) {
     attrs.push(`opacity="${trimNumber(node.opacity)}"`);
   }
@@ -579,7 +592,7 @@ function textXml(node, registry, namespaces) {
     const deg = node.rotation * 180 / Math.PI;
     attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
   }
-  const body = node.runs && node.runs.length > 0 ? node.runs.map((r2) => runXml(r2, registry)).join("") : escapeText(node.text);
+  const body = node.runs && node.runs.length > 0 ? node.runs.map((r3) => runXml(r3, registry)).join("") : escapeText(node.text);
   const metaAttrs = metaAttrsXml(node.meta, namespaces);
   const metaEls = metaElementsXml(node.meta, namespaces);
   return `<text ${attrs.join(" ")}${metaAttrs}>${body}${metaEls}</text>`;
@@ -611,7 +624,7 @@ function runXml(run, registry) {
       attrs.push(`fill="url(#${id})"`);
     }
   }
-  for (const a of coreStrokeAttrs(run.stroke, registry)) attrs.push(a);
+  for (const a2 of coreStrokeAttrs(run.stroke, registry)) attrs.push(a2);
   const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
   return `${head}${escapeText(run.text)}</tspan>`;
 }
@@ -637,32 +650,32 @@ function pathBounds(path) {
       maxY: path.y + path.height
     };
   }
-  const b = boundsOfPath(path);
-  return { minX: b.x, minY: b.y, maxX: b.x + b.width, maxY: b.y + b.height };
+  const b2 = boundsOfPath(path);
+  return { minX: b2.x, minY: b2.y, maxX: b2.x + b2.width, maxY: b2.y + b2.height };
 }
 var MARK_COLOR = "#e5484d";
 var MARK_WIDTH = 2;
 var TEXT_SIZE = 14;
-var toWorld = (p, content) => ({
-  x: p.x * content.w,
-  y: p.y * content.h
+var toWorld = (p2, content) => ({
+  x: p2.x * content.w,
+  y: p2.y * content.h
 });
 function vertices(m, content) {
   const stored = m.data.points;
-  if (stored && stored.length >= 2) return stored.map((p) => toWorld(p, content));
-  const { x, y: y2, width, height } = m.pose;
+  if (stored && stored.length >= 2) return stored.map((p2) => toWorld(p2, content));
+  const { x, y, width, height } = m.pose;
   return [
-    { x, y: y2 },
-    { x: x + width, y: y2 + height }
+    { x, y },
+    { x: x + width, y: y + height }
   ];
 }
 function polyline(points) {
-  const b = new PathBuilder();
+  const b2 = new PathBuilder();
   const first = points[0];
   if (!first) return rectPath(0, 0, 0, 0);
-  b.moveTo(first.x, first.y);
-  for (const p of points.slice(1)) b.lineTo(p.x, p.y);
-  return b.build();
+  b2.moveTo(first.x, first.y);
+  for (const p2 of points.slice(1)) b2.lineTo(p2.x, p2.y);
+  return b2.build();
 }
 function markCommands(m, content, style = {}) {
   const color = style.color ?? MARK_COLOR;
@@ -681,13 +694,13 @@ function markCommands(m, content, style = {}) {
     case "ellipse":
       return [{ kind: "path", path: ellipsePath(m.pose), stroke }];
     case "line": {
-      const [a, b] = vertices(m, content);
-      return [{ kind: "path", path: linePath(a, b), stroke }];
+      const [a2, b2] = vertices(m, content);
+      return [{ kind: "path", path: linePath(a2, b2), stroke }];
     }
     case "arrow": {
-      const [a, b] = vertices(m, content);
+      const [a2, b2] = vertices(m, content);
       const marked = { ...stroke, markerEnd: "arrow" };
-      const path = linePath(a, b);
+      const path = linePath(a2, b2);
       return [
         { kind: "path", path, stroke: marked },
         ...markerDrawCommands(path, marked, MARK_WIDTH, void 0)
@@ -806,7 +819,7 @@ function capturePlan(base, format) {
   if (format === "svg") return "svg-document";
   return base?.kind === "svg" ? "svg-document" : "raster-stack";
 }
-function nestBaseSvg(markup, w3, h) {
+function nestBaseSvg(markup, w2, h2) {
   const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
   const root = doc.documentElement;
   if (doc.getElementsByTagName("parsererror").length > 0 || root.localName !== "svg") {
@@ -814,17 +827,17 @@ function nestBaseSvg(markup, w3, h) {
   }
   root.setAttribute("x", "0");
   root.setAttribute("y", "0");
-  root.setAttribute("width", String(w3));
-  root.setAttribute("height", String(h));
+  root.setAttribute("width", String(w2));
+  root.setAttribute("height", String(h2));
   return new XMLSerializer().serializeToString(root);
 }
-function embedRasterBase(base, w3, h, onWarn) {
+function embedRasterBase(base, w2, 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: w3, height: h }], {
-    viewBox: { x: 0, y: 0, width: w3, height: h }
+  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w2, height: h2 }], {
+    viewBox: { x: 0, y: 0, width: w2, height: h2 }
   });
 }
 function markNodesOf(scene, draw) {
@@ -840,15 +853,15 @@ function markNodesOf(scene, draw) {
 }
 function composeCaptureSvg(args) {
   const { base, scene, draw, scale, onWarn } = args;
-  const { w: w3, h } = draw.content;
-  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w3, h) : embedRasterBase(base, w3, h, onWarn);
+  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 marksXml = serializeSvg(markNodesOf(scene, draw), {
-    viewBox: { x: 0, y: 0, width: w3, height: h },
+    viewBox: { x: 0, y: 0, width: w2, height: h2 },
     onWarn
   });
-  const outW = Math.max(1, Math.round(w3 * scale));
-  const outH = Math.max(1, Math.round(h * scale));
-  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w3} ${h}">${baseXml}${marksXml}</svg>`;
+  const outW = Math.max(1, Math.round(w2 * 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>`;
 }
 function context2d(width, height) {
   const canvas = document.createElement("canvas");
@@ -942,26 +955,26 @@ async function captureTarget(args, opts = {}) {
 }
 
 // src/annotations/frac.ts
-function fracToWorld(f2, content) {
+function fracToWorld(f3, content) {
   return {
-    x: f2.x * content.w,
-    y: f2.y * content.h,
-    width: f2.w * content.w,
-    height: f2.h * content.h
+    x: f3.x * content.w,
+    y: f3.y * content.h,
+    width: f3.w * content.w,
+    height: f3.h * content.h
   };
 }
-function worldToFrac(r2, content) {
+function worldToFrac(r3, content) {
   const sx = content.w === 0 ? 0 : 1 / content.w;
   const sy = content.h === 0 ? 0 : 1 / content.h;
-  return { x: r2.x * sx, y: r2.y * sy, w: r2.width * sx, h: r2.height * sy };
+  return { x: r3.x * sx, y: r3.y * sy, w: r3.width * sx, h: r3.height * sy };
 }
 var DP = 1e4;
-function roundFrac(f2) {
+function roundFrac(f3) {
   return {
-    x: Math.round(f2.x * DP) / DP,
-    y: Math.round(f2.y * DP) / DP,
-    w: Math.round(f2.w * DP) / DP,
-    h: Math.round(f2.h * DP) / DP
+    x: Math.round(f3.x * DP) / DP,
+    y: Math.round(f3.y * DP) / DP,
+    w: Math.round(f3.w * DP) / DP,
+    h: Math.round(f3.h * DP) / DP
   };
 }
 function fracContains(box, pt, tol = 0) {
@@ -1104,21 +1117,21 @@ function createAnnotationStore(opts) {
     if (!scene) return [];
     const out = [];
     for (const id of scene.renderOrder()) {
-      const a = project(target, String(id));
-      if (a) out.push(a);
+      const a2 = project(target, String(id));
+      if (a2) out.push(a2);
     }
     return out;
   };
   const all = () => liveTargets().flatMap(marksOn);
-  const matches = (a, q) => {
-    if (q.target !== void 0 && a.target !== q.target) return false;
-    if (q.kind !== void 0 && a.kind !== q.kind) return false;
-    if (q.status !== void 0 && a.status !== q.status) return false;
+  const matches = (a2, q) => {
+    if (q.target !== void 0 && a2.target !== q.target) return false;
+    if (q.kind !== void 0 && a2.kind !== q.kind) return false;
+    if (q.status !== void 0 && a2.status !== q.status) return false;
     if (q.tags !== void 0) {
-      const have = a.tags ?? [];
+      const have = a2.tags ?? [];
       for (const t of q.tags) if (!have.includes(t)) return false;
     }
-    if (q.where && !q.where(a)) return false;
+    if (q.where && !q.where(a2)) return false;
     return true;
   };
   const nodeOf = (id) => {
@@ -1136,17 +1149,17 @@ function createAnnotationStore(opts) {
       return parts ? project(parts.target, parts.node) : void 0;
     },
     query(q) {
-      return q ? all().filter((a) => matches(a, q)) : all();
+      return q ? all().filter((a2) => matches(a2, q)) : all();
     },
     hitTest(target, pt, tol = 0) {
-      return marksOn(target).filter((a) => fracContains(a.frac, pt, tol)).reverse();
+      return marksOn(target).filter((a2) => fracContains(a2.frac, pt, tol)).reverse();
     },
     within(target, box) {
-      return marksOn(target).filter((a) => fracEncloses(box, a.frac));
+      return marksOn(target).filter((a2) => fracEncloses(box, a2.frac));
     },
-    isStale(a, config) {
-      const keys = targetOf(a.target)?.positionDependsOn ?? [];
-      return isStale(a.seen, config, keys);
+    isStale(a2, config) {
+      const keys = targetOf(a2.target)?.positionDependsOn ?? [];
+      return isStale(a2.seen, config, keys);
     },
     canUndo() {
       return history.canUndo(historySceneAt);
@@ -1184,7 +1197,7 @@ function createAnnotationStore(opts) {
       for (const [target, scene] of scenes) {
         const next = wanted.get(target) ?? [];
         const now = scene.getSelection();
-        if (now.length === next.length && next.every((n, i) => String(now[i]) === n)) continue;
+        if (now.length === next.length && next.every((n2, i) => String(now[i]) === n2)) continue;
         scene.setSelection(next.map(asNodeId$1));
       }
     },
@@ -1246,7 +1259,7 @@ function createAnnotationStore(opts) {
             content: info.content,
             positionDependsOn: info.positionDependsOn,
             config: opts.config?.(),
-            meaning: opts.meaning
+            meaning: typeof opts.meaning === "function" ? opts.meaning() : opts.meaning
           },
           base: info.base,
           onWarn: (message) => console.warn(`[labkit] capture: ${message}`)
@@ -1269,6 +1282,32 @@ function annotationsFromJSON(raw, targets, rest = {}) {
   return createAnnotationStore({ targets, restore: doc.scenes, ...rest });
 }
 
+// src/annotations/toolMap.ts
+var TOOLS = {
+  select: { weaselTool: "select" },
+  stroke: { weaselTool: "pencil", kind: "stroke" },
+  line: { weaselTool: "line", kind: "line" },
+  arrow: { weaselTool: "line", kind: "arrow" },
+  rect: { weaselTool: "rect", kind: "rect" },
+  ellipse: { weaselTool: "ellipse", kind: "ellipse" },
+  text: { weaselTool: "text", kind: "text" }
+};
+var ANNOTATION_TOOLS = [
+  { id: "select", label: "Select", icon: p, group: "annotate" },
+  { id: "stroke", label: "Freehand", icon: u, group: "annotate" },
+  { id: "line", label: "Line", icon: c, group: "annotate" },
+  { id: "arrow", label: "Arrow", icon: n, group: "annotate" },
+  { id: "rect", label: "Rectangle", icon: f, group: "annotate" },
+  { id: "ellipse", label: "Ellipse", icon: r2, group: "annotate" },
+  { id: "text", label: "Text", icon: h, group: "annotate" }
+];
+function annotationToolInfo(id) {
+  return id === null ? void 0 : TOOLS[id];
+}
+var ANNOTATION_WEASEL_TOOLS = [
+  ...new Set(Object.values(TOOLS).map((t) => t.weaselTool))
+];
+
 // src/annotations/view.ts
 function toWeaselView(v) {
   return { x: v.pan.x, y: v.pan.y, scale: { x: v.zoom, y: v.zoom } };
@@ -1280,7 +1319,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 = (a, b) => a !== null && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+var sameRect = (a2, b2) => a2 !== null && a2.x === b2.x && a2.y === b2.y && a2.w === b2.w && a2.h === b2.h;
 function ToolBridge({ toolId }) {
   const tools = useActiveToolContext();
   const setActive = tools.setActive;
@@ -1290,9 +1329,9 @@ function ToolBridge({ toolId }) {
   return null;
 }
 function pointsOf(extras, content) {
-  const toFrac = (p) => ({
-    x: content.w === 0 ? 0 : p.x / content.w,
-    y: content.h === 0 ? 0 : p.y / content.h
+  const toFrac = (p2) => ({
+    x: content.w === 0 ? 0 : p2.x / content.w,
+    y: content.h === 0 ? 0 : p2.y / content.h
   });
   if (extras.kind === "line") {
     return [toFrac(extras.a), toFrac(extras.b)];
@@ -1334,9 +1373,40 @@ function AnnotationOverlay({
     },
     [surface, tileId]
   );
+  const painted = useRef(false);
+  const canvasRef = useRef(canvas);
+  if (canvasRef.current !== canvas) painted.current = false;
+  canvasRef.current = canvas;
+  const unsubscribeFrame = useRef(null);
+  const attachSceneCanvas = useCallback((api) => {
+    sceneCanvas.current = api;
+    unsubscribeFrame.current?.();
+    unsubscribeFrame.current = api ? api.subscribeFrame(() => {
+      painted.current = true;
+    }) : null;
+  }, []);
+  useEffect(() => {
+    if (!surface) return;
+    return surface.registerClear(tileId, (size, dpr) => {
+      if (!painted.current) return;
+      const gl = canvasRef.current?.getContext("webgl2");
+      if (!gl) return;
+      gl.disable(gl.SCISSOR_TEST);
+      gl.viewport(0, 0, Math.round(size.width * dpr), Math.round(size.height * dpr));
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+    });
+  }, [surface, tileId]);
+  const wheelSlot = useContext(CameraWheelContext);
+  useEffect(() => {
+    if (!input || !wheelSlot) return;
+    const wheel = (e) => wheelSlot.current?.(e);
+    input.addEventListener("wheel", wheel, { passive: false });
+    return () => input.removeEventListener("wheel", wheel);
+  }, [input, wheelSlot]);
   useEffect(
     () => surface?.registerPainter(tileId, (next) => {
-      setRect((prev) => sameRect(prev, next) ? prev : next);
+      flushSync(() => setRect((prev) => sameRect(prev, next) ? prev : next));
       sceneCanvas.current?.requestRedraw();
     }),
     [surface, tileId]
@@ -1394,7 +1464,7 @@ function AnnotationOverlay({
           /* @__PURE__ */ jsx(
             SceneCanvas,
             {
-              ref: sceneCanvas,
+              ref: attachSceneCanvas,
               scene,
               width: rect.w,
               height: rect.h,
@@ -1434,314 +1504,6 @@ function AnnotationTargets({
   )) });
 }
 
-// src/config/builder.ts
-function isConfigBranch(entry) {
-  return "children" in entry;
-}
-var BaseNode = class {
-  constructor(defaultValue, annotations = {}, options = {}) {
-    this.annotations = annotations;
-    this.options = options;
-    this.default = defaultValue;
-  }
-  annotations;
-  options;
-  // `default` is a reserved word in a parameter position, so the field is
-  // declared rather than taken as a parameter property.
-  default;
-  /** Clone into the same subclass. Subclasses with extra constructor
-   *  arguments override this. */
-  with(annotations, options) {
-    const Ctor = this.constructor;
-    return new Ctor(this.default, annotations, options);
-  }
-  ann(patch) {
-    return this.with({ ...this.annotations, ...patch }, this.options);
-  }
-  opt(patch) {
-    return this.with(this.annotations, { ...this.options, ...patch });
-  }
-  /** Human-readable label. Defaults to the key, title-cased. */
-  label(name) {
-    return this.ann({ name });
-  }
-  /** Longer help text, surfaced as a tooltip on the row label. */
-  describe(description) {
-    return this.ann({ description });
-  }
-  /** Omit from the panel unless it is asked to show hidden leaves. */
-  hidden() {
-    return this.ann({ hidden: true });
-  }
-  /** Pair with a sibling sharing this id, side-by-side on one row. */
-  pair(pair) {
-    return this.ann({ pair });
-  }
-  /** Render under a named section heading. `collapsed` opens the section
-   *  folded — say it on any one of the section's leaves. */
-  section(label, opts = {}) {
-    return this.opt({ section: { label, ...opts } });
-  }
-  /** Show this row only while the predicate holds. Presentational — the value
-   *  stays in config and the instrument still reads it. */
-  showIf(predicate) {
-    return this.opt({ showIf: predicate });
-  }
-  /** Draw this one row yourself, keeping the kind, default and validation. */
-  render(renderer) {
-    return this.opt({ render: renderer });
-  }
-};
-var NumberNode = class extends BaseNode {
-  kind = "number";
-  /** Bound the value. A number with both bounds renders as a slider. */
-  range(min, max) {
-    return this.ann({ min, max });
-  }
-  step(step) {
-    return this.ann({ step });
-  }
-  /** A display suffix for the value — `'px'`, `'ms'`, `'°'`. Presentation only:
-   *  it is never parsed, and the stored value stays a plain number. */
-  suffix(suffix) {
-    return this.ann({ suffix });
-  }
-  /** Force a slider even without both bounds. */
-  slider() {
-    return this.ann({ control: "slider" });
-  }
-  /** Force a typed input even when both bounds are set. */
-  input() {
-    return this.ann({ control: "input" });
-  }
-};
-var BooleanNode = class extends BaseNode {
-  kind = "boolean";
-  /** Ask for a switch. `ControlPanel` still draws a checkbox; weasel-ui's
-   *  `PrefsForm` honors the distinction. */
-  toggle() {
-    return this.ann({ control: "switch" });
-  }
-};
-var StringNode = class extends BaseNode {
-  kind = "string";
-  placeholder(placeholder) {
-    return this.ann({ placeholder });
-  }
-  maxLength(maxLength) {
-    return this.ann({ maxLength });
-  }
-  /** Milliseconds to debounce live writes. 0 commits every keystroke. */
-  debounce(debounceMs) {
-    return this.ann({ debounceMs });
-  }
-};
-var ColorNode = class extends BaseNode {
-  kind = "color";
-};
-var EnumNode = class extends BaseNode {
-  kind = "enum";
-  /** Render as a segmented control rather than a select. */
-  radio() {
-    return this.ann({ control: "radio" });
-  }
-  /** Relabel the choices. Named `labels` rather than `options` because
-   *  `options` is the node's own extras bag. */
-  labels(options) {
-    return this.ann({ options });
-  }
-};
-var ValueNode = class extends BaseNode {
-  kind = null;
-};
-var CustomNode = class _CustomNode extends BaseNode {
-  constructor(kind, defaultValue, annotations = {}, options = {}) {
-    super(defaultValue, annotations, options);
-    this.kind = kind;
-  }
-  kind;
-  with(annotations, options) {
-    return new _CustomNode(this.kind, this.default, annotations, options);
-  }
-};
-var GroupNode = class _GroupNode {
-  constructor(children, annotations = {}, options = {}) {
-    this.children = children;
-    this.annotations = annotations;
-    this.options = options;
-  }
-  children;
-  annotations;
-  options;
-  with(annotations, options) {
-    return new _GroupNode(this.children, annotations, options);
-  }
-  /** Heading for the group's rows. Defaults to the key, title-cased. */
-  label(name) {
-    return this.with({ ...this.annotations, name }, this.options);
-  }
-  /** Longer help text. Carried on the resolved `PrefGroup`, where weasel-ui's
-   *  `PrefsForm` draws it under the heading; `ControlPanel` has no place for
-   *  it yet and shows the heading alone. */
-  describe(description) {
-    return this.with({ ...this.annotations, description }, this.options);
-  }
-  /** Render this whole group under a named section heading. */
-  section(label, opts = {}) {
-    return this.with(this.annotations, { ...this.options, section: { label, ...opts } });
-  }
-  /** Show this group only while the predicate holds. Presentational — every
-   *  value beneath it stays in config and the instrument still reads it. */
-  showIf(predicate) {
-    return this.with(this.annotations, { ...this.options, showIf: predicate });
-  }
-};
-function shapeDefaults(shape) {
-  const out = {};
-  for (const [key, entry] of Object.entries(shape)) {
-    out[key] = isConfigBranch(entry) ? shapeDefaults(entry.children) : entry.default;
-  }
-  return out;
-}
-var expand = (options) => options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
-var f = {
-  number: (def) => new NumberNode(def),
-  boolean: (def) => new BooleanNode(def),
-  string: (def) => new StringNode(def),
-  color: (def) => new ColorNode(def),
-  /** A fixed set of choices. The default's literal type flows into the config
-   *  type, so `f.enum('fast', ['fast', 'accurate'])` gives
-   *  `'fast' | 'accurate'` with no `as const`. */
-  enum: (def, options) => new EnumNode(def, { options: expand(options) }),
-  /** A leaf with no declared kind: the rule chain decides, which is how a lab
-   *  states a convention like "every `*Color` key is a color picker". */
-  value: (def) => new ValueNode(def),
-  /** A branch: its children nest under this key, so `grid: f.group({ size })`
-   *  puts the value at `config.grid.size` and addresses it as `'grid.size'`.
-   *  Groups nest as deeply as the schema wants. */
-  group: (children) => new GroupNode(children),
-  /** A leaf of a kind a lab supplies the control for, through `controls`. */
-  custom: (kind, def, validate) => new CustomNode(kind, def, {}, validate ? { validate } : {}),
-  /** Collect leaves and groups into an instrument's config. */
-  schema(nodes) {
-    return { nodes, defaults: () => shapeDefaults(nodes) };
-  }
-};
-
-// src/config/rules.ts
-function titleCase(key) {
-  const words = key.replace(/[_-]+/g, " ").split(/(?<=[a-z0-9])(?=[A-Z])/).join(" ").trim().toLowerCase();
-  return words.length === 0 ? words : words[0].toUpperCase() + words.slice(1);
-}
-var kindFromValue = (ctx) => {
-  const t = typeof ctx.default;
-  if (t === "boolean" || t === "number" || t === "string") return { kind: t };
-  return null;
-};
-var labelFromKey = (ctx) => ({ name: titleCase(ctx.key) });
-var sliderWhenBounded = (ctx) => {
-  if (ctx.leaf.kind !== "number") return null;
-  const bounded = ctx.leaf.min !== void 0 && ctx.leaf.max !== void 0;
-  return bounded ? { control: "slider" } : null;
-};
-var descriptionDefault = () => ({ description: "" });
-var builtinRules = [
-  kindFromValue,
-  labelFromKey,
-  sliderWhenBounded,
-  descriptionDefault
-];
-function applyRules(seed, ctx, rules) {
-  const acc = { ...seed };
-  for (const rule of rules) {
-    const patch = rule({ ...ctx, leaf: acc });
-    if (patch === null) continue;
-    for (const [k, v] of Object.entries(patch)) {
-      if (v !== void 0 && acc[k] === void 0) {
-        acc[k] = v;
-      }
-    }
-  }
-  return acc;
-}
-
-// src/config/resolve.ts
-function defined(annotations) {
-  const out = {};
-  for (const [k, v] of Object.entries(annotations)) if (v !== void 0) out[k] = v;
-  return out;
-}
-function resolveConfigSchema(schema, rules = []) {
-  const sink = {
-    sections: [],
-    showIf: /* @__PURE__ */ new Map(),
-    renderers: {},
-    chain: [...rules, ...builtinRules]
-  };
-  const group = resolveShape(schema.nodes, "", "", sink);
-  return { group, sections: sink.sections, showIf: sink.showIf, renderers: sink.renderers };
-}
-function resolveShape(shape, at, name, sink) {
-  const children = {};
-  const sections = /* @__PURE__ */ new Map();
-  for (const [key, entry] of Object.entries(shape)) {
-    const path = at === "" ? key : `${at}.${key}`;
-    children[key] = resolveEntry(entry, key, path, sink);
-    const { section, showIf: predicate } = entry.options;
-    if (section !== void 0) {
-      let spec = sections.get(section.label);
-      if (!spec) {
-        spec = { at, label: section.label, paths: [] };
-        sections.set(section.label, spec);
-        sink.sections.push(spec);
-      }
-      spec.paths.push(path);
-      if (section.collapsed !== void 0) {
-        spec.collapsed = (spec.collapsed ?? false) || section.collapsed;
-      }
-    }
-    if (predicate) sink.showIf.set(path, predicate);
-    if (!isConfigBranch(entry) && entry.options.render) sink.renderers[path] = entry.options.render;
-  }
-  return { name, children };
-}
-function resolveEntry(entry, key, path, sink) {
-  if (isConfigBranch(entry)) {
-    const group = resolveShape(
-      entry.children,
-      path,
-      entry.annotations.name ?? titleCase(key),
-      sink
-    );
-    return entry.annotations.description === void 0 ? group : { ...group, description: entry.annotations.description };
-  }
-  const seed = defined({
-    ...entry.annotations,
-    ...entry.kind === null ? {} : { kind: entry.kind }
-  });
-  const patch = applyRules(seed, { key, path, default: entry.default }, sink.chain);
-  return { ...patch, default: entry.default };
-}
-var LabContext = createContext(null);
-function useLabContext() {
-  const ctx = useContext(LabContext);
-  if (ctx === null) {
-    throw new Error("useLabContext must be used inside <Lab>");
-  }
-  return ctx;
-}
-
-// src/config/useConfigSchema.ts
-var NO_RULES = [];
-function useConfigSchema(instrument) {
-  const lab = useContext(LabContext);
-  const rules = lab?.configRules ?? NO_RULES;
-  return useMemo(
-    () => instrument.config ? resolveConfigSchema(instrument.config, rules) : fromConfigFields(instrument.configSchema?.() ?? []),
-    [instrument, rules]
-  );
-}
-
 // src/instrument/defineInstrument.ts
 function defineInstrument(spec) {
   if (spec.config && !("defaultConfig" in spec && spec.defaultConfig)) {
@@ -1800,7 +1562,7 @@ function validateConfigSchema(fields) {
   return { valid: errors.length === 0, errors };
 }
 
-// ../theme/dist/chunk-D6AFL2JW.js
+// ../theme/dist/chunk-VKZ4JIVX.js
 var THEME_SOURCES = {
   "weasel": {
     "primitives": {
@@ -1937,46 +1699,46 @@ var THEME_SOURCES = {
         "alpha": 0.18,
         "description": "Pressed wash over a raised surface."
       },
-      "swatch-green": {
+      "swatch-fuchsia": {
         "type": "color",
-        "value": "#2fdd18",
-        "description": "First of ten categorical spot colors for plotting, status and data viz. Ordered \u2014 take them in sequence. Mode-invariant on purpose: a series keeps its color when the mode flips."
+        "value": "#f641f7",
+        "description": "First of ten categorical spot colors for plotting, status and data viz. Take them in sequence: the order is farthest-point over hue, so the first N are as separated as N colors can be (first three 87\xB0 apart, all ten 32\xB0). Mode-invariant on purpose \u2014 a series keeps its color when the mode flips, which is why they are tuned for a dark surface and clear only 1.5:1 on a light one."
       },
-      "swatch-pink": {
+      "swatch-green": {
         "type": "color",
-        "value": "#ff5885"
+        "value": "#48e628"
       },
-      "swatch-cyan": {
+      "swatch-sky": {
         "type": "color",
-        "value": "#00dfff"
+        "value": "#36bff2"
       },
-      "swatch-gold": {
+      "swatch-amber": {
         "type": "color",
-        "value": "#dcb700"
+        "value": "#e69628"
       },
-      "swatch-amber": {
+      "swatch-teal": {
         "type": "color",
-        "value": "#ff8c00"
+        "value": "#3ee1cb"
       },
-      "swatch-violet": {
+      "swatch-red": {
         "type": "color",
-        "value": "#a497ff"
+        "value": "#f75034"
       },
-      "swatch-mint": {
+      "swatch-blue": {
         "type": "color",
-        "value": "#00e7af"
+        "value": "#407ef7"
       },
-      "swatch-sky": {
+      "swatch-citron": {
         "type": "color",
-        "value": "#00b8ff"
+        "value": "#d5d23a"
       },
-      "swatch-orange": {
+      "swatch-rose": {
         "type": "color",
-        "value": "#ff6b00"
+        "value": "#fa4590"
       },
-      "swatch-magenta": {
+      "swatch-violet": {
         "type": "color",
-        "value": "#ff6eff"
+        "value": "#955cf9"
       },
       "radius-sm": {
         "type": "dimension",
@@ -2277,7 +2039,8 @@ var THEME_SOURCES = {
         },
         "border-strong": {
           "type": "color",
-          "value": "{color.gray-600}"
+          "value": "{color.gray-400}",
+          "description": "The line that has to be seen: a control's edge, a raised surface's outline. Clears WCAG 1.4.11's 3:1 against every surface in both modes."
         },
         "accent-fg": {
           "type": "color",
@@ -2293,11 +2056,6 @@ var THEME_SOURCES = {
           "type": "color",
           "value": "rgba(0, 0, 0, 0.6)",
           "description": "Elevation. Always darker than any surface \u2014 never derived from fg, which is near-white on dark."
-        },
-        "border-raised": {
-          "type": "color",
-          "value": "{color.gray-400}",
-          "description": "The line around a raised surface. Clears 3:1 against surface and surface-raised in either mode, which the general-purpose border does not; over surface-sunken it does not, so a panel on a sunken field needs its own answer."
         }
       },
       "light": {
@@ -2331,7 +2089,7 @@ var THEME_SOURCES = {
         },
         "border-strong": {
           "type": "color",
-          "value": "{color.gray-300}"
+          "value": "{color.gray-500}"
         },
         "accent-fg": {
           "type": "color",
@@ -2346,10 +2104,6 @@ var THEME_SOURCES = {
         "shadow": {
           "type": "color",
           "value": "rgba(0, 0, 0, 0.18)"
-        },
-        "border-raised": {
-          "type": "color",
-          "value": "{color.gray-400}"
         }
       }
     }
@@ -2366,11 +2120,11 @@ function hexToRgba(hex, alpha) {
   const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
   if (!m) throw new Error(`Expected a hex color, got "${hex}"`);
   const body = m[1];
-  const full = body.length === 3 ? body.replace(/./g, (c2) => c2 + c2) : body;
-  const r2 = Number.parseInt(full.slice(0, 2), 16);
-  const g2 = Number.parseInt(full.slice(2, 4), 16);
-  const b = Number.parseInt(full.slice(4, 6), 16);
-  return `rgba(${r2}, ${g2}, ${b}, ${alpha})`;
+  const full = body.length === 3 ? body.replace(/./g, (c3) => c3 + c3) : body;
+  const r3 = Number.parseInt(full.slice(0, 2), 16);
+  const g = Number.parseInt(full.slice(2, 4), 16);
+  const b2 = Number.parseInt(full.slice(4, 6), 16);
+  return `rgba(${r3}, ${g}, ${b2}, ${alpha})`;
 }
 var REF = /^\{([^}]+)\}$/;
 function refTarget(value) {
@@ -2382,7 +2136,7 @@ function refTarget(value) {
   return dot === -1 ? path : path.slice(dot + 1);
 }
 function fontStack(value) {
-  return value.map((f2) => typeof f2 === "string" && /\s/.test(f2) ? `'${f2}'` : String(f2)).join(", ");
+  return value.map((f3) => typeof f3 === "string" && /\s/.test(f3) ? `'${f3}'` : String(f3)).join(", ");
 }
 function serialize(type, value) {
   if (Array.isArray(value)) {
@@ -2507,25 +2261,7 @@ function ThemeProvider({
 function useThemeOptional() {
   return useContext(ThemeContext);
 }
-
-// src/instrument/serializers.ts
-function configDefaultsOf(instruments) {
-  const out = {};
-  for (const instrument of instruments) out[instrument.name] = () => instrument.defaultConfig();
-  return out;
-}
-function serializersOf(instruments) {
-  const out = {};
-  for (const instrument of instruments) {
-    const { name, serialize: serialize2, deserialize } = instrument;
-    if (!serialize2 && !deserialize) continue;
-    out[name] = {
-      ...serialize2 ? { serialize: (state) => serialize2(state) } : {},
-      ...deserialize ? { deserialize: (data, config) => deserialize(data, config) } : {}
-    };
-  }
-  return out;
-}
+var AnnotationPreloadContext = createContext(null);
 
 // ../theme/dist/index.js
 var ALPHA_EXT = "com.weasel.alpha";
@@ -2535,9 +2271,9 @@ function flattenTokens(doc) {
   for (const [groupName, group] of Object.entries(doc)) {
     if (groupName.startsWith("$")) continue;
     if (typeof group !== "object" || group === null) continue;
-    const g2 = group;
-    const groupType = g2.$type;
-    for (const [leaf, node] of Object.entries(g2)) {
+    const g = group;
+    const groupType = g.$type;
+    for (const [leaf, node] of Object.entries(g)) {
       if (leaf.startsWith("$")) continue;
       if (!isToken(node)) continue;
       const type = node.$type ?? groupType;
@@ -2610,7 +2346,7 @@ var interstellar_tokens_default = {
         "accent-hover": { $value: "#c6a3ee" },
         "focus-ring": { $value: "rgba(176, 138, 219, 0.45)" },
         shadow: { $value: "rgba(0, 0, 0, 0.7)" },
-        "border-raised": { $value: "rgba(255, 255, 255, 0.36)" }
+        "border-strong": { $value: "rgba(255, 255, 255, 0.36)" }
       },
       gradient: {
         $type: "gradient",
@@ -2634,7 +2370,7 @@ var interstellar_tokens_default = {
         "accent-hover": { $value: "#c2854f" },
         "focus-ring": { $value: "rgba(168, 111, 60, 0.35)" },
         shadow: { $value: "rgba(80, 60, 40, 0.18)" },
-        "border-raised": { $value: "#9e8b71" }
+        "border-strong": { $value: "#9e8b71" }
       }
     }
   }
@@ -2642,114 +2378,18 @@ var interstellar_tokens_default = {
 
 // src/theme/interstellar.ts
 var interstellarTheme = loadDTCG(interstellar_tokens_default);
-
-// src/state/view.ts
-var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
-function as2DView(view) {
-  if (typeof view !== "object" || view === null) return null;
-  const v = view;
-  if (typeof v.zoom !== "number") return null;
-  if (typeof v.pan !== "object" || v.pan === null) return null;
-  if (typeof v.pan.x !== "number" || typeof v.pan.y !== "number") return null;
-  return { zoom: v.zoom, pan: { x: v.pan.x, y: v.pan.y } };
-}
-var ZONE_ID = asNodeId("lk-trial-body");
-var SIDEBAR_ID = asNodeId("lk-trial-sidebar");
-var CONTENT_ID = asNodeId("lk-trial-content");
-var STRATEGIES = { strip: stripStrategy };
-function TrialBody({
-  sidebar,
-  children,
-  contentClassName,
-  width,
-  defaultWidth = 320,
-  minWidth = 140,
-  maxWidth = 720,
-  contentMinWidth = 160,
-  onWidthChange,
-  viewport
-}) {
-  const storeRef = useRef(null);
-  if (storeRef.current === null) {
-    const store2 = new Store();
-    store2.registerNode(
-      createNode({
-        kind: "zone",
-        id: ZONE_ID,
-        container: { strategyId: "strip", config: { axis: "x", resizable: true } }
-      })
-    );
-    store2.registerNode(
-      createNode({
-        kind: "sidebar",
-        id: SIDEBAR_ID,
-        parentId: ZONE_ID,
-        meta: { title: "Sidebar" },
-        placement: { size: { w: width ?? defaultWidth } },
-        hints: { minSize: { w: minWidth, h: 0 }, maxSize: { w: maxWidth, h: 0 } }
-      })
-    );
-    store2.registerNode(
-      createNode({
-        kind: "content",
-        id: CONTENT_ID,
-        parentId: ZONE_ID,
-        meta: { title: "Content" },
-        hints: { minSize: { w: contentMinWidth, h: 0 } }
-      })
-    );
-    store2.showNode(SIDEBAR_ID);
-    store2.showNode(CONTENT_ID);
-    storeRef.current = store2;
-  }
-  const store = storeRef.current;
-  const widthRef = useRef(width ?? defaultWidth);
-  useEffect(() => {
-    store.setHints(SIDEBAR_ID, {
-      minSize: { w: minWidth, h: 0 },
-      maxSize: { w: maxWidth, h: 0 }
-    });
-    store.setHints(CONTENT_ID, { minSize: { w: contentMinWidth, h: 0 } });
-  }, [store, minWidth, maxWidth, contentMinWidth]);
-  useEffect(() => {
-    if (width === void 0 || width === widthRef.current) return;
-    widthRef.current = width;
-    store.patchPlacement(SIDEBAR_ID, { size: { w: width } });
-  }, [store, width]);
-  const onWidthChangeRef = useRef(onWidthChange);
-  onWidthChangeRef.current = onWidthChange;
-  useEffect(
-    () => store.events.on("node.placementChanged", () => {
-      const next = store.getPlacement(SIDEBAR_ID)?.size?.w;
-      if (typeof next !== "number" || next === widthRef.current) return;
-      widthRef.current = next;
-      onWidthChangeRef.current?.(next);
-    }),
-    [store]
-  );
-  const chrome = useMemo(
-    () => ({
-      sidebar: () => /* @__PURE__ */ jsx("div", { className: "lk-trial__sidebar", children: sidebar }),
-      content: () => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: contentClassName ? `lk-trial__content ${contentClassName}` : "lk-trial__content",
-          children
-        }
-      )
-    }),
-    [sidebar, children, contentClassName]
-  );
-  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES, children: /* @__PURE__ */ jsx(
-    Container,
+function TrialBody({ sidebar, children, contentClassName, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Split,
     {
-      parentId: ZONE_ID,
-      chrome,
-      className: "lk-trial__panes windease-zone",
-      affordances: true,
-      viewport
+      ...rest,
+      sidebar,
+      className: "lk-trial__panes",
+      sidebarClassName: "lk-trial__sidebar",
+      contentClassName: contentClassName ? `lk-trial__content ${contentClassName}` : "lk-trial__content",
+      children
     }
-  ) }) });
+  );
 }
 var TrialDragContext = createContext(null);
 function useTrialDrag() {
@@ -2834,7 +2474,7 @@ function Portalled({
 }
 function UndockedSections({ trialId, sections, onDock }) {
   if (sections.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c2) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c2, onDock }, c2.id)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c3) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c3, onDock }, c3.id)) });
 }
 var NO_OP = () => {
 };
@@ -2867,17 +2507,17 @@ function TrialChrome({
   const dockPanelAction = useStore(storeCtx.store, (s) => s.dockPanel);
   const undockedPanels = useStore(storeCtx.store, (s) => s.undockedPanels);
   const undockedIds = useMemo(
-    () => Object.values(undockedPanels).filter((p) => p.trialId === trialId).map((p) => p.sectionId),
+    () => Object.values(undockedPanels).filter((p2) => p2.trialId === trialId).map((p2) => p2.sectionId),
     [undockedPanels, trialId]
   );
   const view2d = as2DView(record.view);
   const configSchema = useConfigSchema(instrument);
-  const title = record.title ?? record.instrumentName;
+  const title = record.title ?? instrument.title ?? instrument.name;
   const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
   const ctx = useMemo(() => {
     const setZoom = (z2) => {
       if (!view2d) return;
-      updateTrialView(trialId, { ...view2d, zoom: z2 });
+      updateTrialView(trialId, withZoom(view2d, z2));
     };
     return {
       trialId,
@@ -2959,7 +2599,7 @@ function TrialChrome({
     ),
     [instrument, ctx, trialChrome, chrome, suppress, lab.controls]
   );
-  const inRegion = (region) => contributions.filter((c2) => c2.region === region);
+  const inRegion = (region) => contributions.filter((c3) => c3.region === region);
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
@@ -2976,6 +2616,7 @@ function TrialChrome({
     "section",
     {
       className: "lk-trial",
+      "data-trial-id": trialId,
       "aria-label": `Trial ${title}`,
       tabIndex: -1,
       onKeyDown: handleKeyDown,
@@ -2995,15 +2636,15 @@ function TrialChrome({
             TrialBody,
             {
               width: record.sidebarWidth,
-              onWidthChange: (w3) => updateTrialSidebarWidth(trialId, w3),
-              contentClassName: instrument.canvas ? "lk-trial__content--flush" : void 0,
+              onWidthChange: (w2) => updateTrialSidebarWidth(trialId, w2),
+              contentClassName: instrument.canvas || instrument.stage ? "lk-trial__content--flush" : void 0,
               sidebar: /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }),
                 /* @__PURE__ */ jsx(
                   UndockedSections,
                   {
                     trialId,
-                    sections: inRegion("sidebar").filter((c2) => undockedIds.includes(c2.id)),
+                    sections: inRegion("sidebar").filter((c3) => undockedIds.includes(c3.id)),
                     onDock: ctx.dockPanel
                   }
                 )
@@ -3027,25 +2668,30 @@ function Trial({ id, chrome, suppress }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] <Trial> requires <LabStoreProvider>");
-  const record = useStore(storeCtx.store, (s) => s.trials.find((w3) => w3.id === id));
+  const instruments = useStore(storeCtx.store, (s) => s.instruments) ?? lab.instruments;
+  const record = useStore(storeCtx.store, (s) => s.trials.find((w2) => w2.id === id));
+  const instrument = record ? instruments.find((i) => i.name === record.instrumentName) : void 0;
+  const kept = useKeptMarks(instrument?.annotations?.storage, id);
   if (!record) {
     return /* @__PURE__ */ jsxs("div", { className: "lk-trial lk-trial--unknown", children: [
       "Trial not found: ",
       id
     ] });
   }
-  const instrument = lab.instruments.find((i) => i.name === record.instrumentName);
   if (!instrument) {
     return /* @__PURE__ */ jsxs("div", { className: "lk-trial lk-trial--unknown", children: [
       "Unknown instrument: ",
       record.instrumentName
     ] });
   }
+  if (!kept.ready) return /* @__PURE__ */ jsx("div", { className: "lk-trial lk-trial--loading" });
   return /* @__PURE__ */ jsx(
     TrialRuntime,
     {
+      keptMarks: kept.value,
       record,
       instrument,
+      instruments,
       store: storeCtx.store,
       isLast: lab.trials.length <= 1,
       chrome,
@@ -3053,7 +2699,41 @@ function Trial({ id, chrome, suppress }) {
     }
   );
 }
-function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
+function useKeptMarks(storage, trialId) {
+  const preload = useContext(AnnotationPreloadContext);
+  const [loaded, setLoaded] = useState(
+    () => storage && preload?.has(trialId) ? { value: preload.get(trialId) } : null
+  );
+  useEffect(() => {
+    if (!storage || loaded) return;
+    let live = true;
+    storage.load().then(
+      (value) => {
+        if (live) setLoaded({ value });
+      },
+      (error) => {
+        console.warn(`[labkit] could not load the marks of trial "${trialId}"`, error);
+        if (live) setLoaded({ value: null });
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [storage, loaded, trialId]);
+  if (!storage) return { ready: true, value: void 0 };
+  return loaded ? { ready: true, value: loaded.value } : { ready: false, value: void 0 };
+}
+function TrialRuntime({
+  keptMarks,
+  record,
+  instrument,
+  instruments,
+  store,
+  isLast,
+  chrome,
+  suppress
+}) {
+  const wheelSlot = useRef(null);
   const canvasContainerRef = useRef(null);
   const loupeHostRef = useRef(null);
   const updateTrialState = useStore(store, (s) => s.updateTrialState);
@@ -3071,7 +2751,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const [layerOrder, setLayerOrder] = useState(null);
   const [loupeOn, setLoupeOn] = useState(false);
   const visibleLayers = useMemo(
-    () => (instrument.canvas?.layers ?? []).filter((l) => layerVisibility[l.id] !== false).map((l) => l.id),
+    () => (instrument.canvas?.layers ?? []).filter((l2) => layerVisibility[l2.id] !== false).map((l2) => l2.id),
     [instrument.canvas, layerVisibility]
   );
   const undoCap = instrument.undo;
@@ -3079,14 +2759,15 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const maxDepth = undoCap?.maxDepth ?? 50;
   const snapshotIfNeeded = (event) => {
     if (!undoCap || !undoEvents.has(event)) return;
-    const current = store.getState().trials.find((w3) => w3.id === record.id);
+    const current = store.getState().trials.find((w2) => w2.id === record.id);
     if (!current) return;
     const snap = structuredClone(current.state);
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
   const setView = (v) => updateTrialView(record.id, v);
+  const stage = instrument.canvas ? void 0 : instrument.stage;
   const placeView = (size) => {
-    const declared = instrument.canvas?.initialView;
+    const declared = instrument.canvas?.initialView ?? (stage ? stage.initialView ?? ((vp) => fitStage(stage.size, vp)) : void 0);
     if (typeof declared !== "function") return;
     if (record.view != null) return;
     setView(declared(size));
@@ -3097,12 +2778,14 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const annotationsRef = useRef(null);
   const configRef = useRef(record.config);
   configRef.current = record.config;
+  const capRef = useRef(annotationsCap);
+  capRef.current = annotationsCap;
   if (annotationsRef.current === null) {
-    const kept = annotationsCap?.storage ? annotationsCap.storage.load() : record.annotations;
+    const kept = annotationsCap?.storage ? keptMarks : record.annotations;
     annotationsRef.current = annotationsFromJSON(kept, () => targetsRef.current(), {
-      meaning: annotationsCap?.meaning,
+      meaning: () => capRef.current?.meaning,
       config: () => configRef.current,
-      onCapture: (result) => annotationsCap?.onCapture?.(result)
+      onCapture: (result) => capRef.current?.onCapture?.(result)
     });
   }
   const annotations = annotationsRef.current;
@@ -3146,8 +2829,9 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       flush();
     };
   }, [annotations, annotationsCap]);
-  const declaresTools = instrument.tools != null || instrument.annotations != null;
-  const resolvedToolId = declaresTools ? record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? (instrument.annotations ? "select" : null) : labToolId;
+  const declaresTools = instrument.tools != null;
+  const labTool = resolveLabTool(labToolId, instruments);
+  const resolvedToolId = declaresTools ? record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? null : labTool;
   const setActiveTool = (id) => {
     if (declaresTools) setTrialTool(record.id, id);
     else setLabTool(id);
@@ -3184,7 +2868,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       zoom: view2d?.zoom ?? 1,
       setZoom: (z2) => {
         if (!view2d) return;
-        updateTrialView(record.id, { ...view2d, zoom: z2 });
+        updateTrialView(record.id, withZoom(view2d, z2));
       },
       activeToolId: resolvedToolId,
       visibleLayers
@@ -3228,7 +2912,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
-    const ordered = layerOrder ? [...baseLayers].sort((a, b) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b.id)) : baseLayers;
+    const ordered = layerOrder ? [...baseLayers].sort((a2, b2) => layerOrder.indexOf(a2.id) - layerOrder.indexOf(b2.id)) : baseLayers;
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
@@ -3240,7 +2924,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   }, [instrument.canvas, record.state, record.config, layerVisibility, layerOrder]);
   const layerDescriptors = useMemo(() => {
     if (!instrument.layers) return [];
-    return instrument.layers.ids.map((l) => typeof l === "string" ? { id: l, label: l } : l);
+    return instrument.layers.ids.map((l2) => typeof l2 === "string" ? { id: l2, label: l2 } : l2);
   }, [instrument.layers]);
   const dragDropResult = useDragDrop({
     capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s) => s },
@@ -3260,8 +2944,8 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   });
   const paletteItems = useMemo(() => {
     if (!instrument.dragDrop) return [];
-    const p = instrument.dragDrop.palette;
-    return typeof p === "function" ? p(record.state, record.config) : p;
+    const p2 = instrument.dragDrop.palette;
+    return typeof p2 === "function" ? p2(record.state, record.config) : p2;
   }, [instrument.dragDrop, record.state, record.config]);
   const layersWithFeedback = useMemo(() => {
     if (!dragDropResult.drag?.feedback) return canvasLayers;
@@ -3275,12 +2959,12 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
         render: (ctx) => {
           const el = canvasContainerRef.current;
           if (!el) return;
-          const r2 = el.getBoundingClientRect();
+          const r3 = el.getBoundingClientRect();
           ctx.save();
           ctx.strokeStyle = fb.ok ? "#3a7" : "#c44";
           ctx.lineWidth = 2;
           ctx.beginPath();
-          ctx.arc(screen.x - r2.left, screen.y - r2.top, 16, 0, Math.PI * 2);
+          ctx.arc(screen.x - r3.left, screen.y - r3.top, 16, 0, Math.PI * 2);
           ctx.stroke();
           ctx.restore();
         }
@@ -3320,6 +3004,21 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       ),
       /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
     ] });
+  } else if (stage) {
+    body = /* @__PURE__ */ jsx(
+      Stage,
+      {
+        size: stage.size,
+        view: view2d ?? DEFAULT_VIEW,
+        onViewChange: setView,
+        onResize: placeView,
+        minZoom: stage.minZoom,
+        maxZoom: stage.maxZoom,
+        hostRef: loupeHostRef,
+        overlay: lens,
+        children: instrument.render(renderCtx)
+      }
+    );
   } else if (lens) {
     body = /* @__PURE__ */ jsxs("div", { ref: loupeHostRef, className: "lk-trial__loupe-host", children: [
       instrument.render(renderCtx),
@@ -3340,7 +3039,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
         layers: layerDescriptors,
         visibility: layerVisibility,
         onReorder: (next) => {
-          setLayerOrder(next.map((l) => l.id));
+          setLayerOrder(next.map((l2) => l2.id));
           bus.emit("layers.reorder");
         },
         onToggle: (lid, visible) => {
@@ -3377,10 +3076,10 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       config: record.config,
       trial: { id: record.id, view: record.view },
       annotations,
-      activeToolId: resolvedToolId
+      activeToolId: labTool
     }
   ) : null;
-  return /* @__PURE__ */ jsx(TrialIdProvider, { trialId: record.id, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: annotationsCap ? annotations : null, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(TrialIdProvider, { trialId: record.id, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: annotationsCap ? annotations : null, children: /* @__PURE__ */ jsx(CameraWheelContext.Provider, { value: wheelSlot, children: /* @__PURE__ */ jsxs(
     TrialChrome,
     {
       job: jobCap ? job : void 0,
@@ -3400,7 +3099,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
         annotationOverlays
       ]
     }
-  ) }) });
+  ) }) }) });
 }
 
 // src/trial/trialOps.ts
@@ -3413,8 +3112,9 @@ function findInstrument(instruments, name) {
   return found;
 }
 function initialView(instrument) {
-  const declared = instrument.canvas?.initialView;
-  if (typeof declared === "function") return null;
+  const stage = instrument.canvas ? void 0 : instrument.stage;
+  const declared = instrument.canvas?.initialView ?? stage?.initialView;
+  if (typeof declared === "function" || stage && declared === void 0) return null;
   return declared ? structuredClone(declared) : { ...DEFAULT_VIEW2, pan: { ...DEFAULT_VIEW2.pan } };
 }
 function seedConfig(defaults, seed) {
@@ -3436,7 +3136,7 @@ function addTrial(trials, instruments, instrumentName, options = {}) {
   return [...trials, record];
 }
 function cloneTrial(trials, id) {
-  const sourceIdx = trials.findIndex((w3) => w3.id === id);
+  const sourceIdx = trials.findIndex((w2) => w2.id === id);
   const source = trials[sourceIdx];
   if (!source) return trials;
   const clone = {
@@ -3451,11 +3151,11 @@ function cloneTrial(trials, id) {
 }
 function closeTrial(trials, id) {
   if (trials.length <= 1) return trials;
-  const next = trials.filter((w3) => w3.id !== id);
+  const next = trials.filter((w2) => w2.id !== id);
   return next.length === trials.length ? trials : next;
 }
 function resetTrial(trials, id, instruments) {
-  const idx = trials.findIndex((w3) => w3.id === id);
+  const idx = trials.findIndex((w2) => w2.id === id);
   const current = trials[idx];
   if (!current) return trials;
   const instrument = findInstrument(instruments, current.instrumentName);
@@ -3470,12 +3170,92 @@ function resetTrial(trials, id, instruments) {
   return [...trials.slice(0, idx), reset, ...trials.slice(idx + 1)];
 }
 function reorderTrials(trials, ids) {
-  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));
+  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));
   return [...named, ...rest];
 }
+function findOvershoot(bound, items, tolerance = 1) {
+  let worst = null;
+  for (const { item, edges } of items) {
+    const y = edges.bottom - bound.bottom;
+    const x = edges.right - bound.right;
+    const by = Math.max(x, y);
+    if (by <= tolerance) continue;
+    if (!worst || by > worst.by) worst = { item, by, axis: y >= x ? "y" : "x" };
+  }
+  return worst;
+}
+function tagAndClasses(el) {
+  return el.tagName.toLowerCase() + [...el.classList].map((c3) => `.${c3}`).join("");
+}
+function describeElement(el) {
+  if (el.classList.length > 0) return tagAndClasses(el);
+  let up = el.parentElement;
+  while (up && up.classList.length === 0) up = up.parentElement;
+  return up ? `${tagAndClasses(el)} in ${tagAndClasses(up)}` : tagAndClasses(el);
+}
+function edgesOf(el) {
+  const r3 = el.getBoundingClientRect();
+  return { top: r3.top, left: r3.left, bottom: r3.bottom, right: r3.right };
+}
+function* candidates(root) {
+  yield { item: root, edges: edgesOf(root) };
+  for (const el of root.querySelectorAll("*")) yield { item: el, edges: edgesOf(el) };
+}
+function overflows(el) {
+  return el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;
+}
+function explainLabScroll(lab, shellBody) {
+  if (overflows(shellBody)) {
+    const r4 = shellBody.getBoundingClientRect();
+    const bound2 = {
+      top: r4.top,
+      left: r4.left,
+      bottom: r4.top + shellBody.clientHeight,
+      right: r4.left + shellBody.clientWidth
+    };
+    const hit2 = findOvershoot(bound2, candidates(shellBody));
+    return hit2 ? `.lk-shell-body scrolls: ${describeElement(hit2.item)} reaches ${Math.round(hit2.by)}px past it (${hit2.axis})` : ".lk-shell-body scrolls";
+  }
+  const doc = document.scrollingElement ?? document.documentElement;
+  if (!overflows(doc)) return null;
+  const r3 = lab.getBoundingClientRect();
+  const bound = {
+    top: r3.top,
+    left: r3.left,
+    bottom: r3.top + Math.min(r3.height, doc.clientHeight),
+    right: r3.left + Math.min(r3.width, doc.clientWidth)
+  };
+  const hit = findOvershoot(bound, candidates(lab));
+  return hit ? `the page scrolls: ${describeElement(hit.item)} reaches ${Math.round(hit.by)}px past the lab's box (${hit.axis})` : null;
+}
+var SETTLE_MS = 300;
+function useLabFitWarning(labBody) {
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") return;
+    if (!labBody || typeof ResizeObserver === "undefined") return;
+    const lab = labBody.closest(".lk-lab");
+    const shellBody = labBody.closest(".lk-shell-body");
+    if (!lab || !shellBody) return;
+    let timer;
+    const observer = new ResizeObserver(() => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const why = explainLabScroll(lab, shellBody);
+        if (!why) return;
+        observer.disconnect();
+        console.warn(`[labkit] <Lab> should fit its container without scrolling, but ${why}.`);
+      }, SETTLE_MS);
+    });
+    for (const el of [document.documentElement, lab, shellBody, labBody]) observer.observe(el);
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
+  }, [labBody]);
+}
 var MODES = [
   { value: "auto", label: "Auto", glyph: /* @__PURE__ */ jsx(E, { size: 14 }) },
   { value: "light", label: "Light", glyph: /* @__PURE__ */ jsx(w, { size: 14 }) },
@@ -3486,11 +3266,11 @@ var MODE_ITEMS = MODES.map(({ value, label, glyph }) => ({
   label: glyph,
   ariaLabel: label
 }));
-function LabHeader() {
+function LabHeader({ addTrial: addTrial2 = true }) {
   const lab = useLabContext();
   const only = lab.instruments.length === 1 ? lab.instruments[0] : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    only ? /* @__PURE__ */ jsxs(
+    !addTrial2 ? null : only ? /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -3501,22 +3281,14 @@ function LabHeader() {
           /* @__PURE__ */ jsx("span", { children: "Add trial" })
         ]
       }
-    ) : (
-      // Held at null so the control stays an "add one" action rather than
-      // reading as the current instrument.
-      /* @__PURE__ */ jsx(
-        g,
-        {
-          className: "lk-lab-header__add-select",
-          "aria-label": "Add trial",
-          placeholder: "Add trial\u2026",
-          selectedKey: null,
-          options: lab.instruments.map((i) => ({ value: i.name, label: i.name })),
-          onSelectionChange: (name) => {
-            if (name != null) lab.addTrial(String(name));
-          }
-        }
-      )
+    ) : /* @__PURE__ */ jsx(
+      l5,
+      {
+        "aria-label": "Add trial",
+        label: "Add trial\u2026",
+        items: lab.instruments.map((i) => ({ value: i.name, label: i.title ?? i.name })),
+        onAction: (name) => lab.addTrial(name)
+      }
     ),
     /* @__PURE__ */ jsx(
       r6,
@@ -3534,26 +3306,14 @@ function LabHeader() {
     )
   ] });
 }
-function LabPalette({ tools }) {
-  const storeCtx = useContext(LabStoreContext);
-  if (!storeCtx) throw new Error("[labkit] LabPalette requires <LabStoreProvider>");
-  const activeToolId = useStore(storeCtx.store, (s) => s.activeToolId);
-  const setLabTool = useStore(storeCtx.store, (s) => s.setLabTool);
-  const contributions = tools.map((t) => ({
-    id: t.id,
-    region: "palette",
-    group: t.group,
-    item: { icon: t.icon, label: t.label, shortcut: t.shortcut }
-  }));
-  const ctx = {
-    activeToolId,
-    setActiveTool: setLabTool
-  };
-  return /* @__PURE__ */ jsx(PaletteRegion, { contributions, ctx });
+function LabPalette({ tools, contributions }) {
+  const ctx = useLabChromeContext();
+  const all = labContributions(tools, contributions);
+  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c3) => c3.region === "palette"), ctx });
 }
 function currentPage(path, pages) {
   const here = path.split("?")[0].split("#")[0].replace(/\/$/, "").replace(/\.html$/, "");
-  return pages.findIndex((p) => here.endsWith(p.href.replace(/\.html$/, "")));
+  return pages.findIndex((p2) => here.endsWith(p2.href.replace(/\.html$/, "")));
 }
 function LabSwitcher({ title, pages, path, className }) {
   const [open, setOpen] = useState(false);
@@ -3663,17 +3423,17 @@ function LabShell({
   );
   return outer ? shell : /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, mode: resolved, children: shell });
 }
-var ZONE_ID2 = asNodeId("lk-workspace");
-var STRATEGIES2 = { grid: gridStrategy, floating: floatingStrategy };
+var ZONE_ID = asNodeId("lk-workspace");
+var STRATEGIES = { grid: gridStrategy, floating: floatingStrategy };
 var FLOAT_ZONE_ID = asNodeId("lk-workspace-floating");
 var PANEL_KIND = "panel";
 var KIND = "trial";
 function extentOf(store, id) {
-  const p = store.getNode(id)?.membership?.placement;
-  if (!p) return null;
+  const p2 = store.getNode(id)?.membership?.placement;
+  if (!p2) return null;
   const out = {};
-  if (p.size) out.size = p.size;
-  if (p.span) out.span = p.span;
+  if (p2.size) out.size = p2.size;
+  if (p2.span) out.span = p2.span;
   return Object.keys(out).length > 0 ? out : null;
 }
 function PanelFrame({ panel, floating = false }) {
@@ -3694,11 +3454,11 @@ function Workspace({
   viewport
 }) {
   const items = Children.toArray(children);
-  const tilePanels = useMemo(() => (panels ?? []).filter((p) => p.as === "tile"), [panels]);
-  const floatPanels = useMemo(() => (panels ?? []).filter((p) => p.as === "floating"), [panels]);
+  const tilePanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "tile"), [panels]);
+  const floatPanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "floating"), [panels]);
   const wantedIds = [
     ...items.map((_, i) => ids?.[i] ?? `lk-ws-${i}`),
-    ...tilePanels.map((p) => `lk-panel-${p.key}`)
+    ...tilePanels.map((p2) => `lk-panel-${p2.key}`)
   ];
   const idKey = wantedIds.join(",");
   const idKeyRef = useRef(null);
@@ -3718,7 +3478,7 @@ function Workspace({
     store2.registerNode(
       createNode({
         kind: "zone",
-        id: ZONE_ID2,
+        id: ZONE_ID,
         container: { strategyId: "grid", config: { resizable, gap, padding } }
       })
     );
@@ -3734,10 +3494,10 @@ function Workspace({
   const store = storeRef.current;
   const surface = useSurfaceOptional();
   useLayoutEffect(() => {
-    store.updateContainerConfig(ZONE_ID2, { resizable, gap, padding });
+    store.updateContainerConfig(ZONE_ID, { resizable, gap, padding });
   }, [store, resizable, gap, padding]);
   useLayoutEffect(() => {
-    const present = new Set(store.getContainerView(ZONE_ID2)?.childOrder ?? []);
+    const present = new Set(store.getContainerView(ZONE_ID)?.childOrder ?? []);
     const wanted = new Set(nodeIds);
     for (const id of present) {
       if (!wanted.has(id)) store.unregisterNode(id);
@@ -3745,12 +3505,12 @@ function Workspace({
     for (const id of nodeIds) {
       if (present.has(id)) continue;
       const kind = String(id).startsWith("lk-panel-") ? PANEL_KIND : KIND;
-      store.registerNode(createNode({ kind, id, parentId: ZONE_ID2, focus: true }));
+      store.registerNode(createNode({ kind, id, parentId: ZONE_ID, focus: true }));
       store.showNode(id);
       const saved = layoutRef.current?.[id];
       if (saved) store.patchPlacement(id, saved);
     }
-    store.setChildOrder(ZONE_ID2, [...nodeIds]);
+    store.setChildOrder(ZONE_ID, [...nodeIds]);
   }, [store, nodeIds]);
   useEffect(() => {
     if (!surface) return;
@@ -3761,7 +3521,7 @@ function Workspace({
     if (!onLayoutChange) return;
     return store.events.on("node.placementChanged", () => {
       const next = {};
-      for (const child of store.getChildren(ZONE_ID2)) {
+      for (const child of store.getChildren(ZONE_ID)) {
         const extent = extentOf(store, child.id);
         if (extent) next[child.id] = extent;
       }
@@ -3775,7 +3535,7 @@ function Workspace({
   const chrome = useMemo(() => {
     const byId = new Map(nodeIds.map((id, i) => [id, items[i]]));
     const panelByNode = new Map(
-      tilePanels.map((p) => [`lk-panel-${p.key}`, p])
+      tilePanels.map((p2) => [`lk-panel-${p2.key}`, p2])
     );
     return {
       [PANEL_KIND]: ({ node }) => {
@@ -3793,11 +3553,11 @@ function Workspace({
       }
     };
   }, [nodeIds, items, reorderable, tilePanels]);
-  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p) => /* @__PURE__ */ jsx(PanelFrame, { panel: p, floating: true }, p.key)) });
+  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p2) => /* @__PURE__ */ jsx(PanelFrame, { panel: p2, floating: true }, p2.key)) });
   const grid = /* @__PURE__ */ jsx(
     Container,
     {
-      parentId: ZONE_ID2,
+      parentId: ZONE_ID,
       chrome,
       className: "lk-workspace windease-zone",
       affordances: resizable,
@@ -3805,7 +3565,7 @@ function Workspace({
       onChildOrderChange: reorderable ? commitOrder : void 0
     }
   );
-  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES2, children: floatingLayer ? (
+  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES, children: floatingLayer ? (
     // The floating layer insets against the workspace, so it needs a
     // positioned box around both. Without one it insets against the page
     // and lands over the lab header.
@@ -3815,23 +3575,59 @@ function Workspace({
     ] })
   ) : reorderable ? /* @__PURE__ */ jsx(DragProvider, { children: grid }) : grid }) });
 }
-function buildStore(instruments, defaultInstrument, storage, storageKey, initialMode) {
-  const store = createLabStore({
+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,
-    initialMode,
-    serializers: serializersOf(instruments),
-    configDefaults: configDefaultsOf(instruments)
+    storage: storage ?? await defaultStorage(),
+    initialMode: mode ?? "auto",
+    instruments
   });
-  if (store.getState().trials.length === 0) {
-    const seeded = addTrial([], instruments, defaultInstrument);
-    const record = seeded[0];
-    if (record) {
-      const { undoStack: _undoStack, ...rest } = record;
-      store.getState().addTrial(rest);
+  seedDefaultTrial(opened.store, instruments, defaultInstrument);
+  const marks = /* @__PURE__ */ new Map();
+  await Promise.all(
+    opened.store.getState().trials.map(async (trial) => {
+      const kept = instruments.find((i) => i.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,
+  pages,
+  path
+}) {
+  const resolvedMode = useResolvedMode(mode ?? "auto");
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, mode: resolvedMode, className: "lk-lab", children: /* @__PURE__ */ jsx(
+    LabShell,
+    {
+      title: title ?? "Labkit",
+      mode,
+      ...pages ? { pages } : {},
+      ...path !== void 0 ? { path } : {},
+      children: null
     }
-  }
-  return store;
+  ) });
 }
 var NEBULA_SLOTS = [
   { cx: "18%", cy: "30%", sx: "60%", sy: "80%", stop: "70%" },
@@ -3841,43 +3637,77 @@ var NEBULA_SLOTS = [
   { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
 ];
 function buildNebula(colors) {
-  const blobs = colors.map((c2, i) => {
-    const p = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p.sx} ${p.sy} at ${p.cx} ${p.cy}, color-mix(in srgb, ${c2} 22%, transparent), transparent ${p.stop})`;
+  const blobs = colors.map((c3, i) => {
+    const p2 = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
+    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c3} 22%, transparent), transparent ${p2.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
 }
-function Lab({
+function LabPanes({
+  contributions,
+  children
+}) {
+  const surface = useSurfaceOptional();
+  const [sidebarWidth, setSidebarWidth] = usePersistedState(
+    "lk-lab-sidebar-width",
+    void 0,
+    { scope: "lab" }
+  );
+  return /* @__PURE__ */ jsx(
+    Split,
+    {
+      className: "lk-lab__panes",
+      sidebarClassName: "lk-lab__sidebar",
+      contentClassName: "lk-lab__main",
+      label: "Lab sidebar",
+      defaultWidth: 260,
+      width: sidebarWidth,
+      onWidthChange: (w2) => {
+        setSidebarWidth(w2);
+        surface?.invalidateRects();
+      },
+      sidebar: /* @__PURE__ */ jsx(LabSidebarRegion, { contributions }),
+      children
+    }
+  );
+}
+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)
+  );
+  if (!opened) {
+    return props.fallback !== void 0 ? /* @__PURE__ */ jsx(Fragment, { children: props.fallback }) : /* @__PURE__ */ jsx(LabFallback, { title: props.title, mode: props.mode, pages: props.pages, path: props.path });
+  }
+  return /* @__PURE__ */ jsx(LabRuntime, { ...props, opened });
+}
+function LabRuntime({
   instruments,
-  defaultInstrument,
-  storage,
-  storageKey,
   mode,
   nebula,
   title,
+  pages,
+  path,
   footer,
   chrome,
+  labChrome,
   suppress,
+  addTrial: addTrial2,
   tools,
   configRules,
   controls,
-  children
+  children,
+  opened
 }) {
-  if (process.env.NODE_ENV !== "production" && instruments.length === 0) {
-    throw new Error("[labkit] <Lab> requires a non-empty `instruments` array");
-  }
-  const storeRef = useRef(null);
-  if (storeRef.current === null) {
-    storeRef.current = buildStore(
-      instruments,
-      defaultInstrument,
-      storage ?? noneAdapter,
-      storageKey ?? "labkit",
-      mode ?? "auto"
-    );
-  }
-  const store = storeRef.current;
+  const { store } = opened;
+  useLayoutEffect(() => {
+    store.getState().setInstruments(instruments);
+  }, [instruments, store]);
   const trials = useStore(store, (s) => s.trials);
   const savedSnapshots = useStore(store, (s) => s.savedSnapshots);
   const modeValue = useStore(store, (s) => s.mode);
@@ -3886,28 +3716,48 @@ function Lab({
   const panelHostsRef = useRef(null);
   if (panelHostsRef.current === null) panelHostsRef.current = createPanelHostRegistry();
   const outerSurface = useSurfaceOptional();
-  const outerCanvas = useSurfaceCanvas();
-  const [ownCanvas, setOwnCanvas] = useState(null);
-  const ownCanvasRef = useRef(null);
+  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 c2 = ownCanvasRef.current;
-    if (!c2) return;
-    const w3 = Math.round(frame.size.width * frame.dpr);
-    const h = Math.round(frame.size.height * frame.dpr);
-    if (bufferRef.current.w === w3 && bufferRef.current.h === h) return;
-    bufferRef.current = { w: w3, h };
-    c2.width = w3;
-    c2.height = h;
-    c2.style.width = `${frame.size.width}px`;
-    c2.style.height = `${frame.size.height}px`;
-    surfaceRef.current?.invalidateAll();
+    const canvases = [ownUnderRef.current, ownOverRef.current].filter((c3) => c3 !== 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 c3 of canvases) {
+        c3.width = w2;
+        c3.height = h2;
+        c3.style.width = `${frame.size.width}px`;
+        c3.style.height = `${frame.size.height}px`;
+      }
+      surfaceRef.current?.invalidateAll();
+      return;
+    }
   }, []);
   const ownSurface = useTiledSurface({ onFrame });
   surfaceRef.current = ownSurface;
+  const [labBody, setLabBody] = useState(null);
+  const attachOwnSurface = ownSurface.containerRef;
+  const labBodyRef = useCallback(
+    (el) => {
+      setLabBody(el);
+      if (!outerSurface) attachOwnSurface(el);
+    },
+    [outerSurface, attachOwnSurface]
+  );
+  useLabFitWarning(labBody);
   const surface = outerSurface ?? ownSurface;
-  const surfaceCanvas = outerSurface ? outerCanvas : ownCanvas;
+  const surfaceCanvases = useMemo(
+    () => outerSurface ? { over: outerOver, under: outerUnder } : { over: ownOver, under: ownUnder },
+    [outerSurface, outerOver, outerUnder, ownOver, ownUnder]
+  );
   const workspacePanels = useMemo(
     () => Object.entries(undockedPanels).map(([key, panel]) => ({
       key,
@@ -3917,6 +3767,13 @@ function Lab({
     [undockedPanels]
   );
   const resolvedMode = useResolvedMode(modeValue);
+  const annotates = instruments.some((i) => i.annotations != null);
+  const labChromeAll = useMemo(
+    () => labContributions([...annotates ? ANNOTATION_TOOLS : [], ...tools ?? []], labChrome),
+    [annotates, tools, labChrome]
+  );
+  const hasFooterChrome = labChromeAll.some((c3) => c3.region === "footer");
+  const hasSidebarChrome = labChromeAll.some((c3) => c3.region === "sidebar");
   useEffect(() => {
     if (mode && mode !== store.getState().mode) {
       store.getState().setMode(mode);
@@ -3924,10 +3781,9 @@ function Lab({
   }, [mode, store]);
   const contextValue = useMemo(() => {
     const replaceTrials = (next) => {
-      const currentById = new Map(store.getState().trials.map((w3) => [w3.id, w3]));
-      const merged = next.map((w3) => currentById.get(w3.id) ?? w3);
+      const currentById = new Map(store.getState().trials.map((w2) => [w2.id, w2]));
+      const merged = next.map((w2) => currentById.get(w2.id) ?? w2);
       store.setState({ trials: merged });
-      store.getState().setMode(store.getState().mode);
     };
     return {
       instruments,
@@ -3949,14 +3805,13 @@ function Lab({
       },
       resetTrial: (id) => {
         const next = resetTrial(store.getState().trials, id, instruments);
-        const record = next.find((w3) => w3.id === id);
+        const record = next.find((w2) => w2.id === id);
         if (!record) return;
         store.setState((s) => ({
           trials: s.trials.map(
-            (w3) => w3.id === id ? { ...w3, config: record.config, state: record.state, view: record.view } : w3
+            (w2) => w2.id === id ? { ...w2, config: record.config, state: record.state, view: record.view } : w2
           )
         }));
-        store.getState().updateTrialView(id, record.view);
       },
       savedSnapshots,
       saveSnapshot: (trialId, name) => {
@@ -3978,7 +3833,20 @@ function Lab({
     };
   }, [instruments, trials, savedSnapshots, modeValue, store, configRules, controls]);
   const backdropStyle = resolvedMode === "dark" && nebula && nebula.length > 0 ? { ["--wzl-backdrop"]: buildNebula(nebula) } : void 0;
-  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+  const workspace = /* @__PURE__ */ jsx(
+    Workspace,
+    {
+      panels: workspacePanels,
+      ids: trials.map((w2) => w2.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))
+    }
+  );
+  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(
     ThemeProvider,
     {
       theme: interstellarTheme,
@@ -3990,55 +3858,61 @@ function Lab({
         {
           title: title ?? "Labkit",
           mode: modeValue,
-          footer,
+          ...pages ? { pages } : {},
+          ...path !== void 0 ? { path } : {},
+          footer: hasFooterChrome ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            footer,
+            /* @__PURE__ */ jsx(LabFooterRegion, { contributions: labChromeAll })
+          ] }) : footer,
           header: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(LabHeader, {}),
-            children
+            /* @__PURE__ */ jsx(LabHeader, { ...addTrial2 !== void 0 ? { addTrial: addTrial2 } : {} }),
+            children,
+            /* @__PURE__ */ jsx(LabHeaderRegion, { contributions: labChromeAll })
           ] }),
-          children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: panelHostsRef.current, children: /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: surface, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: surfaceCanvas, children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "lk-lab__body",
-              ref: outerSurface ? void 0 : ownSurface.containerRef,
-              children: [
-                outerSurface ? null : (
-                  // Above the trials and inert: the marks a tile paints have
-                  // to sit over the instrument's own DOM, and nothing on this
-                  // buffer takes input — each tile has its own input box.
-                  /* @__PURE__ */ jsx(
-                    "canvas",
-                    {
-                      className: "lk-lab__surface",
-                      ref: (el) => {
-                        ownCanvasRef.current = el;
-                        setOwnCanvas(el);
-                      }
+          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);
                     }
-                  )
+                  }
                 ),
-                tools ? /* @__PURE__ */ jsx(LabPalette, { tools }) : null,
                 /* @__PURE__ */ jsx(
-                  Workspace,
+                  "canvas",
                   {
-                    panels: workspacePanels,
-                    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((w3) => /* @__PURE__ */ jsx(Trial, { id: w3.id, chrome, suppress }, w3.id))
+                    className: "lk-lab__surface lk-lab__surface--over",
+                    ref: (el) => {
+                      ownOverRef.current = el;
+                      setOwnOver(el);
+                    }
                   }
                 )
-              ]
-            }
-          ) }) }) })
+              ] })
+            ),
+            hasSidebarChrome ? /* @__PURE__ */ jsxs(LabPanes, { contributions: labChromeAll, children: [
+              /* @__PURE__ */ jsx(LabPalette, { contributions: labChromeAll }),
+              workspace
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(LabPalette, { contributions: labChromeAll }),
+              workspace
+            ] })
+          ] }) }) }) })
         }
       )
     }
-  ) }) });
+  ) }) }) }) });
 }
 
-export { AnnotationOverlay, AnnotationTargets, DEFAULT_VIEW, Lab, LabContext, LabPalette, LabShell, LabSwitcher, Trial, TrialBody, TrialChrome, Workspace, addTrial, annotationsFromJSON, applyRules, as2DView, builtinRules, capturePlan, captureTarget, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, currentPage, defineInstrument, f, fitView, fracContains, fracEncloses, fracToWorld, fromWeaselView, interstellarTheme, isConfigBranch, isStale, markCommands, markSvgNodes, reorderTrials, resetTrial, resolveConfigSchema, resolveMarkStyle, roundFrac, seenFrom, titleCase, toWeaselView, useConfigSchema, useLabContext, validateConfigSchema, worldToFrac };
+export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationOverlay, AnnotationTargets, Lab, LabPalette, LabShell, LabSwitcher, Trial, TrialBody, TrialChrome, Workspace, addTrial, annotationToolInfo, annotationsFromJSON, capturePlan, captureTarget, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, currentPage, defineInstrument, fitView, fracContains, fracEncloses, fracToWorld, fromWeaselView, interstellarTheme, isStale, markCommands, markSvgNodes, reorderTrials, resetTrial, resolveMarkStyle, roundFrac, seenFrom, toWeaselView, validateConfigSchema, worldToFrac };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map