@weasel-js/labkit 1.5.1 → 1.6.0

package/dist/index.js

@@ -7,48 +7,48 @@ 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, LabAsideRegion, LabSidebarRegion } from './chunk-IHUVQ3TX.js';
-export { AnnotationsContext, ExportMenu, LabAsideRegion, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useAnnotations, useAnnotationsOptional, useLabChromeContext } from './chunk-IHUVQ3TX.js';
-import { Split, JobProgress, Sidebar, Legend, FloatingPanel } from './chunk-EHGVROVV.js';
-export { FloatingPanel, JobProgress, Legend, Sidebar, Split } from './chunk-EHGVROVV.js';
-import { Toolbar, StatusBar, ScaleIndicator, ZoomControl } from './chunk-UN4U4P63.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-UN4U4P63.js';
-import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-IXTQI7JX.js';
-export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-IXTQI7JX.js';
+import { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, AnnotationsContext, useLabChromeContext, labContributions, LabHeaderRegion, LabFooterRegion, LabAsideRegion, LabSidebarRegion } from './chunk-H5VIV7MQ.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-H5VIV7MQ.js';
+import { Split, JobProgress, Legend, FloatingPanel } from './chunk-ZORVNOKX.js';
+export { FloatingPanel, JobProgress, Legend, Split } from './chunk-ZORVNOKX.js';
+import { Toolbar, StatusBar, ScaleIndicator, ZoomControl } from './chunk-3FI7Y4R4.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-3FI7Y4R4.js';
+import './chunk-SBXNQW4G.js';
+import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-MOLIUNVH.js';
+export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-MOLIUNVH.js';
 import { newId, useWarnIgnoredChange, useOpenOnce, PersistenceContext, createRecordCache, noneAdapter, defaultStorage, usePersistedState } from './chunk-RWNDDKOH.js';
 export { Persistence, createIndexedDbAdapter, createMemoryAdapter, indexedDbAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, usePersistedState } from './chunk-RWNDDKOH.js';
-export { ControlPanel } from './chunk-EH7UEQV7.js';
-import { useConfigSchema } from './chunk-PJ7WEQBJ.js';
-export { useConfigSchema } from './chunk-PJ7WEQBJ.js';
+export { ControlPanel } from './chunk-HFRE4QQV.js';
+import { useConfigSchema } from './chunk-USO6TERP.js';
+export { sectionTree, useConfigSchema } from './chunk-USO6TERP.js';
 import { useLabContext, LabContext } from './chunk-Z76KEZAX.js';
 export { LabContext, useLabContext } from './chunk-Z76KEZAX.js';
