@weasel-js/labkit 1.6.1 → 1.7.1

package/dist/index.js

@@ -1,66 +1,67 @@
-import { resolveLoupe, TrialLoupe } from './chunk-S4NCI32V.js';
-export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LOUPE_MAGNIFY_ID, LOUPE_PEEK_ID, LoupeBubble, LoupeGestures, TrialLoupe, createLoupeActions, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-S4NCI32V.js';
+import { LoupeSwitchContext } from './chunk-2ES4W47N.js';
+export { LoupeSwitchContext } from './chunk-2ES4W47N.js';
 import { createEventBus, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
 export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
-import { useDragDrop, DragOverlay, Palette } from './chunk-WPLAANH4.js';
-import { useTiledSurface } from './chunk-IJJUK4FU.js';
-export { composeRects, rectsEqual, toDeviceRect, useTiledSurface } from './chunk-IJJUK4FU.js';
-import { useJob } from './chunk-HXXTULDN.js';
-export { useJob } from './chunk-HXXTULDN.js';
-import { markCommands, markSvgNodes } from './chunk-KHK5FGER.js';
-export { markCommands, markSvgNodes } from './chunk-KHK5FGER.js';
-import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, useLabChromeContext, labContributions, labAnnotationTools, LabHeaderRegion, LabFooterRegion, LabAsideRegion, LabSidebarRegion } from './chunk-4TT3PNPR.js';
-export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, ExportMenu, LabAsideRegion, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useLabChromeContext } from './chunk-4TT3PNPR.js';
+import { useDragDrop, DragOverlay, Palette } from './chunk-2N7UBSS2.js';
+import { useTiledSurface } from './chunk-EESJUSYR.js';
+export { composeRects, toDeviceRect, useTiledSurface } from './chunk-EESJUSYR.js';
+import { useJob } from './chunk-EFXRM6XQ.js';
+export { useJob } from './chunk-EFXRM6XQ.js';
+import { markCommands, boundsOf, roundFrac, worldToFrac, fracToWorld, fracEncloses, fracContains, POINT_MARK_SHAPE, roundPoints, fromShape, markSvgNodes, toShape } from './chunk-F4ACIK7Z.js';
+export { fracContains, fracEncloses, fracToWorld, markCommands, markSvgNodes, roundFrac, worldToFrac } from './chunk-F4ACIK7Z.js';
+import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TRANSIENT_BUILTINS, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, useLabChromeContext, labContributions, labAnnotationTools, LabHeaderRegion, LabFooterRegion, LabAsideRegion, LabSidebarRegion } from './chunk-GAHELLJT.js';
+export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, ExportMenu, LabAsideRegion, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TRANSIENT_BUILTINS, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useLabChromeContext } from './chunk-GAHELLJT.js';
 import { AnnotationsContext } from './chunk-3RY6WL5T.js';
 export { AnnotationsContext, useAnnotations, useAnnotationsOptional } from './chunk-3RY6WL5T.js';
-import { Split, JobProgress, Legend } from './chunk-6FLXL3I7.js';
-export { JobProgress, Legend, Split } from './chunk-6FLXL3I7.js';
-import { FloatingPanel } from './chunk-NEXR37YJ.js';
-export { FloatingPanel } from './chunk-NEXR37YJ.js';
-import { Toolbar, StatusBar, ScaleIndicator, ZoomControl } from './chunk-SLAQPUI4.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-SLAQPUI4.js';
-import './chunk-SBXNQW4G.js';
-import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-HKV7LRHY.js';
-export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-HKV7LRHY.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, inDialog, summarizeValue } from './chunk-ASOK76ZH.js';
-import { useConfigSchema } from './chunk-GHGO52SO.js';
-export { sectionTree, useConfigSchema } from './chunk-GHGO52SO.js';
+import { Split, JobProgress, Legend } from './chunk-FB4MIZOO.js';
+export { JobProgress, Legend, Readout, Split } from './chunk-FB4MIZOO.js';
+import { FloatingPanel } from './chunk-XE5HJOPL.js';
+export { FloatingPanel } from './chunk-XE5HJOPL.js';
+import { Toolbar, StatusBar, ScaleIndicator, ZoomControl } from './chunk-CEGFXTBD.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-CEGFXTBD.js';
+import './chunk-CZZPXUOU.js';
+import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-IBVRMHW5.js';
+export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-IBVRMHW5.js';
+import { newId, useWarnIgnoredChange, useOpenOnce, PersistenceContext, createRecordCache, noneAdapter, defaultStorage, usePersistedState } from './chunk-PMLZP7RT.js';
+export { Persistence, createIndexedDbAdapter, createMemoryAdapter, indexedDbAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, usePersistedState } from './chunk-PMLZP7RT.js';
+export { ControlPanel, inDialog, summarizeValue } from './chunk-JFOJESJF.js';
+import { useConfigSchema } from './chunk-E6NARGU7.js';
+export { sectionTree, useConfigSchema } from './chunk-E6NARGU7.js';
 import { useLabContext, LabContext } from './chunk-Z76KEZAX.js';
 export { LabContext, useLabContext } from './chunk-Z76KEZAX.js';
