@weasel-js/labkit 1.4.2 → 1.4.4

package/dist/index.js

@@ -1,43 +1,45 @@
 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-TN7YSJVU.js';
-import { useSurfaceOptional, useSurfaceCanvas, useTileId, useTiledSurface, SurfaceContext, SurfaceCanvasContext } from './chunk-WS6ZRV75.js';
-export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTiledSurface } from './chunk-WS6ZRV75.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-W2FJR5FF.js';
-export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationsContext, ExportMenu, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, mergeContributions, suppressContributions, useAnnotations, useAnnotationsOptional } from './chunk-W2FJR5FF.js';
-import { JobProgress } from './chunk-UDXOYZEC.js';
-export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-UDXOYZEC.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-UTOEDPNU.js';
-import { createLabStore, panelKey, noneAdapter } from './chunk-ULDW42CR.js';
-export { CURRENT_DOCUMENT_VERSION, createMemoryAdapter, dockPanel, labDocumentKey, localStorageAdapter, noneAdapter, panelKey, quarantineKey, sessionStorageAdapter, undockPanel, urlHashAdapter, useTrialState } from './chunk-ULDW42CR.js';
+import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, AnnotationsContext } from './chunk-64ZCN3DA.js';
+export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationsContext, ExportMenu, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, mergeContributions, suppressContributions, useAnnotations, useAnnotationsOptional } from './chunk-64ZCN3DA.js';
+import { JobProgress } from './chunk-MOM3GOVY.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-MOM3GOVY.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-SMHP6XZ4.js';
+import { newId, createLabStore, panelKey, noneAdapter } from './chunk-2P6PP5N4.js';
+export { CURRENT_DOCUMENT_VERSION, createMemoryAdapter, dockPanel, labDocumentKey, localStorageAdapter, noneAdapter, panelKey, quarantineKey, sessionStorageAdapter, undockPanel, urlHashAdapter, useTrialState } from './chunk-2P6PP5N4.js';
 import { LabStoreContext, TrialIdProvider } from './chunk-2YILQ7Y5.js';
 export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
