@weasel-js/labkit 1.4.1 → 1.4.3

package/dist/index.js

@@ -1,35 +1,38 @@
 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-D7QIPGEB.js';
-import { useSurfaceOptional, useSurfaceCanvas, useTileId, useTiledSurface, SurfaceContext, SurfaceCanvasContext } from './chunk-OFCBEZMU.js';
-export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTiledSurface } from './chunk-OFCBEZMU.js';
+import { useDragDrop, DragOverlay, Palette } from './chunk-RS3HRQWU.js';
+import { useSurfaceOptional, useSurfaceCanvas, useTileId, useTiledSurface, SurfaceContext, SurfaceCanvasContext } from './chunk-FQMJUVHJ.js';
+export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTiledSurface } from './chunk-FQMJUVHJ.js';
 import { useJob } from './chunk-HXXTULDN.js';
 export { useJob } from './chunk-HXXTULDN.js';
-import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, AnnotationsContext } from './chunk-BMQWLKOL.js';
-export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationsContext, ExportMenu, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, mergeContributions, suppressContributions, useAnnotations, useAnnotationsOptional } from './chunk-BMQWLKOL.js';
-import { JobProgress } from './chunk-7TRFMIWX.js';
-export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-7TRFMIWX.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-MSR7EVS6.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 { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, AnnotationsContext } from './chunk-C42T6DJT.js';
+export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationsContext, ExportMenu, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, mergeContributions, suppressContributions, useAnnotations, useAnnotationsOptional } from './chunk-C42T6DJT.js';
+import { JobProgress } from './chunk-QAGAHJKZ.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-QAGAHJKZ.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-2RQPGOQF.js';
+import { createLabStore, panelKey, noneAdapter } from './chunk-5TROQVQ2.js';
+export { CURRENT_DOCUMENT_VERSION, createMemoryAdapter, dockPanel, labDocumentKey, localStorageAdapter, noneAdapter, panelKey, quarantineKey, sessionStorageAdapter, undockPanel, urlHashAdapter, useTrialState } from './chunk-5TROQVQ2.js';
 import { LabStoreContext, TrialIdProvider } from './chunk-2YILQ7Y5.js';
 export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
