@weasel-js/labkit 1.1.0 → 1.3.0-pre.0

package/dist/index.js

@@ -1,43 +1,369 @@
-export { LayerStack } from './chunk-NRKWVTVT.js';
-import { p, F } from './chunk-C6GJKPUI.js';
-import './chunk-DJLDIRFN.js';
-import { Sidebar, StatusBar, Toolbar } from './chunk-PMAU3SEE.js';
-export { FpsMeter, ScaleIndicator, Sidebar, StatusBar, Toolbar } from './chunk-PMAU3SEE.js';
-import { LabStoreContext, createLabStore, noneAdapter } from './chunk-3TYUJR7Z.js';
-export { CURRENT_DOCUMENT_VERSION, LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, createMemoryAdapter, labDocumentKey, localStorageAdapter, noneAdapter, quarantineKey, sessionStorageAdapter, urlHashAdapter, useLabStore, useTrialId, useTrialState } from './chunk-3TYUJR7Z.js';
-import { ControlPanel } from './chunk-5R2ATYPJ.js';
-export { ControlPanel } from './chunk-5R2ATYPJ.js';
-import { CanvasStack, screenToWorld } from './chunk-574LJAV4.js';
-export { CanvasStack, screenToWorld, worldToScreen } from './chunk-574LJAV4.js';
+import { useSurfaceOptional } from './chunk-HFDVGF4X.js';
+export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface } from './chunk-HFDVGF4X.js';
+import { useJob } from './chunk-LN6JDUGB.js';
+export { useJob } from './chunk-LN6JDUGB.js';
+export { LayerStack } from './chunk-O2BULFHX.js';
+import { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, SidebarRegion, ViewportRegion, StatusRegion } from './chunk-PO6L3NSH.js';
+export { PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, mergeContributions, suppressContributions } from './chunk-PO6L3NSH.js';
+import { JobProgress } from './chunk-RVNN4CHQ.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-RVNN4CHQ.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-O7NVSCLN.js';
+import { LabStoreContext, createLabStore, noneAdapter } from './chunk-4TMMVIDM.js';
+export { CURRENT_DOCUMENT_VERSION, LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, createMemoryAdapter, labDocumentKey, localStorageAdapter, noneAdapter, quarantineKey, sessionStorageAdapter, urlHashAdapter, useLabStore, useTrialId, useTrialState } from './chunk-4TMMVIDM.js';
+import { fromConfigFields } from './chunk-ZZAYVX4X.js';
+export { CheckboxRow, ColorRow, ControlPanel, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SelectRow, SliderRow, TextRow, ToggleRow, fromConfigFields, isLeafVisible } from './chunk-ZZAYVX4X.js';
+import { p, F, vt, p2, r } from './chunk-TLGRYALP.js';
+import { CanvasStack, screenToWorld } from './chunk-NS54R52R.js';
+export { CanvasStack, screenToWorld, worldToScreen } from './chunk-NS54R52R.js';
 export { CanvasStackContext } from './chunk-CPUJ3QXL.js';
-import { LayerList } from './chunk-SFL7NFKN.js';
-export { LayerList } from './chunk-SFL7NFKN.js';
+import { useVisibleRaf } from './chunk-Z6HJ5FEM.js';
+import { LayerList } from './chunk-V7PRSIRQ.js';
+export { LayerList } from './chunk-V7PRSIRQ.js';
+import './chunk-PQJ5B2U2.js';
 import { createEventBus, redo, undo, pushSnapshot } from './chunk-RL2LOLNI.js';
 export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
-import { createContext, useContext, useMemo, useRef, useState, Children, useLayoutEffect, useEffect, useCallback } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useRef, useCallback, useContext, useMemo, useState, Children, useLayoutEffect, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useStore } from 'zustand/react';
 import { createPortal } from 'react-dom';
+import { Provider, StrategyRegistryProvider, DragProvider, Container, useDragHandle } from 'windease/react';
 import { asNodeId, Store, createNode, gridStrategy } from 'windease';
-import { DragHandle, Provider, StrategyRegistryProvider, DragProvider, Container } from 'windease/react';
 
