@weasel-js/labkit 1.0.4 → 1.2.0

package/dist/index.js

@@ -1,10 +1,14 @@
-export { LayerStack } from './chunk-DEWXYFEU.js';
-import { p, F } from './chunk-BAPZPDDA.js';
-import './chunk-DWV7SFKR.js';
+import { useSurfaceOptional } from './chunk-THBG7FQZ.js';
+export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface } from './chunk-THBG7FQZ.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-KSTEW2AF.js';
-export { LabStoreContext, LabStoreProvider, WorkspaceIdContext, WorkspaceIdProvider, createMemoryAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, useExperimentState, useLabStore, useWorkspaceId } from './chunk-KSTEW2AF.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';
@@ -14,13 +18,94 @@ import { LayerList } from './chunk-SFL7NFKN.js';
 export { LayerList } from './chunk-SFL7NFKN.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 { createContext, useRef, useCallback, useContext, useMemo, useState, Children, useLayoutEffect, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useStore } from 'zustand/react';
 import { createPortal } from 'react-dom';
 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;
+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 {
+    ...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/instrument/capabilityDetector.ts
 function detectCapabilities(instrument) {
   return {
@@ -90,7 +175,7 @@ function validateConfigSchema(fields) {
   return { valid: errors.length === 0, errors };
 }
 
-// ../theme/dist/chunk-STFENPNX.js
+// ../theme/dist/chunk-E3FOFGMD.js
 var THEME_SOURCES = {
   "weasel": {
     "primitives": {
@@ -630,19 +715,20 @@ function resolveTheme(theme, mode) {
   return out;
 }
 var STYLE_ID = "wzl-themes";
-var emitted = /* @__PURE__ */ new Set();
+var emitted = /* @__PURE__ */ new Map();
 var sheet = null;
 var styleEl = null;
 function canAdopt() {
   return typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype && Array.isArray(document.adoptedStyleSheets);
 }
-function appendRule(css) {
+function flushRules() {
+  const css = [...emitted.values()].join("\n");
   if (canAdopt()) {
     if (!sheet) {
       sheet = new CSSStyleSheet();
       document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
     }
-    sheet.insertRule(css, sheet.cssRules.length);
+    sheet.replaceSync(css);
     return;
   }
   if (!styleEl) {
@@ -650,17 +736,17 @@ function appendRule(css) {
     styleEl.id = STYLE_ID;
     document.head.appendChild(styleEl);
   }
-  styleEl.textContent += `${css}
-`;
+  styleEl.textContent = css;
 }
 function applyTheme(el, theme, mode) {
   if (typeof document === "undefined") return;
   const key = `${theme.name}::${mode}`;
-  if (!emitted.has(key)) {
-    const resolved = resolveTheme(theme, mode);
-    const body = Object.entries(resolved).map(([name, value]) => `${name}: ${value};`).join(" ");
-    appendRule(`[data-wzl-theme='${theme.name}'][data-wzl-mode='${mode}'] { ${body} }`);
-    emitted.add(key);
+  const resolved = resolveTheme(theme, mode);
+  const body = Object.entries(resolved).map(([name, value]) => `${name}: ${value};`).join(" ");
+  const rule = `[data-wzl-theme='${theme.name}'][data-wzl-mode='${mode}'] { ${body} }`;
+  if (emitted.get(key) !== rule) {
+    emitted.set(key, rule);
+    flushRules();
   }
   el.setAttribute("data-wzl-theme", theme.name);
   el.setAttribute("data-wzl-mode", mode);
@@ -933,6 +1019,17 @@ function useLabContext() {
   }
   return ctx;
 }
+
+// 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 DefaultSidebar({ ctx }) {
   if (ctx.configFields.length === 0) {
     return /* @__PURE__ */ jsx(Sidebar, { title: ctx.instrumentName, children: /* @__PURE__ */ jsxs("div", { className: "lk-sidebar__placeholder", children: [
@@ -949,13 +1046,27 @@ function DefaultSidebar({ ctx }) {
     }
   ) });
 }
+
+// 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, "-"));
+}
+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 }),
-    /* @__PURE__ */ jsxs(StatusBar.Section, { children: [
-      Math.round(ctx.zoom * 100),
-      "%"
-    ] })
+    ctx.zoom === null ? null : /* @__PURE__ */ jsx(StatusBar.Section, { children: formatZoom(ctx.zoom) })
   ] });
 }
 function DefaultToolbar({ ctx }) {
@@ -975,10 +1086,7 @@ function DefaultToolbar({ ctx }) {
     ] }),
     ctx.hasCanvas && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.zoomOut, title: "Zoom out", children: "\u2212" }),
-      /* @__PURE__ */ jsxs("span", { className: "lk-toolbar__zoom-label", children: [
-        Math.round(ctx.zoom * 100),
-        "%"
-      ] }),
+      /* @__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, {})
@@ -1004,43 +1112,46 @@ function DefaultToolbar({ ctx }) {
       }
     ),
     /* @__PURE__ */ jsx(Toolbar.Spacer, {}),
-    /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.clone, title: "Clone workspace", children: "Clone" }),
-    /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.reset, title: "Reset workspace", children: "Reset" }),
+    /* @__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.isLastWorkspace,
-        title: ctx.isLastWorkspace ? "Cannot close the last workspace" : "Close workspace",
+        disabled: ctx.isLastTrial,
+        title: ctx.isLastTrial ? "Cannot close the last trial" : "Close trial",
         children: "Close"
       }
     )
   ] });
 }
-function WorkspaceChrome({
-  workspaceId,
+function TrialChrome({
+  trialId,
   record,
   instrument,
-  isLastWorkspace,
+  isLastTrial,
   toolbar,
   sidebar,
   statusBar,
   undoBindings,
+  job,
   sidebarExtras,
   children
 }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
-  if (!storeCtx) throw new Error("[labkit] WorkspaceChrome requires <LabStoreProvider>");
-  const updateWorkspaceView = useStore(storeCtx.store, (s) => s.updateWorkspaceView);
-  const updateWorkspaceConfig = useStore(storeCtx.store, (s) => s.updateWorkspaceConfig);
-  const updateWorkspaceState = useStore(storeCtx.store, (s) => s.updateWorkspaceState);
+  if (!storeCtx) throw new Error("[labkit] TrialChrome requires <LabStoreProvider>");
+  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 view2d = as2DView(record.view);
   const toolbarCtx = useMemo(() => {
     const setZoom = (z) => {
-      updateWorkspaceView(workspaceId, { ...record.view, zoom: z });
+      if (!view2d) return;
+      updateTrialView(trialId, { ...view2d, zoom: z });
     };
     return {
-      workspaceId,
+      trialId,
       instrumentName: record.instrumentName,
       hasUndo: instrument.undo != null,
       canUndo: undoBindings?.canUndo ?? false,
@@ -1049,24 +1160,24 @@ function WorkspaceChrome({
       }),
       redo: undoBindings?.redo ?? (() => {
       }),
-      zoom: record.view.zoom,
+      zoom: view2d?.zoom ?? 1,
       setZoom,
-      zoomIn: () => setZoom(record.view.zoom * 1.25),
-      zoomOut: () => setZoom(record.view.zoom * 0.8),
+      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.workspaceId === workspaceId),
-      saveSnapshot: (name) => lab.saveSnapshot(workspaceId, name),
-      loadSnapshot: (snapshotId) => lab.loadSnapshot(workspaceId, snapshotId),
-      clone: () => lab.cloneWorkspace(workspaceId),
-      reset: () => lab.resetWorkspace(workspaceId),
-      close: () => lab.closeWorkspace(workspaceId),
-      isLastWorkspace
+      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
     };
-  }, [workspaceId, record, instrument, lab, isLastWorkspace, updateWorkspaceView, undoBindings]);
+  }, [trialId, record, instrument, lab, isLastTrial, updateTrialView, undoBindings, view2d]);
   const sidebarCtx = useMemo(
     () => ({
-      workspaceId,
+      trialId,
       instrumentName: record.instrumentName,
       configFields: instrument.configSchema?.() ?? [],
       config: record.config,
@@ -1077,20 +1188,20 @@ function WorkspaceChrome({
             `[labkit] setConfig: unknown key "${key}" for instrument "${record.instrumentName}"`
           );
         }
-        updateWorkspaceConfig(workspaceId, key, value);
+        updateTrialConfig(trialId, key, value);
         if (instrument.onConfigChange) {
           const nextConfig = { ...prevConfig, [key]: value };
           const nextState = instrument.onConfigChange(nextConfig, prevConfig, record.state);
-          updateWorkspaceState(workspaceId, nextState);
+          updateTrialState(trialId, nextState);
         }
       }
     }),
-    [workspaceId, record, instrument, updateWorkspaceConfig, updateWorkspaceState]
+    [trialId, record, instrument, updateTrialConfig, updateTrialState]
   );
   const statusCtx = {
-    workspaceId,
+    trialId,
     instrumentName: record.instrumentName,
-    zoom: record.view.zoom
+    zoom: view2d ? view2d.zoom : null
   };
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
@@ -1107,57 +1218,71 @@ function WorkspaceChrome({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: "lk-workspace",
-      "aria-label": `Workspace ${record.instrumentName}`,
+      className: "lk-trial",
+      "aria-label": `Trial ${record.instrumentName}`,
       onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "lk-workspace__toolbar", children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(DefaultToolbar, { ctx: toolbarCtx }) }),
-        /* @__PURE__ */ jsxs("div", { className: "lk-workspace__body", children: [
-          /* @__PURE__ */ jsxs("div", { className: "lk-workspace__sidebar", children: [
+        /* @__PURE__ */ jsx("div", { className: "lk-trial__toolbar", children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(DefaultToolbar, { ctx: toolbarCtx }) }),
+        /* @__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-workspace__content", children })
+          /* @__PURE__ */ jsx("div", { className: "lk-trial__content", children })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "lk-workspace__status", children: statusBar ? statusBar(statusCtx) : /* @__PURE__ */ jsx(DefaultStatusBar, { ctx: statusCtx }) })
+        /* @__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 })
+        ] })
       ]
     }
   );
 }
-function Workspace({ id }) {
+function Trial({ id }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
-  if (!storeCtx) throw new Error("[labkit] <Workspace> requires <LabStoreProvider>");
-  const record = useStore(storeCtx.store, (s) => s.workspaces.find((w) => w.id === id));
+  if (!storeCtx) throw new Error("[labkit] <Trial> requires <LabStoreProvider>");
+  const record = useStore(storeCtx.store, (s) => s.trials.find((w) => w.id === id));
   if (!record) {
-    return /* @__PURE__ */ jsxs("div", { className: "lk-workspace lk-workspace--unknown", children: [
-      "Workspace not found: ",
+    return /* @__PURE__ */ jsxs("div", { className: "lk-trial lk-trial--unknown", children: [
+      "Trial not found: ",
       id
     ] });
   }
   const instrument = lab.instruments.find((i) => i.name === record.instrumentName);
   if (!instrument) {
-    return /* @__PURE__ */ jsxs("div", { className: "lk-workspace lk-workspace--unknown", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "lk-trial lk-trial--unknown", children: [
       "Unknown instrument: ",
       record.instrumentName
     ] });
   }
   return /* @__PURE__ */ jsx(
-    WorkspaceRuntime,
+    TrialRuntime,
     {
       record,
       instrument,
       store: storeCtx.store,
-      isLast: lab.workspaces.length <= 1
+      isLast: lab.trials.length <= 1
     }
   );
 }
-function WorkspaceRuntime({ record, instrument, store, isLast }) {
+function TrialRuntime({ record, instrument, store, isLast }) {
   const canvasContainerRef = useRef(null);
-  const updateWorkspaceState = useStore(store, (s) => s.updateWorkspaceState);
-  const updateWorkspaceConfig = useStore(store, (s) => s.updateWorkspaceConfig);
-  const updateWorkspaceView = useStore(store, (s) => s.updateWorkspaceView);
-  const updateWorkspaceUndoStack = useStore(store, (s) => s.updateWorkspaceUndoStack);
+  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 busRef = useRef(null);
   if (busRef.current === null) busRef.current = createEventBus();
   const bus = busRef.current;
@@ -1168,37 +1293,52 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
   const maxDepth = undoCap?.maxDepth ?? 50;
   const snapshotIfNeeded = (event) => {
     if (!undoCap || !undoEvents.has(event)) return;
-    const current = store.getState().workspaces.find((w) => w.id === record.id);
+    const current = store.getState().trials.find((w) => w.id === record.id);
     if (!current) return;
     const snap = structuredClone(current.state);
-    updateWorkspaceUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
+    updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
-  const setView = (v) => updateWorkspaceView(record.id, v);
+  const setView = (v) => updateTrialView(record.id, v);
+  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,
     setState: (next) => {
       snapshotIfNeeded("state.change");
-      updateWorkspaceState(record.id, next);
+      updateTrialState(record.id, next);
       bus.emit("state.change");
     },
     setConfig: (key, value) => {
       const evt = `config.change:${String(key)}`;
       snapshotIfNeeded("config.change");
       snapshotIfNeeded(evt);
-      updateWorkspaceConfig(record.id, key, value);
+      updateTrialConfig(record.id, key, value);
       bus.emit("config.change");
       bus.emit(evt);
     },
-    workspace: {
+    trial: {
       id: record.id,
-      zoom: record.view.zoom,
-      setZoom: (z) => updateWorkspaceView(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 });
+      }
     },
     emit: (event) => {
       snapshotIfNeeded(event);
       bus.emit(event);
-    }
+    },
+    job: jobCap ? job : void 0
   };
   const undoBindings = undoCap ? {
     canUndo: record.undoStack.past.length > 0,
@@ -1206,14 +1346,14 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
     undo: () => {
       const result = undo(record.undoStack, structuredClone(record.state));
       if (!result) return;
-      updateWorkspaceState(record.id, result.snapshot);
-      updateWorkspaceUndoStack(record.id, result.stack);
+      updateTrialState(record.id, result.snapshot);
+      updateTrialUndoStack(record.id, result.stack);
     },
     redo: () => {
       const result = redo(record.undoStack, structuredClone(record.state));
       if (!result) return;
-      updateWorkspaceState(record.id, result.snapshot);
-      updateWorkspaceUndoStack(record.id, result.stack);
+      updateTrialState(record.id, result.snapshot);
+      updateTrialUndoStack(record.id, result.stack);
     }
   } : void 0;
   const canvasLayers = useMemo(() => {
@@ -1223,7 +1363,11 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
-      render: (ctx, view) => layer.draw(ctx, { state: record.state, config: record.config, zoom: view.zoom })
+      render: (ctx, view) => {
+        ctx.translate(view.pan.x, view.pan.y);
+        ctx.scale(view.zoom, view.zoom);
+        layer.draw(ctx, { state: record.state, config: record.config, zoom: view.zoom });
+      }
     }));
   }, [instrument.canvas, record.state, record.config, layerVisibility, layerOrder]);
   const layerDescriptors = useMemo(() => {
@@ -1233,12 +1377,12 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
   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) => {
       snapshotIfNeeded("canvas.itemAdded");
-      updateWorkspaceState(record.id, next);
+      updateTrialState(record.id, next);
     },
     emit: (evt) => {
       snapshotIfNeeded(evt);
@@ -1280,10 +1424,18 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
       "div",
       {
         ref: canvasContainerRef,
-        className: "lk-workspace__canvas-host",
+        className: "lk-trial__canvas-host",
         style: { width: "100%", height: "100%", position: "relative" },
         children: [
-          /* @__PURE__ */ jsx(CanvasStack, { layers: layersWithFeedback, view: record.view, onViewChange: setView }),
+          /* @__PURE__ */ jsx(
+            CanvasStack,
+            {
+              layers: layersWithFeedback,
+              view: view2d ?? DEFAULT_VIEW,
+              onViewChange: setView,
+              children: instrument.render(renderCtx)
+            }
+          ),
           /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
         ]
       }
@@ -1308,12 +1460,13 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
     }
   ) : null;
   return /* @__PURE__ */ jsx(
-    WorkspaceChrome,
+    TrialChrome,
     {
-      workspaceId: record.id,
+      job: jobCap ? job : void 0,
+      trialId: record.id,
       record,
       instrument,
-      isLastWorkspace: isLast,
+      isLastTrial: isLast,
       undoBindings,
       sidebarExtras: /* @__PURE__ */ jsxs(Fragment, { children: [
         paletteNode,
@@ -1324,8 +1477,8 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
   );
 }
 
-// src/workspace/workspaceOps.ts
-var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
+// src/trial/trialOps.ts
+var DEFAULT_VIEW2 = { zoom: 1, pan: { x: 0, y: 0 } };
 function findInstrument(instruments, name) {
   const found = instruments.find((i) => i.name === name);
   if (!found) {
@@ -1334,9 +1487,9 @@ 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 addWorkspace(workspaces, instruments, instrumentName) {
+function addTrial(trials, instruments, instrumentName) {
   const instrument = findInstrument(instruments, instrumentName);
   const config = instrument.defaultConfig();
   const state = instrument.initialState(config);
@@ -1348,12 +1501,12 @@ function addWorkspace(workspaces, instruments, instrumentName) {
     view: initialView(instrument),
     undoStack: { past: [], future: [] }
   };
-  return [...workspaces, record];
+  return [...trials, record];
 }
-function cloneWorkspace(workspaces, id) {
-  const sourceIdx = workspaces.findIndex((w) => w.id === id);
-  const source = workspaces[sourceIdx];
-  if (!source) return workspaces;
+function cloneTrial(trials, id) {
+  const sourceIdx = trials.findIndex((w) => w.id === id);
+  const source = trials[sourceIdx];
+  if (!source) return trials;
   const clone = {
     ...source,
     id: crypto.randomUUID(),
@@ -1362,17 +1515,17 @@ function cloneWorkspace(workspaces, id) {
     view: structuredClone(source.view),
     undoStack: { past: [], future: [] }
   };
-  return [...workspaces.slice(0, sourceIdx + 1), clone, ...workspaces.slice(sourceIdx + 1)];
+  return [...trials.slice(0, sourceIdx + 1), clone, ...trials.slice(sourceIdx + 1)];
 }
-function closeWorkspace(workspaces, id) {
-  if (workspaces.length <= 1) return workspaces;
-  const next = workspaces.filter((w) => w.id !== id);
-  return next.length === workspaces.length ? workspaces : next;
+function closeTrial(trials, id) {
+  if (trials.length <= 1) return trials;
+  const next = trials.filter((w) => w.id !== id);
+  return next.length === trials.length ? trials : next;
 }
-function resetWorkspace(workspaces, id, instruments) {
-  const idx = workspaces.findIndex((w) => w.id === id);
-  const current = workspaces[idx];
-  if (!current) return workspaces;
+function resetTrial(trials, id, instruments) {
+  const idx = trials.findIndex((w) => w.id === id);
+  const current = trials[idx];
+  if (!current) return trials;
   const instrument = findInstrument(instruments, current.instrumentName);
   const config = instrument.defaultConfig();
   const state = instrument.initialState(config);
@@ -1382,13 +1535,13 @@ function resetWorkspace(workspaces, id, instruments) {
     state,
     view: initialView(instrument)
   };
-  return [...workspaces.slice(0, idx), reset, ...workspaces.slice(idx + 1)];
+  return [...trials.slice(0, idx), reset, ...trials.slice(idx + 1)];
 }
-function reorderWorkspaces(workspaces, ids) {
-  const byId = new Map(workspaces.map((w) => [w.id, w]));
+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 = workspaces.filter((w) => !seen.has(w.id));
+  const rest = trials.filter((w) => !seen.has(w.id));
   return [...named, ...rest];
 }
 function query() {
@@ -1422,9 +1575,9 @@ function LabShell({ title, children, header, footer, mode = "auto" }) {
   ] });
   return outer ? shell : /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, mode: resolved, children: shell });
 }
-var ZONE_ID = asNodeId("lk-workspaces");
+var ZONE_ID = asNodeId("lk-workspace");
 var STRATEGIES = { grid: gridStrategy };
-var KIND = "workspace";
+var KIND = "trial";
 function extentOf(store, id) {
   const p2 = store.getNode(id)?.membership?.placement;
   if (!p2) return null;
@@ -1433,7 +1586,7 @@ function extentOf(store, id) {
   if (p2.span) out.span = p2.span;
   return Object.keys(out).length > 0 ? out : null;
 }
-function WorkspaceGrid({
+function Workspace({
   children,
   ids,
   resizable = false,
@@ -1465,6 +1618,7 @@ function WorkspaceGrid({
     storeRef.current = store2;
   }
   const store = storeRef.current;
+  const surface = useSurfaceOptional();
   useLayoutEffect(() => {
     store.updateContainerConfig(ZONE_ID, { resizable, gap, padding });
   }, [store, resizable, gap, padding]);
@@ -1483,6 +1637,11 @@ function WorkspaceGrid({
     }
     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", () => {
@@ -1504,9 +1663,9 @@ function WorkspaceGrid({
       [KIND]: ({ node }) => {
         const content = byId.get(node.id) ?? null;
         if (!reorderable) return content;
-        return /* @__PURE__ */ jsxs("div", { className: "lk-workspace-tile", children: [
-          /* @__PURE__ */ jsx(DragHandle, { nodeId: node.id, className: "lk-workspace-tile__grip", children: /* @__PURE__ */ jsx("span", { className: "lk-workspace-tile__grip-dots", "aria-hidden": "true" }) }),
-          /* @__PURE__ */ jsx("div", { className: "lk-workspace-tile__body", children: 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 })
         ] });
       }
     };
@@ -1516,7 +1675,7 @@ function WorkspaceGrid({
     {
       parentId: ZONE_ID,
       chrome,
-      className: "lk-workspace-grid windease-zone",
+      className: "lk-workspace windease-zone",
       affordances: resizable,
       viewport,
       onChildOrderChange: reorderable ? commitOrder : void 0
@@ -1526,12 +1685,12 @@ function WorkspaceGrid({
 }
 function buildStore(instruments, defaultInstrument, storage, storageKey, initialMode) {
   const store = createLabStore({ storageKey, storage, initialMode });
-  if (store.getState().workspaces.length === 0) {
-    const seeded = addWorkspace([], instruments, defaultInstrument);
+  if (store.getState().trials.length === 0) {
+    const seeded = addTrial([], instruments, defaultInstrument);
     const record = seeded[0];
     if (record) {
       const { undoStack: _undoStack, ...rest } = record;
-      store.getState().addWorkspace(rest);
+      store.getState().addTrial(rest);
     }
   }
   return store;
@@ -1575,7 +1734,7 @@ function Lab({
     );
   }
   const store = storeRef.current;
-  const workspaces = useStore(store, (s) => s.workspaces);
+  const trials = useStore(store, (s) => s.trials);
   const savedSnapshots = useStore(store, (s) => s.savedSnapshots);
   const modeValue = useStore(store, (s) => s.mode);
   const layout = useStore(store, (s) => s.layout);
@@ -1586,47 +1745,47 @@ function Lab({
     }
   }, [mode, store]);
   const contextValue = useMemo(() => {
-    const replaceWorkspaces = (next) => {
-      const currentById = new Map(store.getState().workspaces.map((w) => [w.id, w]));
+    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);
-      store.setState({ workspaces: merged });
+      store.setState({ trials: merged });
       store.getState().setMode(store.getState().mode);
     };
     return {
       instruments,
-      workspaces,
-      addWorkspace: (instrumentName) => {
-        const next = addWorkspace(store.getState().workspaces, instruments, instrumentName);
-        replaceWorkspaces(next);
+      trials,
+      addTrial: (instrumentName) => {
+        const next = addTrial(store.getState().trials, instruments, instrumentName);
+        replaceTrials(next);
       },
-      cloneWorkspace: (id) => {
-        const next = cloneWorkspace(store.getState().workspaces, id);
-        replaceWorkspaces(next);
+      cloneTrial: (id) => {
+        const next = cloneTrial(store.getState().trials, id);
+        replaceTrials(next);
       },
-      closeWorkspace: (id) => {
-        const next = closeWorkspace(store.getState().workspaces, id);
-        replaceWorkspaces(next);
+      closeTrial: (id) => {
+        const next = closeTrial(store.getState().trials, id);
+        replaceTrials(next);
       },
-      reorderWorkspaces: (ids) => {
-        replaceWorkspaces(reorderWorkspaces(store.getState().workspaces, ids));
+      reorderTrials: (ids) => {
+        replaceTrials(reorderTrials(store.getState().trials, ids));
       },
-      resetWorkspace: (id) => {
-        const next = resetWorkspace(store.getState().workspaces, id, instruments);
+      resetTrial: (id) => {
+        const next = resetTrial(store.getState().trials, id, instruments);
         const record = next.find((w) => w.id === id);
         if (!record) return;
         store.setState((s) => ({
-          workspaces: s.workspaces.map(
+          trials: s.trials.map(
             (w) => w.id === id ? { ...w, config: record.config, state: record.state, view: record.view } : w
           )
         }));
-        store.getState().updateWorkspaceView(id, record.view);
+        store.getState().updateTrialView(id, record.view);
       },
       savedSnapshots,
-      saveSnapshot: (workspaceId, name) => {
-        store.getState().saveSnapshot(workspaceId, name ?? `Save ${(/* @__PURE__ */ new Date()).toLocaleString()}`);
+      saveSnapshot: (trialId, name) => {
+        store.getState().saveSnapshot(trialId, name ?? `Save ${(/* @__PURE__ */ new Date()).toLocaleString()}`);
       },
-      loadSnapshot: (workspaceId, snapshotId) => {
-        store.getState().loadSnapshot(snapshotId, workspaceId);
+      loadSnapshot: (trialId, snapshotId) => {
+        store.getState().loadSnapshot(snapshotId, trialId);
       },
       deleteSnapshot: (snapshotId) => {
         store.getState().deleteSnapshot(snapshotId);
@@ -1636,7 +1795,7 @@ function Lab({
         store.getState().setMode(m);
       }
     };
-  }, [instruments, workspaces, savedSnapshots, modeValue, store]);
+  }, [instruments, trials, savedSnapshots, modeValue, store]);
   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,
@@ -1646,15 +1805,15 @@ function Lab({
       className: "lk-lab",
       style: backdropStyle,
       children: /* @__PURE__ */ jsx(LabShell, { title: title ?? "Labkit", mode: modeValue, header: children, children: /* @__PURE__ */ jsx(
-        WorkspaceGrid,
+        Workspace,
         {
-          ids: workspaces.map((w) => w.id),
+          ids: trials.map((w) => w.id),
           resizable: true,
           reorderable: true,
-          onReorder: (ids) => contextValue.reorderWorkspaces(ids),
+          onReorder: (ids) => contextValue.reorderTrials(ids),
           layout,
           onLayoutChange: (next) => store.getState().setLayout(next),
-          children: workspaces.map((w) => /* @__PURE__ */ jsx(Workspace, { id: w.id }, w.id))
+          children: trials.map((w) => /* @__PURE__ */ jsx(Trial, { id: w.id }, w.id))
         }
       ) })
     }
@@ -2024,17 +2183,6 @@ function PropertyGroup({
     /* @__PURE__ */ jsx("div", { className: "lk-property-group__body", children })
   ] });
 }
-
-// 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, "-"));
-}
 function PropertyPanel({ title, children, className }) {
   const cls = className ? `lk-property-panel ${className}` : "lk-property-panel";
   return /* @__PURE__ */ jsxs("div", { className: cls, children: [
@@ -2278,6 +2426,6 @@ function ToggleRow({
   }) }) });
 }
 
-export { CheckboxRow, ColorRow, CurveField, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Lab, LabContext, LabShell, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SelectRow, SliderRow, Subpanel, TextRow, ToggleRow, Workspace, WorkspaceChrome, WorkspaceGrid, addWorkspace, cloneWorkspace, closeWorkspace, defineInstrument, detectCapabilities, interstellarTheme, reorderWorkspaces, resetWorkspace, useLabContext, validateConfigSchema };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map