@weasel-js/labkit 1.2.0 → 1.3.0

package/dist/index.js

@@ -1,29 +1,34 @@
-import { useSurfaceOptional } from './chunk-THBG7FQZ.js';
-export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface } from './chunk-THBG7FQZ.js';
+import { useDragDrop, DragOverlay, Palette } from './chunk-3XXPU73K.js';
+import { useSurfaceOptional } from './chunk-LGKRIUSW.js';
+export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface } from './chunk-LGKRIUSW.js';
 import { useJob } from './chunk-LN6JDUGB.js';
 export { useJob } from './chunk-LN6JDUGB.js';
-export { LayerStack } from './chunk-G5TJVQQT.js';
-import { p, F } from './chunk-73KA7WBO.js';
-import './chunk-BOHF3PQO.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-VUU5UXHE.js';
-export { CURRENT_DOCUMENT_VERSION, LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, createMemoryAdapter, labDocumentKey, localStorageAdapter, noneAdapter, quarantineKey, sessionStorageAdapter, urlHashAdapter, useLabStore, useTrialId, useTrialState } from './chunk-VUU5UXHE.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 { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, SidebarRegion, ViewportRegion, StatusRegion } from './chunk-6X5RBC6G.js';
+export { PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, mergeContributions, suppressContributions } from './chunk-6X5RBC6G.js';
+import { JobProgress } from './chunk-QRYPXSGP.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-QRYPXSGP.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-JDROYQM3.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-WTI26YTM.js';
+export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-WTI26YTM.js';
+import { CanvasStack } from './chunk-BDJXIBRZ.js';
+export { CanvasStack } from './chunk-BDJXIBRZ.js';
+export { screenToWorld, worldToScreen } from './chunk-T66HU3HX.js';
 export { CanvasStackContext } from './chunk-CPUJ3QXL.js';