-// src/instrument/capabilityDetector.ts
-function detectCapabilities(instrument) {
+var PITCH_LIMIT = Math.PI / 2 - 0.01;
+var YAW_PER_PX = 8e-3;
+var PITCH_PER_PX = 8e-3;
+var DISTANCE_PER_NOTCH = 15e-4;
+var DRAG_THRESHOLD = 3;
+function clampPitch(pitch) {
+  return Math.min(PITCH_LIMIT, Math.max(-PITCH_LIMIT, pitch));
+}
+function wrapYaw(yaw) {
+  const wrapped = ((yaw + Math.PI) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI) - Math.PI;
+  return wrapped === -Math.PI ? Math.PI : wrapped;
+}
+function orbitAfterDrag(start, dx, dy) {
+  return {
+    ...start,
+    yaw: wrapYaw(start.yaw + dx * YAW_PER_PX),
+    pitch: clampPitch(start.pitch + dy * PITCH_PER_PX)
+  };
+}
+function orbitAfterWheel(view, deltaY, minDistance, maxDistance) {
+  const factor = Math.exp(deltaY * DISTANCE_PER_NOTCH);
   return {
-    hasCanvas: instrument.canvas != null,
-    hasLayers: instrument.layers != null,
-    hasDragDrop: instrument.dragDrop != null,
-    hasUndo: instrument.undo != null
+    ...view,
+    distance: Math.min(maxDistance, Math.max(minDistance, view.distance * factor))
   };
 }
+function useOrbit({
+  view,
+  onViewChange,
+  home,
+  minDistance = 0.1,
+  maxDistance = 1e3
+}) {
+  const dragRef = useRef(null);
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  const homeRef = useRef(home ?? view);
+  if (home) homeRef.current = home;
+  const onWheel = useCallback(
+    (e) => {
+      e.preventDefault();
+      onViewChange(orbitAfterWheel(viewRef.current, e.deltaY, minDistance, maxDistance));
+    },
+    [onViewChange, minDistance, maxDistance]
+  );
+  const onPointerDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startView: viewRef.current,
+      moved: false
+    };
+  }, []);
+  const onPointerMove = useCallback(
+    (e) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== e.pointerId) return;
+      const dx = e.clientX - drag.startX;
+      const dy = e.clientY - drag.startY;
+      if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      drag.moved = true;
+      onViewChange(orbitAfterDrag(drag.startView, dx, dy));
+    },
+    [onViewChange]
+  );
+  const onPointerUp = useCallback((e) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    dragRef.current = null;
+  }, []);
+  const onDoubleClick = useCallback(() => onViewChange(homeRef.current), [onViewChange]);
+  const isDragging = useCallback(() => dragRef.current?.moved === true, []);
+  return { onWheel, onPointerDown, onPointerMove, onPointerUp, onDoubleClick, isDragging };
+}
+
+// src/config/builder.ts
+var BaseNode = class {
+  constructor(defaultValue, annotations = {}, options = {}) {
+    this.annotations = annotations;
+    this.options = options;
+    this.default = defaultValue;
+  }
+  annotations;
+  options;
+  // `default` is a reserved word in a parameter position, so the field is
+  // declared rather than taken as a parameter property.
+  default;
+  /** Clone into the same subclass. Subclasses with extra constructor
+   *  arguments override this. */
+  with(annotations, options) {
+    const Ctor = this.constructor;
+    return new Ctor(this.default, annotations, options);
+  }
+  ann(patch) {
+    return this.with({ ...this.annotations, ...patch }, this.options);
+  }
+  opt(patch) {
+    return this.with(this.annotations, { ...this.options, ...patch });
+  }
+  /** Human-readable label. Defaults to the key, title-cased. */
+  label(name) {
+    return this.ann({ name });
+  }
+  /** Longer help text, surfaced as a tooltip on the row label. */
+  describe(description) {
+    return this.ann({ description });
+  }
+  /** Omit from the panel unless it is asked to show hidden leaves. */
+  hidden() {
+    return this.ann({ hidden: true });
+  }
+  /** Pair with a sibling sharing this id, side-by-side on one row. */
+  pair(pair) {
+    return this.ann({ pair });
+  }
+  /** Render under a named section heading. */
+  section(section) {
+    return this.opt({ section });
+  }
+  /** Show this row only while the predicate holds. Presentational — the value
+   *  stays in config and the instrument still reads it. */
+  showIf(predicate) {
+    return this.opt({ showIf: predicate });
+  }
+  /** Draw this one row yourself, keeping the kind, default and validation. */
+  render(renderer) {
+    return this.opt({ render: renderer });
+  }
+};
+var NumberNode = class extends BaseNode {
+  kind = "number";
+  /** Bound the value. A number with both bounds renders as a slider. */
+  range(min, max) {
+    return this.ann({ min, max });
+  }
+  step(step) {
+    return this.ann({ step });
+  }
+  /** Force a slider even without both bounds. */
+  slider() {
+    return this.ann({ control: "slider" });
+  }
+  /** Force a typed input even when both bounds are set. */
+  input() {
+    return this.ann({ control: "input" });
+  }
+};
+var BooleanNode = class extends BaseNode {
+  kind = "boolean";
+  /** Ask for a switch. `ControlPanel` still draws a checkbox; weasel-ui's
+   *  `PrefsForm` honors the distinction. */
+  toggle() {
+    return this.ann({ control: "switch" });
+  }
+};
+var StringNode = class extends BaseNode {
+  kind = "string";
+  placeholder(placeholder) {
+    return this.ann({ placeholder });
+  }
+  maxLength(maxLength) {
+    return this.ann({ maxLength });
+  }
+  /** Milliseconds to debounce live writes. 0 commits every keystroke. */
+  debounce(debounceMs) {
+    return this.ann({ debounceMs });
+  }
+};
+var ColorNode = class extends BaseNode {
+  kind = "color";
+};
+var EnumNode = class extends BaseNode {
+  kind = "enum";
+  /** Render as a segmented control rather than a select. */
+  radio() {
+    return this.ann({ control: "radio" });
+  }
+  /** Relabel the choices. Named `labels` rather than `options` because
+   *  `options` is the node's own extras bag. */
+  labels(options) {
+    return this.ann({ options });
+  }
+};
+var ValueNode = class extends BaseNode {
+  kind = null;
+};
+var CustomNode = class _CustomNode extends BaseNode {
+  constructor(kind, defaultValue, annotations = {}, options = {}) {
+    super(defaultValue, annotations, options);
+    this.kind = kind;
+  }
+  kind;
+  with(annotations, options) {
+    return new _CustomNode(this.kind, this.default, annotations, options);
+  }
+};
+var expand = (options) => options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
+var f = {
+  number: (def) => new NumberNode(def),
+  boolean: (def) => new BooleanNode(def),
+  string: (def) => new StringNode(def),
+  color: (def) => new ColorNode(def),
+  /** A fixed set of choices. The default's literal type flows into the config
+   *  type, so `f.enum('fast', ['fast', 'accurate'])` gives
+   *  `'fast' | 'accurate'` with no `as const`. */
+  enum: (def, options) => new EnumNode(def, { options: expand(options) }),
+  /** A leaf with no declared kind: the rule chain decides, which is how a lab
+   *  states a convention like "every `*Color` key is a color picker". */
+  value: (def) => new ValueNode(def),
+  /** A leaf of a kind a lab supplies the control for, through `controls`. */
+  custom: (kind, def, validate) => new CustomNode(kind, def, {}, validate ? { validate } : {}),
+  /** Collect leaves into an instrument's config. */
+  schema(nodes) {
+    return {
+      nodes,
+      defaults: () => {
+        const out = {};
+        for (const [key, node] of Object.entries(nodes)) out[key] = node.default;
+        return out;
+      }
+    };
+  }
+};
+
+// src/config/rules.ts
+function titleCase(key) {
+  const words = key.replace(/[_-]+/g, " ").split(/(?<=[a-z0-9])(?=[A-Z])/).join(" ").trim().toLowerCase();
+  return words.length === 0 ? words : words[0].toUpperCase() + words.slice(1);
+}
+var kindFromValue = (ctx) => {
+  const t = typeof ctx.default;
+  if (t === "boolean" || t === "number" || t === "string") return { kind: t };
+  return null;
+};
+var labelFromKey = (ctx) => ({ name: titleCase(ctx.key) });
+var sliderWhenBounded = (ctx) => {
+  if (ctx.leaf.kind !== "number") return null;
+  const bounded = ctx.leaf.min !== void 0 && ctx.leaf.max !== void 0;
+  return bounded ? { control: "slider" } : null;
+};
+var descriptionDefault = () => ({ description: "" });
+var builtinRules = [
+  kindFromValue,
+  labelFromKey,
+  sliderWhenBounded,
+  descriptionDefault
+];
+function applyRules(seed, ctx, rules) {
+  const acc = { ...seed };
+  for (const rule of rules) {
+    const patch = rule({ ...ctx, leaf: acc });
+    if (patch === null) continue;
+    for (const [k, v] of Object.entries(patch)) {
+      if (v !== void 0 && acc[k] === void 0) {
+        acc[k] = v;
+      }
+    }
+  }
+  return acc;
+}
+
+// src/config/resolve.ts
+function defined(annotations) {
+  const out = {};
+  for (const [k, v] of Object.entries(annotations)) if (v !== void 0) out[k] = v;
+  return out;
+}
+function resolveConfigSchema(schema, rules = []) {
+  const children = {};
+  const sectionOrder = [];
+  const sectionPaths = /* @__PURE__ */ new Map();
+  const showIf = /* @__PURE__ */ new Map();
+  const renderers = {};
+  const chain2 = [...rules, ...builtinRules];
+  for (const [key, node] of Object.entries(schema.nodes)) {
+    const seed = defined({
+      ...node.annotations,
+      ...node.kind === null ? {} : { kind: node.kind }
+    });
+    const patch = applyRules(seed, { key, path: key, default: node.default }, chain2);
+    children[key] = { ...patch, default: node.default };
+    const { section, showIf: predicate, render } = node.options;
+    if (section !== void 0) {
+      if (!sectionPaths.has(section)) {
+        sectionOrder.push(section);
+        sectionPaths.set(section, []);
+      }
+      sectionPaths.get(section)?.push(key);
+    }
+    if (predicate) showIf.set(key, predicate);
+    if (render) renderers[key] = render;
+  }
+  const group = { name: "", children };
+  const sections = sectionOrder.map((label) => ({
+    label,
+    paths: sectionPaths.get(label) ?? []
+  }));
+  return { group, sections, showIf, renderers };
+}
+var LabContext = createContext(null);
+function useLabContext() {
+  const ctx = useContext(LabContext);
+  if (ctx === null) {
+    throw new Error("useLabContext must be used inside <Lab>");
+  }
+  return ctx;
+}
+
+// src/config/useConfigSchema.ts
+var NO_RULES = [];
+function useConfigSchema(instrument) {
+  const lab = useContext(LabContext);
+  const rules = lab?.configRules ?? NO_RULES;
+  return useMemo(
+    () => instrument.config ? resolveConfigSchema(instrument.config, rules) : fromConfigFields(instrument.configSchema?.() ?? []),
+    [instrument, rules]
+  );
+}
 
 // src/instrument/defineInstrument.ts
 function defineInstrument(spec) {
+  if (spec.config && !("defaultConfig" in spec && spec.defaultConfig)) {
+    const schema = spec.config;
+    return { ...spec, defaultConfig: () => schema.defaults() };
+  }
   return spec;
 }
 
 // src/instrument/validateConfigSchema.ts
