@weasel-js/labkit 1.4.0-pre.0 → 1.4.0

package/dist/index.js

@@ -1,39 +1,41 @@
 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-5TCEVMPI.js';
-import { useSurfaceOptional, useSurfaceCanvas, useTiledSurface, SurfaceContext, SurfaceCanvasContext } from './chunk-4EY67BKJ.js';
-export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTiledSurface } from './chunk-4EY67BKJ.js';
+import { useDragDrop, DragOverlay, Palette } from './chunk-YQGQUBKA.js';
+import { useSurfaceOptional, useSurfaceCanvas, useTileId, useTiledSurface, SurfaceContext, SurfaceCanvasContext } from './chunk-B5VWJBWM.js';
+export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTiledSurface } from './chunk-B5VWJBWM.js';
 import { useJob } from './chunk-LN6JDUGB.js';
 export { useJob } from './chunk-LN6JDUGB.js';
-import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, SidebarRegion, ViewportRegion, StatusRegion, AnnotationsContext } from './chunk-LITE5YFB.js';
-export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationsContext, ExportMenu, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, mergeContributions, suppressContributions, useAnnotations, useAnnotationsOptional } from './chunk-LITE5YFB.js';
-import { JobProgress } from './chunk-3P5TTTA7.js';
-export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-3P5TTTA7.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-6JMU56CU.js';
-import { LabStoreContext, TrialIdProvider, createLabStore, panelKey, noneAdapter } from './chunk-XJ6N32QP.js';
-export { CURRENT_DOCUMENT_VERSION, LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, createMemoryAdapter, dockPanel, labDocumentKey, localStorageAdapter, noneAdapter, panelKey, quarantineKey, sessionStorageAdapter, undockPanel, urlHashAdapter, useLabStore, useTrialId, useTrialState } from './chunk-XJ6N32QP.js';
-import { fromConfigFields } from './chunk-YQJNT4XQ.js';
-export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-YQJNT4XQ.js';
-import { CanvasStack } from './chunk-3ZELRRBV.js';
-export { CanvasStack } from './chunk-3ZELRRBV.js';
-import { LayerList } from './chunk-JDDIZSLL.js';
-export { LayerList } from './chunk-JDDIZSLL.js';
+import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, AnnotationsContext } from './chunk-UD7TEHZT.js';
+export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationsContext, ExportMenu, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, mergeContributions, suppressContributions, useAnnotations, useAnnotationsOptional } from './chunk-UD7TEHZT.js';
+import { JobProgress } from './chunk-4AMN4MMB.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-4AMN4MMB.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-QR5V3AFG.js';
+import { createLabStore, panelKey, noneAdapter } from './chunk-LJSIUFYD.js';
+export { CURRENT_DOCUMENT_VERSION, createMemoryAdapter, dockPanel, labDocumentKey, localStorageAdapter, noneAdapter, panelKey, quarantineKey, sessionStorageAdapter, undockPanel, urlHashAdapter, useTrialState } from './chunk-LJSIUFYD.js';
+import { LabStoreContext, TrialIdProvider } from './chunk-2YILQ7Y5.js';
+export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
+import { fromConfigFields } from './chunk-W3KSUXXR.js';
+export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-W3KSUXXR.js';
+import { CanvasStack } from './chunk-VHFQKAUL.js';
+export { CanvasStack, PITCH_LIMIT, clampPitch, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-VHFQKAUL.js';
+import { LayerList } from './chunk-XCBCZEBO.js';
+export { LayerList } from './chunk-XCBCZEBO.js';
 import './chunk-SBXNQW4G.js';
-import { C, p, r2 } from './chunk-HEORBLVT.js';
-export { k2 as CheckboxRow, O2 as ColorRow, m2 as CurveField, _3 as EffectCard, y2 as EffectCardList, c3 as LayerStack, j2 as NumberRow, b3 as PropertyGroup, S2 as PropertyList, x3 as PropertyPanel, w as PropertyRow, C2 as PropertySpan, M as SelectRow, E as SliderRow, g as Subpanel, A2 as TextRow, N as ToggleRow } from './chunk-HEORBLVT.js';
-import { resolveLoupe, TrialLoupe } from './chunk-EQIB2PGC.js';
-export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-EQIB2PGC.js';
+import { E, w, T, C, p, r3 } from './chunk-L5WBGUVR.js';
+export { A2 as CheckboxRow, k as ColorRow, h2 as CurveField, v3 as EffectCard, b3 as EffectCardList, c3 as LayerStack, M2 as NumberRow, x3 as PropertyGroup, C2 as PropertyList, S2 as PropertyPanel, T2 as PropertyRow, w2 as PropertySpan, N2 as SelectRow, D as SliderRow, _3 as Subpanel, j2 as TextRow, P2 as ToggleRow } from './chunk-L5WBGUVR.js';
+import { resolveLoupe, TrialLoupe } from './chunk-Y2HK44TG.js';
+export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-Y2HK44TG.js';
 export { centerOn, zoomAt } from './chunk-CTRKTLYZ.js';
 import { applyCamera } from './chunk-2AYGEN57.js';
 export { DEFAULT_FRAME, applyCamera, resolveFrame, screenToWorld, worldToScreen } from './chunk-2AYGEN57.js';
 export { CanvasStackContext } from './chunk-CQLQPQ4P.js';
-import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext, resolveStrokeWidth, getMarker, getPaintKind, boundsOfPath, tileGeometry, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, SCRIPT_METRICS } from './chunk-ROQDRXKW.js';
-import { createContext, useState, useRef, useEffect, useCallback, useContext, useMemo, Children, useLayoutEffect, useSyncExternalStore } from 'react';
+import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext, resolveStrokeWidth, getMarker, getPaintKind, boundsOfPath, tileGeometry, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, SCRIPT_METRICS } from './chunk-7VW3S44V.js';
+import { createContext, useState, useRef, useEffect, useContext, useMemo, Children, useLayoutEffect, useCallback, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useStore } from 'zustand/react';
-import { Provider, StrategyRegistryProvider, DragProvider, Container, useDragHandle } from 'windease/react';
-import { asNodeId, Store, createNode, floatingStrategy, gridStrategy } from 'windease';
+import { asNodeId, Store, createNode, stripStrategy, floatingStrategy, gridStrategy } from 'windease';
+import { Provider, StrategyRegistryProvider, Container, DragProvider, useDragHandle } from 'windease/react';
 
 // ../svg/dist/index.js
 var IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