-import { fromConfigFields } from './chunk-XKENZTNE.js';
-export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-XKENZTNE.js';
-import { CanvasStack } from './chunk-FJG4PHTL.js';
-export { CanvasStack, PITCH_LIMIT, clampPitch, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-FJG4PHTL.js';
-import { LayerList } from './chunk-NSOVI3AZ.js';
-export { LayerList } from './chunk-NSOVI3AZ.js';
+import { fromConfigFields } from './chunk-U3IYHIAE.js';
+export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-U3IYHIAE.js';
+import { hasConfigPath, schemaNodeAtPath, withValueAtPath, fillConfigDefaults } from './chunk-E44SU6XS.js';
+export { fillConfigDefaults, hasConfigPath, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-E44SU6XS.js';
+import { CanvasStack } from './chunk-I6JCVE24.js';
+export { CanvasStack, PITCH_LIMIT, clampPitch, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-I6JCVE24.js';
+import { LayerList } from './chunk-BKFVHKJH.js';
+export { LayerList } from './chunk-BKFVHKJH.js';
 import './chunk-SBXNQW4G.js';
-import { E, w, T, C, h, r4 } from './chunk-ISSVF5PT.js';
-export { M2 as CheckboxRow, j2 as ColorRow, y4 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-ISSVF5PT.js';
-import { resolveLoupe, TrialLoupe } from './chunk-D5KQ5OY6.js';
-export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-D5KQ5OY6.js';
+import { E, w, T, C, g, r6 } from './chunk-W3ECWC2K.js';
+export { N2 as CheckboxRow, M2 as ColorRow, y3 as CurveField, z as EffectCard, V as EffectCardList, c3 as LayerStack, F as NumberRow, H as PropertyGroup, T2 as PropertyList, w2 as PropertyPanel, D as PropertyRow, E2 as PropertySpan, I as SelectRow, A2 as SliderRow, R as Subpanel, P2 as TextRow, L2 as ToggleRow } from './chunk-W3ECWC2K.js';
+import { resolveLoupe, TrialLoupe } from './chunk-TJ7QY3OC.js';
+export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-TJ7QY3OC.js';
 export { centerOn, zoomAt } from './chunk-CTRKTLYZ.js';
 import { 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-54ZWZ5FQ.js';
-import { createContext, useState, useRef, useEffect, useContext, useMemo, Children, useLayoutEffect, useCallback, useSyncExternalStore } from 'react';
+import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext, getMarker, getPaintKind, boundsOfPath, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, SCRIPT_METRICS } from '@weasel-js/core';
+import { tileGeometry } from '@weasel-js/core/patterns-builtin';
+import { createContext, useState, useRef, useEffect, useContext, useMemo, useId, useCallback, Children, useLayoutEffect, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useStore } from 'zustand/react';
 import { asNodeId, Store, createNode, stripStrategy, floatingStrategy, gridStrategy } from 'windease';
 import { Provider, StrategyRegistryProvider, Container, DragProvider, useDragHandle } from 'windease/react';
 
-// ../svg/dist/index.js
 var IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
 function multiply(a, b) {
   return [
@@ -420,20 +422,25 @@ function paintAttrs(paint, name, registry, includeOpacity = true) {
   const id = registry.register(paint.paint);
   return [`${name}="url(#${id})"`];
 }
+function strokeWidthAttrs(width) {
+  if (typeof width === "number") return [`stroke-width="${trimNumber(width)}"`];
+  return [`stroke-width="${trimNumber(width.px)}"`, 'vector-effect="non-scaling-stroke"'];
+}
 function coreStrokeAttrs(stroke, registry) {
-  if (!stroke) return [];
-  const width = resolveStrokeWidth(stroke.width ?? 1, 1);
-  if (!(width > 0)) return [];
+  const paint = stroke?.paint;
+  if (!stroke || !paint) return [];
+  const width = stroke.width ?? 1;
+  if (!((typeof width === "object" ? width.px : 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)}"`);
+  attrs.push(...strokeWidthAttrs(width));
   if (stroke.cap) attrs.push(`stroke-linecap="${stroke.cap}"`);
   if (stroke.join) attrs.push(`stroke-linejoin="${stroke.join}"`);
   if (stroke.dash && stroke.dash.length > 0) {
@@ -456,7 +463,7 @@ function coreStrokeAttrs(stroke, registry) {
 }
 function strokeAttrsFor(stroke, registry) {
   const attrs = paintAttrs(stroke.paint, "stroke", registry, false);
-  attrs.push(`stroke-width="${trimNumber(stroke.width)}"`);
+  attrs.push(...strokeWidthAttrs(stroke.width));
   const opacity = stroke.opacity ?? (stroke.paint.kind === "solid" ? stroke.paint.opacity : void 0);
   if (opacity != null && opacity !== 1) {
     attrs.push(`stroke-opacity="${trimNumber(opacity)}"`);
@@ -549,7 +556,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) {
@@ -631,8 +640,6 @@ function pathBounds(path) {
   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;
@@ -714,8 +721,8 @@ function seenFrom(config, keys) {
   const out = {};
   if (config === null || typeof config !== "object") return out;
   const src = config;
-  for (const k2 of keys) {
-    if (k2 in src) out[k2] = src[k2];
+  for (const k of keys) {
+    if (k in src) out[k] = src[k];
   }
   return out;
 }
@@ -723,9 +730,9 @@ function isStale(seen, config, keys) {
   if (!seen || keys.length === 0) return false;
   if (config === null || typeof config !== "object") return false;
   const src = config;
-  for (const k2 of keys) {
-    if (!(k2 in seen)) continue;
-    if (!Object.is(seen[k2], src[k2])) return true;
+  for (const k of keys) {
+    if (!(k in seen)) continue;
+    if (!Object.is(seen[k], src[k])) return true;
   }
   return false;
 }
@@ -759,7 +766,7 @@ function toSvgPaint(paint) {
 function toSvgStroke(stroke) {
   return {
     paint: toSvgPaint(stroke.paint),
-    width: resolveStrokeWidth(stroke.width ?? 1, 1),
+    width: stroke.width ?? 1,
     ...stroke.cap ? { cap: stroke.cap } : {},
     ...stroke.join ? { join: stroke.join } : {},
     ...stroke.dash ? { dash: [...stroke.dash] } : {},
@@ -799,7 +806,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 +815,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 +840,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");
@@ -960,7 +967,7 @@ function roundFrac(f2) {
 function fracContains(box, pt, tol = 0) {
   return pt.x >= box.x - tol && pt.x <= box.x + box.w + tol && pt.y >= box.y - tol && pt.y <= box.y + box.h + tol;
 }
-function fracIntersects(outer, inner) {
+function fracEncloses(outer, inner) {
   return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.w <= outer.x + outer.w && inner.y + inner.h <= outer.y + outer.h;
 }
 
@@ -1041,8 +1048,6 @@ function drop(stack, value) {
     }
   }
 }
-
-// src/annotations/store.ts
 function createAnnotationScene() {
   return createScene({ systemLayers: [{ id: "marks" }] });
 }
@@ -1137,7 +1142,7 @@ function createAnnotationStore(opts) {
       return marksOn(target).filter((a) => fracContains(a.frac, pt, tol)).reverse();
     },
     within(target, box) {
-      return marksOn(target).filter((a) => fracIntersects(box, a.frac));
+      return marksOn(target).filter((a) => fracEncloses(box, a.frac));
     },
     isStale(a, config) {
       const keys = targetOf(a.target)?.positionDependsOn ?? [];
@@ -1430,6 +1435,9 @@ function AnnotationTargets({
 }
 
 // src/config/builder.ts
+function isConfigBranch(entry) {
+  return "children" in entry;
+}
 var BaseNode = class {
   constructor(defaultValue, annotations = {}, options = {}) {
     this.annotations = annotations;
@@ -1469,9 +1477,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. */
@@ -1555,6 +1564,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),
@@ -1568,18 +1616,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) };
   }
 };
 
@@ -1611,9 +1656,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 [k, v] of Object.entries(patch)) {
+      if (v !== void 0 && acc[k] === void 0) {
+        acc[k] = v;
       }
     }
   }
@@ -1623,40 +1668,59 @@ 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 [k, v] of Object.entries(annotations)) if (v !== void 0) out[k] = v;
   return out;
 }
 function resolveConfigSchema(schema, rules = []) {
+  const sink = {
+    sections: [],
+    showIf: /* @__PURE__ */ new Map(),
+    renderers: {},
+    chain: [...rules, ...builtinRules]
+  };
+  const group = resolveShape(schema.nodes, "", "", sink);
+  return { group, sections: sink.sections, showIf: sink.showIf, renderers: sink.renderers };
+}
+function resolveShape(shape, at, name, sink) {
   const children = {};
-  const 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() {
@@ -1736,7 +1800,7 @@ function validateConfigSchema(fields) {
   return { valid: errors.length === 0, errors };
 }
 
-// ../theme/dist/chunk-CXVFAOTM.js
+// ../theme/dist/chunk-D6AFL2JW.js
 var THEME_SOURCES = {
   "weasel": {
     "primitives": {
@@ -1965,15 +2029,15 @@ var THEME_SOURCES = {
         "value": "8px",
         "description": "Diameter of a linear range thumb."
       },
-      "slider-track-tint": {
+      "slider-track-mix": {
         "type": "dimension",
         "value": "18%",
-        "description": "Accent proportion in a range track. Mixed into a real property, never into another custom property."
+        "description": "Accent proportion in a range track, as a color-mix percentage \u2014 not a color. Mixed into a real property, never into another custom property."
       },
-      "slider-thumb-tint": {
+      "slider-thumb-mix": {
         "type": "dimension",
         "value": "70%",
-        "description": "Accent proportion in a range thumb."
+        "description": "Accent proportion in a range thumb, as a color-mix percentage \u2014 not a color."
       },
       "field-pad-x": {
         "type": "dimension",
@@ -2304,9 +2368,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 g2 = Number.parseInt(full.slice(2, 4), 16);
   const b = Number.parseInt(full.slice(4, 6), 16);
-  return `rgba(${r2}, ${g}, ${b}, ${alpha})`;
+  return `rgba(${r2}, ${g2}, ${b}, ${alpha})`;
 }
 var REF = /^\{([^}]+)\}$/;
 function refTarget(value) {
@@ -2444,6 +2508,25 @@ 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 = (v) => typeof v === "object" && v !== null && "$value" in v;
@@ -2452,9 +2535,9 @@ function flattenTokens(doc) {
   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;
@@ -2792,9 +2875,9 @@ function TrialChrome({
   const title = record.title ?? record.instrumentName;
   const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
   const ctx = useMemo(() => {
-    const setZoom = (z) => {
+    const setZoom = (z2) => {
       if (!view2d) return;
-      updateTrialView(trialId, { ...view2d, zoom: z });
+      updateTrialView(trialId, { ...view2d, zoom: z2 });
     };
     return {
       trialId,
@@ -2813,16 +2896,16 @@ 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);
         }
@@ -3086,11 +3169,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);
     },
@@ -3099,9 +3182,9 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       view: record.view,
       setView,
       zoom: view2d?.zoom ?? 1,
-      setZoom: (z) => {
+      setZoom: (z2) => {
         if (!view2d) return;
-        updateTrialView(record.id, { ...view2d, zoom: z });
+        updateTrialView(record.id, { ...view2d, zoom: z2 });
       },
       activeToolId: resolvedToolId,
       visibleLayers
@@ -3335,19 +3418,14 @@ function initialView(instrument) {
   return declared ? structuredClone(declared) : { ...DEFAULT_VIEW2, pan: { ...DEFAULT_VIEW2.pan } };
 }
 function seedConfig(defaults, seed) {
-  if (!seed) return defaults;
-  const out = { ...defaults };
-  for (const [key, value] of Object.entries(seed)) {
-    if (value !== void 0) out[key] = value;
-  }
-  return out;
+  return seed ? fillConfigDefaults(seed, defaults) : defaults;
 }
 function addTrial(trials, instruments, instrumentName, options = {}) {
   const instrument = findInstrument(instruments, instrumentName);
   const config = seedConfig(instrument.defaultConfig(), options.config);
   const state = instrument.initialState(config);
   const record = {
-    id: crypto.randomUUID(),
+    id: newId(),
     instrumentName,
     config,
     state,
@@ -3363,7 +3441,7 @@ function cloneTrial(trials, id) {
   if (!source) return trials;
   const clone = {
     ...source,
-    id: crypto.randomUUID(),
+    id: newId(),
     config: structuredClone(source.config),
     state: structuredClone(source.state),
     view: structuredClone(source.view),
@@ -3427,7 +3505,7 @@ function LabHeader() {
       // Held at null so the control stays an "add one" action rather than
       // reading as the current instrument.
       /* @__PURE__ */ jsx(
-        h,
+        g,
         {
           className: "lk-lab-header__add-select",
           "aria-label": "Add trial",
@@ -3441,7 +3519,7 @@ function LabHeader() {
       )
     ),
     /* @__PURE__ */ jsx(
-      r4,
+      r6,
       {
         className: "lk-lab-header__mode",
         ariaLabel: "Color mode",
@@ -3473,6 +3551,67 @@ function LabPalette({ tools }) {
   };
   return /* @__PURE__ */ jsx(PaletteRegion, { contributions, ctx });
 }
+function currentPage(path, pages) {
+  const here = path.split("?")[0].split("#")[0].replace(/\/$/, "").replace(/\.html$/, "");
+  return pages.findIndex((p) => here.endsWith(p.href.replace(/\.html$/, "")));
+}
+function LabSwitcher({ title, pages, path, className }) {
+  const [open, setOpen] = useState(false);
+  const root = useRef(null);
+  const menuId = useId();
+  const here = currentPage(path ?? (typeof window === "undefined" ? "" : window.location.pathname), pages);
+  const close = useCallback(() => setOpen(false), []);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        close();
+        root.current?.querySelector("button")?.focus();
+      }
+    };
+    const onDown = (e) => {
+      if (!root.current?.contains(e.target)) close();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [open, close]);
+  if (pages.length < 2) {
+    return /* @__PURE__ */ jsx("h1", { className: `lk-switcher-title${className ? ` ${className}` : ""}`, children: title });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `lk-switcher${className ? ` ${className}` : ""}`, ref: root, children: [
+    /* @__PURE__ */ jsx("h1", { className: "lk-switcher-title", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "lk-switcher-trigger",
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "aria-controls": open ? menuId : void 0,
+        onClick: () => setOpen((was) => !was),
+        children: [
+          title,
+          /* @__PURE__ */ jsx("span", { className: "lk-switcher-caret", "aria-hidden": "true" })
+        ]
+      }
+    ) }),
+    open && /* @__PURE__ */ jsx("div", { className: "lk-switcher-menu", id: menuId, role: "menu", children: pages.map((page, i) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: page.href,
+        role: "menuitem",
+        className: "lk-switcher-item",
+        "aria-current": i === here ? "page" : void 0,
+        onClick: close,
+        children: page.label
+      },
+      page.href
+    )) })
+  ] });
+}
 function query() {
   if (typeof window === "undefined" || !window.matchMedia) return null;
   return window.matchMedia("(prefers-color-scheme: light)");
@@ -3491,17 +3630,37 @@ function useResolvedMode(mode) {
   }, [mode]);
   return mode === "auto" ? system : mode;
 }
-function LabShell({ title, children, header, footer, mode = "auto" }) {
+function LabShell({
+  title,
+  children,
+  header,
+  footer,
+  mode = "auto",
+  pages,
+  path
+}) {
   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: [
+        pages && pages.length > 0 ? /* @__PURE__ */ jsx(
+          LabSwitcher,
+          {
+            title,
+            pages,
+            path,
+            className: "lk-shell-title"
+          }
+        ) : /* @__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");
@@ -3657,7 +3816,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];
@@ -3730,11 +3895,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();
@@ -3874,6 +4039,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, LabSwitcher, Trial, TrialBody, TrialChrome, Workspace, addTrial, annotationsFromJSON, applyRules, as2DView, builtinRules, capturePlan, captureTarget, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, currentPage, defineInstrument, f, fitView, fracContains, fracEncloses, fracToWorld, fromWeaselView, interstellarTheme, isConfigBranch, isStale, markCommands, markSvgNodes, reorderTrials, resetTrial, resolveConfigSchema, resolveMarkStyle, roundFrac, seenFrom, titleCase, toWeaselView, useConfigSchema, useLabContext, validateConfigSchema, worldToFrac };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map