@weasel-js/labkit 1.5.0 → 1.5.2

package/dist/index.js

@@ -1,31 +1,34 @@
-import { resolveLoupe, TrialLoupe } from './chunk-ZPH5WTWF.js';
-export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-ZPH5WTWF.js';
+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 { useTiledSurface } from './chunk-QLSV2N3G.js';
-export { composeRects, rectsEqual, toDeviceRect, useTiledSurface } from './chunk-QLSV2N3G.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 { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, AnnotationsContext, useLabChromeContext, labContributions, LabHeaderRegion, LabFooterRegion, LabSidebarRegion } from './chunk-NS64DXMN.js';
-export { AnnotationsContext, ExportMenu, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useAnnotations, useAnnotationsOptional, useLabChromeContext } from './chunk-NS64DXMN.js';
-import { Split, JobProgress } from './chunk-EKIICY6X.js';
-export { FloatingPanel, JobProgress, Legend, Sidebar, Split } from './chunk-EKIICY6X.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-KJALCDWE.js';
-import { createLabStore, openLabStore, panelKey } from './chunk-67SJLMC7.js';
-export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-67SJLMC7.js';
+import { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, AnnotationsContext, useLabChromeContext, labContributions, LabHeaderRegion, LabFooterRegion, LabAsideRegion, LabSidebarRegion } from './chunk-CKUKF72R.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-CKUKF72R.js';
+import { Split, JobProgress, Sidebar, Legend, FloatingPanel } from './chunk-KJCUERQF.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar, Split } from './chunk-KJCUERQF.js';
+import { Toolbar, StatusBar, ScaleIndicator, ZoomControl } from './chunk-753Y6HE6.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-753Y6HE6.js';
+import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-LRI3MBGR.js';
+export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-LRI3MBGR.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-TQBBYTAF.js';
-import { useConfigSchema } from './chunk-6ZDGOZQV.js';
-export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useConfigSchema } from './chunk-6ZDGOZQV.js';
-import { useLabContext, LabContext } from './chunk-NDRYLVOW.js';
-export { LabContext, useLabContext } from './chunk-NDRYLVOW.js';
-export { fromConfigFields, isLeafVisible } from './chunk-UU3NJO6N.js';
-import { hasConfigPath, schemaNodeAtPath, withValueAtPath, fillConfigDefaults } from './chunk-E44SU6XS.js';
-export { fillConfigDefaults, hasConfigPath, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-E44SU6XS.js';
-import { CameraWheelContext, as2DView, DEFAULT_VIEW, CanvasStack, Stage, withZoom, fitStage } from './chunk-PGETSEDK.js';
-export { CanvasStack, DEFAULT_VIEW, PITCH_LIMIT, Stage, as2DView, clampPitch, fitStage, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-PGETSEDK.js';
+export { ControlPanel } from './chunk-FKLT3ITC.js';
+import { useConfigSchema } from './chunk-6BUQ77ZV.js';
+export { useConfigSchema } from './chunk-6BUQ77ZV.js';
+import { useLabContext, LabContext } from './chunk-Z76KEZAX.js';
+export { LabContext, useLabContext } from './chunk-Z76KEZAX.js';
+import { useResolvedConfig } from './chunk-A2ACAGW6.js';
+export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-A2ACAGW6.js';
+export { fromConfigFields, isLeafVisible } from './chunk-EMXAIRUJ.js';
+import { hasConfigPath, schemaNodeAtPath, applyConfigWrite, resolveAutoConfig, isAuto, isRecord, autoPathsOf, fillConfigDefaults } from './chunk-REOBGYMC.js';
+export { auto, autoPathsOf, fillConfigDefaults, hasConfigPath, isAuto, resolveAutoConfig, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-REOBGYMC.js';
+import { CameraWheelContext, as2DView, DEFAULT_VIEW, CanvasStack, Stage, withZoom, fitStage } from './chunk-TT5C5S6R.js';
+export { CanvasStack, DEFAULT_VIEW, Stage, as2DView, fitStage, usePanZoom } from './chunk-TT5C5S6R.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';
@@ -34,625 +37,22 @@ export { SurfaceCanvasContext, SurfaceContext, useSurface, useSurfaceCanvas, use
 export { CanvasStackContext } from './chunk-CQLQPQ4P.js';
 import { LabStoreContext, TrialIdProvider } from './chunk-2YILQ7Y5.js';
 export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
-import { LayerList } from './chunk-MUKOW3TC.js';
-export { LayerList } from './chunk-MUKOW3TC.js';
+import { LayerList } from './chunk-D35PFTS7.js';
+export { LayerList } from './chunk-D35PFTS7.js';
 import './chunk-SBXNQW4G.js';
-import { E, w, T, p, u, c, n, f, r2, h, C, l5, r6 } from './chunk-S2SHZRD7.js';
-export { a3 as Button, P3 as CheckboxRow, N2 as ColorRow, b3 as CurveField, B as EffectCard, H as EffectCardList, c3 as LayerStack, I as NumberRow, U2 as PropertyGroup, E2 as PropertyList, T2 as PropertyPanel, O as PropertyRow, D as PropertySpan, L as SelectRow, j2 as SliderRow, z as Subpanel, F as TextRow, r6 as ToggleBar, R as ToggleRow } from './chunk-S2SHZRD7.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, resolveAlign, SCRIPT_METRICS } from '@weasel-js/core';
-import { tileGeometry } from '@weasel-js/core/patterns-builtin';
+import { E, w, T, a2, p, u, c, n, f, r, h, serializeSvg, C, l7, r5, a5, Lt, o2, a3, l3, u3, r7, r8, r6, o5, s5, c7, l6, c3, s3, u2, g, b2, y2, l4, b3, c8, r3, l2, C2, S, D, O, I2, z2, U, W, G2, H, B, X, A2, c4, n5, s4, m2, c2, l, g2, l5, S4, r9, n6, r10, i5, i4, s2, n7, o4, c5, c6, w2, L2, n8, k3, $2 } from './chunk-LASCBWW7.js';
+export { a5 as Button, B as CheckboxRow, y as CloseIcon, $ as CollapseIcon, z2 as ColorRow, S2 as CurveField, q as EffectCard, Y as EffectCardList, te as ExpandIcon, o as Icon, u2 as Input, l9 as Jog, c4 as LayerStack, U as NumberRow, I as PauseIcon, F as PlayIcon, X as PropertyGroup, O as PropertyList, D as PropertyPanel, j2 as PropertyRow, k2 as PropertySpan, v as ResetIcon, b2 as Select, W as SelectRow, I2 as SliderRow, R as StepBackIcon, z as StepForwardIcon, L as StopIcon, K as Subpanel, H as TextRow, r5 as ToggleBar, G2 as ToggleRow, oe as TokenPanel, H2 as inferTokenType, O2 as refitScale } from './chunk-LASCBWW7.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 { 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(a2, b2) {
-  return [
-    a2[0] * b2[0] + a2[2] * b2[1],
-    a2[1] * b2[0] + a2[3] * b2[1],
-    a2[0] * b2[2] + a2[2] * b2[3],
-    a2[1] * b2[2] + a2[3] * b2[3],
-    a2[0] * b2[4] + a2[2] * b2[5] + a2[4],
-    a2[1] * b2[4] + a2[3] * b2[5] + a2[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((n2) => trimNumber(n2)).join(" ")})`;
-}
-function trimNumber(n2) {
-  if (!Number.isFinite(n2)) return "0";
-  const r3 = Math.round(n2 * 1e6) / 1e6;
-  if (Number.isInteger(r3)) return String(r3);
-  return String(r3);
-}
-function anchorOffset(style, width) {
-  const edge = resolveAlign(style?.align ?? "left", style?.direction ?? "ltr");
-  return edge === "center" ? width / 2 : edge === "right" ? width : 0;
-}
-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, width, height } = path;
-    return `M${trimNumber(x)} ${trimNumber(y)}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 c3 = cmds[i];
-    if (c3 === PATH_M) {
-      out.push(`M${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
-      ci += 2;
-    } else if (c3 === PATH_L) {
-      out.push(`L${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
-      ci += 2;
-    } else if (c3 === 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 (c3 === PATH_Q) {
-      out.push(
-        `Q${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])}`
-      );
-      ci += 4;
-    } else if (c3 === 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((n2) => nodeXml(n2, 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 n2 of nodes) {
-    if (n2.kind === "group") {
-      registerPaintServers(n2.children, registry);
-    } else if (n2.kind === "path") {
-      if (n2.fill.kind === "gradient") registry.register(n2.fill.paint);
-      if (n2.stroke && n2.stroke.paint.kind === "gradient") registry.register(n2.stroke.paint.paint);
-      registerMarkers(n2.stroke, registry);
-    } else if (n2.kind === "text") {
-      registerTextPaint(n2.fill, registry);
-      registerTextPaint(n2.stroke?.paint, registry);
-      registerMarkers(n2.stroke, registry);
-      for (const run of n2.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((c3) => nodeXml(c3, 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 a2 of fillAttrs) attrs.push(a2);
-  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 a2 of strokeAttrs) attrs.push(a2);
-  } 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 b2 = pathBounds(node.path);
-    const cx = b2.minX + (b2.maxX - b2.minX) / 2;
-    const cy = b2.minY + (b2.maxY - b2.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 = (n2, ctm) => {
-    if (n2.kind === "group") {
-      const childCtm = n2.transform ? multiply(ctm, n2.transform) : ctm;
-      n2.children.forEach((c3) => visit(c3, childCtm));
-      return;
-    }
-    const b2 = n2.kind === "text" || n2.kind === "image" ? { minX: n2.x, minY: n2.y, maxX: n2.x + n2.width, maxY: n2.y + n2.height } : pathBounds(n2.path);
-    const local = n2.rotation ? rotateAboutCenter(ctm, b2, n2.rotation) : ctm;
-    for (const [x, y] of corners(b2)) {
-      const px = local[0] * x + local[2] * y + local[4];
-      const py = local[1] * x + local[3] * y + local[5];
-      if (px < minX) minX = px;
-      if (py < minY) minY = py;
-      if (px > maxX) maxX = px;
-      if (py > maxY) maxY = py;
-    }
-  };
-  nodes.forEach((n2) => visit(n2, 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(b2) {
-  return [[b2.minX, b2.minY], [b2.maxX, b2.minY], [b2.maxX, b2.maxY], [b2.minX, b2.maxY]];
-}
-function rotateAboutCenter(ctm, b2, angle) {
-  const cx = (b2.minX + b2.maxX) / 2;
-  const cy = (b2.minY + b2.maxY) / 2;
-  const c3 = Math.cos(angle);
-  const s = Math.sin(angle);
-  return multiply(ctm, [c3, s, -s, c3, cx - cx * c3 + cy * s, cy - cx * s - cy * c3]);
-}
-function textXml(node, registry, namespaces) {
-  const attrs = [
-    `x="${trimNumber(node.x + anchorOffset(node.style, node.width))}"`,
-    `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 (style?.wrap) attrs.push('data-weasel-wrap="true"');
-  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 a2 of coreStrokeAttrs(node.stroke, registry)) attrs.push(a2);
-  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((r3) => runXml(r3, 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 a2 of coreStrokeAttrs(run.stroke, registry)) attrs.push(a2);
-  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 b2 = boundsOfPath(path);
-  return { minX: b2.x, minY: b2.y, maxX: b2.x + b2.width, maxY: b2.y + b2.height };
-}
 var MARK_COLOR = "#e5484d";
 var MARK_WIDTH = 2;
 var TEXT_SIZE = 14;
@@ -660,24 +60,24 @@ var toWorld = (p2, content) => ({
   x: p2.x * content.w,
   y: p2.y * content.h
 });
-function vertices(m, content) {
-  const stored = m.data.points;
+function vertices(m2, content) {
+  const stored = m2.data.points;
   if (stored && stored.length >= 2) return stored.map((p2) => toWorld(p2, content));
-  const { x, y, width, height } = m.pose;
+  const { x, y: y3, width, height } = m2.pose;
   return [
-    { x, y },
-    { x: x + width, y: y + height }
+    { x, y: y3 },
+    { x: x + width, y: y3 + height }
   ];
 }
 function polyline(points) {
-  const b2 = new PathBuilder();
+  const b3 = new PathBuilder();
   const first = points[0];
   if (!first) return rectPath(0, 0, 0, 0);
-  b2.moveTo(first.x, first.y);
-  for (const p2 of points.slice(1)) b2.lineTo(p2.x, p2.y);
-  return b2.build();
+  b3.moveTo(first.x, first.y);
+  for (const p2 of points.slice(1)) b3.lineTo(p2.x, p2.y);
+  return b3.build();
 }
-function markCommands(m, content, style = {}) {
+function markCommands(m2, content, style = {}) {
   const color = style.color ?? MARK_COLOR;
   const stroke = {
     paint: { color },
@@ -686,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 [a2, b2] = vertices(m, content);
-      return [{ kind: "path", path: linePath(a2, b2), stroke }];
+      const [a4, b3] = vertices(m2, content);
+      return [{ kind: "path", path: linePath(a4, b3), stroke }];
     }
     case "arrow": {
-      const [a2, b2] = vertices(m, content);
+      const [a4, b3] = vertices(m2, content);
       const marked = { ...stroke, markerEnd: "arrow" };
-      const path = linePath(a2, b2);
+      const path = linePath(a4, b3);
       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,
@@ -734,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;
 }
@@ -743,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;
 }
@@ -756,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 ?? [])
@@ -783,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",
@@ -800,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 } : {}
@@ -809,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
@@ -819,7 +220,7 @@ function capturePlan(base, format) {
   if (format === "svg") return "svg-document";
   return base?.kind === "svg" ? "svg-document" : "raster-stack";
 }
-function nestBaseSvg(markup, w2, h2) {
+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") {
@@ -827,17 +228,17 @@ function nestBaseSvg(markup, w2, h2) {
   }
   root.setAttribute("x", "0");
   root.setAttribute("y", "0");
-  root.setAttribute("width", String(w2));
+  root.setAttribute("width", String(w3));
   root.setAttribute("height", String(h2));
   return new XMLSerializer().serializeToString(root);
 }
-function embedRasterBase(base, w2, h2, onWarn) {
+function embedRasterBase(base, w3, h2, onWarn) {
   const href = base.kind === "canvas" ? base.canvas.toDataURL() : base.kind === "image" ? base.src : "";
   if (base.kind === "image" && !href.startsWith("data:")) {
     onWarn?.(`base image '${href}' is a reference, so this SVG is not self-contained`);
   }
-  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w2, height: h2 }], {
-    viewBox: { x: 0, y: 0, width: w2, height: h2 }
+  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) {
@@ -853,15 +254,15 @@ function markNodesOf(scene, draw) {
 }
 function composeCaptureSvg(args) {
   const { base, scene, draw, scale, onWarn } = args;
-  const { w: w2, h: h2 } = draw.content;
-  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w2, h2) : embedRasterBase(base, w2, h2, onWarn);
+  const { w: w3, h: h2 } = draw.content;
+  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w3, h2) : embedRasterBase(base, w3, h2, onWarn);
   const marksXml = serializeSvg(markNodesOf(scene, draw), {
-    viewBox: { x: 0, y: 0, width: w2, height: h2 },
+    viewBox: { x: 0, y: 0, width: w3, height: h2 },
     onWarn
   });
-  const outW = Math.max(1, Math.round(w2 * scale));
+  const outW = Math.max(1, Math.round(w3 * scale));
   const outH = Math.max(1, Math.round(h2 * scale));
-  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w2} ${h2}">${baseXml}${marksXml}</svg>`;
+  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");
@@ -963,10 +364,10 @@ function fracToWorld(f3, content) {
     height: f3.h * content.h
   };
 }
-function worldToFrac(r3, content) {
+function worldToFrac(r9, content) {
   const sx = content.w === 0 ? 0 : 1 / content.w;
   const sy = content.h === 0 ? 0 : 1 / content.h;
-  return { x: r3.x * sx, y: r3.y * sy, w: r3.width * sx, h: r3.height * sy };
+  return { x: r9.x * sx, y: r9.y * sy, w: r9.width * sx, h: r9.height * sy };
 }
 var DP = 1e4;
 function roundFrac(f3) {
@@ -1016,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;
@@ -1025,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";
@@ -1042,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";
@@ -1054,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;
     }
   }
@@ -1117,21 +518,21 @@ function createAnnotationStore(opts) {
     if (!scene) return [];
     const out = [];
     for (const id of scene.renderOrder()) {
-      const a2 = project(target, String(id));
-      if (a2) out.push(a2);
+      const a4 = project(target, String(id));
+      if (a4) out.push(a4);
     }
     return out;
   };
   const all = () => liveTargets().flatMap(marksOn);
-  const matches = (a2, q) => {
-    if (q.target !== void 0 && a2.target !== q.target) return false;
-    if (q.kind !== void 0 && a2.kind !== q.kind) return false;
-    if (q.status !== void 0 && a2.status !== q.status) return false;
-    if (q.tags !== void 0) {
-      const have = a2.tags ?? [];
-      for (const t of q.tags) if (!have.includes(t)) return false;
+  const matches = (a4, q2) => {
+    if (q2.target !== void 0 && a4.target !== q2.target) return false;
+    if (q2.kind !== void 0 && a4.kind !== q2.kind) return false;
+    if (q2.status !== void 0 && a4.status !== q2.status) return false;
+    if (q2.tags !== void 0) {
+      const have = a4.tags ?? [];
+      for (const t of q2.tags) if (!have.includes(t)) return false;
     }
-    if (q.where && !q.where(a2)) return false;
+    if (q2.where && !q2.where(a4)) return false;
     return true;
   };
   const nodeOf = (id) => {
@@ -1148,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((a2) => matches(a2, q)) : all();
+    query(q2) {
+      return q2 ? all().filter((a4) => matches(a4, q2)) : all();
     },
     hitTest(target, pt, tol = 0) {
-      return marksOn(target).filter((a2) => fracContains(a2.frac, pt, tol)).reverse();
+      return marksOn(target).filter((a4) => fracContains(a4.frac, pt, tol)).reverse();
     },
     within(target, box) {
-      return marksOn(target).filter((a2) => fracEncloses(box, a2.frac));
+      return marksOn(target).filter((a4) => fracEncloses(box, a4.frac));
     },
-    isStale(a2, config) {
-      const keys = targetOf(a2.target)?.positionDependsOn ?? [];
-      return isStale(a2.seen, config, keys);
+    isStale(a4, config) {
+      const keys = targetOf(a4.target)?.positionDependsOn ?? [];
+      return isStale(a4.seen, config, keys);
     },
     canUndo() {
       return history.canUndo(historySceneAt);
@@ -1197,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((n2, i) => String(now[i]) === n2)) continue;
+        if (now.length === next.length && next.every((n6, i3) => String(now[i3]) === n6)) continue;
         scene.setSelection(next.map(asNodeId$1));
       }
     },
@@ -1293,12 +694,14 @@ var TOOLS = {
   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: r2, group: "annotate" },
+  { id: "ellipse", label: "Ellipse", icon: r, group: "annotate" },
   { id: "text", label: "Text", icon: h, group: "annotate" }
 ];
 function annotationToolInfo(id) {
@@ -1309,17 +712,17 @@ var ANNOTATION_WEASEL_TOOLS = [
 ];
 
 // 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 = (a2, b2) => a2 !== null && a2.x === b2.x && a2.y === b2.y && a2.w === b2.w && a2.h === b2.h;
+var sameRect = (a4, b3) => a4 !== null && a4.x === b3.x && a4.y === b3.y && a4.w === b3.w && a4.h === b3.h;
 function ToolBridge({ toolId }) {
   const tools = useActiveToolContext();
   const setActive = tools.setActive;
@@ -1450,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,
@@ -1561,823 +965,195 @@ function validateConfigSchema(fields) {
   }
   return { valid: errors.length === 0, errors };
 }
+var AnnotationPreloadContext = createContext(null);
 
-// ../theme/dist/chunk-VKZ4JIVX.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-fuchsia": {
-        "type": "color",
-        "value": "#f641f7",
-        "description": "First of ten categorical spot colors for plotting, status and data viz. Take them in sequence: the order is farthest-point over hue, so the first N are as separated as N colors can be (first three 87\xB0 apart, all ten 32\xB0). Mode-invariant on purpose \u2014 a series keeps its color when the mode flips, which is why they are tuned for a dark surface and clear only 1.5:1 on a light one."
-      },
-      "swatch-green": {
-        "type": "color",
-        "value": "#48e628"
-      },
-      "swatch-sky": {
-        "type": "color",
-        "value": "#36bff2"
-      },
-      "swatch-amber": {
-        "type": "color",
-        "value": "#e69628"
-      },
-      "swatch-teal": {
-        "type": "color",
-        "value": "#3ee1cb"
-      },
-      "swatch-red": {
-        "type": "color",
-        "value": "#f75034"
-      },
-      "swatch-blue": {
-        "type": "color",
-        "value": "#407ef7"
-      },
-      "swatch-citron": {
-        "type": "color",
-        "value": "#d5d23a"
-      },
-      "swatch-rose": {
-        "type": "color",
-        "value": "#fa4590"
-      },
-      "swatch-violet": {
-        "type": "color",
-        "value": "#955cf9"
-      },
-      "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-400}",
-          "description": "The line that has to be seen: a control's edge, a raised surface's outline. Clears WCAG 1.4.11's 3:1 against every surface in both modes."
-        },
-        "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."
-        }
-      },
-      "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-500}"
-        },
-        "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)"
-        }
+    "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, (c3) => c3 + c3) : body;
-  const r3 = Number.parseInt(full.slice(0, 2), 16);
-  const g = Number.parseInt(full.slice(2, 4), 16);
-  const b2 = Number.parseInt(full.slice(4, 6), 16);
-  return `rgba(${r3}, ${g}, ${b2}, ${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((f3) => typeof f3 === "string" && /\s/.test(f3) ? `'${f3}'` : String(f3)).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);
-}
-var AnnotationPreloadContext = createContext(null);
-
-// ../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 g = group;
-    const groupType = g.$type;
-    for (const [leaf, node] of Object.entries(g)) {
-      if (leaf.startsWith("$")) continue;
-      if (!isToken(node)) continue;
-      const type = node.$type ?? groupType;
-      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-strong": { $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"
       }
     },
-    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-strong": { $value: "#9e8b71" }
+    "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"
+      }
+    },
+    "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);
+var interstellarTheme = defineTheme({
+  ...interstellar_theme_default,
+  extends: weaselTheme
+});
 function TrialBody({ sidebar, children, contentClassName, ...rest }) {
   return /* @__PURE__ */ jsx(
     Split,
@@ -2474,7 +1250,7 @@ function Portalled({
 }
 function UndockedSections({ trialId, sections, onDock }) {
   if (sections.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c3) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c3, onDock }, c3.id)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c9) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c9, onDock }, c9.id)) });
 }
 var NO_OP = () => {
 };
@@ -2497,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((p2) => p2.trialId === trialId).map((p2) => p2.sectionId),
     [undockedPanels, trialId]
   );
   const view2d = as2DView(record.view);
   const configSchema = useConfigSchema(instrument);
+  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) => {
+    const setZoom = (z3) => {
       if (!view2d) return;
-      updateTrialView(trialId, withZoom(view2d, z2));
+      updateTrialView(trialId, withZoom(view2d, z3));
     };
     return {
       trialId,
@@ -2536,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) {
@@ -2545,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);
         }
       },
@@ -2555,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),
@@ -2580,6 +1363,8 @@ function TrialChrome({
     activeToolId,
     setActiveTool,
     configSchema,
+    resolvedConfig,
+    auto2,
     undockedIds,
     undockPanelAction,
     dockPanelAction,
@@ -2599,7 +1384,7 @@ function TrialChrome({
     ),
     [instrument, ctx, trialChrome, chrome, suppress, lab.controls]
   );
-  const inRegion = (region) => contributions.filter((c3) => c3.region === region);
+  const inRegion = (region) => contributions.filter((c9) => c9.region === region);
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
@@ -2617,6 +1402,7 @@ function TrialChrome({
     {
       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,
@@ -2636,7 +1422,7 @@ function TrialChrome({
             TrialBody,
             {
               width: record.sidebarWidth,
-              onWidthChange: (w2) => updateTrialSidebarWidth(trialId, w2),
+              onWidthChange: (w3) => updateTrialSidebarWidth(trialId, w3),
               contentClassName: instrument.canvas || instrument.stage ? "lk-trial__content--flush" : void 0,
               sidebar: /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }),
@@ -2644,7 +1430,7 @@ function TrialChrome({
                   UndockedSections,
                   {
                     trialId,
-                    sections: inRegion("sidebar").filter((c3) => undockedIds.includes(c3.id)),
+                    sections: inRegion("sidebar").filter((c9) => undockedIds.includes(c9.id)),
                     onDock: ctx.dockPanel
                   }
                 )
@@ -2668,9 +1454,9 @@ function Trial({ id, chrome, suppress }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] <Trial> requires <LabStoreProvider>");
-  const instruments = useStore(storeCtx.store, (s) => s.instruments) ?? lab.instruments;
-  const record = useStore(storeCtx.store, (s) => s.trials.find((w2) => w2.id === id));
-  const instrument = record ? instruments.find((i) => i.name === record.instrumentName) : void 0;
+  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: [
@@ -2736,14 +1522,16 @@ function TrialRuntime({
   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;
@@ -2751,7 +1539,7 @@ function TrialRuntime({
   const [layerOrder, setLayerOrder] = useState(null);
   const [loupeOn, setLoupeOn] = useState(false);
   const visibleLayers = useMemo(
-    () => (instrument.canvas?.layers ?? []).filter((l2) => layerVisibility[l2.id] !== false).map((l2) => l2.id),
+    () => (instrument.canvas?.layers ?? []).filter((l9) => layerVisibility[l9.id] !== false).map((l9) => l9.id),
     [instrument.canvas, layerVisibility]
   );
   const undoCap = instrument.undo;
@@ -2759,12 +1547,12 @@ function TrialRuntime({
   const maxDepth = undoCap?.maxDepth ?? 50;
   const snapshotIfNeeded = (event) => {
     if (!undoCap || !undoEvents.has(event)) return;
-    const current = store.getState().trials.find((w2) => w2.id === record.id);
+    const current = store.getState().trials.find((w3) => w3.id === record.id);
     if (!current) return;
     const snap = structuredClone(current.state);
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
-  const setView = (v) => updateTrialView(record.id, v);
+  const setView = (v2) => updateTrialView(record.id, v2);
   const stage = instrument.canvas ? void 0 : instrument.stage;
   const placeView = (size) => {
     const declared = instrument.canvas?.initialView ?? (stage ? stage.initialView ?? ((vp) => fitStage(stage.size, vp)) : void 0);
@@ -2774,10 +1562,10 @@ function TrialRuntime({
   };
   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) {
@@ -2841,13 +1629,13 @@ function TrialRuntime({
   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);
@@ -2866,9 +1654,9 @@ function TrialRuntime({
       view: record.view,
       setView,
       zoom: view2d?.zoom ?? 1,
-      setZoom: (z2) => {
+      setZoom: (z3) => {
         if (!view2d) return;
-        updateTrialView(record.id, withZoom(view2d, z2));
+        updateTrialView(record.id, withZoom(view2d, z3));
       },
       activeToolId: resolvedToolId,
       visibleLayers
@@ -2906,33 +1694,33 @@ function TrialRuntime({
   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((a2, b2) => layerOrder.indexOf(a2.id) - layerOrder.indexOf(b2.id)) : baseLayers;
+    const ordered = layerOrder ? [...baseLayers].sort((a4, b3) => layerOrder.indexOf(a4.id) - layerOrder.indexOf(b3.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((l2) => typeof l2 === "string" ? { id: l2, label: l2 } : l2);
+    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);
@@ -2945,8 +1733,8 @@ function TrialRuntime({
   const paletteItems = useMemo(() => {
     if (!instrument.dragDrop) return [];
     const p2 = instrument.dragDrop.palette;
-    return typeof p2 === "function" ? p2(record.state, record.config) : p2;
-  }, [instrument.dragDrop, record.state, record.config]);
+    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;
@@ -2959,12 +1747,12 @@ function TrialRuntime({
         render: (ctx) => {
           const el = canvasContainerRef.current;
           if (!el) return;
-          const r3 = el.getBoundingClientRect();
+          const r9 = el.getBoundingClientRect();
           ctx.save();
           ctx.strokeStyle = fb.ok ? "#3a7" : "#c44";
           ctx.lineWidth = 2;
           ctx.beginPath();
-          ctx.arc(screen.x - r3.left, screen.y - r3.top, 16, 0, Math.PI * 2);
+          ctx.arc(screen.x - r9.left, screen.y - r9.top, 16, 0, Math.PI * 2);
           ctx.stroke();
           ctx.restore();
         }
@@ -2977,7 +1765,7 @@ function TrialRuntime({
       capability: loupeCap,
       enabled: loupeOn,
       state: record.state,
-      config: record.config,
+      config,
       view: view2d ?? DEFAULT_VIEW,
       worldSpec: instrument.canvas?.worldSpec,
       hostRef: loupeHostRef
@@ -3039,7 +1827,7 @@ function TrialRuntime({
         layers: layerDescriptors,
         visibility: layerVisibility,
         onReorder: (next) => {
-          setLayerOrder(next.map((l2) => l2.id));
+          setLayerOrder(next.map((l9) => l9.id));
           bus.emit("layers.reorder");
         },
         onToggle: (lid, visible) => {
@@ -3073,7 +1861,7 @@ function TrialRuntime({
     {
       capability: annotationsCap,
       state: record.state,
-      config: record.config,
+      config,
       trial: { id: record.id, view: record.view },
       annotations,
       activeToolId: labTool
@@ -3105,7 +1893,7 @@ function TrialRuntime({
 // 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}"`);
   }
@@ -3120,9 +1908,32 @@ function initialView(instrument) {
 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(),
@@ -3132,11 +1943,13 @@ 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) {
-  const sourceIdx = trials.findIndex((w2) => w2.id === id);
+  const sourceIdx = trials.findIndex((w3) => w3.id === id);
   const source = trials[sourceIdx];
   if (!source) return trials;
   const clone = {
@@ -3151,44 +1964,55 @@ function cloneTrial(trials, id) {
 }
 function closeTrial(trials, id) {
   if (trials.length <= 1) return trials;
-  const next = trials.filter((w2) => w2.id !== id);
+  const next = trials.filter((w3) => w3.id !== id);
   return next.length === trials.length ? trials : next;
 }
 function resetTrial(trials, id, instruments) {
-  const idx = trials.findIndex((w2) => w2.id === id);
+  const idx = trials.findIndex((w3) => w3.id === id);
   const current = trials[idx];
   if (!current) return trials;
   const instrument = findInstrument(instruments, current.instrumentName);
   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((w2) => [w2.id, w2]));
-  const named = ids.map((id) => byId.get(id)).filter((w2) => w2 !== void 0);
-  const seen = new Set(named.map((w2) => w2.id));
-  const rest = trials.filter((w2) => !seen.has(w2.id));
+  const byId = new Map(trials.map((w3) => [w3.id, w3]));
+  const named = ids.map((id) => byId.get(id)).filter((w3) => w3 !== void 0);
+  const seen = new Set(named.map((w3) => w3.id));
+  const rest = trials.filter((w3) => !seen.has(w3.id));
   return [...named, ...rest];
 }
 function findOvershoot(bound, items, tolerance = 1) {
   let worst = null;
   for (const { item, edges } of items) {
-    const y = edges.bottom - bound.bottom;
+    const y3 = edges.bottom - bound.bottom;
     const x = edges.right - bound.right;
-    const by = Math.max(x, y);
+    const by = Math.max(x, y3);
     if (by <= tolerance) continue;
-    if (!worst || by > worst.by) worst = { item, by, axis: y >= x ? "y" : "x" };
+    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((c3) => `.${c3}`).join("");
+  return el.tagName.toLowerCase() + [...el.classList].map((c9) => `.${c9}`).join("");
 }
 function describeElement(el) {
   if (el.classList.length > 0) return tagAndClasses(el);
@@ -3197,8 +2021,8 @@ function describeElement(el) {
   return up ? `${tagAndClasses(el)} in ${tagAndClasses(up)}` : tagAndClasses(el);
 }
 function edgesOf(el) {
-  const r3 = el.getBoundingClientRect();
-  return { top: r3.top, left: r3.left, bottom: r3.bottom, right: r3.right };
+  const r9 = el.getBoundingClientRect();
+  return { top: r9.top, left: r9.left, bottom: r9.bottom, right: r9.right };
 }
 function* candidates(root) {
   yield { item: root, edges: edgesOf(root) };
@@ -3209,24 +2033,24 @@ function overflows(el) {
 }
 function explainLabScroll(lab, shellBody) {
   if (overflows(shellBody)) {
-    const r4 = shellBody.getBoundingClientRect();
+    const r10 = shellBody.getBoundingClientRect();
     const bound2 = {
-      top: r4.top,
-      left: r4.left,
-      bottom: r4.top + shellBody.clientHeight,
-      right: r4.left + shellBody.clientWidth
+      top: r10.top,
+      left: r10.left,
+      bottom: r10.top + shellBody.clientHeight,
+      right: r10.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 r3 = lab.getBoundingClientRect();
+  const r9 = lab.getBoundingClientRect();
   const bound = {
-    top: r3.top,
-    left: r3.left,
-    bottom: r3.top + Math.min(r3.height, doc.clientHeight),
-    right: r3.left + Math.min(r3.width, doc.clientWidth)
+    top: r9.top,
+    left: r9.left,
+    bottom: r9.top + Math.min(r9.height, doc.clientHeight),
+    right: r9.left + Math.min(r9.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;
@@ -3282,20 +2106,19 @@ function LabHeader({ addTrial: addTrial2 = true }) {
         ]
       }
     ) : /* @__PURE__ */ jsx(
-      l5,
+      l7,
       {
         "aria-label": "Add trial",
         label: "Add trial\u2026",
-        items: lab.instruments.map((i) => ({ value: i.name, label: i.title ?? i.name })),
+        items: lab.instruments.map((i3) => ({ value: i3.name, label: i3.title ?? i3.name })),
         onAction: (name) => lab.addTrial(name)
       }
     ),
     /* @__PURE__ */ jsx(
-      r6,
+      r5,
       {
         className: "lk-lab-header__mode",
         ariaLabel: "Color mode",
-        size: "sm",
         variant: "flat",
         items: MODE_ITEMS,
         value: lab.mode,
@@ -3309,17 +2132,44 @@ function LabHeader({ addTrial: addTrial2 = true }) {
 function LabPalette({ tools, contributions }) {
   const ctx = useLabChromeContext();
   const all = labContributions(tools, contributions);
-  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c3) => c3.region === "palette"), ctx });
+  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c9) => c9.region === "palette"), ctx });
+}
+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 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.split("?")[0].split("#")[0].replace(/\/$/, "").replace(/\.html$/, "");
+  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;
@@ -3358,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
       },
@@ -3372,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,
@@ -3399,29 +2231,14 @@ 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_ID = asNodeId("lk-workspace");
 var STRATEGIES = { grid: gridStrategy, floating: floatingStrategy };
@@ -3457,7 +2274,7 @@ function Workspace({
   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}`),
+    ...items.map((_, i3) => ids?.[i3] ?? `lk-ws-${i3}`),
     ...tilePanels.map((p2) => `lk-panel-${p2.key}`)
   ];
   const idKey = wantedIds.join(",");
@@ -3533,7 +2350,7 @@ 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((p2) => [`lk-panel-${p2.key}`, p2])
     );
@@ -3599,7 +2416,7 @@ async function openStoredLab({ instruments, defaultInstrument, mode }, storageKe
   const marks = /* @__PURE__ */ new Map();
   await Promise.all(
     opened.store.getState().trials.map(async (trial) => {
-      const kept = instruments.find((i) => i.name === trial.instrumentName)?.annotations?.storage;
+      const kept = instruments.find((i3) => i3.name === trial.instrumentName)?.annotations?.storage;
       if (!kept) return;
       try {
         marks.set(trial.id, await kept.load());
@@ -3614,20 +2431,29 @@ async function openStoredLab({ instruments, defaultInstrument, mode }, storageKe
 function LabFallback({
   title,
   mode,
+  density,
   pages,
   path
 }) {
   const resolvedMode = useResolvedMode(mode ?? "auto");
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, mode: resolvedMode, className: "lk-lab", children: /* @__PURE__ */ jsx(
-    LabShell,
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
     {
-      title: title ?? "Labkit",
-      mode,
-      ...pages ? { pages } : {},
-      ...path !== void 0 ? { path } : {},
-      children: null
+      theme: interstellarTheme,
+      selection: { mode: resolvedMode, density: density ?? "comfortable" },
+      className: "lk-lab",
+      children: /* @__PURE__ */ jsx(
+        LabShell,
+        {
+          title: title ?? "Labkit",
+          mode,
+          ...pages ? { pages } : {},
+          ...path !== void 0 ? { path } : {},
+          children: null
+        }
+      )
     }
-  ) });
+  );
 }
 var NEBULA_SLOTS = [
   { cx: "18%", cy: "30%", sx: "60%", sy: "80%", stop: "70%" },
@@ -3637,9 +2463,9 @@ var NEBULA_SLOTS = [
   { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
 ];
 function buildNebula(colors) {
-  const blobs = colors.map((c3, i) => {
-    const p2 = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c3} 22%, transparent), transparent ${p2.stop})`;
+  const blobs = colors.map((c9, 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, ${c9} 22%, transparent), transparent ${p2.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
@@ -3654,6 +2480,30 @@ function LabPanes({
     void 0,
     { scope: "lab" }
   );
+  const [asideWidth, setAsideWidth] = usePersistedState(
+    "lk-lab-aside-width",
+    void 0,
+    { scope: "lab" }
+  );
+  const main = contributions.some((c9) => c9.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((c9) => c9.region === "sidebar")) return main;
   return /* @__PURE__ */ jsx(
     Split,
     {
@@ -3663,12 +2513,12 @@ function LabPanes({
       label: "Lab sidebar",
       defaultWidth: 260,
       width: sidebarWidth,
-      onWidthChange: (w2) => {
-        setSidebarWidth(w2);
+      onWidthChange: (w3) => {
+        setSidebarWidth(w3);
         surface?.invalidateRects();
       },
       sidebar: /* @__PURE__ */ jsx(LabSidebarRegion, { contributions }),
-      children
+      children: main
     }
   );
 }
@@ -3682,13 +2532,24 @@ function Lab(props) {
     () => storageKey === void 0 ? openUnstoredLab(props) : openStoredLab(props, storageKey, storage)
   );
   if (!opened) {
-    return props.fallback !== void 0 ? /* @__PURE__ */ jsx(Fragment, { children: props.fallback }) : /* @__PURE__ */ jsx(LabFallback, { title: props.title, mode: props.mode, pages: props.pages, path: props.path });
+    if (props.fallback !== void 0) return props.fallback;
+    return /* @__PURE__ */ jsx(
+      LabFallback,
+      {
+        title: props.title,
+        mode: props.mode,
+        density: props.density,
+        pages: props.pages,
+        path: props.path
+      }
+    );
   }
   return /* @__PURE__ */ jsx(LabRuntime, { ...props, opened });
 }
 function LabRuntime({
   instruments,
   mode,
+  density,
   nebula,
   title,
   pages,
@@ -3708,11 +2569,13 @@ function LabRuntime({
   useLayoutEffect(() => {
     store.getState().setInstruments(instruments);
   }, [instruments, store]);
-  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 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();
@@ -3725,17 +2588,17 @@ function LabRuntime({
   const bufferRef = useRef({ w: 0, h: 0 });
   const surfaceRef = useRef(null);
   const onFrame = useCallback((frame) => {
-    const canvases = [ownUnderRef.current, ownOverRef.current].filter((c3) => c3 !== null);
+    const canvases = [ownUnderRef.current, ownOverRef.current].filter((c9) => c9 !== null);
     if (canvases.length === 0) return;
-    const w2 = Math.round(frame.size.width * frame.dpr);
+    const w3 = Math.round(frame.size.width * frame.dpr);
     const h2 = Math.round(frame.size.height * frame.dpr);
-    if (bufferRef.current.w !== w2 || bufferRef.current.h !== h2) {
-      bufferRef.current = { w: w2, h: h2 };
-      for (const c3 of canvases) {
-        c3.width = w2;
-        c3.height = h2;
-        c3.style.width = `${frame.size.width}px`;
-        c3.style.height = `${frame.size.height}px`;
+    if (bufferRef.current.w !== w3 || bufferRef.current.h !== h2) {
+      bufferRef.current = { w: w3, h: h2 };
+      for (const c9 of canvases) {
+        c9.width = w3;
+        c9.height = h2;
+        c9.style.width = `${frame.size.width}px`;
+        c9.style.height = `${frame.size.height}px`;
       }
       surfaceRef.current?.invalidateAll();
       return;
@@ -3753,6 +2616,33 @@ function LabRuntime({
     [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 surfaceCanvases = useMemo(
     () => outerSurface ? { over: outerOver, under: outerUnder } : { over: ownOver, under: ownUnder },
@@ -3767,13 +2657,13 @@ function LabRuntime({
     [undockedPanels]
   );
   const resolvedMode = useResolvedMode(modeValue);
-  const annotates = instruments.some((i) => i.annotations != null);
+  const annotates = instruments.some((i3) => i3.annotations != null);
   const labChromeAll = useMemo(
     () => labContributions([...annotates ? ANNOTATION_TOOLS : [], ...tools ?? []], labChrome),
     [annotates, tools, labChrome]
   );
-  const hasFooterChrome = labChromeAll.some((c3) => c3.region === "footer");
-  const hasSidebarChrome = labChromeAll.some((c3) => c3.region === "sidebar");
+  const hasFooterChrome = labChromeAll.some((c9) => c9.region === "footer");
+  const hasPaneChrome = labChromeAll.some((c9) => c9.region === "sidebar" || c9.region === "aside");
   useEffect(() => {
     if (mode && mode !== store.getState().mode) {
       store.getState().setMode(mode);
@@ -3781,20 +2671,26 @@ function LabRuntime({
   }, [mode, store]);
   const contextValue = useMemo(() => {
     const replaceTrials = (next) => {
-      const currentById = new Map(store.getState().trials.map((w2) => [w2.id, w2]));
-      const merged = next.map((w2) => currentById.get(w2.id) ?? w2);
+      const currentById = new Map(store.getState().trials.map((w3) => [w3.id, w3]));
+      const merged = next.map((w3) => currentById.get(w3.id) ?? w3);
       store.setState({ trials: merged });
     };
+    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);
@@ -3803,19 +2699,31 @@ function LabRuntime({
       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((w2) => w2.id === id);
+        const record = next.find((w3) => w3.id === id);
         if (!record) return;
-        store.setState((s) => ({
-          trials: s.trials.map(
-            (w2) => w2.id === id ? { ...w2, config: record.config, state: record.state, view: record.view } : w2
+        store.setState((s5) => ({
+          trials: s5.trials.map(
+            (w3) => w3.id === id ? { ...w3, config: record.config, state: record.state, view: record.view } : w3
           )
         }));
       },
       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) => {
@@ -3825,32 +2733,41 @@ function LabRuntime({
         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;
   const workspace = /* @__PURE__ */ jsx(
     Workspace,
     {
       panels: workspacePanels,
-      ids: trials.map((w2) => w2.id),
+      ids: trials.map((w3) => w3.id),
       resizable: true,
       reorderable: true,
       onReorder: (ids) => contextValue.reorderTrials(ids),
       layout,
       onLayoutChange: (next) => store.getState().setLayout(next),
-      children: trials.map((w2) => /* @__PURE__ */ jsx(Trial, { id: w2.id, chrome, suppress }, w2.id))
+      children: trials.map((w3) => /* @__PURE__ */ jsx(Trial, { id: w3.id, chrome, suppress }, w3.id))
     }
   );
   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, density: density ?? "comfortable" },
       className: "lk-lab",
       style: backdropStyle,
       children: /* @__PURE__ */ jsx(
@@ -3899,7 +2816,7 @@ function LabRuntime({
                 )
               ] })
             ),
-            hasSidebarChrome ? /* @__PURE__ */ jsxs(LabPanes, { contributions: labChromeAll, children: [
+            hasPaneChrome ? /* @__PURE__ */ jsxs(LabPanes, { contributions: labChromeAll, children: [
               /* @__PURE__ */ jsx(LabPalette, { contributions: labChromeAll }),
               workspace
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3912,7 +2829,759 @@ function LabRuntime({
     }
   ) }) }) }) });
 }
+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(a3, { 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(
+        r5,
+        {
+          ariaLabel: "Align",
+          value: align,
+          onChange: setAlign,
+          items: [
+            { value: "left", label: "Left" },
+            { value: "center", label: "Center" },
+            { value: "right", label: "Right" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        r5,
+        {
+          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(c7, { id: "props", children: "Props" }),
+        /* @__PURE__ */ jsx(c7, { id: "events", children: "Events" }),
+        /* @__PURE__ */ jsx(c7, { 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(g, { label: "Opacity", minValue: 0, maxValue: 100, step: 5, defaultValue: 80 }),
+      /* @__PURE__ */ jsx(
+        b2,
+        {
+          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(
+        b3,
+        {
+          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(
+        c8,
+        {
+          items: [0.25, 0.5, 1, 2, 4],
+          value: rate,
+          onChange: setRate,
+          formatLabel: (r9) => `${r9}\xD7`,
+          labels: "all",
+          ariaLabel: "Playback rate"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        r3,
+        {
+          "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(D, { title: "Shape", children: /* @__PURE__ */ jsxs(O, { children: [
+      /* @__PURE__ */ jsx(
+        I2,
+        {
+          label: "Opacity",
+          value: opacity,
+          min: 0,
+          max: 1,
+          step: 0.01,
+          onChange: setOpacity
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        I2,
+        {
+          label: "Radius",
+          value: radius,
+          min: 0,
+          max: 64,
+          unit: "px",
+          onChange: setRadius
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        z2,
+        {
+          label: "Fill",
+          value: fill,
+          onChange: setFill,
+          alpha,
+          onAlphaChange: setAlpha
+        }
+      ),
+      /* @__PURE__ */ jsx(z2, { label: "Stroke", value: stroke, onChange: setStroke }),
+      /* @__PURE__ */ jsx(U, { label: "Count", value: count, min: 0, max: 100, step: 1, onChange: setCount }),
+      /* @__PURE__ */ jsx(
+        W,
+        {
+          label: "Line cap",
+          value: cap,
+          onChange: setCap,
+          options: [
+            { value: "butt", label: "Butt" },
+            { value: "round", label: "Round" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        G2,
+        {
+          label: "Align",
+          value: side,
+          onChange: setSide,
+          options: [
+            { value: "left", label: "L" },
+            { value: "center", label: "C" },
+            { value: "right", label: "R" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(H, { label: "Label", value: label, onChange: setLabel }),
+      /* @__PURE__ */ jsx(B, { label: "Visible", value: visible, onChange: setVisible }),
+      /* @__PURE__ */ jsx(X, { title: "Bevel", defaultCollapsed: true, children: /* @__PURE__ */ jsx(I2, { 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(
+        g2,
+        {
+          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(
+      r9,
+      {
+        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(r10, { children: "tool: select" }),
+      /* @__PURE__ */ jsx(r10, { children: "sel: 3" }),
+      /* @__PURE__ */ jsx(i5, {}),
+      /* @__PURE__ */ jsx(r10, { 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: (r9) => r9.name, sortable: true },
+          { id: "count", header: "count", accessor: (r9) => r9.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(c5, { 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(
+        c6,
+        {
+          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(
+      k3,
+      {
+        min: 1 / 64,
+        max: 1 / 2,
+        scale: "log",
+        snap: true,
+        value: bands,
+        onChange: setBands,
+        selectedIndex: band,
+        onSelect: setBand,
+        renderBand: (b3) => b3.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 { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationOverlay, AnnotationTargets, Lab, LabPalette, LabShell, LabSwitcher, 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 };
+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