-import { fromConfigFields } from './chunk-53AZ2O2N.js';
-export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-53AZ2O2N.js';
-import { CanvasStack } from './chunk-PP7ZWAMV.js';
-export { CanvasStack, PITCH_LIMIT, clampPitch, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-PP7ZWAMV.js';
-import { LayerList } from './chunk-MIT3ISW4.js';
-export { LayerList } from './chunk-MIT3ISW4.js';
+import { fromConfigFields } from './chunk-ASWKLRKJ.js';
+export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-ASWKLRKJ.js';
+import { hasConfigPath, schemaNodeAtPath, withValueAtPath, fillConfigDefaults } from './chunk-E44SU6XS.js';
+export { fillConfigDefaults, hasConfigPath, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-E44SU6XS.js';
+import { CanvasStack } from './chunk-I6JCVE24.js';
+export { CanvasStack, PITCH_LIMIT, clampPitch, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-I6JCVE24.js';
+import { LayerList } from './chunk-ISCOFAUO.js';
+export { LayerList } from './chunk-ISCOFAUO.js';
 import './chunk-SBXNQW4G.js';
-import { E, w, T, C, p, r3 } from './chunk-J6SBFZYT.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, _2 as Subpanel, j2 as TextRow, P2 as ToggleRow } from './chunk-J6SBFZYT.js';
-import { resolveLoupe, TrialLoupe } from './chunk-RLOXQZW3.js';
-export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-RLOXQZW3.js';
+import { E, w, T, C, g, r6 } from './chunk-MHAGC6VD.js';
+export { M2 as CheckboxRow, j2 as ColorRow, y3 as CurveField, R as EffectCard, B as EffectCardList, c3 as LayerStack, P2 as NumberRow, V as PropertyGroup, T2 as PropertyList, w2 as PropertyPanel, D as PropertyRow, E2 as PropertySpan, F as SelectRow, k as SliderRow, L2 as Subpanel, N2 as TextRow, I as ToggleRow } from './chunk-MHAGC6VD.js';
+import { resolveLoupe, TrialLoupe } from './chunk-TJ7QY3OC.js';
+export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-TJ7QY3OC.js';
 export { centerOn, zoomAt } from './chunk-CTRKTLYZ.js';
 import { 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-DG2IFMLA.js';
+import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext, resolveStrokeWidth, getMarker, getPaintKind, boundsOfPath, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, SCRIPT_METRICS } from '@weasel-js/core';
+import { tileGeometry } from '@weasel-js/core/patterns-builtin';
 import { createContext, useState, useRef, useEffect, useContext, useMemo, Children, useLayoutEffect, useCallback, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -37,16 +40,15 @@ import { useStore } from 'zustand/react';
 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];
-function multiply(a, b2) {
+function multiply(a, b) {
   return [
-    a[0] * b2[0] + a[2] * b2[1],
-    a[1] * b2[0] + a[3] * b2[1],
-    a[0] * b2[2] + a[2] * b2[3],
-    a[1] * b2[2] + a[3] * b2[3],
-    a[0] * b2[4] + a[2] * b2[5] + a[4],
-    a[1] * b2[4] + a[3] * b2[5] + a[5]
+    a[0] * b[0] + a[2] * b[1],
+    a[1] * b[0] + a[3] * b[1],
+    a[0] * b[2] + a[2] * b[3],
+    a[1] * b[2] + a[3] * b[3],
+    a[0] * b[4] + a[2] * b[5] + a[4],
+    a[1] * b[4] + a[3] * b[5] + a[5]
   ];
 }
 function isIdentity(m, eps = 1e-9) {
@@ -108,8 +110,8 @@ function escapeAttr(s) {
 }
 function serializePathD(path) {
   if (path.kind === "rect") {
-    const { x: x2, y, width, height } = path;
-    return `M${trimNumber(x2)} ${trimNumber(y)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}Z`;
+    const { x, y: y2, width, height } = path;
+    return `M${trimNumber(x)} ${trimNumber(y2)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}Z`;
   }
   const cmds = path.commands;
   const xs = path.coords;
@@ -395,9 +397,9 @@ function pathXml(node, registry, namespaces) {
     attrs.push(`opacity="${trimNumber(node.opacity)}"`);
   }
   if (node.rotation != null && node.rotation !== 0) {
-    const b2 = pathBounds(node.path);
-    const cx = b2.minX + (b2.maxX - b2.minX) / 2;
-    const cy = b2.minY + (b2.maxY - b2.minY) / 2;
+    const b = pathBounds(node.path);
+    const cx = b.minX + (b.maxX - b.minX) / 2;
+    const cy = b.minY + (b.maxY - b.minY) / 2;
     const deg = node.rotation * 180 / Math.PI;
     attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
   }
@@ -421,17 +423,18 @@ function paintAttrs(paint, name, registry, includeOpacity = true) {
   return [`${name}="url(#${id})"`];
 }
 function coreStrokeAttrs(stroke, registry) {
-  if (!stroke) return [];
+  const paint = stroke?.paint;
+  if (!stroke || !paint) return [];
   const width = resolveStrokeWidth(stroke.width ?? 1, 1);
   if (!(width > 0)) return [];
   const attrs = [];
-  if ("color" in stroke.paint) {
-    attrs.push(`stroke="${stroke.paint.color}"`);
-    if (stroke.paint.opacity != null && stroke.paint.opacity !== 1) {
-      attrs.push(`stroke-opacity="${trimNumber(stroke.paint.opacity)}"`);
+  if ("color" in paint) {
+    attrs.push(`stroke="${paint.color}"`);
+    if (paint.opacity != null && paint.opacity !== 1) {
+      attrs.push(`stroke-opacity="${trimNumber(paint.opacity)}"`);
     }
   } else {
-    attrs.push(`stroke="url(#${registry.register(stroke.paint)})"`);
+    attrs.push(`stroke="url(#${registry.register(paint)})"`);
   }
   attrs.push(`stroke-width="${trimNumber(width)}"`);
   if (stroke.cap) attrs.push(`stroke-linecap="${stroke.cap}"`);
@@ -494,11 +497,11 @@ function computeBounds(nodes) {
       n.children.forEach((c2) => visit(c2, childCtm));
       return;
     }
-    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, y] of corners(b2)) {
-      const px = local[0] * x2 + local[2] * y + local[4];
-      const py = local[1] * x2 + local[3] * y + local[5];
+    const b = n.kind === "text" || n.kind === "image" ? { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height } : pathBounds(n.path);
+    const local = n.rotation ? rotateAboutCenter(ctm, b, n.rotation) : ctm;
+    for (const [x, y2] of corners(b)) {
+      const px = local[0] * x + local[2] * y2 + local[4];
+      const py = local[1] * x + local[3] * y2 + local[5];
       if (px < minX) minX = px;
       if (py < minY) minY = py;
       if (px > maxX) maxX = px;
@@ -511,12 +514,12 @@ function computeBounds(nodes) {
   }
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
-function corners(b2) {
-  return [[b2.minX, b2.minY], [b2.maxX, b2.minY], [b2.maxX, b2.maxY], [b2.minX, b2.maxY]];
+function corners(b) {
+  return [[b.minX, b.minY], [b.maxX, b.minY], [b.maxX, b.maxY], [b.minX, b.maxY]];
 }
-function rotateAboutCenter(ctm, b2, angle) {
-  const cx = (b2.minX + b2.maxX) / 2;
-  const cy = (b2.minY + b2.maxY) / 2;
+function rotateAboutCenter(ctm, b, angle) {
+  const cx = (b.minX + b.maxX) / 2;
+  const cy = (b.minY + b.maxY) / 2;
   const c2 = Math.cos(angle);
   const s = Math.sin(angle);
   return multiply(ctm, [c2, s, -s, c2, cx - cx * c2 + cy * s, cy - cx * s - cy * c2]);
@@ -549,7 +552,9 @@ function textXml(node, registry, namespaces) {
   }
   const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
   if (decoration) attrs.push(`text-decoration="${decoration}"`);
-  if (node.fill) {
+  if (node.fill === null) {
+    attrs.push('fill="none"');
+  } else if (node.fill) {
     if ("color" in node.fill) {
       attrs.push(`fill="${node.fill.color}"`);
       if (node.fill.opacity != null && node.fill.opacity !== 1) {
@@ -628,34 +633,32 @@ function pathBounds(path) {
       maxY: path.y + path.height
     };
   }
-  const b2 = boundsOfPath(path);
-  return { minX: b2.x, minY: b2.y, maxX: b2.x + b2.width, maxY: b2.y + b2.height };
+  const b = boundsOfPath(path);
+  return { minX: b.x, minY: b.y, maxX: b.x + b.width, maxY: b.y + b.height };
 }
-
-// src/annotations/paint.ts
 var MARK_COLOR = "#e5484d";
 var MARK_WIDTH = 2;
 var TEXT_SIZE = 14;
-var toWorld = (p2, content) => ({
-  x: p2.x * content.w,
-  y: p2.y * content.h
+var toWorld = (p, content) => ({
+  x: p.x * content.w,
+  y: p.y * content.h
 });
 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, width, height } = m.pose;
+  if (stored && stored.length >= 2) return stored.map((p) => toWorld(p, content));
+  const { x, y: y2, width, height } = m.pose;
   return [
-    { x: x2, y },
-    { x: x2 + width, y: y + height }
+    { x, y: y2 },
+    { x: x + width, y: y2 + height }
   ];
 }
 function polyline(points) {
-  const b2 = new PathBuilder();
+  const b = new PathBuilder();
   const first = points[0];
   if (!first) return rectPath(0, 0, 0, 0);
-  b2.moveTo(first.x, first.y);
-  for (const p2 of points.slice(1)) b2.lineTo(p2.x, p2.y);
-  return b2.build();
+  b.moveTo(first.x, first.y);
+  for (const p of points.slice(1)) b.lineTo(p.x, p.y);
+  return b.build();
 }
 function markCommands(m, content, style = {}) {
   const color = style.color ?? MARK_COLOR;
@@ -674,13 +677,13 @@ function markCommands(m, content, style = {}) {
     case "ellipse":
       return [{ kind: "path", path: ellipsePath(m.pose), stroke }];
     case "line": {
-      const [a, b2] = vertices(m, content);
-      return [{ kind: "path", path: linePath(a, b2), stroke }];
+      const [a, b] = vertices(m, content);
+      return [{ kind: "path", path: linePath(a, b), stroke }];
     }
     case "arrow": {
-      const [a, b2] = vertices(m, content);
+      const [a, b] = vertices(m, content);
       const marked = { ...stroke, markerEnd: "arrow" };
-      const path = linePath(a, b2);
+      const path = linePath(a, b);
       return [
         { kind: "path", path, stroke: marked },
         ...markerDrawCommands(path, marked, MARK_WIDTH, void 0)
@@ -742,8 +745,6 @@ function resolveMarkStyle(data, opts) {
     stale: isStale(data.seen, opts.config, opts.positionDependsOn ?? [])
   };
 }
-
-// src/annotations/svgNodes.ts
 var NO_PAINT = { kind: "none" };
 function toSvgPaint(paint) {
   if (!paint) return NO_PAINT;
@@ -799,7 +800,7 @@ function capturePlan(base, format) {
   if (format === "svg") return "svg-document";
   return base?.kind === "svg" ? "svg-document" : "raster-stack";
 }
-function nestBaseSvg(markup, w3, h2) {
+function nestBaseSvg(markup, w3, h) {
   const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
   const root = doc.documentElement;
   if (doc.getElementsByTagName("parsererror").length > 0 || root.localName !== "svg") {
@@ -808,16 +809,16 @@ function nestBaseSvg(markup, w3, h2) {
   root.setAttribute("x", "0");
   root.setAttribute("y", "0");
   root.setAttribute("width", String(w3));
-  root.setAttribute("height", String(h2));
+  root.setAttribute("height", String(h));
   return new XMLSerializer().serializeToString(root);
 }
-function embedRasterBase(base, w3, h2, onWarn) {
+function embedRasterBase(base, w3, h, onWarn) {
   const href = base.kind === "canvas" ? base.canvas.toDataURL() : base.kind === "image" ? base.src : "";
   if (base.kind === "image" && !href.startsWith("data:")) {
     onWarn?.(`base image '${href}' is a reference, so this SVG is not self-contained`);
   }
-  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w3, height: h2 }], {
-    viewBox: { x: 0, y: 0, width: w3, height: h2 }
+  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w3, height: h }], {
+    viewBox: { x: 0, y: 0, width: w3, height: h }
   });
 }
 function markNodesOf(scene, draw) {
@@ -833,15 +834,15 @@ function markNodesOf(scene, draw) {
 }
 function composeCaptureSvg(args) {
   const { base, scene, draw, scale, onWarn } = args;
-  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 { w: w3, h } = draw.content;
+  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w3, h) : embedRasterBase(base, w3, h, onWarn);
   const marksXml = serializeSvg(markNodesOf(scene, draw), {
-    viewBox: { x: 0, y: 0, width: w3, height: h2 },
+    viewBox: { x: 0, y: 0, width: w3, height: h },
     onWarn
   });
   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>`;
+  const outH = Math.max(1, Math.round(h * scale));
+  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w3} ${h}">${baseXml}${marksXml}</svg>`;
 }
 function context2d(width, height) {
   const canvas = document.createElement("canvas");
@@ -1041,8 +1042,6 @@ function drop(stack, value) {
     }
   }
 }
-
-// src/annotations/store.ts
 function createAnnotationScene() {
   return createScene({ systemLayers: [{ id: "marks" }] });
 }
@@ -1265,17 +1264,17 @@ function annotationsFromJSON(raw, targets, rest = {}) {
 }
 
 // src/annotations/view.ts
-function toWeaselView(v2) {
-  return { x: v2.pan.x, y: v2.pan.y, scale: { x: v2.zoom, y: v2.zoom } };
+function toWeaselView(v) {
+  return { x: v.pan.x, y: v.pan.y, scale: { x: v.zoom, y: v.zoom } };
 }
-function fromWeaselView(v2) {
-  return { zoom: v2.scale.x, pan: { x: v2.x, y: v2.y } };
+function fromWeaselView(v) {
+  return { zoom: v.scale.x, pan: { x: v.x, y: v.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 = (a, b2) => a !== null && a.x === b2.x && a.y === b2.y && a.w === b2.w && a.h === b2.h;
+var sameRect = (a, b) => a !== null && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
 function ToolBridge({ toolId }) {
   const tools = useActiveToolContext();
   const setActive = tools.setActive;
@@ -1285,9 +1284,9 @@ function ToolBridge({ toolId }) {
   return null;
 }
 function pointsOf(extras, content) {
-  const toFrac = (p2) => ({
-    x: content.w === 0 ? 0 : p2.x / content.w,
-    y: content.h === 0 ? 0 : p2.y / content.h
+  const toFrac = (p) => ({
+    x: content.w === 0 ? 0 : p.x / content.w,
+    y: content.h === 0 ? 0 : p.y / content.h
   });
   if (extras.kind === "line") {
     return [toFrac(extras.a), toFrac(extras.b)];
@@ -1411,10 +1410,11 @@ function AnnotationTargets({
   capability,
   state,
   config,
+  trial,
   annotations,
   activeToolId
 }) {
-  const targets = capability.targets(state, config);
+  const targets = capability.targets(state, config, trial);
   return /* @__PURE__ */ jsx(Fragment, { children: targets.map((t) => /* @__PURE__ */ jsx(
     AnnotationOverlay,
     {
@@ -1429,6 +1429,9 @@ function AnnotationTargets({
 }
 
 // src/config/builder.ts
+function isConfigBranch(entry) {
+  return "children" in entry;
+}
 var BaseNode = class {
   constructor(defaultValue, annotations = {}, options = {}) {
     this.annotations = annotations;
@@ -1468,9 +1471,10 @@ var BaseNode = class {
   pair(pair) {
     return this.ann({ pair });
   }
-  /** Render under a named section heading. */
-  section(section) {
-    return this.opt({ section });
+  /** Render under a named section heading. `collapsed` opens the section
+   *  folded — say it on any one of the section's leaves. */
+  section(label, opts = {}) {
+    return this.opt({ section: { label, ...opts } });
   }
   /** Show this row only while the predicate holds. Presentational — the value
    *  stays in config and the instrument still reads it. */
@@ -1554,6 +1558,45 @@ var CustomNode = class _CustomNode extends BaseNode {
     return new _CustomNode(this.kind, this.default, annotations, options);
   }
 };
+var GroupNode = class _GroupNode {
+  constructor(children, annotations = {}, options = {}) {
+    this.children = children;
+    this.annotations = annotations;
+    this.options = options;
+  }
+  children;
+  annotations;
+  options;
+  with(annotations, options) {
+    return new _GroupNode(this.children, annotations, options);
+  }
+  /** Heading for the group's rows. Defaults to the key, title-cased. */
+  label(name) {
+    return this.with({ ...this.annotations, name }, this.options);
+  }
+  /** Longer help text. Carried on the resolved `PrefGroup`, where weasel-ui's
+   *  `PrefsForm` draws it under the heading; `ControlPanel` has no place for
+   *  it yet and shows the heading alone. */
+  describe(description) {
+    return this.with({ ...this.annotations, description }, this.options);
+  }
+  /** Render this whole group under a named section heading. */
+  section(label, opts = {}) {
+    return this.with(this.annotations, { ...this.options, section: { label, ...opts } });
+  }
+  /** Show this group only while the predicate holds. Presentational — every
+   *  value beneath it stays in config and the instrument still reads it. */
+  showIf(predicate) {
+    return this.with(this.annotations, { ...this.options, showIf: predicate });
+  }
+};
+function shapeDefaults(shape) {
+  const out = {};
+  for (const [key, entry] of Object.entries(shape)) {
+    out[key] = isConfigBranch(entry) ? shapeDefaults(entry.children) : entry.default;
+  }
+  return out;
+}
 var expand = (options) => options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
 var f = {
   number: (def) => new NumberNode(def),
@@ -1567,18 +1610,15 @@ var f = {
   /** A leaf with no declared kind: the rule chain decides, which is how a lab
    *  states a convention like "every `*Color` key is a color picker". */
   value: (def) => new ValueNode(def),
+  /** A branch: its children nest under this key, so `grid: f.group({ size })`
+   *  puts the value at `config.grid.size` and addresses it as `'grid.size'`.
+   *  Groups nest as deeply as the schema wants. */
+  group: (children) => new GroupNode(children),
   /** A leaf of a kind a lab supplies the control for, through `controls`. */
   custom: (kind, def, validate) => new CustomNode(kind, def, {}, validate ? { validate } : {}),
-  /** Collect leaves into an instrument's config. */
+  /** Collect leaves and groups into an instrument's config. */
   schema(nodes) {
-    return {
-      nodes,
-      defaults: () => {
-        const out = {};
-        for (const [key, node] of Object.entries(nodes)) out[key] = node.default;
-        return out;
-      }
-    };
+    return { nodes, defaults: () => shapeDefaults(nodes) };
   }
 };
 
@@ -1610,9 +1650,9 @@ function applyRules(seed, ctx, rules) {
   for (const rule of rules) {
     const patch = rule({ ...ctx, leaf: acc });
     if (patch === null) continue;
-    for (const [k2, v2] of Object.entries(patch)) {
-      if (v2 !== void 0 && acc[k2] === void 0) {
-        acc[k2] = v2;
+    for (const [k2, v] of Object.entries(patch)) {
+      if (v !== void 0 && acc[k2] === void 0) {
+        acc[k2] = v;
       }
     }
   }
@@ -1622,40 +1662,59 @@ function applyRules(seed, ctx, rules) {
 // src/config/resolve.ts
 function defined(annotations) {
   const out = {};
-  for (const [k2, v2] of Object.entries(annotations)) if (v2 !== void 0) out[k2] = v2;
+  for (const [k2, v] of Object.entries(annotations)) if (v !== void 0) out[k2] = v;
   return out;
 }
 function resolveConfigSchema(schema, rules = []) {
+  const sink = {
+    sections: [],
+    showIf: /* @__PURE__ */ new Map(),
+    renderers: {},
+    chain: [...rules, ...builtinRules]
+  };
+  const group = resolveShape(schema.nodes, "", "", sink);
+  return { group, sections: sink.sections, showIf: sink.showIf, renderers: sink.renderers };
+}
+function resolveShape(shape, at, name, sink) {
   const children = {};
-  const sectionOrder = [];
-  const sectionPaths = /* @__PURE__ */ new Map();
-  const showIf = /* @__PURE__ */ new Map();
-  const renderers = {};
-  const chain2 = [...rules, ...builtinRules];
-  for (const [key, node] of Object.entries(schema.nodes)) {
-    const seed = defined({
-      ...node.annotations,
-      ...node.kind === null ? {} : { kind: node.kind }
-    });
-    const patch = applyRules(seed, { key, path: key, default: node.default }, chain2);
-    children[key] = { ...patch, default: node.default };
-    const { section, showIf: predicate, render } = node.options;
+  const sections = /* @__PURE__ */ new Map();
+  for (const [key, entry] of Object.entries(shape)) {
+    const path = at === "" ? key : `${at}.${key}`;
+    children[key] = resolveEntry(entry, key, path, sink);
+    const { section, showIf: predicate } = entry.options;
     if (section !== void 0) {
-      if (!sectionPaths.has(section)) {
-        sectionOrder.push(section);
-        sectionPaths.set(section, []);
+      let spec = sections.get(section.label);
+      if (!spec) {
+        spec = { at, label: section.label, paths: [] };
+        sections.set(section.label, spec);
+        sink.sections.push(spec);
+      }
+      spec.paths.push(path);
+      if (section.collapsed !== void 0) {
+        spec.collapsed = (spec.collapsed ?? false) || section.collapsed;
       }
-      sectionPaths.get(section)?.push(key);
     }
-    if (predicate) showIf.set(key, predicate);
-    if (render) renderers[key] = render;
+    if (predicate) sink.showIf.set(path, predicate);
+    if (!isConfigBranch(entry) && entry.options.render) sink.renderers[path] = entry.options.render;
+  }
+  return { name, children };
+}
+function resolveEntry(entry, key, path, sink) {
+  if (isConfigBranch(entry)) {
+    const group = resolveShape(
+      entry.children,
+      path,
+      entry.annotations.name ?? titleCase(key),
+      sink
+    );
+    return entry.annotations.description === void 0 ? group : { ...group, description: entry.annotations.description };
   }
-  const group = { name: "", children };
-  const sections = sectionOrder.map((label) => ({
-    label,
-    paths: sectionPaths.get(label) ?? []
-  }));
-  return { group, sections, showIf, renderers };
+  const seed = defined({
+    ...entry.annotations,
+    ...entry.kind === null ? {} : { kind: entry.kind }
+  });
+  const patch = applyRules(seed, { key, path, default: entry.default }, sink.chain);
+  return { ...patch, default: entry.default };
 }
 var LabContext = createContext(null);
 function useLabContext() {
@@ -2303,9 +2362,9 @@ function hexToRgba(hex, alpha) {
   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 g = Number.parseInt(full.slice(2, 4), 16);
-  const b2 = Number.parseInt(full.slice(4, 6), 16);
-  return `rgba(${r2}, ${g}, ${b2}, ${alpha})`;
+  const g2 = Number.parseInt(full.slice(2, 4), 16);
+  const b = Number.parseInt(full.slice(4, 6), 16);
+  return `rgba(${r2}, ${g2}, ${b}, ${alpha})`;
 }
 var REF = /^\{([^}]+)\}$/;
 function refTarget(value) {
@@ -2443,17 +2502,36 @@ function useThemeOptional() {
   return useContext(ThemeContext);
 }
 
+// src/instrument/serializers.ts
+function configDefaultsOf(instruments) {
+  const out = {};
+  for (const instrument of instruments) out[instrument.name] = () => instrument.defaultConfig();
+  return out;
+}
+function serializersOf(instruments) {
+  const out = {};
+  for (const instrument of instruments) {
+    const { name, serialize: serialize2, deserialize } = instrument;
+    if (!serialize2 && !deserialize) continue;
+    out[name] = {
+      ...serialize2 ? { serialize: (state) => serialize2(state) } : {},
+      ...deserialize ? { deserialize: (data, config) => deserialize(data, config) } : {}
+    };
+  }
+  return out;
+}
+
 // ../theme/dist/index.js
 var ALPHA_EXT = "com.weasel.alpha";
-var isToken = (v2) => typeof v2 === "object" && v2 !== null && "$value" in v2;
+var isToken = (v) => typeof v === "object" && v !== null && "$value" in v;
 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 g = group;
-    const groupType = g.$type;
-    for (const [leaf, node] of Object.entries(g)) {
+    const g2 = group;
+    const groupType = g2.$type;
+    for (const [leaf, node] of Object.entries(g2)) {
       if (leaf.startsWith("$")) continue;
       if (!isToken(node)) continue;
       const type = node.$type ?? groupType;
@@ -2563,11 +2641,11 @@ 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 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 } };
+  const v = view;
+  if (typeof v.zoom !== "number") return null;
+  if (typeof v.pan !== "object" || v.pan === null) return null;
+  if (typeof v.pan.x !== "number" || typeof v.pan.y !== "number") return null;
+  return { zoom: v.zoom, pan: { x: v.pan.x, y: v.pan.y } };
 }
 var ZONE_ID = asNodeId("lk-trial-body");
 var SIDEBAR_ID = asNodeId("lk-trial-sidebar");
@@ -2671,18 +2749,20 @@ var TrialDragContext = createContext(null);
 function useTrialDrag() {
   return useContext(TrialDragContext);
 }
-function Draggable({ nodeId, title, children }) {
+function Draggable({ nodeId, title, lead, children }) {
   const handlers = useDragHandle(nodeId);
   return /* @__PURE__ */ jsxs("div", { className: "lk-trial__titlebar lk-trial__titlebar--draggable", ...handlers, children: [
+    lead,
     /* @__PURE__ */ jsx("span", { className: "lk-trial__title", children: title }),
     children
   ] });
 }
-function TrialTitleBar({ title, children }) {
+function TrialTitleBar({ title, lead, children }) {
   const drag = useTrialDrag();
   if (drag)
-    return /* @__PURE__ */ jsx(Draggable, { nodeId: drag.nodeId, title, children });
+    return /* @__PURE__ */ jsx(Draggable, { nodeId: drag.nodeId, title, lead, children });
   return /* @__PURE__ */ jsxs("div", { className: "lk-trial__titlebar", children: [
+    lead,
     /* @__PURE__ */ jsx("span", { className: "lk-trial__title", children: title }),
     children
   ] });
@@ -2752,6 +2832,7 @@ function UndockedSections({ trialId, sections, onDock }) {
 }
 var NO_OP = () => {
 };
+var NO_SECTIONS = Object.freeze({});
 function TrialChrome({
   trialId,
   record,
@@ -2772,17 +2853,21 @@ function TrialChrome({
   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 setTrialTitle = useStore(storeCtx.store, (s) => s.setTrialTitle);
+  const setTrialSectionCollapsed = useStore(storeCtx.store, (s) => s.setTrialSectionCollapsed);
   const updateTrialConfig = useStore(storeCtx.store, (s) => s.updateTrialConfig);
   const updateTrialState = useStore(storeCtx.store, (s) => s.updateTrialState);
   const undockPanelAction = useStore(storeCtx.store, (s) => s.undockPanel);
   const dockPanelAction = useStore(storeCtx.store, (s) => s.dockPanel);
   const undockedPanels = useStore(storeCtx.store, (s) => s.undockedPanels);
   const undockedIds = useMemo(
-    () => Object.values(undockedPanels).filter((p2) => p2.trialId === trialId).map((p2) => p2.sectionId),
+    () => Object.values(undockedPanels).filter((p) => p.trialId === trialId).map((p) => p.sectionId),
     [undockedPanels, trialId]
   );
   const view2d = as2DView(record.view);
   const configSchema = useConfigSchema(instrument);
+  const title = record.title ?? record.instrumentName;
+  const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
   const ctx = useMemo(() => {
     const setZoom = (z) => {
       if (!view2d) return;
@@ -2791,6 +2876,8 @@ function TrialChrome({
     return {
       trialId,
       instrumentName: record.instrumentName,
+      title,
+      setTitle: (next) => setTrialTitle(trialId, next),
       isLastTrial,
       zoom: view2d ? view2d.zoom : null,
       setZoom,
@@ -2803,20 +2890,22 @@ function TrialChrome({
       configSchema,
       configFields: instrument.config ? [] : instrument.configSchema?.() ?? [],
       config: record.config,
-      setConfig: (key, value) => {
+      setConfig: (path, value) => {
         const prevConfig = record.config;
-        if (process.env.NODE_ENV !== "production" && !(key in prevConfig)) {
+        if (process.env.NODE_ENV !== "production" && !hasConfigPath(prevConfig, path) && schemaNodeAtPath(configSchema.group, path) === void 0) {
           console.warn(
-            `[labkit] setConfig: unknown key "${key}" for instrument "${record.instrumentName}"`
+            `[labkit] setConfig: unknown path "${path}" for instrument "${record.instrumentName}"`
           );
         }
-        updateTrialConfig(trialId, key, value);
+        updateTrialConfig(trialId, path, value);
         if (instrument.onConfigChange) {
-          const nextConfig = { ...prevConfig, [key]: value };
+          const nextConfig = withValueAtPath(prevConfig, path, value);
           const nextState = instrument.onConfigChange(nextConfig, prevConfig, record.state);
           updateTrialState(trialId, nextState);
         }
       },
+      collapsedSections,
+      setSectionCollapsed: (key, collapsed) => setTrialSectionCollapsed(trialId, key, collapsed),
       undockedPanels: undockedIds,
       undockPanel: (sectionId, as) => undockPanelAction(trialId, sectionId, as),
       dockPanel: (sectionId) => dockPanelAction(trialId, sectionId),
@@ -2834,6 +2923,7 @@ function TrialChrome({
     record,
     instrument,
     lab,
+    title,
     isLastTrial,
     updateTrialView,
     updateTrialConfig,
@@ -2846,7 +2936,10 @@ function TrialChrome({
     configSchema,
     undockedIds,
     undockPanelAction,
-    dockPanelAction
+    dockPanelAction,
+    setTrialTitle,
+    setTrialSectionCollapsed,
+    collapsedSections
   ]);
   const contributions = useMemo(
     () => suppressContributions(
@@ -2877,11 +2970,18 @@ function TrialChrome({
     "section",
     {
       className: "lk-trial",
-      "aria-label": `Trial ${record.instrumentName}`,
+      "aria-label": `Trial ${title}`,
       tabIndex: -1,
       onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsx(TrialTitleBar, { title: record.instrumentName, children: /* @__PURE__ */ jsx(TitleBarRegion, { contributions: inRegion("titlebar"), ctx }) }),
+        /* @__PURE__ */ jsx(
+          TrialTitleBar,
+          {
+            title,
+            lead: /* @__PURE__ */ jsx(TitleBarRegion, { placement: "lead", contributions: inRegion("titlebar"), ctx }),
+            children: /* @__PURE__ */ jsx(TitleBarRegion, { contributions: inRegion("titlebar"), ctx })
+          }
+        ),
         /* @__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 }),
@@ -2978,7 +3078,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
     const snap = structuredClone(current.state);
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
-  const setView = (v2) => updateTrialView(record.id, v2);
+  const setView = (v) => updateTrialView(record.id, v);
   const placeView = (size) => {
     const declared = instrument.canvas?.initialView;
     if (typeof declared !== "function") return;
@@ -2987,7 +3087,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   };
   const annotationsCap = instrument.annotations;
   const targetsRef = useRef(() => []);
-  targetsRef.current = () => annotationsCap ? annotationsCap.targets(record.state, record.config) : [];
+  targetsRef.current = () => annotationsCap ? annotationsCap.targets(record.state, record.config, { id: record.id, view: record.view }) : [];
   const annotationsRef = useRef(null);
   const configRef = useRef(record.config);
   configRef.current = record.config;
@@ -3063,11 +3163,11 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       updateTrialState(record.id, next);
       bus.emit("state.change");
     },
-    setConfig: (key, value) => {
-      const evt = `config.change:${String(key)}`;
+    setConfig: (path, value) => {
+      const evt = `config.change:${path}`;
       snapshotIfNeeded("config.change");
       snapshotIfNeeded(evt);
-      updateTrialConfig(record.id, key, value);
+      updateTrialConfig(record.id, path, value);
       bus.emit("config.change");
       bus.emit(evt);
     },
@@ -3118,11 +3218,11 @@ 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((v2) => !v2) } : void 0;
+  const loupeBindings = loupeCap ? { on: loupeOn, toggle: () => setLoupeOn((v) => !v) } : void 0;
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
-    const ordered = layerOrder ? [...baseLayers].sort((a, b2) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b2.id)) : baseLayers;
+    const ordered = layerOrder ? [...baseLayers].sort((a, b) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b.id)) : baseLayers;
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
@@ -3154,8 +3254,8 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   });
   const paletteItems = useMemo(() => {
     if (!instrument.dragDrop) return [];
-    const p2 = instrument.dragDrop.palette;
-    return typeof p2 === "function" ? p2(record.state, record.config) : p2;
+    const p = instrument.dragDrop.palette;
+    return typeof p === "function" ? p(record.state, record.config) : p;
   }, [instrument.dragDrop, record.state, record.config]);
   const layersWithFeedback = useMemo(() => {
     if (!dragDropResult.drag?.feedback) return canvasLayers;
@@ -3269,6 +3369,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       capability: annotationsCap,
       state: record.state,
       config: record.config,
+      trial: { id: record.id, view: record.view },
       annotations,
       activeToolId: resolvedToolId
     }
@@ -3310,9 +3411,12 @@ function initialView(instrument) {
   if (typeof declared === "function") return null;
   return declared ? structuredClone(declared) : { ...DEFAULT_VIEW2, pan: { ...DEFAULT_VIEW2.pan } };
 }
-function addTrial(trials, instruments, instrumentName) {
+function seedConfig(defaults, seed) {
+  return seed ? fillConfigDefaults(seed, defaults) : defaults;
+}
+function addTrial(trials, instruments, instrumentName, options = {}) {
   const instrument = findInstrument(instruments, instrumentName);
-  const config = instrument.defaultConfig();
+  const config = seedConfig(instrument.defaultConfig(), options.config);
   const state = instrument.initialState(config);
   const record = {
     id: crypto.randomUUID(),
@@ -3322,6 +3426,7 @@ function addTrial(trials, instruments, instrumentName) {
     view: initialView(instrument),
     undoStack: { past: [], future: [] }
   };
+  if (options.config) record.configSeed = options.config;
   return [...trials, record];
 }
 function cloneTrial(trials, id) {
@@ -3348,7 +3453,7 @@ function resetTrial(trials, id, instruments) {
   const current = trials[idx];
   if (!current) return trials;
   const instrument = findInstrument(instruments, current.instrumentName);
-  const config = instrument.defaultConfig();
+  const config = seedConfig(instrument.defaultConfig(), current.configSeed);
   const state = instrument.initialState(config);
   const reset = {
     ...current,
@@ -3394,7 +3499,7 @@ function LabHeader() {
       // Held at null so the control stays an "add one" action rather than
       // reading as the current instrument.
       /* @__PURE__ */ jsx(
-        p,
+        g,
         {
           className: "lk-lab-header__add-select",
           "aria-label": "Add trial",
@@ -3408,7 +3513,7 @@ function LabHeader() {
       )
     ),
     /* @__PURE__ */ jsx(
-      r3,
+      r6,
       {
         className: "lk-lab-header__mode",
         ariaLabel: "Color mode",
@@ -3461,14 +3566,18 @@ function useResolvedMode(mode) {
 function LabShell({ title, children, header, footer, mode = "auto" }) {
   const resolved = useResolvedMode(mode);
   const outer = useThemeOptional();
-  const shell = /* @__PURE__ */ jsxs("div", { className: "lk-root lk-shell", children: [
-    /* @__PURE__ */ jsxs("header", { className: "lk-shell-header", children: [
-      /* @__PURE__ */ jsx("h1", { className: "lk-shell-title", children: title }),
-      header && /* @__PURE__ */ jsx("div", { className: "lk-shell-header-actions", children: header })
-    ] }),
-    /* @__PURE__ */ jsx("main", { className: "lk-shell-body", children }),
-    footer && /* @__PURE__ */ jsx("footer", { className: "lk-shell-footer", children: footer })
-  ] });
+  const shell = (
+    // Overlays portal here rather than to the themed wrapper above: `.lk-root`
+    // carries the element defaults a lab's bare markup is styled by.
+    /* @__PURE__ */ jsxs("div", { className: "lk-root lk-shell", "data-wzl-portal-host": "", children: [
+      /* @__PURE__ */ jsxs("header", { className: "lk-shell-header", children: [
+        /* @__PURE__ */ jsx("h1", { className: "lk-shell-title", children: title }),
+        header && /* @__PURE__ */ jsx("div", { className: "lk-shell-header-actions", children: header })
+      ] }),
+      /* @__PURE__ */ jsx("main", { className: "lk-shell-body", children }),
+      footer && /* @__PURE__ */ jsx("footer", { className: "lk-shell-footer", children: footer })
+    ] })
+  );
   return outer ? shell : /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, mode: resolved, children: shell });
 }
 var ZONE_ID2 = asNodeId("lk-workspace");
@@ -3477,11 +3586,11 @@ var FLOAT_ZONE_ID = asNodeId("lk-workspace-floating");
 var PANEL_KIND = "panel";
 var KIND = "trial";
 function extentOf(store, id) {
-  const p2 = store.getNode(id)?.membership?.placement;
-  if (!p2) return null;
+  const p = store.getNode(id)?.membership?.placement;
+  if (!p) return null;
   const out = {};
-  if (p2.size) out.size = p2.size;
-  if (p2.span) out.span = p2.span;
+  if (p.size) out.size = p.size;
+  if (p.span) out.span = p.span;
   return Object.keys(out).length > 0 ? out : null;
 }
 function PanelFrame({ panel, floating = false }) {
@@ -3502,11 +3611,11 @@ function Workspace({
   viewport
 }) {
   const items = Children.toArray(children);
-  const tilePanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "tile"), [panels]);
-  const floatPanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "floating"), [panels]);
+  const tilePanels = useMemo(() => (panels ?? []).filter((p) => p.as === "tile"), [panels]);
+  const floatPanels = useMemo(() => (panels ?? []).filter((p) => p.as === "floating"), [panels]);
   const wantedIds = [
-    ...items.map((_2, i) => ids?.[i] ?? `lk-ws-${i}`),
-    ...tilePanels.map((p2) => `lk-panel-${p2.key}`)
+    ...items.map((_, i) => ids?.[i] ?? `lk-ws-${i}`),
+    ...tilePanels.map((p) => `lk-panel-${p.key}`)
   ];
   const idKey = wantedIds.join(",");
   const idKeyRef = useRef(null);
@@ -3583,7 +3692,7 @@ function Workspace({
   const chrome = useMemo(() => {
     const byId = new Map(nodeIds.map((id, i) => [id, items[i]]));
     const panelByNode = new Map(
-      tilePanels.map((p2) => [`lk-panel-${p2.key}`, p2])
+      tilePanels.map((p) => [`lk-panel-${p.key}`, p])
     );
     return {
       [PANEL_KIND]: ({ node }) => {
@@ -3601,7 +3710,7 @@ function Workspace({
       }
     };
   }, [nodeIds, items, reorderable, tilePanels]);
-  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p2) => /* @__PURE__ */ jsx(PanelFrame, { panel: p2, floating: true }, p2.key)) });
+  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p) => /* @__PURE__ */ jsx(PanelFrame, { panel: p, floating: true }, p.key)) });
   const grid = /* @__PURE__ */ jsx(
     Container,
     {
@@ -3624,7 +3733,13 @@ function Workspace({
   ) : reorderable ? /* @__PURE__ */ jsx(DragProvider, { children: grid }) : grid }) });
 }
 function buildStore(instruments, defaultInstrument, storage, storageKey, initialMode) {
-  const store = createLabStore({ storageKey, storage, initialMode });
+  const store = createLabStore({
+    storageKey,
+    storage,
+    initialMode,
+    serializers: serializersOf(instruments),
+    configDefaults: configDefaultsOf(instruments)
+  });
   if (store.getState().trials.length === 0) {
     const seeded = addTrial([], instruments, defaultInstrument);
     const record = seeded[0];
@@ -3644,8 +3759,8 @@ var NEBULA_SLOTS = [
 ];
 function buildNebula(colors) {
   const blobs = colors.map((c2, i) => {
-    const p2 = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c2} 22%, transparent), transparent ${p2.stop})`;
+    const p = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
+    return `radial-gradient(ellipse ${p.sx} ${p.sy} at ${p.cx} ${p.cy}, color-mix(in srgb, ${c2} 22%, transparent), transparent ${p.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
@@ -3697,11 +3812,11 @@ function Lab({
     const c2 = ownCanvasRef.current;
     if (!c2) return;
     const w3 = Math.round(frame.size.width * frame.dpr);
-    const h2 = Math.round(frame.size.height * frame.dpr);
-    if (bufferRef.current.w === w3 && bufferRef.current.h === h2) return;
-    bufferRef.current = { w: w3, h: h2 };
+    const h = Math.round(frame.size.height * frame.dpr);
+    if (bufferRef.current.w === w3 && bufferRef.current.h === h) return;
+    bufferRef.current = { w: w3, h };
     c2.width = w3;
-    c2.height = h2;
+    c2.height = h;
     c2.style.width = `${frame.size.width}px`;
     c2.style.height = `${frame.size.height}px`;
     surfaceRef.current?.invalidateAll();
@@ -3734,8 +3849,8 @@ function Lab({
     return {
       instruments,
       trials,
-      addTrial: (instrumentName) => {
-        const next = addTrial(store.getState().trials, instruments, instrumentName);
+      addTrial: (instrumentName, options) => {
+        const next = addTrial(store.getState().trials, instruments, instrumentName, options);
         replaceTrials(next);
       },
       cloneTrial: (id) => {
@@ -3841,6 +3956,6 @@ function Lab({
   ) }) });
 }
 
-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 };
+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, isConfigBranch, isStale, markCommands, markSvgNodes, reorderTrials, resetTrial, resolveConfigSchema, resolveMarkStyle, roundFrac, seenFrom, titleCase, toWeaselView, useConfigSchema, useLabContext, validateConfigSchema, worldToFrac };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map