-import { useResolvedConfig } from './chunk-ZDHY47EV.js';
-export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-ZDHY47EV.js';
-export { fromConfigFields, isLeafVisible } from './chunk-PHK4W562.js';
-import { hasConfigPath, schemaNodeAtPath, applyConfigWrite, resolveAutoConfig, isAuto, isRecord, autoPathsOf, fillConfigDefaults } from './chunk-7PFH3CNM.js';
-export { auto, autoPathsOf, fillConfigDefaults, hasConfigPath, isAuto, resolveAutoConfig, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-7PFH3CNM.js';
-import { CameraWheelContext, as2DView, DEFAULT_VIEW, CanvasStack, Stage, withZoom, fitStage } from './chunk-CEIUBPPW.js';
-export { CanvasStack, DEFAULT_VIEW, PITCH_LIMIT, Stage, as2DView, clampPitch, fitStage, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-CEIUBPPW.js';
+import { useResolvedConfig } from './chunk-BVL7Y574.js';
+export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, ListNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-BVL7Y574.js';
+export { fromConfigFields, isLeafVisible } from './chunk-VQ47KWD5.js';
+import { hasConfigPath, schemaNodeAtPath, applyConfigWrite, resolveAutoConfig, isAuto, isRecord, autoPathsOf, fillConfigDefaults } from './chunk-AWH3SRPW.js';
+export { auto, autoPathsOf, fillConfigDefaults, hasConfigPath, inDialog, isAuto, resolveAutoConfig, schemaNodeAtPath, summarizeValue, valueAtPath, withValueAtPath } from './chunk-AWH3SRPW.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';
 import { useSurfaceOptional, useSurfaceCanvas, useTileId, SurfaceContext, SurfaceCanvasContext } from './chunk-WIG6XHJ7.js';
 export { SurfaceCanvasContext, SurfaceContext, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId } from './chunk-WIG6XHJ7.js';
+import { CanvasStackContext } from './chunk-CQLQPQ4P.js';
 export { CanvasStackContext } from './chunk-CQLQPQ4P.js';
-import { LabStoreContext, TrialIdProvider } from './chunk-2YILQ7Y5.js';
+import { LabStoreContext, TrialIdProvider, TrialIdContext } from './chunk-2YILQ7Y5.js';
 export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
-import { LayerList } from './chunk-MDVTK5U3.js';
-export { LayerList } from './chunk-MDVTK5U3.js';
-import './chunk-SBXNQW4G.js';
-import { E, w, T, a2, p, u, c, n, f, r, h, serializeSvg, C, l7, r3, a5, Lt, o2, a4, l3, u3, r7, r8, r6, o5, s5, c6, l6, c3, s3, u2, g2, g, y2, l4, b2, c7, r2, l2, C2, S, O, k, F2, L3, V, H, U, B, R2, J, A2, c4, n5, s4, m2, c2, l, g3, l5, S4, r10, n6, r11, i5, i4, s2, n7, o4, r9, c5, w2, L2, n8, k2, $2 } from './chunk-T3EC2DXD.js';
-export { a5 as Button, R2 as CheckboxRow, y as CloseIcon, $ as CollapseIcon, L3 as ColorRow, S2 as CurveField, G2 as EffectCard, q as EffectCardList, te as ExpandIcon, o as Icon, u2 as Input, l9 as Jog, c4 as LayerStack, V as NumberRow, I as PauseIcon, F as PlayIcon, J as PropertyGroup, k as PropertyList, O as PropertyPanel, j2 as PropertyRow, A3 as PropertySpan, v as ResetIcon, g as Select, H as SelectRow, F2 as SliderRow, R as StepBackIcon, z as StepForwardIcon, L as StopIcon, W as Subpanel, B as TextRow, r3 as ToggleBar, U as ToggleRow, q2 as TokenPanel, I2 as inferTokenType } from './chunk-T3EC2DXD.js';
-import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext } from '@weasel-js/core';
+import './chunk-2RVCB2PT.js';
+import { y, I, A, T, i2, P, m, H, serializeSvg, D, S2, oe, d2, s3, c, Ht, o2, a6, l5, u5, a5, r3, a7, i3, o4, s6, c5, l7, p, f2, u4, g, T2, y2, l8, b, c6, i4, l4, C, S, ae, oe2, B, b2, A2, n6, s5, m4, l2, u, g2, u3, S4, r4, n7, r5, i5, p2, f, n8, o3, c3, c4, w, L, n9, k, $2 } from './chunk-WUJXJC5O.js';
+export { c as Button, re as CloseIcon, Pe as CollapseIcon, _ as CurveField, Fe as ExpandIcon, l as Icon, u4 as Input, l9 as Jog, D as LayerList, ge as PauseIcon, he as PlayIcon, V as PropertyControl, B as PropertyField, b2 as PropertyGroup, oe2 as PropertyList, ae as PropertyPanel, L3 as PropertyRow, se as PropertySpan, Z as ResetIcon, T2 as Select, ve as StepBackIcon, $ as StepForwardIcon, _e as StopIcon, x as Subpanel, a5 as ToggleBar, oe3 as TokenPanel, H2 as inferTokenType, S2 as moveLayers, O as refitScale } from './chunk-WUJXJC5O.js';
+import { textCommand, ellipsePath, linePath, markerDrawCommands, 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 { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { defineTheme, weaselTheme, colorCount, resolveTheme, colorAt } from '@weasel-js/theme';
+import { useResolvedColorMode, useThemeOptional, ThemeProvider, ThemeContext } 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';
@@ -56,28 +56,29 @@ import { Focusable } from 'react-aria-components';
 var MARK_COLOR = "#e5484d";
 var MARK_WIDTH = 2;
 var TEXT_SIZE = 14;
-var toWorld = (p2, content) => ({
-  x: p2.x * content.w,
-  y: p2.y * content.h
+var POINT_RADIUS = 4;
+var toWorld = (p3, content) => ({
+  x: p3.x * content.w,
+  y: p3.y * content.h
 });
-function vertices(m2, content) {
-  const stored = m2.data.points;
-  if (stored && stored.length >= 2) return stored.map((p2) => toWorld(p2, content));
-  const { x, y: y3, width, height } = m2.pose;
+function vertices(m3, content) {
+  const stored = m3.data.points;
+  if (stored && stored.length >= 2) return stored.map((p3) => toWorld(p3, content));
+  const { x: x2, y: y3, width, height } = m3.pose;
   return [
-    { x, y: y3 },
-    { x: x + width, y: y3 + height }
+    { x: x2, y: y3 },
+    { x: x2 + 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 p3 of points.slice(1)) b3.lineTo(p3.x, p3.y);
+  return b3.build();
 }
-function markCommands(m2, content, style = {}) {
+function markCommands(m3, content, style = {}) {
   const color = style.color ?? MARK_COLOR;
   const stroke = {
     paint: { color },
@@ -86,35 +87,46 @@ function markCommands(m2, content, style = {}) {
     join: "round",
     ...style.stale ? { dash: [6, 4] } : {}
   };
-  switch (m2.data.kind) {
+  switch (m3.data.kind) {
     case "rect":
       return [
-        { kind: "path", path: rectPath(m2.pose.x, m2.pose.y, m2.pose.width, m2.pose.height), stroke }
+        { kind: "path", path: rectPath(m3.pose.x, m3.pose.y, m3.pose.width, m3.pose.height), stroke }
       ];
     case "ellipse":
-      return [{ kind: "path", path: ellipsePath(m2.pose), stroke }];
+      return [{ kind: "path", path: ellipsePath(m3.pose), stroke }];
     case "line": {
-      const [a4, b2] = vertices(m2, content);
-      return [{ kind: "path", path: linePath(a4, b2), stroke }];
+      const [a4, b3] = vertices(m3, content);
+      return [{ kind: "path", path: linePath(a4, b3), stroke }];
     }
     case "arrow": {
-      const [a4, b2] = vertices(m2, content);
+      const [a4, b3] = vertices(m3, content);
       const marked = { ...stroke, markerEnd: "arrow" };
-      const path = linePath(a4, 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(m2, content)), stroke }];
+      return [{ kind: "path", path: polyline(vertices(m3, content)), stroke }];
+    case "point": {
+      const stored = m3.data.points?.[0];
+      const c6 = stored ? toWorld(stored, content) : { x: m3.pose.x, y: m3.pose.y };
+      const ring = {
+        x: c6.x - POINT_RADIUS,
+        y: c6.y - POINT_RADIUS,
+        width: 2 * POINT_RADIUS,
+        height: 2 * POINT_RADIUS
+      };
+      return [{ kind: "path", path: ellipsePath(ring), stroke }];
+    }
     case "text": {
-      const text = m2.data.title;
+      const text = m3.data.title;
       if (!text) return [];
       return [
         textCommand(
-          m2.pose.x,
-          m2.pose.y,
+          m3.pose.x,
+          m3.pose.y,
           text,
           { fontSize: TEXT_SIZE },
           void 0,
@@ -134,8 +146,8 @@ function seenFrom(config, keys) {
   const out = {};
   if (config === null || typeof config !== "object") return out;
   const src = config;
-  for (const k3 of keys) {
-    if (k3 in src) out[k3] = src[k3];
+  for (const k2 of keys) {
+    if (k2 in src) out[k2] = src[k2];
   }
   return out;
 }
@@ -143,9 +155,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 k3 of keys) {
-    if (!(k3 in seen)) continue;
-    if (!Object.is(seen[k3], src[k3])) return true;
+  for (const k2 of keys) {
+    if (!(k2 in seen)) continue;
+    if (!Object.is(seen[k2], src[k2])) return true;
   }
   return false;
 }
@@ -156,7 +168,7 @@ function createMarkDrawOne(opts) {
 }
 function resolveMarkStyle(data, opts) {
   return {
-    color: opts.meaning?.statuses?.find((s5) => s5.id === data.status)?.color,
+    color: opts.meaning?.statuses?.find((s4) => s4.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 ?? [])
@@ -187,7 +199,7 @@ function toSvgStroke(stroke) {
     ...stroke.align ? { align: stroke.align } : {}
   };
 }
-function toSvgNode(cmd, m2) {
+function toSvgNode(cmd, m3) {
   if (cmd.kind === "path") {
     return {
       kind: "path",
@@ -201,8 +213,8 @@ function toSvgNode(cmd, m2) {
       kind: "text",
       x: cmd.x,
       y: cmd.y,
-      width: m2.pose.width,
-      height: m2.pose.height,
+      width: m3.pose.width,
+      height: m3.pose.height,
       text: cmd.runs.map((run) => run.text).join(""),
       style: cmd.style,
       ...cmd.runs[0]?.fill ? { fill: cmd.runs[0].fill } : {}
@@ -210,8 +222,8 @@ function toSvgNode(cmd, m2) {
   }
   throw new Error(`[labkit] a mark drew a '${cmd.kind}' command, which has no vector form`);
 }
-function markSvgNodes(m2, content, style = {}) {
-  return markCommands(m2, content, style).map((cmd) => toSvgNode(cmd, m2));
+function markSvgNodes(m3, content, style = {}) {
+  return markCommands(m3, content, style).map((cmd) => toSvgNode(cmd, m3));
 }
 
 // src/annotations/capture.ts
@@ -220,7 +232,7 @@ function capturePlan(base, format) {
   if (format === "svg") return "svg-document";
   return base?.kind === "svg" ? "svg-document" : "raster-stack";
 }
-function nestBaseSvg(markup, w3, h2) {
+function nestBaseSvg(markup, w2, h) {
   const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
   const root = doc.documentElement;
   if (doc.getElementsByTagName("parsererror").length > 0 || root.localName !== "svg") {
@@ -228,17 +240,17 @@ function nestBaseSvg(markup, w3, h2) {
   }
   root.setAttribute("x", "0");
   root.setAttribute("y", "0");
-  root.setAttribute("width", String(w3));
-  root.setAttribute("height", String(h2));
+  root.setAttribute("width", String(w2));
+  root.setAttribute("height", String(h));
   return new XMLSerializer().serializeToString(root);
 }
-function embedRasterBase(base, w3, h2, onWarn) {
+function embedRasterBase(base, w2, h, onWarn) {
   const href = base.kind === "canvas" ? base.canvas.toDataURL() : base.kind === "image" ? base.src : "";
   if (base.kind === "image" && !href.startsWith("data:")) {
     onWarn?.(`base image '${href}' is a reference, so this SVG is not self-contained`);
   }
-  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w3, height: h2 }], {
-    viewBox: { x: 0, y: 0, width: w3, height: h2 }
+  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w2, height: h }], {
+    viewBox: { x: 0, y: 0, width: w2, height: h }
   });
 }
 function markNodesOf(scene, draw) {
@@ -254,15 +266,15 @@ function markNodesOf(scene, draw) {
 }
 function composeCaptureSvg(args) {
   const { base, scene, draw, scale, onWarn } = args;
-  const { w: w3, h: h2 } = draw.content;
-  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w3, h2) : embedRasterBase(base, w3, h2, onWarn);
+  const { w: w2, h } = draw.content;
+  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w2, h) : embedRasterBase(base, w2, h, onWarn);
   const marksXml = serializeSvg(markNodesOf(scene, draw), {
-    viewBox: { x: 0, y: 0, width: w3, height: h2 },
+    viewBox: { x: 0, y: 0, width: w2, height: h },
     onWarn
   });
-  const outW = Math.max(1, Math.round(w3 * scale));
-  const outH = Math.max(1, Math.round(h2 * scale));
-  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w3} ${h2}">${baseXml}${marksXml}</svg>`;
+  const outW = Math.max(1, Math.round(w2 * scale));
+  const outH = Math.max(1, Math.round(h * scale));
+  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w2} ${h}">${baseXml}${marksXml}</svg>`;
 }
 function context2d(width, height) {
   const canvas = document.createElement("canvas");
@@ -356,26 +368,26 @@ async function captureTarget(args, opts = {}) {
 }
 
 // src/annotations/frac.ts
-function fracToWorld(f3, content) {
+function fracToWorld(f4, content) {
   return {
-    x: f3.x * content.w,
-    y: f3.y * content.h,
-    width: f3.w * content.w,
-    height: f3.h * content.h
+    x: f4.x * content.w,
+    y: f4.y * content.h,
+    width: f4.w * content.w,
+    height: f4.h * content.h
   };
 }
-function worldToFrac(r10, content) {
+function worldToFrac(r4, content) {
   const sx = content.w === 0 ? 0 : 1 / content.w;
   const sy = content.h === 0 ? 0 : 1 / content.h;
-  return { x: r10.x * sx, y: r10.y * sy, w: r10.width * sx, h: r10.height * sy };
+  return { x: r4.x * sx, y: r4.y * sy, w: r4.width * sx, h: r4.height * sy };
 }
 var DP = 1e4;
-function roundFrac(f3) {
+function roundFrac(f4) {
   return {
-    x: Math.round(f3.x * DP) / DP,
-    y: Math.round(f3.y * DP) / DP,
-    w: Math.round(f3.w * DP) / DP,
-    h: Math.round(f3.h * DP) / DP
+    x: Math.round(f4.x * DP) / DP,
+    y: Math.round(f4.y * DP) / DP,
+    w: Math.round(f4.w * DP) / DP,
+    h: Math.round(f4.h * DP) / DP
   };
 }
 function fracContains(box, pt, tol = 0) {
@@ -417,8 +429,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 i3 = stack.length - 1; i3 >= 0; i3--) {
-      const target = stack[i3];
+    for (let i5 = stack.length - 1; i5 >= 0; i5--) {
+      const target = stack[i5];
       if (target === void 0) continue;
       const scene = at(target);
       if (scene && can(scene)) return target;
@@ -426,13 +438,13 @@ var MarkHistory = class {
     return null;
   }
   canUndo(at) {
-    return this.next(this.undoable, (s5) => s5.canUndo(), at) !== null;
+    return this.next(this.undoable, (s4) => s4.canUndo(), at) !== null;
   }
   canRedo(at) {
-    return this.next(this.redoable, (s5) => s5.canRedo(), at) !== null;
+    return this.next(this.redoable, (s4) => s4.canRedo(), at) !== null;
   }
   undo(at) {
-    const target = this.next(this.undoable, (s5) => s5.canUndo(), at);
+    const target = this.next(this.undoable, (s4) => s4.canUndo(), at);
     const scene = target === null ? void 0 : at(target);
     if (!scene) return false;
     this.replaying = "undo";
@@ -443,7 +455,7 @@ var MarkHistory = class {
     }
   }
   redo(at) {
-    const target = this.next(this.redoable, (s5) => s5.canRedo(), at);
+    const target = this.next(this.redoable, (s4) => s4.canRedo(), at);
     const scene = target === null ? void 0 : at(target);
     if (!scene) return false;
     this.replaying = "redo";
@@ -455,9 +467,9 @@ var MarkHistory = class {
   }
 };
 function drop(stack, value) {
-  for (let i3 = stack.length - 1; i3 >= 0; i3--) {
-    if (stack[i3] === value) {
-      stack.splice(i3, 1);
+  for (let i5 = stack.length - 1; i5 >= 0; i5--) {
+    if (stack[i5] === value) {
+      stack.splice(i5, 1);
       return;
     }
   }
@@ -524,15 +536,15 @@ function createAnnotationStore(opts) {
     return out;
   };
   const all = () => liveTargets().flatMap(marksOn);
-  const matches = (a4, q3) => {
-    if (q3.target !== void 0 && a4.target !== q3.target) return false;
-    if (q3.kind !== void 0 && a4.kind !== q3.kind) return false;
-    if (q3.status !== void 0 && a4.status !== q3.status) return false;
-    if (q3.tags !== void 0) {
+  const matches = (a4, q) => {
+    if (q.target !== void 0 && a4.target !== q.target) return false;
+    if (q.kind !== void 0 && a4.kind !== q.kind) return false;
+    if (q.status !== void 0 && a4.status !== q.status) return false;
+    if (q.tags !== void 0) {
       const have = a4.tags ?? [];
-      for (const t of q3.tags) if (!have.includes(t)) return false;
+      for (const t of q.tags) if (!have.includes(t)) return false;
     }
-    if (q3.where && !q3.where(a4)) return false;
+    if (q.where && !q.where(a4)) return false;
     return true;
   };
   const nodeOf = (id) => {
@@ -549,8 +561,8 @@ function createAnnotationStore(opts) {
       const parts = splitId(id);
       return parts ? project(parts.target, parts.node) : void 0;
     },
-    query(q3) {
-      return q3 ? all().filter((a4) => matches(a4, q3)) : all();
+    query(q) {
+      return q ? all().filter((a4) => matches(a4, q)) : all();
     },
     hitTest(target, pt, tol = 0) {
       return marksOn(target).filter((a4) => fracContains(a4.frac, pt, tol)).reverse();
@@ -598,7 +610,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((n6, i3) => String(now[i3]) === n6)) continue;
+        if (now.length === next.length && next.every((n5, i5) => String(now[i5]) === n5)) continue;
         scene.setSelection(next.map(asNodeId$1));
       }
     },
@@ -695,14 +707,14 @@ var TOOLS = {
 };
 var ANNOTATION_TOOLS = [
   // Not in `TOOLS`: an id the map does not carry is what leaves the overlay idle.
-  { id: "pointer", label: "Interact", icon: a2, group: "annotate" },
-  { id: "select", label: "Select", icon: p, group: "annotate" },
-  { id: "stroke", label: "Freehand", icon: u, group: "annotate" },
-  { id: "line", label: "Line", icon: c, group: "annotate" },
-  { id: "arrow", label: "Arrow", icon: n, group: "annotate" },
-  { id: "rect", label: "Rectangle", icon: f, group: "annotate" },
-  { id: "ellipse", label: "Ellipse", icon: r, group: "annotate" },
-  { id: "text", label: "Text", icon: h, group: "annotate" }
+  { id: "pointer", label: "Interact", icon: y, group: "annotate" },
+  { id: "select", label: "Select", icon: I, group: "annotate" },
+  { id: "stroke", label: "Freehand", icon: A, group: "annotate" },
+  { id: "line", label: "Line", icon: T, group: "annotate" },
+  { id: "arrow", label: "Arrow", icon: i2, group: "annotate" },
+  { id: "rect", label: "Rectangle", icon: P, group: "annotate" },
+  { id: "ellipse", label: "Ellipse", icon: m, group: "annotate" },
+  { id: "text", label: "Text", icon: H, group: "annotate" }
 ];
 function annotationToolInfo(id) {
   return id === null ? void 0 : TOOLS[id];
@@ -712,17 +724,17 @@ var ANNOTATION_WEASEL_TOOLS = [
 ];
 
 // src/annotations/view.ts
-function toWeaselView(v2) {
-  return { x: v2.pan.x, y: v2.pan.y, scale: { x: v2.zoom, y: v2.zoom } };
+function toWeaselView(v) {
+  return { x: v.pan.x, y: v.pan.y, scale: { x: v.zoom, y: v.zoom } };
 }
-function fromWeaselView(v2) {
-  return { zoom: v2.scale.x, pan: { x: v2.x, y: v2.y } };
+function fromWeaselView(v) {
+  return { zoom: v.scale.x, pan: { x: v.x, y: v.y } };
 }
 function fitView(content, pane) {
   const zoom = content.w > 0 && content.h > 0 ? Math.min(pane.w / content.w, pane.h / content.h) : 1;
   return { zoom: Number.isFinite(zoom) && zoom > 0 ? zoom : 1, pan: { x: 0, y: 0 } };
 }
-var sameRect = (a4, b2) => a4 !== null && a4.x === b2.x && a4.y === b2.y && a4.w === b2.w && a4.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;
@@ -732,9 +744,9 @@ function ToolBridge({ toolId }) {
   return null;
 }
 function pointsOf(extras, content) {
-  const toFrac = (p2) => ({
-    x: content.w === 0 ? 0 : p2.x / content.w,
-    y: content.h === 0 ? 0 : p2.y / content.h
+  const toFrac = (p3) => ({
+    x: content.w === 0 ? 0 : p3.x / content.w,
+    y: content.h === 0 ? 0 : p3.y / content.h
   });
   if (extras.kind === "line") {
     return [toFrac(extras.a), toFrac(extras.b)];
@@ -997,10 +1009,6 @@ var interstellar_theme_default = {
       dark: {
         value: "#0a0a14",
         type: "color"
-      },
-      light: {
-        value: "#fafaf7",
-        type: "color"
       }
     },
     "surface-raised": {
@@ -1008,10 +1016,6 @@ var interstellar_theme_default = {
       dark: {
         value: "rgba(20, 20, 36, 0.55)",
         type: "color"
-      },
-      light: {
-        value: "#ffffff",
-        type: "color"
       }
     },
     "surface-sunken": {
@@ -1019,10 +1023,6 @@ var interstellar_theme_default = {
       dark: {
         value: "#02020a",
         type: "color"
-      },
-      light: {
-        value: "#f0ebe2",
-        type: "color"
       }
     },
     border: {
@@ -1030,10 +1030,6 @@ var interstellar_theme_default = {
       dark: {
         value: "rgba(255, 255, 255, 0.14)",
         type: "color"
-      },
-      light: {
-        value: "#c9bba5",
-        type: "color"
       }
     },
     "line-subtle": {
@@ -1041,10 +1037,6 @@ var interstellar_theme_default = {
       dark: {
         value: "rgba(255, 255, 255, 0.08)",
         type: "color"
-      },
-      light: {
-        value: "rgba(0, 0, 0, 0.08)",
-        type: "color"
       }
     },
     fg: {
@@ -1052,10 +1044,6 @@ var interstellar_theme_default = {
       dark: {
         value: "#e8e8f0",
         type: "color"
-      },
-      light: {
-        value: "#2a2018",
-        type: "color"
       }
     },
     "fg-muted": {
@@ -1063,10 +1051,6 @@ var interstellar_theme_default = {
       dark: {
         value: "#a8a8c0",
         type: "color"
-      },
-      light: {
-        value: "#6b5c4a",
-        type: "color"
       }
     },
     "fg-subtle": {
@@ -1074,10 +1058,6 @@ var interstellar_theme_default = {
       dark: {
         value: "#5a5a78",
         type: "color"
-      },
-      light: {
-        value: "#a89b85",
-        type: "color"
       }
     },
     accent: {
@@ -1085,10 +1065,6 @@ var interstellar_theme_default = {
       dark: {
         value: "#b08adb",
         type: "color"
-      },
-      light: {
-        value: "#a86f3c",
-        type: "color"
       }
     },
     "accent-hover": {
@@ -1096,10 +1072,6 @@ var interstellar_theme_default = {
       dark: {
         value: "#c6a3ee",
         type: "color"
-      },
-      light: {
-        value: "#c2854f",
-        type: "color"
       }
     },
     "focus-ring": {
@@ -1107,10 +1079,6 @@ var interstellar_theme_default = {
       dark: {
         value: "rgba(176, 138, 219, 0.45)",
         type: "color"
-      },
-      light: {
-        value: "rgba(168, 111, 60, 0.35)",
-        type: "color"
       }
     },
     shadow: {
@@ -1118,10 +1086,6 @@ var interstellar_theme_default = {
       dark: {
         value: "rgba(0, 0, 0, 0.7)",
         type: "color"
-      },
-      light: {
-        value: "rgba(80, 60, 40, 0.18)",
-        type: "color"
       }
     },
     "border-strong": {
@@ -1129,10 +1093,6 @@ var interstellar_theme_default = {
       dark: {
         value: "rgba(255, 255, 255, 0.36)",
         type: "color"
-      },
-      light: {
-        value: "#9e8b71",
-        type: "color"
       }
     },
     backdrop: {
@@ -1140,10 +1100,6 @@ var interstellar_theme_default = {
       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"
       }
     }
   }
@@ -1250,7 +1206,7 @@ function Portalled({
 }
 function UndockedSections({ trialId, sections, onDock }) {
   if (sections.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c8) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c8, onDock }, c8.id)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c6) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c6, onDock }, c6.id)) });
 }
 var NO_OP = () => {
 };
@@ -1273,17 +1229,17 @@ function TrialChrome({
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] TrialChrome requires <LabStoreProvider>");
-  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 updateTrialView = useStore(storeCtx.store, (s4) => s4.updateTrialView);
+  const updateTrialSidebarWidth = useStore(storeCtx.store, (s4) => s4.updateTrialSidebarWidth);
+  const setTrialTitle = useStore(storeCtx.store, (s4) => s4.setTrialTitle);
+  const setTrialSectionCollapsed = useStore(storeCtx.store, (s4) => s4.setTrialSectionCollapsed);
+  const updateTrialConfig = useStore(storeCtx.store, (s4) => s4.updateTrialConfig);
+  const updateTrialState = useStore(storeCtx.store, (s4) => s4.updateTrialState);
+  const undockPanelAction = useStore(storeCtx.store, (s4) => s4.undockPanel);
+  const dockPanelAction = useStore(storeCtx.store, (s4) => s4.dockPanel);
+  const undockedPanels = useStore(storeCtx.store, (s4) => s4.undockedPanels);
   const undockedIds = useMemo(
-    () => Object.values(undockedPanels).filter((p2) => p2.trialId === trialId).map((p2) => p2.sectionId),
+    () => Object.values(undockedPanels).filter((p3) => p3.trialId === trialId).map((p3) => p3.sectionId),
     [undockedPanels, trialId]
   );
   const view2d = as2DView(record.view);
@@ -1296,9 +1252,9 @@ function TrialChrome({
   const title = record.title ?? instrument.title ?? instrument.name;
   const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
   const ctx = useMemo(() => {
-    const setZoom = (z2) => {
+    const setZoom = (z) => {
       if (!view2d) return;
-      updateTrialView(trialId, withZoom(view2d, z2));
+      updateTrialView(trialId, withZoom(view2d, z));
     };
     return {
       trialId,
@@ -1338,7 +1294,7 @@ function TrialChrome({
       undockedPanels: undockedIds,
       undockPanel: (sectionId, as) => undockPanelAction(trialId, sectionId, as),
       dockPanel: (sectionId) => dockPanelAction(trialId, sectionId),
-      savedSnapshots: lab.savedSnapshots.filter((s5) => s5.trialId === trialId),
+      savedSnapshots: lab.savedSnapshots.filter((s4) => s4.trialId === trialId),
       saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
       loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
       clone: () => lab.cloneTrial(trialId),
@@ -1384,7 +1340,7 @@ function TrialChrome({
     ),
     [instrument, ctx, trialChrome, chrome, suppress, lab.controls]
   );
-  const inRegion = (region) => contributions.filter((c8) => c8.region === region);
+  const inRegion = (region) => contributions.filter((c6) => c6.region === region);
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
@@ -1422,7 +1378,7 @@ function TrialChrome({
             TrialBody,
             {
               width: record.sidebarWidth,
-              onWidthChange: (w3) => updateTrialSidebarWidth(trialId, w3),
+              onWidthChange: (w2) => updateTrialSidebarWidth(trialId, w2),
               contentClassName: instrument.canvas || instrument.stage ? "lk-trial__content--flush" : void 0,
               sidebar: /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }),
@@ -1430,7 +1386,7 @@ function TrialChrome({
                   UndockedSections,
                   {
                     trialId,
-                    sections: inRegion("sidebar").filter((c8) => undockedIds.includes(c8.id)),
+                    sections: inRegion("sidebar").filter((c6) => undockedIds.includes(c6.id)),
                     onDock: ctx.dockPanel
                   }
                 )
@@ -1454,9 +1410,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, (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 instruments = useStore(storeCtx.store, (s4) => s4.instruments) ?? lab.instruments;
+  const record = useStore(storeCtx.store, (s4) => s4.trials.find((w2) => w2.id === id));
+  const instrument = record ? instruments.find((i5) => i5.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: [
@@ -1522,14 +1478,14 @@ function TrialRuntime({
   const wheelSlot = useRef(null);
   const canvasContainerRef = useRef(null);
   const loupeHostRef = useRef(null);
-  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 updateTrialState = useStore(store, (s4) => s4.updateTrialState);
+  const updateTrialConfig = useStore(store, (s4) => s4.updateTrialConfig);
+  const updateTrialView = useStore(store, (s4) => s4.updateTrialView);
+  const updateTrialUndoStack = useStore(store, (s4) => s4.updateTrialUndoStack);
+  const updateTrialAnnotations = useStore(store, (s4) => s4.updateTrialAnnotations);
+  const labToolId = useStore(store, (s4) => s4.activeToolId);
+  const setLabTool = useStore(store, (s4) => s4.setLabTool);
+  const setTrialTool = useStore(store, (s4) => s4.setTrialTool);
   const schema = useConfigSchema(instrument);
   const { config } = useResolvedConfig(schema, record.config, record.auto);
   const busRef = useRef(null);
@@ -1539,7 +1495,7 @@ function TrialRuntime({
   const [layerOrder, setLayerOrder] = useState(null);
   const [loupeOn, setLoupeOn] = useState(false);
   const visibleLayers = useMemo(
-    () => (instrument.canvas?.layers ?? []).filter((l9) => layerVisibility[l9.id] !== false).map((l9) => l9.id),
+    () => (instrument.canvas?.layers ?? []).filter((l8) => layerVisibility[l8.id] !== false).map((l8) => l8.id),
     [instrument.canvas, layerVisibility]
   );
   const undoCap = instrument.undo;
@@ -1547,12 +1503,12 @@ function TrialRuntime({
   const maxDepth = undoCap?.maxDepth ?? 50;
   const snapshotIfNeeded = (event) => {
     if (!undoCap || !undoEvents.has(event)) return;
-    const current = store.getState().trials.find((w3) => w3.id === record.id);
+    const current = store.getState().trials.find((w2) => w2.id === record.id);
     if (!current) return;
     const snap = structuredClone(current.state);
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
-  const setView = (v2) => updateTrialView(record.id, v2);
+  const setView = (v) => updateTrialView(record.id, v);
   const 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);
@@ -1654,9 +1610,9 @@ function TrialRuntime({
       view: record.view,
       setView,
       zoom: view2d?.zoom ?? 1,
-      setZoom: (z2) => {
+      setZoom: (z) => {
         if (!view2d) return;
-        updateTrialView(record.id, withZoom(view2d, z2));
+        updateTrialView(record.id, withZoom(view2d, z));
       },
       activeToolId: resolvedToolId,
       visibleLayers
@@ -1696,11 +1652,11 @@ function TrialRuntime({
     if (declared == null) return null;
     return resolveLoupe(typeof declared === "function" ? declared(config) : declared);
   }, [instrument.loupe, config]);
-  const loupeBindings = loupeCap ? { on: loupeOn, toggle: () => setLoupeOn((v2) => !v2) } : void 0;
+  const loupeBindings = loupeCap ? { on: loupeOn, toggle: () => setLoupeOn((v) => !v) } : void 0;
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
-    const ordered = layerOrder ? [...baseLayers].sort((a4, b2) => layerOrder.indexOf(a4.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,
@@ -1712,10 +1668,23 @@ function TrialRuntime({
   }, [instrument.canvas, record.state, config, layerVisibility, layerOrder]);
   const layerDescriptors = useMemo(() => {
     if (!instrument.layers) return [];
-    return instrument.layers.ids.map((l9) => typeof l9 === "string" ? { id: l9, label: l9 } : l9);
+    return instrument.layers.ids.map((l8) => typeof l8 === "string" ? { id: l8, label: l8 } : l8);
   }, [instrument.layers]);
+  const layerItems = useMemo(() => {
+    const ordered = layerOrder ? [...layerDescriptors].sort((a4, b3) => layerOrder.indexOf(a4.id) - layerOrder.indexOf(b3.id)) : layerDescriptors;
+    const pinnedLast = [
+      ...ordered.filter((l8) => !l8.alwaysOn),
+      ...ordered.filter((l8) => l8.alwaysOn)
+    ];
+    return pinnedLast.map((l8) => ({
+      id: l8.id,
+      label: l8.label,
+      locked: l8.alwaysOn === true,
+      visible: l8.alwaysOn === true || layerVisibility[l8.id] !== false
+    }));
+  }, [layerDescriptors, layerOrder, layerVisibility]);
   const dragDropResult = useDragDrop({
-    capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s5) => s5 },
+    capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s4) => s4 },
     canvasContainerRef,
     view: view2d ?? DEFAULT_VIEW,
     worldSpec: instrument.canvas?.worldSpec,
@@ -1732,8 +1701,8 @@ function TrialRuntime({
   });
   const paletteItems = useMemo(() => {
     if (!instrument.dragDrop) return [];
-    const p2 = instrument.dragDrop.palette;
-    return typeof p2 === "function" ? p2(record.state, config) : p2;
+    const p3 = instrument.dragDrop.palette;
+    return typeof p3 === "function" ? p3(record.state, config) : p3;
   }, [instrument.dragDrop, record.state, config]);
   const layersWithFeedback = useMemo(() => {
     if (!dragDropResult.drag?.feedback) return canvasLayers;
@@ -1747,12 +1716,12 @@ function TrialRuntime({
         render: (ctx) => {
           const el = canvasContainerRef.current;
           if (!el) return;
-          const r10 = el.getBoundingClientRect();
+          const r4 = el.getBoundingClientRect();
           ctx.save();
           ctx.strokeStyle = fb.ok ? "#3a7" : "#c44";
           ctx.lineWidth = 2;
           ctx.beginPath();
-          ctx.arc(screen.x - r10.left, screen.y - r10.top, 16, 0, Math.PI * 2);
+          ctx.arc(screen.x - r4.left, screen.y - r4.top, 16, 0, Math.PI * 2);
           ctx.stroke();
           ctx.restore();
         }
@@ -1803,7 +1772,10 @@ function TrialRuntime({
         minZoom: stage.minZoom,
         maxZoom: stage.maxZoom,
         hostRef: loupeHostRef,
-        overlay: lens,
+        overlay: /* @__PURE__ */ jsxs(Fragment, { children: [
+          stage.overlay?.(renderCtx),
+          lens
+        ] }),
         children: instrument.render(renderCtx)
       }
     );
@@ -1822,21 +1794,20 @@ function TrialRuntime({
   );
   const layerListNode = useMemo(
     () => instrument.layers && layerDescriptors.length > 0 ? /* @__PURE__ */ jsx(
-      LayerList,
+      D,
       {
-        layers: layerDescriptors,
-        visibility: layerVisibility,
-        onReorder: (next) => {
-          setLayerOrder(next.map((l9) => l9.id));
+        items: layerItems,
+        onReorder: (move) => {
+          setLayerOrder(S2(layerItems, move).map((l8) => l8.id));
           bus.emit("layers.reorder");
         },
-        onToggle: (lid, visible) => {
+        onVisibilityChange: (lid, visible) => {
           setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
           bus.emit("layers.toggle");
         }
       }
     ) : null,
-    [instrument.layers, layerDescriptors, layerVisibility, bus]
+    [instrument.layers, layerDescriptors, layerItems, bus]
   );
   const extraChrome = useMemo(() => {
     const out = [];
@@ -1893,7 +1864,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((i3) => i3.name === name);
+  const found = instruments.find((i5) => i5.name === name);
   if (!found) {
     throw new Error(`[labkit] Unknown instrument: "${name}"`);
   }
@@ -1949,7 +1920,7 @@ function addTrial(trials, instruments, instrumentName, options = {}) {
   return [...trials, record];
 }
 function cloneTrial(trials, id) {
-  const sourceIdx = trials.findIndex((w3) => w3.id === id);
+  const sourceIdx = trials.findIndex((w2) => w2.id === id);
   const source = trials[sourceIdx];
   if (!source) return trials;
   const clone = {
@@ -1964,11 +1935,11 @@ function cloneTrial(trials, id) {
 }
 function closeTrial(trials, id) {
   if (trials.length <= 1) return trials;
-  const next = trials.filter((w3) => w3.id !== id);
+  const next = trials.filter((w2) => w2.id !== id);
   return next.length === trials.length ? trials : next;
 }
 function resetTrial(trials, id, instruments) {
-  const idx = trials.findIndex((w3) => w3.id === id);
+  const idx = trials.findIndex((w2) => w2.id === id);
   const current = trials[idx];
   if (!current) return trials;
   const instrument = findInstrument(instruments, current.instrumentName);
@@ -1986,7 +1957,7 @@ function resetTrial(trials, id, instruments) {
   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 idx = trials.findIndex((w2) => w2.id === id);
   const current = trials[idx];
   if (!current) return trials;
   const [record] = addTrial([], instruments, instrumentName, options);
@@ -1994,25 +1965,25 @@ function swapTrial(trials, instruments, id, instrumentName, options = {}) {
   return [...trials.slice(0, idx), record, ...trials.slice(idx + 1)];
 }
 function reorderTrials(trials, ids) {
-  const byId = new Map(trials.map((w3) => [w3.id, w3]));
-  const named = ids.map((id) => byId.get(id)).filter((w3) => w3 !== void 0);
-  const seen = new Set(named.map((w3) => w3.id));
-  const rest = trials.filter((w3) => !seen.has(w3.id));
+  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));
   return [...named, ...rest];
 }
 function findOvershoot(bound, items, tolerance = 1) {
   let worst = null;
   for (const { item, edges } of items) {
     const y3 = edges.bottom - bound.bottom;
-    const x = edges.right - bound.right;
-    const by = Math.max(x, y3);
+    const x2 = edges.right - bound.right;
+    const by = Math.max(x2, y3);
     if (by <= tolerance) continue;
-    if (!worst || by > worst.by) worst = { item, by, axis: y3 >= x ? "y" : "x" };
+    if (!worst || by > worst.by) worst = { item, by, axis: y3 >= x2 ? "y" : "x" };
   }
   return worst;
 }
 function tagAndClasses(el) {
-  return el.tagName.toLowerCase() + [...el.classList].map((c8) => `.${c8}`).join("");
+  return el.tagName.toLowerCase() + [...el.classList].map((c6) => `.${c6}`).join("");
 }
 function describeElement(el) {
   if (el.classList.length > 0) return tagAndClasses(el);
@@ -2021,8 +1992,8 @@ function describeElement(el) {
   return up ? `${tagAndClasses(el)} in ${tagAndClasses(up)}` : tagAndClasses(el);
 }
 function edgesOf(el) {
-  const r10 = el.getBoundingClientRect();
-  return { top: r10.top, left: r10.left, bottom: r10.bottom, right: r10.right };
+  const r4 = el.getBoundingClientRect();
+  return { top: r4.top, left: r4.left, bottom: r4.bottom, right: r4.right };
 }
 function* candidates(root) {
   yield { item: root, edges: edgesOf(root) };
@@ -2033,24 +2004,24 @@ function overflows(el) {
 }
 function explainLabScroll(lab, shellBody) {
   if (overflows(shellBody)) {
-    const r11 = shellBody.getBoundingClientRect();
+    const r5 = shellBody.getBoundingClientRect();
     const bound2 = {
-      top: r11.top,
-      left: r11.left,
-      bottom: r11.top + shellBody.clientHeight,
-      right: r11.left + shellBody.clientWidth
+      top: r5.top,
+      left: r5.left,
+      bottom: r5.top + shellBody.clientHeight,
+      right: r5.left + shellBody.clientWidth
     };
     const hit2 = findOvershoot(bound2, candidates(shellBody));
     return hit2 ? `.lk-shell-body scrolls: ${describeElement(hit2.item)} reaches ${Math.round(hit2.by)}px past it (${hit2.axis})` : ".lk-shell-body scrolls";
   }
   const doc = document.scrollingElement ?? document.documentElement;
   if (!overflows(doc)) return null;
-  const r10 = lab.getBoundingClientRect();
+  const r4 = lab.getBoundingClientRect();
   const bound = {
-    top: r10.top,
-    left: r10.left,
-    bottom: r10.top + Math.min(r10.height, doc.clientHeight),
-    right: r10.left + Math.min(r10.width, doc.clientWidth)
+    top: r4.top,
+    left: r4.left,
+    bottom: r4.top + Math.min(r4.height, doc.clientHeight),
+    right: r4.left + Math.min(r4.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;
@@ -2080,16 +2051,6 @@ function useLabFitWarning(labBody) {
     };
   }, [labBody]);
 }
-var MODES = [
-  { value: "auto", label: "Auto", glyph: /* @__PURE__ */ jsx(E, { size: 14 }) },
-  { value: "light", label: "Light", glyph: /* @__PURE__ */ jsx(w, { size: 14 }) },
-  { value: "dark", label: "Dark", glyph: /* @__PURE__ */ jsx(T, { size: 14 }) }
-];
-var MODE_ITEMS = MODES.map(({ value, label, glyph }) => ({
-  value,
-  label: glyph,
-  ariaLabel: label
-}));
 function LabHeader({ addTrial: addTrial2 = true }) {
   const lab = useLabContext();
   const only = lab.instruments.length === 1 ? lab.instruments[0] : null;
@@ -2101,30 +2062,26 @@ function LabHeader({ addTrial: addTrial2 = true }) {
         className: "lk-lab-header__add",
         onClick: () => lab.addTrial(only.name),
         children: [
-          /* @__PURE__ */ jsx(C, { size: 16 }),
+          /* @__PURE__ */ jsx(oe, { size: 16 }),
           /* @__PURE__ */ jsx("span", { children: "Add trial" })
         ]
       }
     ) : /* @__PURE__ */ jsx(
-      l7,
+      d2,
       {
         "aria-label": "Add trial",
         label: "Add trial\u2026",
-        items: lab.instruments.map((i3) => ({ value: i3.name, label: i3.title ?? i3.name })),
+        items: lab.instruments.map((i5) => ({ value: i5.name, label: i5.title ?? i5.name })),
         onAction: (name) => lab.addTrial(name)
       }
     ),
     /* @__PURE__ */ jsx(
-      r3,
+      s3,
       {
         className: "lk-lab-header__mode",
-        ariaLabel: "Color mode",
         variant: "flat",
-        items: MODE_ITEMS,
         value: lab.mode,
-        onChange: (next) => {
-          if (next) lab.setMode(next);
-        }
+        onChange: lab.setMode
       }
     )
   ] });
@@ -2132,42 +2089,39 @@ function LabHeader({ addTrial: addTrial2 = true }) {
 function LabPalette({ tools, contributions }) {
   const ctx = useLabChromeContext();
   const all = labContributions(tools, contributions);
-  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c8) => c8.region === "palette"), ctx });
-}
-function 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;
+  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c6) => c6.region === "palette"), ctx });
 }
 function LabRoot({ children, mode = "auto", className }) {
-  const resolved = useResolvedMode(mode);
+  const resolved = useResolvedColorMode(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 locate(url) {
+  const hash = url.indexOf("#");
+  const trim = (part) => part.replace(/\?.*$/, "").replace(/\/$/, "");
+  return {
+    doc: trim(hash < 0 ? url : url.slice(0, hash)).replace(/\.html$/, ""),
+    route: hash < 0 ? "" : trim(url.slice(hash + 1))
+  };
+}
 function currentPage(path, pages) {
-  const here = path.replace(/[?#].*$/, "").replace(/\/$/, "").replace(/\.html$/, "");
-  return pages.findIndex((p2) => here.endsWith(p2.href.replace(/\.html$/, "")));
+  const here = locate(path);
+  const onDoc = (doc) => here.doc.endsWith(doc);
+  const routed = pages.findIndex((p3) => {
+    if (!p3.href.includes("#")) return false;
+    const page = locate(p3.href);
+    return onDoc(page.doc) && (here.route === page.route || here.route.startsWith(`${page.route}/`));
+  });
+  if (routed >= 0) return routed;
+  return pages.findIndex((p3) => !p3.href.includes("#") && onDoc(locate(p3.href).doc));
 }
 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),
+    path ?? (typeof window === "undefined" ? "" : window.location.pathname + window.location.hash),
     pages
   );
   const close = useCallback(() => setOpen(false), []);
@@ -2208,13 +2162,13 @@ function LabSwitcher({ title, pages, path, className }) {
         ]
       }
     ) }),
-    open && /* @__PURE__ */ jsx("div", { className: "lk-switcher-menu", id: menuId, role: "menu", children: pages.map((page, i3) => /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsx("div", { className: "lk-switcher-menu", id: menuId, role: "menu", children: pages.map((page, i5) => /* @__PURE__ */ jsx(
       "a",
       {
         href: page.href,
         role: "menuitem",
         className: "lk-switcher-item",
-        "aria-current": i3 === here ? "page" : void 0,
+        "aria-current": i5 === here ? "page" : void 0,
         onClick: close,
         children: page.label
       },
@@ -2229,8 +2183,17 @@ function LabShell({
   footer,
   mode = "auto",
   pages,
-  path
+  path,
+  documentTitle
 }) {
+  useEffect(() => {
+    if (documentTitle === void 0) return;
+    const previous = document.title;
+    document.title = documentTitle;
+    return () => {
+      document.title = previous;
+    };
+  }, [documentTitle]);
   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 }),
@@ -2246,11 +2209,11 @@ var FLOAT_ZONE_ID = asNodeId("lk-workspace-floating");
 var PANEL_KIND = "panel";
 var KIND = "trial";
 function extentOf(store, id) {
-  const p2 = store.getNode(id)?.membership?.placement;
-  if (!p2) return null;
+  const p3 = store.getNode(id)?.membership?.placement;
+  if (!p3) return null;
   const out = {};
-  if (p2.size) out.size = p2.size;
-  if (p2.span) out.span = p2.span;
+  if (p3.size) out.size = p3.size;
+  if (p3.span) out.span = p3.span;
   return Object.keys(out).length > 0 ? out : null;
 }
 function PanelFrame({ panel, floating = false }) {
@@ -2271,11 +2234,11 @@ function Workspace({
   viewport
 }) {
   const items = Children.toArray(children);
-  const tilePanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "tile"), [panels]);
-  const floatPanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "floating"), [panels]);
+  const tilePanels = useMemo(() => (panels ?? []).filter((p3) => p3.as === "tile"), [panels]);
+  const floatPanels = useMemo(() => (panels ?? []).filter((p3) => p3.as === "floating"), [panels]);
   const wantedIds = [
-    ...items.map((_, i3) => ids?.[i3] ?? `lk-ws-${i3}`),
-    ...tilePanels.map((p2) => `lk-panel-${p2.key}`)
+    ...items.map((_2, i5) => ids?.[i5] ?? `lk-ws-${i5}`),
+    ...tilePanels.map((p3) => `lk-panel-${p3.key}`)
   ];
   const idKey = wantedIds.join(",");
   const idKeyRef = useRef(null);
@@ -2350,9 +2313,9 @@ function Workspace({
     [onReorder]
   );
   const chrome = useMemo(() => {
-    const byId = new Map(nodeIds.map((id, i3) => [id, items[i3]]));
+    const byId = new Map(nodeIds.map((id, i5) => [id, items[i5]]));
     const panelByNode = new Map(
-      tilePanels.map((p2) => [`lk-panel-${p2.key}`, p2])
+      tilePanels.map((p3) => [`lk-panel-${p3.key}`, p3])
     );
     return {
       [PANEL_KIND]: ({ node }) => {
@@ -2370,7 +2333,7 @@ function Workspace({
       }
     };
   }, [nodeIds, items, reorderable, tilePanels]);
-  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p2) => /* @__PURE__ */ jsx(PanelFrame, { panel: p2, floating: true }, p2.key)) });
+  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p3) => /* @__PURE__ */ jsx(PanelFrame, { panel: p3, floating: true }, p3.key)) });
   const grid = /* @__PURE__ */ jsx(
     Container,
     {
@@ -2416,7 +2379,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((i3) => i3.name === trial.instrumentName)?.annotations?.storage;
+      const kept = instruments.find((i5) => i5.name === trial.instrumentName)?.annotations?.storage;
       if (!kept) return;
       try {
         marks.set(trial.id, await kept.load());
@@ -2431,20 +2394,30 @@ async function openStoredLab({ instruments, defaultInstrument, mode }, storageKe
 function LabFallback({
   title,
   mode,
+  density,
+  theme = interstellarTheme,
   pages,
   path
 }) {
-  const resolvedMode = useResolvedMode(mode ?? "auto");
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, selection: { mode: resolvedMode }, className: "lk-lab", children: /* @__PURE__ */ jsx(
-    LabShell,
+  const resolvedMode = useResolvedColorMode(mode ?? "auto");
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
     {
-      title: title ?? "Labkit",
-      mode,
-      ...pages ? { pages } : {},
-      ...path !== void 0 ? { path } : {},
-      children: null
+      theme,
+      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%" },
@@ -2453,10 +2426,13 @@ var NEBULA_SLOTS = [
   { cx: "12%", cy: "82%", sx: "50%", sy: "70%", stop: "70%" },
   { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
 ];
-function buildNebula(colors) {
-  const blobs = colors.map((c8, i3) => {
-    const p2 = NEBULA_SLOTS[i3 % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c8} 22%, transparent), transparent ${p2.stop})`;
+function buildNebula(list, theme, mode, density) {
+  const ctx = { theme, resolved: resolveTheme(theme, { mode, density }) };
+  const n5 = colorCount(list, ctx) ?? NEBULA_SLOTS.length;
+  const colors = Array.from({ length: n5 }, (_2, i5) => colorAt(list, i5, ctx));
+  const blobs = colors.map((c6, i5) => {
+    const p3 = NEBULA_SLOTS[i5 % NEBULA_SLOTS.length];
+    return `radial-gradient(ellipse ${p3.sx} ${p3.sy} at ${p3.cx} ${p3.cy}, color-mix(in srgb, ${c6} 22%, transparent), transparent ${p3.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
@@ -2476,7 +2452,7 @@ function LabPanes({
     void 0,
     { scope: "lab" }
   );
-  const main = contributions.some((c8) => c8.region === "aside") ? /* @__PURE__ */ jsx(
+  const main = contributions.some((c6) => c6.region === "aside") ? /* @__PURE__ */ jsx(
     Split,
     {
       className: "lk-lab__panes",
@@ -2486,15 +2462,15 @@ function LabPanes({
       label: "Lab aside",
       defaultWidth: 320,
       width: asideWidth,
-      onWidthChange: (w3) => {
-        setAsideWidth(w3);
+      onWidthChange: (w2) => {
+        setAsideWidth(w2);
         surface?.invalidateRects();
       },
       sidebar: /* @__PURE__ */ jsx(LabAsideRegion, { contributions }),
       children
     }
   ) : children;
-  if (!contributions.some((c8) => c8.region === "sidebar")) return main;
+  if (!contributions.some((c6) => c6.region === "sidebar")) return main;
   return /* @__PURE__ */ jsx(
     Split,
     {
@@ -2504,8 +2480,8 @@ function LabPanes({
       label: "Lab sidebar",
       defaultWidth: 260,
       width: sidebarWidth,
-      onWidthChange: (w3) => {
-        setSidebarWidth(w3);
+      onWidthChange: (w2) => {
+        setSidebarWidth(w2);
         surface?.invalidateRects();
       },
       sidebar: /* @__PURE__ */ jsx(LabSidebarRegion, { contributions }),
@@ -2524,13 +2500,25 @@ function Lab(props) {
   );
   if (!opened) {
     if (props.fallback !== void 0) return props.fallback;
-    return /* @__PURE__ */ jsx(LabFallback, { title: props.title, mode: props.mode, pages: props.pages, path: props.path });
+    return /* @__PURE__ */ jsx(
+      LabFallback,
+      {
+        title: props.title,
+        mode: props.mode,
+        density: props.density,
+        ...props.theme ? { theme: props.theme } : {},
+        pages: props.pages,
+        path: props.path
+      }
+    );
   }
   return /* @__PURE__ */ jsx(LabRuntime, { ...props, opened });
 }
 function LabRuntime({
   instruments,
   mode,
+  density,
+  theme = interstellarTheme,
   nebula,
   title,
   pages,
@@ -2550,13 +2538,13 @@ function LabRuntime({
   useLayoutEffect(() => {
     store.getState().setInstruments(instruments);
   }, [instruments, store]);
-  const trials = useStore(store, (s5) => s5.trials);
+  const trials = useStore(store, (s4) => s4.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 savedSnapshots = useStore(store, (s4) => s4.savedSnapshots);
+  const modeValue = useStore(store, (s4) => s4.mode);
+  const layout = useStore(store, (s4) => s4.layout);
+  const undockedPanels = useStore(store, (s4) => s4.undockedPanels);
   const panelHostsRef = useRef(null);
   if (panelHostsRef.current === null) panelHostsRef.current = createPanelHostRegistry();
   const outerSurface = useSurfaceOptional();
@@ -2569,17 +2557,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((c8) => c8 !== null);
+    const canvases = [ownUnderRef.current, ownOverRef.current].filter((c6) => c6 !== null);
     if (canvases.length === 0) return;
-    const w3 = Math.round(frame.size.width * frame.dpr);
-    const h2 = Math.round(frame.size.height * frame.dpr);
-    if (bufferRef.current.w !== w3 || bufferRef.current.h !== h2) {
-      bufferRef.current = { w: w3, h: h2 };
-      for (const c8 of canvases) {
-        c8.width = w3;
-        c8.height = h2;
-        c8.style.width = `${frame.size.width}px`;
-        c8.style.height = `${frame.size.height}px`;
+    const w2 = Math.round(frame.size.width * frame.dpr);
+    const h = Math.round(frame.size.height * frame.dpr);
+    if (bufferRef.current.w !== w2 || bufferRef.current.h !== h) {
+      bufferRef.current = { w: w2, h };
+      for (const c6 of canvases) {
+        c6.width = w2;
+        c6.height = h;
+        c6.style.width = `${frame.size.width}px`;
+        c6.style.height = `${frame.size.height}px`;
       }
       surfaceRef.current?.invalidateAll();
       return;
@@ -2637,14 +2625,14 @@ function LabRuntime({
     })),
     [undockedPanels]
   );
-  const resolvedMode = useResolvedMode(modeValue);
-  const annotates = instruments.some((i3) => i3.annotations != null);
+  const resolvedMode = useResolvedColorMode(modeValue);
+  const annotates = instruments.some((i5) => i5.annotations != null);
   const labChromeAll = useMemo(
     () => labContributions([...annotates ? ANNOTATION_TOOLS : [], ...tools ?? []], labChrome),
     [annotates, tools, labChrome]
   );
-  const hasFooterChrome = labChromeAll.some((c8) => c8.region === "footer");
-  const hasPaneChrome = labChromeAll.some((c8) => c8.region === "sidebar" || c8.region === "aside");
+  const hasFooterChrome = labChromeAll.some((c6) => c6.region === "footer");
+  const hasPaneChrome = labChromeAll.some((c6) => c6.region === "sidebar" || c6.region === "aside");
   useEffect(() => {
     if (mode && mode !== store.getState().mode) {
       store.getState().setMode(mode);
@@ -2652,14 +2640,14 @@ function LabRuntime({
   }, [mode, store]);
   const contextValue = useMemo(() => {
     const replaceTrials = (next) => {
-      const currentById = new Map(store.getState().trials.map((w3) => [w3.id, w3]));
-      const merged = next.map((w3) => currentById.get(w3.id) ?? w3);
+      const currentById = new Map(store.getState().trials.map((w2) => [w2.id, w2]));
+      const merged = next.map((w2) => currentById.get(w2.id) ?? w2);
       store.setState({ trials: merged });
     };
     const replaceAndFocusAdded = (next) => {
-      const before = new Set(store.getState().trials.map((w3) => w3.id));
+      const before = new Set(store.getState().trials.map((w2) => w2.id));
       replaceTrials(next);
-      const added = next.find((w3) => !before.has(w3.id));
+      const added = next.find((w2) => !before.has(w2.id));
       if (added) setFocusPick(added.id);
     };
     return {
@@ -2684,7 +2672,7 @@ function LabRuntime({
         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 record = next[current.trials.findIndex((w2) => w2.id === id)];
         const { [id]: extent, ...layoutRest } = current.layout;
         if (extent) current.setLayout({ ...layoutRest, [record.id]: extent });
         replaceTrials(next);
@@ -2694,17 +2682,17 @@ function LabRuntime({
       focusTrial: (id) => setFocusPick(id),
       resetTrial: (id) => {
         const next = resetTrial(store.getState().trials, id, instruments);
-        const record = next.find((w3) => w3.id === id);
+        const record = next.find((w2) => w2.id === id);
         if (!record) return;
-        store.setState((s5) => ({
-          trials: s5.trials.map(
-            (w3) => w3.id === id ? { ...w3, config: record.config, state: record.state, view: record.view } : w3
+        store.setState((s4) => ({
+          trials: s4.trials.map(
+            (w2) => w2.id === id ? { ...w2, config: record.config, state: record.state, view: record.view } : w2
           )
         }));
       },
       savedSnapshots,
       saveSnapshot: (trialId, name) => {
-        const taken = store.getState().savedSnapshots.filter((s5) => s5.trialId === trialId).length;
+        const taken = store.getState().savedSnapshots.filter((s4) => s4.trialId === trialId).length;
         store.getState().saveSnapshot(trialId, name ?? `Snapshot ${taken + 1}`);
       },
       loadSnapshot: (trialId, snapshotId) => {
@@ -2714,8 +2702,8 @@ function LabRuntime({
         store.getState().deleteSnapshot(snapshotId);
       },
       mode: modeValue,
-      setMode: (m2) => {
-        store.getState().setMode(m2);
+      setMode: (m3) => {
+        store.getState().setMode(m3);
       },
       configRules,
       controls
@@ -2730,25 +2718,32 @@ function LabRuntime({
     configRules,
     controls
   ]);
-  const backdropStyle = resolvedMode === "dark" && nebula && nebula.length > 0 ? { ["--wzl-backdrop"]: buildNebula(nebula) } : void 0;
+  const backdropStyle = resolvedMode === "dark" && nebula && colorCount(nebula) !== 0 ? {
+    ["--wzl-backdrop"]: buildNebula(
+      nebula,
+      theme,
+      resolvedMode,
+      density ?? "comfortable"
+    )
+  } : void 0;
   const workspace = /* @__PURE__ */ jsx(
     Workspace,
     {
       panels: workspacePanels,
-      ids: trials.map((w3) => w3.id),
+      ids: trials.map((w2) => w2.id),
       resizable: true,
       reorderable: true,
       onReorder: (ids) => contextValue.reorderTrials(ids),
       layout,
       onLayoutChange: (next) => store.getState().setLayout(next),
-      children: trials.map((w3) => /* @__PURE__ */ jsx(Trial, { id: w3.id, chrome, suppress }, w3.id))
+      children: trials.map((w2) => /* @__PURE__ */ jsx(Trial, { id: w2.id, chrome, suppress }, w2.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,
-      selection: { mode: resolvedMode },
+      theme,
+      selection: { mode: resolvedMode, density: density ?? "comfortable" },
       className: "lk-lab",
       style: backdropStyle,
       children: /* @__PURE__ */ jsx(
@@ -2810,6 +2805,9 @@ function LabRuntime({
     }
   ) }) }) }) });
 }
+function LabBoundary({ children }) {
+  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: null, children: /* @__PURE__ */ jsx(PersistenceContext.Provider, { value: null, children: /* @__PURE__ */ jsx(AnnotationPreloadContext.Provider, { value: null, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: null, children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: { over: null, under: null }, children: /* @__PURE__ */ jsx(TrialIdContext.Provider, { value: null, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: null, children: /* @__PURE__ */ jsx(CameraWheelContext.Provider, { value: null, children: /* @__PURE__ */ jsx(CanvasStackContext.Provider, { value: null, children: /* @__PURE__ */ jsx(TrialDragContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ThemeContext.Provider, { value: null, children }) }) }) }) }) }) }) }) }) }) }) }) });
+}
 var SPECIMEN_SECTIONS = [
   "Buttons & toggles",
   "Fields & pickers",
@@ -2903,32 +2901,32 @@ function ButtonsAndToggles() {
   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(c, { variant: "primary", children: "Save" }),
+      /* @__PURE__ */ jsx(c, { variant: "secondary", children: "Cancel" }),
+      /* @__PURE__ */ jsx(c, { variant: "ghost", children: "Ghost" }),
+      /* @__PURE__ */ jsx(c, { variant: "secondary", disabled: true, children: "Disabled" }),
+      /* @__PURE__ */ jsx(c, { 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(Ht, { shape: "pill", status: "accent", variant: "outline", size: "sm", children: "ACCENT" }),
+      /* @__PURE__ */ jsx(Ht, { status: "info", variant: "subtle", children: "INFO" }),
+      /* @__PURE__ */ jsx(Ht, { status: "warn", variant: "solid", children: "WARN" }),
+      /* @__PURE__ */ jsx(Ht, { status: "danger", variant: "solid", children: "DANGER" }),
+      /* @__PURE__ */ jsx(Ht, { status: "muted", children: "MUTED" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Checkbox, Switch", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
       /* @__PURE__ */ jsx(o2, { isSelected: snap, onChange: setSnap, children: "Snap to grid" }),
       /* @__PURE__ */ jsx(o2, { isIndeterminate: true, children: "Mixed" }),
-      /* @__PURE__ */ jsx(a4, { isSelected: wifi, onChange: setWifi, children: "Wifi" })
+      /* @__PURE__ */ jsx(a6, { 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__ */ jsx(Cell, { label: "RadioGroup", children: /* @__PURE__ */ jsxs(l5, { label: "Snap mode", orientation: "horizontal", defaultValue: "grid", children: [
+      /* @__PURE__ */ jsx(u5, { value: "off", children: "Off" }),
+      /* @__PURE__ */ jsx(u5, { value: "grid", children: "Grid" }),
+      /* @__PURE__ */ jsx(u5, { value: "pixel", children: "Pixel" })
     ] }) }),
     /* @__PURE__ */ jsxs(Cell, { label: "ToggleBar", children: [
       /* @__PURE__ */ jsx(
-        r3,
+        a5,
         {
           ariaLabel: "Align",
           value: align,
@@ -2941,7 +2939,7 @@ function ButtonsAndToggles() {
         }
       ),
       /* @__PURE__ */ jsx(
-        r3,
+        a5,
         {
           ariaLabel: "Align, flat",
           variant: "flat",
@@ -2955,9 +2953,9 @@ function ButtonsAndToggles() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Cell, { label: "OptionsBar, ActionsBar", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "OptionsBar, ButtonBar", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
       /* @__PURE__ */ jsx(
-        r7,
+        r3,
         {
           ariaLabel: "Text style",
           items: [
@@ -2967,7 +2965,7 @@ function ButtonsAndToggles() {
         }
       ),
       /* @__PURE__ */ jsx(
-        r8,
+        a7,
         {
           items: [
             { value: "undo", label: "Undo", onAction: () => {
@@ -2980,7 +2978,7 @@ function ButtonsAndToggles() {
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "MenuButton, Disclosure", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
       /* @__PURE__ */ jsx(
-        l7,
+        d2,
         {
           label: "Add trial\u2026",
           onAction: () => {
@@ -2991,24 +2989,22 @@ function ButtonsAndToggles() {
           ]
         }
       ),
-      /* @__PURE__ */ jsx(r6, { open, onToggle: () => setOpen((o5) => !o5), label: "Shapes" }),
-      /* @__PURE__ */ jsx(r6, { open: false, onToggle: () => {
-      }, label: "Down", direction: "down" })
+      /* @__PURE__ */ jsx(i3, { open, onToggle: () => setOpen((o4) => !o4), label: "Shapes" })
     ] }) }),
-    /* @__PURE__ */ jsx(Cell, { label: "Tabs", children: /* @__PURE__ */ jsxs(o5, { children: [
-      /* @__PURE__ */ jsxs(s5, { "aria-label": "Sections", children: [
-        /* @__PURE__ */ jsx(c6, { id: "props", children: "Props" }),
-        /* @__PURE__ */ jsx(c6, { id: "events", children: "Events" }),
-        /* @__PURE__ */ jsx(c6, { id: "snapshot", children: "Snapshot" })
+    /* @__PURE__ */ jsx(Cell, { label: "Tabs", children: /* @__PURE__ */ jsxs(o4, { children: [
+      /* @__PURE__ */ jsxs(s6, { "aria-label": "Sections", children: [
+        /* @__PURE__ */ jsx(c5, { id: "props", children: "Props" }),
+        /* @__PURE__ */ jsx(c5, { id: "events", children: "Events" }),
+        /* @__PURE__ */ jsx(c5, { 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(l7, { id: "props", children: "Props panel." }),
+      /* @__PURE__ */ jsx(l7, { id: "events", children: "Events panel." }),
+      /* @__PURE__ */ jsx(l7, { 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" })
+      /* @__PURE__ */ jsx(p, { keys: [{ label: "\u2318" }, { label: "\u21E7" }, { label: "K" }], separator: "+" }),
+      /* @__PURE__ */ jsx(f2, { label: "K" }),
+      /* @__PURE__ */ jsx(f2, { label: "\u2325", variant: "minimal" })
     ] }) })
   ] });
 }
@@ -3029,9 +3025,9 @@ function FieldsAndPickers() {
   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(u4, { label: "Name", placeholder: "e.g. Pico" }),
       /* @__PURE__ */ jsx(
-        u2,
+        u4,
         {
           label: "Size",
           leadingAdornment: /* @__PURE__ */ jsx("span", { children: "W" }),
@@ -3039,12 +3035,12 @@ function FieldsAndPickers() {
           defaultValue: "120"
         }
       ),
-      /* @__PURE__ */ jsx(u2, { label: "Required", isInvalid: true, errorMessage: "Name is required." })
+      /* @__PURE__ */ jsx(u4, { label: "Required", isInvalid: true, errorMessage: "Name is required." })
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "NumberField, Select, ComboBox", children: [
-      /* @__PURE__ */ jsx(g2, { label: "Opacity", minValue: 0, maxValue: 100, step: 5, defaultValue: 80 }),
+      /* @__PURE__ */ jsx(g, { label: "Opacity", minValue: 0, maxValue: 100, step: 5, defaultValue: 80 }),
       /* @__PURE__ */ jsx(
-        g,
+        T2,
         {
           label: "Color",
           defaultSelectedKey: "g",
@@ -3068,19 +3064,19 @@ function FieldsAndPickers() {
       )
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "RangeSlider, Slider", children: [
-      /* @__PURE__ */ jsx(l4, { label: "Range", defaultValue: [20, 80], minValue: 0, maxValue: 100 }),
+      /* @__PURE__ */ jsx(l8, { label: "Range", defaultValue: [20, 80], minValue: 0, maxValue: 100 }),
       /* @__PURE__ */ jsx(
-        l4,
+        l8,
         {
           label: "Opacity",
           defaultValue: 75,
           minValue: 0,
           maxValue: 100,
-          formatOutput: (v2) => `${v2}%`
+          formatOutput: (v) => `${v}%`
         }
       ),
       /* @__PURE__ */ jsx(
-        b2,
+        b,
         {
           ariaLabel: "Pair",
           min: 0,
@@ -3095,18 +3091,18 @@ function FieldsAndPickers() {
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "DetentSlider, InlineRange", children: [
       /* @__PURE__ */ jsx(
-        c7,
+        c6,
         {
           items: [0.25, 0.5, 1, 2, 4],
           value: rate,
           onChange: setRate,
-          formatLabel: (r10) => `${r10}\xD7`,
+          formatLabel: (r4) => `${r4}\xD7`,
           labels: "all",
           ariaLabel: "Playback rate"
         }
       ),
       /* @__PURE__ */ jsx(
-        r2,
+        i4,
         {
           "aria-label": "Width",
           min: 0,
@@ -3117,8 +3113,8 @@ function FieldsAndPickers() {
       )
     ] }),
     /* @__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(l4, { value: color, alpha: true, onInput: setColor, onChange: setColor, "aria-label": "Color" }),
+      /* @__PURE__ */ jsx(C, { value: gradient, onInput: setGradient, onChange: setGradient, kindSwitch: true })
     ] }),
     /* @__PURE__ */ jsx(Cell, { label: "PaintInput", children: /* @__PURE__ */ jsx(
       S,
@@ -3150,10 +3146,12 @@ function PanelsAndRows() {
   ]);
   const [panelCollapsed, setPanelCollapsed] = useState(false);
   return /* @__PURE__ */ jsxs(Section, { title: "Panels & property rows", children: [
-    /* @__PURE__ */ jsx(Cell, { label: "PropertyPanel", children: /* @__PURE__ */ jsx(O, { title: "Shape", children: /* @__PURE__ */ jsxs(k, { children: [
+    /* @__PURE__ */ jsx(Cell, { label: "PropertyPanel", children: /* @__PURE__ */ jsx(ae, { title: "Shape", children: /* @__PURE__ */ jsxs(oe2, { children: [
       /* @__PURE__ */ jsx(
-        F2,
+        B,
         {
+          kind: "number",
+          control: "slider",
           label: "Opacity",
           value: opacity,
           min: 0,
@@ -3163,8 +3161,10 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        F2,
+        B,
         {
+          kind: "number",
+          control: "slider",
           label: "Radius",
           value: radius,
           min: 0,
@@ -3174,8 +3174,9 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        L3,
+        B,
         {
+          kind: "color",
           label: "Fill",
           value: fill,
           onChange: setFill,
@@ -3183,11 +3184,12 @@ function PanelsAndRows() {
           onAlphaChange: setAlpha
         }
       ),
-      /* @__PURE__ */ jsx(L3, { label: "Stroke", value: stroke, onChange: setStroke }),
-      /* @__PURE__ */ jsx(V, { label: "Count", value: count, min: 0, max: 100, step: 1, onChange: setCount }),
+      /* @__PURE__ */ jsx(B, { kind: "color", label: "Stroke", value: stroke, onChange: setStroke }),
+      /* @__PURE__ */ jsx(B, { kind: "number", label: "Count", value: count, min: 0, max: 100, step: 1, onChange: setCount }),
       /* @__PURE__ */ jsx(
-        H,
+        B,
         {
+          kind: "enum",
           label: "Line cap",
           value: cap,
           onChange: setCap,
@@ -3198,8 +3200,10 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        U,
+        B,
         {
+          kind: "enum",
+          control: "toggle",
           label: "Align",
           value: side,
           onChange: setSide,
@@ -3210,9 +3214,9 @@ function PanelsAndRows() {
           ]
         }
       ),
-      /* @__PURE__ */ jsx(B, { label: "Label", value: label, onChange: setLabel }),
-      /* @__PURE__ */ jsx(R2, { label: "Visible", value: visible, onChange: setVisible }),
-      /* @__PURE__ */ jsx(J, { title: "Bevel", defaultCollapsed: true, children: /* @__PURE__ */ jsx(F2, { label: "Rings", value: 32, min: 4, max: 96, step: 1, onChange: () => {
+      /* @__PURE__ */ jsx(B, { kind: "string", label: "Label", value: label, onChange: setLabel }),
+      /* @__PURE__ */ jsx(B, { kind: "boolean", label: "Visible", value: visible, onChange: setVisible }),
+      /* @__PURE__ */ jsx(b2, { title: "Bevel", defaultCollapsed: true, children: /* @__PURE__ */ jsx(B, { kind: "number", control: "slider", label: "Rings", value: 32, min: 4, max: 96, step: 1, onChange: () => {
       } }) })
     ] }) }) }),
     /* @__PURE__ */ jsx(Cell, { label: "PrefsForm", children: /* @__PURE__ */ jsx(
@@ -3223,23 +3227,23 @@ function PanelsAndRows() {
         onChange: (path, value) => setPrefs((prev) => setAt(prev, path, value))
       }
     ) }),
-    /* @__PURE__ */ jsx(Cell, { label: "LayerStack", children: /* @__PURE__ */ jsx(
-      c4,
+    /* @__PURE__ */ jsx(Cell, { label: "LayerList", children: /* @__PURE__ */ jsx(
+      D,
       {
         items: layers,
-        onReorder: (ids) => setLayers(ids.flatMap((id) => layers.filter((item) => item.id === id))),
+        onReorder: (move) => setLayers(S2(layers, move)),
         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,
+    /* @__PURE__ */ jsx(Cell, { label: "Sidebar, SidebarPanel", children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__box", children: /* @__PURE__ */ jsx(n6, { side: "right", ariaLabel: "Specimen sidebar", children: /* @__PURE__ */ jsx(
+      s5,
       {
         title: "Selection",
         collapsed: panelCollapsed,
-        onToggleCollapse: () => setPanelCollapsed((v2) => !v2),
+        onToggleCollapse: () => setPanelCollapsed((v) => !v),
         onHide: () => {
         },
         children: /* @__PURE__ */ jsx("div", { className: "lk-specimen__pad", children: "2 items selected" })
@@ -3251,38 +3255,38 @@ function OverlaysAndFeedback() {
   const calloutAnchor = useRef(null);
   const [calloutOpen, setCalloutOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
-  const toasts = useMemo(() => m2(), []);
+  const toasts = useMemo(() => m4(), []);
   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__ */ jsxs(l2, { 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(u, { placement: "bottom", children: "Duplicates the selected layer" })
       ] }),
       /* @__PURE__ */ jsx("button", { type: "button", ref: calloutAnchor, onClick: () => setCalloutOpen(true), children: "Callout" }),
       /* @__PURE__ */ jsx(
-        g3,
+        g2,
         {
           triggerRef: calloutAnchor,
           isOpen: calloutOpen,
           onOpenChange: setCalloutOpen,
-          tone: "info",
-          title: "Info",
+          stance: "notice",
+          title: "Notice",
           children: "Neutral guidance."
         }
       ),
-      /* @__PURE__ */ jsx(a5, { onClick: () => setDialogOpen(true), children: "Dialog" }),
+      /* @__PURE__ */ jsx(c, { onClick: () => setDialogOpen(true), children: "Dialog" }),
       /* @__PURE__ */ jsx(
-        l5,
+        u3,
         {
           isOpen: dialogOpen,
           onOpenChange: setDialogOpen,
           title: "Preferences",
-          footer: /* @__PURE__ */ jsx(a5, { variant: "primary", onClick: () => setDialogOpen(false), children: "OK" }),
+          footer: /* @__PURE__ */ jsx(c, { variant: "primary", onClick: () => setDialogOpen(false), children: "OK" }),
           children: /* @__PURE__ */ jsx("p", { children: "Dialog body." })
         }
       ),
       /* @__PURE__ */ jsx(
-        a5,
+        c,
         {
           onClick: () => toasts.add("success", "Saved", { description: "All changes stored.", ttlMs: null }),
           children: "Toast"
@@ -3291,29 +3295,29 @@ function OverlaysAndFeedback() {
       /* @__PURE__ */ jsx(S4, { queue: toasts, placement: "bottom-right" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Powerline", children: /* @__PURE__ */ jsx(
-      r10,
+      r4,
       {
         variant: "solid",
         size: "sm",
         segments: [
-          { text: "main", tone: "accent", endCap: "chevron" },
-          { text: "\u2713 12", tone: "info", endCap: "slant" },
-          { text: "~/proj", tone: "muted" }
+          { text: "main", status: "accent", endCap: "chevron" },
+          { text: "\u2713 12", status: "info", endCap: "slant" },
+          { text: "~/proj", status: "muted" }
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(Cell, { label: "StatusBar", children: /* @__PURE__ */ jsxs(n6, { ariaLabel: "Editor status", children: [
-      /* @__PURE__ */ jsx(r11, { children: "tool: select" }),
-      /* @__PURE__ */ jsx(r11, { children: "sel: 3" }),
+    /* @__PURE__ */ jsx(Cell, { label: "StatusBar", children: /* @__PURE__ */ jsxs(n7, { ariaLabel: "Editor status", children: [
+      /* @__PURE__ */ jsx(r5, { children: "tool: select" }),
+      /* @__PURE__ */ jsx(r5, { children: "sel: 3" }),
       /* @__PURE__ */ jsx(i5, {}),
-      /* @__PURE__ */ jsx(r11, { muted: true, children: "0.7.0" })
+      /* @__PURE__ */ jsx(r5, { 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,
+      p2,
       {
         rows: [
           { id: "a", label: "Draw rect" },
@@ -3324,7 +3328,7 @@ function ListsAndData() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "DataGrid", children: /* @__PURE__ */ jsx(
-      s2,
+      f,
       {
         rows: [
           { id: "1", name: "accent", count: 3 },
@@ -3332,8 +3336,8 @@ function ListsAndData() {
           { id: "3", name: "danger", count: 2 }
         ],
         columns: [
-          { id: "name", header: "name", accessor: (r10) => r10.name, sortable: true },
-          { id: "count", header: "count", accessor: (r10) => r10.count, sortable: true }
+          { id: "name", header: "name", accessor: (r4) => r4.name, sortable: true },
+          { id: "count", header: "count", accessor: (r4) => r4.count, sortable: true }
         ],
         defaultSort: { columnId: "name", direction: "asc" }
       }
@@ -3344,8 +3348,8 @@ 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,
+    /* @__PURE__ */ jsx(Cell, { label: "ToolGroup, ToolButton", children: /* @__PURE__ */ jsx(n8, { orientation: "horizontal", ariaLabel: "Tools", children: ["select", "rect", "ellipse"].map((id) => /* @__PURE__ */ jsx(
+      o3,
       {
         icon: /* @__PURE__ */ jsx(Dot, {}),
         label: id,
@@ -3356,14 +3360,14 @@ function ToolChrome() {
       },
       id
     )) }) }),
-    /* @__PURE__ */ jsx(Cell, { label: "ToolOptionsBar", children: /* @__PURE__ */ jsxs(r9, { label: "Text", children: [
-      /* @__PURE__ */ jsx(a5, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Bold", children: "B" }),
-      /* @__PURE__ */ jsx(a5, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Italic", children: "I" })
+    /* @__PURE__ */ jsx(Cell, { label: "ToolOptionsBar", children: /* @__PURE__ */ jsxs(c3, { label: "Text", children: [
+      /* @__PURE__ */ jsx(c, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Bold", children: "B" }),
+      /* @__PURE__ */ jsx(c, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Italic", children: "I" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "ResizeHandle", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__box", children: [
       /* @__PURE__ */ jsx("div", { className: "lk-specimen__box-main", children: "content" }),
       /* @__PURE__ */ jsx(
-        c5,
+        c4,
         {
           value: paneWidth,
           min: 100,
@@ -3432,7 +3436,7 @@ function EditorsAndPlots() {
   const [playhead, setPlayhead] = useState(0);
   return /* @__PURE__ */ jsxs(Section, { title: "Editors & plots", children: [
     /* @__PURE__ */ jsx(Cell, { label: "Plot2D", children: /* @__PURE__ */ jsx(
-      w2,
+      w,
       {
         width: 260,
         height: 130,
@@ -3443,7 +3447,7 @@ function EditorsAndPlots() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "CurveEditor", children: /* @__PURE__ */ jsx(
-      L2,
+      L,
       {
         value: curve,
         onInput: setCurve,
@@ -3458,7 +3462,7 @@ function EditorsAndPlots() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "PointPlotter", children: /* @__PURE__ */ jsx(
-      n8,
+      n9,
       {
         value: points,
         onInput: setPoints,
@@ -3472,7 +3476,7 @@ function EditorsAndPlots() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "BandEditor", wide: true, children: /* @__PURE__ */ jsx(
-      k2,
+      k,
       {
         min: 1 / 64,
         max: 1 / 2,
@@ -3482,7 +3486,7 @@ function EditorsAndPlots() {
         onChange: setBands,
         selectedIndex: band,
         onSelect: setBand,
-        renderBand: (b2) => b2.data.name,
+        renderBand: (b3) => b3.data.name,
         ticks: [1 / 24, 1 / 12, 1 / 6].map((at) => ({ at, label: `1/${Math.round(1 / at)}` }))
       }
     ) }),
@@ -3499,7 +3503,6 @@ function EditorsAndPlots() {
   ] });
 }
 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: [
@@ -3517,18 +3520,6 @@ function LabChrome() {
       /* @__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 })
@@ -3563,6 +3554,6 @@ function Specimen({ className }) {
   ] });
 }
 
-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 };
+export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationOverlay, AnnotationTargets, Lab, LabBoundary, 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