@weasel-js/labkit 1.4.2 → 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-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-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-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-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, 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-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-54ZWZ5FQ.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,7 +40,6 @@ 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 [
@@ -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}"`);
@@ -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) {
@@ -631,8 +636,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;
@@ -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" }] });
 }
@@ -1430,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;
@@ -1469,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. */
@@ -1555,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),
@@ -1568,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) };
   }
 };
 
@@ -1627,36 +1666,55 @@ function defined(annotations) {
   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() {
@@ -2304,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 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 +2502,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 +2529,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;
@@ -2813,16 +2890,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 +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);
     },
@@ -3335,12 +3412,7 @@ 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);
@@ -3427,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(
-        h,
+        g,
         {
           className: "lk-lab-header__add-select",
           "aria-label": "Add trial",
@@ -3441,7 +3513,7 @@ function LabHeader() {
       )
     ),
     /* @__PURE__ */ jsx(
-      r4,
+      r6,
       {
         className: "lk-lab-header__mode",
         ariaLabel: "Color mode",
@@ -3494,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");
@@ -3657,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];
@@ -3730,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();
@@ -3874,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