@weasel-js/labkit 1.4.4 → 1.5.1

package/dist/index.js

@@ -1,670 +1,83 @@
+import { resolveLoupe, TrialLoupe } from './chunk-ERFMC6WU.js';
+export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LOUPE_MAGNIFY_ID, LOUPE_PEEK_ID, LoupeBubble, LoupeGestures, TrialLoupe, createLoupeActions, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-ERFMC6WU.js';
 import { createEventBus, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
 export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
 import { useDragDrop, DragOverlay, Palette } from './chunk-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 { useTiledSurface } from './chunk-IJJUK4FU.js';
+export { composeRects, rectsEqual, toDeviceRect, useTiledSurface } from './chunk-IJJUK4FU.js';
 import { useJob } from './chunk-HXXTULDN.js';
 export { useJob } from './chunk-HXXTULDN.js';
-import { 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-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, 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 { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, AnnotationsContext, useLabChromeContext, labContributions, LabHeaderRegion, LabFooterRegion, LabAsideRegion, LabSidebarRegion } from './chunk-IHUVQ3TX.js';
+export { AnnotationsContext, ExportMenu, LabAsideRegion, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useAnnotations, useAnnotationsOptional, useLabChromeContext } from './chunk-IHUVQ3TX.js';
+import { Split, JobProgress, Sidebar, Legend, FloatingPanel } from './chunk-EHGVROVV.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar, Split } from './chunk-EHGVROVV.js';
+import { Toolbar, StatusBar, ScaleIndicator, ZoomControl } from './chunk-UN4U4P63.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-UN4U4P63.js';
+import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-IXTQI7JX.js';
+export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-IXTQI7JX.js';
+import { newId, useWarnIgnoredChange, useOpenOnce, PersistenceContext, createRecordCache, noneAdapter, defaultStorage, usePersistedState } from './chunk-RWNDDKOH.js';
+export { Persistence, createIndexedDbAdapter, createMemoryAdapter, indexedDbAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, usePersistedState } from './chunk-RWNDDKOH.js';
+export { ControlPanel } from './chunk-EH7UEQV7.js';
+import { useConfigSchema } from './chunk-PJ7WEQBJ.js';
+export { useConfigSchema } from './chunk-PJ7WEQBJ.js';
+import { useLabContext, LabContext } from './chunk-Z76KEZAX.js';
+export { LabContext, useLabContext } from './chunk-Z76KEZAX.js';
+import { useResolvedConfig } from './chunk-ZDHY47EV.js';
+export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-ZDHY47EV.js';
+export { fromConfigFields, isLeafVisible } from './chunk-PHK4W562.js';
+import { hasConfigPath, schemaNodeAtPath, applyConfigWrite, resolveAutoConfig, isAuto, isRecord, autoPathsOf, fillConfigDefaults } from './chunk-7PFH3CNM.js';
+export { auto, autoPathsOf, fillConfigDefaults, hasConfigPath, isAuto, resolveAutoConfig, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-7PFH3CNM.js';
+import { CameraWheelContext, as2DView, DEFAULT_VIEW, CanvasStack, Stage, withZoom, fitStage } from './chunk-CEIUBPPW.js';
+export { CanvasStack, DEFAULT_VIEW, PITCH_LIMIT, Stage, as2DView, clampPitch, fitStage, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-CEIUBPPW.js';
+export { centerOn, zoomAt } from './chunk-H6ZAOWNE.js';
 import { applyCamera } from './chunk-2AYGEN57.js';
 export { DEFAULT_FRAME, applyCamera, resolveFrame, screenToWorld, worldToScreen } from './chunk-2AYGEN57.js';
+import { useSurfaceOptional, useSurfaceCanvas, useTileId, SurfaceContext, SurfaceCanvasContext } from './chunk-WIG6XHJ7.js';
+export { SurfaceCanvasContext, SurfaceContext, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId } from './chunk-WIG6XHJ7.js';
 export { CanvasStackContext } from './chunk-CQLQPQ4P.js';
-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 { LabStoreContext, TrialIdProvider } from './chunk-2YILQ7Y5.js';
+export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
+import { LayerList } from './chunk-MDVTK5U3.js';
+export { LayerList } from './chunk-MDVTK5U3.js';
+import './chunk-SBXNQW4G.js';
+import { E, w, T, a2, p, u, c, n, f, r, h, serializeSvg, C, l7, r3, a5, Lt, o2, a4, l3, u3, r7, r8, r6, o5, s5, c6, l6, c3, s3, u2, g2, g, y2, l4, b2, c7, r2, l2, C2, S, O, k, F2, L3, V, H, U, B, R2, J, A2, c4, n5, s4, m2, c2, l, g3, l5, S4, r10, n6, r11, i5, i4, s2, n7, o4, r9, c5, w2, L2, n8, k2, $2 } from './chunk-T3EC2DXD.js';
+export { a5 as Button, R2 as CheckboxRow, y as CloseIcon, $ as CollapseIcon, L3 as ColorRow, S2 as CurveField, G2 as EffectCard, q as EffectCardList, te as ExpandIcon, o as Icon, u2 as Input, l9 as Jog, c4 as LayerStack, V as NumberRow, I as PauseIcon, F as PlayIcon, J as PropertyGroup, k as PropertyList, O as PropertyPanel, j2 as PropertyRow, A3 as PropertySpan, v as ResetIcon, g as Select, H as SelectRow, F2 as SliderRow, R as StepBackIcon, z as StepForwardIcon, L as StopIcon, W as Subpanel, B as TextRow, r3 as ToggleBar, U as ToggleRow, q2 as TokenPanel, I2 as inferTokenType } from './chunk-T3EC2DXD.js';
+import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext } from '@weasel-js/core';
+import { createContext, useState, useRef, useEffect, useCallback, useContext, useMemo, useId, Children, useLayoutEffect, useSyncExternalStore } from 'react';
+import { flushSync, createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useThemeOptional, ThemeProvider } from '@weasel-js/theme/react';
 import { useStore } from 'zustand/react';
-import { asNodeId, Store, createNode, stripStrategy, floatingStrategy, gridStrategy } from 'windease';
-import { Provider, StrategyRegistryProvider, Container, DragProvider, useDragHandle } from 'windease/react';
+import { defineTheme, weaselTheme } from '@weasel-js/theme';
+import { Provider, StrategyRegistryProvider, DragProvider, Container, useDragHandle } from 'windease/react';
+import { asNodeId, Store, createNode, floatingStrategy, gridStrategy } from 'windease';
+import { Focusable } from 'react-aria-components';
 
-var IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
-function multiply(a, b) {
-  return [
-    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) {
-  return Math.abs(m[0] - 1) < eps && Math.abs(m[1]) < eps && Math.abs(m[2]) < eps && Math.abs(m[3] - 1) < eps && Math.abs(m[4]) < eps && Math.abs(m[5]) < eps;
-}
-function formatMatrix(m) {
-  if (isIdentity(m)) return null;
-  return `matrix(${m.map((n) => trimNumber(n)).join(" ")})`;
-}
-function trimNumber(n) {
-  if (!Number.isFinite(n)) return "0";
-  const r2 = Math.round(n * 1e6) / 1e6;
-  if (Number.isInteger(r2)) return String(r2);
-  return String(r2);
-}
-function patternSpecOf(paint) {
-  return "tile" in paint.pattern ? paint.pattern : null;
-}
-function patternXml(id, paint, onWarn) {
-  const spec = patternSpecOf(paint);
-  if (!spec) {
-    onWarn?.("pattern fill carries a TextureHandle, which has no vector form \u2014 omitted from <defs>");
-    return "";
-  }
-  const geometry = tileGeometry(spec);
-  const body = geometry.shapes.map(shapeXml).join("");
-  const origin = paint.origin ?? { x: 0, y: 0 };
-  const attrs = [
-    `id="${id}"`,
-    'patternUnits="userSpaceOnUse"',
-    `width="${trimNumber(geometry.size)}"`,
-    `height="${trimNumber(geometry.size)}"`
-  ];
-  if (origin.x !== 0 || origin.y !== 0) {
-    attrs.push(`x="${trimNumber(origin.x)}"`, `y="${trimNumber(origin.y)}"`);
-  }
-  attrs.push(`data-weasel-tile="${escapeAttr(JSON.stringify(spec))}"`);
-  return `<pattern ${attrs.join(" ")}>${body}</pattern>`;
-}
-function shapeXml(shape) {
-  switch (shape.kind) {
-    case "line":
-      return `<line x1="${trimNumber(shape.x1)}" y1="${trimNumber(shape.y1)}" x2="${trimNumber(shape.x2)}" y2="${trimNumber(shape.y2)}" stroke="${shape.color}" stroke-width="${trimNumber(shape.width)}"/>`;
-    case "circle":
-      return `<circle cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" r="${trimNumber(shape.r)}" fill="${shape.color}"/>`;
-    case "ellipse": {
-      const deg = shape.rotation * 180 / Math.PI;
-      const transform = deg === 0 ? "" : ` transform="rotate(${trimNumber(deg)} ${trimNumber(shape.cx)} ${trimNumber(shape.cy)})"`;
-      return `<ellipse cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" rx="${trimNumber(shape.rx)}" ry="${trimNumber(shape.ry)}" fill="${shape.color}"${transform}/>`;
-    }
-    case "rect":
-      return `<rect x="${trimNumber(shape.x)}" y="${trimNumber(shape.y)}" width="${trimNumber(shape.width)}" height="${trimNumber(shape.height)}" fill="${shape.color}"/>`;
-    default:
-      return "";
-  }
-}
-function escapeAttr(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function serializePathD(path) {
-  if (path.kind === "rect") {
-    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;
-  const out = [];
-  let ci = 0;
-  for (let i = 0; i < cmds.length; i++) {
-    const c2 = cmds[i];
-    if (c2 === PATH_M) {
-      out.push(`M${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
-      ci += 2;
-    } else if (c2 === PATH_L) {
-      out.push(`L${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
-      ci += 2;
-    } else if (c2 === PATH_C) {
-      out.push(
-        `C${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])} ${trimNumber(xs[ci + 4])} ${trimNumber(xs[ci + 5])}`
-      );
-      ci += 6;
-    } else if (c2 === PATH_Q) {
-      out.push(
-        `Q${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])}`
-      );
-      ci += 4;
-    } else if (c2 === PATH_Z) {
-      out.push("Z");
-    }
-  }
-  return out.join("");
-}
-var PaintServerRegistry = class {
-  byPaint = /* @__PURE__ */ new Map();
-  order = [];
-  counter = 0;
-  // Marker keys referenced by any stroke, in first-use order. The `<defs>`
-  // id is the marker key itself, not a minted counter id: `parseSvg` reads a
-  // `marker-end="url(#id)"` fragment back as the marker key directly (it
-  // never inspects the `<marker>` element), so a synthetic id would come
-  // back unresolvable and warn on round-trip.
-  markerKeys = [];
-  markerKeySet = /* @__PURE__ */ new Set();
-  register(paint) {
-    const existing = this.byPaint.get(paint);
-    if (existing) return existing;
-    const id = paint.fill === "pattern" ? `pat${this.counter++}` : `grad${this.counter++}`;
-    this.byPaint.set(paint, id);
-    this.order.push(paint);
-    return id;
-  }
-  /** The `<defs>` id for a marker key — the key itself, minting nothing.
-   *  `undefined` when nothing is registered under `key`, so a caller emits no
-   *  attribute at all rather than a `url(#…)` pointing at a def that will
-   *  never be written. */
-  markerId(key) {
-    if (getMarker(key) === void 0) return void 0;
-    if (!this.markerKeySet.has(key)) {
-      this.markerKeySet.add(key);
-      this.markerKeys.push(key);
-    }
-    return key;
-  }
-  /** Emit `<defs>...</defs>` XML for every registered paint server and marker. */
-  toDefsXml(onWarn) {
-    if (this.order.length === 0 && this.markerKeys.length === 0) return "";
-    const parts = ["<defs>"];
-    for (const paint of this.order) {
-      parts.push(paintServerXml(this.byPaint.get(paint), paint, onWarn));
-    }
-    for (const key of this.markerKeys) {
-      const entry = getMarker(key);
-      if (!entry) continue;
-      parts.push(entry.toSvg ? entry.toSvg(key, entry) : defaultMarkerXml(key, entry));
-    }
-    parts.push("</defs>");
-    return parts.join("");
-  }
-};
-function defaultMarkerXml(id, entry) {
-  const path = entry.path({ size: 1, stroke: { paint: { fill: "solid", color: "#000" } } });
-  const d = serializePathD(path);
-  const fill = entry.fill === "none" ? "none" : "context-stroke";
-  const outline = entry.outline ? ` stroke="context-stroke" stroke-width="${entry.outline.width}" stroke-linecap="round" stroke-linejoin="round"` : "";
-  return `<marker id="${id}" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" refX="0" refY="0" orient="auto" overflow="visible"><path d="${d}" fill="${fill}"${outline}/></marker>`;
-}
-function paintServerXml(id, paint, onWarn) {
-  if (paint.fill === "pattern") return patternXml(id, paint, onWarn);
-  const builtin = gradientXml(id, paint);
-  if (builtin) return builtin;
-  const custom = getPaintKind(paint.fill)?.toSvg?.(id, paint);
-  if (custom) return custom;
-  onWarn?.(`${paint.fill} fill has no vector form \u2014 omitted from <defs>`);
-  return "";
-}
-function gradientUnitsAttr(units) {
-  return units === "bounds" ? "objectBoundingBox" : "userSpaceOnUse";
-}
-function gradientXml(id, paint) {
-  if (paint.fill === "linear-gradient") {
-    const stops = paint.stops.map(stopXml).join("");
-    return `<linearGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" x1="${trimNumber(paint.from.x)}" y1="${trimNumber(paint.from.y)}" x2="${trimNumber(paint.to.x)}" y2="${trimNumber(paint.to.y)}">${stops}</linearGradient>`;
-  }
-  if (paint.fill === "radial-gradient") {
-    const stops = paint.stops.map(stopXml).join("");
-    return `<radialGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" cx="${trimNumber(paint.center.x)}" cy="${trimNumber(paint.center.y)}" r="${trimNumber(paint.radius)}">${stops}</radialGradient>`;
-  }
-  return "";
-}
-function stopXml(s) {
-  const m = /^#([0-9a-f]{6})([0-9a-f]{2})$/i.exec(s.color);
-  if (m) {
-    const alpha = parseInt(m[2], 16) / 255;
-    return `<stop offset="${trimNumber(s.offset)}" stop-color="#${m[1].toLowerCase()}" stop-opacity="${trimNumber(alpha)}"/>`;
-  }
-  return `<stop offset="${trimNumber(s.offset)}" stop-color="${s.color}"/>`;
-}
-function serializeSvg(nodes, opts = {}) {
-  const registry = new PaintServerRegistry();
-  registerPaintServers(nodes, registry);
-  const bounds = opts.viewBox ?? computeBounds(nodes);
-  const vb = `${trimNumber(bounds.x)} ${trimNumber(bounds.y)} ${trimNumber(bounds.width)} ${trimNumber(bounds.height)}`;
-  const namespaces = opts.namespaces ?? {};
-  const rootAttrs = [`xmlns="http://www.w3.org/2000/svg"`];
-  for (const [prefix, uri] of Object.entries(namespaces)) {
-    rootAttrs.push(`xmlns:${prefix}="${escapeAttr2(uri)}"`);
-  }
-  rootAttrs.push(`viewBox="${vb}"`);
-  if (opts.width != null) rootAttrs.push(`width="${trimNumber(opts.width)}"`);
-  if (opts.height != null) rootAttrs.push(`height="${trimNumber(opts.height)}"`);
-  if (opts.documentMeta) {
-    for (const prefix of Object.keys(namespaces)) {
-      const bucket = opts.documentMeta[prefix];
-      if (!bucket?.attrs) continue;
-      for (const [name, value] of Object.entries(bucket.attrs)) {
-        rootAttrs.push(`${prefix}:${name}="${escapeAttr2(value)}"`);
-      }
-    }
-  }
-  let docMetaXml = "";
-  if (opts.documentMeta) {
-    for (const prefix of Object.keys(namespaces)) {
-      const bucket = opts.documentMeta[prefix];
-      if (!bucket?.elements) continue;
-      for (const [localName, list] of Object.entries(bucket.elements)) {
-        for (const el of list) docMetaXml += namespacedElementXml(prefix, localName, el);
-      }
-    }
-  }
-  const defsXml = registry.toDefsXml(opts.onWarn);
-  const bodyXml = nodes.map((n) => nodeXml(n, registry, namespaces)).join("");
-  const titleXml = opts.title && opts.title.length > 0 ? `<title>${escapeText(opts.title)}</title>` : "";
-  return `<svg ${rootAttrs.join(" ")}>${titleXml}${defsXml}${docMetaXml}${bodyXml}</svg>`;
-}
-function namespacedElementXml(prefix, localName, el) {
-  const attrs = [];
-  for (const [name, value] of Object.entries(el.attrs)) {
-    attrs.push(`${name}="${escapeAttr2(value)}"`);
-  }
-  const head = attrs.length > 0 ? `<${prefix}:${localName} ${attrs.join(" ")}>` : `<${prefix}:${localName}>`;
-  let body = "";
-  if (el.children) {
-    for (const [childName, list] of Object.entries(el.children)) {
-      for (const child of list) body += namespacedElementXml(prefix, childName, child);
-    }
-  } else if (el.text != null) {
-    body = escapeText(el.text);
-  }
-  return `${head}${body}</${prefix}:${localName}>`;
-}
-function metaAttrsXml(meta, namespaces) {
-  if (!meta) return "";
-  const parts = [];
-  for (const prefix of Object.keys(namespaces)) {
-    const bucket = meta[prefix];
-    if (!bucket?.attrs) continue;
-    for (const [name, value] of Object.entries(bucket.attrs)) {
-      parts.push(`${prefix}:${name}="${escapeAttr2(value)}"`);
-    }
-  }
-  return parts.length > 0 ? ` ${parts.join(" ")}` : "";
-}
-function metaElementsXml(meta, namespaces) {
-  if (!meta) return "";
-  let out = "";
-  for (const prefix of Object.keys(namespaces)) {
-    const bucket = meta[prefix];
-    if (!bucket?.elements) continue;
-    for (const [localName, list] of Object.entries(bucket.elements)) {
-      for (const el of list) out += namespacedElementXml(prefix, localName, el);
-    }
-  }
-  return out;
-}
-function registerPaintServers(nodes, registry) {
-  for (const n of nodes) {
-    if (n.kind === "group") {
-      registerPaintServers(n.children, registry);
-    } else if (n.kind === "path") {
-      if (n.fill.kind === "gradient") registry.register(n.fill.paint);
-      if (n.stroke && n.stroke.paint.kind === "gradient") registry.register(n.stroke.paint.paint);
-      registerMarkers(n.stroke, registry);
-    } else if (n.kind === "text") {
-      registerTextPaint(n.fill, registry);
-      registerTextPaint(n.stroke?.paint, registry);
-      registerMarkers(n.stroke, registry);
-      for (const run of n.runs ?? []) {
-        registerTextPaint(run.fill, registry);
-        registerTextPaint(run.stroke?.paint, registry);
-      }
-    }
-  }
-}
-function registerTextPaint(paint, registry) {
-  if (paint && !("color" in paint)) registry.register(paint);
-}
-function markerKeyOfRef(ref) {
-  if (typeof ref === "string") return ref;
-  if (ref && typeof ref === "object" && "key" in ref) return String(ref.key);
-  return void 0;
-}
-function registerMarkers(stroke, registry) {
-  if (!stroke) return;
-  for (const ref of [stroke.markerStart, stroke.markerMid, stroke.markerEnd]) {
-    const key = markerKeyOfRef(ref);
-    if (key) registry.markerId(key);
-  }
-}
-function nodeXml(node, registry, namespaces) {
-  if (node.kind === "group") return groupXml(node, registry, namespaces);
-  if (node.kind === "text") return textXml(node, registry, namespaces);
-  if (node.kind === "image") return imageXml(node, namespaces);
-  return pathXml(node, registry, namespaces);
-}
-function imageXml(node, namespaces) {
-  const attrs = [
-    `href="${escapeAttr2(node.href)}"`,
-    `x="${trimNumber(node.x)}"`,
-    `y="${trimNumber(node.y)}"`,
-    `width="${trimNumber(node.width)}"`,
-    `height="${trimNumber(node.height)}"`,
-    `preserveAspectRatio="none"`
-  ];
-  if (node.opacity != null && node.opacity !== 1) {
-    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  if (node.rotation != null && node.rotation !== 0) {
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const deg = node.rotation * 180 / Math.PI;
-    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
-  }
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const metaEls = metaElementsXml(node.meta, namespaces);
-  if (metaEls) return `<image ${attrs.join(" ")}${metaAttrs}>${metaEls}</image>`;
-  return `<image ${attrs.join(" ")}${metaAttrs}/>`;
-}
-function groupXml(node, registry, namespaces) {
-  const attrs = [];
-  if (node.transform) {
-    const m = formatMatrix(node.transform);
-    if (m) attrs.push(`transform="${m}"`);
-  }
-  if (node.opacity != null && node.opacity !== 1) {
-    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
-  const body = node.children.map((c2) => nodeXml(c2, registry, namespaces)).join("");
-  return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
-}
-function pathXml(node, registry, namespaces) {
-  const attrs = [`d="${serializePathD(node.path)}"`];
-  const fillAttrs = paintAttrs(node.fill, "fill", registry);
-  for (const a of fillAttrs) attrs.push(a);
-  if (node.path.kind === "polygon" && node.path.fillRule === "evenodd") {
-    attrs.push(`fill-rule="evenodd"`);
-  }
-  if (node.stroke) {
-    const strokeAttrs = strokeAttrsFor(node.stroke, registry);
-    for (const a of strokeAttrs) attrs.push(a);
-  } else {
-    attrs.push('stroke="none"');
-  }
-  if (node.opacity != null && node.opacity !== 1) {
-    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  if (node.rotation != null && node.rotation !== 0) {
-    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)})"`);
-  }
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const metaEls = metaElementsXml(node.meta, namespaces);
-  if (metaEls) {
-    return `<path ${attrs.join(" ")}${metaAttrs}>${metaEls}</path>`;
-  }
-  return `<path ${attrs.join(" ")}${metaAttrs}/>`;
-}
-function paintAttrs(paint, name, registry, includeOpacity = true) {
-  if (paint.kind === "none") return [`${name}="none"`];
-  if (paint.kind === "solid") {
-    const out = [`${name}="${paint.color}"`];
-    if (includeOpacity && paint.opacity != null && paint.opacity !== 1) {
-      out.push(`${name}-opacity="${trimNumber(paint.opacity)}"`);
-    }
-    return out;
-  }
-  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) {
-  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 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(paint)})"`);
-  }
-  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) {
-    attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
-  }
-  if (stroke.miterLimit != null) attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
-  for (const [field, attr] of [
-    ["markerStart", "marker-start"],
-    ["markerMid", "marker-mid"],
-    ["markerEnd", "marker-end"]
-  ]) {
-    const ref = stroke[field];
-    if (ref === void 0) continue;
-    const key = typeof ref === "string" ? ref : ref.key;
-    const id = registry.markerId(key);
-    if (id === void 0) continue;
-    attrs.push(`${attr}="url(#${id})"`);
-  }
-  return attrs;
-}
-function strokeAttrsFor(stroke, registry) {
-  const attrs = paintAttrs(stroke.paint, "stroke", registry, false);
-  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)}"`);
-  }
-  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) {
-    attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
-  }
-  if (stroke.miterLimit != null) {
-    attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
-  }
-  for (const [field, attr] of [
-    ["markerStart", "marker-start"],
-    ["markerMid", "marker-mid"],
-    ["markerEnd", "marker-end"]
-  ]) {
-    const ref = stroke[field];
-    if (ref === void 0) continue;
-    const id = registry.markerId(ref);
-    if (id === void 0) continue;
-    attrs.push(`${attr}="url(#${id})"`);
-  }
-  return attrs;
-}
-function computeBounds(nodes) {
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  const visit = (n, ctm) => {
-    if (n.kind === "group") {
-      const childCtm = n.transform ? multiply(ctm, n.transform) : ctm;
-      n.children.forEach((c2) => visit(c2, childCtm));
-      return;
-    }
-    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;
-      if (py > maxY) maxY = py;
-    }
-  };
-  nodes.forEach((n) => visit(n, IDENTITY_MATRIX));
-  if (!Number.isFinite(minX)) {
-    return { x: 0, y: 0, width: 0, height: 0 };
-  }
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-function corners(b) {
-  return [[b.minX, b.minY], [b.maxX, b.minY], [b.maxX, b.maxY], [b.minX, b.maxY]];
-}
-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]);
-}
-function textXml(node, registry, namespaces) {
-  const attrs = [
-    `x="${trimNumber(node.x)}"`,
-    `y="${trimNumber(node.y)}"`,
-    `dominant-baseline="text-before-edge"`,
-    // The runs model stores real line breaks; SVG's default whitespace
-    // handling would collapse them (and any indentation) away on re-import.
-    `xml:space="preserve"`,
-    `data-weasel-width="${trimNumber(node.width)}"`,
-    `data-weasel-height="${trimNumber(node.height)}"`
-  ];
-  const style = node.style;
-  if (style?.fontSize != null) attrs.push(`font-size="${trimNumber(style.fontSize)}"`);
-  if (style?.fontFamily) attrs.push(`font-family="${escapeAttr2(style.fontFamily)}"`);
-  if (style?.fontWeight != null) attrs.push(`font-weight="${String(style.fontWeight)}"`);
-  if (style?.fontStyle && style.fontStyle !== "normal") attrs.push(`font-style="${style.fontStyle}"`);
-  const direction = style?.direction ?? "ltr";
-  if (direction === "rtl") attrs.push('direction="rtl"');
-  if (style?.align != null || direction === "rtl") {
-    const align = style?.align ?? "left";
-    const anchor = align === "center" ? "middle" : align === "start" ? "start" : align === "end" ? "end" : align === "left" === (direction === "ltr") ? "start" : "end";
-    if (anchor !== "start") attrs.push(`text-anchor="${anchor}"`);
-  }
-  if (style?.letterSpacing != null && style.letterSpacing !== 0) {
-    attrs.push(`letter-spacing="${trimNumber(style.letterSpacing)}"`);
-  }
-  const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
-  if (decoration) attrs.push(`text-decoration="${decoration}"`);
-  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) {
-        attrs.push(`fill-opacity="${trimNumber(node.fill.opacity)}"`);
-      }
-    } else {
-      const id = registry.register(node.fill);
-      attrs.push(`fill="url(#${id})"`);
-    }
-  }
-  for (const a of coreStrokeAttrs(node.stroke, registry)) attrs.push(a);
-  if (node.opacity != null && node.opacity !== 1) {
-    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
-  }
-  if (node.rotation != null && node.rotation !== 0) {
-    const cx = node.x + node.width / 2;
-    const cy = node.y + node.height / 2;
-    const deg = node.rotation * 180 / Math.PI;
-    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
-  }
-  const body = node.runs && node.runs.length > 0 ? node.runs.map((r2) => runXml(r2, registry)).join("") : escapeText(node.text);
-  const metaAttrs = metaAttrsXml(node.meta, namespaces);
-  const metaEls = metaElementsXml(node.meta, namespaces);
-  return `<text ${attrs.join(" ")}${metaAttrs}>${body}${metaEls}</text>`;
-}
-function runXml(run, registry) {
-  const attrs = [];
-  if (run.bold) attrs.push(`font-weight="700"`);
-  if (run.italic) attrs.push(`font-style="italic"`);
-  if (run.fontFamily) attrs.push(`font-family="${escapeAttr2(run.fontFamily)}"`);
-  const presetScale = run.script != null && run.baselineShift != null ? SCRIPT_METRICS[run.script].size : void 0;
-  const scale = run.fontScale ?? presetScale;
-  if (run.fontSize != null) attrs.push(`font-size="${trimNumber(run.fontSize)}"`);
-  else if (scale != null) attrs.push(`font-size="${trimNumber(scale * 100)}%"`);
-  if (run.baselineShift != null) {
-    attrs.push(`baseline-shift="${trimNumber(run.baselineShift * 100)}%"`);
-  } else if (run.script) {
-    attrs.push(`baseline-shift="${run.script}"`);
-  }
-  if (run.letterSpacing != null) {
-    attrs.push(`letter-spacing="${trimNumber(run.letterSpacing)}"`);
-  }
-  const runDecoration = textDecorationValue(run.underline, run.strikethrough, run.overline);
-  if (runDecoration) attrs.push(`text-decoration="${runDecoration}"`);
-  if (run.fill) {
-    if ("color" in run.fill) {
-      attrs.push(`fill="${run.fill.color}"`);
-    } else {
-      const id = registry.register(run.fill);
-      attrs.push(`fill="url(#${id})"`);
-    }
-  }
-  for (const a of coreStrokeAttrs(run.stroke, registry)) attrs.push(a);
-  const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
-  return `${head}${escapeText(run.text)}</tspan>`;
-}
-function textDecorationValue(underline, strikethrough, overline) {
-  const tokens = [];
-  if (underline) tokens.push("underline");
-  if (strikethrough) tokens.push("line-through");
-  if (overline) tokens.push("overline");
-  return tokens.length > 0 ? tokens.join(" ") : null;
-}
-function escapeAttr2(s) {
-  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
-}
-function escapeText(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function pathBounds(path) {
-  if (path.kind === "rect") {
-    return {
-      minX: path.x,
-      minY: path.y,
-      maxX: path.x + path.width,
-      maxY: path.y + path.height
-    };
-  }
-  const b = boundsOfPath(path);
-  return { minX: b.x, minY: b.y, maxX: b.x + b.width, maxY: b.y + b.height };
-}
 var MARK_COLOR = "#e5484d";
 var MARK_WIDTH = 2;
 var TEXT_SIZE = 14;
-var toWorld = (p, content) => ({
-  x: p.x * content.w,
-  y: p.y * content.h
+var toWorld = (p2, content) => ({
+  x: p2.x * content.w,
+  y: p2.y * content.h
 });
-function vertices(m, content) {
-  const stored = m.data.points;
-  if (stored && stored.length >= 2) return stored.map((p) => toWorld(p, content));
-  const { x, y: y2, width, height } = m.pose;
+function vertices(m2, content) {
+  const stored = m2.data.points;
+  if (stored && stored.length >= 2) return stored.map((p2) => toWorld(p2, content));
+  const { x, y: y3, width, height } = m2.pose;
   return [
-    { x, y: y2 },
-    { x: x + width, y: y2 + height }
+    { x, y: y3 },
+    { x: x + width, y: y3 + height }
   ];
 }
 function polyline(points) {
-  const b = new PathBuilder();
+  const b2 = new PathBuilder();
   const first = points[0];
   if (!first) return rectPath(0, 0, 0, 0);
-  b.moveTo(first.x, first.y);
-  for (const p of points.slice(1)) b.lineTo(p.x, p.y);
-  return b.build();
+  b2.moveTo(first.x, first.y);
+  for (const p2 of points.slice(1)) b2.lineTo(p2.x, p2.y);
+  return b2.build();
 }
-function markCommands(m, content, style = {}) {
+function markCommands(m2, content, style = {}) {
   const color = style.color ?? MARK_COLOR;
   const stroke = {
     paint: { color },
@@ -673,35 +86,35 @@ function markCommands(m, content, style = {}) {
     join: "round",
     ...style.stale ? { dash: [6, 4] } : {}
   };
-  switch (m.data.kind) {
+  switch (m2.data.kind) {
     case "rect":
       return [
-        { kind: "path", path: rectPath(m.pose.x, m.pose.y, m.pose.width, m.pose.height), stroke }
+        { kind: "path", path: rectPath(m2.pose.x, m2.pose.y, m2.pose.width, m2.pose.height), stroke }
       ];
     case "ellipse":
-      return [{ kind: "path", path: ellipsePath(m.pose), stroke }];
+      return [{ kind: "path", path: ellipsePath(m2.pose), stroke }];
     case "line": {
-      const [a, b] = vertices(m, content);
-      return [{ kind: "path", path: linePath(a, b), stroke }];
+      const [a4, b2] = vertices(m2, content);
+      return [{ kind: "path", path: linePath(a4, b2), stroke }];
     }
     case "arrow": {
-      const [a, b] = vertices(m, content);
+      const [a4, b2] = vertices(m2, content);
       const marked = { ...stroke, markerEnd: "arrow" };
-      const path = linePath(a, b);
+      const path = linePath(a4, b2);
       return [
         { kind: "path", path, stroke: marked },
         ...markerDrawCommands(path, marked, MARK_WIDTH, void 0)
       ];
     }
     case "stroke":
-      return [{ kind: "path", path: polyline(vertices(m, content)), stroke }];
+      return [{ kind: "path", path: polyline(vertices(m2, content)), stroke }];
     case "text": {
-      const text = m.data.title;
+      const text = m2.data.title;
       if (!text) return [];
       return [
         textCommand(
-          m.pose.x,
-          m.pose.y,
+          m2.pose.x,
+          m2.pose.y,
           text,
           { fontSize: TEXT_SIZE },
           void 0,
@@ -721,8 +134,8 @@ function seenFrom(config, keys) {
   const out = {};
   if (config === null || typeof config !== "object") return out;
   const src = config;
-  for (const k of keys) {
-    if (k in src) out[k] = src[k];
+  for (const k3 of keys) {
+    if (k3 in src) out[k3] = src[k3];
   }
   return out;
 }
@@ -730,9 +143,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 k of keys) {
-    if (!(k in seen)) continue;
-    if (!Object.is(seen[k], src[k])) return true;
+  for (const k3 of keys) {
+    if (!(k3 in seen)) continue;
+    if (!Object.is(seen[k3], src[k3])) return true;
   }
   return false;
 }
@@ -743,7 +156,7 @@ function createMarkDrawOne(opts) {
 }
 function resolveMarkStyle(data, opts) {
   return {
-    color: opts.meaning?.statuses?.find((s) => s.id === data.status)?.color,
+    color: opts.meaning?.statuses?.find((s5) => s5.id === data.status)?.color,
     // Read off the node rather than through the store's `isStale`, which
     // wants a projected Annotation this path does not have.
     stale: isStale(data.seen, opts.config, opts.positionDependsOn ?? [])
@@ -770,10 +183,11 @@ function toSvgStroke(stroke) {
     ...stroke.cap ? { cap: stroke.cap } : {},
     ...stroke.join ? { join: stroke.join } : {},
     ...stroke.dash ? { dash: [...stroke.dash] } : {},
-    ...stroke.miterLimit != null ? { miterLimit: stroke.miterLimit } : {}
+    ...stroke.miterLimit != null ? { miterLimit: stroke.miterLimit } : {},
+    ...stroke.align ? { align: stroke.align } : {}
   };
 }
-function toSvgNode(cmd, m) {
+function toSvgNode(cmd, m2) {
   if (cmd.kind === "path") {
     return {
       kind: "path",
@@ -787,8 +201,8 @@ function toSvgNode(cmd, m) {
       kind: "text",
       x: cmd.x,
       y: cmd.y,
-      width: m.pose.width,
-      height: m.pose.height,
+      width: m2.pose.width,
+      height: m2.pose.height,
       text: cmd.runs.map((run) => run.text).join(""),
       style: cmd.style,
       ...cmd.runs[0]?.fill ? { fill: cmd.runs[0].fill } : {}
@@ -796,8 +210,8 @@ function toSvgNode(cmd, m) {
   }
   throw new Error(`[labkit] a mark drew a '${cmd.kind}' command, which has no vector form`);
 }
-function markSvgNodes(m, content, style = {}) {
-  return markCommands(m, content, style).map((cmd) => toSvgNode(cmd, m));
+function markSvgNodes(m2, content, style = {}) {
+  return markCommands(m2, content, style).map((cmd) => toSvgNode(cmd, m2));
 }
 
 // src/annotations/capture.ts
@@ -806,7 +220,7 @@ function capturePlan(base, format) {
   if (format === "svg") return "svg-document";
   return base?.kind === "svg" ? "svg-document" : "raster-stack";
 }
-function nestBaseSvg(markup, w3, h) {
+function nestBaseSvg(markup, w3, h2) {
   const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
   const root = doc.documentElement;
   if (doc.getElementsByTagName("parsererror").length > 0 || root.localName !== "svg") {
@@ -815,16 +229,16 @@ function nestBaseSvg(markup, w3, h) {
   root.setAttribute("x", "0");
   root.setAttribute("y", "0");
   root.setAttribute("width", String(w3));
-  root.setAttribute("height", String(h));
+  root.setAttribute("height", String(h2));
   return new XMLSerializer().serializeToString(root);
 }
-function embedRasterBase(base, w3, h, onWarn) {
+function embedRasterBase(base, w3, h2, onWarn) {
   const href = base.kind === "canvas" ? base.canvas.toDataURL() : base.kind === "image" ? base.src : "";
   if (base.kind === "image" && !href.startsWith("data:")) {
     onWarn?.(`base image '${href}' is a reference, so this SVG is not self-contained`);
   }
-  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w3, height: h }], {
-    viewBox: { x: 0, y: 0, width: w3, height: h }
+  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w3, height: h2 }], {
+    viewBox: { x: 0, y: 0, width: w3, height: h2 }
   });
 }
 function markNodesOf(scene, draw) {
@@ -840,15 +254,15 @@ function markNodesOf(scene, draw) {
 }
 function composeCaptureSvg(args) {
   const { base, scene, draw, scale, onWarn } = args;
-  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 { w: w3, h: h2 } = draw.content;
+  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w3, h2) : embedRasterBase(base, w3, h2, onWarn);
   const marksXml = serializeSvg(markNodesOf(scene, draw), {
-    viewBox: { x: 0, y: 0, width: w3, height: h },
+    viewBox: { x: 0, y: 0, width: w3, height: h2 },
     onWarn
   });
   const outW = Math.max(1, Math.round(w3 * scale));
-  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>`;
+  const outH = Math.max(1, Math.round(h2 * scale));
+  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w3} ${h2}">${baseXml}${marksXml}</svg>`;
 }
 function context2d(width, height) {
   const canvas = document.createElement("canvas");
@@ -942,26 +356,26 @@ async function captureTarget(args, opts = {}) {
 }
 
 // src/annotations/frac.ts
-function fracToWorld(f2, content) {
+function fracToWorld(f3, content) {
   return {
-    x: f2.x * content.w,
-    y: f2.y * content.h,
-    width: f2.w * content.w,
-    height: f2.h * content.h
+    x: f3.x * content.w,
+    y: f3.y * content.h,
+    width: f3.w * content.w,
+    height: f3.h * content.h
   };
 }
-function worldToFrac(r2, content) {
+function worldToFrac(r10, content) {
   const sx = content.w === 0 ? 0 : 1 / content.w;
   const sy = content.h === 0 ? 0 : 1 / content.h;
-  return { x: r2.x * sx, y: r2.y * sy, w: r2.width * sx, h: r2.height * sy };
+  return { x: r10.x * sx, y: r10.y * sy, w: r10.width * sx, h: r10.height * sy };
 }
 var DP = 1e4;
-function roundFrac(f2) {
+function roundFrac(f3) {
   return {
-    x: Math.round(f2.x * DP) / DP,
-    y: Math.round(f2.y * DP) / DP,
-    w: Math.round(f2.w * DP) / DP,
-    h: Math.round(f2.h * DP) / DP
+    x: Math.round(f3.x * DP) / DP,
+    y: Math.round(f3.y * DP) / DP,
+    w: Math.round(f3.w * DP) / DP,
+    h: Math.round(f3.h * DP) / DP
   };
 }
 function fracContains(box, pt, tol = 0) {
@@ -1003,8 +417,8 @@ var MarkHistory = class {
   /** The target `undo` would act on, skipping any whose scene has nothing
    *  left — a scene can drop entries this ordering still lists. */
   next(stack, can, at) {
-    for (let i = stack.length - 1; i >= 0; i--) {
-      const target = stack[i];
+    for (let i3 = stack.length - 1; i3 >= 0; i3--) {
+      const target = stack[i3];
       if (target === void 0) continue;
       const scene = at(target);
       if (scene && can(scene)) return target;
@@ -1012,13 +426,13 @@ var MarkHistory = class {
     return null;
   }
   canUndo(at) {
-    return this.next(this.undoable, (s) => s.canUndo(), at) !== null;
+    return this.next(this.undoable, (s5) => s5.canUndo(), at) !== null;
   }
   canRedo(at) {
-    return this.next(this.redoable, (s) => s.canRedo(), at) !== null;
+    return this.next(this.redoable, (s5) => s5.canRedo(), at) !== null;
   }
   undo(at) {
-    const target = this.next(this.undoable, (s) => s.canUndo(), at);
+    const target = this.next(this.undoable, (s5) => s5.canUndo(), at);
     const scene = target === null ? void 0 : at(target);
     if (!scene) return false;
     this.replaying = "undo";
@@ -1029,7 +443,7 @@ var MarkHistory = class {
     }
   }
   redo(at) {
-    const target = this.next(this.redoable, (s) => s.canRedo(), at);
+    const target = this.next(this.redoable, (s5) => s5.canRedo(), at);
     const scene = target === null ? void 0 : at(target);
     if (!scene) return false;
     this.replaying = "redo";
@@ -1041,9 +455,9 @@ var MarkHistory = class {
   }
 };
 function drop(stack, value) {
-  for (let i = stack.length - 1; i >= 0; i--) {
-    if (stack[i] === value) {
-      stack.splice(i, 1);
+  for (let i3 = stack.length - 1; i3 >= 0; i3--) {
+    if (stack[i3] === value) {
+      stack.splice(i3, 1);
       return;
     }
   }
@@ -1104,21 +518,21 @@ function createAnnotationStore(opts) {
     if (!scene) return [];
     const out = [];
     for (const id of scene.renderOrder()) {
-      const a = project(target, String(id));
-      if (a) out.push(a);
+      const a4 = project(target, String(id));
+      if (a4) out.push(a4);
     }
     return out;
   };
   const all = () => liveTargets().flatMap(marksOn);
-  const matches = (a, q) => {
-    if (q.target !== void 0 && a.target !== q.target) return false;
-    if (q.kind !== void 0 && a.kind !== q.kind) return false;
-    if (q.status !== void 0 && a.status !== q.status) return false;
-    if (q.tags !== void 0) {
-      const have = a.tags ?? [];
-      for (const t of q.tags) if (!have.includes(t)) return false;
+  const matches = (a4, q3) => {
+    if (q3.target !== void 0 && a4.target !== q3.target) return false;
+    if (q3.kind !== void 0 && a4.kind !== q3.kind) return false;
+    if (q3.status !== void 0 && a4.status !== q3.status) return false;
+    if (q3.tags !== void 0) {
+      const have = a4.tags ?? [];
+      for (const t of q3.tags) if (!have.includes(t)) return false;
     }
-    if (q.where && !q.where(a)) return false;
+    if (q3.where && !q3.where(a4)) return false;
     return true;
   };
   const nodeOf = (id) => {
@@ -1135,18 +549,18 @@ function createAnnotationStore(opts) {
       const parts = splitId(id);
       return parts ? project(parts.target, parts.node) : void 0;
     },
-    query(q) {
-      return q ? all().filter((a) => matches(a, q)) : all();
+    query(q3) {
+      return q3 ? all().filter((a4) => matches(a4, q3)) : all();
     },
     hitTest(target, pt, tol = 0) {
-      return marksOn(target).filter((a) => fracContains(a.frac, pt, tol)).reverse();
+      return marksOn(target).filter((a4) => fracContains(a4.frac, pt, tol)).reverse();
     },
     within(target, box) {
-      return marksOn(target).filter((a) => fracEncloses(box, a.frac));
+      return marksOn(target).filter((a4) => fracEncloses(box, a4.frac));
     },
-    isStale(a, config) {
-      const keys = targetOf(a.target)?.positionDependsOn ?? [];
-      return isStale(a.seen, config, keys);
+    isStale(a4, config) {
+      const keys = targetOf(a4.target)?.positionDependsOn ?? [];
+      return isStale(a4.seen, config, keys);
     },
     canUndo() {
       return history.canUndo(historySceneAt);
@@ -1184,7 +598,7 @@ function createAnnotationStore(opts) {
       for (const [target, scene] of scenes) {
         const next = wanted.get(target) ?? [];
         const now = scene.getSelection();
-        if (now.length === next.length && next.every((n, i) => String(now[i]) === n)) continue;
+        if (now.length === next.length && next.every((n6, i3) => String(now[i3]) === n6)) continue;
         scene.setSelection(next.map(asNodeId$1));
       }
     },
@@ -1246,7 +660,7 @@ function createAnnotationStore(opts) {
             content: info.content,
             positionDependsOn: info.positionDependsOn,
             config: opts.config?.(),
-            meaning: opts.meaning
+            meaning: typeof opts.meaning === "function" ? opts.meaning() : opts.meaning
           },
           base: info.base,
           onWarn: (message) => console.warn(`[labkit] capture: ${message}`)
@@ -1269,18 +683,46 @@ function annotationsFromJSON(raw, targets, rest = {}) {
   return createAnnotationStore({ targets, restore: doc.scenes, ...rest });
 }
 
+// src/annotations/toolMap.ts
+var TOOLS = {
+  select: { weaselTool: "select" },
+  stroke: { weaselTool: "pencil", kind: "stroke" },
+  line: { weaselTool: "line", kind: "line" },
+  arrow: { weaselTool: "line", kind: "arrow" },
+  rect: { weaselTool: "rect", kind: "rect" },
+  ellipse: { weaselTool: "ellipse", kind: "ellipse" },
+  text: { weaselTool: "text", kind: "text" }
+};
+var ANNOTATION_TOOLS = [
+  // Not in `TOOLS`: an id the map does not carry is what leaves the overlay idle.
+  { id: "pointer", label: "Interact", icon: a2, group: "annotate" },
+  { id: "select", label: "Select", icon: p, group: "annotate" },
+  { id: "stroke", label: "Freehand", icon: u, group: "annotate" },
+  { id: "line", label: "Line", icon: c, group: "annotate" },
+  { id: "arrow", label: "Arrow", icon: n, group: "annotate" },
+  { id: "rect", label: "Rectangle", icon: f, group: "annotate" },
+  { id: "ellipse", label: "Ellipse", icon: r, group: "annotate" },
+  { id: "text", label: "Text", icon: h, group: "annotate" }
+];
+function annotationToolInfo(id) {
+  return id === null ? void 0 : TOOLS[id];
+}
+var ANNOTATION_WEASEL_TOOLS = [
+  ...new Set(Object.values(TOOLS).map((t) => t.weaselTool))
+];
+
 // src/annotations/view.ts
-function toWeaselView(v) {
-  return { x: v.pan.x, y: v.pan.y, scale: { x: v.zoom, y: v.zoom } };
+function toWeaselView(v2) {
+  return { x: v2.pan.x, y: v2.pan.y, scale: { x: v2.zoom, y: v2.zoom } };
 }
-function fromWeaselView(v) {
-  return { zoom: v.scale.x, pan: { x: v.x, y: v.y } };
+function fromWeaselView(v2) {
+  return { zoom: v2.scale.x, pan: { x: v2.x, y: v2.y } };
 }
 function fitView(content, pane) {
   const zoom = content.w > 0 && content.h > 0 ? Math.min(pane.w / content.w, pane.h / content.h) : 1;
   return { zoom: Number.isFinite(zoom) && zoom > 0 ? zoom : 1, pan: { x: 0, y: 0 } };
 }
-var sameRect = (a, b) => a !== null && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+var sameRect = (a4, b2) => a4 !== null && a4.x === b2.x && a4.y === b2.y && a4.w === b2.w && a4.h === b2.h;
 function ToolBridge({ toolId }) {
   const tools = useActiveToolContext();
   const setActive = tools.setActive;
@@ -1290,9 +732,9 @@ function ToolBridge({ toolId }) {
   return null;
 }
 function pointsOf(extras, content) {
-  const toFrac = (p) => ({
-    x: content.w === 0 ? 0 : p.x / content.w,
-    y: content.h === 0 ? 0 : p.y / content.h
+  const toFrac = (p2) => ({
+    x: content.w === 0 ? 0 : p2.x / content.w,
+    y: content.h === 0 ? 0 : p2.y / content.h
   });
   if (extras.kind === "line") {
     return [toFrac(extras.a), toFrac(extras.b)];
@@ -1334,9 +776,40 @@ function AnnotationOverlay({
     },
     [surface, tileId]
   );
+  const painted = useRef(false);
+  const canvasRef = useRef(canvas);
+  if (canvasRef.current !== canvas) painted.current = false;
+  canvasRef.current = canvas;
+  const unsubscribeFrame = useRef(null);
+  const attachSceneCanvas = useCallback((api) => {
+    sceneCanvas.current = api;
+    unsubscribeFrame.current?.();
+    unsubscribeFrame.current = api ? api.subscribeFrame(() => {
+      painted.current = true;
+    }) : null;
+  }, []);
+  useEffect(() => {
+    if (!surface) return;
+    return surface.registerClear(tileId, (size, dpr) => {
+      if (!painted.current) return;
+      const gl = canvasRef.current?.getContext("webgl2");
+      if (!gl) return;
+      gl.disable(gl.SCISSOR_TEST);
+      gl.viewport(0, 0, Math.round(size.width * dpr), Math.round(size.height * dpr));
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+    });
+  }, [surface, tileId]);
+  const wheelSlot = useContext(CameraWheelContext);
+  useEffect(() => {
+    if (!input || !wheelSlot) return;
+    const wheel = (e) => wheelSlot.current?.(e);
+    input.addEventListener("wheel", wheel, { passive: false });
+    return () => input.removeEventListener("wheel", wheel);
+  }, [input, wheelSlot]);
   useEffect(
     () => surface?.registerPainter(tileId, (next) => {
-      setRect((prev) => sameRect(prev, next) ? prev : next);
+      flushSync(() => setRect((prev) => sameRect(prev, next) ? prev : next));
       sceneCanvas.current?.requestRedraw();
     }),
     [surface, tileId]
@@ -1380,6 +853,7 @@ function AnnotationOverlay({
           ref: setInput,
           className: "lk-annotate__input",
           "data-annotation-target": id,
+          "data-idle": annotationToolInfo(activeToolId) ? void 0 : "",
           role: "application",
           "aria-label": `Annotations on ${id}`,
           tabIndex: 0,
@@ -1394,7 +868,7 @@ function AnnotationOverlay({
           /* @__PURE__ */ jsx(
             SceneCanvas,
             {
-              ref: sceneCanvas,
+              ref: attachSceneCanvas,
               scene,
               width: rect.w,
               height: rect.h,
@@ -1434,314 +908,6 @@ function AnnotationTargets({
   )) });
 }
 
-// src/config/builder.ts
-function isConfigBranch(entry) {
-  return "children" in entry;
-}
-var BaseNode = class {
-  constructor(defaultValue, annotations = {}, options = {}) {
-    this.annotations = annotations;
-    this.options = options;
-    this.default = defaultValue;
-  }
-  annotations;
-  options;
-  // `default` is a reserved word in a parameter position, so the field is
-  // declared rather than taken as a parameter property.
-  default;
-  /** Clone into the same subclass. Subclasses with extra constructor
-   *  arguments override this. */
-  with(annotations, options) {
-    const Ctor = this.constructor;
-    return new Ctor(this.default, annotations, options);
-  }
-  ann(patch) {
-    return this.with({ ...this.annotations, ...patch }, this.options);
-  }
-  opt(patch) {
-    return this.with(this.annotations, { ...this.options, ...patch });
-  }
-  /** Human-readable label. Defaults to the key, title-cased. */
-  label(name) {
-    return this.ann({ name });
-  }
-  /** Longer help text, surfaced as a tooltip on the row label. */
-  describe(description) {
-    return this.ann({ description });
-  }
-  /** Omit from the panel unless it is asked to show hidden leaves. */
-  hidden() {
-    return this.ann({ hidden: true });
-  }
-  /** Pair with a sibling sharing this id, side-by-side on one row. */
-  pair(pair) {
-    return this.ann({ pair });
-  }
-  /** 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. */
-  showIf(predicate) {
-    return this.opt({ showIf: predicate });
-  }
-  /** Draw this one row yourself, keeping the kind, default and validation. */
-  render(renderer) {
-    return this.opt({ render: renderer });
-  }
-};
-var NumberNode = class extends BaseNode {
-  kind = "number";
-  /** Bound the value. A number with both bounds renders as a slider. */
-  range(min, max) {
-    return this.ann({ min, max });
-  }
-  step(step) {
-    return this.ann({ step });
-  }
-  /** A display suffix for the value — `'px'`, `'ms'`, `'°'`. Presentation only:
-   *  it is never parsed, and the stored value stays a plain number. */
-  suffix(suffix) {
-    return this.ann({ suffix });
-  }
-  /** Force a slider even without both bounds. */
-  slider() {
-    return this.ann({ control: "slider" });
-  }
-  /** Force a typed input even when both bounds are set. */
-  input() {
-    return this.ann({ control: "input" });
-  }
-};
-var BooleanNode = class extends BaseNode {
-  kind = "boolean";
-  /** Ask for a switch. `ControlPanel` still draws a checkbox; weasel-ui's
-   *  `PrefsForm` honors the distinction. */
-  toggle() {
-    return this.ann({ control: "switch" });
-  }
-};
-var StringNode = class extends BaseNode {
-  kind = "string";
-  placeholder(placeholder) {
-    return this.ann({ placeholder });
-  }
-  maxLength(maxLength) {
-    return this.ann({ maxLength });
-  }
-  /** Milliseconds to debounce live writes. 0 commits every keystroke. */
-  debounce(debounceMs) {
-    return this.ann({ debounceMs });
-  }
-};
-var ColorNode = class extends BaseNode {
-  kind = "color";
-};
-var EnumNode = class extends BaseNode {
-  kind = "enum";
-  /** Render as a segmented control rather than a select. */
-  radio() {
-    return this.ann({ control: "radio" });
-  }
-  /** Relabel the choices. Named `labels` rather than `options` because
-   *  `options` is the node's own extras bag. */
-  labels(options) {
-    return this.ann({ options });
-  }
-};
-var ValueNode = class extends BaseNode {
-  kind = null;
-};
-var CustomNode = class _CustomNode extends BaseNode {
-  constructor(kind, defaultValue, annotations = {}, options = {}) {
-    super(defaultValue, annotations, options);
-    this.kind = kind;
-  }
-  kind;
-  with(annotations, options) {
-    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),
-  boolean: (def) => new BooleanNode(def),
-  string: (def) => new StringNode(def),
-  color: (def) => new ColorNode(def),
-  /** A fixed set of choices. The default's literal type flows into the config
-   *  type, so `f.enum('fast', ['fast', 'accurate'])` gives
-   *  `'fast' | 'accurate'` with no `as const`. */
-  enum: (def, options) => new EnumNode(def, { options: expand(options) }),
-  /** 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 and groups into an instrument's config. */
-  schema(nodes) {
-    return { nodes, defaults: () => shapeDefaults(nodes) };
-  }
-};
-
-// src/config/rules.ts
-function titleCase(key) {
-  const words = key.replace(/[_-]+/g, " ").split(/(?<=[a-z0-9])(?=[A-Z])/).join(" ").trim().toLowerCase();
-  return words.length === 0 ? words : words[0].toUpperCase() + words.slice(1);
-}
-var kindFromValue = (ctx) => {
-  const t = typeof ctx.default;
-  if (t === "boolean" || t === "number" || t === "string") return { kind: t };
-  return null;
-};
-var labelFromKey = (ctx) => ({ name: titleCase(ctx.key) });
-var sliderWhenBounded = (ctx) => {
-  if (ctx.leaf.kind !== "number") return null;
-  const bounded = ctx.leaf.min !== void 0 && ctx.leaf.max !== void 0;
-  return bounded ? { control: "slider" } : null;
-};
-var descriptionDefault = () => ({ description: "" });
-var builtinRules = [
-  kindFromValue,
-  labelFromKey,
-  sliderWhenBounded,
-  descriptionDefault
-];
-function applyRules(seed, ctx, rules) {
-  const acc = { ...seed };
-  for (const rule of rules) {
-    const patch = rule({ ...ctx, leaf: acc });
-    if (patch === null) continue;
-    for (const [k, v] of Object.entries(patch)) {
-      if (v !== void 0 && acc[k] === void 0) {
-        acc[k] = v;
-      }
-    }
-  }
-  return acc;
-}
-
-// src/config/resolve.ts
-function defined(annotations) {
-  const out = {};
-  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 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) {
-      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;
-      }
-    }
-    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 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() {
-  const ctx = useContext(LabContext);
-  if (ctx === null) {
-    throw new Error("useLabContext must be used inside <Lab>");
-  }
-  return ctx;
-}
-
-// src/config/useConfigSchema.ts
-var NO_RULES = [];
-function useConfigSchema(instrument) {
-  const lab = useContext(LabContext);
-  const rules = lab?.configRules ?? NO_RULES;
-  return useMemo(
-    () => instrument.config ? resolveConfigSchema(instrument.config, rules) : fromConfigFields(instrument.configSchema?.() ?? []),
-    [instrument, rules]
-  );
-}
-
 // src/instrument/defineInstrument.ts
 function defineInstrument(spec) {
   if (spec.config && !("defaultConfig" in spec && spec.defaultConfig)) {
@@ -1799,957 +965,207 @@ function validateConfigSchema(fields) {
   }
   return { valid: errors.length === 0, errors };
 }
+var AnnotationPreloadContext = createContext(null);
 
-// ../theme/dist/chunk-D6AFL2JW.js
-var THEME_SOURCES = {
-  "weasel": {
-    "primitives": {
-      "gray-50": {
-        "type": "color",
-        "value": "#f5f5f6"
-      },
-      "gray-100": {
-        "type": "color",
-        "value": "#e6e7e9"
-      },
-      "gray-200": {
-        "type": "color",
-        "value": "#c9cbcf"
-      },
-      "gray-300": {
-        "type": "color",
-        "value": "#9ea1a8"
-      },
-      "gray-400": {
-        "type": "color",
-        "value": "#6f737b"
-      },
-      "gray-500": {
-        "type": "color",
-        "value": "#4d5058"
-      },
-      "gray-600": {
-        "type": "color",
-        "value": "#383b42"
-      },
-      "gray-700": {
-        "type": "color",
-        "value": "#25272c"
-      },
-      "gray-800": {
-        "type": "color",
-        "value": "#181a1e"
-      },
-      "gray-900": {
-        "type": "color",
-        "value": "#0e0f12"
-      },
-      "accent-soft": {
-        "type": "color",
-        "value": "#1d1454"
-      },
-      "accent-base": {
-        "type": "color",
-        "value": "#2e1f7a",
-        "description": "Midnight blue-violet. Deep and saturated; anchors primary actions on light and dark surfaces alike."
-      },
-      "accent-strong": {
-        "type": "color",
-        "value": "#5841b8"
-      },
-      "danger-base": {
-        "type": "color",
-        "value": "#d94a3f"
-      },
-      "warning-base": {
-        "type": "color",
-        "value": "#d99a3f"
-      },
-      "success-base": {
-        "type": "color",
-        "value": "#2ec27e"
-      },
-      "fg-on-accent": {
-        "type": "color",
-        "value": "{color.gray-50}"
-      },
-      "line-subtle": {
-        "type": "color",
-        "value": "{color.fg}",
-        "alpha": 0.1,
-        "description": "Barely-there separators (table rows)."
-      },
-      "line": {
-        "type": "color",
-        "value": "{color.fg}",
-        "alpha": 0.2,
-        "description": "Primary gridlines on sunken surfaces."
-      },
-      "line-strong": {
-        "type": "color",
-        "value": "{color.fg}",
-        "alpha": 0.4,
-        "description": "Axes and emphasized dividers."
-      },
-      "curve-color": {
-        "type": "color",
-        "value": "{color.accent-strong}",
-        "description": "Drawn data curves. Routes through the bright accent because accent-base is too dim on sunken surfaces."
-      },
-      "accent": {
-        "type": "color",
-        "value": "{color.accent-base}"
-      },
-      "accent-hover": {
-        "type": "color",
-        "value": "{color.accent-strong}"
-      },
-      "danger": {
-        "type": "color",
-        "value": "{color.danger-base}"
-      },
-      "warning": {
-        "type": "color",
-        "value": "{color.warning-base}"
-      },
-      "success": {
-        "type": "color",
-        "value": "{color.success-base}"
-      },
-      "focus-ring": {
-        "type": "color",
-        "value": "{color.accent-strong}"
-      },
-      "glass-tint": {
-        "type": "color",
-        "value": "{color.accent}",
-        "description": "Frosted-glass tint. Components compose it as color-mix(in srgb, var(--wzl-glass-tint) 78%, transparent) with backdrop-filter: blur(3px)."
-      },
-      "surface-hover": {
-        "type": "color",
-        "value": "{color.fg}",
-        "alpha": 0.1,
-        "description": "Hover wash over a raised surface. Same formula as line-subtle, different job \u2014 do not collapse them."
-      },
-      "surface-pressed": {
-        "type": "color",
-        "value": "{color.fg}",
-        "alpha": 0.18,
-        "description": "Pressed wash over a raised surface."
-      },
-      "swatch-green": {
-        "type": "color",
-        "value": "#2fdd18",
-        "description": "First of ten categorical spot colors for plotting, status and data viz. Ordered \u2014 take them in sequence. Mode-invariant on purpose: a series keeps its color when the mode flips."
-      },
-      "swatch-pink": {
-        "type": "color",
-        "value": "#ff5885"
-      },
-      "swatch-cyan": {
-        "type": "color",
-        "value": "#00dfff"
-      },
-      "swatch-gold": {
-        "type": "color",
-        "value": "#dcb700"
-      },
-      "swatch-amber": {
-        "type": "color",
-        "value": "#ff8c00"
-      },
-      "swatch-violet": {
-        "type": "color",
-        "value": "#a497ff"
-      },
-      "swatch-mint": {
-        "type": "color",
-        "value": "#00e7af"
-      },
-      "swatch-sky": {
-        "type": "color",
-        "value": "#00b8ff"
-      },
-      "swatch-orange": {
-        "type": "color",
-        "value": "#ff6b00"
-      },
-      "swatch-magenta": {
-        "type": "color",
-        "value": "#ff6eff"
-      },
-      "radius-sm": {
-        "type": "dimension",
-        "value": "3px"
-      },
-      "radius-md": {
-        "type": "dimension",
-        "value": "5px"
-      },
-      "radius-lg": {
-        "type": "dimension",
-        "value": "14px"
-      },
-      "radius-pill": {
-        "type": "dimension",
-        "value": "999px",
-        "description": "Fully rounded ends \u2014 segmented controls, progress tracks."
-      },
-      "border-w": {
-        "type": "dimension",
-        "value": "1px"
-      },
-      "line-width": {
-        "type": "dimension",
-        "value": "2px",
-        "description": "Structural lines \u2014 gridlines, dividers, axes."
-      },
-      "curve-width": {
-        "type": "dimension",
-        "value": "3px",
-        "description": "Drawn data curves. Heavier than structural lines so data reads as primary content."
-      },
-      "tb-height": {
-        "type": "dimension",
-        "value": "28px",
-        "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
-      },
-      "control-h": {
-        "type": "dimension",
-        "value": "24px",
-        "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
-      },
-      "slider-track-h": {
-        "type": "dimension",
-        "value": "4px",
-        "description": "Height of a linear range track. The kit's single-thumb ranges all wear this; Slider's default 24px canvas track does not."
-      },
-      "slider-thumb-size": {
-        "type": "dimension",
-        "value": "8px",
-        "description": "Diameter of a linear range thumb."
-      },
-      "slider-track-mix": {
-        "type": "dimension",
-        "value": "18%",
-        "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-mix": {
-        "type": "dimension",
-        "value": "70%",
-        "description": "Accent proportion in a range thumb, as a color-mix percentage \u2014 not a color."
-      },
-      "field-pad-x": {
-        "type": "dimension",
-        "value": "8px",
-        "description": "Horizontal padding inside a boxed field. Pairs with --wzl-field-h, which is a container override and has no :root default."
-      },
-      "glass-blur": {
-        "type": "dimension",
-        "value": "3px",
-        "description": "Backdrop blur radius for frosted surfaces. Pairs with glass-tint."
-      },
-      "font-size-2xs": {
-        "type": "dimension",
-        "value": "9px",
-        "description": "Shortcut keys and index badges. The floor for chrome text."
-      },
-      "font-size-xs": {
-        "type": "dimension",
-        "value": "10px",
-        "description": "Tool-button labels under an icon."
-      },
-      "font-size-sm": {
-        "type": "dimension",
-        "value": "11px",
-        "description": "Chrome labels, status readouts, section headings."
-      },
-      "font-size": {
-        "type": "dimension",
-        "value": "13px",
-        "description": "Controls and body text."
-      },
-      "font-size-lg": {
-        "type": "dimension",
-        "value": "16px",
-        "description": "Panel and dialog titles."
-      },
-      "font-size-xl": {
-        "type": "dimension",
-        "value": "20px",
-        "description": "The largest chrome text \u2014 a lab or app title."
-      },
-      "space-xs": {
-        "type": "dimension",
-        "value": "4px"
-      },
-      "space-sm": {
-        "type": "dimension",
-        "value": "8px"
-      },
-      "space-md": {
-        "type": "dimension",
-        "value": "12px"
-      },
-      "space-lg": {
-        "type": "dimension",
-        "value": "16px"
-      },
-      "tracking-none": {
-        "type": "dimension",
-        "value": "0"
-      },
-      "tracking-wide": {
-        "type": "dimension",
-        "value": "0.06em",
-        "description": "Uppercase section headings."
-      },
-      "tracking-wider": {
-        "type": "dimension",
-        "value": "0.08em",
-        "description": "Uppercase at 11px and below."
-      },
-      "z-toolbar": {
-        "type": "number",
-        "value": 10
-      },
-      "z-overlay": {
-        "type": "number",
-        "value": 20
-      },
-      "z-modal": {
-        "type": "number",
-        "value": 30
-      },
-      "leading-tight": {
-        "type": "number",
-        "value": 1,
-        "description": "Single-line controls; the box sets the height."
-      },
-      "leading-snug": {
-        "type": "number",
-        "value": 1.2,
-        "description": "Headings and two-line labels."
-      },
-      "leading": {
-        "type": "number",
-        "value": 1.4,
-        "description": "Body and anything that wraps."
-      },
-      "backdrop": {
-        "type": "gradient",
-        "value": "none",
-        "description": "Layered backdrop fill for a page or lab root. `none` here; a theme with a signature background sets it."
-      },
-      "motion-fast": {
-        "type": "duration",
-        "value": "120ms",
-        "description": "Micro-interactions \u2014 hover, focus, pressed."
-      },
-      "motion-medium": {
-        "type": "duration",
-        "value": "240ms",
-        "description": "Entrances and exits \u2014 toasts, popovers, panels."
-      },
-      "ease-in-cubic": {
-        "type": "cubicBezier",
-        "value": [
-          0.32,
-          0,
-          0.67,
-          0
-        ]
-      },
-      "ease-out-cubic": {
-        "type": "cubicBezier",
-        "value": [
-          0.33,
-          1,
-          0.68,
-          1
-        ]
-      },
-      "ease-in-out-cubic": {
-        "type": "cubicBezier",
-        "value": [
-          0.65,
-          0,
-          0.35,
-          1
-        ]
-      },
-      "ease-out-back": {
-        "type": "cubicBezier",
-        "value": [
-          0.34,
-          1.56,
-          0.64,
-          1
-        ]
-      },
-      "font-ui": {
-        "type": "fontFamily",
-        "value": [
-          "Oswald",
-          "Helvetica Neue Condensed",
-          "Arial Narrow",
-          "system-ui",
-          "sans-serif"
-        ],
-        "description": "Condensed UI/display face. The heavier cuts get blocky at any size, so the weight tokens stay in the 200-400 range."
-      },
-      "font-display": {
-        "type": "fontFamily",
-        "value": [
-          "Oswald",
-          "Helvetica Neue Condensed",
-          "Arial Narrow",
-          "system-ui",
-          "sans-serif"
-        ]
-      },
-      "font-body": {
-        "type": "fontFamily",
-        "value": [
-          "Inter",
-          "system-ui",
-          "-apple-system",
-          "Segoe UI",
-          "sans-serif"
-        ]
-      },
-      "font-mono": {
-        "type": "fontFamily",
-        "value": [
-          "ui-monospace",
-          "SFMono-Regular",
-          "Menlo",
-          "Consolas",
-          "monospace"
-        ]
-      },
-      "font-weight-light": {
-        "type": "fontWeight",
-        "value": 200
-      },
-      "font-weight-normal": {
-        "type": "fontWeight",
-        "value": 300
-      },
-      "font-weight-medium": {
-        "type": "fontWeight",
-        "value": 350
-      },
-      "font-weight-bold": {
-        "type": "fontWeight",
-        "value": 400
+// src/theme/interstellar.theme.json
+var interstellar_theme_default = {
+  name: "interstellar",
+  extends: "weasel",
+  pins: {
+    "radius-md": {
+      value: "6px",
+      type: "dimension"
+    },
+    "glass-blur": {
+      value: "12px",
+      type: "dimension"
+    },
+    "font-weight-light": {
+      value: 300,
+      type: "fontWeight"
+    },
+    "font-weight-medium": {
+      value: 500,
+      type: "fontWeight"
+    },
+    "font-weight-bold": {
+      value: 700,
+      type: "fontWeight"
+    },
+    surface: {
+      by: "mode",
+      dark: {
+        value: "#0a0a14",
+        type: "color"
+      },
+      light: {
+        value: "#fafaf7",
+        type: "color"
       }
     },
-    "modes": {
-      "dark": {
-        "surface": {
-          "type": "color",
-          "value": "{color.gray-800}"
-        },
-        "surface-raised": {
-          "type": "color",
-          "value": "{color.gray-700}"
-        },
-        "surface-sunken": {
-          "type": "color",
-          "value": "{color.gray-900}"
-        },
-        "fg": {
-          "type": "color",
-          "value": "{color.gray-100}"
-        },
-        "fg-muted": {
-          "type": "color",
-          "value": "{color.gray-300}"
-        },
-        "fg-subtle": {
-          "type": "color",
-          "value": "{color.gray-400}"
-        },
-        "border": {
-          "type": "color",
-          "value": "{color.gray-700}"
-        },
-        "border-strong": {
-          "type": "color",
-          "value": "{color.gray-600}"
-        },
-        "accent-fg": {
-          "type": "color",
-          "value": "{color.accent-strong}",
-          "description": "Accent for foreground use \u2014 text, icons, selected labels drawn on a surface. accent is a fill; the midnight base is too dim to read as text on dark surfaces."
-        },
-        "fg-inverse": {
-          "type": "color",
-          "value": "{color.gray-900}",
-          "description": "Text drawn on a filled foreground-colored element (e.g. a slider thumb). Flips with the mode, so it is a semantic, not an alias to a primitive."
-        },
-        "shadow": {
-          "type": "color",
-          "value": "rgba(0, 0, 0, 0.6)",
-          "description": "Elevation. Always darker than any surface \u2014 never derived from fg, which is near-white on dark."
-        },
-        "border-raised": {
-          "type": "color",
-          "value": "{color.gray-400}",
-          "description": "The line around a raised surface. Clears 3:1 against surface and surface-raised in either mode, which the general-purpose border does not; over surface-sunken it does not, so a panel on a sunken field needs its own answer."
-        }
-      },
-      "light": {
-        "surface": {
-          "type": "color",
-          "value": "{color.gray-50}"
-        },
-        "surface-raised": {
-          "type": "color",
-          "value": "{color.gray-100}"
-        },
-        "surface-sunken": {
-          "type": "color",
-          "value": "{color.gray-200}"
-        },
-        "fg": {
-          "type": "color",
-          "value": "{color.gray-900}"
-        },
-        "fg-muted": {
-          "type": "color",
-          "value": "{color.gray-600}"
-        },
-        "fg-subtle": {
-          "type": "color",
-          "value": "{color.gray-500}"
-        },
-        "border": {
-          "type": "color",
-          "value": "{color.gray-200}"
-        },
-        "border-strong": {
-          "type": "color",
-          "value": "{color.gray-300}"
-        },
-        "accent-fg": {
-          "type": "color",
-          "value": "{color.accent-base}",
-          "description": "Flips to the deep base in light mode, where it is the legible one."
-        },
-        "fg-inverse": {
-          "type": "color",
-          "value": "{color.gray-50}",
-          "description": "Flips with the mode \u2014 see the dark layer."
-        },
-        "shadow": {
-          "type": "color",
-          "value": "rgba(0, 0, 0, 0.18)"
-        },
-        "border-raised": {
-          "type": "color",
-          "value": "{color.gray-400}"
-        }
+    "surface-raised": {
+      by: "mode",
+      dark: {
+        value: "rgba(20, 20, 36, 0.55)",
+        type: "color"
+      },
+      light: {
+        value: "#ffffff",
+        type: "color"
       }
-    }
-  }
-};
-var weaselTheme = {
-  name: "weasel",
-  extends: null,
-  defaultMode: "dark",
-  tokens: THEME_SOURCES.weasel.primitives,
-  modes: THEME_SOURCES.weasel.modes
-};
-function hexToRgba(hex, alpha) {
-  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
-  if (!m) throw new Error(`Expected a hex color, got "${hex}"`);
-  const body = m[1];
-  const full = body.length === 3 ? body.replace(/./g, (c2) => c2 + c2) : body;
-  const r2 = Number.parseInt(full.slice(0, 2), 16);
-  const g2 = Number.parseInt(full.slice(2, 4), 16);
-  const b = Number.parseInt(full.slice(4, 6), 16);
-  return `rgba(${r2}, ${g2}, ${b}, ${alpha})`;
-}
-var REF = /^\{([^}]+)\}$/;
-function refTarget(value) {
-  if (typeof value !== "string") return null;
-  const m = REF.exec(value.trim());
-  if (!m) return null;
-  const path = m[1];
-  const dot = path.indexOf(".");
-  return dot === -1 ? path : path.slice(dot + 1);
-}
-function fontStack(value) {
-  return value.map((f2) => typeof f2 === "string" && /\s/.test(f2) ? `'${f2}'` : String(f2)).join(", ");
-}
-function serialize(type, value) {
-  if (Array.isArray(value)) {
-    if (type === "cubicBezier") return `cubic-bezier(${value.join(", ")})`;
-    if (type === "fontFamily") return fontStack(value);
-    return value.join(", ");
-  }
-  return String(value);
-}
-function resolveTokens(tokens) {
-  const out = {};
-  const inProgress = /* @__PURE__ */ new Set();
-  const resolveOne = (name) => {
-    const cached = out[name];
-    if (cached !== void 0) return cached;
-    const token = tokens[name];
-    if (!token) throw new Error(`Unknown token "${name}"`);
-    if (inProgress.has(name)) {
-      throw new Error(`Reference cycle at token "${name}" (${[...inProgress].join(" \u2192 ")})`);
-    }
-    inProgress.add(name);
-    const target = refTarget(token.value);
-    let value;
-    if (target === null) {
-      value = serialize(token.type, token.value);
-    } else if (!tokens[target]) {
-      throw new Error(`Token "${name}" references "${target}", which is not defined`);
-    } else {
-      value = resolveOne(target);
-    }
-    if (token.alpha !== void 0) value = hexToRgba(value, token.alpha);
-    inProgress.delete(name);
-    out[name] = value;
-    return value;
-  };
-  for (const name of Object.keys(tokens)) resolveOne(name);
-  return out;
-}
-function chain(theme) {
-  const out = [];
-  for (let t = theme; t; t = t.extends) out.unshift(t);
-  return out;
-}
-function resolveTheme(theme, mode) {
-  const themes = chain(theme);
-  const effectiveMode = themes.some((t) => mode in t.modes) ? mode : theme.defaultMode;
-  let merged = {};
-  for (const t of themes) {
-    merged = { ...merged, ...t.tokens, ...t.modes[effectiveMode] ?? {} };
-  }
-  const resolved = resolveTokens(merged);
-  const out = {};
-  for (const [name, value] of Object.entries(resolved)) out[`--wzl-${name}`] = value;
-  return out;
-}
-var STYLE_ID = "wzl-themes";
-var emitted = /* @__PURE__ */ new Map();
-var sheet = null;
-var styleEl = null;
-function canAdopt() {
-  return typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype && Array.isArray(document.adoptedStyleSheets);
-}
-function flushRules() {
-  const css = [...emitted.values()].join("\n");
-  if (canAdopt()) {
-    if (!sheet) {
-      sheet = new CSSStyleSheet();
-      document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-    }
-    sheet.replaceSync(css);
-    return;
-  }
-  if (!styleEl) {
-    styleEl = document.createElement("style");
-    styleEl.id = STYLE_ID;
-    document.head.appendChild(styleEl);
-  }
-  styleEl.textContent = css;
-}
-function applyTheme(el, theme, mode) {
-  if (typeof document === "undefined") return;
-  const key = `${theme.name}::${mode}`;
-  const resolved = resolveTheme(theme, mode);
-  const body = Object.entries(resolved).map(([name, value]) => `${name}: ${value};`).join(" ");
-  const rule = `[data-wzl-theme='${theme.name}'][data-wzl-mode='${mode}'] { ${body} }`;
-  if (emitted.get(key) !== rule) {
-    emitted.set(key, rule);
-    flushRules();
-  }
-  el.setAttribute("data-wzl-theme", theme.name);
-  el.setAttribute("data-wzl-mode", mode);
-}
-var ThemeContext = createContext(null);
-function ThemeProvider({
-  theme = weaselTheme,
-  mode,
-  className,
-  style,
-  children
-}) {
-  const ref = useRef(null);
-  const effectiveMode = mode ?? theme.defaultMode;
-  const value = useMemo(
-    () => ({ theme, mode: effectiveMode, resolved: resolveTheme(theme, effectiveMode) }),
-    [theme, effectiveMode]
-  );
-  useLayoutEffect(() => {
-    if (ref.current) applyTheme(ref.current, theme, effectiveMode);
-  }, [theme, effectiveMode]);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className,
-      style,
-      "data-wzl-theme": theme.name,
-      "data-wzl-mode": effectiveMode,
-      children
-    }
-  ) });
-}
-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;
-function flattenTokens(doc) {
-  const out = {};
-  for (const [groupName, group] of Object.entries(doc)) {
-    if (groupName.startsWith("$")) continue;
-    if (typeof group !== "object" || group === null) continue;
-    const g2 = group;
-    const groupType = g2.$type;
-    for (const [leaf, node] of Object.entries(g2)) {
-      if (leaf.startsWith("$")) continue;
-      if (!isToken(node)) continue;
-      const type = node.$type ?? groupType;
-      if (!type) {
-        throw new Error(`Token "${leaf}" has no $type and its group "${groupName}" declares none`);
+    },
+    "surface-sunken": {
+      by: "mode",
+      dark: {
+        value: "#02020a",
+        type: "color"
+      },
+      light: {
+        value: "#f0ebe2",
+        type: "color"
       }
-      if (leaf in out) {
-        throw new Error(`Duplicate token name "${leaf}" \u2014 leaf keys must be unique across type groups`);
+    },
+    border: {
+      by: "mode",
+      dark: {
+        value: "rgba(255, 255, 255, 0.14)",
+        type: "color"
+      },
+      light: {
+        value: "#c9bba5",
+        type: "color"
       }
-      const alphaRaw = node.$extensions?.[ALPHA_EXT];
-      const token = {
-        type,
-        value: node.$value,
-        alpha: typeof alphaRaw === "number" ? alphaRaw : void 0,
-        description: node.$description
-      };
-      out[leaf] = token;
-    }
-  }
-  return out;
-}
-function loadDTCG(doc) {
-  if (typeof doc.name !== "string" || doc.name === "") {
-    throw new Error('DTCG document needs a string "name"');
-  }
-  const modes = {};
-  for (const [mode, body] of Object.entries(doc.modes ?? {})) {
-    modes[mode] = flattenTokens(body);
-  }
-  const base = doc.extends === void 0 ? weaselTheme : doc.extends;
-  return {
-    name: doc.name,
-    extends: base,
-    defaultMode: typeof doc.defaultMode === "string" ? doc.defaultMode : base?.defaultMode ?? "dark",
-    tokens: flattenTokens(doc.primitives ?? {}),
-    modes
-  };
-}
-
-// src/theme/interstellar.tokens.json
-var interstellar_tokens_default = {
-  name: "interstellar",
-  defaultMode: "dark",
-  primitives: {
-    dimension: {
-      $type: "dimension",
-      "radius-md": { $value: "6px" },
-      "glass-blur": { $value: "12px" }
     },
-    fontWeight: {
-      $type: "fontWeight",
-      "font-weight-light": { $value: 300 },
-      "font-weight-medium": { $value: 500 },
-      "font-weight-bold": { $value: 700 }
-    }
-  },
-  modes: {
-    dark: {
-      color: {
-        $type: "color",
-        surface: { $value: "#0a0a14" },
-        "surface-raised": { $value: "rgba(20, 20, 36, 0.55)" },
-        "surface-sunken": { $value: "#02020a" },
-        border: { $value: "rgba(255, 255, 255, 0.14)" },
-        "line-subtle": { $value: "rgba(255, 255, 255, 0.08)" },
-        fg: { $value: "#e8e8f0" },
-        "fg-muted": { $value: "#a8a8c0" },
-        "fg-subtle": { $value: "#5a5a78" },
-        accent: { $value: "#b08adb" },
-        "accent-hover": { $value: "#c6a3ee" },
-        "focus-ring": { $value: "rgba(176, 138, 219, 0.45)" },
-        shadow: { $value: "rgba(0, 0, 0, 0.7)" },
-        "border-raised": { $value: "rgba(255, 255, 255, 0.36)" }
-      },
-      gradient: {
-        $type: "gradient",
-        backdrop: {
-          $value: "radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%), radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%), radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%), radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)"
-        }
+    "line-subtle": {
+      by: "mode",
+      dark: {
+        value: "rgba(255, 255, 255, 0.08)",
+        type: "color"
+      },
+      light: {
+        value: "rgba(0, 0, 0, 0.08)",
+        type: "color"
+      }
+    },
+    fg: {
+      by: "mode",
+      dark: {
+        value: "#e8e8f0",
+        type: "color"
+      },
+      light: {
+        value: "#2a2018",
+        type: "color"
+      }
+    },
+    "fg-muted": {
+      by: "mode",
+      dark: {
+        value: "#a8a8c0",
+        type: "color"
+      },
+      light: {
+        value: "#6b5c4a",
+        type: "color"
+      }
+    },
+    "fg-subtle": {
+      by: "mode",
+      dark: {
+        value: "#5a5a78",
+        type: "color"
+      },
+      light: {
+        value: "#a89b85",
+        type: "color"
+      }
+    },
+    accent: {
+      by: "mode",
+      dark: {
+        value: "#b08adb",
+        type: "color"
+      },
+      light: {
+        value: "#a86f3c",
+        type: "color"
+      }
+    },
+    "accent-hover": {
+      by: "mode",
+      dark: {
+        value: "#c6a3ee",
+        type: "color"
+      },
+      light: {
+        value: "#c2854f",
+        type: "color"
       }
     },
-    light: {
-      color: {
-        $type: "color",
-        surface: { $value: "#fafaf7" },
-        "surface-raised": { $value: "#ffffff" },
-        "surface-sunken": { $value: "#f0ebe2" },
-        border: { $value: "#c9bba5" },
-        "line-subtle": { $value: "rgba(0, 0, 0, 0.08)" },
-        fg: { $value: "#2a2018" },
-        "fg-muted": { $value: "#6b5c4a" },
-        "fg-subtle": { $value: "#a89b85" },
-        accent: { $value: "#a86f3c" },
-        "accent-hover": { $value: "#c2854f" },
-        "focus-ring": { $value: "rgba(168, 111, 60, 0.35)" },
-        shadow: { $value: "rgba(80, 60, 40, 0.18)" },
-        "border-raised": { $value: "#9e8b71" }
+    "focus-ring": {
+      by: "mode",
+      dark: {
+        value: "rgba(176, 138, 219, 0.45)",
+        type: "color"
+      },
+      light: {
+        value: "rgba(168, 111, 60, 0.35)",
+        type: "color"
+      }
+    },
+    shadow: {
+      by: "mode",
+      dark: {
+        value: "rgba(0, 0, 0, 0.7)",
+        type: "color"
+      },
+      light: {
+        value: "rgba(80, 60, 40, 0.18)",
+        type: "color"
+      }
+    },
+    "border-strong": {
+      by: "mode",
+      dark: {
+        value: "rgba(255, 255, 255, 0.36)",
+        type: "color"
+      },
+      light: {
+        value: "#9e8b71",
+        type: "color"
+      }
+    },
+    backdrop: {
+      by: "mode",
+      dark: {
+        value: "radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%), radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%), radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%), radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)",
+        type: "gradient"
+      },
+      light: {
+        value: "none",
+        type: "gradient"
       }
     }
   }
 };
 
 // src/theme/interstellar.ts
-var interstellarTheme = loadDTCG(interstellar_tokens_default);
-
-// src/state/view.ts
-var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
-function as2DView(view) {
-  if (typeof view !== "object" || view === null) return null;
-  const v = view;
-  if (typeof v.zoom !== "number") return null;
-  if (typeof v.pan !== "object" || v.pan === null) return null;
-  if (typeof v.pan.x !== "number" || typeof v.pan.y !== "number") return null;
-  return { zoom: v.zoom, pan: { x: v.pan.x, y: v.pan.y } };
-}
-var ZONE_ID = asNodeId("lk-trial-body");
-var SIDEBAR_ID = asNodeId("lk-trial-sidebar");
-var CONTENT_ID = asNodeId("lk-trial-content");
-var STRATEGIES = { strip: stripStrategy };
-function TrialBody({
-  sidebar,
-  children,
-  contentClassName,
-  width,
-  defaultWidth = 320,
-  minWidth = 140,
-  maxWidth = 720,
-  contentMinWidth = 160,
-  onWidthChange,
-  viewport
-}) {
-  const storeRef = useRef(null);
-  if (storeRef.current === null) {
-    const store2 = new Store();
-    store2.registerNode(
-      createNode({
-        kind: "zone",
-        id: ZONE_ID,
-        container: { strategyId: "strip", config: { axis: "x", resizable: true } }
-      })
-    );
-    store2.registerNode(
-      createNode({
-        kind: "sidebar",
-        id: SIDEBAR_ID,
-        parentId: ZONE_ID,
-        meta: { title: "Sidebar" },
-        placement: { size: { w: width ?? defaultWidth } },
-        hints: { minSize: { w: minWidth, h: 0 }, maxSize: { w: maxWidth, h: 0 } }
-      })
-    );
-    store2.registerNode(
-      createNode({
-        kind: "content",
-        id: CONTENT_ID,
-        parentId: ZONE_ID,
-        meta: { title: "Content" },
-        hints: { minSize: { w: contentMinWidth, h: 0 } }
-      })
-    );
-    store2.showNode(SIDEBAR_ID);
-    store2.showNode(CONTENT_ID);
-    storeRef.current = store2;
-  }
-  const store = storeRef.current;
-  const widthRef = useRef(width ?? defaultWidth);
-  useEffect(() => {
-    store.setHints(SIDEBAR_ID, {
-      minSize: { w: minWidth, h: 0 },
-      maxSize: { w: maxWidth, h: 0 }
-    });
-    store.setHints(CONTENT_ID, { minSize: { w: contentMinWidth, h: 0 } });
-  }, [store, minWidth, maxWidth, contentMinWidth]);
-  useEffect(() => {
-    if (width === void 0 || width === widthRef.current) return;
-    widthRef.current = width;
-    store.patchPlacement(SIDEBAR_ID, { size: { w: width } });
-  }, [store, width]);
-  const onWidthChangeRef = useRef(onWidthChange);
-  onWidthChangeRef.current = onWidthChange;
-  useEffect(
-    () => store.events.on("node.placementChanged", () => {
-      const next = store.getPlacement(SIDEBAR_ID)?.size?.w;
-      if (typeof next !== "number" || next === widthRef.current) return;
-      widthRef.current = next;
-      onWidthChangeRef.current?.(next);
-    }),
-    [store]
-  );
-  const chrome = useMemo(
-    () => ({
-      sidebar: () => /* @__PURE__ */ jsx("div", { className: "lk-trial__sidebar", children: sidebar }),
-      content: () => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: contentClassName ? `lk-trial__content ${contentClassName}` : "lk-trial__content",
-          children
-        }
-      )
-    }),
-    [sidebar, children, contentClassName]
-  );
-  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES, children: /* @__PURE__ */ jsx(
-    Container,
+var interstellarTheme = defineTheme({
+  ...interstellar_theme_default,
+  extends: weaselTheme
+});
+function TrialBody({ sidebar, children, contentClassName, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Split,
     {
-      parentId: ZONE_ID,
-      chrome,
-      className: "lk-trial__panes windease-zone",
-      affordances: true,
-      viewport
+      ...rest,
+      sidebar,
+      className: "lk-trial__panes",
+      sidebarClassName: "lk-trial__sidebar",
+      contentClassName: contentClassName ? `lk-trial__content ${contentClassName}` : "lk-trial__content",
+      children
     }
-  ) }) });
+  );
 }
 var TrialDragContext = createContext(null);
 function useTrialDrag() {
@@ -2834,7 +1250,7 @@ function Portalled({
 }
 function UndockedSections({ trialId, sections, onDock }) {
   if (sections.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c2) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c2, onDock }, c2.id)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c8) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c8, onDock }, c8.id)) });
 }
 var NO_OP = () => {
 };
@@ -2857,27 +1273,32 @@ function TrialChrome({
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] TrialChrome requires <LabStoreProvider>");
-  const updateTrialView = useStore(storeCtx.store, (s) => s.updateTrialView);
-  const updateTrialSidebarWidth = useStore(storeCtx.store, (s) => s.updateTrialSidebarWidth);
-  const 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 updateTrialView = useStore(storeCtx.store, (s5) => s5.updateTrialView);
+  const updateTrialSidebarWidth = useStore(storeCtx.store, (s5) => s5.updateTrialSidebarWidth);
+  const setTrialTitle = useStore(storeCtx.store, (s5) => s5.setTrialTitle);
+  const setTrialSectionCollapsed = useStore(storeCtx.store, (s5) => s5.setTrialSectionCollapsed);
+  const updateTrialConfig = useStore(storeCtx.store, (s5) => s5.updateTrialConfig);
+  const updateTrialState = useStore(storeCtx.store, (s5) => s5.updateTrialState);
+  const undockPanelAction = useStore(storeCtx.store, (s5) => s5.undockPanel);
+  const dockPanelAction = useStore(storeCtx.store, (s5) => s5.dockPanel);
+  const undockedPanels = useStore(storeCtx.store, (s5) => s5.undockedPanels);
   const undockedIds = useMemo(
-    () => Object.values(undockedPanels).filter((p) => p.trialId === trialId).map((p) => p.sectionId),
+    () => Object.values(undockedPanels).filter((p2) => p2.trialId === trialId).map((p2) => p2.sectionId),
     [undockedPanels, trialId]
   );
   const view2d = as2DView(record.view);
   const configSchema = useConfigSchema(instrument);
-  const title = record.title ?? record.instrumentName;
+  const { config: resolvedConfig, auto: auto2 } = useResolvedConfig(
+    configSchema,
+    record.config,
+    record.auto
+  );
+  const title = record.title ?? instrument.title ?? instrument.name;
   const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
   const ctx = useMemo(() => {
     const setZoom = (z2) => {
       if (!view2d) return;
-      updateTrialView(trialId, { ...view2d, zoom: z2 });
+      updateTrialView(trialId, withZoom(view2d, z2));
     };
     return {
       trialId,
@@ -2896,6 +1317,7 @@ function TrialChrome({
       configSchema,
       configFields: instrument.config ? [] : instrument.configSchema?.() ?? [],
       config: record.config,
+      auto: auto2,
       setConfig: (path, value) => {
         const prevConfig = record.config;
         if (process.env.NODE_ENV !== "production" && !hasConfigPath(prevConfig, path) && schemaNodeAtPath(configSchema.group, path) === void 0) {
@@ -2905,8 +1327,9 @@ function TrialChrome({
         }
         updateTrialConfig(trialId, path, value);
         if (instrument.onConfigChange) {
-          const nextConfig = withValueAtPath(prevConfig, path, value);
-          const nextState = instrument.onConfigChange(nextConfig, prevConfig, record.state);
+          const next = applyConfigWrite(prevConfig, record.auto ?? [], path, value);
+          const nextConfig = resolveAutoConfig(configSchema, next.config, new Set(next.autoPaths));
+          const nextState = instrument.onConfigChange(nextConfig, resolvedConfig, record.state);
           updateTrialState(trialId, nextState);
         }
       },
@@ -2915,7 +1338,7 @@ function TrialChrome({
       undockedPanels: undockedIds,
       undockPanel: (sectionId, as) => undockPanelAction(trialId, sectionId, as),
       dockPanel: (sectionId) => dockPanelAction(trialId, sectionId),
-      savedSnapshots: lab.savedSnapshots.filter((s) => s.trialId === trialId),
+      savedSnapshots: lab.savedSnapshots.filter((s5) => s5.trialId === trialId),
       saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
       loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
       clone: () => lab.cloneTrial(trialId),
@@ -2940,6 +1363,8 @@ function TrialChrome({
     activeToolId,
     setActiveTool,
     configSchema,
+    resolvedConfig,
+    auto2,
     undockedIds,
     undockPanelAction,
     dockPanelAction,
@@ -2959,7 +1384,7 @@ function TrialChrome({
     ),
     [instrument, ctx, trialChrome, chrome, suppress, lab.controls]
   );
-  const inRegion = (region) => contributions.filter((c2) => c2.region === region);
+  const inRegion = (region) => contributions.filter((c8) => c8.region === region);
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
@@ -2976,6 +1401,8 @@ function TrialChrome({
     "section",
     {
       className: "lk-trial",
+      "data-trial-id": trialId,
+      "data-focused": lab.trials.length > 1 && lab.focusedTrialId === trialId ? "true" : void 0,
       "aria-label": `Trial ${title}`,
       tabIndex: -1,
       onKeyDown: handleKeyDown,
@@ -2996,14 +1423,14 @@ function TrialChrome({
             {
               width: record.sidebarWidth,
               onWidthChange: (w3) => updateTrialSidebarWidth(trialId, w3),
-              contentClassName: instrument.canvas ? "lk-trial__content--flush" : void 0,
+              contentClassName: instrument.canvas || instrument.stage ? "lk-trial__content--flush" : void 0,
               sidebar: /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }),
                 /* @__PURE__ */ jsx(
                   UndockedSections,
                   {
                     trialId,
-                    sections: inRegion("sidebar").filter((c2) => undockedIds.includes(c2.id)),
+                    sections: inRegion("sidebar").filter((c8) => undockedIds.includes(c8.id)),
                     onDock: ctx.dockPanel
                   }
                 )
@@ -3027,25 +1454,30 @@ function Trial({ id, chrome, suppress }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] <Trial> requires <LabStoreProvider>");
-  const record = useStore(storeCtx.store, (s) => s.trials.find((w3) => w3.id === id));
+  const instruments = useStore(storeCtx.store, (s5) => s5.instruments) ?? lab.instruments;
+  const record = useStore(storeCtx.store, (s5) => s5.trials.find((w3) => w3.id === id));
+  const instrument = record ? instruments.find((i3) => i3.name === record.instrumentName) : void 0;
+  const kept = useKeptMarks(instrument?.annotations?.storage, id);
   if (!record) {
     return /* @__PURE__ */ jsxs("div", { className: "lk-trial lk-trial--unknown", children: [
       "Trial not found: ",
       id
     ] });
   }
-  const instrument = lab.instruments.find((i) => i.name === record.instrumentName);
   if (!instrument) {
     return /* @__PURE__ */ jsxs("div", { className: "lk-trial lk-trial--unknown", children: [
       "Unknown instrument: ",
       record.instrumentName
     ] });
   }
+  if (!kept.ready) return /* @__PURE__ */ jsx("div", { className: "lk-trial lk-trial--loading" });
   return /* @__PURE__ */ jsx(
     TrialRuntime,
     {
+      keptMarks: kept.value,
       record,
       instrument,
+      instruments,
       store: storeCtx.store,
       isLast: lab.trials.length <= 1,
       chrome,
@@ -3053,17 +1485,53 @@ function Trial({ id, chrome, suppress }) {
     }
   );
 }
-function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
+function useKeptMarks(storage, trialId) {
+  const preload = useContext(AnnotationPreloadContext);
+  const [loaded, setLoaded] = useState(
+    () => storage && preload?.has(trialId) ? { value: preload.get(trialId) } : null
+  );
+  useEffect(() => {
+    if (!storage || loaded) return;
+    let live = true;
+    storage.load().then(
+      (value) => {
+        if (live) setLoaded({ value });
+      },
+      (error) => {
+        console.warn(`[labkit] could not load the marks of trial "${trialId}"`, error);
+        if (live) setLoaded({ value: null });
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [storage, loaded, trialId]);
+  if (!storage) return { ready: true, value: void 0 };
+  return loaded ? { ready: true, value: loaded.value } : { ready: false, value: void 0 };
+}
+function TrialRuntime({
+  keptMarks,
+  record,
+  instrument,
+  instruments,
+  store,
+  isLast,
+  chrome,
+  suppress
+}) {
+  const wheelSlot = useRef(null);
   const canvasContainerRef = useRef(null);
   const loupeHostRef = useRef(null);
-  const updateTrialState = useStore(store, (s) => s.updateTrialState);
-  const updateTrialConfig = useStore(store, (s) => s.updateTrialConfig);
-  const updateTrialView = useStore(store, (s) => s.updateTrialView);
-  const updateTrialUndoStack = useStore(store, (s) => s.updateTrialUndoStack);
-  const updateTrialAnnotations = useStore(store, (s) => s.updateTrialAnnotations);
-  const labToolId = useStore(store, (s) => s.activeToolId);
-  const setLabTool = useStore(store, (s) => s.setLabTool);
-  const setTrialTool = useStore(store, (s) => s.setTrialTool);
+  const updateTrialState = useStore(store, (s5) => s5.updateTrialState);
+  const updateTrialConfig = useStore(store, (s5) => s5.updateTrialConfig);
+  const updateTrialView = useStore(store, (s5) => s5.updateTrialView);
+  const updateTrialUndoStack = useStore(store, (s5) => s5.updateTrialUndoStack);
+  const updateTrialAnnotations = useStore(store, (s5) => s5.updateTrialAnnotations);
+  const labToolId = useStore(store, (s5) => s5.activeToolId);
+  const setLabTool = useStore(store, (s5) => s5.setLabTool);
+  const setTrialTool = useStore(store, (s5) => s5.setTrialTool);
+  const schema = useConfigSchema(instrument);
+  const { config } = useResolvedConfig(schema, record.config, record.auto);
   const busRef = useRef(null);
   if (busRef.current === null) busRef.current = createEventBus();
   const bus = busRef.current;
@@ -3071,7 +1539,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const [layerOrder, setLayerOrder] = useState(null);
   const [loupeOn, setLoupeOn] = useState(false);
   const visibleLayers = useMemo(
-    () => (instrument.canvas?.layers ?? []).filter((l) => layerVisibility[l.id] !== false).map((l) => l.id),
+    () => (instrument.canvas?.layers ?? []).filter((l9) => layerVisibility[l9.id] !== false).map((l9) => l9.id),
     [instrument.canvas, layerVisibility]
   );
   const undoCap = instrument.undo;
@@ -3084,25 +1552,28 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
     const snap = structuredClone(current.state);
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
-  const setView = (v) => updateTrialView(record.id, v);
+  const setView = (v2) => updateTrialView(record.id, v2);
+  const stage = instrument.canvas ? void 0 : instrument.stage;
   const placeView = (size) => {
-    const declared = instrument.canvas?.initialView;
+    const declared = instrument.canvas?.initialView ?? (stage ? stage.initialView ?? ((vp) => fitStage(stage.size, vp)) : void 0);
     if (typeof declared !== "function") return;
     if (record.view != null) return;
     setView(declared(size));
   };
   const annotationsCap = instrument.annotations;
   const targetsRef = useRef(() => []);
-  targetsRef.current = () => annotationsCap ? annotationsCap.targets(record.state, record.config, { id: record.id, view: record.view }) : [];
+  targetsRef.current = () => annotationsCap ? annotationsCap.targets(record.state, config, { id: record.id, view: record.view }) : [];
   const annotationsRef = useRef(null);
-  const configRef = useRef(record.config);
-  configRef.current = record.config;
+  const configRef = useRef(config);
+  configRef.current = config;
+  const capRef = useRef(annotationsCap);
+  capRef.current = annotationsCap;
   if (annotationsRef.current === null) {
-    const kept = annotationsCap?.storage ? annotationsCap.storage.load() : record.annotations;
+    const kept = annotationsCap?.storage ? keptMarks : record.annotations;
     annotationsRef.current = annotationsFromJSON(kept, () => targetsRef.current(), {
-      meaning: annotationsCap?.meaning,
+      meaning: () => capRef.current?.meaning,
       config: () => configRef.current,
-      onCapture: (result) => annotationsCap?.onCapture?.(result)
+      onCapture: (result) => capRef.current?.onCapture?.(result)
     });
   }
   const annotations = annotationsRef.current;
@@ -3146,8 +1617,9 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       flush();
     };
   }, [annotations, annotationsCap]);
-  const declaresTools = instrument.tools != null || instrument.annotations != null;
-  const resolvedToolId = declaresTools ? record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? (instrument.annotations ? "select" : null) : labToolId;
+  const declaresTools = instrument.tools != null;
+  const labTool = resolveLabTool(labToolId, instruments);
+  const resolvedToolId = declaresTools ? record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? null : labTool;
   const setActiveTool = (id) => {
     if (declaresTools) setTrialTool(record.id, id);
     else setLabTool(id);
@@ -3157,13 +1629,13 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const job = useJob({
     capability: jobCap ?? { run: async function* () {
     }, onItem: (_i, st) => st },
-    config: record.config,
+    config,
     state: record.state,
     setState: (next) => updateTrialState(record.id, next)
   });
   const renderCtx = {
     state: record.state,
-    config: record.config,
+    config,
     setState: (next) => {
       snapshotIfNeeded("state.change");
       updateTrialState(record.id, next);
@@ -3184,7 +1656,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       zoom: view2d?.zoom ?? 1,
       setZoom: (z2) => {
         if (!view2d) return;
-        updateTrialView(record.id, { ...view2d, zoom: z2 });
+        updateTrialView(record.id, withZoom(view2d, z2));
       },
       activeToolId: resolvedToolId,
       visibleLayers
@@ -3222,33 +1694,33 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const loupeCap = useMemo(() => {
     const declared = instrument.loupe;
     if (declared == null) return null;
-    return resolveLoupe(typeof declared === "function" ? declared(record.config) : declared);
-  }, [instrument.loupe, record.config]);
-  const loupeBindings = loupeCap ? { on: loupeOn, toggle: () => setLoupeOn((v) => !v) } : void 0;
+    return resolveLoupe(typeof declared === "function" ? declared(config) : declared);
+  }, [instrument.loupe, config]);
+  const loupeBindings = loupeCap ? { on: loupeOn, toggle: () => setLoupeOn((v2) => !v2) } : void 0;
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
-    const ordered = layerOrder ? [...baseLayers].sort((a, b) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b.id)) : baseLayers;
+    const ordered = layerOrder ? [...baseLayers].sort((a4, b2) => layerOrder.indexOf(a4.id) - layerOrder.indexOf(b2.id)) : baseLayers;
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
       render: (ctx, view, frame) => {
         applyCamera(ctx, view, frame);
-        layer.draw(ctx, { state: record.state, config: record.config, zoom: view.zoom });
+        layer.draw(ctx, { state: record.state, config, zoom: view.zoom });
       }
     }));
-  }, [instrument.canvas, record.state, record.config, layerVisibility, layerOrder]);
+  }, [instrument.canvas, record.state, config, layerVisibility, layerOrder]);
   const layerDescriptors = useMemo(() => {
     if (!instrument.layers) return [];
-    return instrument.layers.ids.map((l) => typeof l === "string" ? { id: l, label: l } : l);
+    return instrument.layers.ids.map((l9) => typeof l9 === "string" ? { id: l9, label: l9 } : l9);
   }, [instrument.layers]);
   const dragDropResult = useDragDrop({
-    capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s) => s },
+    capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s5) => s5 },
     canvasContainerRef,
     view: view2d ?? DEFAULT_VIEW,
     worldSpec: instrument.canvas?.worldSpec,
     state: record.state,
-    config: record.config,
+    config,
     setState: (next) => {
       snapshotIfNeeded("canvas.itemAdded");
       updateTrialState(record.id, next);
@@ -3260,9 +1732,9 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   });
   const paletteItems = useMemo(() => {
     if (!instrument.dragDrop) return [];
-    const p = instrument.dragDrop.palette;
-    return typeof p === "function" ? p(record.state, record.config) : p;
-  }, [instrument.dragDrop, record.state, record.config]);
+    const p2 = instrument.dragDrop.palette;
+    return typeof p2 === "function" ? p2(record.state, config) : p2;
+  }, [instrument.dragDrop, record.state, config]);
   const layersWithFeedback = useMemo(() => {
     if (!dragDropResult.drag?.feedback) return canvasLayers;
     const fb = dragDropResult.drag.feedback;
@@ -3275,12 +1747,12 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
         render: (ctx) => {
           const el = canvasContainerRef.current;
           if (!el) return;
-          const r2 = el.getBoundingClientRect();
+          const r10 = el.getBoundingClientRect();
           ctx.save();
           ctx.strokeStyle = fb.ok ? "#3a7" : "#c44";
           ctx.lineWidth = 2;
           ctx.beginPath();
-          ctx.arc(screen.x - r2.left, screen.y - r2.top, 16, 0, Math.PI * 2);
+          ctx.arc(screen.x - r10.left, screen.y - r10.top, 16, 0, Math.PI * 2);
           ctx.stroke();
           ctx.restore();
         }
@@ -3293,7 +1765,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       capability: loupeCap,
       enabled: loupeOn,
       state: record.state,
-      config: record.config,
+      config,
       view: view2d ?? DEFAULT_VIEW,
       worldSpec: instrument.canvas?.worldSpec,
       hostRef: loupeHostRef
@@ -3320,6 +1792,21 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       ),
       /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
     ] });
+  } else if (stage) {
+    body = /* @__PURE__ */ jsx(
+      Stage,
+      {
+        size: stage.size,
+        view: view2d ?? DEFAULT_VIEW,
+        onViewChange: setView,
+        onResize: placeView,
+        minZoom: stage.minZoom,
+        maxZoom: stage.maxZoom,
+        hostRef: loupeHostRef,
+        overlay: lens,
+        children: instrument.render(renderCtx)
+      }
+    );
   } else if (lens) {
     body = /* @__PURE__ */ jsxs("div", { ref: loupeHostRef, className: "lk-trial__loupe-host", children: [
       instrument.render(renderCtx),
@@ -3340,7 +1827,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
         layers: layerDescriptors,
         visibility: layerVisibility,
         onReorder: (next) => {
-          setLayerOrder(next.map((l) => l.id));
+          setLayerOrder(next.map((l9) => l9.id));
           bus.emit("layers.reorder");
         },
         onToggle: (lid, visible) => {
@@ -3374,13 +1861,13 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
     {
       capability: annotationsCap,
       state: record.state,
-      config: record.config,
+      config,
       trial: { id: record.id, view: record.view },
       annotations,
-      activeToolId: resolvedToolId
+      activeToolId: labTool
     }
   ) : null;
-  return /* @__PURE__ */ jsx(TrialIdProvider, { trialId: record.id, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: annotationsCap ? annotations : null, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(TrialIdProvider, { trialId: record.id, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: annotationsCap ? annotations : null, children: /* @__PURE__ */ jsx(CameraWheelContext.Provider, { value: wheelSlot, children: /* @__PURE__ */ jsxs(
     TrialChrome,
     {
       job: jobCap ? job : void 0,
@@ -3400,29 +1887,53 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
         annotationOverlays
       ]
     }
-  ) }) });
+  ) }) }) });
 }
 
 // src/trial/trialOps.ts
 var DEFAULT_VIEW2 = { zoom: 1, pan: { x: 0, y: 0 } };
 function findInstrument(instruments, name) {
-  const found = instruments.find((i) => i.name === name);
+  const found = instruments.find((i3) => i3.name === name);
   if (!found) {
     throw new Error(`[labkit] Unknown instrument: "${name}"`);
   }
   return found;
 }
 function initialView(instrument) {
-  const declared = instrument.canvas?.initialView;
-  if (typeof declared === "function") return null;
+  const stage = instrument.canvas ? void 0 : instrument.stage;
+  const declared = instrument.canvas?.initialView ?? stage?.initialView;
+  if (typeof declared === "function" || stage && declared === void 0) return null;
   return declared ? structuredClone(declared) : { ...DEFAULT_VIEW2, pan: { ...DEFAULT_VIEW2.pan } };
 }
 function seedConfig(defaults, seed) {
   return seed ? fillConfigDefaults(seed, defaults) : defaults;
 }
+function splitAutoSeed(seed, at = "") {
+  const config = {};
+  const autoPaths = [];
+  for (const [key, value] of Object.entries(seed ?? {})) {
+    const path = at === "" ? key : `${at}.${key}`;
+    if (isAuto(value)) {
+      autoPaths.push(path);
+    } else if (isRecord(value)) {
+      const inner = splitAutoSeed(value, path);
+      config[key] = inner.config;
+      autoPaths.push(...inner.autoPaths);
+    } else {
+      config[key] = value;
+    }
+  }
+  return { config, autoPaths };
+}
+function schemaAutoPaths(instrument) {
+  const schema = unruledConfigSchema(instrument);
+  return schema ? autoPathsOf(schema) : [];
+}
 function addTrial(trials, instruments, instrumentName, options = {}) {
   const instrument = findInstrument(instruments, instrumentName);
-  const config = seedConfig(instrument.defaultConfig(), options.config);
+  const seeded = splitAutoSeed(options.config);
+  const autoPaths = [.../* @__PURE__ */ new Set([...schemaAutoPaths(instrument), ...seeded.autoPaths])];
+  const config = seedConfig(instrument.defaultConfig(), seeded.config);
   const state = instrument.initialState(config);
   const record = {
     id: newId(),
@@ -3432,7 +1943,9 @@ function addTrial(trials, instruments, instrumentName, options = {}) {
     view: initialView(instrument),
     undoStack: { past: [], future: [] }
   };
-  if (options.config) record.configSeed = options.config;
+  if (options.config) record.configSeed = seeded.config;
+  if (seeded.autoPaths.length > 0) record.autoSeed = seeded.autoPaths;
+  if (autoPaths.length > 0) record.auto = autoPaths;
   return [...trials, record];
 }
 function cloneTrial(trials, id) {
@@ -3461,14 +1974,25 @@ function resetTrial(trials, id, instruments) {
   const instrument = findInstrument(instruments, current.instrumentName);
   const config = seedConfig(instrument.defaultConfig(), current.configSeed);
   const state = instrument.initialState(config);
+  const autoPaths = [.../* @__PURE__ */ new Set([...schemaAutoPaths(instrument), ...current.autoSeed ?? []])];
+  const { auto: _unpinnedNow, ...kept } = current;
   const reset = {
-    ...current,
+    ...kept,
     config,
     state,
     view: initialView(instrument)
   };
+  if (autoPaths.length > 0) reset.auto = autoPaths;
   return [...trials.slice(0, idx), reset, ...trials.slice(idx + 1)];
 }
+function swapTrial(trials, instruments, id, instrumentName, options = {}) {
+  const idx = trials.findIndex((w3) => w3.id === id);
+  const current = trials[idx];
+  if (!current) return trials;
+  const [record] = addTrial([], instruments, instrumentName, options);
+  if (current.sidebarWidth !== void 0) record.sidebarWidth = current.sidebarWidth;
+  return [...trials.slice(0, idx), record, ...trials.slice(idx + 1)];
+}
 function reorderTrials(trials, ids) {
   const byId = new Map(trials.map((w3) => [w3.id, w3]));
   const named = ids.map((id) => byId.get(id)).filter((w3) => w3 !== void 0);
@@ -3476,6 +2000,86 @@ function reorderTrials(trials, ids) {
   const rest = trials.filter((w3) => !seen.has(w3.id));
   return [...named, ...rest];
 }
+function findOvershoot(bound, items, tolerance = 1) {
+  let worst = null;
+  for (const { item, edges } of items) {
+    const y3 = edges.bottom - bound.bottom;
+    const x = edges.right - bound.right;
+    const by = Math.max(x, y3);
+    if (by <= tolerance) continue;
+    if (!worst || by > worst.by) worst = { item, by, axis: y3 >= x ? "y" : "x" };
+  }
+  return worst;
+}
+function tagAndClasses(el) {
+  return el.tagName.toLowerCase() + [...el.classList].map((c8) => `.${c8}`).join("");
+}
+function describeElement(el) {
+  if (el.classList.length > 0) return tagAndClasses(el);
+  let up = el.parentElement;
+  while (up && up.classList.length === 0) up = up.parentElement;
+  return up ? `${tagAndClasses(el)} in ${tagAndClasses(up)}` : tagAndClasses(el);
+}
+function edgesOf(el) {
+  const r10 = el.getBoundingClientRect();
+  return { top: r10.top, left: r10.left, bottom: r10.bottom, right: r10.right };
+}
+function* candidates(root) {
+  yield { item: root, edges: edgesOf(root) };
+  for (const el of root.querySelectorAll("*")) yield { item: el, edges: edgesOf(el) };
+}
+function overflows(el) {
+  return el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;
+}
+function explainLabScroll(lab, shellBody) {
+  if (overflows(shellBody)) {
+    const r11 = shellBody.getBoundingClientRect();
+    const bound2 = {
+      top: r11.top,
+      left: r11.left,
+      bottom: r11.top + shellBody.clientHeight,
+      right: r11.left + shellBody.clientWidth
+    };
+    const hit2 = findOvershoot(bound2, candidates(shellBody));
+    return hit2 ? `.lk-shell-body scrolls: ${describeElement(hit2.item)} reaches ${Math.round(hit2.by)}px past it (${hit2.axis})` : ".lk-shell-body scrolls";
+  }
+  const doc = document.scrollingElement ?? document.documentElement;
+  if (!overflows(doc)) return null;
+  const r10 = lab.getBoundingClientRect();
+  const bound = {
+    top: r10.top,
+    left: r10.left,
+    bottom: r10.top + Math.min(r10.height, doc.clientHeight),
+    right: r10.left + Math.min(r10.width, doc.clientWidth)
+  };
+  const hit = findOvershoot(bound, candidates(lab));
+  return hit ? `the page scrolls: ${describeElement(hit.item)} reaches ${Math.round(hit.by)}px past the lab's box (${hit.axis})` : null;
+}
+var SETTLE_MS = 300;
+function useLabFitWarning(labBody) {
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") return;
+    if (!labBody || typeof ResizeObserver === "undefined") return;
+    const lab = labBody.closest(".lk-lab");
+    const shellBody = labBody.closest(".lk-shell-body");
+    if (!lab || !shellBody) return;
+    let timer;
+    const observer = new ResizeObserver(() => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const why = explainLabScroll(lab, shellBody);
+        if (!why) return;
+        observer.disconnect();
+        console.warn(`[labkit] <Lab> should fit its container without scrolling, but ${why}.`);
+      }, SETTLE_MS);
+    });
+    for (const el of [document.documentElement, lab, shellBody, labBody]) observer.observe(el);
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
+  }, [labBody]);
+}
 var MODES = [
   { value: "auto", label: "Auto", glyph: /* @__PURE__ */ jsx(E, { size: 14 }) },
   { value: "light", label: "Light", glyph: /* @__PURE__ */ jsx(w, { size: 14 }) },
@@ -3486,11 +2090,11 @@ var MODE_ITEMS = MODES.map(({ value, label, glyph }) => ({
   label: glyph,
   ariaLabel: label
 }));
-function LabHeader() {
+function LabHeader({ addTrial: addTrial2 = true }) {
   const lab = useLabContext();
   const only = lab.instruments.length === 1 ? lab.instruments[0] : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    only ? /* @__PURE__ */ jsxs(
+    !addTrial2 ? null : only ? /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -3501,29 +2105,20 @@ function LabHeader() {
           /* @__PURE__ */ jsx("span", { children: "Add trial" })
         ]
       }
-    ) : (
-      // Held at null so the control stays an "add one" action rather than
-      // reading as the current instrument.
-      /* @__PURE__ */ jsx(
-        g,
-        {
-          className: "lk-lab-header__add-select",
-          "aria-label": "Add trial",
-          placeholder: "Add trial\u2026",
-          selectedKey: null,
-          options: lab.instruments.map((i) => ({ value: i.name, label: i.name })),
-          onSelectionChange: (name) => {
-            if (name != null) lab.addTrial(String(name));
-          }
-        }
-      )
+    ) : /* @__PURE__ */ jsx(
+      l7,
+      {
+        "aria-label": "Add trial",
+        label: "Add trial\u2026",
+        items: lab.instruments.map((i3) => ({ value: i3.name, label: i3.title ?? i3.name })),
+        onAction: (name) => lab.addTrial(name)
+      }
     ),
     /* @__PURE__ */ jsx(
-      r6,
+      r3,
       {
         className: "lk-lab-header__mode",
         ariaLabel: "Color mode",
-        size: "sm",
         variant: "flat",
         items: MODE_ITEMS,
         value: lab.mode,
@@ -3534,32 +2129,47 @@ function LabHeader() {
     )
   ] });
 }
-function LabPalette({ tools }) {
-  const storeCtx = useContext(LabStoreContext);
-  if (!storeCtx) throw new Error("[labkit] LabPalette requires <LabStoreProvider>");
-  const activeToolId = useStore(storeCtx.store, (s) => s.activeToolId);
-  const setLabTool = useStore(storeCtx.store, (s) => s.setLabTool);
-  const contributions = tools.map((t) => ({
-    id: t.id,
-    region: "palette",
-    group: t.group,
-    item: { icon: t.icon, label: t.label, shortcut: t.shortcut }
-  }));
-  const ctx = {
-    activeToolId,
-    setActiveTool: setLabTool
-  };
-  return /* @__PURE__ */ jsx(PaletteRegion, { contributions, ctx });
+function LabPalette({ tools, contributions }) {
+  const ctx = useLabChromeContext();
+  const all = labContributions(tools, contributions);
+  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c8) => c8.region === "palette"), 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 query() {
+  if (typeof window === "undefined" || !window.matchMedia) return null;
+  return window.matchMedia("(prefers-color-scheme: light)");
 }
-function LabSwitcher({ title, pages, path, className }) {
+function useResolvedMode(mode) {
+  const [system, setSystem] = useState(
+    () => query()?.matches ? "light" : "dark"
+  );
+  useEffect(() => {
+    if (mode !== "auto") return;
+    const mq = query();
+    if (!mq) return;
+    const onChange = (e) => setSystem(e.matches ? "light" : "dark");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [mode]);
+  return mode === "auto" ? system : mode;
+}
+function LabRoot({ children, mode = "auto", className }) {
+  const resolved = useResolvedMode(mode);
+  const outer = useThemeOptional();
+  const root = /* @__PURE__ */ jsx("div", { className: className ? `lk-root ${className}` : "lk-root", "data-wzl-portal-host": "", children });
+  return outer ? root : /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, selection: { mode: resolved }, children: root });
+}
+function currentPage(path, pages) {
+  const here = path.replace(/[?#].*$/, "").replace(/\/$/, "").replace(/\.html$/, "");
+  return pages.findIndex((p2) => here.endsWith(p2.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 here = currentPage(
+    path ?? (typeof window === "undefined" ? "" : window.location.pathname),
+    pages
+  );
   const close = useCallback(() => setOpen(false), []);
   useEffect(() => {
     if (!open) return;
@@ -3598,13 +2208,13 @@ function LabSwitcher({ title, pages, path, className }) {
         ]
       }
     ) }),
-    open && /* @__PURE__ */ jsx("div", { className: "lk-switcher-menu", id: menuId, role: "menu", children: pages.map((page, i) => /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsx("div", { className: "lk-switcher-menu", id: menuId, role: "menu", children: pages.map((page, i3) => /* @__PURE__ */ jsx(
       "a",
       {
         href: page.href,
         role: "menuitem",
         className: "lk-switcher-item",
-        "aria-current": i === here ? "page" : void 0,
+        "aria-current": i3 === here ? "page" : void 0,
         onClick: close,
         children: page.label
       },
@@ -3612,24 +2222,6 @@ function LabSwitcher({ title, pages, path, className }) {
     )) })
   ] });
 }
-function query() {
-  if (typeof window === "undefined" || !window.matchMedia) return null;
-  return window.matchMedia("(prefers-color-scheme: light)");
-}
-function useResolvedMode(mode) {
-  const [system, setSystem] = useState(
-    () => query()?.matches ? "light" : "dark"
-  );
-  useEffect(() => {
-    if (mode !== "auto") return;
-    const mq = query();
-    if (!mq) return;
-    const onChange = (e) => setSystem(e.matches ? "light" : "dark");
-    mq.addEventListener("change", onChange);
-    return () => mq.removeEventListener("change", onChange);
-  }, [mode]);
-  return mode === "auto" ? system : mode;
-}
 function LabShell({
   title,
   children,
@@ -3639,41 +2231,26 @@ function LabShell({
   pages,
   path
 }) {
-  const resolved = useResolvedMode(mode);
-  const outer = useThemeOptional();
-  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 });
+  return /* @__PURE__ */ jsxs(LabRoot, { mode, className: "lk-shell", 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 })
+  ] });
 }
-var ZONE_ID2 = asNodeId("lk-workspace");
-var STRATEGIES2 = { grid: gridStrategy, floating: floatingStrategy };
+var ZONE_ID = asNodeId("lk-workspace");
+var STRATEGIES = { grid: gridStrategy, floating: floatingStrategy };
 var FLOAT_ZONE_ID = asNodeId("lk-workspace-floating");
 var PANEL_KIND = "panel";
 var KIND = "trial";
 function extentOf(store, id) {
-  const p = store.getNode(id)?.membership?.placement;
-  if (!p) return null;
+  const p2 = store.getNode(id)?.membership?.placement;
+  if (!p2) return null;
   const out = {};
-  if (p.size) out.size = p.size;
-  if (p.span) out.span = p.span;
+  if (p2.size) out.size = p2.size;
+  if (p2.span) out.span = p2.span;
   return Object.keys(out).length > 0 ? out : null;
 }
 function PanelFrame({ panel, floating = false }) {
@@ -3694,11 +2271,11 @@ function Workspace({
   viewport
 }) {
   const items = Children.toArray(children);
-  const tilePanels = useMemo(() => (panels ?? []).filter((p) => p.as === "tile"), [panels]);
-  const floatPanels = useMemo(() => (panels ?? []).filter((p) => p.as === "floating"), [panels]);
+  const tilePanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "tile"), [panels]);
+  const floatPanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "floating"), [panels]);
   const wantedIds = [
-    ...items.map((_, i) => ids?.[i] ?? `lk-ws-${i}`),
-    ...tilePanels.map((p) => `lk-panel-${p.key}`)
+    ...items.map((_, i3) => ids?.[i3] ?? `lk-ws-${i3}`),
+    ...tilePanels.map((p2) => `lk-panel-${p2.key}`)
   ];
   const idKey = wantedIds.join(",");
   const idKeyRef = useRef(null);
@@ -3718,7 +2295,7 @@ function Workspace({
     store2.registerNode(
       createNode({
         kind: "zone",
-        id: ZONE_ID2,
+        id: ZONE_ID,
         container: { strategyId: "grid", config: { resizable, gap, padding } }
       })
     );
@@ -3734,10 +2311,10 @@ function Workspace({
   const store = storeRef.current;
   const surface = useSurfaceOptional();
   useLayoutEffect(() => {
-    store.updateContainerConfig(ZONE_ID2, { resizable, gap, padding });
+    store.updateContainerConfig(ZONE_ID, { resizable, gap, padding });
   }, [store, resizable, gap, padding]);
   useLayoutEffect(() => {
-    const present = new Set(store.getContainerView(ZONE_ID2)?.childOrder ?? []);
+    const present = new Set(store.getContainerView(ZONE_ID)?.childOrder ?? []);
     const wanted = new Set(nodeIds);
     for (const id of present) {
       if (!wanted.has(id)) store.unregisterNode(id);
@@ -3745,12 +2322,12 @@ function Workspace({
     for (const id of nodeIds) {
       if (present.has(id)) continue;
       const kind = String(id).startsWith("lk-panel-") ? PANEL_KIND : KIND;
-      store.registerNode(createNode({ kind, id, parentId: ZONE_ID2, focus: true }));
+      store.registerNode(createNode({ kind, id, parentId: ZONE_ID, focus: true }));
       store.showNode(id);
       const saved = layoutRef.current?.[id];
       if (saved) store.patchPlacement(id, saved);
     }
-    store.setChildOrder(ZONE_ID2, [...nodeIds]);
+    store.setChildOrder(ZONE_ID, [...nodeIds]);
   }, [store, nodeIds]);
   useEffect(() => {
     if (!surface) return;
@@ -3761,7 +2338,7 @@ function Workspace({
     if (!onLayoutChange) return;
     return store.events.on("node.placementChanged", () => {
       const next = {};
-      for (const child of store.getChildren(ZONE_ID2)) {
+      for (const child of store.getChildren(ZONE_ID)) {
         const extent = extentOf(store, child.id);
         if (extent) next[child.id] = extent;
       }
@@ -3773,9 +2350,9 @@ function Workspace({
     [onReorder]
   );
   const chrome = useMemo(() => {
-    const byId = new Map(nodeIds.map((id, i) => [id, items[i]]));
+    const byId = new Map(nodeIds.map((id, i3) => [id, items[i3]]));
     const panelByNode = new Map(
-      tilePanels.map((p) => [`lk-panel-${p.key}`, p])
+      tilePanels.map((p2) => [`lk-panel-${p2.key}`, p2])
     );
     return {
       [PANEL_KIND]: ({ node }) => {
@@ -3793,11 +2370,11 @@ function Workspace({
       }
     };
   }, [nodeIds, items, reorderable, tilePanels]);
-  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 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 grid = /* @__PURE__ */ jsx(
     Container,
     {
-      parentId: ZONE_ID2,
+      parentId: ZONE_ID,
       chrome,
       className: "lk-workspace windease-zone",
       affordances: resizable,
@@ -3805,7 +2382,7 @@ function Workspace({
       onChildOrderChange: reorderable ? commitOrder : void 0
     }
   );
-  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES2, children: floatingLayer ? (
+  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES, children: floatingLayer ? (
     // The floating layer insets against the workspace, so it needs a
     // positioned box around both. Without one it insets against the page
     // and lands over the lab header.
@@ -3815,23 +2392,59 @@ function Workspace({
     ] })
   ) : reorderable ? /* @__PURE__ */ jsx(DragProvider, { children: grid }) : grid }) });
 }
-function buildStore(instruments, defaultInstrument, storage, storageKey, initialMode) {
-  const store = createLabStore({
+function seedDefaultTrial(store, instruments, defaultInstrument) {
+  if (store.getState().trials.length > 0) return;
+  const record = addTrial([], instruments, defaultInstrument)[0];
+  if (!record) return;
+  const { undoStack: _undoStack, ...rest } = record;
+  store.getState().addTrial(rest);
+}
+function openUnstoredLab({ instruments, defaultInstrument, mode }) {
+  const store = createLabStore({ initialMode: mode ?? "auto", instruments });
+  seedDefaultTrial(store, instruments, defaultInstrument);
+  const records = createRecordCache({ storage: noneAdapter, prefix: "", writable: false });
+  return { store, records, close: () => records.close(), marks: /* @__PURE__ */ new Map() };
+}
+async function openStoredLab({ instruments, defaultInstrument, mode }, storageKey, storage) {
+  const opened = await openLabStore({
     storageKey,
-    storage,
-    initialMode,
-    serializers: serializersOf(instruments),
-    configDefaults: configDefaultsOf(instruments)
+    storage: storage ?? await defaultStorage(),
+    initialMode: mode ?? "auto",
+    instruments
   });
-  if (store.getState().trials.length === 0) {
-    const seeded = addTrial([], instruments, defaultInstrument);
-    const record = seeded[0];
-    if (record) {
-      const { undoStack: _undoStack, ...rest } = record;
-      store.getState().addTrial(rest);
+  seedDefaultTrial(opened.store, instruments, defaultInstrument);
+  const marks = /* @__PURE__ */ new Map();
+  await Promise.all(
+    opened.store.getState().trials.map(async (trial) => {
+      const kept = instruments.find((i3) => i3.name === trial.instrumentName)?.annotations?.storage;
+      if (!kept) return;
+      try {
+        marks.set(trial.id, await kept.load());
+      } catch (error) {
+        console.warn(`[labkit] could not load the marks of trial "${trial.id}"`, error);
+        marks.set(trial.id, null);
+      }
+    })
+  );
+  return { ...opened, marks };
+}
+function LabFallback({
+  title,
+  mode,
+  pages,
+  path
+}) {
+  const resolvedMode = useResolvedMode(mode ?? "auto");
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, selection: { mode: resolvedMode }, className: "lk-lab", children: /* @__PURE__ */ jsx(
+    LabShell,
+    {
+      title: title ?? "Labkit",
+      mode,
+      ...pages ? { pages } : {},
+      ...path !== void 0 ? { path } : {},
+      children: null
     }
-  }
-  return store;
+  ) });
 }
 var NEBULA_SLOTS = [
   { cx: "18%", cy: "30%", sx: "60%", sy: "80%", stop: "70%" },
@@ -3841,73 +2454,181 @@ var NEBULA_SLOTS = [
   { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
 ];
 function buildNebula(colors) {
-  const blobs = colors.map((c2, i) => {
-    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})`;
+  const blobs = colors.map((c8, i3) => {
+    const p2 = NEBULA_SLOTS[i3 % NEBULA_SLOTS.length];
+    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c8} 22%, transparent), transparent ${p2.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
 }
-function Lab({
+function LabPanes({
+  contributions,
+  children
+}) {
+  const surface = useSurfaceOptional();
+  const [sidebarWidth, setSidebarWidth] = usePersistedState(
+    "lk-lab-sidebar-width",
+    void 0,
+    { scope: "lab" }
+  );
+  const [asideWidth, setAsideWidth] = usePersistedState(
+    "lk-lab-aside-width",
+    void 0,
+    { scope: "lab" }
+  );
+  const main = contributions.some((c8) => c8.region === "aside") ? /* @__PURE__ */ jsx(
+    Split,
+    {
+      className: "lk-lab__panes",
+      side: "end",
+      sidebarClassName: "lk-lab__aside",
+      contentClassName: "lk-lab__main",
+      label: "Lab aside",
+      defaultWidth: 320,
+      width: asideWidth,
+      onWidthChange: (w3) => {
+        setAsideWidth(w3);
+        surface?.invalidateRects();
+      },
+      sidebar: /* @__PURE__ */ jsx(LabAsideRegion, { contributions }),
+      children
+    }
+  ) : children;
+  if (!contributions.some((c8) => c8.region === "sidebar")) return main;
+  return /* @__PURE__ */ jsx(
+    Split,
+    {
+      className: "lk-lab__panes",
+      sidebarClassName: "lk-lab__sidebar",
+      contentClassName: "lk-lab__main",
+      label: "Lab sidebar",
+      defaultWidth: 260,
+      width: sidebarWidth,
+      onWidthChange: (w3) => {
+        setSidebarWidth(w3);
+        surface?.invalidateRects();
+      },
+      sidebar: /* @__PURE__ */ jsx(LabSidebarRegion, { contributions }),
+      children: main
+    }
+  );
+}
+function Lab(props) {
+  if (process.env.NODE_ENV !== "production" && props.instruments.length === 0) {
+    throw new Error("[labkit] <Lab> requires a non-empty `instruments` array");
+  }
+  const { storageKey, storage } = props;
+  useWarnIgnoredChange("<Lab>", { storageKey, storage });
+  const opened = useOpenOnce(
+    () => storageKey === void 0 ? openUnstoredLab(props) : openStoredLab(props, storageKey, storage)
+  );
+  if (!opened) {
+    if (props.fallback !== void 0) return props.fallback;
+    return /* @__PURE__ */ jsx(LabFallback, { title: props.title, mode: props.mode, pages: props.pages, path: props.path });
+  }
+  return /* @__PURE__ */ jsx(LabRuntime, { ...props, opened });
+}
+function LabRuntime({
   instruments,
-  defaultInstrument,
-  storage,
-  storageKey,
   mode,
   nebula,
   title,
+  pages,
+  path,
   footer,
   chrome,
+  labChrome,
   suppress,
+  addTrial: addTrial2,
   tools,
   configRules,
   controls,
-  children
+  children,
+  opened
 }) {
-  if (process.env.NODE_ENV !== "production" && instruments.length === 0) {
-    throw new Error("[labkit] <Lab> requires a non-empty `instruments` array");
-  }
-  const storeRef = useRef(null);
-  if (storeRef.current === null) {
-    storeRef.current = buildStore(
-      instruments,
-      defaultInstrument,
-      storage ?? noneAdapter,
-      storageKey ?? "labkit",
-      mode ?? "auto"
-    );
-  }
-  const store = storeRef.current;
-  const trials = useStore(store, (s) => s.trials);
-  const savedSnapshots = useStore(store, (s) => s.savedSnapshots);
-  const modeValue = useStore(store, (s) => s.mode);
-  const layout = useStore(store, (s) => s.layout);
-  const undockedPanels = useStore(store, (s) => s.undockedPanels);
+  const { store } = opened;
+  useLayoutEffect(() => {
+    store.getState().setInstruments(instruments);
+  }, [instruments, store]);
+  const trials = useStore(store, (s5) => s5.trials);
+  const [focusPick, setFocusPick] = useState(null);
+  const focusedTrialId = trials.some((t) => t.id === focusPick) ? focusPick : trials[0]?.id ?? null;
+  const savedSnapshots = useStore(store, (s5) => s5.savedSnapshots);
+  const modeValue = useStore(store, (s5) => s5.mode);
+  const layout = useStore(store, (s5) => s5.layout);
+  const undockedPanels = useStore(store, (s5) => s5.undockedPanels);
   const panelHostsRef = useRef(null);
   if (panelHostsRef.current === null) panelHostsRef.current = createPanelHostRegistry();
   const outerSurface = useSurfaceOptional();
-  const outerCanvas = useSurfaceCanvas();
-  const [ownCanvas, setOwnCanvas] = useState(null);
-  const ownCanvasRef = useRef(null);
+  const outerOver = useSurfaceCanvas("over");
+  const outerUnder = useSurfaceCanvas("under");
+  const [ownOver, setOwnOver] = useState(null);
+  const [ownUnder, setOwnUnder] = useState(null);
+  const ownOverRef = useRef(null);
+  const ownUnderRef = useRef(null);
   const bufferRef = useRef({ w: 0, h: 0 });
   const surfaceRef = useRef(null);
   const onFrame = useCallback((frame) => {
-    const c2 = ownCanvasRef.current;
-    if (!c2) return;
+    const canvases = [ownUnderRef.current, ownOverRef.current].filter((c8) => c8 !== null);
+    if (canvases.length === 0) return;
     const w3 = Math.round(frame.size.width * frame.dpr);
-    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 = h;
-    c2.style.width = `${frame.size.width}px`;
-    c2.style.height = `${frame.size.height}px`;
-    surfaceRef.current?.invalidateAll();
+    const h2 = Math.round(frame.size.height * frame.dpr);
+    if (bufferRef.current.w !== w3 || bufferRef.current.h !== h2) {
+      bufferRef.current = { w: w3, h: h2 };
+      for (const c8 of canvases) {
+        c8.width = w3;
+        c8.height = h2;
+        c8.style.width = `${frame.size.width}px`;
+        c8.style.height = `${frame.size.height}px`;
+      }
+      surfaceRef.current?.invalidateAll();
+      return;
+    }
   }, []);
   const ownSurface = useTiledSurface({ onFrame });
   surfaceRef.current = ownSurface;
+  const [labBody, setLabBody] = useState(null);
+  const attachOwnSurface = ownSurface.containerRef;
+  const labBodyRef = useCallback(
+    (el) => {
+      setLabBody(el);
+      if (!outerSurface) attachOwnSurface(el);
+    },
+    [outerSurface, attachOwnSurface]
+  );
+  useLabFitWarning(labBody);
+  useEffect(() => {
+    if (!labBody) return;
+    const pick = (node) => {
+      const owned = new Set(store.getState().trials.map((t) => t.id));
+      const nearest = (from) => from?.closest(".lk-trial[data-trial-id]") ?? null;
+      let trial = typeof node?.closest === "function" ? nearest(node) : null;
+      while (trial && !owned.has(trial.dataset.trialId ?? "")) trial = nearest(trial.parentElement);
+      if (trial?.dataset.trialId) setFocusPick(trial.dataset.trialId);
+    };
+    const onInput = (event) => pick(event.target);
+    let pending;
+    const doc = labBody.ownerDocument;
+    const win = doc.defaultView;
+    const onBlur = () => {
+      clearTimeout(pending);
+      pending = setTimeout(() => pick(doc.activeElement), 0);
+    };
+    labBody.addEventListener("pointerdown", onInput, true);
+    labBody.addEventListener("focusin", onInput, true);
+    win?.addEventListener("blur", onBlur);
+    return () => {
+      clearTimeout(pending);
+      labBody.removeEventListener("pointerdown", onInput, true);
+      labBody.removeEventListener("focusin", onInput, true);
+      win?.removeEventListener("blur", onBlur);
+    };
+  }, [labBody, store]);
   const surface = outerSurface ?? ownSurface;
-  const surfaceCanvas = outerSurface ? outerCanvas : ownCanvas;
+  const surfaceCanvases = useMemo(
+    () => outerSurface ? { over: outerOver, under: outerUnder } : { over: ownOver, under: ownUnder },
+    [outerSurface, outerOver, outerUnder, ownOver, ownUnder]
+  );
   const workspacePanels = useMemo(
     () => Object.entries(undockedPanels).map(([key, panel]) => ({
       key,
@@ -3917,6 +2638,13 @@ function Lab({
     [undockedPanels]
   );
   const resolvedMode = useResolvedMode(modeValue);
+  const annotates = instruments.some((i3) => i3.annotations != null);
+  const labChromeAll = useMemo(
+    () => labContributions([...annotates ? ANNOTATION_TOOLS : [], ...tools ?? []], labChrome),
+    [annotates, tools, labChrome]
+  );
+  const hasFooterChrome = labChromeAll.some((c8) => c8.region === "footer");
+  const hasPaneChrome = labChromeAll.some((c8) => c8.region === "sidebar" || c8.region === "aside");
   useEffect(() => {
     if (mode && mode !== store.getState().mode) {
       store.getState().setMode(mode);
@@ -3927,18 +2655,23 @@ function Lab({
       const currentById = new Map(store.getState().trials.map((w3) => [w3.id, w3]));
       const merged = next.map((w3) => currentById.get(w3.id) ?? w3);
       store.setState({ trials: merged });
-      store.getState().setMode(store.getState().mode);
+    };
+    const replaceAndFocusAdded = (next) => {
+      const before = new Set(store.getState().trials.map((w3) => w3.id));
+      replaceTrials(next);
+      const added = next.find((w3) => !before.has(w3.id));
+      if (added) setFocusPick(added.id);
     };
     return {
       instruments,
       trials,
       addTrial: (instrumentName, options) => {
-        const next = addTrial(store.getState().trials, instruments, instrumentName, options);
-        replaceTrials(next);
+        replaceAndFocusAdded(
+          addTrial(store.getState().trials, instruments, instrumentName, options)
+        );
       },
       cloneTrial: (id) => {
-        const next = cloneTrial(store.getState().trials, id);
-        replaceTrials(next);
+        replaceAndFocusAdded(cloneTrial(store.getState().trials, id));
       },
       closeTrial: (id) => {
         const next = closeTrial(store.getState().trials, id);
@@ -3947,20 +2680,31 @@ function Lab({
       reorderTrials: (ids) => {
         replaceTrials(reorderTrials(store.getState().trials, ids));
       },
+      swapTrial: (id, instrumentName, options) => {
+        const current = store.getState();
+        const next = swapTrial(current.trials, instruments, id, instrumentName, options);
+        if (next === current.trials) return;
+        const record = next[current.trials.findIndex((w3) => w3.id === id)];
+        const { [id]: extent, ...layoutRest } = current.layout;
+        if (extent) current.setLayout({ ...layoutRest, [record.id]: extent });
+        replaceTrials(next);
+        if (focusedTrialId === id) setFocusPick(record.id);
+      },
+      focusedTrialId,
+      focusTrial: (id) => setFocusPick(id),
       resetTrial: (id) => {
         const next = resetTrial(store.getState().trials, id, instruments);
         const record = next.find((w3) => w3.id === id);
         if (!record) return;
-        store.setState((s) => ({
-          trials: s.trials.map(
+        store.setState((s5) => ({
+          trials: s5.trials.map(
             (w3) => w3.id === id ? { ...w3, config: record.config, state: record.state, view: record.view } : w3
           )
         }));
-        store.getState().updateTrialView(id, record.view);
       },
       savedSnapshots,
       saveSnapshot: (trialId, name) => {
-        const taken = store.getState().savedSnapshots.filter((s) => s.trialId === trialId).length;
+        const taken = store.getState().savedSnapshots.filter((s5) => s5.trialId === trialId).length;
         store.getState().saveSnapshot(trialId, name ?? `Snapshot ${taken + 1}`);
       },
       loadSnapshot: (trialId, snapshotId) => {
@@ -3970,19 +2714,41 @@ function Lab({
         store.getState().deleteSnapshot(snapshotId);
       },
       mode: modeValue,
-      setMode: (m) => {
-        store.getState().setMode(m);
+      setMode: (m2) => {
+        store.getState().setMode(m2);
       },
       configRules,
       controls
     };
-  }, [instruments, trials, savedSnapshots, modeValue, store, configRules, controls]);
+  }, [
+    instruments,
+    trials,
+    focusedTrialId,
+    savedSnapshots,
+    modeValue,
+    store,
+    configRules,
+    controls
+  ]);
   const backdropStyle = resolvedMode === "dark" && nebula && nebula.length > 0 ? { ["--wzl-backdrop"]: buildNebula(nebula) } : void 0;
-  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+  const workspace = /* @__PURE__ */ jsx(
+    Workspace,
+    {
+      panels: workspacePanels,
+      ids: trials.map((w3) => w3.id),
+      resizable: true,
+      reorderable: true,
+      onReorder: (ids) => contextValue.reorderTrials(ids),
+      layout,
+      onLayoutChange: (next) => store.getState().setLayout(next),
+      children: trials.map((w3) => /* @__PURE__ */ jsx(Trial, { id: w3.id, chrome, suppress }, w3.id))
+    }
+  );
+  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(PersistenceContext.Provider, { value: opened.records, children: /* @__PURE__ */ jsx(AnnotationPreloadContext.Provider, { value: opened.marks, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     ThemeProvider,
     {
       theme: interstellarTheme,
-      mode: resolvedMode,
+      selection: { mode: resolvedMode },
       className: "lk-lab",
       style: backdropStyle,
       children: /* @__PURE__ */ jsx(
@@ -3990,55 +2756,813 @@ function Lab({
         {
           title: title ?? "Labkit",
           mode: modeValue,
-          footer,
+          ...pages ? { pages } : {},
+          ...path !== void 0 ? { path } : {},
+          footer: hasFooterChrome ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            footer,
+            /* @__PURE__ */ jsx(LabFooterRegion, { contributions: labChromeAll })
+          ] }) : footer,
           header: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(LabHeader, {}),
-            children
+            /* @__PURE__ */ jsx(LabHeader, { ...addTrial2 !== void 0 ? { addTrial: addTrial2 } : {} }),
+            children,
+            /* @__PURE__ */ jsx(LabHeaderRegion, { contributions: labChromeAll })
           ] }),
-          children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: panelHostsRef.current, children: /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: surface, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: surfaceCanvas, children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "lk-lab__body",
-              ref: outerSurface ? void 0 : ownSurface.containerRef,
-              children: [
-                outerSurface ? null : (
-                  // Above the trials and inert: the marks a tile paints have
-                  // to sit over the instrument's own DOM, and nothing on this
-                  // buffer takes input — each tile has its own input box.
-                  /* @__PURE__ */ jsx(
-                    "canvas",
-                    {
-                      className: "lk-lab__surface",
-                      ref: (el) => {
-                        ownCanvasRef.current = el;
-                        setOwnCanvas(el);
-                      }
+          children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: panelHostsRef.current, children: /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: surface, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: surfaceCanvases, children: /* @__PURE__ */ jsxs("div", { className: "lk-lab__body", ref: labBodyRef, children: [
+            outerSurface ? null : (
+              // Two buffers stacked around the trials, both inert —
+              // each tile takes input from its own box. A tile's marks
+              // annotate the instrument's DOM from over it; an opaque
+              // renderer sits under it, so the pane can still hold a
+              // label. The under one is first so it paints first.
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "canvas",
+                  {
+                    className: "lk-lab__surface lk-lab__surface--under",
+                    ref: (el) => {
+                      ownUnderRef.current = el;
+                      setOwnUnder(el);
                     }
-                  )
+                  }
                 ),
-                tools ? /* @__PURE__ */ jsx(LabPalette, { tools }) : null,
                 /* @__PURE__ */ jsx(
-                  Workspace,
+                  "canvas",
                   {
-                    panels: workspacePanels,
-                    ids: trials.map((w3) => w3.id),
-                    resizable: true,
-                    reorderable: true,
-                    onReorder: (ids) => contextValue.reorderTrials(ids),
-                    layout,
-                    onLayoutChange: (next) => store.getState().setLayout(next),
-                    children: trials.map((w3) => /* @__PURE__ */ jsx(Trial, { id: w3.id, chrome, suppress }, w3.id))
+                    className: "lk-lab__surface lk-lab__surface--over",
+                    ref: (el) => {
+                      ownOverRef.current = el;
+                      setOwnOver(el);
+                    }
                   }
                 )
-              ]
-            }
-          ) }) }) })
+              ] })
+            ),
+            hasPaneChrome ? /* @__PURE__ */ jsxs(LabPanes, { contributions: labChromeAll, children: [
+              /* @__PURE__ */ jsx(LabPalette, { contributions: labChromeAll }),
+              workspace
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(LabPalette, { contributions: labChromeAll }),
+              workspace
+            ] })
+          ] }) }) }) })
         }
       )
     }
-  ) }) });
+  ) }) }) }) });
+}
+var SPECIMEN_SECTIONS = [
+  "Buttons & toggles",
+  "Fields & pickers",
+  "Panels & property rows",
+  "Overlays & feedback",
+  "Lists & data",
+  "Tool chrome",
+  "Editors & plots",
+  "Lab chrome"
+];
+function Section({ title, children }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("section", { className: "lk-specimen__section", "aria-labelledby": id, children: [
+    /* @__PURE__ */ jsx("h2", { id, className: "lk-specimen__heading", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "lk-specimen__grid", children })
+  ] });
+}
+function Cell({ label, wide, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: wide ? "lk-specimen__cell lk-specimen__cell--wide" : "lk-specimen__cell", children: [
+    /* @__PURE__ */ jsx("span", { className: "lk-specimen__label", children: label }),
+    children
+  ] });
+}
+function Dot() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: 16, height: 16, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: 8, cy: 8, r: 4, fill: "currentColor" }) });
+}
+var LEGEND = [
+  { key: "contour", label: "contour", color: "var(--wzl-fg-muted)" },
+  { key: "floor", label: "floor", color: "var(--wzl-fg-subtle)", mark: "dash" },
+  { key: "authored", label: "authored", color: "var(--wzl-success)", mark: "dot" },
+  { key: "replaced", label: "replaced", color: "var(--wzl-danger)", mark: "band" }
+];
+var PREFS = {
+  name: "Preferences",
+  children: {
+    canvas: {
+      name: "Canvas",
+      children: {
+        showGrid: {
+          kind: "boolean",
+          name: "Show grid",
+          description: "Draw a grid behind the scene.",
+          default: true
+        },
+        zoomStep: {
+          kind: "number",
+          name: "Zoom step",
+          description: "Percent the zoom controls move per click.",
+          default: 10,
+          min: 1,
+          max: 50
+        },
+        format: {
+          kind: "enum",
+          name: "Format",
+          description: "File type for exported images.",
+          default: "svg",
+          options: [
+            { value: "svg", label: "SVG" },
+            { value: "png", label: "PNG" }
+          ]
+        }
+      }
+    }
+  }
+};
+var JOB = {
+  status: "running",
+  done: 34,
+  total: 120,
+  failures: [],
+  error: null,
+  start: () => {
+  },
+  cancel: () => {
+  }
+};
+function setAt(values, path, value) {
+  const [head, ...rest] = path.split(".");
+  if (head === void 0) return values;
+  if (rest.length === 0) return { ...values, [head]: value };
+  const inner = values[head] ?? {};
+  return { ...values, [head]: setAt(inner, rest.join("."), value) };
+}
+function ButtonsAndToggles() {
+  const [snap, setSnap] = useState(true);
+  const [wifi, setWifi] = useState(false);
+  const [align, setAlign] = useState("center");
+  const [bold, setBold] = useState(true);
+  const [italic, setItalic] = useState(false);
+  const [open, setOpen] = useState(true);
+  return /* @__PURE__ */ jsxs(Section, { title: "Buttons & toggles", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "Button", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
+      /* @__PURE__ */ jsx(a5, { variant: "primary", children: "Save" }),
+      /* @__PURE__ */ jsx(a5, { variant: "secondary", children: "Cancel" }),
+      /* @__PURE__ */ jsx(a5, { variant: "ghost", children: "Ghost" }),
+      /* @__PURE__ */ jsx(a5, { variant: "secondary", disabled: true, children: "Disabled" }),
+      /* @__PURE__ */ jsx(a5, { variant: "secondary", iconOnly: true, ariaLabel: "Add", children: /* @__PURE__ */ jsx(Dot, {}) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "Badge", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
+      /* @__PURE__ */ jsx(Lt, { shape: "pill", tone: "accent", variant: "outline", size: "sm", children: "ACCENT" }),
+      /* @__PURE__ */ jsx(Lt, { tone: "info", variant: "subtle", children: "INFO" }),
+      /* @__PURE__ */ jsx(Lt, { tone: "warn", variant: "solid", children: "WARN" }),
+      /* @__PURE__ */ jsx(Lt, { tone: "danger", variant: "solid", children: "DANGER" }),
+      /* @__PURE__ */ jsx(Lt, { tone: "muted", children: "MUTED" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "Checkbox, Switch", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
+      /* @__PURE__ */ jsx(o2, { isSelected: snap, onChange: setSnap, children: "Snap to grid" }),
+      /* @__PURE__ */ jsx(o2, { isIndeterminate: true, children: "Mixed" }),
+      /* @__PURE__ */ jsx(a4, { isSelected: wifi, onChange: setWifi, children: "Wifi" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "RadioGroup", children: /* @__PURE__ */ jsxs(l3, { label: "Snap mode", orientation: "horizontal", defaultValue: "grid", children: [
+      /* @__PURE__ */ jsx(u3, { value: "off", children: "Off" }),
+      /* @__PURE__ */ jsx(u3, { value: "grid", children: "Grid" }),
+      /* @__PURE__ */ jsx(u3, { value: "pixel", children: "Pixel" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Cell, { label: "ToggleBar", children: [
+      /* @__PURE__ */ jsx(
+        r3,
+        {
+          ariaLabel: "Align",
+          value: align,
+          onChange: setAlign,
+          items: [
+            { value: "left", label: "Left" },
+            { value: "center", label: "Center" },
+            { value: "right", label: "Right" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        r3,
+        {
+          ariaLabel: "Align, flat",
+          variant: "flat",
+          value: align,
+          onChange: setAlign,
+          items: [
+            { value: "left", label: "Left" },
+            { value: "center", label: "Center" },
+            { value: "right", label: "Right" }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Cell, { label: "OptionsBar, ActionsBar", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
+      /* @__PURE__ */ jsx(
+        r7,
+        {
+          ariaLabel: "Text style",
+          items: [
+            { value: "b", label: "B", selected: bold, onChange: setBold },
+            { value: "i", label: "I", selected: italic, onChange: setItalic }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        r8,
+        {
+          items: [
+            { value: "undo", label: "Undo", onAction: () => {
+            } },
+            { value: "redo", label: "Redo", onAction: () => {
+            } }
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "MenuButton, Disclosure", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
+      /* @__PURE__ */ jsx(
+        l7,
+        {
+          label: "Add trial\u2026",
+          onAction: () => {
+          },
+          items: [
+            { value: "sine", label: "Sine wave" },
+            { value: "annotate", label: "Annotate" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(r6, { open, onToggle: () => setOpen((o5) => !o5), label: "Shapes" }),
+      /* @__PURE__ */ jsx(r6, { open: false, onToggle: () => {
+      }, label: "Down", direction: "down" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "Tabs", children: /* @__PURE__ */ jsxs(o5, { children: [
+      /* @__PURE__ */ jsxs(s5, { "aria-label": "Sections", children: [
+        /* @__PURE__ */ jsx(c6, { id: "props", children: "Props" }),
+        /* @__PURE__ */ jsx(c6, { id: "events", children: "Events" }),
+        /* @__PURE__ */ jsx(c6, { id: "snapshot", children: "Snapshot" })
+      ] }),
+      /* @__PURE__ */ jsx(l6, { id: "props", children: "Props panel." }),
+      /* @__PURE__ */ jsx(l6, { id: "events", children: "Events panel." }),
+      /* @__PURE__ */ jsx(l6, { id: "snapshot", children: "Snapshot panel." })
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "Keycaps", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
+      /* @__PURE__ */ jsx(c3, { keys: [{ label: "\u2318" }, { label: "\u21E7" }, { label: "K" }], separator: "+" }),
+      /* @__PURE__ */ jsx(s3, { label: "K" }),
+      /* @__PURE__ */ jsx(s3, { label: "\u2325", variant: "minimal" })
+    ] }) })
+  ] });
+}
+function FieldsAndPickers() {
+  const [thumbs, setThumbs] = useState([{ value: 0.25 }, { value: 0.75 }]);
+  const [rate, setRate] = useState(1);
+  const [width, setWidth] = useState(6);
+  const [color, setColor] = useState("#b08adbff");
+  const [gradient, setGradient] = useState({
+    fill: "linear-gradient",
+    from: { x: 0.1, y: 0.1 },
+    to: { x: 0.9, y: 0.9 },
+    stops: [
+      { offset: 0, color: "#0fb5a8" },
+      { offset: 1, color: "#f4c43c" }
+    ]
+  });
+  const [paint, setPaint] = useState({ fill: "solid", color: "#b08adb" });
+  return /* @__PURE__ */ jsxs(Section, { title: "Fields & pickers", children: [
+    /* @__PURE__ */ jsxs(Cell, { label: "Input", children: [
+      /* @__PURE__ */ jsx(u2, { label: "Name", placeholder: "e.g. Pico" }),
+      /* @__PURE__ */ jsx(
+        u2,
+        {
+          label: "Size",
+          leadingAdornment: /* @__PURE__ */ jsx("span", { children: "W" }),
+          trailingAdornment: /* @__PURE__ */ jsx("span", { children: "px" }),
+          defaultValue: "120"
+        }
+      ),
+      /* @__PURE__ */ jsx(u2, { label: "Required", isInvalid: true, errorMessage: "Name is required." })
+    ] }),
+    /* @__PURE__ */ jsxs(Cell, { label: "NumberField, Select, ComboBox", children: [
+      /* @__PURE__ */ jsx(g2, { label: "Opacity", minValue: 0, maxValue: 100, step: 5, defaultValue: 80 }),
+      /* @__PURE__ */ jsx(
+        g,
+        {
+          label: "Color",
+          defaultSelectedKey: "g",
+          options: [
+            { value: "r", label: "Red" },
+            { value: "g", label: "Green" },
+            { value: "b", label: "Blue" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        y2,
+        {
+          label: "Filter",
+          placeholder: "Type to filter\u2026",
+          options: [
+            { value: "r", label: "Red" },
+            { value: "g", label: "Green" }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Cell, { label: "RangeSlider, Slider", children: [
+      /* @__PURE__ */ jsx(l4, { label: "Range", defaultValue: [20, 80], minValue: 0, maxValue: 100 }),
+      /* @__PURE__ */ jsx(
+        l4,
+        {
+          label: "Opacity",
+          defaultValue: 75,
+          minValue: 0,
+          maxValue: 100,
+          formatOutput: (v2) => `${v2}%`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        b2,
+        {
+          ariaLabel: "Pair",
+          min: 0,
+          max: 1,
+          step: 0.01,
+          constraint: "ordered",
+          thumbs,
+          onInput: setThumbs,
+          readoutPlacement: "inline-after"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Cell, { label: "DetentSlider, InlineRange", children: [
+      /* @__PURE__ */ jsx(
+        c7,
+        {
+          items: [0.25, 0.5, 1, 2, 4],
+          value: rate,
+          onChange: setRate,
+          formatLabel: (r10) => `${r10}\xD7`,
+          labels: "all",
+          ariaLabel: "Playback rate"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        r2,
+        {
+          "aria-label": "Width",
+          min: 0,
+          max: 20,
+          value: width,
+          onChange: (event) => setWidth(Number(event.target.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Cell, { label: "ColorField, GradientEditor", children: [
+      /* @__PURE__ */ jsx(l2, { value: color, alpha: true, onInput: setColor, onChange: setColor, "aria-label": "Color" }),
+      /* @__PURE__ */ jsx(C2, { value: gradient, onInput: setGradient, onChange: setGradient, kindSwitch: true })
+    ] }),
+    /* @__PURE__ */ jsx(Cell, { label: "PaintInput", children: /* @__PURE__ */ jsx(
+      S,
+      {
+        value: paint,
+        onInput: setPaint,
+        onChange: setPaint,
+        allowNone: true,
+        "aria-label": "Fill"
+      }
+    ) })
+  ] });
+}
+function PanelsAndRows() {
+  const [opacity, setOpacity] = useState(0.8);
+  const [radius, setRadius] = useState(12);
+  const [fill, setFill] = useState("#5841b8");
+  const [alpha, setAlpha] = useState(1);
+  const [stroke, setStroke] = useState("#2ec27e");
+  const [count, setCount] = useState(8);
+  const [cap, setCap] = useState("round");
+  const [side, setSide] = useState("center");
+  const [label, setLabel] = useState("Badge");
+  const [visible, setVisible] = useState(true);
+  const [prefs, setPrefs] = useState({});
+  const [layers, setLayers] = useState([
+    { id: "base", label: "Base coat" },
+    { id: "wash", label: "Wash" }
+  ]);
+  const [panelCollapsed, setPanelCollapsed] = useState(false);
+  return /* @__PURE__ */ jsxs(Section, { title: "Panels & property rows", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "PropertyPanel", children: /* @__PURE__ */ jsx(O, { title: "Shape", children: /* @__PURE__ */ jsxs(k, { children: [
+      /* @__PURE__ */ jsx(
+        F2,
+        {
+          label: "Opacity",
+          value: opacity,
+          min: 0,
+          max: 1,
+          step: 0.01,
+          onChange: setOpacity
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        F2,
+        {
+          label: "Radius",
+          value: radius,
+          min: 0,
+          max: 64,
+          unit: "px",
+          onChange: setRadius
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        L3,
+        {
+          label: "Fill",
+          value: fill,
+          onChange: setFill,
+          alpha,
+          onAlphaChange: setAlpha
+        }
+      ),
+      /* @__PURE__ */ jsx(L3, { label: "Stroke", value: stroke, onChange: setStroke }),
+      /* @__PURE__ */ jsx(V, { label: "Count", value: count, min: 0, max: 100, step: 1, onChange: setCount }),
+      /* @__PURE__ */ jsx(
+        H,
+        {
+          label: "Line cap",
+          value: cap,
+          onChange: setCap,
+          options: [
+            { value: "butt", label: "Butt" },
+            { value: "round", label: "Round" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        U,
+        {
+          label: "Align",
+          value: side,
+          onChange: setSide,
+          options: [
+            { value: "left", label: "L" },
+            { value: "center", label: "C" },
+            { value: "right", label: "R" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(B, { label: "Label", value: label, onChange: setLabel }),
+      /* @__PURE__ */ jsx(R2, { label: "Visible", value: visible, onChange: setVisible }),
+      /* @__PURE__ */ jsx(J, { title: "Bevel", defaultCollapsed: true, children: /* @__PURE__ */ jsx(F2, { label: "Rings", value: 32, min: 4, max: 96, step: 1, onChange: () => {
+      } }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "PrefsForm", children: /* @__PURE__ */ jsx(
+      A2,
+      {
+        schema: PREFS,
+        values: prefs,
+        onChange: (path, value) => setPrefs((prev) => setAt(prev, path, value))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell, { label: "LayerStack", children: /* @__PURE__ */ jsx(
+      c4,
+      {
+        items: layers,
+        onReorder: (ids) => setLayers(ids.flatMap((id) => layers.filter((item) => item.id === id))),
+        renderBody: (item) => /* @__PURE__ */ jsxs("div", { children: [
+          "settings for ",
+          item.label
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell, { label: "Sidebar, SidebarPanel", children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__box", children: /* @__PURE__ */ jsx(n5, { side: "right", ariaLabel: "Specimen sidebar", children: /* @__PURE__ */ jsx(
+      s4,
+      {
+        title: "Selection",
+        collapsed: panelCollapsed,
+        onToggleCollapse: () => setPanelCollapsed((v2) => !v2),
+        onHide: () => {
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__pad", children: "2 items selected" })
+      }
+    ) }) }) })
+  ] });
+}
+function OverlaysAndFeedback() {
+  const calloutAnchor = useRef(null);
+  const [calloutOpen, setCalloutOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const toasts = useMemo(() => m2(), []);
+  return /* @__PURE__ */ jsxs(Section, { title: "Overlays & feedback", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "Tooltip, Callout, Dialog, Toast", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
+      /* @__PURE__ */ jsxs(c2, { children: [
+        /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx("button", { type: "button", children: "Hover me" }) }),
+        /* @__PURE__ */ jsx(l, { placement: "bottom", children: "Duplicates the selected layer" })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", ref: calloutAnchor, onClick: () => setCalloutOpen(true), children: "Callout" }),
+      /* @__PURE__ */ jsx(
+        g3,
+        {
+          triggerRef: calloutAnchor,
+          isOpen: calloutOpen,
+          onOpenChange: setCalloutOpen,
+          tone: "info",
+          title: "Info",
+          children: "Neutral guidance."
+        }
+      ),
+      /* @__PURE__ */ jsx(a5, { onClick: () => setDialogOpen(true), children: "Dialog" }),
+      /* @__PURE__ */ jsx(
+        l5,
+        {
+          isOpen: dialogOpen,
+          onOpenChange: setDialogOpen,
+          title: "Preferences",
+          footer: /* @__PURE__ */ jsx(a5, { variant: "primary", onClick: () => setDialogOpen(false), children: "OK" }),
+          children: /* @__PURE__ */ jsx("p", { children: "Dialog body." })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        a5,
+        {
+          onClick: () => toasts.add("success", "Saved", { description: "All changes stored.", ttlMs: null }),
+          children: "Toast"
+        }
+      ),
+      /* @__PURE__ */ jsx(S4, { queue: toasts, placement: "bottom-right" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "Powerline", children: /* @__PURE__ */ jsx(
+      r10,
+      {
+        variant: "solid",
+        size: "sm",
+        segments: [
+          { text: "main", tone: "accent", endCap: "chevron" },
+          { text: "\u2713 12", tone: "info", endCap: "slant" },
+          { text: "~/proj", tone: "muted" }
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell, { label: "StatusBar", children: /* @__PURE__ */ jsxs(n6, { ariaLabel: "Editor status", children: [
+      /* @__PURE__ */ jsx(r11, { children: "tool: select" }),
+      /* @__PURE__ */ jsx(r11, { children: "sel: 3" }),
+      /* @__PURE__ */ jsx(i5, {}),
+      /* @__PURE__ */ jsx(r11, { muted: true, children: "0.7.0" })
+    ] }) })
+  ] });
+}
+function ListsAndData() {
+  return /* @__PURE__ */ jsxs(Section, { title: "Lists & data", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "ItemList", children: /* @__PURE__ */ jsx(
+      i4,
+      {
+        rows: [
+          { id: "a", label: "Draw rect" },
+          { id: "b", label: "Fill", selected: true },
+          { id: "c", label: "Move", muted: true }
+        ],
+        empty: "Nothing"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell, { label: "DataGrid", children: /* @__PURE__ */ jsx(
+      s2,
+      {
+        rows: [
+          { id: "1", name: "accent", count: 3 },
+          { id: "2", name: "info", count: 1 },
+          { id: "3", name: "danger", count: 2 }
+        ],
+        columns: [
+          { id: "name", header: "name", accessor: (r10) => r10.name, sortable: true },
+          { id: "count", header: "count", accessor: (r10) => r10.count, sortable: true }
+        ],
+        defaultSort: { columnId: "name", direction: "asc" }
+      }
+    ) })
+  ] });
+}
+function ToolChrome() {
+  const [tool, setTool] = useState("select");
+  const [paneWidth, setPaneWidth] = useState(160);
+  return /* @__PURE__ */ jsxs(Section, { title: "Tool chrome", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "ToolGroup, ToolButton", children: /* @__PURE__ */ jsx(n7, { orientation: "horizontal", ariaLabel: "Tools", children: ["select", "rect", "ellipse"].map((id) => /* @__PURE__ */ jsx(
+      o4,
+      {
+        icon: /* @__PURE__ */ jsx(Dot, {}),
+        label: id,
+        shortcut: id.slice(0, 1).toUpperCase(),
+        active: tool === id,
+        tabbable: tool === id,
+        onClick: () => setTool(id)
+      },
+      id
+    )) }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "ToolOptionsBar", children: /* @__PURE__ */ jsxs(r9, { label: "Text", children: [
+      /* @__PURE__ */ jsx(a5, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Bold", children: "B" }),
+      /* @__PURE__ */ jsx(a5, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Italic", children: "I" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "ResizeHandle", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__box", children: [
+      /* @__PURE__ */ jsx("div", { className: "lk-specimen__box-main", children: "content" }),
+      /* @__PURE__ */ jsx(
+        c5,
+        {
+          value: paneWidth,
+          min: 100,
+          max: 220,
+          invert: true,
+          onInput: setPaneWidth,
+          ariaLabel: "Resize"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "lk-specimen__pane",
+          style: { "--lk-specimen-pane-w": `${paneWidth}px` },
+          children: [
+            paneWidth,
+            "px"
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+function EditorsAndPlots() {
+  const [curve, setCurve] = useState([
+    { x: 0, y: 0 },
+    { x: 0.3, y: 0.1 },
+    { x: 0.7, y: 0.9 },
+    { x: 1, y: 1 }
+  ]);
+  const [points, setPoints] = useState([
+    { x: 0.2, y: 0.3 },
+    { x: 0.5, y: 0.6 },
+    { x: 0.8, y: 0.2 }
+  ]);
+  const [bands, setBands] = useState([
+    { from: 1 / 64, data: { name: "Radial" } },
+    { from: 1 / 12, data: { name: "Name plate" } }
+  ]);
+  const [band, setBand] = useState(null);
+  const [tracks, setTracks] = useState(
+    () => [
+      {
+        kind: "sampled",
+        label: "x",
+        keys: [
+          { t: 0, value: 0 },
+          { t: 800, value: 120, easing: "easeOutCubic" },
+          { t: 1600, value: 40 }
+        ],
+        onTick: () => {
+        }
+      },
+      {
+        kind: "event",
+        label: "footstep",
+        events: [
+          { t: 300, fire: () => {
+          } },
+          { t: 900, fire: () => {
+          } }
+        ]
+      }
+    ]
+  );
+  const [playhead, setPlayhead] = useState(0);
+  return /* @__PURE__ */ jsxs(Section, { title: "Editors & plots", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "Plot2D", children: /* @__PURE__ */ jsx(
+      w2,
+      {
+        width: 260,
+        height: 130,
+        grid: { divisions: 3 },
+        axes: {},
+        xRange: [0, 2e3],
+        yRange: [-0.35, 1.2]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell, { label: "CurveEditor", children: /* @__PURE__ */ jsx(
+      L2,
+      {
+        value: curve,
+        onInput: setCurve,
+        domain: "1d",
+        interpolation: "catmull-rom",
+        endpoints: "pinned-both",
+        addPointMode: "click-curve",
+        axes: {},
+        fill: { side: "below" },
+        width: 260,
+        height: 130
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell, { label: "PointPlotter", children: /* @__PURE__ */ jsx(
+      n8,
+      {
+        value: points,
+        onInput: setPoints,
+        xRange: [0, 1],
+        yRange: [0, 1],
+        grid: { divisions: 3 },
+        axes: {},
+        addPointMode: "click-empty",
+        width: 260,
+        height: 130
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell, { label: "BandEditor", wide: true, children: /* @__PURE__ */ jsx(
+      k2,
+      {
+        min: 1 / 64,
+        max: 1 / 2,
+        scale: "log",
+        snap: true,
+        value: bands,
+        onChange: setBands,
+        selectedIndex: band,
+        onSelect: setBand,
+        renderBand: (b2) => b2.data.name,
+        ticks: [1 / 24, 1 / 12, 1 / 6].map((at) => ({ at, label: `1/${Math.round(1 / at)}` }))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell, { label: "Timeline", wide: true, children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__timeline", children: /* @__PURE__ */ jsx(
+      $2,
+      {
+        tracks,
+        duration: 2e3,
+        playhead,
+        onChange: setTracks,
+        onScrub: setPlayhead
+      }
+    ) }) })
+  ] });
+}
+function LabChrome() {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  return /* @__PURE__ */ jsxs(Section, { title: "Lab chrome", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "Toolbar", wide: true, children: /* @__PURE__ */ jsxs(Toolbar, { "aria-label": "Trial actions", children: [
+      /* @__PURE__ */ jsx(Toolbar.Title, { children: "My Trial" }),
+      /* @__PURE__ */ jsxs(Toolbar.Group, { children: [
+        /* @__PURE__ */ jsx(Toolbar.Button, { onClick: () => {
+        }, children: "Undo" }),
+        /* @__PURE__ */ jsx(Toolbar.Button, { onClick: () => {
+        }, disabled: true, children: "Redo" })
+      ] }),
+      /* @__PURE__ */ jsx(Toolbar.Group, { end: true, children: /* @__PURE__ */ jsx(Toolbar.Button, { onClick: () => {
+      }, children: "Save" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "StatusBar", children: /* @__PURE__ */ jsxs(StatusBar, { children: [
+      /* @__PURE__ */ jsx(StatusBar.Section, { children: "Items: 12" }),
+      /* @__PURE__ */ jsx(StatusBar.Section, { children: "Zoom: 100%" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "Sidebar", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__box", children: [
+      /* @__PURE__ */ jsx("div", { className: "lk-specimen__box-main", children: "main" }),
+      /* @__PURE__ */ jsx(
+        Sidebar,
+        {
+          title: "Controls",
+          collapsed: sidebarCollapsed,
+          onToggle: () => setSidebarCollapsed((v2) => !v2),
+          children: /* @__PURE__ */ jsx("p", { children: "One slider" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Cell, { label: "Legend, JobProgress", children: [
+      /* @__PURE__ */ jsx(Legend, { entries: LEGEND }),
+      /* @__PURE__ */ jsx(JobProgress, { job: JOB })
+    ] }),
+    /* @__PURE__ */ jsxs(Cell, { label: "ScaleIndicator, ZoomControl", children: [
+      /* @__PURE__ */ jsx(ScaleIndicator, { zoom, unit: "ft", pixelsPerUnit: 50 }),
+      /* @__PURE__ */ jsx(ZoomControl, { zoom, onZoomChange: setZoom, min: 0.1, max: 8 })
+    ] }),
+    /* @__PURE__ */ jsx(Cell, { label: "FloatingPanel", children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__floating-host", children: /* @__PURE__ */ jsx(FloatingPanel, { anchor: "top-right", children: /* @__PURE__ */ jsx(Legend, { entries: LEGEND.slice(0, 2) }) }) }) }),
+    /* @__PURE__ */ jsx(Cell, { label: "Split", wide: true, children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__box", children: /* @__PURE__ */ jsx(
+      Split,
+      {
+        sidebar: /* @__PURE__ */ jsx("div", { className: "lk-specimen__pad", children: "sidebar" }),
+        defaultWidth: 160,
+        minWidth: 100,
+        maxWidth: 260,
+        children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__pad", children: "content" })
+      }
+    ) }) })
+  ] });
+}
+function Specimen({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: className ? `lk-specimen ${className}` : "lk-specimen", "data-wzl-portal-host": "", children: [
+    /* @__PURE__ */ jsx(ButtonsAndToggles, {}),
+    /* @__PURE__ */ jsx(FieldsAndPickers, {}),
+    /* @__PURE__ */ jsx(PanelsAndRows, {}),
+    /* @__PURE__ */ jsx(OverlaysAndFeedback, {}),
+    /* @__PURE__ */ jsx(ListsAndData, {}),
+    /* @__PURE__ */ jsx(ToolChrome, {}),
+    /* @__PURE__ */ jsx(EditorsAndPlots, {}),
+    /* @__PURE__ */ jsx(LabChrome, {})
+  ] });
 }
 
-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 };
+export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationOverlay, AnnotationTargets, Lab, LabPalette, LabRoot, LabShell, LabSwitcher, SPECIMEN_SECTIONS, Specimen, Trial, TrialBody, TrialChrome, Workspace, addTrial, annotationToolInfo, annotationsFromJSON, capturePlan, captureTarget, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, currentPage, defineInstrument, fitView, fracContains, fracEncloses, fracToWorld, fromWeaselView, interstellarTheme, isStale, markCommands, markSvgNodes, reorderTrials, resetTrial, resolveMarkStyle, roundFrac, seenFrom, toWeaselView, validateConfigSchema, worldToFrac };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map