@@ -47,12 +49,12 @@ function multiply(a, b2) {
     a[1] * b2[4] + a[3] * b2[5] + a[5]
   ];
 }
-function isIdentity(m2, eps = 1e-9) {
-  return Math.abs(m2[0] - 1) < eps && Math.abs(m2[1]) < eps && Math.abs(m2[2]) < eps && Math.abs(m2[3] - 1) < eps && Math.abs(m2[4]) < eps && Math.abs(m2[5]) < eps;
+function isIdentity(m, eps = 1e-9) {
+  return Math.abs(m[0] - 1) < eps && Math.abs(m[1]) < eps && Math.abs(m[2]) < eps && Math.abs(m[3] - 1) < eps && Math.abs(m[4]) < eps && Math.abs(m[5]) < eps;
 }
-function formatMatrix(m2) {
-  if (isIdentity(m2)) return null;
-  return `matrix(${m2.map((n) => trimNumber(n)).join(" ")})`;
+function formatMatrix(m) {
+  if (isIdentity(m)) return null;
+  return `matrix(${m.map((n) => trimNumber(n)).join(" ")})`;
 }
 function trimNumber(n) {
   if (!Number.isFinite(n)) return "0";
@@ -106,8 +108,8 @@ function escapeAttr(s) {
 }
 function serializePathD(path) {
   if (path.kind === "rect") {
-    const { x: x2, y: y2, width, height } = path;
-    return `M${trimNumber(x2)} ${trimNumber(y2)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}Z`;
+    const { x: x2, y, width, height } = path;
+    return `M${trimNumber(x2)} ${trimNumber(y)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}Z`;
   }
   const cmds = path.commands;
   const xs = path.coords;
@@ -215,10 +217,10 @@ function gradientXml(id, paint) {
   return "";
 }
 function stopXml(s) {
-  const m2 = /^#([0-9a-f]{6})([0-9a-f]{2})$/i.exec(s.color);
-  if (m2) {
-    const alpha = parseInt(m2[2], 16) / 255;
-    return `<stop offset="${trimNumber(s.offset)}" stop-color="#${m2[1].toLowerCase()}" stop-opacity="${trimNumber(alpha)}"/>`;
+  const m = /^#([0-9a-f]{6})([0-9a-f]{2})$/i.exec(s.color);
+  if (m) {
+    const alpha = parseInt(m[2], 16) / 255;
+    return `<stop offset="${trimNumber(s.offset)}" stop-color="#${m[1].toLowerCase()}" stop-opacity="${trimNumber(alpha)}"/>`;
   }
   return `<stop offset="${trimNumber(s.offset)}" stop-color="${s.color}"/>`;
 }
@@ -365,8 +367,8 @@ function imageXml(node, namespaces) {
 function groupXml(node, registry, namespaces) {
   const attrs = [];
   if (node.transform) {
-    const m2 = formatMatrix(node.transform);
-    if (m2) attrs.push(`transform="${m2}"`);
+    const m = formatMatrix(node.transform);
+    if (m) attrs.push(`transform="${m}"`);
   }
   if (node.opacity != null && node.opacity !== 1) {
     attrs.push(`opacity="${trimNumber(node.opacity)}"`);
@@ -494,9 +496,9 @@ function computeBounds(nodes) {
     }
     const b2 = n.kind === "text" || n.kind === "image" ? { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height } : pathBounds(n.path);
     const local = n.rotation ? rotateAboutCenter(ctm, b2, n.rotation) : ctm;
-    for (const [x2, y2] of corners(b2)) {
-      const px = local[0] * x2 + local[2] * y2 + local[4];
-      const py = local[1] * x2 + local[3] * y2 + local[5];
+    for (const [x2, y] of corners(b2)) {
+      const px = local[0] * x2 + local[2] * y + local[4];
+      const py = local[1] * x2 + local[3] * y + local[5];
       if (px < minX) minX = px;
       if (py < minY) minY = py;
       if (px > maxX) maxX = px;
@@ -638,13 +640,13 @@ var toWorld = (p2, content) => ({
   x: p2.x * content.w,
   y: p2.y * content.h
 });
-function vertices(m2, content) {
-  const stored = m2.data.points;
+function vertices(m, content) {
+  const stored = m.data.points;
   if (stored && stored.length >= 2) return stored.map((p2) => toWorld(p2, content));
-  const { x: x2, y: y2, width, height } = m2.pose;
+  const { x: x2, y, width, height } = m.pose;
   return [
-    { x: x2, y: y2 },
-    { x: x2 + width, y: y2 + height }
+    { x: x2, y },
+    { x: x2 + width, y: y + height }
   ];
 }
 function polyline(points) {
@@ -655,7 +657,7 @@ function polyline(points) {
   for (const p2 of points.slice(1)) b2.lineTo(p2.x, p2.y);
   return b2.build();
 }
-function markCommands(m2, content, style = {}) {
+function markCommands(m, content, style = {}) {
   const color = style.color ?? MARK_COLOR;
   const stroke = {
     paint: { color },
@@ -664,19 +666,19 @@ function markCommands(m2, content, style = {}) {
     join: "round",
     ...style.stale ? { dash: [6, 4] } : {}
   };
-  switch (m2.data.kind) {
+  switch (m.data.kind) {
     case "rect":
       return [
-        { kind: "path", path: rectPath(m2.pose.x, m2.pose.y, m2.pose.width, m2.pose.height), stroke }
+        { kind: "path", path: rectPath(m.pose.x, m.pose.y, m.pose.width, m.pose.height), stroke }
       ];
     case "ellipse":
-      return [{ kind: "path", path: ellipsePath(m2.pose), stroke }];
+      return [{ kind: "path", path: ellipsePath(m.pose), stroke }];
     case "line": {
-      const [a, b2] = vertices(m2, content);
+      const [a, b2] = vertices(m, content);
       return [{ kind: "path", path: linePath(a, b2), stroke }];
     }
     case "arrow": {
-      const [a, b2] = vertices(m2, content);
+      const [a, b2] = vertices(m, content);
       const marked = { ...stroke, markerEnd: "arrow" };
       const path = linePath(a, b2);
       return [
@@ -685,14 +687,14 @@ function markCommands(m2, content, style = {}) {
       ];
     }
     case "stroke":
-      return [{ kind: "path", path: polyline(vertices(m2, content)), stroke }];
+      return [{ kind: "path", path: polyline(vertices(m, content)), stroke }];
     case "text": {
-      const text = m2.data.title;
+      const text = m.data.title;
       if (!text) return [];
       return [
         textCommand(
-          m2.pose.x,
-          m2.pose.y,
+          m.pose.x,
+          m.pose.y,
           text,
           { fontSize: TEXT_SIZE },
           void 0,
@@ -764,7 +766,7 @@ function toSvgStroke(stroke) {
     ...stroke.miterLimit != null ? { miterLimit: stroke.miterLimit } : {}
   };
 }
-function toSvgNode(cmd, m2) {
+function toSvgNode(cmd, m) {
   if (cmd.kind === "path") {
     return {
       kind: "path",
@@ -778,8 +780,8 @@ function toSvgNode(cmd, m2) {
       kind: "text",
       x: cmd.x,
       y: cmd.y,
-      width: m2.pose.width,
-      height: m2.pose.height,
+      width: m.pose.width,
+      height: m.pose.height,
       text: cmd.runs.map((run) => run.text).join(""),
       style: cmd.style,
       ...cmd.runs[0]?.fill ? { fill: cmd.runs[0].fill } : {}
@@ -787,8 +789,8 @@ function toSvgNode(cmd, m2) {
   }
   throw new Error(`[labkit] a mark drew a '${cmd.kind}' command, which has no vector form`);
 }
-function markSvgNodes(m2, content, style = {}) {
-  return markCommands(m2, content, style).map((cmd) => toSvgNode(cmd, m2));
+function markSvgNodes(m, content, style = {}) {
+  return markCommands(m, content, style).map((cmd) => toSvgNode(cmd, m));
 }
 
 // src/annotations/capture.ts
@@ -797,7 +799,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, w3, h2) {
   const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
   const root = doc.documentElement;
   if (doc.getElementsByTagName("parsererror").length > 0 || root.localName !== "svg") {
@@ -805,17 +807,17 @@ 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("width", String(w3));
+  root.setAttribute("height", String(h2));
   return new XMLSerializer().serializeToString(root);
 }
-function embedRasterBase(base, w2, h, onWarn) {
+function embedRasterBase(base, w3, h2, onWarn) {
   const href = base.kind === "canvas" ? base.canvas.toDataURL() : base.kind === "image" ? base.src : "";
   if (base.kind === "image" && !href.startsWith("data:")) {
     onWarn?.(`base image '${href}' is a reference, so this SVG is not self-contained`);
   }
-  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w2, height: h }], {
-    viewBox: { x: 0, y: 0, width: w2, height: h }
+  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w3, height: h2 }], {
+    viewBox: { x: 0, y: 0, width: w3, height: h2 }
   });
 }
 function markNodesOf(scene, draw) {
@@ -831,15 +833,15 @@ function markNodesOf(scene, draw) {
 }
 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 { w: w3, h: h2 } = draw.content;
+  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w3, h2) : embedRasterBase(base, w3, h2, onWarn);
   const marksXml = serializeSvg(markNodesOf(scene, draw), {
-    viewBox: { x: 0, y: 0, width: w2, height: h },
+    viewBox: { x: 0, y: 0, width: w3, 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 outW = Math.max(1, Math.round(w3 * scale));
+  const outH = Math.max(1, Math.round(h2 * scale));
+  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w3} ${h2}">${baseXml}${marksXml}</svg>`;
 }
 function context2d(width, height) {
   const canvas = document.createElement("canvas");
@@ -1153,6 +1155,34 @@ function createAnnotationStore(opts) {
     redo() {
       return history.redo(historySceneAt);
     },
+    selection() {
+      const out = [];
+      for (const target of liveTargets()) {
+        const scene = scenes.get(target);
+        if (!scene) continue;
+        for (const node of scene.getSelection()) {
+          if (scene.get(node)) out.push(`${target}/${String(node)}`);
+        }
+      }
+      return out;
+    },
+    setSelection(ids) {
+      const wanted = /* @__PURE__ */ new Map();
+      for (const id of ids) {
+        const found = nodeOf(id);
+        if (!found) 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((n, i) => String(now[i]) === n)) continue;
+        scene.setSelection(next.map(asNodeId$1));
+      }
+    },
     subscribe(fn) {
       subs.add(fn);
       return () => {
@@ -1235,11 +1265,11 @@ 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;
@@ -1284,26 +1314,27 @@ function AnnotationOverlay({
   const configRef = useRef(config);
   configRef.current = config;
   const id = target.id;
+  const tileId = useTileId(id);
   const lastTile = useRef(null);
   useEffect(() => {
     const el = target.ref.current ?? null;
     if (el === lastTile.current) return;
     lastTile.current = el;
-    surface?.registerTile(id, el);
+    surface?.registerTile(tileId, el);
   });
   useEffect(
     () => () => {
       lastTile.current = null;
-      surface?.registerTile(id, null);
+      surface?.registerTile(tileId, null);
     },
-    [surface, id]
+    [surface, tileId]
   );
   useEffect(
-    () => surface?.registerPainter(id, (next) => {
+    () => surface?.registerPainter(tileId, (next) => {
       setRect((prev) => sameRect(prev, next) ? prev : next);
       sceneCanvas.current?.requestRedraw();
     }),
-    [surface, id]
+    [surface, tileId]
   );
   const container = surface?.getContainer() ?? null;
   if (!container || !rect) return null;
@@ -1396,86 +1427,6 @@ function AnnotationTargets({
     t.id
   )) });
 }
-var PITCH_LIMIT = Math.PI / 2 - 0.01;
-var YAW_PER_PX = 8e-3;
-var PITCH_PER_PX = 8e-3;
-var DISTANCE_PER_NOTCH = 15e-4;
-var DRAG_THRESHOLD = 3;
-function clampPitch(pitch) {
-  return Math.min(PITCH_LIMIT, Math.max(-PITCH_LIMIT, pitch));
-}
-function wrapYaw(yaw) {
-  const wrapped = ((yaw + Math.PI) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI) - Math.PI;
-  return wrapped === -Math.PI ? Math.PI : wrapped;
-}
-function orbitAfterDrag(start, dx, dy) {
-  return {
-    ...start,
-    yaw: wrapYaw(start.yaw + dx * YAW_PER_PX),
-    pitch: clampPitch(start.pitch + dy * PITCH_PER_PX)
-  };
-}
-function orbitAfterWheel(view, deltaY, minDistance, maxDistance) {
-  const factor = Math.exp(deltaY * DISTANCE_PER_NOTCH);
-  return {
-    ...view,
-    distance: Math.min(maxDistance, Math.max(minDistance, view.distance * factor))
-  };
-}
-function useOrbit({
-  view,
-  onViewChange,
-  home,
-  minDistance = 0.1,
-  maxDistance = 1e3
-}) {
-  const dragRef = useRef(null);
-  const viewRef = useRef(view);
-  viewRef.current = view;
-  const homeRef = useRef(home ?? view);
-  if (home) homeRef.current = home;
-  const onWheel = useCallback(
-    (e) => {
-      e.preventDefault();
-      onViewChange(orbitAfterWheel(viewRef.current, e.deltaY, minDistance, maxDistance));
-    },
-    [onViewChange, minDistance, maxDistance]
-  );
-  const onPointerDown = useCallback((e) => {
-    if (e.button !== 0) return;
-    e.currentTarget.setPointerCapture(e.pointerId);
-    dragRef.current = {
-      pointerId: e.pointerId,
-      startX: e.clientX,
-      startY: e.clientY,
-      startView: viewRef.current,
-      moved: false
-    };
-  }, []);
-  const onPointerMove = useCallback(
-    (e) => {
-      const drag = dragRef.current;
-      if (!drag || drag.pointerId !== e.pointerId) return;
-      const dx = e.clientX - drag.startX;
-      const dy = e.clientY - drag.startY;
-      if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
-      drag.moved = true;
-      onViewChange(orbitAfterDrag(drag.startView, dx, dy));
-    },
-    [onViewChange]
-  );
-  const onPointerUp = useCallback((e) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    }
-    dragRef.current = null;
-  }, []);
-  const onDoubleClick = useCallback(() => onViewChange(homeRef.current), [onViewChange]);
-  const isDragging = useCallback(() => dragRef.current?.moved === true, []);
-  return { onWheel, onPointerDown, onPointerMove, onPointerUp, onDoubleClick, isDragging };
-}
 
 // src/config/builder.ts
 var BaseNode = class {
@@ -1540,6 +1491,11 @@ var NumberNode = class extends BaseNode {
   step(step) {
     return this.ann({ step });
   }
+  /** A display suffix for the value — `'px'`, `'ms'`, `'°'`. Presentation only:
+   *  it is never parsed, and the stored value stays a plain number. */
+  suffix(suffix) {
+    return this.ann({ suffix });
+  }
   /** Force a slider even without both bounds. */
   slider() {
     return this.ann({ control: "slider" });
@@ -1654,9 +1610,9 @@ function applyRules(seed, ctx, rules) {
   for (const rule of rules) {
     const patch = rule({ ...ctx, leaf: acc });
     if (patch === null) continue;
-    for (const [k2, v] of Object.entries(patch)) {
-      if (v !== void 0 && acc[k2] === void 0) {
-        acc[k2] = v;
+    for (const [k2, v2] of Object.entries(patch)) {
+      if (v2 !== void 0 && acc[k2] === void 0) {
+        acc[k2] = v2;
       }
     }
   }
@@ -1666,7 +1622,7 @@ function applyRules(seed, ctx, rules) {
 // src/config/resolve.ts
 function defined(annotations) {
   const out = {};
-  for (const [k2, v] of Object.entries(annotations)) if (v !== void 0) out[k2] = v;
+  for (const [k2, v2] of Object.entries(annotations)) if (v2 !== void 0) out[k2] = v2;
   return out;
 }
 function resolveConfigSchema(schema, rules = []) {
@@ -1779,7 +1735,7 @@ function validateConfigSchema(fields) {
   return { valid: errors.length === 0, errors };
 }
 
-// ../theme/dist/chunk-O32P3G22.js
+// ../theme/dist/chunk-CXVFAOTM.js
 var THEME_SOURCES = {
   "weasel": {
     "primitives": {
@@ -1998,6 +1954,31 @@ var THEME_SOURCES = {
         "value": "24px",
         "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
       },
+      "slider-track-h": {
+        "type": "dimension",
+        "value": "4px",
+        "description": "Height of a linear range track. The kit's single-thumb ranges all wear this; Slider's default 24px canvas track does not."
+      },
+      "slider-thumb-size": {
+        "type": "dimension",
+        "value": "8px",
+        "description": "Diameter of a linear range thumb."
+      },
+      "slider-track-tint": {
+        "type": "dimension",
+        "value": "18%",
+        "description": "Accent proportion in a range track. Mixed into a real property, never into another custom property."
+      },
+      "slider-thumb-tint": {
+        "type": "dimension",
+        "value": "70%",
+        "description": "Accent proportion in a range thumb."
+      },
+      "field-pad-x": {
+        "type": "dimension",
+        "value": "8px",
+        "description": "Horizontal padding inside a boxed field. Pairs with --wzl-field-h, which is a container override and has no :root default."
+      },
       "glass-blur": {
         "type": "dimension",
         "value": "3px",
@@ -2317,21 +2298,21 @@ var weaselTheme = {
   modes: THEME_SOURCES.weasel.modes
 };
 function hexToRgba(hex, alpha) {
-  const m2 = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
-  if (!m2) throw new Error(`Expected a hex color, got "${hex}"`);
-  const body = m2[1];
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) throw new Error(`Expected a hex color, got "${hex}"`);
+  const body = m[1];
   const full = body.length === 3 ? body.replace(/./g, (c2) => c2 + c2) : body;
   const r2 = Number.parseInt(full.slice(0, 2), 16);
-  const g2 = Number.parseInt(full.slice(2, 4), 16);
+  const g = Number.parseInt(full.slice(2, 4), 16);
   const b2 = Number.parseInt(full.slice(4, 6), 16);
-  return `rgba(${r2}, ${g2}, ${b2}, ${alpha})`;
+  return `rgba(${r2}, ${g}, ${b2}, ${alpha})`;
 }
 var REF = /^\{([^}]+)\}$/;
 function refTarget(value) {
   if (typeof value !== "string") return null;
-  const m2 = REF.exec(value.trim());
-  if (!m2) return null;
-  const path = m2[1];
+  const m = REF.exec(value.trim());
+  if (!m) return null;
+  const path = m[1];
   const dot = path.indexOf(".");
   return dot === -1 ? path : path.slice(dot + 1);
 }
@@ -2464,15 +2445,15 @@ function useThemeOptional() {
 
 // ../theme/dist/index.js
 var ALPHA_EXT = "com.weasel.alpha";
-var isToken = (v) => typeof v === "object" && v !== null && "$value" in v;
+var isToken = (v2) => typeof v2 === "object" && v2 !== null && "$value" in v2;
 function flattenTokens(doc) {
   const out = {};
   for (const [groupName, group] of Object.entries(doc)) {
     if (groupName.startsWith("$")) continue;
     if (typeof group !== "object" || group === null) continue;
-    const g2 = group;
-    const groupType = g2.$type;
-    for (const [leaf, node] of Object.entries(g2)) {
+    const g = group;
+    const groupType = g.$type;
+    for (const [leaf, node] of Object.entries(g)) {
       if (leaf.startsWith("$")) continue;
       if (!isToken(node)) continue;
       const type = node.$type ?? groupType;
@@ -2582,11 +2563,109 @@ var interstellarTheme = loadDTCG(interstellar_tokens_default);
 var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
 function as2DView(view) {
   if (typeof view !== "object" || view === null) return null;
-  const v = view;
-  if (typeof v.zoom !== "number") return null;
-  if (typeof v.pan !== "object" || v.pan === null) return null;
-  if (typeof v.pan.x !== "number" || typeof v.pan.y !== "number") return null;
-  return { zoom: v.zoom, pan: { x: v.pan.x, y: v.pan.y } };
+  const v2 = view;
+  if (typeof v2.zoom !== "number") return null;
+  if (typeof v2.pan !== "object" || v2.pan === null) return null;
+  if (typeof v2.pan.x !== "number" || typeof v2.pan.y !== "number") return null;
+  return { zoom: v2.zoom, pan: { x: v2.pan.x, y: v2.pan.y } };
+}
+var ZONE_ID = asNodeId("lk-trial-body");
+var SIDEBAR_ID = asNodeId("lk-trial-sidebar");
+var CONTENT_ID = asNodeId("lk-trial-content");
+var STRATEGIES = { strip: stripStrategy };
+function TrialBody({
+  sidebar,
+  children,
+  contentClassName,
+  width,
+  defaultWidth = 320,
+  minWidth = 140,
+  maxWidth = 720,
+  contentMinWidth = 160,
+  onWidthChange,
+  viewport
+}) {
+  const storeRef = useRef(null);
+  if (storeRef.current === null) {
+    const store2 = new Store();
+    store2.registerNode(
+      createNode({
+        kind: "zone",
+        id: ZONE_ID,
+        container: { strategyId: "strip", config: { axis: "x", resizable: true } }
+      })
+    );
+    store2.registerNode(
+      createNode({
+        kind: "sidebar",
+        id: SIDEBAR_ID,
+        parentId: ZONE_ID,
+        meta: { title: "Sidebar" },
+        placement: { size: { w: width ?? defaultWidth } },
+        hints: { minSize: { w: minWidth, h: 0 }, maxSize: { w: maxWidth, h: 0 } }
+      })
+    );
+    store2.registerNode(
+      createNode({
+        kind: "content",
+        id: CONTENT_ID,
+        parentId: ZONE_ID,
+        meta: { title: "Content" },
+        hints: { minSize: { w: contentMinWidth, h: 0 } }
+      })
+    );
+    store2.showNode(SIDEBAR_ID);
+    store2.showNode(CONTENT_ID);
+    storeRef.current = store2;
+  }
+  const store = storeRef.current;
+  const widthRef = useRef(width ?? defaultWidth);
+  useEffect(() => {
+    store.setHints(SIDEBAR_ID, {
+      minSize: { w: minWidth, h: 0 },
+      maxSize: { w: maxWidth, h: 0 }
+    });
+    store.setHints(CONTENT_ID, { minSize: { w: contentMinWidth, h: 0 } });
+  }, [store, minWidth, maxWidth, contentMinWidth]);
+  useEffect(() => {
+    if (width === void 0 || width === widthRef.current) return;
+    widthRef.current = width;
+    store.patchPlacement(SIDEBAR_ID, { size: { w: width } });
+  }, [store, width]);
+  const onWidthChangeRef = useRef(onWidthChange);
+  onWidthChangeRef.current = onWidthChange;
+  useEffect(
+    () => store.events.on("node.placementChanged", () => {
+      const next = store.getPlacement(SIDEBAR_ID)?.size?.w;
+      if (typeof next !== "number" || next === widthRef.current) return;
+      widthRef.current = next;
+      onWidthChangeRef.current?.(next);
+    }),
+    [store]
+  );
+  const chrome = useMemo(
+    () => ({
+      sidebar: () => /* @__PURE__ */ jsx("div", { className: "lk-trial__sidebar", children: sidebar }),
+      content: () => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: contentClassName ? `lk-trial__content ${contentClassName}` : "lk-trial__content",
+          children
+        }
+      )
+    }),
+    [sidebar, children, contentClassName]
+  );
+  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES, children: /* @__PURE__ */ jsx(
+    Container,
+    {
+      parentId: ZONE_ID,
+      chrome,
+      className: "lk-trial__panes windease-zone",
+      affordances: true,
+      viewport
+    }
+  ) }) });
 }
 var TrialDragContext = createContext(null);
 function useTrialDrag() {
@@ -2692,6 +2771,7 @@ function TrialChrome({
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] TrialChrome requires <LabStoreProvider>");
   const updateTrialView = useStore(storeCtx.store, (s) => s.updateTrialView);
+  const updateTrialSidebarWidth = useStore(storeCtx.store, (s) => s.updateTrialSidebarWidth);
   const updateTrialConfig = useStore(storeCtx.store, (s) => s.updateTrialConfig);
   const updateTrialState = useStore(storeCtx.store, (s) => s.updateTrialState);
   const undockPanelAction = useStore(storeCtx.store, (s) => s.undockPanel);
@@ -2805,21 +2885,29 @@ function TrialChrome({
         /* @__PURE__ */ jsx("div", { className: "lk-trial__toolbar", children: /* @__PURE__ */ jsx(ToolbarRegion, { contributions: inRegion("toolbar"), ctx }) }),
         /* @__PURE__ */ jsxs("div", { className: "lk-trial__body", children: [
           /* @__PURE__ */ jsx(PaletteRegion, { contributions: inRegion("palette"), ctx }),
-          /* @__PURE__ */ jsxs("div", { className: "lk-trial__sidebar", children: [
-            /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }),
-            /* @__PURE__ */ jsx(
-              UndockedSections,
-              {
-                trialId,
-                sections: inRegion("sidebar").filter((c2) => undockedIds.includes(c2.id)),
-                onDock: ctx.dockPanel
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: `lk-trial__content${instrument.canvas ? " lk-trial__content--flush" : ""}`, children: [
-            children,
-            /* @__PURE__ */ jsx(ViewportRegion, { contributions: inRegion("viewport"), ctx })
-          ] })
+          /* @__PURE__ */ jsxs(
+            TrialBody,
+            {
+              width: record.sidebarWidth,
+              onWidthChange: (w3) => updateTrialSidebarWidth(trialId, w3),
+              contentClassName: instrument.canvas ? "lk-trial__content--flush" : void 0,
+              sidebar: /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }),
+                /* @__PURE__ */ jsx(
+                  UndockedSections,
+                  {
+                    trialId,
+                    sections: inRegion("sidebar").filter((c2) => undockedIds.includes(c2.id)),
+                    onDock: ctx.dockPanel
+                  }
+                )
+              ] }),
+              children: [
+                children,
+                /* @__PURE__ */ jsx(ViewportRegion, { contributions: inRegion("viewport"), ctx })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "lk-trial__status", children: [
           job ? /* @__PURE__ */ jsx(JobProgress, { job }) : null,
@@ -2833,7 +2921,7 @@ function Trial({ id, chrome, suppress }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] <Trial> requires <LabStoreProvider>");
-  const record = useStore(storeCtx.store, (s) => s.trials.find((w2) => w2.id === id));
+  const record = useStore(storeCtx.store, (s) => s.trials.find((w3) => w3.id === id));
   if (!record) {
     return /* @__PURE__ */ jsxs("div", { className: "lk-trial lk-trial--unknown", children: [
       "Trial not found: ",
@@ -2885,12 +2973,12 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const maxDepth = undoCap?.maxDepth ?? 50;
   const snapshotIfNeeded = (event) => {
     if (!undoCap || !undoEvents.has(event)) return;
-    const current = store.getState().trials.find((w2) => w2.id === record.id);
+    const current = store.getState().trials.find((w3) => w3.id === record.id);
     if (!current) return;
     const snap = structuredClone(current.state);
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
-  const setView = (v) => updateTrialView(record.id, v);
+  const setView = (v2) => updateTrialView(record.id, v2);
   const placeView = (size) => {
     const declared = instrument.canvas?.initialView;
     if (typeof declared !== "function") return;
@@ -3030,7 +3118,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
     if (declared == null) return null;
     return resolveLoupe(typeof declared === "function" ? declared(record.config) : declared);
   }, [instrument.loupe, record.config]);
-  const loupeBindings = loupeCap ? { on: loupeOn, toggle: () => setLoupeOn((v) => !v) } : void 0;
+  const loupeBindings = loupeCap ? { on: loupeOn, toggle: () => setLoupeOn((v2) => !v2) } : void 0;
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
@@ -3237,7 +3325,7 @@ function addTrial(trials, instruments, instrumentName) {
   return [...trials, record];
 }
 function cloneTrial(trials, id) {
-  const sourceIdx = trials.findIndex((w2) => w2.id === id);
+  const sourceIdx = trials.findIndex((w3) => w3.id === id);
   const source = trials[sourceIdx];
   if (!source) return trials;
   const clone = {
@@ -3252,11 +3340,11 @@ function cloneTrial(trials, id) {
 }
 function closeTrial(trials, id) {
   if (trials.length <= 1) return trials;
-  const next = trials.filter((w2) => w2.id !== id);
+  const next = trials.filter((w3) => w3.id !== id);
   return next.length === trials.length ? trials : next;
 }
 function resetTrial(trials, id, instruments) {
-  const idx = trials.findIndex((w2) => w2.id === id);
+  const idx = trials.findIndex((w3) => w3.id === id);
   const current = trials[idx];
   if (!current) return trials;
   const instrument = findInstrument(instruments, current.instrumentName);
@@ -3271,17 +3359,22 @@ function resetTrial(trials, id, instruments) {
   return [...trials.slice(0, idx), reset, ...trials.slice(idx + 1)];
 }
 function reorderTrials(trials, ids) {
-  const byId = new Map(trials.map((w2) => [w2.id, w2]));
-  const named = ids.map((id) => byId.get(id)).filter((w2) => w2 !== void 0);
-  const seen = new Set(named.map((w2) => w2.id));
-  const rest = trials.filter((w2) => !seen.has(w2.id));
+  const byId = new Map(trials.map((w3) => [w3.id, w3]));
+  const named = ids.map((id) => byId.get(id)).filter((w3) => w3 !== void 0);
+  const seen = new Set(named.map((w3) => w3.id));
+  const rest = trials.filter((w3) => !seen.has(w3.id));
   return [...named, ...rest];
 }
 var MODES = [
-  { value: "auto", label: "Auto" },
-  { value: "light", label: "Light" },
-  { value: "dark", label: "Dark" }
+  { value: "auto", label: "Auto", glyph: /* @__PURE__ */ jsx(E, { size: 14 }) },
+  { value: "light", label: "Light", glyph: /* @__PURE__ */ jsx(w, { size: 14 }) },
+  { value: "dark", label: "Dark", glyph: /* @__PURE__ */ jsx(T, { size: 14 }) }
 ];
+var MODE_ITEMS = MODES.map(({ value, label, glyph }) => ({
+  value,
+  label: glyph,
+  ariaLabel: label
+}));
 function LabHeader() {
   const lab = useLabContext();
   const only = lab.instruments.length === 1 ? lab.instruments[0] : null;
@@ -3315,11 +3408,13 @@ function LabHeader() {
       )
     ),
     /* @__PURE__ */ jsx(
-      r2,
+      r3,
       {
         className: "lk-lab-header__mode",
         ariaLabel: "Color mode",
-        items: MODES,
+        size: "sm",
+        variant: "flat",
+        items: MODE_ITEMS,
         value: lab.mode,
         onChange: (next) => {
           if (next) lab.setMode(next);
@@ -3376,8 +3471,8 @@ function LabShell({ title, children, header, footer, mode = "auto" }) {
   ] });
   return outer ? shell : /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, mode: resolved, children: shell });
 }
-var ZONE_ID = asNodeId("lk-workspace");
-var STRATEGIES = { grid: gridStrategy, floating: floatingStrategy };
+var ZONE_ID2 = asNodeId("lk-workspace");
+var STRATEGIES2 = { grid: gridStrategy, floating: floatingStrategy };
 var FLOAT_ZONE_ID = asNodeId("lk-workspace-floating");
 var PANEL_KIND = "panel";
 var KIND = "trial";
@@ -3431,7 +3526,7 @@ function Workspace({
     store2.registerNode(
       createNode({
         kind: "zone",
-        id: ZONE_ID,
+        id: ZONE_ID2,
         container: { strategyId: "grid", config: { resizable, gap, padding } }
       })
     );
@@ -3447,10 +3542,10 @@ function Workspace({
   const store = storeRef.current;
   const surface = useSurfaceOptional();
   useLayoutEffect(() => {
-    store.updateContainerConfig(ZONE_ID, { resizable, gap, padding });
+    store.updateContainerConfig(ZONE_ID2, { resizable, gap, padding });
   }, [store, resizable, gap, padding]);
   useLayoutEffect(() => {
-    const present = new Set(store.getContainerView(ZONE_ID)?.childOrder ?? []);
+    const present = new Set(store.getContainerView(ZONE_ID2)?.childOrder ?? []);
     const wanted = new Set(nodeIds);
     for (const id of present) {
       if (!wanted.has(id)) store.unregisterNode(id);
@@ -3458,12 +3553,12 @@ function Workspace({
     for (const id of nodeIds) {
       if (present.has(id)) continue;
       const kind = String(id).startsWith("lk-panel-") ? PANEL_KIND : KIND;
-      store.registerNode(createNode({ kind, id, parentId: ZONE_ID, focus: true }));
+      store.registerNode(createNode({ kind, id, parentId: ZONE_ID2, focus: true }));
       store.showNode(id);
       const saved = layoutRef.current?.[id];
       if (saved) store.patchPlacement(id, saved);
     }
-    store.setChildOrder(ZONE_ID, [...nodeIds]);
+    store.setChildOrder(ZONE_ID2, [...nodeIds]);
   }, [store, nodeIds]);
   useEffect(() => {
     if (!surface) return;
@@ -3474,7 +3569,7 @@ function Workspace({
     if (!onLayoutChange) return;
     return store.events.on("node.placementChanged", () => {
       const next = {};
-      for (const child of store.getChildren(ZONE_ID)) {
+      for (const child of store.getChildren(ZONE_ID2)) {
         const extent = extentOf(store, child.id);
         if (extent) next[child.id] = extent;
       }
@@ -3510,7 +3605,7 @@ function Workspace({
   const grid = /* @__PURE__ */ jsx(
     Container,
     {
-      parentId: ZONE_ID,
+      parentId: ZONE_ID2,
       chrome,
       className: "lk-workspace windease-zone",
       affordances: resizable,
@@ -3518,7 +3613,7 @@ function Workspace({
       onChildOrderChange: reorderable ? commitOrder : void 0
     }
   );
-  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES, children: floatingLayer ? (
+  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES2, children: floatingLayer ? (
     // The floating layer insets against the workspace, so it needs a
     // positioned box around both. Without one it insets against the page
     // and lands over the lab header.
@@ -3601,12 +3696,12 @@ function Lab({
   const onFrame = useCallback((frame) => {
     const c2 = ownCanvasRef.current;
     if (!c2) 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) return;
-    bufferRef.current = { w: w2, h };
-    c2.width = w2;
-    c2.height = h;
+    const w3 = Math.round(frame.size.width * frame.dpr);
+    const h2 = Math.round(frame.size.height * frame.dpr);
+    if (bufferRef.current.w === w3 && bufferRef.current.h === h2) return;
+    bufferRef.current = { w: w3, h: h2 };
+    c2.width = w3;
+    c2.height = h2;
     c2.style.width = `${frame.size.width}px`;
     c2.style.height = `${frame.size.height}px`;
     surfaceRef.current?.invalidateAll();
@@ -3631,8 +3726,8 @@ function Lab({
   }, [mode, store]);
   const contextValue = useMemo(() => {
     const replaceTrials = (next) => {
-      const currentById = new Map(store.getState().trials.map((w2) => [w2.id, w2]));
-      const merged = next.map((w2) => currentById.get(w2.id) ?? w2);
+      const currentById = new Map(store.getState().trials.map((w3) => [w3.id, w3]));
+      const merged = next.map((w3) => currentById.get(w3.id) ?? w3);
       store.setState({ trials: merged });
       store.getState().setMode(store.getState().mode);
     };
@@ -3656,11 +3751,11 @@ function Lab({
       },
       resetTrial: (id) => {
         const next = resetTrial(store.getState().trials, id, instruments);
-        const record = next.find((w2) => w2.id === id);
+        const record = next.find((w3) => w3.id === id);
         if (!record) return;
         store.setState((s) => ({
           trials: s.trials.map(
-            (w2) => w2.id === id ? { ...w2, config: record.config, state: record.state, view: record.view } : w2
+            (w3) => w3.id === id ? { ...w3, config: record.config, state: record.state, view: record.view } : w3
           )
         }));
         store.getState().updateTrialView(id, record.view);
@@ -3677,8 +3772,8 @@ function Lab({
         store.getState().deleteSnapshot(snapshotId);
       },
       mode: modeValue,
-      setMode: (m2) => {
-        store.getState().setMode(m2);
+      setMode: (m) => {
+        store.getState().setMode(m);
       },
       configRules,
       controls
@@ -3728,13 +3823,13 @@ function Lab({
                   Workspace,
                   {
                     panels: workspacePanels,
-                    ids: trials.map((w2) => w2.id),
+                    ids: trials.map((w3) => w3.id),
                     resizable: true,
                     reorderable: true,
                     onReorder: (ids) => contextValue.reorderTrials(ids),
                     layout,
                     onLayoutChange: (next) => store.getState().setLayout(next),
-                    children: trials.map((w2) => /* @__PURE__ */ jsx(Trial, { id: w2.id, chrome, suppress }, w2.id))
+                    children: trials.map((w3) => /* @__PURE__ */ jsx(Trial, { id: w3.id, chrome, suppress }, w3.id))
                   }
                 )
               ]
@@ -3746,6 +3841,6 @@ function Lab({
   ) }) });
 }
 
-export { AnnotationOverlay, AnnotationTargets, DEFAULT_VIEW, Lab, LabContext, LabPalette, LabShell, PITCH_LIMIT, Trial, TrialChrome, Workspace, addTrial, annotationsFromJSON, applyRules, as2DView, builtinRules, capturePlan, captureTarget, clampPitch, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, defineInstrument, f, fitView, fracContains, fracIntersects, fracToWorld, fromWeaselView, interstellarTheme, isStale, markCommands, markSvgNodes, orbitAfterDrag, orbitAfterWheel, reorderTrials, resetTrial, resolveConfigSchema, resolveMarkStyle, roundFrac, seenFrom, titleCase, toWeaselView, useConfigSchema, useLabContext, useOrbit, validateConfigSchema, worldToFrac, wrapYaw };
+export { AnnotationOverlay, AnnotationTargets, DEFAULT_VIEW, Lab, LabContext, LabPalette, LabShell, Trial, TrialBody, TrialChrome, Workspace, addTrial, annotationsFromJSON, applyRules, as2DView, builtinRules, capturePlan, captureTarget, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, defineInstrument, f, fitView, fracContains, fracIntersects, fracToWorld, fromWeaselView, interstellarTheme, isStale, markCommands, markSvgNodes, reorderTrials, resetTrial, resolveConfigSchema, resolveMarkStyle, roundFrac, seenFrom, titleCase, toWeaselView, useConfigSchema, useLabContext, validateConfigSchema, worldToFrac };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map