-import { useResolvedConfig } from './chunk-O6FFFOHS.js';
-export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, ListNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-O6FFFOHS.js';
-export { fromConfigFields, isLeafVisible } from './chunk-IRTGUQ5O.js';
-import { hasConfigPath, schemaNodeAtPath, applyConfigWrite, resolveAutoConfig, isAuto, isRecord, autoPathsOf, fillConfigDefaults } from './chunk-TJ77A4A3.js';
-export { auto, autoPathsOf, fillConfigDefaults, hasConfigPath, isAuto, resolveAutoConfig, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-TJ77A4A3.js';
-import { CanvasStack, Stage, fitStage } from './chunk-CGHF6RZV.js';
-export { CanvasStack, Stage, fitStage } from './chunk-CGHF6RZV.js';
-export { centerOn, zoomAt } from './chunk-JVBYV6TL.js';
-export { screenToWorld, worldToScreen } from './chunk-AWQG7FCC.js';
+import { useResolvedConfig } from './chunk-YCFKW5RX.js';
+export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, ListNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-YCFKW5RX.js';
+export { fromConfigFields, isLeafVisible } from './chunk-WLMDTI2Q.js';
+import { hasConfigPath, schemaNodeAtPath, applyConfigWrite, resolveAutoConfig, isAuto, isRecord, autoPathsOf, fillConfigDefaults } from './chunk-READTDQX.js';
+export { auto, autoPathsOf, fillConfigDefaults, hasConfigPath, isAuto, resolveAutoConfig, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-READTDQX.js';
+import { CanvasStack, Stage, fitStage } from './chunk-T6DLGEJB.js';
+export { CanvasStack, Stage, fitStage } from './chunk-T6DLGEJB.js';
+export { centerOn, zoomAt } from './chunk-ROGJWDQA.js';
+export { screenToWorld, worldToScreen } from './chunk-FG3EXZDV.js';
 import { useSurfaceOptional, useSurfaceCanvas, useTileId, SurfaceContext, SurfaceCanvasContext } from './chunk-WIG6XHJ7.js';
 export { SurfaceCanvasContext, SurfaceContext, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId } from './chunk-WIG6XHJ7.js';
-import { CameraWheelContext, as2DView, DEFAULT_VIEW, CameraScopeContext, withZoom } from './chunk-DWMSB4CA.js';
-export { CameraContext, CameraInput, CameraScope, DEFAULT_VIEW, as2DView } from './chunk-DWMSB4CA.js';
-import { applyCamera } from './chunk-24W5VEJW.js';
-export { DEFAULT_FRAME, applyCamera, resolveFrame } from './chunk-24W5VEJW.js';
-import { CanvasStackContext } from './chunk-CQLQPQ4P.js';
-export { CanvasStackContext } from './chunk-CQLQPQ4P.js';
+import { CameraWheelContext, as2DView, CameraRegistryContext, DEFAULT_VIEW, CameraPublishContext, createCameraRegistry, withZoom } from './chunk-VYVGVBGY.js';
+export { CameraContext, CameraInput, CameraPublishContext, CameraRegistryContext, CameraScope, DEFAULT_VIEW, as2DView, createCameraRegistry, usePublishCamera } from './chunk-VYVGVBGY.js';
+import { applyCamera } from './chunk-ULYYNWGP.js';
+export { DEFAULT_FRAME, applyCamera, resolveFrame } from './chunk-ULYYNWGP.js';
+import { CanvasStackContext } from './chunk-ZQIHJXP4.js';
+export { CanvasStackContext } from './chunk-ZQIHJXP4.js';
 import { LabStoreContext, TrialIdProvider, TrialIdContext } from './chunk-2YILQ7Y5.js';
 export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
 import './chunk-2RVCB2PT.js';
-import { D, S2, G, d2, s3, c, Ht, o3, a6, l5, u5, a5, r3, a7, i2, o5, s6, c5, l7, p, f2, u4, g, T, y2, l8, y, c6, i3, l4, C2, S, ae2, oe, B2, b2, A2, n6, s5, m3, l2, u, g2, u3, S4, r4, n7, r5, i4, p2, f, n8, o4, c3, c4, w, L, n9, k2, $2 } from './chunk-TYN6MLXX.js';
-export { c as Button, V as CloseIcon, xe as CollapseIcon, _ as CurveField, Se as ExpandIcon, l as Icon, u4 as Input, l9 as Jog, D as LayerList, re as PauseIcon, ne as PlayIcon, V2 as PropertyControl, B2 as PropertyField, b2 as PropertyGroup, oe as PropertyList, ae2 as PropertyPanel, L3 as PropertyRow, se as PropertySpan, B as ResetIcon, T as Select, ae as StepBackIcon, $ as StepForwardIcon, ie as StopIcon, x as Subpanel, a5 as ToggleBar, oe2 as TokenPanel, H2 as inferTokenType, S2 as moveLayers, O2 as refitScale } from './chunk-TYN6MLXX.js';
-import { serializeSvg } from './chunk-QGMOA2YE.js';
-import { createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, createPointerStore, PointerContextProvider, sceneFromJSON, renderSceneToPixels, useActiveToolContext } from '@weasel-js/core';
-import { createContext, useState, useRef, useEffect, useCallback, useContext, useMemo, useId, Children, useLayoutEffect, useSyncExternalStore } from 'react';
+import { D2, S2, X, U, G, p4, o3, c, Xt, c5, a7, l4, u3, a6, r3, a9, i2, o5, s3, c6, l8, p, f2, u2, y, O2, b4, l9, S, c7, i4, h2, j, k2, oe, se, R, b3, j2, n6, a10, C3, l2, u, v2, d3, j3, r4, n7, r5, i5, p2, f, n8, o4, c4, l7, w, L, n9, j4, be, n2 } from './chunk-4KSC7NXL.js';
+export { c as Button, V as CloseIcon, xe as CollapseIcon, _ as CurveField, i3 as DetailList, a4 as DetailRow, Se as ExpandIcon, l as Icon, u2 as Input, l10 as Jog, D2 as LayerList, re as PauseIcon, ne as PlayIcon, z2 as PropertyControl, R as PropertyField, b3 as PropertyGroup, se as PropertyList, oe as PropertyPanel, F2 as PropertyRow, ce as PropertySpan, B as ResetIcon, O2 as Select, ae as StepBackIcon, $ as StepForwardIcon, ie as StopIcon, x2 as Subpanel, a6 as ToggleBar, oe2 as TokenPanel, H2 as inferTokenType, S2 as moveLayers, O3 as refitScale } from './chunk-4KSC7NXL.js';
+import { serializeSvg } from './chunk-E23Q6A3Y.js';
+import './chunk-XVUKDSYV.js';
+import { makeViewportZoomAction, createScene, asNodeId as asNodeId$1, registerNodeShape, useLatest, WeaselProvider, SceneCanvas, createPointerStore, PointerContextProvider, DepRegistryProvider, ActionsProvider, ActiveToolContextProvider, useActionsRegistry, useDepSource, ActionDisabledReason, useGestureDispatcher, sceneFromJSON, warmRender, renderSceneToPixels, useActiveToolContext } from '@weasel-js/core';
+import { createContext, useState, useRef, useEffect, useInsertionEffect, useCallback, useContext, useMemo, useSyncExternalStore, useLayoutEffect, useId, Children } from 'react';
 import { flushSync, createPortal } from 'react-dom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { defineTheme, weaselTheme, colorCount, resolveTheme, colorAt } from '@weasel-js/theme';
 import { useResolvedColorMode, useThemeOptional, ThemeProvider, ThemeContext } from '@weasel-js/theme/react';
 import { useStore } from 'zustand/react';
 import { Provider, StrategyRegistryProvider, DragProvider, Container, useDragHandle } from 'windease/react';
-import { asNodeId, Store, createNode, floatingStrategy, gridStrategy } from 'windease';
+import { asNodeId, createNode, floatingStrategy, gridStrategy, Store } from 'windease';
 import { Focusable } from 'react-aria-components';
 
 // src/annotations/staleness.ts
@@ -86,11 +87,11 @@ function isStale(seen, config, keys) {
 
 // src/annotations/drawOne.ts
 function createMarkDrawOne(opts) {
-  return (node, pose) => markCommands({ pose, data: node.data }, opts.content, resolveMarkStyle(node.data, opts));
+  return (node, pose, view) => markCommands({ pose, data: node.data }, resolveMarkStyle(node.data, opts), view.scale);
 }
 function resolveMarkStyle(data, opts) {
   return {
-    color: opts.meaning?.statuses?.find((s4) => s4.id === data.status)?.color,
+    color: opts.meaning?.statuses?.find((s2) => s2.id === data.status)?.color,
     // Read off the node rather than through the store's `isStale`, which
     // wants a projected Annotation this path does not have.
     stale: isStale(data.seen, opts.config, opts.positionDependsOn ?? [])
@@ -103,7 +104,7 @@ function capturePlan(base, format) {
   if (format === "svg") return "svg-document";
   return base?.kind === "svg" ? "svg-document" : "raster-stack";
 }
-function nestBaseSvg(markup, w2, 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") {
@@ -112,40 +113,40 @@ function nestBaseSvg(markup, w2, h) {
   root.setAttribute("x", "0");
   root.setAttribute("y", "0");
   root.setAttribute("width", String(w2));
-  root.setAttribute("height", String(h));
+  root.setAttribute("height", String(h2));
   return new XMLSerializer().serializeToString(root);
 }
-function embedRasterBase(base, w2, 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: w2, height: h }], {
-    viewBox: { x: 0, y: 0, width: w2, 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) {
+function markNodesOf(scene, draw, scale) {
   return [...scene.renderOrder()].flatMap((id) => {
     const node = scene.get(asNodeId$1(String(id)));
     if (!node) return [];
     return markSvgNodes(
       { pose: node.pose, data: node.data },
-      draw.content,
-      resolveMarkStyle(node.data, draw)
+      resolveMarkStyle(node.data, draw),
+      { x: scale, y: scale }
     );
   });
 }
 function composeCaptureSvg(args) {
   const { base, scene, draw, scale, onWarn } = args;
-  const { w: w2, h } = draw.content;
-  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w2, h) : embedRasterBase(base, w2, h, onWarn);
-  const marksXml = serializeSvg(markNodesOf(scene, draw), {
-    viewBox: { x: 0, y: 0, width: w2, height: h },
+  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, scale), {
+    viewBox: { x: 0, y: 0, width: w2, height: h2 },
     onWarn
   });
   const outW = Math.max(1, Math.round(w2 * scale));
-  const outH = Math.max(1, Math.round(h * scale));
-  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w2} ${h}">${baseXml}${marksXml}</svg>`;
+  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");
@@ -195,12 +196,14 @@ async function stackRaster(args) {
   const ctx = context2d(width, height);
   if (base?.kind === "image") ctx.drawImage(await loadImage(base.src), 0, 0, width, height);
   else if (base?.kind === "canvas") ctx.drawImage(base.canvas, 0, 0, width, height);
-  const raster = renderSceneToPixels({
+  const render = {
     scene,
     sourceRect: { x: 0, y: 0, width: draw.content.w, height: draw.content.h },
     scale: { x: scale, y: scale },
     drawOne: createMarkDrawOne(draw)
-  });
+  };
+  await warmRender({ render });
+  const raster = renderSceneToPixels(render);
   const marks = context2d(raster.width, raster.height);
   marks.putImageData(
     new ImageData(Uint8ClampedArray.from(raster.data), raster.width, raster.height),
@@ -238,36 +241,6 @@ async function captureTarget(args, opts = {}) {
   return { target: args.target, blob, format, width, height };
 }
 
-// src/annotations/frac.ts
-function fracToWorld(f4, content) {
-  return {
-    x: f4.x * content.w,
-    y: f4.y * content.h,
-    width: f4.w * content.w,
-    height: f4.h * content.h
-  };
-}
-function worldToFrac(r4, content) {
-  const sx = content.w === 0 ? 0 : 1 / content.w;
-  const sy = content.h === 0 ? 0 : 1 / content.h;
-  return { x: r4.x * sx, y: r4.y * sy, w: r4.width * sx, h: r4.height * sy };
-}
-var DP = 1e4;
-function roundFrac(f4) {
-  return {
-    x: Math.round(f4.x * DP) / DP,
-    y: Math.round(f4.y * DP) / DP,
-    w: Math.round(f4.w * DP) / DP,
-    h: Math.round(f4.h * DP) / DP
-  };
-}
-function fracContains(box, pt, tol = 0) {
-  return pt.x >= box.x - tol && pt.x <= box.x + box.w + tol && pt.y >= box.y - tol && pt.y <= box.y + box.h + tol;
-}
-function fracEncloses(outer, inner) {
-  return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.w <= outer.x + outer.w && inner.y + inner.h <= outer.y + outer.h;
-}
-
 // src/annotations/history.ts
 var MarkHistory = class {
   depth = /* @__PURE__ */ new Map();
@@ -300,8 +273,8 @@ var MarkHistory = class {
   /** The target `undo` would act on, skipping any whose scene has nothing
    *  left — a scene can drop entries this ordering still lists. */
   next(stack, can, at) {
-    for (let i4 = stack.length - 1; i4 >= 0; i4--) {
-      const target = stack[i4];
+    for (let i5 = stack.length - 1; i5 >= 0; i5--) {
+      const target = stack[i5];
       if (target === void 0) continue;
       const scene = at(target);
       if (scene && can(scene)) return target;
@@ -309,13 +282,13 @@ var MarkHistory = class {
     return null;
   }
   canUndo(at) {
-    return this.next(this.undoable, (s4) => s4.canUndo(), at) !== null;
+    return this.next(this.undoable, (s2) => s2.canUndo(), at) !== null;
   }
   canRedo(at) {
-    return this.next(this.redoable, (s4) => s4.canRedo(), at) !== null;
+    return this.next(this.redoable, (s2) => s2.canRedo(), at) !== null;
   }
   undo(at) {
-    const target = this.next(this.undoable, (s4) => s4.canUndo(), at);
+    const target = this.next(this.undoable, (s2) => s2.canUndo(), at);
     const scene = target === null ? void 0 : at(target);
     if (!scene) return false;
     this.replaying = "undo";
@@ -326,7 +299,7 @@ var MarkHistory = class {
     }
   }
   redo(at) {
-    const target = this.next(this.redoable, (s4) => s4.canRedo(), at);
+    const target = this.next(this.redoable, (s2) => s2.canRedo(), at);
     const scene = target === null ? void 0 : at(target);
     if (!scene) return false;
     this.replaying = "redo";
@@ -338,9 +311,9 @@ var MarkHistory = class {
   }
 };
 function drop(stack, value) {
-  for (let i4 = stack.length - 1; i4 >= 0; i4--) {
-    if (stack[i4] === value) {
-      stack.splice(i4, 1);
+  for (let i5 = stack.length - 1; i5 >= 0; i5--) {
+    if (stack[i5] === value) {
+      stack.splice(i5, 1);
       return;
     }
   }
@@ -349,6 +322,19 @@ function createAnnotationScene() {
   return createScene({ systemLayers: [{ id: "marks" }] });
 }
 var NO_CONTENT = { w: 0, h: 0 };
+function shapeFor(kind, points, frac) {
+  if (!points || kind === "point") return void 0;
+  return roundPoints(toShape(points, frac));
+}
+function migrateLegacyPoints(raw, content) {
+  const nodes = raw.nodes.map((n6) => {
+    const { points, ...data } = n6.data;
+    if (!points || data.shape) return n6;
+    const shape = shapeFor(data.kind, points, worldToFrac(n6.pose, content));
+    return { ...n6, data: { ...data, ...shape ? { shape } : {} } };
+  });
+  return { ...raw, nodes };
+}
 function splitId(id) {
   const at = id.lastIndexOf("/");
   return at <= 0 ? void 0 : { target: id.slice(0, at), node: id.slice(at + 1) };
@@ -361,26 +347,63 @@ function createAnnotationStore(opts) {
   const notify = () => {
     for (const fn of subs) fn();
   };
+  let holding = 0;
+  let heldDirty = false;
+  const hold = (fn) => {
+    holding += 1;
+    try {
+      fn();
+    } finally {
+      holding -= 1;
+    }
+    if (holding === 0 && heldDirty) {
+      heldDirty = false;
+      notify();
+    }
+  };
+  const exclusive = () => (typeof opts.selection === "function" ? opts.selection() : opts.selection) !== "per-target";
+  const lastSelection = /* @__PURE__ */ new Map();
+  const selectionKey = (scene) => scene.getSelection().map(String).join(" ");
+  const clearOthers = (keep) => {
+    for (const [target, scene] of scenes) {
+      if (target !== keep && scene.getSelection().length > 0) scene.setSelection([]);
+    }
+  };
+  const targetOf = (id) => targets().find((t) => t.id === id);
+  const contentOf = (id) => targetOf(id)?.content ?? NO_CONTENT;
   const sceneFor = (target) => {
     const known = scenes.get(target);
     if (known) return known;
     const raw = restore?.[target];
     const scene = raw ? sceneFromJSON(
-      raw,
+      migrateLegacyPoints(raw, contentOf(target)),
       {}
     ) : createAnnotationScene();
     scenes.set(target, scene);
     history.track(target, scene);
+    lastSelection.set(target, selectionKey(scene));
     scene.subscribe(() => {
       history.observe(target, scene);
-      notify();
+      const selected = selectionKey(scene);
+      const newlySelected = selected !== "" && selected !== lastSelection.get(target);
+      lastSelection.set(target, selected);
+      if (holding > 0) {
+        heldDirty = true;
+        return;
+      }
+      if (newlySelected && exclusive()) {
+        hold(() => {
+          heldDirty = true;
+          clearOthers(target);
+        });
+      } else {
+        notify();
+      }
     });
     return scene;
   };
   const historySceneAt = (target) => scenes.get(target);
   for (const target of Object.keys(restore ?? {})) sceneFor(target);
-  const targetOf = (id) => targets().find((t) => t.id === id);
-  const contentOf = (id) => targetOf(id)?.content ?? NO_CONTENT;
   const drawOptionsFor = (info) => ({
     content: info.content,
     positionDependsOn: info.positionDependsOn,
@@ -390,12 +413,10 @@ function createAnnotationStore(opts) {
   const project = (target, node) => {
     const found = scenes.get(target)?.get(asNodeId$1(node));
     if (!found) return void 0;
-    return {
-      ...found.data,
-      target,
-      id: `${target}/${node}`,
-      frac: roundFrac(worldToFrac(found.pose, contentOf(target)))
-    };
+    const { shape, ...data } = found.data;
+    const frac = roundFrac(worldToFrac(found.pose, contentOf(target)));
+    const points = data.kind === "point" ? [{ x: frac.x, y: frac.y }] : shape && roundPoints(fromShape(shape, frac));
+    return { ...data, target, id: `${target}/${node}`, frac, ...points ? { points } : {} };
   };
   const liveTargets = () => {
     const declared = targets().map((t) => t.id);
@@ -407,21 +428,21 @@ function createAnnotationStore(opts) {
     if (!scene) return [];
     const out = [];
     for (const id of scene.renderOrder()) {
-      const a4 = project(target, String(id));
-      if (a4) out.push(a4);
+      const a6 = project(target, String(id));
+      if (a6) out.push(a6);
     }
     return out;
   };
   const all = () => liveTargets().flatMap(marksOn);
-  const matches = (a4, q) => {
-    if (q.target !== void 0 && a4.target !== q.target) return false;
-    if (q.kind !== void 0 && a4.kind !== q.kind) return false;
-    if (q.status !== void 0 && a4.status !== q.status) return false;
+  const matches = (a6, q) => {
+    if (q.target !== void 0 && a6.target !== q.target) return false;
+    if (q.kind !== void 0 && a6.kind !== q.kind) return false;
+    if (q.status !== void 0 && a6.status !== q.status) return false;
     if (q.tags !== void 0) {
-      const have = a4.tags ?? [];
+      const have = a6.tags ?? [];
       for (const t of q.tags) if (!have.includes(t)) return false;
     }
-    if (q.where && !q.where(a4)) return false;
+    if (q.where && !q.where(a6)) return false;
     return true;
   };
   const nodeOf = (id) => {
@@ -439,17 +460,17 @@ function createAnnotationStore(opts) {
       return parts ? project(parts.target, parts.node) : void 0;
     },
     query(q) {
-      return q ? all().filter((a4) => matches(a4, q)) : all();
+      return q ? all().filter((a6) => matches(a6, q)) : all();
     },
     hitTest(target, pt, tol = 0) {
-      return marksOn(target).filter((a4) => fracContains(a4.frac, pt, tol)).reverse();
+      return marksOn(target).filter((a6) => fracContains(a6.frac, pt, tol)).reverse();
     },
     within(target, box) {
-      return marksOn(target).filter((a4) => fracEncloses(box, a4.frac));
+      return marksOn(target).filter((a6) => fracEncloses(box, a6.frac));
     },
-    isStale(a4, config) {
-      const keys = targetOf(a4.target)?.positionDependsOn ?? [];
-      return isStale(a4.seen, config, keys);
+    isStale(a6, config) {
+      const keys = targetOf(a6.target)?.positionDependsOn ?? [];
+      return isStale(a6.seen, config, keys);
     },
     canUndo() {
       return history.canUndo(historySceneAt);
@@ -476,20 +497,24 @@ function createAnnotationStore(opts) {
     },
     setSelection(ids) {
       const wanted = /* @__PURE__ */ new Map();
+      const only = exclusive();
       for (const id of ids) {
         const found = nodeOf(id);
         if (!found) continue;
+        if (only && wanted.size > 0 && !wanted.has(found.target)) continue;
         const node = String(found.node.id);
         const on = wanted.get(found.target);
         if (!on) wanted.set(found.target, [node]);
         else if (!on.includes(node)) on.push(node);
       }
-      for (const [target, scene] of scenes) {
-        const next = wanted.get(target) ?? [];
-        const now = scene.getSelection();
-        if (now.length === next.length && next.every((n5, i4) => String(now[i4]) === n5)) continue;
-        scene.setSelection(next.map(asNodeId$1));
-      }
+      hold(() => {
+        for (const [target, scene] of scenes) {
+          const next = wanted.get(target) ?? [];
+          const now = scene.getSelection();
+          if (now.length === next.length && next.every((n6, i5) => String(now[i5]) === n6)) continue;
+          scene.setSelection(next.map(asNodeId$1));
+        }
+      });
     },
     subscribe(fn) {
       subs.add(fn);
@@ -499,10 +524,12 @@ function createAnnotationStore(opts) {
     },
     add(init, config) {
       const target = targetOf(init.target);
+      const frac = roundFrac(init.frac);
+      const shape = shapeFor(init.kind, init.points, frac);
       const data = {
         target: init.target,
         kind: init.kind,
-        ...init.points ? { points: init.points } : {},
+        ...shape ? { shape } : {},
         ...init.title !== void 0 ? { title: init.title } : {},
         ...init.status !== void 0 ? { status: init.status } : {},
         ...init.tags !== void 0 ? { tags: init.tags } : {},
@@ -512,7 +539,7 @@ function createAnnotationStore(opts) {
       const node = sceneFor(init.target).add({
         kind: "leaf",
         layer: "marks",
-        pose: fracToWorld(roundFrac(init.frac), target?.content ?? NO_CONTENT),
+        pose: fracToWorld(frac, target?.content ?? NO_CONTENT),
         data
       });
       return `${init.target}/${String(node)}`;
@@ -520,14 +547,18 @@ function createAnnotationStore(opts) {
     update(id, patch) {
       const found = nodeOf(id);
       if (!found) return;
-      const { frac, ...meaning } = patch;
+      const { frac: fracPatch, points, ...meaning } = patch;
       const nid = asNodeId$1(found.node.id);
-      if (Object.keys(meaning).length > 0) {
-        found.scene.update(nid, { data: { ...found.node.data, ...meaning } });
-      }
-      if (frac) {
-        found.scene.setPose(nid, fracToWorld(roundFrac(frac), contentOf(found.target)));
+      const content = contentOf(found.target);
+      const frac = fracPatch ?? (points ? boundsOf(points) : null);
+      const bounds = roundFrac(frac ?? worldToFrac(found.node.pose, content));
+      const shape = points ? shapeFor(found.node.data.kind, points, bounds) : void 0;
+      if (Object.keys(meaning).length > 0 || shape) {
+        found.scene.update(nid, {
+          data: { ...found.node.data, ...meaning, ...shape ? { shape } : {} }
+        });
       }
+      if (frac) found.scene.setPose(nid, fracToWorld(bounds, content));
     },
     setMeta(id, meta) {
       const found = nodeOf(id);
@@ -582,17 +613,17 @@ function annotationsFromJSON(raw, targets, rest = {}) {
 }
 
 // src/annotations/view.ts
-function toWeaselView(v) {
-  return { x: v.pan.x, y: v.pan.y, scale: { x: v.zoom, y: v.zoom } };
+function toWeaselView(v2) {
+  return { x: v2.pan.x, y: v2.pan.y, scale: { x: v2.zoom, y: v2.zoom } };
 }
-function fromWeaselView(v) {
-  return { zoom: v.scale.x, pan: { x: v.x, y: v.y } };
+function fromWeaselView(v2) {
+  return { zoom: v2.scale.x, pan: { x: v2.x, y: v2.y } };
 }
 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 = (a4, b2) => a4 !== null && a4.x === b2.x && a4.y === b2.y && a4.w === b2.w && a4.h === b2.h;
+var sameRect = (a6, b3) => a6 !== null && a6.x === b3.x && a6.y === b3.y && a6.w === b3.w && a6.h === b3.h;
 function ToolBridge({ toolId }) {
   const tools = useActiveToolContext();
   const setActive = tools.setActive;
@@ -601,19 +632,24 @@ function ToolBridge({ toolId }) {
   }, [toolId, setActive]);
   return null;
 }
-function pointsOf(extras, content) {
-  const toFrac = (p3) => ({
-    x: content.w === 0 ? 0 : p3.x / content.w,
-    y: content.h === 0 ? 0 : p3.y / content.h
-  });
-  if (extras.kind === "line") {
-    return [toFrac(extras.a), toFrac(extras.b)];
-  }
+function verticesOf(extras) {
+  if (extras.kind === "line") return [extras.a, extras.b];
   if (extras.kind === "pencil") {
-    return extras.samples.map(toFrac);
+    const samples = extras.samples;
+    return samples.length > 0 ? samples : void 0;
   }
   return void 0;
 }
+function insertedGeometry(extras) {
+  const vertices = verticesOf(extras);
+  if (!vertices) return void 0;
+  const box = boundsOf(vertices);
+  if (!box) return void 0;
+  return {
+    pose: { x: box.x, y: box.y, width: box.w, height: box.h },
+    shape: roundPoints(toShape(vertices, box))
+  };
+}
 function AnnotationOverlay({
   target,
   scene,
@@ -626,10 +662,9 @@ function AnnotationOverlay({
   const [rect, setRect] = useState(null);
   const [input, setInput] = useState(null);
   const sceneCanvas = useRef(null);
-  const toolRef = useRef(activeToolId);
-  toolRef.current = activeToolId;
-  const configRef = useRef(config);
-  configRef.current = config;
+  useEffect(() => registerNodeShape(POINT_MARK_SHAPE, { priority: "high" }), []);
+  const toolRef = useLatest(activeToolId);
+  const configRef = useLatest(config);
   const id = target.id;
   const tileId = useTileId(id);
   const lastTile = useRef(null);
@@ -647,9 +682,10 @@ function AnnotationOverlay({
     [surface, tileId]
   );
   const painted = useRef(false);
-  const canvasRef = useRef(canvas);
-  if (canvasRef.current !== canvas) painted.current = false;
-  canvasRef.current = canvas;
+  const canvasRef = useLatest(canvas);
+  useInsertionEffect(() => {
+    painted.current = false;
+  }, [canvas]);
   const unsubscribeFrame = useRef(null);
   const attachSceneCanvas = useCallback((api) => {
     sceneCanvas.current = api;
@@ -669,7 +705,7 @@ function AnnotationOverlay({
       gl.clearColor(0, 0, 0, 0);
       gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
     });
-  }, [surface, tileId]);
+  }, [canvasRef, surface, tileId]);
   const wheelSlot = useContext(CameraWheelContext);
   useEffect(() => {
     if (!input || !wheelSlot) return;
@@ -699,14 +735,11 @@ function AnnotationOverlay({
       const info = annotationToolInfo(toolRef.current);
       const kind = info?.kind;
       if (!kind) return null;
-      const points = pointsOf(extras, target.content);
-      const data = {
-        target: id,
-        kind,
-        ...points ? { points } : {},
-        seen: seenFrom(configRef.current, target.positionDependsOn ?? [])
-      };
-      return { data };
+      const seen = seenFrom(configRef.current, target.positionDependsOn ?? []);
+      const geometry = insertedGeometry(extras);
+      if (!geometry) return { data: { target: id, kind, seen } };
+      const data = { target: id, kind, shape: geometry.shape, seen };
+      return { data, pose: geometry.pose };
     };
   }
   const box = {
@@ -731,13 +764,13 @@ function AnnotationOverlay({
         }
       ),
       canvas && input ? (
-        // One scope per pane: a shared <ActionsProvider> lets only the newest
-        // canvas under it respond to input, and the rest go silently dead.
+        // Isolated so each pane keeps its own selection and tool.
         /* @__PURE__ */ jsxs(WeaselProvider, { isolate: true, children: [
           /* @__PURE__ */ jsx(ToolBridge, { toolId: annotationToolInfo(activeToolId)?.weaselTool ?? "select" }),
           /* @__PURE__ */ jsx(
             SceneCanvas,
             {
+              features: ["pick", "move", "transform", "edit"],
               ref: attachSceneCanvas,
               scene,
               width: rect.w,
@@ -921,21 +954,28 @@ var interstellar_theme_default = {
     accent: {
       by: "mode",
       dark: {
-        value: "#b08adb",
+        value: "#4f46e5",
         type: "color"
       }
     },
     "accent-hover": {
       by: "mode",
       dark: {
-        value: "#c6a3ee",
+        value: "#6d5dfc",
+        type: "color"
+      }
+    },
+    "accent-strong": {
+      by: "mode",
+      dark: {
+        value: "#7474fe",
         type: "color"
       }
     },
     "focus-ring": {
       by: "mode",
       dark: {
-        value: "rgba(176, 138, 219, 0.45)",
+        value: "rgba(116, 116, 254, 0.5)",
         type: "color"
       }
     },
@@ -968,6 +1008,24 @@ var interstellarTheme = defineTheme({
   ...interstellar_theme_default,
   extends: weaselTheme
 });
+
+// src/canvas/cameraZoom.ts
+function atScale(view, scale, at) {
+  return {
+    x: view.x + at.x / view.scale.x - at.x / scale,
+    y: view.y + at.y / view.scale.y - at.y / scale,
+    scale: { x: scale, y: scale }
+  };
+}
+function viewMiddle(camera) {
+  const size = camera.hostSize?.();
+  return size ? { x: size.width / 2, y: size.height / 2 } : { x: 0, y: 0 };
+}
+function zoomCameraTo(camera, zoom) {
+  const { min, max } = camera.zoomRange();
+  const scale = Math.min(max, Math.max(min, zoom));
+  camera.set(atScale(camera.get(), scale, viewMiddle(camera)));
+}
 function TrialBody({ sidebar, children, contentClassName, ...rest }) {
   return /* @__PURE__ */ jsx(
     Split,
@@ -1069,6 +1127,7 @@ function UndockedSections({ trialId, sections, onDock }) {
 var NO_OP = () => {
 };
 var NO_SECTIONS = Object.freeze({});
+var noSubscribe = () => NO_OP;
 function TrialChrome({
   trialId,
   record,
@@ -1087,17 +1146,17 @@ function TrialChrome({
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] TrialChrome requires <LabStoreProvider>");
-  const updateTrialView = useStore(storeCtx.store, (s4) => s4.updateTrialView);
-  const updateTrialSidebarWidth = useStore(storeCtx.store, (s4) => s4.updateTrialSidebarWidth);
-  const setTrialTitle = useStore(storeCtx.store, (s4) => s4.setTrialTitle);
-  const setTrialSectionCollapsed = useStore(storeCtx.store, (s4) => s4.setTrialSectionCollapsed);
-  const updateTrialConfig = useStore(storeCtx.store, (s4) => s4.updateTrialConfig);
-  const updateTrialState = useStore(storeCtx.store, (s4) => s4.updateTrialState);
-  const undockPanelAction = useStore(storeCtx.store, (s4) => s4.undockPanel);
-  const dockPanelAction = useStore(storeCtx.store, (s4) => s4.dockPanel);
-  const undockedPanels = useStore(storeCtx.store, (s4) => s4.undockedPanels);
+  const updateTrialView = useStore(storeCtx.store, (s2) => s2.updateTrialView);
+  const updateTrialSidebarWidth = useStore(storeCtx.store, (s2) => s2.updateTrialSidebarWidth);
+  const setTrialTitle = useStore(storeCtx.store, (s2) => s2.setTrialTitle);
+  const setTrialSectionCollapsed = useStore(storeCtx.store, (s2) => s2.setTrialSectionCollapsed);
+  const updateTrialConfig = useStore(storeCtx.store, (s2) => s2.updateTrialConfig);
+  const updateTrialState = useStore(storeCtx.store, (s2) => s2.updateTrialState);
+  const undockPanelAction = useStore(storeCtx.store, (s2) => s2.undockPanel);
+  const dockPanelAction = useStore(storeCtx.store, (s2) => s2.dockPanel);
+  const undockedPanels = useStore(storeCtx.store, (s2) => s2.undockedPanels);
   const undockedIds = useMemo(
-    () => Object.values(undockedPanels).filter((p3) => p3.trialId === trialId).map((p3) => p3.sectionId),
+    () => Object.values(undockedPanels).filter((p4) => p4.trialId === trialId).map((p4) => p4.sectionId),
     [undockedPanels, trialId]
   );
   const view2d = as2DView(record.view);
@@ -1109,10 +1168,15 @@ function TrialChrome({
   );
   const title = record.title ?? instrument.title ?? instrument.name;
   const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
+  const cameras = useContext(CameraRegistryContext);
+  const camera = useSyncExternalStore(
+    cameras?.subscribe ?? noSubscribe,
+    () => cameras?.get(trialId) ?? null
+  );
   const ctx = useMemo(() => {
-    const setZoom = (z) => {
-      if (!view2d) return;
-      updateTrialView(trialId, withZoom(view2d, z));
+    const setZoom = (z2) => {
+      if (camera) zoomCameraTo(camera, z2);
+      else if (view2d) updateTrialView(trialId, withZoom(view2d, z2));
     };
     return {
       trialId,
@@ -1126,6 +1190,7 @@ function TrialChrome({
       canRedo: undoBindings?.canRedo ?? false,
       undo: undoBindings?.undo ?? NO_OP,
       redo: undoBindings?.redo ?? NO_OP,
+      hasLoupe: loupe != null,
       loupeOn: loupe?.on ?? false,
       toggleLoupe: loupe?.toggle ?? NO_OP,
       configSchema,
@@ -1152,7 +1217,7 @@ function TrialChrome({
       undockedPanels: undockedIds,
       undockPanel: (sectionId, as) => undockPanelAction(trialId, sectionId, as),
       dockPanel: (sectionId) => dockPanelAction(trialId, sectionId),
-      savedSnapshots: lab.savedSnapshots.filter((s4) => s4.trialId === trialId),
+      savedSnapshots: lab.savedSnapshots.filter((s2) => s2.trialId === trialId),
       saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
       loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
       clone: () => lab.cloneTrial(trialId),
@@ -1184,7 +1249,8 @@ function TrialChrome({
     dockPanelAction,
     setTrialTitle,
     setTrialSectionCollapsed,
-    collapsedSections
+    collapsedSections,
+    camera
   ]);
   const contributions = useMemo(
     () => suppressContributions(
@@ -1194,7 +1260,8 @@ function TrialChrome({
         [...trialChrome ?? []],
         [...chrome ?? []]
       ),
-      suppress ?? []
+      suppress ?? [],
+      TRANSIENT_BUILTINS
     ),
     [instrument, ctx, trialChrome, chrome, suppress, lab.controls]
   );
@@ -1268,9 +1335,9 @@ function Trial({ id, chrome, suppress }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] <Trial> requires <LabStoreProvider>");
-  const instruments = useStore(storeCtx.store, (s4) => s4.instruments) ?? lab.instruments;
-  const record = useStore(storeCtx.store, (s4) => s4.trials.find((w2) => w2.id === id));
-  const instrument = record ? instruments.find((i4) => i4.name === record.instrumentName) : void 0;
+  const instruments = useStore(storeCtx.store, (s2) => s2.instruments) ?? lab.instruments;
+  const record = useStore(storeCtx.store, (s2) => s2.trials.find((w2) => w2.id === id));
+  const instrument = record ? instruments.find((i5) => i5.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: [
@@ -1334,17 +1401,22 @@ function TrialRuntime({
   suppress
 }) {
   const wheelSlot = useRef(null);
+  const cameras = useContext(CameraRegistryContext);
+  const trialId = record.id;
+  const publishCamera = useMemo(
+    () => cameras ? (camera) => cameras.register(trialId, camera) : null,
+    [cameras, trialId]
+  );
   const [pointer] = useState(createPointerStore);
   const canvasContainerRef = useRef(null);
-  const loupeHostRef = useRef(null);
-  const updateTrialState = useStore(store, (s4) => s4.updateTrialState);
-  const updateTrialConfig = useStore(store, (s4) => s4.updateTrialConfig);
-  const updateTrialView = useStore(store, (s4) => s4.updateTrialView);
-  const updateTrialUndoStack = useStore(store, (s4) => s4.updateTrialUndoStack);
-  const updateTrialAnnotations = useStore(store, (s4) => s4.updateTrialAnnotations);
-  const labToolId = useStore(store, (s4) => s4.activeToolId);
-  const setLabTool = useStore(store, (s4) => s4.setLabTool);
-  const setTrialTool = useStore(store, (s4) => s4.setTrialTool);
+  const updateTrialState = useStore(store, (s2) => s2.updateTrialState);
+  const updateTrialConfig = useStore(store, (s2) => s2.updateTrialConfig);
+  const updateTrialView = useStore(store, (s2) => s2.updateTrialView);
+  const updateTrialUndoStack = useStore(store, (s2) => s2.updateTrialUndoStack);
+  const updateTrialAnnotations = useStore(store, (s2) => s2.updateTrialAnnotations);
+  const labToolId = useStore(store, (s2) => s2.activeToolId);
+  const setLabTool = useStore(store, (s2) => s2.setLabTool);
+  const setTrialTool = useStore(store, (s2) => s2.setTrialTool);
   const schema = useConfigSchema(instrument);
   const { config } = useResolvedConfig(schema, record.config, record.auto);
   const busRef = useRef(null);
@@ -1353,6 +1425,12 @@ function TrialRuntime({
   const [layerVisibility, setLayerVisibility] = useState({});
   const [layerOrder, setLayerOrder] = useState(null);
   const [loupeOn, setLoupeOn] = useState(false);
+  const [lenses, setLenses] = useState(0);
+  const mountLens = useCallback(() => {
+    setLenses((n6) => n6 + 1);
+    return () => setLenses((n6) => n6 - 1);
+  }, []);
+  const loupeSwitch = useMemo(() => ({ on: loupeOn, mount: mountLens }), [loupeOn, mountLens]);
   const visibleLayers = useMemo(
     () => (instrument.canvas?.layers ?? []).filter((l8) => layerVisibility[l8.id] !== false).map((l8) => l8.id),
     [instrument.canvas, layerVisibility]
@@ -1367,7 +1445,7 @@ function TrialRuntime({
     const snap = structuredClone(current.state);
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
-  const setView = (v) => updateTrialView(record.id, v);
+  const setView = (v2) => updateTrialView(record.id, v2);
   const stage = instrument.canvas ? void 0 : instrument.stage;
   const placeView = (size) => {
     const declared = instrument.canvas?.initialView ?? (stage ? stage.initialView ?? ((vp) => fitStage(stage.size, vp)) : void 0);
@@ -1376,29 +1454,48 @@ function TrialRuntime({
     setView(declared(size));
   };
   const annotationsCap = instrument.annotations;
-  const targetsRef = useRef(() => []);
-  targetsRef.current = () => annotationsCap ? annotationsCap.targets(record.state, config, { id: record.id, view: record.view }) : [];
+  const targetsRef = useLatest(
+    () => annotationsCap ? annotationsCap.targets(record.state, config, { id: record.id, view: record.view }) : []
+  );
   const annotationsRef = useRef(null);
-  const configRef = useRef(config);
-  configRef.current = config;
-  const capRef = useRef(annotationsCap);
-  capRef.current = annotationsCap;
+  const configRef = useLatest(config);
+  const capRef = useLatest(annotationsCap);
   if (annotationsRef.current === null) {
-    const kept = annotationsCap?.storage ? keptMarks : record.annotations;
-    annotationsRef.current = annotationsFromJSON(kept, () => targetsRef.current(), {
-      meaning: () => capRef.current?.meaning,
-      config: () => configRef.current,
-      onCapture: (result) => capRef.current?.onCapture?.(result)
-    });
+    annotationsRef.current = annotationsFromJSON(
+      annotationsCap?.storage ? keptMarks : record.annotations,
+      () => targetsRef.current(),
+      {
+        meaning: () => capRef.current?.meaning,
+        config: () => configRef.current,
+        onCapture: (result) => capRef.current?.onCapture?.(result),
+        selection: () => capRef.current?.selection
+      }
+    );
   }
   const annotations = annotationsRef.current;
+  const inputsCommitted = useRef(/* @__PURE__ */ new Set());
+  useLayoutEffect(() => {
+    for (const fn of inputsCommitted.current) fn();
+  }, [record.state, record.view, config, annotationsCap]);
+  const provided = useMemo(
+    () => ({
+      ...annotations,
+      subscribe: (fn) => {
+        const off = annotations.subscribe(fn);
+        inputsCommitted.current.add(fn);
+        return () => {
+          off();
+          inputsCommitted.current.delete(fn);
+        };
+      }
+    }),
+    [annotations]
+  );
   const saveCap = annotationsCap?.storage;
-  const saveRef = useRef(() => {
-  });
-  saveRef.current = (doc) => {
+  const saveRef = useLatest((doc) => {
     if (saveCap) saveCap.save(doc);
     else updateTrialAnnotations(record.id, doc);
-  };
+  });
   const [markMoves, setMarkMoves] = useState({ undo: false, redo: false });
   useEffect(() => {
     if (!annotationsCap) return;
@@ -1431,7 +1528,7 @@ function TrialRuntime({
       if (timer) clearTimeout(timer);
       flush();
     };
-  }, [annotations, annotationsCap]);
+  }, [annotations, annotationsCap, saveRef]);
   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;
@@ -1469,9 +1566,9 @@ function TrialRuntime({
       view: record.view,
       setView,
       zoom: view2d?.zoom ?? 1,
-      setZoom: (z) => {
+      setZoom: (z2) => {
         if (!view2d) return;
-        updateTrialView(record.id, withZoom(view2d, z));
+        updateTrialView(record.id, withZoom(view2d, z2));
       },
       activeToolId: resolvedToolId,
       visibleLayers,
@@ -1507,16 +1604,11 @@ function TrialRuntime({
       if (undoCap) redoState();
     }
   } : void 0;
-  const loupeCap = useMemo(() => {
-    const declared = instrument.loupe;
-    if (declared == null) return null;
-    return resolveLoupe(typeof declared === "function" ? declared(config) : declared);
-  }, [instrument.loupe, config]);
-  const loupeBindings = loupeCap ? { on: loupeOn, toggle: () => setLoupeOn((v) => !v) } : void 0;
+  const loupeBindings = lenses > 0 ? { on: loupeOn, toggle: () => setLoupeOn((v2) => !v2) } : void 0;
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
-    const ordered = layerOrder ? [...baseLayers].sort((a4, b2) => layerOrder.indexOf(a4.id) - layerOrder.indexOf(b2.id)) : baseLayers;
+    const ordered = layerOrder ? [...baseLayers].sort((a6, b3) => layerOrder.indexOf(a6.id) - layerOrder.indexOf(b3.id)) : baseLayers;
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
@@ -1531,7 +1623,7 @@ function TrialRuntime({
     return instrument.layers.ids.map((l8) => typeof l8 === "string" ? { id: l8, label: l8 } : l8);
   }, [instrument.layers]);
   const layerItems = useMemo(() => {
-    const ordered = layerOrder ? [...layerDescriptors].sort((a4, b2) => layerOrder.indexOf(a4.id) - layerOrder.indexOf(b2.id)) : layerDescriptors;
+    const ordered = layerOrder ? [...layerDescriptors].sort((a6, b3) => layerOrder.indexOf(a6.id) - layerOrder.indexOf(b3.id)) : layerDescriptors;
     const pinnedLast = [
       ...ordered.filter((l8) => !l8.alwaysOn),
       ...ordered.filter((l8) => l8.alwaysOn)
@@ -1544,7 +1636,7 @@ function TrialRuntime({
     }));
   }, [layerDescriptors, layerOrder, layerVisibility]);
   const dragDropResult = useDragDrop({
-    capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s4) => s4 },
+    capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s2) => s2 },
     canvasContainerRef,
     view: view2d ?? DEFAULT_VIEW,
     worldSpec: instrument.canvas?.worldSpec,
@@ -1561,8 +1653,8 @@ function TrialRuntime({
   });
   const paletteItems = useMemo(() => {
     if (!instrument.dragDrop) return [];
-    const p3 = instrument.dragDrop.palette;
-    return typeof p3 === "function" ? p3(record.state, config) : p3;
+    const p4 = instrument.dragDrop.palette;
+    return typeof p4 === "function" ? p4(record.state, config) : p4;
   }, [instrument.dragDrop, record.state, config]);
   const layersWithFeedback = useMemo(() => {
     if (!dragDropResult.drag?.feedback) return canvasLayers;
@@ -1588,22 +1680,10 @@ function TrialRuntime({
       }
     ];
   }, [canvasLayers, dragDropResult.drag]);
-  const lens = loupeCap ? /* @__PURE__ */ jsx(
-    TrialLoupe,
-    {
-      capability: loupeCap,
-      enabled: loupeOn,
-      state: record.state,
-      config,
-      view: view2d ?? DEFAULT_VIEW,
-      worldSpec: instrument.canvas?.worldSpec,
-      hostRef: loupeHostRef
-    }
-  ) : null;
   let body;
   if (instrument.canvas) {
     body = /* @__PURE__ */ jsxs("div", { ref: canvasContainerRef, className: "lk-trial__canvas-host", children: [
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         CanvasStack,
         {
           layers: layersWithFeedback,
@@ -1613,10 +1693,7 @@ function TrialRuntime({
           onResize: placeView,
           minZoom: instrument.canvas.minZoom,
           maxZoom: instrument.canvas.maxZoom,
-          children: [
-            instrument.render(renderCtx),
-            lens
-          ]
+          children: instrument.render(renderCtx)
         }
       ),
       /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
@@ -1631,19 +1708,10 @@ function TrialRuntime({
         onResize: placeView,
         minZoom: stage.minZoom,
         maxZoom: stage.maxZoom,
-        hostRef: loupeHostRef,
-        overlay: /* @__PURE__ */ jsxs(Fragment, { children: [
-          stage.overlay?.(renderCtx),
-          lens
-        ] }),
+        overlay: stage.overlay?.(renderCtx),
         children: instrument.render(renderCtx)
       }
     );
-  } else if (lens) {
-    body = /* @__PURE__ */ jsxs("div", { ref: loupeHostRef, className: "lk-trial__loupe-host", children: [
-      instrument.render(renderCtx),
-      lens
-    ] });
   } else {
     body = instrument.render(renderCtx);
   }
@@ -1654,7 +1722,7 @@ function TrialRuntime({
   );
   const layerListNode = useMemo(
     () => instrument.layers && layerDescriptors.length > 0 ? /* @__PURE__ */ jsx(
-      D,
+      D2,
       {
         items: layerItems,
         onReorder: (move) => {
@@ -1698,8 +1766,8 @@ function TrialRuntime({
       activeToolId: labTool
     }
   ) : null;
-  const scopedBody = /* @__PURE__ */ jsx(WeaselProvider, { isolate: true, children: /* @__PURE__ */ jsx(PointerContextProvider, { store: pointer, children: /* @__PURE__ */ jsx(CameraScopeContext.Provider, { value: true, children: body }) }) });
-  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(
+  const scopedBody = /* @__PURE__ */ jsx(WeaselProvider, { isolate: true, children: /* @__PURE__ */ jsx(PointerContextProvider, { store: pointer, children: /* @__PURE__ */ jsx(CameraPublishContext.Provider, { value: publishCamera, children: /* @__PURE__ */ jsx(LoupeSwitchContext.Provider, { value: loupeSwitch, children: body }) }) }) });
+  return /* @__PURE__ */ jsx(TrialIdProvider, { trialId: record.id, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: annotationsCap ? provided : null, children: /* @__PURE__ */ jsx(CameraWheelContext.Provider, { value: wheelSlot, children: /* @__PURE__ */ jsxs(
     TrialChrome,
     {
       job: jobCap ? job : void 0,
@@ -1725,7 +1793,7 @@ function TrialRuntime({
 // src/trial/trialOps.ts
 var DEFAULT_VIEW2 = { zoom: 1, pan: { x: 0, y: 0 } };
 function findInstrument(instruments, name) {
-  const found = instruments.find((i4) => i4.name === name);
+  const found = instruments.find((i5) => i5.name === name);
   if (!found) {
     throw new Error(`[labkit] Unknown instrument: "${name}"`);
   }
@@ -1835,11 +1903,11 @@ function reorderTrials(trials, ids) {
 function findOvershoot(bound, items, tolerance = 1) {
   let worst = null;
   for (const { item, edges } of items) {
-    const y3 = edges.bottom - bound.bottom;
+    const y2 = edges.bottom - bound.bottom;
     const x2 = edges.right - bound.right;
-    const by = Math.max(x2, y3);
+    const by = Math.max(x2, y2);
     if (by <= tolerance) continue;
-    if (!worst || by > worst.by) worst = { item, by, axis: y3 >= x2 ? "y" : "x" };
+    if (!worst || by > worst.by) worst = { item, by, axis: y2 >= x2 ? "y" : "x" };
   }
   return worst;
 }
@@ -1915,37 +1983,30 @@ function useLabFitWarning(labBody) {
 function LabHeader({ addTrial: addTrial2 = true }) {
   const lab = useLabContext();
   const only = lab.instruments.length === 1 ? lab.instruments[0] : null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !addTrial2 ? null : only ? /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "lk-lab-header__add",
-        onClick: () => lab.addTrial(only.name),
-        children: [
-          /* @__PURE__ */ jsx(G, { size: 16 }),
-          /* @__PURE__ */ jsx("span", { children: "Add trial" })
-        ]
-      }
-    ) : /* @__PURE__ */ jsx(
-      d2,
-      {
-        "aria-label": "Add trial",
-        label: "Add trial\u2026",
-        items: lab.instruments.map((i4) => ({ value: i4.name, label: i4.title ?? i4.name })),
-        onAction: (name) => lab.addTrial(name)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      s3,
-      {
-        className: "lk-lab-header__mode",
-        variant: "flat",
-        value: lab.mode,
-        onChange: lab.setMode
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(Fragment, { children: !addTrial2 ? null : only ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "lk-lab-header__add",
+      onClick: () => lab.addTrial(only.name),
+      children: [
+        /* @__PURE__ */ jsx(G, { size: 16 }),
+        /* @__PURE__ */ jsx("span", { children: "Add trial" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    p4,
+    {
+      "aria-label": "Add trial",
+      label: "Add trial\u2026",
+      items: lab.instruments.map((i5) => ({ value: i5.name, label: i5.title ?? i5.name })),
+      onAction: (name) => lab.addTrial(name)
+    }
+  ) });
+}
+function LabThemeSwitcher() {
+  const lab = useLabContext();
+  return /* @__PURE__ */ jsx(o3, { value: lab.mode, onChange: lab.setMode });
 }
 function LabPalette({ tools, contributions }) {
   const ctx = useLabChromeContext();
@@ -1969,13 +2030,13 @@ function locate(url) {
 function currentPage(path, pages) {
   const here = locate(path);
   const onDoc = (doc) => here.doc.endsWith(doc);
-  const routed = pages.findIndex((p3) => {
-    if (!p3.href.includes("#")) return false;
-    const page = locate(p3.href);
+  const routed = pages.findIndex((p4) => {
+    if (!p4.href.includes("#")) return false;
+    const page = locate(p4.href);
     return onDoc(page.doc) && (here.route === page.route || here.route.startsWith(`${page.route}/`));
   });
   if (routed >= 0) return routed;
-  return pages.findIndex((p3) => !p3.href.includes("#") && onDoc(locate(p3.href).doc));
+  return pages.findIndex((p4) => !p4.href.includes("#") && onDoc(locate(p4.href).doc));
 }
 function LabSwitcher({ title, pages, path, className }) {
   const [open, setOpen] = useState(false);
@@ -2023,13 +2084,13 @@ function LabSwitcher({ title, pages, path, className }) {
         ]
       }
     ) }),
-    open && /* @__PURE__ */ jsx("div", { className: "lk-switcher-menu", id: menuId, role: "menu", children: pages.map((page, i4) => /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsx("div", { className: "lk-switcher-menu", id: menuId, role: "menu", children: pages.map((page, i5) => /* @__PURE__ */ jsx(
       "a",
       {
         href: page.href,
         role: "menuitem",
         className: "lk-switcher-item",
-        "aria-current": i4 === here ? "page" : void 0,
+        "aria-current": i5 === here ? "page" : void 0,
         onClick: close,
         children: page.label
       },
@@ -2064,17 +2125,138 @@ function LabShell({
     footer && /* @__PURE__ */ jsx("footer", { className: "lk-shell-footer", children: footer })
   ] });
 }
+var ZOOM_ID = "viewport.zoom";
+var NO_TOOLS = /* @__PURE__ */ new Map();
+var CHANNELS = { contextMenu: false, ingest: false };
+var NO_ELEMENT = { current: null };
+var BASE = makeViewportZoomAction({ min: 1e-9, max: Number.POSITIVE_INFINITY });
+var KEY_BINDINGS = BASE.defaultBinding.filter((b3) => b3.spec.kind === "key");
+function shortcutFor(kind) {
+  const spec = KEY_BINDINGS.find((b3) => b3.opts?.params?.kind === kind)?.spec;
+  return spec?.key ? n2({ key: spec.key, mod: spec.mods?.mod }) : void 0;
+}
+function forZoom(camera) {
+  return {
+    get: camera.get,
+    set: camera.set,
+    hostSize: camera.hostSize,
+    recenter: () => atScale(camera.get(), 1, viewMiddle(camera))
+  };
+}
+var percent = new Intl.NumberFormat(void 0, { style: "percent", maximumFractionDigits: 0 });
+function LabZoom() {
+  return /* @__PURE__ */ jsx(DepRegistryProvider, { children: /* @__PURE__ */ jsx(ActionsProvider, { children: /* @__PURE__ */ jsx(ActiveToolContextProvider, { children: /* @__PURE__ */ jsx(LabZoomControls, {}) }) }) });
+}
+function LabZoomControls() {
+  const registry = useActionsRegistry();
+  const { focusedTrialId } = useLabContext();
+  const cameras = useContext(CameraRegistryContext);
+  const storeCtx = useContext(LabStoreContext);
+  if (!storeCtx) throw new Error("[labkit] <LabZoom> requires <LabStoreProvider>");
+  const camera = useSyncExternalStore(
+    cameras?.subscribe ?? noSubscribe2,
+    () => cameras && focusedTrialId ? cameras.get(focusedTrialId) : null
+  );
+  const zoom = useStore(storeCtx.store, (s2) => {
+    const record = s2.trials.find((t) => t.id === focusedTrialId);
+    return as2DView(record?.view)?.zoom ?? null;
+  });
+  const live = zoom !== null && camera !== null;
+  const view = useMemo(() => camera ? forZoom(camera) : null, [camera]);
+  const viewRef = useLatest(live ? view : null);
+  useDepSource("view", () => viewRef.current);
+  useEffect(() => {
+    const action = {
+      ...BASE,
+      defaultBinding: KEY_BINDINGS,
+      enabled: () => viewRef.current ? true : ActionDisabledReason.NotApplicable
+    };
+    return registry.register(action);
+  }, [registry, viewRef]);
+  useGestureDispatcher({
+    canvasRef: NO_ELEMENT,
+    actions: registry,
+    entriesById: NO_TOOLS,
+    channels: CHANNELS,
+    keyboard: "first"
+  });
+  const range = camera?.zoomRange();
+  const canIn = zoom !== null && range !== void 0 && zoom < range.max * (1 - 1e-9);
+  const canOut = zoom !== null && range !== void 0 && zoom > range.min * (1 + 1e-9);
+  const run = (kind) => () => {
+    registry.trigger(ZOOM_ID, { kind });
+  };
+  const hint = (label, kind) => {
+    const keys = shortcutFor(kind);
+    return keys ? `${label} (${keys})` : label;
+  };
+  const shown = live && zoom !== null ? percent.format(zoom) : null;
+  return /* @__PURE__ */ jsx(Toolbar, { "aria-label": "Zoom", children: /* @__PURE__ */ jsxs(Toolbar.Group, { "aria-label": "Zoom", children: [
+    /* @__PURE__ */ jsx(
+      Toolbar.Button,
+      {
+        iconOnly: true,
+        "aria-label": "Zoom out",
+        title: hint("Zoom out", "out"),
+        disabled: !canOut,
+        onClick: run("out"),
+        children: /* @__PURE__ */ jsx(X, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Toolbar.Button,
+      {
+        "aria-label": shown ? `Zoom ${shown} \u2014 reset to actual size` : "Zoom unavailable",
+        title: live ? hint("Actual size", "reset") : "This trial has no camera",
+        disabled: !live,
+        onClick: run("reset"),
+        children: /* @__PURE__ */ jsx("span", { className: "lk-lab-zoom__readout", children: shown ?? "\u2013" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Toolbar.Button,
+      {
+        iconOnly: true,
+        "aria-label": "Zoom in",
+        title: hint("Zoom in", "in"),
+        disabled: !canIn,
+        onClick: run("in"),
+        children: /* @__PURE__ */ jsx(U, { size: 16 })
+      }
+    )
+  ] }) });
+}
+var noSubscribe2 = () => () => {
+};
 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 createWorkspaceStore(grid) {
+  const store = new Store();
+  store.registerNode(
+    createNode({
+      kind: "zone",
+      id: ZONE_ID,
+      container: { strategyId: "grid", config: grid }
+    })
+  );
+  store.registerNode(
+    createNode({
+      kind: "zone",
+      id: FLOAT_ZONE_ID,
+      container: { strategyId: "floating", config: {} }
+    })
+  );
+  return store;
+}
 function extentOf(store, id) {
-  const p3 = store.getNode(id)?.membership?.placement;
-  if (!p3) return null;
+  const p4 = store.getNode(id)?.membership?.placement;
+  if (!p4) return null;
   const out = {};
-  if (p3.size) out.size = p3.size;
-  if (p3.span) out.span = p3.span;
+  if (p4.size) out.size = p4.size;
+  if (p4.span) out.span = p4.span;
   return Object.keys(out).length > 0 ? out : null;
 }
 function PanelFrame({ panel, floating = false }) {
@@ -2095,43 +2277,18 @@ function Workspace({
   viewport
 }) {
   const items = Children.toArray(children);
-  const tilePanels = useMemo(() => (panels ?? []).filter((p3) => p3.as === "tile"), [panels]);
-  const floatPanels = useMemo(() => (panels ?? []).filter((p3) => p3.as === "floating"), [panels]);
-  const wantedIds = [
-    ...items.map((_2, i4) => ids?.[i4] ?? `lk-ws-${i4}`),
-    ...tilePanels.map((p3) => `lk-panel-${p3.key}`)
-  ];
-  const idKey = wantedIds.join(",");
-  const idKeyRef = useRef(null);
-  const nodeIdsRef = useRef([]);
-  if (idKeyRef.current !== idKey) {
-    idKeyRef.current = idKey;
-    nodeIdsRef.current = wantedIds.map(asNodeId);
-  }
-  const nodeIds = nodeIdsRef.current;
-  const layoutRef = useRef(layout);
-  layoutRef.current = layout;
-  const onLayoutChangeRef = useRef(onLayoutChange);
-  onLayoutChangeRef.current = onLayoutChange;
+  const tilePanels = useMemo(() => (panels ?? []).filter((p4) => p4.as === "tile"), [panels]);
+  const floatPanels = useMemo(() => (panels ?? []).filter((p4) => p4.as === "floating"), [panels]);
+  const idKey = JSON.stringify([
+    ...items.map((_2, i5) => ids?.[i5] ?? `lk-ws-${i5}`),
+    ...tilePanels.map((p4) => `lk-panel-${p4.key}`)
+  ]);
+  const nodeIds = useMemo(() => JSON.parse(idKey).map(asNodeId), [idKey]);
+  const layoutRef = useLatest(layout);
+  const onLayoutChangeRef = useLatest(onLayoutChange);
   const storeRef = useRef(null);
-  if (storeRef.current === null) {
-    const store2 = new Store();
-    store2.registerNode(
-      createNode({
-        kind: "zone",
-        id: ZONE_ID,
-        container: { strategyId: "grid", config: { resizable, gap, padding } }
-      })
-    );
-    store2.registerNode(
-      createNode({
-        kind: "zone",
-        id: FLOAT_ZONE_ID,
-        container: { strategyId: "floating", config: {} }
-      })
-    );
-    storeRef.current = store2;
-  }
+  if (storeRef.current === null)
+    storeRef.current = createWorkspaceStore({ resizable, gap, padding });
   const store = storeRef.current;
   const surface = useSurfaceOptional();
   useLayoutEffect(() => {
@@ -2152,7 +2309,7 @@ function Workspace({
       if (saved) store.patchPlacement(id, saved);
     }
     store.setChildOrder(ZONE_ID, [...nodeIds]);
-  }, [store, nodeIds]);
+  }, [store, nodeIds, layoutRef]);
   useEffect(() => {
     if (!surface) return;
     surface.invalidateRects();
@@ -2168,15 +2325,15 @@ function Workspace({
       }
       onLayoutChangeRef.current?.(next);
     });
-  }, [store, onLayoutChange]);
+  }, [store, onLayoutChange, onLayoutChangeRef]);
   const commitOrder = useCallback(
     (nextIds) => onReorder?.(nextIds.map(String)),
     [onReorder]
   );
   const chrome = useMemo(() => {
-    const byId = new Map(nodeIds.map((id, i4) => [id, items[i4]]));
+    const byId = new Map(nodeIds.map((id, i5) => [id, items[i5]]));
     const panelByNode = new Map(
-      tilePanels.map((p3) => [`lk-panel-${p3.key}`, p3])
+      tilePanels.map((p4) => [`lk-panel-${p4.key}`, p4])
     );
     return {
       [PANEL_KIND]: ({ node }) => {
@@ -2194,7 +2351,7 @@ function Workspace({
       }
     };
   }, [nodeIds, items, reorderable, tilePanels]);
-  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p3) => /* @__PURE__ */ jsx(PanelFrame, { panel: p3, floating: true }, p3.key)) });
+  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p4) => /* @__PURE__ */ jsx(PanelFrame, { panel: p4, floating: true }, p4.key)) });
   const grid = /* @__PURE__ */ jsx(
     Container,
     {
@@ -2240,7 +2397,7 @@ async function openStoredLab({ instruments, defaultInstrument, mode }, storageKe
   const marks = /* @__PURE__ */ new Map();
   await Promise.all(
     opened.store.getState().trials.map(async (trial) => {
-      const kept = instruments.find((i4) => i4.name === trial.instrumentName)?.annotations?.storage;
+      const kept = instruments.find((i5) => i5.name === trial.instrumentName)?.annotations?.storage;
       if (!kept) return;
       try {
         marks.set(trial.id, await kept.load());
@@ -2289,11 +2446,11 @@ var NEBULA_SLOTS = [
 ];
 function buildNebula(list, theme, mode, density) {
   const ctx = { theme, resolved: resolveTheme(theme, { mode, density }) };
-  const n5 = colorCount(list, ctx) ?? NEBULA_SLOTS.length;
-  const colors = Array.from({ length: n5 }, (_2, i4) => colorAt(list, i4, ctx));
-  const blobs = colors.map((c6, i4) => {
-    const p3 = NEBULA_SLOTS[i4 % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p3.sx} ${p3.sy} at ${p3.cx} ${p3.cy}, color-mix(in srgb, ${c6} 22%, transparent), transparent ${p3.stop})`;
+  const n6 = colorCount(list, ctx) ?? NEBULA_SLOTS.length;
+  const colors = Array.from({ length: n6 }, (_2, i5) => colorAt(list, i5, ctx));
+  const blobs = colors.map((c6, i5) => {
+    const p4 = NEBULA_SLOTS[i5 % NEBULA_SLOTS.length];
+    return `radial-gradient(ellipse ${p4.sx} ${p4.sy} at ${p4.cx} ${p4.cy}, color-mix(in srgb, ${c6} 22%, transparent), transparent ${p4.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
@@ -2389,6 +2546,7 @@ function LabRuntime({
   labChrome,
   suppress,
   addTrial: addTrial2,
+  zoom = true,
   tools,
   configRules,
   controls,
@@ -2399,13 +2557,14 @@ function LabRuntime({
   useLayoutEffect(() => {
     store.getState().setInstruments(instruments);
   }, [instruments, store]);
-  const trials = useStore(store, (s4) => s4.trials);
+  const trials = useStore(store, (s2) => s2.trials);
+  const [cameras] = useState(createCameraRegistry);
   const [focusPick, setFocusPick] = useState(null);
   const focusedTrialId = trials.some((t) => t.id === focusPick) ? focusPick : trials[0]?.id ?? null;
-  const savedSnapshots = useStore(store, (s4) => s4.savedSnapshots);
-  const modeValue = useStore(store, (s4) => s4.mode);
-  const layout = useStore(store, (s4) => s4.layout);
-  const undockedPanels = useStore(store, (s4) => s4.undockedPanels);
+  const savedSnapshots = useStore(store, (s2) => s2.savedSnapshots);
+  const modeValue = useStore(store, (s2) => s2.mode);
+  const layout = useStore(store, (s2) => s2.layout);
+  const undockedPanels = useStore(store, (s2) => s2.undockedPanels);
   const panelHostsRef = useRef(null);
   if (panelHostsRef.current === null) panelHostsRef.current = createPanelHostRegistry();
   const outerSurface = useSurfaceOptional();
@@ -2421,12 +2580,12 @@ function LabRuntime({
     const canvases = [ownUnderRef.current, ownOverRef.current].filter((c6) => c6 !== null);
     if (canvases.length === 0) return;
     const w2 = Math.round(frame.size.width * frame.dpr);
-    const h = Math.round(frame.size.height * frame.dpr);
-    if (bufferRef.current.w !== w2 || bufferRef.current.h !== h) {
-      bufferRef.current = { w: w2, h };
+    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 c6 of canvases) {
         c6.width = w2;
-        c6.height = h;
+        c6.height = h2;
         c6.style.width = `${frame.size.width}px`;
         c6.style.height = `${frame.size.height}px`;
       }
@@ -2435,7 +2594,9 @@ function LabRuntime({
     }
   }, []);
   const ownSurface = useTiledSurface({ onFrame });
-  surfaceRef.current = ownSurface;
+  useInsertionEffect(() => {
+    surfaceRef.current = ownSurface;
+  }, [ownSurface]);
   const [labBody, setLabBody] = useState(null);
   const attachOwnSurface = ownSurface.containerRef;
   const labBodyRef = useCallback(
@@ -2545,15 +2706,15 @@ function LabRuntime({
         const next = resetTrial(store.getState().trials, id, instruments);
         const record = next.find((w2) => w2.id === id);
         if (!record) return;
-        store.setState((s4) => ({
-          trials: s4.trials.map(
+        store.setState((s2) => ({
+          trials: s2.trials.map(
             (w2) => w2.id === id ? { ...w2, config: record.config, state: record.state, view: record.view } : w2
           )
         }));
       },
       savedSnapshots,
       saveSnapshot: (trialId, name) => {
-        const taken = store.getState().savedSnapshots.filter((s4) => s4.trialId === trialId).length;
+        const taken = store.getState().savedSnapshots.filter((s2) => s2.trialId === trialId).length;
         store.getState().saveSnapshot(trialId, name ?? `Snapshot ${taken + 1}`);
       },
       loadSnapshot: (trialId, snapshotId) => {
@@ -2563,8 +2724,8 @@ function LabRuntime({
         store.getState().deleteSnapshot(snapshotId);
       },
       mode: modeValue,
-      setMode: (m2) => {
-        store.getState().setMode(m2);
+      setMode: (m) => {
+        store.getState().setMode(m);
       },
       configRules,
       controls
@@ -2600,7 +2761,7 @@ function LabRuntime({
       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(
+  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(PersistenceContext.Provider, { value: opened.records, children: /* @__PURE__ */ jsx(AnnotationPreloadContext.Provider, { value: opened.marks, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(CameraRegistryContext.Provider, { value: cameras, children: /* @__PURE__ */ jsx(
     ThemeProvider,
     {
       theme,
@@ -2620,8 +2781,10 @@ function LabRuntime({
           ] }) : footer,
           header: /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(LabHeader, { ...addTrial2 !== void 0 ? { addTrial: addTrial2 } : {} }),
+            zoom ? /* @__PURE__ */ jsx(LabZoom, {}) : null,
             children,
-            /* @__PURE__ */ jsx(LabHeaderRegion, { contributions: labChromeAll })
+            /* @__PURE__ */ jsx(LabHeaderRegion, { contributions: labChromeAll }),
+            /* @__PURE__ */ jsx(LabThemeSwitcher, {})
           ] }),
           children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: panelHostsRef.current, children: /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: surface, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: surfaceCanvases, children: /* @__PURE__ */ jsxs("div", { className: "lk-lab__body", ref: labBodyRef, children: [
             outerSurface ? null : (
@@ -2664,7 +2827,7 @@ function LabRuntime({
         }
       )
     }
-  ) }) }) }) });
+  ) }) }) }) }) });
 }
 function LabBoundary({ children }) {
   return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: null, children: /* @__PURE__ */ jsx(PersistenceContext.Provider, { value: null, children: /* @__PURE__ */ jsx(AnnotationPreloadContext.Provider, { value: null, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: null, children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: { over: null, under: null }, children: /* @__PURE__ */ jsx(TrialIdContext.Provider, { value: null, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: null, children: /* @__PURE__ */ jsx(CameraWheelContext.Provider, { value: null, children: /* @__PURE__ */ jsx(CanvasStackContext.Provider, { value: null, children: /* @__PURE__ */ jsx(TrialDragContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: null, children }) }) }) }) }) }) }) }) }) }) }) }) });
@@ -2769,25 +2932,25 @@ function ButtonsAndToggles() {
       /* @__PURE__ */ jsx(c, { variant: "secondary", iconOnly: true, ariaLabel: "Add", children: /* @__PURE__ */ jsx(Dot, {}) })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Badge", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
-      /* @__PURE__ */ jsx(Ht, { shape: "pill", status: "accent", variant: "outline", size: "sm", children: "ACCENT" }),
-      /* @__PURE__ */ jsx(Ht, { status: "info", variant: "subtle", children: "INFO" }),
-      /* @__PURE__ */ jsx(Ht, { status: "warn", variant: "solid", children: "WARN" }),
-      /* @__PURE__ */ jsx(Ht, { status: "danger", variant: "solid", children: "DANGER" }),
-      /* @__PURE__ */ jsx(Ht, { status: "muted", children: "MUTED" })
+      /* @__PURE__ */ jsx(Xt, { shape: "pill", status: "accent", variant: "outline", size: "sm", children: "ACCENT" }),
+      /* @__PURE__ */ jsx(Xt, { status: "info", variant: "subtle", children: "INFO" }),
+      /* @__PURE__ */ jsx(Xt, { status: "warn", variant: "solid", children: "WARN" }),
+      /* @__PURE__ */ jsx(Xt, { status: "danger", variant: "solid", children: "DANGER" }),
+      /* @__PURE__ */ jsx(Xt, { status: "muted", children: "MUTED" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Checkbox, Switch", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
-      /* @__PURE__ */ jsx(o3, { isSelected: snap, onChange: setSnap, children: "Snap to grid" }),
-      /* @__PURE__ */ jsx(o3, { isIndeterminate: true, children: "Mixed" }),
-      /* @__PURE__ */ jsx(a6, { isSelected: wifi, onChange: setWifi, children: "Wifi" })
+      /* @__PURE__ */ jsx(c5, { isSelected: snap, onChange: setSnap, children: "Snap to grid" }),
+      /* @__PURE__ */ jsx(c5, { isIndeterminate: true, children: "Mixed" }),
+      /* @__PURE__ */ jsx(a7, { isSelected: wifi, onChange: setWifi, children: "Wifi" })
     ] }) }),
-    /* @__PURE__ */ jsx(Cell, { label: "RadioGroup", children: /* @__PURE__ */ jsxs(l5, { label: "Snap mode", orientation: "horizontal", defaultValue: "grid", children: [
-      /* @__PURE__ */ jsx(u5, { value: "off", children: "Off" }),
-      /* @__PURE__ */ jsx(u5, { value: "grid", children: "Grid" }),
-      /* @__PURE__ */ jsx(u5, { value: "pixel", children: "Pixel" })
+    /* @__PURE__ */ jsx(Cell, { label: "RadioGroup", children: /* @__PURE__ */ jsxs(l4, { label: "Snap mode", orientation: "horizontal", defaultValue: "grid", children: [
+      /* @__PURE__ */ jsx(u3, { value: "off", children: "Off" }),
+      /* @__PURE__ */ jsx(u3, { value: "grid", children: "Grid" }),
+      /* @__PURE__ */ jsx(u3, { value: "pixel", children: "Pixel" })
     ] }) }),
     /* @__PURE__ */ jsxs(Cell, { label: "ToggleBar", children: [
       /* @__PURE__ */ jsx(
-        a5,
+        a6,
         {
           ariaLabel: "Align",
           value: align,
@@ -2800,7 +2963,7 @@ function ButtonsAndToggles() {
         }
       ),
       /* @__PURE__ */ jsx(
-        a5,
+        a6,
         {
           ariaLabel: "Align, flat",
           variant: "flat",
@@ -2826,7 +2989,7 @@ function ButtonsAndToggles() {
         }
       ),
       /* @__PURE__ */ jsx(
-        a7,
+        a9,
         {
           items: [
             { value: "undo", label: "Undo", onAction: () => {
@@ -2839,7 +3002,7 @@ function ButtonsAndToggles() {
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "MenuButton, Disclosure", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
       /* @__PURE__ */ jsx(
-        d2,
+        p4,
         {
           label: "Add trial\u2026",
           onAction: () => {
@@ -2853,14 +3016,14 @@ function ButtonsAndToggles() {
       /* @__PURE__ */ jsx(i2, { open, onToggle: () => setOpen((o4) => !o4), label: "Shapes" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Tabs", children: /* @__PURE__ */ jsxs(o5, { children: [
-      /* @__PURE__ */ jsxs(s6, { "aria-label": "Sections", children: [
-        /* @__PURE__ */ jsx(c5, { id: "props", children: "Props" }),
-        /* @__PURE__ */ jsx(c5, { id: "events", children: "Events" }),
-        /* @__PURE__ */ jsx(c5, { id: "snapshot", children: "Snapshot" })
+      /* @__PURE__ */ jsxs(s3, { "aria-label": "Sections", children: [
+        /* @__PURE__ */ jsx(c6, { id: "props", children: "Props" }),
+        /* @__PURE__ */ jsx(c6, { id: "events", children: "Events" }),
+        /* @__PURE__ */ jsx(c6, { id: "snapshot", children: "Snapshot" })
       ] }),
-      /* @__PURE__ */ jsx(l7, { id: "props", children: "Props panel." }),
-      /* @__PURE__ */ jsx(l7, { id: "events", children: "Events panel." }),
-      /* @__PURE__ */ jsx(l7, { id: "snapshot", children: "Snapshot panel." })
+      /* @__PURE__ */ jsx(l8, { id: "props", children: "Props panel." }),
+      /* @__PURE__ */ jsx(l8, { id: "events", children: "Events panel." }),
+      /* @__PURE__ */ jsx(l8, { id: "snapshot", children: "Snapshot panel." })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Keycaps", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
       /* @__PURE__ */ jsx(p, { keys: [{ label: "\u2318" }, { label: "\u21E7" }, { label: "K" }], separator: "+" }),
@@ -2886,9 +3049,9 @@ function FieldsAndPickers() {
   const [paint, setPaint] = useState({ fill: "solid", color: "#b08adb" });
   return /* @__PURE__ */ jsxs(Section, { title: "Fields & pickers", children: [
     /* @__PURE__ */ jsxs(Cell, { label: "Input", children: [
-      /* @__PURE__ */ jsx(u4, { label: "Name", placeholder: "e.g. Pico" }),
+      /* @__PURE__ */ jsx(u2, { label: "Name", placeholder: "e.g. Pico" }),
       /* @__PURE__ */ jsx(
-        u4,
+        u2,
         {
           label: "Size",
           leadingAdornment: /* @__PURE__ */ jsx("span", { children: "W" }),
@@ -2896,12 +3059,12 @@ function FieldsAndPickers() {
           defaultValue: "120"
         }
       ),
-      /* @__PURE__ */ jsx(u4, { label: "Required", isInvalid: true, errorMessage: "Name is required." })
+      /* @__PURE__ */ jsx(u2, { label: "Required", isInvalid: true, errorMessage: "Name is required." })
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "NumberField, Select, ComboBox", children: [
-      /* @__PURE__ */ jsx(g, { label: "Opacity", minValue: 0, maxValue: 100, step: 5, defaultValue: 80 }),
+      /* @__PURE__ */ jsx(y, { label: "Opacity", minValue: 0, maxValue: 100, step: 5, defaultValue: 80 }),
       /* @__PURE__ */ jsx(
-        T,
+        O2,
         {
           label: "Color",
           defaultSelectedKey: "g",
@@ -2913,7 +3076,7 @@ function FieldsAndPickers() {
         }
       ),
       /* @__PURE__ */ jsx(
-        y2,
+        b4,
         {
           label: "Filter",
           placeholder: "Type to filter\u2026",
@@ -2925,19 +3088,19 @@ function FieldsAndPickers() {
       )
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "RangeSlider, Slider", children: [
-      /* @__PURE__ */ jsx(l8, { label: "Range", defaultValue: [20, 80], minValue: 0, maxValue: 100 }),
+      /* @__PURE__ */ jsx(l9, { label: "Range", defaultValue: [20, 80], minValue: 0, maxValue: 100 }),
       /* @__PURE__ */ jsx(
-        l8,
+        l9,
         {
           label: "Opacity",
           defaultValue: 75,
           minValue: 0,
           maxValue: 100,
-          formatOutput: (v) => `${v}%`
+          formatOutput: (v2) => `${v2}%`
         }
       ),
       /* @__PURE__ */ jsx(
-        y,
+        S,
         {
           ariaLabel: "Pair",
           min: 0,
@@ -2952,7 +3115,7 @@ function FieldsAndPickers() {
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "DetentSlider, InlineRange", children: [
       /* @__PURE__ */ jsx(
-        c6,
+        c7,
         {
           items: [0.25, 0.5, 1, 2, 4],
           value: rate,
@@ -2963,7 +3126,7 @@ function FieldsAndPickers() {
         }
       ),
       /* @__PURE__ */ jsx(
-        i3,
+        i4,
         {
           "aria-label": "Width",
           min: 0,
@@ -2974,11 +3137,11 @@ function FieldsAndPickers() {
       )
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "ColorField, GradientEditor", children: [
-      /* @__PURE__ */ jsx(l4, { value: color, alpha: true, onInput: setColor, onChange: setColor, "aria-label": "Color" }),
-      /* @__PURE__ */ jsx(C2, { value: gradient, onInput: setGradient, onChange: setGradient, kindSwitch: true })
+      /* @__PURE__ */ jsx(h2, { value: color, alpha: true, onInput: setColor, onChange: setColor, "aria-label": "Color" }),
+      /* @__PURE__ */ jsx(j, { value: gradient, onInput: setGradient, onChange: setGradient, kindSwitch: true })
     ] }),
     /* @__PURE__ */ jsx(Cell, { label: "PaintInput", children: /* @__PURE__ */ jsx(
-      S,
+      k2,
       {
         value: paint,
         onInput: setPaint,
@@ -3007,9 +3170,9 @@ function PanelsAndRows() {
   ]);
   const [panelCollapsed, setPanelCollapsed] = useState(false);
   return /* @__PURE__ */ jsxs(Section, { title: "Panels & property rows", children: [
-    /* @__PURE__ */ jsx(Cell, { label: "PropertyPanel", children: /* @__PURE__ */ jsx(ae2, { title: "Shape", children: /* @__PURE__ */ jsxs(oe, { children: [
+    /* @__PURE__ */ jsx(Cell, { label: "PropertyPanel", children: /* @__PURE__ */ jsx(oe, { title: "Shape", children: /* @__PURE__ */ jsxs(se, { children: [
       /* @__PURE__ */ jsx(
-        B2,
+        R,
         {
           kind: "number",
           control: "slider",
@@ -3022,7 +3185,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        B2,
+        R,
         {
           kind: "number",
           control: "slider",
@@ -3035,7 +3198,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        B2,
+        R,
         {
           kind: "color",
           label: "Fill",
@@ -3045,9 +3208,9 @@ function PanelsAndRows() {
           onAlphaChange: setAlpha
         }
       ),
-      /* @__PURE__ */ jsx(B2, { kind: "color", label: "Stroke", value: stroke, onChange: setStroke }),
+      /* @__PURE__ */ jsx(R, { kind: "color", label: "Stroke", value: stroke, onChange: setStroke }),
       /* @__PURE__ */ jsx(
-        B2,
+        R,
         {
           kind: "number",
           label: "Count",
@@ -3059,7 +3222,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        B2,
+        R,
         {
           kind: "enum",
           label: "Line cap",
@@ -3072,7 +3235,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        B2,
+        R,
         {
           kind: "enum",
           control: "toggle",
@@ -3086,10 +3249,10 @@ function PanelsAndRows() {
           ]
         }
       ),
-      /* @__PURE__ */ jsx(B2, { kind: "string", label: "Label", value: label, onChange: setLabel }),
-      /* @__PURE__ */ jsx(B2, { kind: "boolean", label: "Visible", value: visible, onChange: setVisible }),
-      /* @__PURE__ */ jsx(b2, { title: "Bevel", defaultCollapsed: true, children: /* @__PURE__ */ jsx(
-        B2,
+      /* @__PURE__ */ jsx(R, { kind: "string", label: "Label", value: label, onChange: setLabel }),
+      /* @__PURE__ */ jsx(R, { kind: "boolean", label: "Visible", value: visible, onChange: setVisible }),
+      /* @__PURE__ */ jsx(b3, { title: "Bevel", defaultCollapsed: true, children: /* @__PURE__ */ jsx(
+        R,
         {
           kind: "number",
           control: "slider",
@@ -3104,7 +3267,7 @@ function PanelsAndRows() {
       ) })
     ] }) }) }),
     /* @__PURE__ */ jsx(Cell, { label: "PrefsForm", children: /* @__PURE__ */ jsx(
-      A2,
+      j2,
       {
         schema: PREFS,
         values: prefs,
@@ -3112,7 +3275,7 @@ function PanelsAndRows() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "LayerList", children: /* @__PURE__ */ jsx(
-      D,
+      D2,
       {
         items: layers,
         onReorder: (move) => setLayers(S2(layers, move)),
@@ -3123,11 +3286,11 @@ function PanelsAndRows() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "Sidebar, SidebarPanel", children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__box", children: /* @__PURE__ */ jsx(n6, { side: "right", ariaLabel: "Specimen sidebar", children: /* @__PURE__ */ jsx(
-      s5,
+      a10,
       {
         title: "Selection",
         collapsed: panelCollapsed,
-        onToggleCollapse: () => setPanelCollapsed((v) => !v),
+        onToggleCollapse: () => setPanelCollapsed((v2) => !v2),
         onHide: () => {
         },
         children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__pad", children: "2 items selected" })
@@ -3139,7 +3302,7 @@ function OverlaysAndFeedback() {
   const calloutAnchor = useRef(null);
   const [calloutOpen, setCalloutOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
-  const toasts = useMemo(() => m3(), []);
+  const toasts = useMemo(() => C3(), []);
   return /* @__PURE__ */ jsxs(Section, { title: "Overlays & feedback", children: [
     /* @__PURE__ */ jsx(Cell, { label: "Tooltip, Callout, Dialog, Toast", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
       /* @__PURE__ */ jsxs(l2, { children: [
@@ -3148,7 +3311,7 @@ function OverlaysAndFeedback() {
       ] }),
       /* @__PURE__ */ jsx("button", { type: "button", ref: calloutAnchor, onClick: () => setCalloutOpen(true), children: "Callout" }),
       /* @__PURE__ */ jsx(
-        g2,
+        v2,
         {
           triggerRef: calloutAnchor,
           isOpen: calloutOpen,
@@ -3160,7 +3323,7 @@ function OverlaysAndFeedback() {
       ),
       /* @__PURE__ */ jsx(c, { onClick: () => setDialogOpen(true), children: "Dialog" }),
       /* @__PURE__ */ jsx(
-        u3,
+        d3,
         {
           isOpen: dialogOpen,
           onOpenChange: setDialogOpen,
@@ -3176,7 +3339,7 @@ function OverlaysAndFeedback() {
           children: "Toast"
         }
       ),
-      /* @__PURE__ */ jsx(S4, { queue: toasts, placement: "bottom-right" })
+      /* @__PURE__ */ jsx(j3, { queue: toasts, placement: "bottom-right" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Powerline", children: /* @__PURE__ */ jsx(
       r4,
@@ -3193,7 +3356,7 @@ function OverlaysAndFeedback() {
     /* @__PURE__ */ jsx(Cell, { label: "StatusBar", children: /* @__PURE__ */ jsxs(n7, { ariaLabel: "Editor status", children: [
       /* @__PURE__ */ jsx(r5, { children: "tool: select" }),
       /* @__PURE__ */ jsx(r5, { children: "sel: 3" }),
-      /* @__PURE__ */ jsx(i4, {}),
+      /* @__PURE__ */ jsx(i5, {}),
       /* @__PURE__ */ jsx(r5, { muted: true, children: "0.7.0" })
     ] }) })
   ] });
@@ -3239,19 +3402,18 @@ function ToolChrome() {
         label: id,
         shortcut: id.slice(0, 1).toUpperCase(),
         active: tool === id,
-        tabbable: tool === id,
         onClick: () => setTool(id)
       },
       id
     )) }) }),
-    /* @__PURE__ */ jsx(Cell, { label: "ToolOptionsBar", children: /* @__PURE__ */ jsxs(c3, { label: "Text", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "ToolOptionsBar", children: /* @__PURE__ */ jsxs(c4, { label: "Text", children: [
       /* @__PURE__ */ jsx(c, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Bold", children: "B" }),
       /* @__PURE__ */ jsx(c, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Italic", children: "I" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "ResizeHandle", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__box", children: [
       /* @__PURE__ */ jsx("div", { className: "lk-specimen__box-main", children: "content" }),
       /* @__PURE__ */ jsx(
-        c4,
+        l7,
         {
           value: paneWidth,
           min: 100,
@@ -3360,7 +3522,7 @@ function EditorsAndPlots() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "BandEditor", wide: true, children: /* @__PURE__ */ jsx(
-      k2,
+      j4,
       {
         min: 1 / 64,
         max: 1 / 2,
@@ -3370,12 +3532,12 @@ function EditorsAndPlots() {
         onChange: setBands,
         selectedIndex: band,
         onSelect: setBand,
-        renderBand: (b2) => b2.data.name,
+        renderBand: (b3) => b3.data.name,
         ticks: [1 / 24, 1 / 12, 1 / 6].map((at) => ({ at, label: `1/${Math.round(1 / at)}` }))
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "Timeline", wide: true, children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__timeline", children: /* @__PURE__ */ jsx(
-      $2,
+      be,
       {
         tracks,
         duration: 2e3,
@@ -3438,6 +3600,6 @@ function Specimen({ className }) {
   ] });
 }
 
-export { AnnotationOverlay, AnnotationTargets, Lab, LabBoundary, LabPalette, LabRoot, LabShell, LabSwitcher, SPECIMEN_SECTIONS, Specimen, Trial, TrialBody, TrialChrome, Workspace, addTrial, annotationsFromJSON, capturePlan, captureTarget, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, currentPage, defineInstrument, fitView, fracContains, fracEncloses, fracToWorld, fromWeaselView, interstellarTheme, isStale, reorderTrials, resetTrial, resolveMarkStyle, roundFrac, seenFrom, toWeaselView, validateConfigSchema, worldToFrac };
+export { AnnotationOverlay, AnnotationTargets, Lab, LabBoundary, LabPalette, LabRoot, LabShell, LabSwitcher, LabZoom, SPECIMEN_SECTIONS, Specimen, Trial, TrialBody, TrialChrome, Workspace, addTrial, annotationsFromJSON, capturePlan, captureTarget, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, currentPage, defineInstrument, fitView, fromWeaselView, interstellarTheme, isStale, reorderTrials, resetTrial, resolveMarkStyle, seenFrom, toWeaselView, validateConfigSchema };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map