-import { LayerList } from './chunk-SFL7NFKN.js';
-export { LayerList } from './chunk-SFL7NFKN.js';
-import { createEventBus, redo, undo, pushSnapshot } from './chunk-RL2LOLNI.js';
+import { LayerList } from './chunk-BMW4TDP5.js';
+export { LayerList } from './chunk-BMW4TDP5.js';
+import './chunk-SBXNQW4G.js';
+import { Rt, p, r } from './chunk-RGT4EJIB.js';
+export { k as CheckboxRow, O as ColorRow, m2 as CurveField, _2 as EffectCard, y as EffectCardList, c3 as LayerStack, j as NumberRow, b2 as PropertyGroup, S2 as PropertyList, x2 as PropertyPanel, w as PropertyRow, C as PropertySpan, M as SelectRow, E as SliderRow, g as Subpanel, A as TextRow, N as ToggleRow } from './chunk-RGT4EJIB.js';
+import './chunk-QCICIHEO.js';
+import { createEventBus, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
 export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
 import { createContext, useRef, useCallback, useContext, useMemo, useState, Children, useLayoutEffect, useEffect } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+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';
 
 var PITCH_LIMIT = Math.PI / 2 - 0.01;
 var YAW_PER_PX = 8e-3;
@@ -106,23 +111,260 @@ function useOrbit({
   return { onWheel, onPointerDown, onPointerMove, onPointerUp, onDoubleClick, isDragging };
 }
 
-// src/instrument/capabilityDetector.ts
-function detectCapabilities(instrument) {
-  return {
-    hasCanvas: instrument.canvas != null,
-    hasLayers: instrument.layers != null,
-    hasDragDrop: instrument.dragDrop != null,
-    hasUndo: instrument.undo != null
-  };
+// 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 [k2, v] of Object.entries(patch)) {
+      if (v !== void 0 && acc[k2] === void 0) {
+        acc[k2] = v;
+      }
+    }
+  }
+  return acc;
+}
+
+// src/config/resolve.ts
+function defined(annotations) {
+  const out = {};
+  for (const [k2, v] of Object.entries(annotations)) if (v !== void 0) out[k2] = 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();
@@ -137,10 +379,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`);
@@ -175,7 +413,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": {
@@ -361,6 +599,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"
@@ -378,29 +625,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",
@@ -418,6 +683,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
@@ -430,6 +709,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",
@@ -582,6 +876,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": {
@@ -626,6 +930,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}"
         }
       }
     }
@@ -639,26 +951,26 @@ var weaselTheme = {
   modes: THEME_SOURCES.weasel.modes
 };
 function hexToRgba(hex, alpha) {
-  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
-  if (!m) throw new Error(`Expected a hex color, got "${hex}"`);
-  const body = m[1];
-  const full = body.length === 3 ? body.replace(/./g, (c) => c + c) : body;
-  const r = 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})`;
+  const m2 = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m2) throw new Error(`Expected a hex color, got "${hex}"`);
+  const body = m2[1];
+  const full = body.length === 3 ? body.replace(/./g, (c2) => c2 + c2) : body;
+  const r2 = Number.parseInt(full.slice(0, 2), 16);
+  const g2 = Number.parseInt(full.slice(2, 4), 16);
+  const b2 = Number.parseInt(full.slice(4, 6), 16);
+  return `rgba(${r2}, ${g2}, ${b2}, ${alpha})`;
 }
 var REF = /^\{([^}]+)\}$/;
 function refTarget(value) {
   if (typeof value !== "string") return null;
-  const m = REF.exec(value.trim());
-  if (!m) return null;
-  const path = m[1];
+  const m2 = REF.exec(value.trim());
+  if (!m2) return null;
+  const path = m2[1];
   const dot = path.indexOf(".");
   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)) {
@@ -792,9 +1104,9 @@ function flattenTokens(doc) {
   for (const [groupName, group] of Object.entries(doc)) {
     if (groupName.startsWith("$")) continue;
     if (typeof group !== "object" || group === null) continue;
-    const g = group;
-    const groupType = g.$type;
-    for (const [leaf, node] of Object.entries(g)) {
+    const g2 = group;
+    const groupType = g2.$type;
+    for (const [leaf, node] of Object.entries(g2)) {
       if (leaf.startsWith("$")) continue;
       if (!isToken(node)) continue;
       const type = node.$type ?? groupType;
@@ -865,7 +1177,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",
@@ -887,7 +1201,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" }
       }
     }
   }
@@ -895,130 +1211,6 @@ var interstellar_tokens_default = {
 
 // src/theme/interstellar.ts
 var interstellarTheme = loadDTCG(interstellar_tokens_default);
-function DragGhost({ item, screenPos }) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  if (!mounted || typeof document === "undefined") return null;
-  const style = {
-    left: `${screenPos.x + 12}px`,
-    top: `${screenPos.y + 12}px`
-  };
-  return createPortal(
-    /* @__PURE__ */ jsx("div", { className: "lk-drag-ghost", style, children: /* @__PURE__ */ jsx("span", { className: "lk-drag-ghost__label", children: item.label }) }),
-    document.body
-  );
-}
-function useDragDrop({
-  capability,
-  canvasContainerRef,
-  view,
-  state,
-  config,
-  setState,
-  emit
-}) {
-  const [drag, setDrag] = useState(null);
-  const dragRef = useRef(null);
-  dragRef.current = drag;
-  const rafThrottle = 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;
-    },
-    [canvasContainerRef]
-  );
-  const screenToWorldFromContainer = useCallback(
-    (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);
-    },
-    [canvasContainerRef, view]
-  );
-  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) {
-        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 });
-      });
-    };
-    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;
-      }
-      if (isOverCanvas(screenPos)) {
-        const world = screenToWorldFromContainer(screenPos);
-        if (world) {
-          const nextState = capability.onDrop(world, active.item, state, config);
-          setState(nextState);
-          emit("canvas.itemAdded");
-        }
-      }
-      setDrag(null);
-    };
-    window.addEventListener("pointermove", handleMove);
-    window.addEventListener("pointerup", handleUp);
-    return () => {
-      window.removeEventListener("pointermove", handleMove);
-      window.removeEventListener("pointerup", handleUp);
-    };
-  }, [drag, capability, state, config, setState, emit, isOverCanvas, screenToWorldFromContainer]);
-  const startDrag = useCallback((item, originScreenPos) => {
-    setDrag({ item, screenPos: originScreenPos, feedback: null });
-  }, []);
-  return { drag, startDrag };
-}
-function DragOverlay({ drag }) {
-  if (!drag) return null;
-  return /* @__PURE__ */ jsx(DragGhost, { item: drag.item, screenPos: drag.screenPos });
-}
-function Palette({ items, onDragStart, className }) {
-  return /* @__PURE__ */ jsx("div", { className: className ? `lk-palette ${className}` : "lk-palette", children: items.map((item) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: "lk-palette__item",
-      onPointerDown: (e) => {
-        e.preventDefault();
-        onDragStart(item, { x: e.clientX, y: e.clientY });
-      },
-      children: /* @__PURE__ */ jsx("span", { className: "lk-palette__label", children: item.label })
-    },
-    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;
-}
 
 // src/state/view.ts
 var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
@@ -1030,112 +1222,40 @@ function as2DView(view) {
   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 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;
+var TrialDragContext = createContext(null);
+function useTrialDrag() {
+  return useContext(TrialDragContext);
 }
-function parseSignedNumber(s) {
-  return Number(s.replace(MINUS, "-"));
-}
-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`;
-}
-function DefaultStatusBar({ ctx }) {
-  return /* @__PURE__ */ jsxs(StatusBar, { children: [
-    /* @__PURE__ */ jsx(StatusBar.Section, { children: ctx.instrumentName }),
-    ctx.zoom === null ? null : /* @__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,
   job,
-  sidebarExtras,
+  trialChrome,
+  chrome,
+  suppress,
+  activeToolId = null,
+  setActiveTool = NO_OP,
   children
 }) {
   const lab = useLabContext();
@@ -1145,7 +1265,8 @@ function TrialChrome({
   const updateTrialConfig = useStore(storeCtx.store, (s) => s.updateTrialConfig);
   const updateTrialState = useStore(storeCtx.store, (s) => s.updateTrialState);
   const view2d = as2DView(record.view);
-  const toolbarCtx = useMemo(() => {
+  const configSchema = useConfigSchema(instrument);
+  const ctx = useMemo(() => {
     const setZoom = (z) => {
       if (!view2d) return;
       updateTrialView(trialId, { ...view2d, zoom: z });
@@ -1153,33 +1274,15 @@ function TrialChrome({
     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: view2d?.zoom ?? 1,
-      setZoom,
-      zoomIn: () => setZoom((view2d?.zoom ?? 1) * 1.25),
-      zoomOut: () => setZoom((view2d?.zoom ?? 1) * 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, view2d]);
-  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;
@@ -1194,25 +1297,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: view2d ? view2d.zoom : null
-  };
+    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((c2) => c2.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(
@@ -1220,40 +1352,32 @@ 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__ */ jsxs("div", { className: "lk-trial__status", children: [
-          job ? /* @__PURE__ */ jsxs("div", { className: "lk-trial__job", children: [
-            /* @__PURE__ */ jsxs("span", { className: "lk-trial__job-count", children: [
-              job.done,
-              job.total === null ? "" : ` / ${job.total}`
-            ] }),
-            job.failures.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "lk-trial__job-failures", children: [
-              job.failures.length,
-              " failed"
-            ] }) : null,
-            job.error ? /* @__PURE__ */ jsx("span", { className: "lk-trial__job-error", children: job.error }) : null,
-            job.status === "running" ? /* @__PURE__ */ jsx("button", { type: "button", className: "lk-trial__job-cancel", onClick: job.cancel, children: "Cancel" }) : null
-          ] }) : null,
-          statusBar ? statusBar(statusCtx) : /* @__PURE__ */ jsx(DefaultStatusBar, { ctx: statusCtx })
+          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>");
-  const record = useStore(storeCtx.store, (s) => s.trials.find((w) => w.id === id));
+  const record = useStore(storeCtx.store, (s) => s.trials.find((w2) => w2.id === id));
   if (!record) {
     return /* @__PURE__ */ jsxs("div", { className: "lk-trial lk-trial--unknown", children: [
       "Trial not found: ",
@@ -1273,16 +1397,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;
@@ -1293,12 +1422,18 @@ function TrialRuntime({ record, instrument, store, isLast }) {
   const maxDepth = undoCap?.maxDepth ?? 50;
   const snapshotIfNeeded = (event) => {
     if (!undoCap || !undoEvents.has(event)) return;
-    const current = store.getState().trials.find((w) => w.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 = (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({
@@ -1332,7 +1467,8 @@ function TrialRuntime({ record, instrument, store, isLast }) {
       setZoom: (z) => {
         if (!view2d) return;
         updateTrialView(record.id, { ...view2d, zoom: z });
-      }
+      },
+      activeToolId: resolvedToolId
     },
     emit: (event) => {
       snapshotIfNeeded(event);
@@ -1359,7 +1495,7 @@ function TrialRuntime({ record, instrument, store, isLast }) {
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
-    const ordered = layerOrder ? [...baseLayers].sort((a, b) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b.id)) : baseLayers;
+    const ordered = layerOrder ? [...baseLayers].sort((a, b2) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b2.id)) : baseLayers;
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
@@ -1372,7 +1508,7 @@ 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 },
@@ -1406,12 +1542,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();
         }
@@ -1420,45 +1556,64 @@ 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: view2d ?? DEFAULT_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,
     {
@@ -1468,10 +1623,11 @@ function TrialRuntime({ record, instrument, store, isLast }) {
       instrument,
       isLastTrial: isLast,
       undoBindings,
-      sidebarExtras: /* @__PURE__ */ jsxs(Fragment, { children: [
-        paletteNode,
-        layerListNode
-      ] }),
+      trialChrome: extraChrome,
+      chrome,
+      suppress,
+      activeToolId: resolvedToolId,
+      setActiveTool,
       children: body
     }
   );
@@ -1504,7 +1660,7 @@ function addTrial(trials, instruments, instrumentName) {
   return [...trials, record];
 }
 function cloneTrial(trials, id) {
-  const sourceIdx = trials.findIndex((w) => w.id === id);
+  const sourceIdx = trials.findIndex((w2) => w2.id === id);
   const source = trials[sourceIdx];
   if (!source) return trials;
   const clone = {
@@ -1519,11 +1675,11 @@ function cloneTrial(trials, id) {
 }
 function closeTrial(trials, id) {
   if (trials.length <= 1) return trials;
-  const next = trials.filter((w) => w.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((w) => w.id === id);
+  const idx = trials.findIndex((w2) => w2.id === id);
   const current = trials[idx];
   if (!current) return trials;
   const instrument = findInstrument(instruments, current.instrumentName);
@@ -1538,12 +1694,80 @@ function resetTrial(trials, id, instruments) {
   return [...trials.slice(0, idx), reset, ...trials.slice(idx + 1)];
 }
 function reorderTrials(trials, ids) {
-  const byId = new Map(trials.map((w) => [w.id, w]));
-  const named = ids.map((id) => byId.get(id)).filter((w) => w !== void 0);
-  const seen = new Set(named.map((w) => w.id));
-  const rest = trials.filter((w) => !seen.has(w.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];
 }
+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(Rt, { 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(
+        p,
+        {
+          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)");
@@ -1600,7 +1824,7 @@ function Workspace({
 }) {
   const items = Children.toArray(children);
   const idKey = ids ? ids.join(",") : `#${items.length}`;
-  const nodeIds = useMemo(() => items.map((_, i) => asNodeId(ids?.[i] ?? `lk-ws-${i}`)), [idKey]);
+  const nodeIds = useMemo(() => items.map((_2, i) => asNodeId(ids?.[i] ?? `lk-ws-${i}`)), [idKey]);
   const layoutRef = useRef(layout);
   layoutRef.current = layout;
   const onLayoutChangeRef = useRef(onLayoutChange);
@@ -1663,10 +1887,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]);
@@ -1703,9 +1927,9 @@ var NEBULA_SLOTS = [
   { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
 ];
 function buildNebula(colors) {
-  const blobs = colors.map((c, i) => {
+  const blobs = colors.map((c2, 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})`;
+    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c2} 22%, transparent), transparent ${p2.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
@@ -1718,6 +1942,12 @@ function Lab({
   mode,
   nebula,
   title,
+  footer,
+  chrome,
+  suppress,
+  tools,
+  configRules,
+  controls,
   children
 }) {
   if (process.env.NODE_ENV !== "production" && instruments.length === 0) {
@@ -1746,8 +1976,8 @@ function Lab({
   }, [mode, store]);
   const contextValue = useMemo(() => {
     const replaceTrials = (next) => {
-      const currentById = new Map(store.getState().trials.map((w) => [w.id, w]));
-      const merged = next.map((w) => currentById.get(w.id) ?? w);
+      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 });
       store.getState().setMode(store.getState().mode);
     };
@@ -1771,18 +2001,19 @@ function Lab({
       },
       resetTrial: (id) => {
         const next = resetTrial(store.getState().trials, id, instruments);
-        const record = next.find((w) => w.id === id);
+        const record = next.find((w2) => w2.id === id);
         if (!record) return;
         store.setState((s) => ({
           trials: s.trials.map(
-            (w) => w.id === id ? { ...w, config: record.config, state: record.state, view: record.view } : w
+            (w2) => w2.id === id ? { ...w2, config: record.config, state: record.state, view: record.view } : w2
           )
         }));
         store.getState().updateTrialView(id, record.view);
       },
       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);
@@ -1791,11 +2022,13 @@ function Lab({
         store.getState().deleteSnapshot(snapshotId);
       },
       mode: modeValue,
-      setMode: (m) => {
-        store.getState().setMode(m);
-      }
+      setMode: (m2) => {
+        store.getState().setMode(m2);
+      },
+      configRules,
+      controls
     };
-  }, [instruments, trials, savedSnapshots, modeValue, store]);
+  }, [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,
@@ -1804,628 +2037,37 @@ function Lab({
       mode: resolvedMode,
       className: "lk-lab",
       style: backdropStyle,
-      children: /* @__PURE__ */ jsx(LabShell, { title: title ?? "Labkit", mode: modeValue, header: children, children: /* @__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 }, w.id))
-        }
-      ) })
-    }
-  ) }) });
-}
-function CurveField({
-  values,
-  min,
-  max,
-  step,
-  width,
-  height = 110,
-  defaults,
-  onChange,
-  marks
-}) {
-  const points = useMemo(() => {
-    const out = [];
-    for (let i = 0; i + 1 < values.length; i += 2) out.push({ x: values[i], y: values[i + 1] });
-    return out;
-  }, [values]);
-  const handleChange = useCallback(
-    (next) => {
-      const flat = new Array(next.length * 2);
-      for (let i = 0; i < next.length; i++) {
-        const ySnap = Math.round(next[i].y / step) * step;
-        const y = Math.max(min, Math.min(max, ySnap));
-        flat[i * 2] = next[i].x;
-        flat[i * 2 + 1] = y;
-      }
-      p("curve-field", "handleChange", {
-        nLen: next.length,
-        flatLen: flat.length,
-        sample: flat.slice(0, 4)
-      });
-      onChange(flat);
-    },
-    [onChange, min, max, step]
-  );
-  const handleFlip = useCallback(() => {
-    const flipped = [];
-    for (let i = 0; i + 1 < values.length; i += 2) {
-      flipped.push({ x: 1 - values[i], y: values[i + 1] });
-    }
-    flipped.sort((a, b) => a.x - b.x);
-    const out = [];
-    for (const p2 of flipped) out.push(p2.x, p2.y);
-    onChange(out);
-  }, [values, onChange]);
-  const handleFlipVertical = useCallback(() => {
-    const mid = (min + max) / 2;
-    const flipped = new Array(values.length);
-    for (let i = 0; i + 1 < values.length; i += 2) {
-      flipped[i] = values[i];
-      flipped[i + 1] = 2 * mid - values[i + 1];
-    }
-    onChange(flipped);
-  }, [values, min, max, onChange]);
-  return /* @__PURE__ */ jsxs("div", { className: "lk-curve-field", children: [
-    /* @__PURE__ */ jsxs("div", { className: "lk-curve-field__plot", children: [
-      /* @__PURE__ */ jsx(
-        F,
-        {
-          value: points,
-          onInput: handleChange,
-          domain: "1d",
-          constrain: "function",
-          xRange: [0, 1],
-          yRange: [min, max],
-          width,
-          height,
-          endpoints: "pinned-x",
-          addPointMode: "click-curve",
-          minPoints: 2,
-          grid: {},
-          history: false
-        }
-      ),
-      marks && marks.length > 0 && /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "lk-curve-field__marks",
-          width,
-          height,
-          viewBox: `0 0 ${width} ${height}`,
-          "aria-hidden": "true",
-          children: marks.map((m) => {
-            const color = m.color ?? "#ffcc00";
-            if (m.kind === "band") {
-              const x0 = Math.max(0, Math.min(1, m.x[0])) * width;
-              const x1 = Math.max(0, Math.min(1, m.x[1])) * width;
-              const left = Math.min(x0, x1);
-              const w = Math.abs(x1 - x0);
-              return /* @__PURE__ */ jsxs("g", { children: [
-                /* @__PURE__ */ jsx("rect", { x: left, y: 0, width: w, height, fill: color, fillOpacity: 0.4 }),
-                /* @__PURE__ */ jsx(
-                  "line",
-                  {
-                    x1: left,
-                    y1: 0,
-                    x2: left,
-                    y2: height,
-                    stroke: color,
-                    strokeOpacity: 0.85,
-                    strokeWidth: 1
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "line",
-                  {
-                    x1: left + w,
-                    y1: 0,
-                    x2: left + w,
-                    y2: height,
-                    stroke: color,
-                    strokeOpacity: 0.85,
-                    strokeWidth: 1
-                  }
-                )
-              ] }, `band-${m.x[0]}-${m.x[1]}-${color}`);
-            }
-            const x = Math.max(0, Math.min(1, m.x)) * width;
-            return /* @__PURE__ */ jsx(
-              "line",
-              {
-                x1: x,
-                y1: 0,
-                x2: x,
-                y2: height,
-                stroke: color,
-                strokeWidth: 1
-              },
-              `mark-${m.x}-${color}`
-            );
-          })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "lk-curve-field__actions", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: "lk-curve-field__action", onClick: handleFlip, children: "Flip horizontally" }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "lk-curve-field__action", onClick: handleFlipVertical, children: "Flip vertically" }),
-      defaults && /* @__PURE__ */ jsx(
-        "button",
+      children: /* @__PURE__ */ jsx(
+        LabShell,
         {
-          type: "button",
-          className: "lk-curve-field__action",
-          onClick: () => onChange([...defaults]),
-          children: "Reset"
-        }
-      )
-    ] })
-  ] });
-}
-function Subpanel({ title, children, className }) {
-  const cls = className ? `lk-subpanel ${className}` : "lk-subpanel";
-  return /* @__PURE__ */ jsxs("div", { className: cls, children: [
-    /* @__PURE__ */ jsxs("h4", { className: "lk-subpanel__title", children: [
-      /* @__PURE__ */ jsx("span", { children: title }),
-      /* @__PURE__ */ jsx("hr", {})
-    ] }),
-    children
-  ] });
-}
-function EffectCard({
-  title,
-  primary,
-  accent,
-  index,
-  expanded = true,
-  onToggleExpanded,
-  onRemove,
-  draggable,
-  onPressHandle,
-  onReleaseHandle,
-  onDragStart,
-  onDragEnd,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  dragging,
-  children,
-  className
-}) {
-  const stateClass = `${expanded ? "is-expanded" : "is-collapsed"}${dragging ? " is-dragging" : ""}${accent ? " has-accent" : ""}`;
-  const cls = `lk-effect-card ${stateClass}${className ? ` ${className}` : ""}`;
-  const style = accent ? { "--lk-panel-accent": accent } : void 0;
-  const headProps = onToggleExpanded ? {
-    role: "button",
-    tabIndex: 0,
-    onClick: onToggleExpanded,
-    onKeyDown: (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        onToggleExpanded();
-      }
-    }
-  } : {};
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: native HTML5 drag-and-drop container — drag events are not click/keyboard interactions and have no semantic element; the in-card handle and header carry the a11y affordances.
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cls,
-        style,
-        draggable,
-        onDragStart,
-        onDragEnd,
-        onDragOver,
-        onDragLeave,
-        onDrop,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "lk-effect-card__head", ...headProps, children: [
-            index != null ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "lk-effect-card__index-badge lk-effect-card__handle",
-                title: "Drag to reorder \xB7 click to toggle",
-                "aria-label": `Item ${index + 1} \u2014 drag to reorder, click to toggle`,
-                onMouseDown: onPressHandle,
-                onMouseUp: onReleaseHandle,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onToggleExpanded?.();
-                },
-                children: index + 1
-              }
-            ) : /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "lk-effect-card__handle",
-                "aria-hidden": "true",
-                title: "Drag to reorder",
-                onMouseDown: onPressHandle,
-                onMouseUp: onReleaseHandle,
-                children: /* @__PURE__ */ jsx(DragHandleIcon, {})
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "lk-effect-card__title", children: title }),
-            primary != null && /* @__PURE__ */ jsx("span", { className: "lk-effect-card__primary", children: primary }),
-            onRemove && /* @__PURE__ */ jsx(
-              "button",
+          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,
               {
-                type: "button",
-                className: "lk-effect-card__remove",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onRemove();
-                },
-                title: "Remove",
-                "aria-label": "Remove",
-                children: "\u2715"
+                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((w2) => /* @__PURE__ */ jsx(Trial, { id: w2.id, chrome, suppress }, w2.id))
               }
             )
-          ] }),
-          expanded && /* @__PURE__ */ jsx("div", { className: "lk-effect-card__body", children })
-        ]
-      }
-    )
-  );
-}
-function DragHandleIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "10", height: "14", viewBox: "0 0 10 14", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "3", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "7", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "11", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "11", r: "1.3", fill: "currentColor" })
-  ] });
-}
-function EffectCardList({
-  items,
-  renderItem,
-  onReorder,
-  empty,
-  defaultExpandedIds
-}) {
-  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedIds ?? []));
-  const [draggingId, setDraggingId] = useState(null);
-  const [pressedId, setPressedId] = useState(null);
-  const [dropHint, setDropHint] = useState(
-    null
-  );
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: empty ?? /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list__empty", children: "No items." }) });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list", children: items.map((item) => {
-    const isExpanded = expanded.has(item.id);
-    const isDragging = draggingId === item.id;
-    const isPressed = pressedId === item.id;
-    const showHintBefore = dropHint && dropHint.id === item.id && dropHint.position === "before";
-    const showHintAfter = dropHint && dropHint.id === item.id && dropHint.position === "after";
-    const toggleExpanded = () => setExpanded((prev) => {
-      const next = new Set(prev);
-      if (next.has(item.id)) next.delete(item.id);
-      else next.add(item.id);
-      return next;
-    });
-    return /* @__PURE__ */ jsxs("div", { className: "lk-effect-card-list__wrap", children: [
-      showHintBefore && /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list__drop-hint" }),
-      renderItem(item, {
-        isExpanded,
-        isDragging,
-        toggleExpanded,
-        cardProps: {
-          expanded: isExpanded,
-          dragging: isDragging,
-          draggable: isPressed,
-          onToggleExpanded: toggleExpanded,
-          onPressHandle: () => setPressedId(item.id),
-          onReleaseHandle: () => setPressedId(null),
-          onDragStart: (e) => {
-            e.dataTransfer.effectAllowed = "move";
-            e.dataTransfer.setData("text/plain", String(item.id));
-            setDraggingId(item.id);
-          },
-          onDragEnd: () => {
-            setDraggingId(null);
-            setPressedId(null);
-            setDropHint(null);
-          },
-          onDragOver: (e) => {
-            if (draggingId === null || draggingId === item.id) return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = "move";
-            const rect = e.currentTarget.getBoundingClientRect();
-            const position = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
-            setDropHint({ id: item.id, position });
-          },
-          onDragLeave: () => {
-            setDropHint((h) => h && h.id === item.id ? null : h);
-          },
-          onDrop: (e) => {
-            e.preventDefault();
-            if (draggingId === null || draggingId === item.id) {
-              setDropHint(null);
-              return;
-            }
-            const rect = e.currentTarget.getBoundingClientRect();
-            const position = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
-            onReorder(draggingId, item.id, position);
-            setDropHint(null);
-          }
-        }
-      }),
-      showHintAfter && /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list__drop-hint" })
-    ] }, 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, DEFAULT_VIEW, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Lab, LabContext, LabShell, NumberRow, PITCH_LIMIT, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SelectRow, SliderRow, Subpanel, TextRow, ToggleRow, Trial, TrialChrome, Workspace, addTrial, as2DView, clampPitch, cloneTrial, closeTrial, defineInstrument, detectCapabilities, interstellarTheme, orbitAfterDrag, orbitAfterWheel, reorderTrials, resetTrial, useLabContext, useOrbit, validateConfigSchema, wrapYaw };
+export { DEFAULT_VIEW, Lab, LabContext, LabPalette, LabShell, PITCH_LIMIT, 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