-var KNOWN_TYPES = ["slider", "checkbox", "select", "number", "text", "color"];
 function validateConfigSchema(fields) {
   const errors = [];
   const seenKeys = /* @__PURE__ */ new Set();
@@ -52,10 +378,6 @@ function validateConfigSchema(fields) {
     if (field.label === "") {
       errors.push(`Field "${field.key}" has empty label`);
     }
-    if (!KNOWN_TYPES.includes(field.type)) {
-      errors.push(`Unknown field type: "${field.type}" on key "${field.key}"`);
-      continue;
-    }
     if (field.type === "slider") {
       if (!Number.isFinite(field.default)) {
         errors.push(`Field "${field.key}": default must be a finite number`);
@@ -90,7 +412,7 @@ function validateConfigSchema(fields) {
   return { valid: errors.length === 0, errors };
 }
 
-// ../theme/dist/chunk-E3FOFGMD.js
+// ../theme/dist/chunk-O32P3G22.js
 var THEME_SOURCES = {
   "weasel": {
     "primitives": {
@@ -276,6 +598,15 @@ var THEME_SOURCES = {
         "type": "dimension",
         "value": "5px"
       },
+      "radius-lg": {
+        "type": "dimension",
+        "value": "14px"
+      },
+      "radius-pill": {
+        "type": "dimension",
+        "value": "999px",
+        "description": "Fully rounded ends \u2014 segmented controls, progress tracks."
+      },
       "border-w": {
         "type": "dimension",
         "value": "1px"
@@ -293,29 +624,47 @@ var THEME_SOURCES = {
       "tb-height": {
         "type": "dimension",
         "value": "28px",
-        "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToggleBar, ToolOptionsBar)."
-      },
-      "radius-lg": {
-        "type": "dimension",
-        "value": "14px"
+        "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToolOptionsBar). Taller than control-h so the controls inside a strip are not flush with its edges."
       },
       "control-h": {
         "type": "dimension",
-        "value": "28px",
-        "description": "Height of an interactive control \u2014 button, input, select. Distinct from tb-height, which sizes the strip a row of them sits in."
+        "value": "24px",
+        "description": "Height of an interactive control \u2014 button, input, select, segmented control. Distinct from tb-height, which sizes the strip a row of them sits in."
       },
       "glass-blur": {
         "type": "dimension",
         "value": "3px",
         "description": "Backdrop blur radius for frosted surfaces. Pairs with glass-tint."
       },
-      "font-size": {
+      "font-size-2xs": {
+        "type": "dimension",
+        "value": "9px",
+        "description": "Shortcut keys and index badges. The floor for chrome text."
+      },
+      "font-size-xs": {
         "type": "dimension",
-        "value": "13px"
+        "value": "10px",
+        "description": "Tool-button labels under an icon."
       },
       "font-size-sm": {
         "type": "dimension",
-        "value": "11px"
+        "value": "11px",
+        "description": "Chrome labels, status readouts, section headings."
+      },
+      "font-size": {
+        "type": "dimension",
+        "value": "13px",
+        "description": "Controls and body text."
+      },
+      "font-size-lg": {
+        "type": "dimension",
+        "value": "16px",
+        "description": "Panel and dialog titles."
+      },
+      "font-size-xl": {
+        "type": "dimension",
+        "value": "20px",
+        "description": "The largest chrome text \u2014 a lab or app title."
       },
       "space-xs": {
         "type": "dimension",
@@ -333,6 +682,20 @@ var THEME_SOURCES = {
         "type": "dimension",
         "value": "16px"
       },
+      "tracking-none": {
+        "type": "dimension",
+        "value": "0"
+      },
+      "tracking-wide": {
+        "type": "dimension",
+        "value": "0.06em",
+        "description": "Uppercase section headings."
+      },
+      "tracking-wider": {
+        "type": "dimension",
+        "value": "0.08em",
+        "description": "Uppercase at 11px and below."
+      },
       "z-toolbar": {
         "type": "number",
         "value": 10
@@ -345,6 +708,21 @@ var THEME_SOURCES = {
         "type": "number",
         "value": 30
       },
+      "leading-tight": {
+        "type": "number",
+        "value": 1,
+        "description": "Single-line controls; the box sets the height."
+      },
+      "leading-snug": {
+        "type": "number",
+        "value": 1.2,
+        "description": "Headings and two-line labels."
+      },
+      "leading": {
+        "type": "number",
+        "value": 1.4,
+        "description": "Body and anything that wraps."
+      },
       "backdrop": {
         "type": "gradient",
         "value": "none",
@@ -497,6 +875,16 @@ var THEME_SOURCES = {
           "type": "color",
           "value": "{color.gray-900}",
           "description": "Text drawn on a filled foreground-colored element (e.g. a slider thumb). Flips with the mode, so it is a semantic, not an alias to a primitive."
+        },
+        "shadow": {
+          "type": "color",
+          "value": "rgba(0, 0, 0, 0.6)",
+          "description": "Elevation. Always darker than any surface \u2014 never derived from fg, which is near-white on dark."
+        },
+        "border-raised": {
+          "type": "color",
+          "value": "{color.gray-400}",
+          "description": "The line around a raised surface. Clears 3:1 against surface and surface-raised in either mode, which the general-purpose border does not; over surface-sunken it does not, so a panel on a sunken field needs its own answer."
         }
       },
       "light": {
@@ -541,6 +929,14 @@ var THEME_SOURCES = {
           "type": "color",
           "value": "{color.gray-50}",
           "description": "Flips with the mode \u2014 see the dark layer."
+        },
+        "shadow": {
+          "type": "color",
+          "value": "rgba(0, 0, 0, 0.18)"
+        },
+        "border-raised": {
+          "type": "color",
+          "value": "{color.gray-400}"
         }
       }
     }
@@ -558,10 +954,10 @@ function hexToRgba(hex, alpha) {
   if (!m) throw new Error(`Expected a hex color, got "${hex}"`);
   const body = m[1];
   const full = body.length === 3 ? body.replace(/./g, (c) => c + c) : body;
-  const r = Number.parseInt(full.slice(0, 2), 16);
+  const r2 = Number.parseInt(full.slice(0, 2), 16);
   const g = Number.parseInt(full.slice(2, 4), 16);
   const b = Number.parseInt(full.slice(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  return `rgba(${r2}, ${g}, ${b}, ${alpha})`;
 }
 var REF = /^\{([^}]+)\}$/;
 function refTarget(value) {
@@ -573,7 +969,7 @@ function refTarget(value) {
   return dot === -1 ? path : path.slice(dot + 1);
 }
 function fontStack(value) {
-  return value.map((f) => typeof f === "string" && /\s/.test(f) ? `'${f}'` : String(f)).join(", ");
+  return value.map((f2) => typeof f2 === "string" && /\s/.test(f2) ? `'${f2}'` : String(f2)).join(", ");
 }
 function serialize(type, value) {
   if (Array.isArray(value)) {
@@ -780,7 +1176,9 @@ var interstellar_tokens_default = {
         "fg-subtle": { $value: "#5a5a78" },
         accent: { $value: "#b08adb" },
         "accent-hover": { $value: "#c6a3ee" },
-        "focus-ring": { $value: "rgba(176, 138, 219, 0.45)" }
+        "focus-ring": { $value: "rgba(176, 138, 219, 0.45)" },
+        shadow: { $value: "rgba(0, 0, 0, 0.7)" },
+        "border-raised": { $value: "rgba(255, 255, 255, 0.36)" }
       },
       gradient: {
         $type: "gradient",
@@ -802,7 +1200,9 @@ var interstellar_tokens_default = {
         "fg-subtle": { $value: "#a89b85" },
         accent: { $value: "#a86f3c" },
         "accent-hover": { $value: "#c2854f" },
-        "focus-ring": { $value: "rgba(168, 111, 60, 0.35)" }
+        "focus-ring": { $value: "rgba(168, 111, 60, 0.35)" },
+        shadow: { $value: "rgba(80, 60, 40, 0.18)" },
+        "border-raised": { $value: "#9e8b71" }
       }
     }
   }
@@ -835,13 +1235,13 @@ function useDragDrop({
   const [drag, setDrag] = useState(null);
   const dragRef = useRef(null);
   dragRef.current = drag;
-  const rafThrottle = useRef(null);
+  const pendingPos = useRef(null);
   const isOverCanvas = useCallback(
     (screenPos) => {
       const el = canvasContainerRef.current;
       if (!el) return false;
-      const r = el.getBoundingClientRect();
-      return screenPos.x >= r.left && screenPos.x <= r.right && screenPos.y >= r.top && screenPos.y <= r.bottom;
+      const r2 = el.getBoundingClientRect();
+      return screenPos.x >= r2.left && screenPos.x <= r2.right && screenPos.y >= r2.top && screenPos.y <= r2.bottom;
     },
     [canvasContainerRef]
   );
@@ -849,42 +1249,44 @@ function useDragDrop({
     (screenPos) => {
       const el = canvasContainerRef.current;
       if (!el) return null;
-      const r = el.getBoundingClientRect();
-      return screenToWorld({ x: screenPos.x - r.left, y: screenPos.y - r.top }, view);
+      const r2 = el.getBoundingClientRect();
+      return screenToWorld({ x: screenPos.x - r2.left, y: screenPos.y - r2.top }, view);
     },
     [canvasContainerRef, view]
   );
+  const frameLoop = useVisibleRaf(() => {
+    const screenPos = pendingPos.current;
+    pendingPos.current = null;
+    const active = dragRef.current;
+    if (!active || !screenPos) return;
+    let feedback = null;
+    if (capability.onDragOver && isOverCanvas(screenPos)) {
+      const world = screenToWorldFromContainer(screenPos);
+      if (world) feedback = capability.onDragOver(world, active.item, state, config);
+    }
+    setDrag({ ...active, screenPos, feedback });
+  });
   useEffect(() => {
     if (!drag) return;
     const handleMove = (e) => {
       const screenPos = { x: e.clientX, y: e.clientY };
       const current = dragRef.current;
       if (!current) return;
-      if (rafThrottle.current !== null) {
+      if (pendingPos.current !== null) {
+        pendingPos.current = screenPos;
         dragRef.current = { ...current, screenPos };
         setDrag(dragRef.current);
         return;
       }
-      rafThrottle.current = requestAnimationFrame(() => {
-        rafThrottle.current = null;
-        const active = dragRef.current;
-        if (!active) return;
-        let feedback = null;
-        if (capability.onDragOver && isOverCanvas(screenPos)) {
-          const world = screenToWorldFromContainer(screenPos);
-          if (world) feedback = capability.onDragOver(world, active.item, state, config);
-        }
-        setDrag({ ...active, screenPos, feedback });
-      });
+      pendingPos.current = screenPos;
+      frameLoop.request();
     };
     const handleUp = (e) => {
       const screenPos = { x: e.clientX, y: e.clientY };
       const active = dragRef.current;
       if (!active) return;
-      if (rafThrottle.current !== null) {
-        cancelAnimationFrame(rafThrottle.current);
-        rafThrottle.current = null;
-      }
+      pendingPos.current = null;
+      frameLoop.cancel();
       if (isOverCanvas(screenPos)) {
         const world = screenToWorldFromContainer(screenPos);
         if (world) {
@@ -901,7 +1303,17 @@ function useDragDrop({
       window.removeEventListener("pointermove", handleMove);
       window.removeEventListener("pointerup", handleUp);
     };
-  }, [drag, capability, state, config, setState, emit, isOverCanvas, screenToWorldFromContainer]);
+  }, [
+    drag,
+    capability,
+    state,
+    config,
+    setState,
+    emit,
+    frameLoop,
+    isOverCanvas,
+    screenToWorldFromContainer
+  ]);
   const startDrag = useCallback((item, originScreenPos) => {
     setDrag({ item, screenPos: originScreenPos, feedback: null });
   }, []);
@@ -926,119 +1338,51 @@ function Palette({ items, onDragStart, className }) {
     item.id
   )) });
 }
-var LabContext = createContext(null);
-function useLabContext() {
-  const ctx = useContext(LabContext);
-  if (ctx === null) {
-    throw new Error("useLabContext must be used inside <Lab>");
-  }
-  return ctx;
-}
-function DefaultSidebar({ ctx }) {
-  if (ctx.configFields.length === 0) {
-    return /* @__PURE__ */ jsx(Sidebar, { title: ctx.instrumentName, children: /* @__PURE__ */ jsxs("div", { className: "lk-sidebar__placeholder", children: [
-      ctx.instrumentName,
-      " has no config fields."
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(Sidebar, { title: ctx.instrumentName, children: /* @__PURE__ */ jsx(
-    ControlPanel,
-    {
-      fields: ctx.configFields,
-      config: ctx.config,
-      setConfig: (key, value) => ctx.setConfig(key, value)
-    }
-  ) });
-}
 
-// src/ui/format.ts
-var MINUS = "\u2212";
-function formatNumber(n, fractionDigits) {
-  if (!Number.isFinite(n)) return String(n);
-  const s = fractionDigits == null ? String(n) : n.toFixed(fractionDigits);
-  return s.startsWith("-") ? MINUS + s.slice(1) : s;
-}
-function parseSignedNumber(s) {
-  return Number(s.replace(MINUS, "-"));
+// src/state/view.ts
+var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
+function as2DView(view) {
+  if (typeof view !== "object" || view === null) return null;
+  const v = view;
+  if (typeof v.zoom !== "number") return null;
+  if (typeof v.pan !== "object" || v.pan === null) return null;
+  if (typeof v.pan.x !== "number" || typeof v.pan.y !== "number") return null;
+  return { zoom: v.zoom, pan: { x: v.pan.x, y: v.pan.y } };
 }
-function formatZoom(zoom) {
-  if (!Number.isFinite(zoom)) return String(zoom);
-  if (zoom <= 2) return `${formatNumber(Math.round(zoom * 100))}%`;
-  if (zoom >= 100) return `${Math.round(zoom).toLocaleString("en-US")}x`;
-  return `${formatNumber(Math.round(zoom * 10) / 10)}x`;
+var TrialDragContext = createContext(null);
+function useTrialDrag() {
+  return useContext(TrialDragContext);
 }
-function DefaultStatusBar({ ctx }) {
-  return /* @__PURE__ */ jsxs(StatusBar, { children: [
-    /* @__PURE__ */ jsx(StatusBar.Section, { children: ctx.instrumentName }),
-    /* @__PURE__ */ jsx(StatusBar.Section, { children: formatZoom(ctx.zoom) })
+function Draggable({ nodeId, title, children }) {
+  const handlers = useDragHandle(nodeId);
+  return /* @__PURE__ */ jsxs("div", { className: "lk-trial__titlebar lk-trial__titlebar--draggable", ...handlers, children: [
+    /* @__PURE__ */ jsx("span", { className: "lk-trial__title", children: title }),
+    children
   ] });
 }
-function DefaultToolbar({ ctx }) {
-  return /* @__PURE__ */ jsxs(Toolbar, { children: [
-    ctx.hasUndo && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.undo, disabled: !ctx.canUndo, title: "Undo (Cmd/Ctrl+Z)", children: "Undo" }),
-      /* @__PURE__ */ jsx(
-        Toolbar.Button,
-        {
-          onClick: ctx.redo,
-          disabled: !ctx.canRedo,
-          title: "Redo (Cmd/Ctrl+Shift+Z)",
-          children: "Redo"
-        }
-      ),
-      /* @__PURE__ */ jsx(Toolbar.Spacer, {})
-    ] }),
-    ctx.hasCanvas && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.zoomOut, title: "Zoom out", children: "\u2212" }),
-      /* @__PURE__ */ jsx("span", { className: "lk-toolbar__zoom-label", children: formatZoom(ctx.zoom) }),
-      /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.zoomIn, title: "Zoom in", children: "+" }),
-      /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.resetZoom, title: "Reset zoom", children: "1:1" }),
-      /* @__PURE__ */ jsx(Toolbar.Spacer, {})
-    ] }),
-    /* @__PURE__ */ jsx(Toolbar.Button, { onClick: () => ctx.saveSnapshot(), title: "Save snapshot (Cmd/Ctrl+S)", children: "Save" }),
-    ctx.savedSnapshots.length > 0 && /* @__PURE__ */ jsxs(
-      "select",
-      {
-        className: "lk-toolbar__load-select",
-        "aria-label": "Load snapshot",
-        defaultValue: "",
-        onChange: (e) => {
-          const id = e.target.value;
-          if (id) {
-            ctx.loadSnapshot(id);
-            e.target.value = "";
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Load\u2026" }),
-          ctx.savedSnapshots.map((sn) => /* @__PURE__ */ jsx("option", { value: sn.id, children: sn.name }, sn.id))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Toolbar.Spacer, {}),
-    /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.clone, title: "Clone trial", children: "Clone" }),
-    /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.reset, title: "Reset trial", children: "Reset" }),
-    /* @__PURE__ */ jsx(
-      Toolbar.Button,
-      {
-        onClick: ctx.close,
-        disabled: ctx.isLastTrial,
-        title: ctx.isLastTrial ? "Cannot close the last trial" : "Close trial",
-        children: "Close"
-      }
-    )
+function TrialTitleBar({ title, children }) {
+  const drag = useTrialDrag();
+  if (drag)
+    return /* @__PURE__ */ jsx(Draggable, { nodeId: drag.nodeId, title, children });
+  return /* @__PURE__ */ jsxs("div", { className: "lk-trial__titlebar", children: [
+    /* @__PURE__ */ jsx("span", { className: "lk-trial__title", children: title }),
+    children
   ] });
 }
+var NO_OP = () => {
+};
 function TrialChrome({
   trialId,
   record,
   instrument,
   isLastTrial,
-  toolbar,
-  sidebar,
-  statusBar,
   undoBindings,
-  sidebarExtras,
+  job,
+  trialChrome,
+  chrome,
+  suppress,
+  activeToolId = null,
+  setActiveTool = NO_OP,
   children
 }) {
   const lab = useLabContext();
@@ -1047,40 +1391,25 @@ function TrialChrome({
   const updateTrialView = useStore(storeCtx.store, (s) => s.updateTrialView);
   const updateTrialConfig = useStore(storeCtx.store, (s) => s.updateTrialConfig);
   const updateTrialState = useStore(storeCtx.store, (s) => s.updateTrialState);
-  const toolbarCtx = useMemo(() => {
+  const view2d = as2DView(record.view);
+  const configSchema = useConfigSchema(instrument);
+  const ctx = useMemo(() => {
     const setZoom = (z) => {
-      updateTrialView(trialId, { ...record.view, zoom: z });
+      if (!view2d) return;
+      updateTrialView(trialId, { ...view2d, zoom: z });
     };
     return {
       trialId,
       instrumentName: record.instrumentName,
-      hasUndo: instrument.undo != null,
+      isLastTrial,
+      zoom: view2d ? view2d.zoom : null,
+      setZoom,
       canUndo: undoBindings?.canUndo ?? false,
       canRedo: undoBindings?.canRedo ?? false,
-      undo: undoBindings?.undo ?? (() => {
-      }),
-      redo: undoBindings?.redo ?? (() => {
-      }),
-      zoom: record.view.zoom,
-      setZoom,
-      zoomIn: () => setZoom(record.view.zoom * 1.25),
-      zoomOut: () => setZoom(record.view.zoom * 0.8),
-      resetZoom: () => setZoom(1),
-      hasCanvas: instrument.canvas != null,
-      savedSnapshots: lab.savedSnapshots.filter((s) => s.trialId === trialId),
-      saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
-      loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
-      clone: () => lab.cloneTrial(trialId),
-      reset: () => lab.resetTrial(trialId),
-      close: () => lab.closeTrial(trialId),
-      isLastTrial
-    };
-  }, [trialId, record, instrument, lab, isLastTrial, updateTrialView, undoBindings]);
-  const sidebarCtx = useMemo(
-    () => ({
-      trialId,
-      instrumentName: record.instrumentName,
-      configFields: instrument.configSchema?.() ?? [],
+      undo: undoBindings?.undo ?? NO_OP,
+      redo: undoBindings?.redo ?? NO_OP,
+      configSchema,
+      configFields: instrument.config ? [] : instrument.configSchema?.() ?? [],
       config: record.config,
       setConfig: (key, value) => {
         const prevConfig = record.config;
@@ -1095,25 +1424,54 @@ function TrialChrome({
           const nextState = instrument.onConfigChange(nextConfig, prevConfig, record.state);
           updateTrialState(trialId, nextState);
         }
-      }
-    }),
-    [trialId, record, instrument, updateTrialConfig, updateTrialState]
-  );
-  const statusCtx = {
+      },
+      savedSnapshots: lab.savedSnapshots.filter((s) => s.trialId === trialId),
+      saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
+      loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
+      clone: () => lab.cloneTrial(trialId),
+      reset: () => lab.resetTrial(trialId),
+      close: () => lab.closeTrial(trialId),
+      activeToolId,
+      setActiveTool
+    };
+  }, [
     trialId,
-    instrumentName: record.instrumentName,
-    zoom: record.view.zoom
-  };
+    record,
+    instrument,
+    lab,
+    isLastTrial,
+    updateTrialView,
+    updateTrialConfig,
+    updateTrialState,
+    undoBindings,
+    view2d,
+    activeToolId,
+    setActiveTool,
+    configSchema
+  ]);
+  const contributions = useMemo(
+    () => suppressContributions(
+      mergeContributions(
+        builtinContributions(instrument, ctx, lab.controls),
+        [...instrument.chrome ?? []],
+        [...trialChrome ?? []],
+        [...chrome ?? []]
+      ),
+      suppress ?? []
+    ),
+    [instrument, ctx, trialChrome, chrome, suppress, lab.controls]
+  );
+  const inRegion = (region) => contributions.filter((c) => c.region === region);
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
     if (e.key === "z" || e.key === "Z") {
       e.preventDefault();
-      if (e.shiftKey) toolbarCtx.redo();
-      else toolbarCtx.undo();
+      if (e.shiftKey) ctx.redo();
+      else ctx.undo();
     } else if (e.key === "s" || e.key === "S") {
       e.preventDefault();
-      toolbarCtx.saveSnapshot();
+      ctx.saveSnapshot();
     }
   };
   return /* @__PURE__ */ jsxs(
@@ -1121,22 +1479,28 @@ function TrialChrome({
     {
       className: "lk-trial",
       "aria-label": `Trial ${record.instrumentName}`,
+      tabIndex: -1,
       onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "lk-trial__toolbar", children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(DefaultToolbar, { ctx: toolbarCtx }) }),
+        /* @__PURE__ */ jsx(TrialTitleBar, { title: record.instrumentName, children: /* @__PURE__ */ jsx(TitleBarRegion, { contributions: inRegion("titlebar"), ctx }) }),
+        /* @__PURE__ */ jsx("div", { className: "lk-trial__toolbar", children: /* @__PURE__ */ jsx(ToolbarRegion, { contributions: inRegion("toolbar"), ctx }) }),
         /* @__PURE__ */ jsxs("div", { className: "lk-trial__body", children: [
-          /* @__PURE__ */ jsxs("div", { className: "lk-trial__sidebar", children: [
-            sidebar ? sidebar(sidebarCtx) : /* @__PURE__ */ jsx(DefaultSidebar, { ctx: sidebarCtx }),
-            sidebarExtras
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "lk-trial__content", children })
+          /* @__PURE__ */ jsx(PaletteRegion, { contributions: inRegion("palette"), ctx }),
+          /* @__PURE__ */ jsx("div", { className: "lk-trial__sidebar", children: /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }) }),
+          /* @__PURE__ */ jsxs("div", { className: `lk-trial__content${instrument.canvas ? " lk-trial__content--flush" : ""}`, children: [
+            children,
+            /* @__PURE__ */ jsx(ViewportRegion, { contributions: inRegion("viewport"), ctx })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "lk-trial__status", children: statusBar ? statusBar(statusCtx) : /* @__PURE__ */ jsx(DefaultStatusBar, { ctx: statusCtx }) })
+        /* @__PURE__ */ jsxs("div", { className: "lk-trial__status", children: [
+          job ? /* @__PURE__ */ jsx(JobProgress, { job }) : null,
+          /* @__PURE__ */ jsx(StatusRegion, { contributions: inRegion("status"), ctx })
+        ] })
       ]
     }
   );
 }
-function Trial({ id }) {
+function Trial({ id, chrome, suppress }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] <Trial> requires <LabStoreProvider>");
@@ -1160,16 +1524,21 @@ function Trial({ id }) {
       record,
       instrument,
       store: storeCtx.store,
-      isLast: lab.trials.length <= 1
+      isLast: lab.trials.length <= 1,
+      chrome,
+      suppress
     }
   );
 }
-function TrialRuntime({ record, instrument, store, isLast }) {
+function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const canvasContainerRef = useRef(null);
   const updateTrialState = useStore(store, (s) => s.updateTrialState);
   const updateTrialConfig = useStore(store, (s) => s.updateTrialConfig);
   const updateTrialView = useStore(store, (s) => s.updateTrialView);
   const updateTrialUndoStack = useStore(store, (s) => s.updateTrialUndoStack);
+  const labToolId = useStore(store, (s) => s.activeToolId);
+  const setLabTool = useStore(store, (s) => s.setLabTool);
+  const setTrialTool = useStore(store, (s) => s.setTrialTool);
   const busRef = useRef(null);
   if (busRef.current === null) busRef.current = createEventBus();
   const bus = busRef.current;
@@ -1186,6 +1555,21 @@ function TrialRuntime({ record, instrument, store, isLast }) {
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
   const setView = (v) => updateTrialView(record.id, v);
+  const declaresTools = instrument.tools != null;
+  const resolvedToolId = declaresTools ? record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? null : labToolId;
+  const setActiveTool = (id) => {
+    if (declaresTools) setTrialTool(record.id, id);
+    else setLabTool(id);
+  };
+  const view2d = as2DView(record.view);
+  const jobCap = instrument.job;
+  const job = useJob({
+    capability: jobCap ?? { run: async function* () {
+    }, onItem: (_i, st) => st },
+    config: record.config,
+    state: record.state,
+    setState: (next) => updateTrialState(record.id, next)
+  });
   const renderCtx = {
     state: record.state,
     config: record.config,
@@ -1204,13 +1588,20 @@ function TrialRuntime({ record, instrument, store, isLast }) {
     },
     trial: {
       id: record.id,
-      zoom: record.view.zoom,
-      setZoom: (z) => updateTrialView(record.id, { ...record.view, zoom: z })
+      view: record.view,
+      setView,
+      zoom: view2d?.zoom ?? 1,
+      setZoom: (z) => {
+        if (!view2d) return;
+        updateTrialView(record.id, { ...view2d, zoom: z });
+      },
+      activeToolId: resolvedToolId
     },
     emit: (event) => {
       snapshotIfNeeded(event);
       bus.emit(event);
-    }
+    },
+    job: jobCap ? job : void 0
   };
   const undoBindings = undoCap ? {
     canUndo: record.undoStack.past.length > 0,
@@ -1244,12 +1635,12 @@ function TrialRuntime({ record, instrument, store, isLast }) {
   }, [instrument.canvas, record.state, record.config, layerVisibility, layerOrder]);
   const layerDescriptors = useMemo(() => {
     if (!instrument.layers) return [];
-    return instrument.layers.ids.map((lid) => ({ id: lid, label: lid }));
+    return instrument.layers.ids.map((l) => typeof l === "string" ? { id: l, label: l } : l);
   }, [instrument.layers]);
   const dragDropResult = useDragDrop({
     capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s) => s },
     canvasContainerRef,
-    view: record.view,
+    view: view2d ?? DEFAULT_VIEW,
     state: record.state,
     config: record.config,
     setState: (next) => {
@@ -1263,8 +1654,8 @@ function TrialRuntime({ record, instrument, store, isLast }) {
   });
   const paletteItems = useMemo(() => {
     if (!instrument.dragDrop) return [];
-    const p2 = instrument.dragDrop.palette;
-    return typeof p2 === "function" ? p2(record.state, record.config) : p2;
+    const p3 = instrument.dragDrop.palette;
+    return typeof p3 === "function" ? p3(record.state, record.config) : p3;
   }, [instrument.dragDrop, record.state, record.config]);
   const layersWithFeedback = useMemo(() => {
     if (!dragDropResult.drag?.feedback) return canvasLayers;
@@ -1278,12 +1669,12 @@ function TrialRuntime({ record, instrument, store, isLast }) {
         render: (ctx) => {
           const el = canvasContainerRef.current;
           if (!el) return;
-          const r = el.getBoundingClientRect();
+          const r2 = el.getBoundingClientRect();
           ctx.save();
           ctx.strokeStyle = fb.ok ? "#3a7" : "#c44";
           ctx.lineWidth = 2;
           ctx.beginPath();
-          ctx.arc(screen.x - r.left, screen.y - r.top, 16, 0, Math.PI * 2);
+          ctx.arc(screen.x - r2.left, screen.y - r2.top, 16, 0, Math.PI * 2);
           ctx.stroke();
           ctx.restore();
         }
@@ -1292,56 +1683,85 @@ function TrialRuntime({ record, instrument, store, isLast }) {
   }, [canvasLayers, dragDropResult.drag]);
   let body;
   if (instrument.canvas) {
-    body = /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: canvasContainerRef,
-        className: "lk-trial__canvas-host",
-        style: { width: "100%", height: "100%", position: "relative" },
-        children: [
-          /* @__PURE__ */ jsx(CanvasStack, { layers: layersWithFeedback, view: record.view, onViewChange: setView, children: instrument.render(renderCtx) }),
-          /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
-        ]
-      }
-    );
+    body = /* @__PURE__ */ jsxs("div", { ref: canvasContainerRef, className: "lk-trial__canvas-host", children: [
+      /* @__PURE__ */ jsx(
+        CanvasStack,
+        {
+          layers: layersWithFeedback,
+          view: view2d ?? DEFAULT_VIEW,
+          onViewChange: setView,
+          minZoom: instrument.canvas.minZoom,
+          maxZoom: instrument.canvas.maxZoom,
+          children: instrument.render(renderCtx)
+        }
+      ),
+      /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
+    ] });
   } else {
     body = instrument.render(renderCtx);
   }
-  const paletteNode = paletteItems.length > 0 ? /* @__PURE__ */ jsx(Palette, { items: paletteItems, onDragStart: dragDropResult.startDrag }) : null;
-  const layerListNode = instrument.layers && layerDescriptors.length > 0 ? /* @__PURE__ */ jsx(
-    LayerList,
-    {
-      layers: layerDescriptors,
-      visibility: layerVisibility,
-      onReorder: (next) => {
-        setLayerOrder(next.map((l) => l.id));
-        bus.emit("layers.reorder");
-      },
-      onToggle: (lid, visible) => {
-        setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
-        bus.emit("layers.toggle");
+  const startDrag = dragDropResult.startDrag;
+  const paletteNode = useMemo(
+    () => paletteItems.length > 0 ? /* @__PURE__ */ jsx(Palette, { items: paletteItems, onDragStart: startDrag }) : null,
+    [paletteItems, startDrag]
+  );
+  const layerListNode = useMemo(
+    () => instrument.layers && layerDescriptors.length > 0 ? /* @__PURE__ */ jsx(
+      LayerList,
+      {
+        layers: layerDescriptors,
+        visibility: layerVisibility,
+        onReorder: (next) => {
+          setLayerOrder(next.map((l) => l.id));
+          bus.emit("layers.reorder");
+        },
+        onToggle: (lid, visible) => {
+          setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
+          bus.emit("layers.toggle");
+        }
       }
+    ) : null,
+    [instrument.layers, layerDescriptors, layerVisibility, bus]
+  );
+  const extraChrome = useMemo(() => {
+    const out = [];
+    if (paletteNode) {
+      out.push({
+        id: "dragdrop-palette",
+        region: "sidebar",
+        item: { title: "Parts", body: paletteNode }
+      });
     }
-  ) : null;
+    if (layerListNode) {
+      out.push({
+        id: "layer-list",
+        region: "sidebar",
+        item: { title: "Layers", body: layerListNode }
+      });
+    }
+    return out;
+  }, [paletteNode, layerListNode]);
   return /* @__PURE__ */ jsx(
     TrialChrome,
     {
+      job: jobCap ? job : void 0,
       trialId: record.id,
       record,
       instrument,
       isLastTrial: isLast,
       undoBindings,
-      sidebarExtras: /* @__PURE__ */ jsxs(Fragment, { children: [
-        paletteNode,
-        layerListNode
-      ] }),
+      trialChrome: extraChrome,
+      chrome,
+      suppress,
+      activeToolId: resolvedToolId,
+      setActiveTool,
       children: body
     }
   );
 }
 
 // src/trial/trialOps.ts
-var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
+var DEFAULT_VIEW2 = { zoom: 1, pan: { x: 0, y: 0 } };
 function findInstrument(instruments, name) {
   const found = instruments.find((i) => i.name === name);
   if (!found) {
@@ -1350,7 +1770,7 @@ function findInstrument(instruments, name) {
   return found;
 }
 function initialView(instrument) {
-  return instrument.canvas?.initialView ? structuredClone(instrument.canvas.initialView) : { ...DEFAULT_VIEW, pan: { ...DEFAULT_VIEW.pan } };
+  return instrument.canvas?.initialView ? structuredClone(instrument.canvas.initialView) : { ...DEFAULT_VIEW2, pan: { ...DEFAULT_VIEW2.pan } };
 }
 function addTrial(trials, instruments, instrumentName) {
   const instrument = findInstrument(instruments, instrumentName);
@@ -1407,6 +1827,74 @@ function reorderTrials(trials, ids) {
   const rest = trials.filter((w) => !seen.has(w.id));
   return [...named, ...rest];
 }
+var MODES = [
+  { value: "auto", label: "Auto" },
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" }
+];
+function LabHeader() {
+  const lab = useLabContext();
+  const only = lab.instruments.length === 1 ? lab.instruments[0] : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    only ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "lk-lab-header__add",
+        onClick: () => lab.addTrial(only.name),
+        children: [
+          /* @__PURE__ */ jsx(vt, { size: 16 }),
+          /* @__PURE__ */ jsx("span", { children: "Add trial" })
+        ]
+      }
+    ) : (
+      // Held at null so the control stays an "add one" action rather than
+      // reading as the current instrument.
+      /* @__PURE__ */ jsx(
+        p2,
+        {
+          className: "lk-lab-header__add-select",
+          "aria-label": "Add trial",
+          placeholder: "Add trial\u2026",
+          selectedKey: null,
+          options: lab.instruments.map((i) => ({ value: i.name, label: i.name })),
+          onSelectionChange: (name) => {
+            if (name != null) lab.addTrial(String(name));
+          }
+        }
+      )
+    ),
+    /* @__PURE__ */ jsx(
+      r,
+      {
+        className: "lk-lab-header__mode",
+        ariaLabel: "Color mode",
+        items: MODES,
+        value: lab.mode,
+        onChange: (next) => {
+          if (next) lab.setMode(next);
+        }
+      }
+    )
+  ] });
+}
+function LabPalette({ tools }) {
+  const storeCtx = useContext(LabStoreContext);
+  if (!storeCtx) throw new Error("[labkit] LabPalette requires <LabStoreProvider>");
+  const activeToolId = useStore(storeCtx.store, (s) => s.activeToolId);
+  const setLabTool = useStore(storeCtx.store, (s) => s.setLabTool);
+  const contributions = tools.map((t) => ({
+    id: t.id,
+    region: "palette",
+    group: t.group,
+    item: { icon: t.icon, label: t.label, shortcut: t.shortcut }
+  }));
+  const ctx = {
+    activeToolId,
+    setActiveTool: setLabTool
+  };
+  return /* @__PURE__ */ jsx(PaletteRegion, { contributions, ctx });
+}
 function query() {
   if (typeof window === "undefined" || !window.matchMedia) return null;
   return window.matchMedia("(prefers-color-scheme: light)");
@@ -1442,11 +1930,11 @@ var ZONE_ID = asNodeId("lk-workspace");
 var STRATEGIES = { grid: gridStrategy };
 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 Workspace({
@@ -1481,6 +1969,7 @@ function Workspace({
     storeRef.current = store2;
   }
   const store = storeRef.current;
+  const surface = useSurfaceOptional();
   useLayoutEffect(() => {
     store.updateContainerConfig(ZONE_ID, { resizable, gap, padding });
   }, [store, resizable, gap, padding]);
@@ -1499,6 +1988,11 @@ function Workspace({
     }
     store.setChildOrder(ZONE_ID, [...nodeIds]);
   }, [store, nodeIds]);
+  useEffect(() => {
+    if (!surface) return;
+    surface.invalidateRects();
+    return store.events.on("node.placementChanged", () => surface.invalidateRects());
+  }, [store, surface, nodeIds]);
   useEffect(() => {
     if (!onLayoutChange) return;
     return store.events.on("node.placementChanged", () => {
@@ -1520,10 +2014,10 @@ function Workspace({
       [KIND]: ({ node }) => {
         const content = byId.get(node.id) ?? null;
         if (!reorderable) return content;
-        return /* @__PURE__ */ jsxs("div", { className: "lk-trial-tile", children: [
-          /* @__PURE__ */ jsx(DragHandle, { nodeId: node.id, className: "lk-trial-tile__grip", children: /* @__PURE__ */ jsx("span", { className: "lk-trial-tile__grip-dots", "aria-hidden": "true" }) }),
-          /* @__PURE__ */ jsx("div", { className: "lk-trial-tile__body", children: content })
-        ] });
+        return (
+          // No grip strip: the trial's own title bar is the drag surface.
+          /* @__PURE__ */ jsx(TrialDragContext.Provider, { value: { nodeId: node.id }, children: /* @__PURE__ */ jsx("div", { className: "lk-trial-tile", children: content }) })
+        );
       }
     };
   }, [nodeIds, items, reorderable]);
@@ -1561,8 +2055,8 @@ var NEBULA_SLOTS = [
 ];
 function buildNebula(colors) {
   const blobs = colors.map((c, i) => {
-    const p2 = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c} 22%, transparent), transparent ${p2.stop})`;
+    const p3 = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
+    return `radial-gradient(ellipse ${p3.sx} ${p3.sy} at ${p3.cx} ${p3.cy}, color-mix(in srgb, ${c} 22%, transparent), transparent ${p3.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
@@ -1575,6 +2069,12 @@ function Lab({
   mode,
   nebula,
   title,
+  footer,
+  chrome,
+  suppress,
+  tools,
+  configRules,
+  controls,
   children
 }) {
   if (process.env.NODE_ENV !== "production" && instruments.length === 0) {
@@ -1639,7 +2139,8 @@ function Lab({
       },
       savedSnapshots,
       saveSnapshot: (trialId, name) => {
-        store.getState().saveSnapshot(trialId, name ?? `Save ${(/* @__PURE__ */ new Date()).toLocaleString()}`);
+        const taken = store.getState().savedSnapshots.filter((s) => s.trialId === trialId).length;
+        store.getState().saveSnapshot(trialId, name ?? `Snapshot ${taken + 1}`);
       },
       loadSnapshot: (trialId, snapshotId) => {
         store.getState().loadSnapshot(snapshotId, trialId);
@@ -1650,9 +2151,11 @@ function Lab({
       mode: modeValue,
       setMode: (m) => {
         store.getState().setMode(m);
-      }
+      },
+      configRules,
+      controls
     };
-  }, [instruments, trials, savedSnapshots, modeValue, store]);
+  }, [instruments, trials, savedSnapshots, modeValue, store, configRules, controls]);
   const backdropStyle = resolvedMode === "dark" && nebula && nebula.length > 0 ? { ["--wzl-backdrop"]: buildNebula(nebula) } : void 0;
   return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     ThemeProvider,
@@ -1661,18 +2164,33 @@ function Lab({
       mode: resolvedMode,
       className: "lk-lab",
       style: backdropStyle,
-      children: /* @__PURE__ */ jsx(LabShell, { title: title ?? "Labkit", mode: modeValue, header: children, children: /* @__PURE__ */ jsx(
-        Workspace,
+      children: /* @__PURE__ */ jsx(
+        LabShell,
         {
-          ids: trials.map((w) => w.id),
-          resizable: true,
-          reorderable: true,
-          onReorder: (ids) => contextValue.reorderTrials(ids),
-          layout,
-          onLayoutChange: (next) => store.getState().setLayout(next),
-          children: trials.map((w) => /* @__PURE__ */ jsx(Trial, { id: w.id }, w.id))
+          title: title ?? "Labkit",
+          mode: modeValue,
+          footer,
+          header: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(LabHeader, {}),
+            children
+          ] }),
+          children: /* @__PURE__ */ jsxs("div", { className: "lk-lab__body", children: [
+            tools ? /* @__PURE__ */ jsx(LabPalette, { tools }) : null,
+            /* @__PURE__ */ jsx(
+              Workspace,
+              {
+                ids: trials.map((w) => w.id),
+                resizable: true,
+                reorderable: true,
+                onReorder: (ids) => contextValue.reorderTrials(ids),
+                layout,
+                onLayoutChange: (next) => store.getState().setLayout(next),
+                children: trials.map((w) => /* @__PURE__ */ jsx(Trial, { id: w.id, chrome, suppress }, w.id))
+              }
+            )
+          ] })
         }
-      ) })
+      )
     }
   ) }) });
 }
@@ -1717,7 +2235,7 @@ function CurveField({
     }
     flipped.sort((a, b) => a.x - b.x);
     const out = [];
-    for (const p2 of flipped) out.push(p2.x, p2.y);
+    for (const p3 of flipped) out.push(p3.x, p3.y);
     onChange(out);
   }, [values, onChange]);
   const handleFlipVertical = useCallback(() => {
@@ -2021,268 +2539,7 @@ function EffectCardList({
     ] }, String(item.id));
   }) });
 }
-function PropertyGroup({
-  title,
-  hidden,
-  children,
-  className,
-  pack = "auto-color"
-}) {
-  if (hidden) return null;
-  const packClass = pack === "pairs" ? " lk-property-group--pairs" : "";
-  const cls = `lk-property-group${packClass}${className ? ` ${className}` : ""}`;
-  return /* @__PURE__ */ jsxs("div", { className: cls, children: [
-    /* @__PURE__ */ jsxs("h3", { className: "lk-property-group__title", children: [
-      /* @__PURE__ */ jsx("hr", {}),
-      /* @__PURE__ */ jsx("span", { children: title }),
-      /* @__PURE__ */ jsx("hr", {})
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "lk-property-group__body", children })
-  ] });
-}
-function PropertyPanel({ title, children, className }) {
-  const cls = className ? `lk-property-panel ${className}` : "lk-property-panel";
-  return /* @__PURE__ */ jsxs("div", { className: cls, children: [
-    title != null && /* @__PURE__ */ jsx("h2", { className: "lk-property-panel__title", children: title }),
-    children
-  ] });
-}
-function PropertyList({ children, className, pack = "auto-color" }) {
-  const packClass = pack === "pairs" ? " lk-property-list--pairs" : "";
-  const cls = `lk-property-list${packClass}${className ? ` ${className}` : ""}`;
-  return /* @__PURE__ */ jsx("div", { className: cls, children });
-}
-function PropertyRow({
-  label,
-  readout,
-  variant = "default",
-  layout = "block",
-  children,
-  htmlFor,
-  className
-}) {
-  const variantClass = variant === "default" ? "" : ` lk-property-row--${variant}`;
-  const layoutClass = variant === "default" && layout === "inline" ? " lk-property-row--inline" : "";
-  const cls = `lk-property-row${variantClass}${layoutClass}${className ? ` ${className}` : ""}`;
-  return /* @__PURE__ */ jsxs("label", { className: cls, htmlFor, children: [
-    /* @__PURE__ */ jsxs("span", { className: "lk-property-row__label", children: [
-      label,
-      readout != null && /* @__PURE__ */ jsx("em", { className: "lk-property-row__readout", children: readout })
-    ] }),
-    children
-  ] });
-}
-function SliderRow({
-  label,
-  value,
-  min,
-  max,
-  step = 1,
-  onChange,
-  format,
-  unit,
-  layout
-}) {
-  const decimals = step >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(step))));
-  const effectiveFormat = format ?? ((n) => formatNumber(n, decimals));
-  return /* @__PURE__ */ jsx(
-    PropertyRow,
-    {
-      label,
-      readout: /* @__PURE__ */ jsx(
-        EditableReadout,
-        {
-          value,
-          min,
-          max,
-          format: effectiveFormat,
-          unit,
-          onCommit: onChange
-        }
-      ),
-      layout,
-      children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "range",
-          tabIndex: -1,
-          min,
-          max,
-          step,
-          value,
-          onChange: (e) => {
-            const v = Number(e.target.value);
-            p("property-panel", "slider", { label, value: v });
-            onChange(v);
-          }
-        }
-      )
-    }
-  );
-}
-function EditableReadout({ value, min, max, format, unit, onCommit }) {
-  const [draft, setDraft] = useState(null);
-  const fmt = (n) => format ? format(n) : formatNumber(n);
-  const displayValue = draft !== null ? draft : (() => {
-    const formatted = fmt(value);
-    return typeof formatted === "string" ? formatted : String(formatted);
-  })();
-  const suffix = unit == null ? null : typeof unit === "string" ? /* @__PURE__ */ jsx("span", { className: "lk-property-row__readout-unit", children: unit }) : unit;
-  const commit = () => {
-    if (draft !== null) {
-      const n = parseSignedNumber(draft);
-      if (Number.isFinite(n)) onCommit(Math.min(max, Math.max(min, n)));
-    }
-    setDraft(null);
-  };
-  return /* @__PURE__ */ jsxs("span", { className: "lk-property-row__readout-group", children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        inputMode: "decimal",
-        className: "lk-property-row__readout-input",
-        value: displayValue,
-        onFocus: (e) => {
-          const formatted = fmt(value);
-          setDraft(typeof formatted === "string" ? formatted : String(formatted));
-          e.currentTarget.select();
-        },
-        onChange: (e) => setDraft(e.target.value.replace(/-/g, "\u2212")),
-        onBlur: commit,
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          e.currentTarget.focus();
-        },
-        onMouseDown: (e) => e.stopPropagation(),
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            commit();
-            e.currentTarget.blur();
-          } else if (e.key === "Escape") {
-            setDraft(null);
-            e.currentTarget.blur();
-          }
-        }
-      }
-    ),
-    suffix
-  ] });
-}
-function ColorRow({
-  label,
-  value,
-  onChange,
-  alpha,
-  onAlphaChange,
-  alphaDisabled
-}) {
-  const showAlpha = alpha != null;
-  const className = alphaDisabled ? "lk-property-row--alpha-disabled" : void 0;
-  return /* @__PURE__ */ jsxs(PropertyRow, { label, variant: "color", className, children: [
-    /* @__PURE__ */ jsx("input", { type: "color", value, onChange: (e) => onChange(e.target.value) }),
-    showAlpha && /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "range",
-        className: "lk-property-row__alpha",
-        min: 0,
-        max: 1,
-        step: 0.01,
-        value: alpha,
-        disabled: alphaDisabled,
-        onChange: (e) => onAlphaChange?.(Number(e.target.value))
-      }
-    )
-  ] });
-}
-function CheckboxRow({ label, value, onChange }) {
-  return /* @__PURE__ */ jsx(PropertyRow, { label, variant: "checkbox", children: /* @__PURE__ */ jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked) }) });
-}
-function TextRow({ label, value, onChange, placeholder, maxLength, layout }) {
-  return /* @__PURE__ */ jsx(PropertyRow, { label, layout, children: /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "text",
-      value,
-      placeholder,
-      maxLength,
-      onChange: (e) => onChange(e.target.value)
-    }
-  ) });
-}
-function NumberRow({
-  label,
-  value,
-  onChange,
-  min,
-  max,
-  step,
-  placeholder,
-  layout
-}) {
-  return /* @__PURE__ */ jsx(PropertyRow, { label, layout, children: /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "number",
-      value,
-      min,
-      max,
-      step,
-      placeholder,
-      onChange: (e) => {
-        const raw = e.target.value;
-        if (raw === "") return;
-        const n = Number(raw);
-        if (Number.isFinite(n)) onChange(n);
-      }
-    }
-  ) });
-}
-function SelectRow({
-  label,
-  value,
-  options,
-  onChange,
-  layout
-}) {
-  return /* @__PURE__ */ jsx(PropertyRow, { label, layout, children: /* @__PURE__ */ jsx(
-    "select",
-    {
-      value,
-      onChange: (e) => {
-        const v = e.target.value;
-        p("property-panel", "select", { label, value: v });
-        onChange(v);
-      },
-      children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-    }
-  ) });
-}
-function ToggleRow({
-  label,
-  value,
-  options,
-  onChange,
-  layout
-}) {
-  return /* @__PURE__ */ jsx(PropertyRow, { label, layout, children: /* @__PURE__ */ jsx("div", { className: "lk-property-row__toggle", children: options.map((opt) => {
-    const selected = opt.value === value;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-pressed": selected,
-        className: selected ? "lk-property-row__toggle-button lk-property-row__toggle-button--selected" : "lk-property-row__toggle-button",
-        onClick: () => onChange(opt.value),
-        children: opt.label
-      },
-      opt.value
-    );
-  }) }) });
-}
 
-export { CheckboxRow, ColorRow, CurveField, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Lab, LabContext, LabShell, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SelectRow, SliderRow, Subpanel, TextRow, ToggleRow, Trial, TrialChrome, Workspace, addTrial, cloneTrial, closeTrial, defineInstrument, detectCapabilities, interstellarTheme, reorderTrials, resetTrial, useLabContext, validateConfigSchema };
+export { CurveField, DEFAULT_VIEW, EffectCard, EffectCardList, Lab, LabContext, LabPalette, LabShell, PITCH_LIMIT, Subpanel, Trial, TrialChrome, Workspace, addTrial, applyRules, as2DView, builtinRules, clampPitch, cloneTrial, closeTrial, defineInstrument, f, interstellarTheme, orbitAfterDrag, orbitAfterWheel, reorderTrials, resetTrial, resolveConfigSchema, titleCase, useConfigSchema, useLabContext, useOrbit, validateConfigSchema, wrapYaw };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map