@weasel-js/labkit 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -1,20 +1,69 @@
 export { CanvasLayerDescriptor, CanvasStack, CanvasStackContext, CanvasStackContextValue, CanvasStackProps, screenToWorld, worldToScreen } from './canvas/index.js';
+import * as react from 'react';
+import { WheelEvent, PointerEvent, ReactNode } from 'react';
 export { ControlPanel } from './controls/index.js';
 import { C as ConfigField } from './_dts/types-x92Kfeme.js';
 export { a as CheckboxField, b as ColorField, c as ConfigFieldBase, d as ConfigFieldType, N as NumberField, S as SelectField, e as SelectOption, f as SliderField, T as TextField } from './_dts/types-x92Kfeme.js';
-import { I as Instrument, a as InstrumentList } from './_dts/index-iAP6XbH3.js';
-export { C as CanvasCapability, b as CanvasLayer, D as DragDropCapability, c as DragFeedback, H as HitResult, L as LayerCapability, d as LayerDescriptor, P as PaletteItem, e as Point, R as RenderContext, S as SystemEvent, U as UndoCapability, V as ViewTransform } from './_dts/index-iAP6XbH3.js';
+import { I as Instrument, a as InstrumentList, V as ViewTransform } from './_dts/index-JFAYj5Tv.js';
+export { C as CanvasCapability, b as CanvasLayer, D as DragDropCapability, c as DragFeedback, H as HitResult, L as LayerCapability, d as LayerDescriptor, P as PaletteItem, e as Point, R as RenderContext, S as SystemEvent, U as UndoCapability } from './_dts/index-JFAYj5Tv.js';
+import { J as JobHandle } from './_dts/types-DJ79Tg5J.js';
+export { a as JobCapability, b as JobEvent, c as JobFailure, d as JobStatus } from './_dts/types-DJ79Tg5J.js';
+export { UseJobOptions, useJob } from './job/index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { a as StorageAdapter, w as LabMode, T as TrialRecord, h as SavedSnapshot } from './_dts/useTrialState-DYe2vUwN.js';
-export { C as CURRENT_DOCUMENT_VERSION, b as CreateLabStoreOptions, L as LabDocument, e as LabStoreContext, f as LabStoreProvider, g as LabStoreState, S as SerializedTrial, i as TrialIdContext, j as TrialIdProvider, k as TrialStateHandle, U as UndoStack, m as createMemoryAdapter, n as labDocumentKey, o as localStorageAdapter, p as noneAdapter, q as quarantineKey, s as sessionStorageAdapter, u as urlHashAdapter, r as useLabStore, t as useTrialId, v as useTrialState } from './_dts/useTrialState-DYe2vUwN.js';
+import { a as StorageAdapter, w as LabMode, T as TrialRecord, h as SavedSnapshot } from './_dts/useTrialState-BMNIx3Cy.js';
+export { C as CURRENT_DOCUMENT_VERSION, b as CreateLabStoreOptions, L as LabDocument, e as LabStoreContext, f as LabStoreProvider, g as LabStoreState, S as SerializedTrial, i as TrialIdContext, j as TrialIdProvider, k as TrialStateHandle, U as UndoStack, m as createMemoryAdapter, n as labDocumentKey, o as localStorageAdapter, p as noneAdapter, q as quarantineKey, s as sessionStorageAdapter, u as urlHashAdapter, r as useLabStore, t as useTrialId, v as useTrialState } from './_dts/useTrialState-BMNIx3Cy.js';
 export { LayerList, LayerListProps } from './layers/index.js';
 export { FpsMeter, ScaleIndicator, ScaleIndicatorProps, Sidebar, SidebarProps, StatusBar, StatusBarProps, Toolbar, ToolbarProps } from './primitives/index.js';
+export { Box, Rect, SurfaceContext, SurfaceFrame, SurfaceHandle, UseTiledSurfaceOptions, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface } from './surface/index.js';
 export { LayerStack, LayerStackItem, LayerStackProps } from './ui/layers/index.js';
 export { EventBus, EventListener, clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './undo/index.js';
 import 'zustand/vanilla';
 
+/** A point in the space the instrument works in. */
+interface Vec3 {
+    x: number;
+    y: number;
+    z: number;
+}
+/** An orbit camera as a trial view: where it looks from, and what it looks at.
+ *  labkit does not turn this into a matrix — the host's renderer does. */
+interface OrbitView {
+    yaw: number;
+    pitch: number;
+    distance: number;
+    target: Vec3;
+}
+/** Just short of the pole. At exactly ±PI/2 the azimuth is undefined and the
+ *  camera rolls, which reads as the model jumping rather than as a limit. */
+declare const PITCH_LIMIT: number;
+declare function clampPitch(pitch: number): number;
+declare function wrapYaw(yaw: number): number;
+/** The view a drag of (dx, dy) from `start` produces. Absolute against the drag
+ *  start, so it can be re-applied any number of times without compounding. */
+declare function orbitAfterDrag(start: OrbitView, dx: number, dy: number): OrbitView;
+/** Multiplicative, so one notch covers the same proportion of the distance
+ *  whether the camera is near or far. */
+declare function orbitAfterWheel(view: OrbitView, deltaY: number, minDistance: number, maxDistance: number): OrbitView;
+interface UseOrbitOptions {
+    view: OrbitView;
+    onViewChange: (v: OrbitView) => void;
+    /** Restored on double-click. Defaults to the view the hook first saw. */
+    home?: OrbitView;
+    minDistance?: number;
+    maxDistance?: number;
+}
+interface OrbitHandlers {
+    onWheel: (e: WheelEvent<HTMLElement>) => void;
+    onPointerDown: (e: PointerEvent<HTMLElement>) => void;
+    onPointerMove: (e: PointerEvent<HTMLElement>) => void;
+    onPointerUp: (e: PointerEvent<HTMLElement>) => void;
+    onDoubleClick: () => void;
+    isDragging: () => boolean;
+}
+/** Pointer gestures over an orbit view: drag to turn, wheel or pinch to dolly,
+ *  double-click to go home. The 3D peer of `usePanZoom`. */
+declare function useOrbit({ view, onViewChange, home, minDistance, maxDistance, }: UseOrbitOptions): OrbitHandlers;
+
 /** Which optional capabilities an instrument declared — what the trial
  *  consults to decide which chrome to show. */
 interface CapabilityFlags {
@@ -158,6 +207,14 @@ interface WorkspaceProps {
  */
 declare function Workspace({ children, ids, resizable, reorderable, onReorder, layout, onLayoutChange, gap, padding, viewport, }: WorkspaceProps): react_jsx_runtime.JSX.Element;
 
+/** The 2D view labkit has always shipped, and what a trial gets when it names no
+ *  other. Re-exported under its own name so a consumer can say which it means. */
+type ViewTransform2D = ViewTransform;
+declare const DEFAULT_VIEW: ViewTransform2D;
+/** A trial's view is opaque to labkit, so anything that needs the 2D shape — the
+ *  zoom chrome, `CanvasStack` — asks for it and handles not getting it. */
+declare function as2DView(view: unknown): ViewTransform2D | null;
+
 type TokenValue = string | number | readonly (string | number)[];
 /**
  * A single design token as authored, before aliases are resolved: a DTCG-shaped
@@ -233,7 +290,8 @@ interface TrialSidebarContext {
 interface TrialStatusBarContext {
     trialId: string;
     instrumentName: string;
-    zoom: number;
+    /** Null when the trial holds a view that is not the 2D one. */
+    zoom: number | null;
 }
 /** Replaces a trial's toolbar. Receives everything the default one uses,
  *  so a custom toolbar need not reach into the store. */
@@ -256,7 +314,7 @@ interface DefaultStatusBarProps {
     ctx: TrialStatusBarContext;
 }
 /** The status bar a trial renders when no `statusBar` slot is supplied:
- *  the instrument's name and the current zoom. */
+ *  the instrument's name, and the zoom when the trial's view has one. */
 declare function DefaultStatusBar({ ctx }: DefaultStatusBarProps): react_jsx_runtime.JSX.Element;
 
 /** Props for `<DefaultToolbar>`. */
@@ -291,13 +349,15 @@ interface TrialChromeProps {
     sidebar?: SidebarSlot;
     statusBar?: StatusBarSlot;
     undoBindings?: UndoBindings;
+    /** Supplied when the instrument declares a `job`. */
+    job?: JobHandle;
     sidebarExtras?: ReactNode;
     children: ReactNode;
 }
 /** The frame around a running instrument — toolbar, sidebar, status bar —
  *  each replaceable by a slot. Assembles the slot contexts and wires the undo
  *  keyboard shortcuts. */
-declare function TrialChrome({ trialId, record, instrument, isLastTrial, toolbar, sidebar, statusBar, undoBindings, sidebarExtras, children, }: TrialChromeProps): react_jsx_runtime.JSX.Element;
+declare function TrialChrome({ trialId, record, instrument, isLastTrial, toolbar, sidebar, statusBar, undoBindings, job, sidebarExtras, children, }: TrialChromeProps): react_jsx_runtime.JSX.Element;
 
 /** Append a new trial running `instrumentName`, at that instrument's
  *  default config and initial state. */
@@ -595,5 +655,5 @@ interface ToggleRowProps<T extends string> {
  *  visible at once. */
 declare function ToggleRow<T extends string>({ label, value, options, onChange, layout, }: ToggleRowProps<T>): react_jsx_runtime.JSX.Element;
 
-export { CheckboxRow, ColorRow, ConfigField, CurveField, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Instrument, InstrumentList, Lab, LabContext, LabMode, LabShell, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SavedSnapshot, SelectRow, SliderRow, StorageAdapter, Subpanel, TextRow, ToggleRow, Trial, TrialChrome, TrialRecord, Workspace, addTrial, cloneTrial, closeTrial, defineInstrument, detectCapabilities, interstellarTheme, reorderTrials, resetTrial, useLabContext, validateConfigSchema };
-export type { CapabilityFlags, CheckboxRowProps, ColorRowProps, CurveFieldProps, CurveMark, DefaultSidebarProps, DefaultStatusBarProps, DefaultToolbarProps, EffectCardListItem, EffectCardListProps, EffectCardProps, LabContextValue, LabProps, LabShellProps, NumberRowProps, PropertyGroupProps, PropertyListPack, PropertyListProps, PropertyPanelProps, PropertyRowLayout, PropertyRowProps, PropertyRowVariant, SelectRowProps, SidebarSlot, SliderRowProps, StatusBarSlot, SubpanelProps, TextRowProps, ToggleRowProps, ToolbarSlot, TrialChromeProps, TrialProps, TrialSidebarContext, TrialStatusBarContext, TrialToolbarContext, ValidationResult, WorkspaceProps };
+export { CheckboxRow, ColorRow, ConfigField, CurveField, DEFAULT_VIEW, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Instrument, InstrumentList, JobHandle, Lab, LabContext, LabMode, LabShell, NumberRow, PITCH_LIMIT, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SavedSnapshot, SelectRow, SliderRow, StorageAdapter, Subpanel, TextRow, ToggleRow, Trial, TrialChrome, TrialRecord, ViewTransform, Workspace, addTrial, as2DView, clampPitch, cloneTrial, closeTrial, defineInstrument, detectCapabilities, interstellarTheme, orbitAfterDrag, orbitAfterWheel, reorderTrials, resetTrial, useLabContext, useOrbit, validateConfigSchema, wrapYaw };
+export type { CapabilityFlags, CheckboxRowProps, ColorRowProps, CurveFieldProps, CurveMark, DefaultSidebarProps, DefaultStatusBarProps, DefaultToolbarProps, EffectCardListItem, EffectCardListProps, EffectCardProps, LabContextValue, LabProps, LabShellProps, NumberRowProps, OrbitHandlers, OrbitView, PropertyGroupProps, PropertyListPack, PropertyListProps, PropertyPanelProps, PropertyRowLayout, PropertyRowProps, PropertyRowVariant, SelectRowProps, SidebarSlot, SliderRowProps, StatusBarSlot, SubpanelProps, TextRowProps, ToggleRowProps, ToolbarSlot, TrialChromeProps, TrialProps, TrialSidebarContext, TrialStatusBarContext, TrialToolbarContext, UseOrbitOptions, ValidationResult, Vec3, ViewTransform2D, WorkspaceProps };

package/dist/index.js

@@ -1,10 +1,14 @@
-export { LayerStack } from './chunk-NRKWVTVT.js';
-import { p, F } from './chunk-C6GJKPUI.js';
-import './chunk-DJLDIRFN.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-3TYUJR7Z.js';
-export { CURRENT_DOCUMENT_VERSION, LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, createMemoryAdapter, labDocumentKey, localStorageAdapter, noneAdapter, quarantineKey, sessionStorageAdapter, urlHashAdapter, useLabStore, useTrialId, useTrialState } from './chunk-3TYUJR7Z.js';
+import { 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 {
@@ -934,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: [
@@ -970,7 +1066,7 @@ function formatZoom(zoom) {
 function DefaultStatusBar({ ctx }) {
   return /* @__PURE__ */ jsxs(StatusBar, { children: [
     /* @__PURE__ */ jsx(StatusBar.Section, { children: ctx.instrumentName }),
-    /* @__PURE__ */ jsx(StatusBar.Section, { children: formatZoom(ctx.zoom) })
+    ctx.zoom === null ? null : /* @__PURE__ */ jsx(StatusBar.Section, { children: formatZoom(ctx.zoom) })
   ] });
 }
 function DefaultToolbar({ ctx }) {
@@ -1038,6 +1134,7 @@ function TrialChrome({
   sidebar,
   statusBar,
   undoBindings,
+  job,
   sidebarExtras,
   children
 }) {
@@ -1047,9 +1144,11 @@ function TrialChrome({
   const updateTrialView = useStore(storeCtx.store, (s) => s.updateTrialView);
   const updateTrialConfig = useStore(storeCtx.store, (s) => s.updateTrialConfig);
   const updateTrialState = useStore(storeCtx.store, (s) => s.updateTrialState);
+  const view2d = as2DView(record.view);
   const toolbarCtx = useMemo(() => {
     const setZoom = (z) => {
-      updateTrialView(trialId, { ...record.view, zoom: z });
+      if (!view2d) return;
+      updateTrialView(trialId, { ...view2d, zoom: z });
     };
     return {
       trialId,
@@ -1061,10 +1160,10 @@ function TrialChrome({
       }),
       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.trialId === trialId),
@@ -1075,7 +1174,7 @@ function TrialChrome({
       close: () => lab.closeTrial(trialId),
       isLastTrial
     };
-  }, [trialId, record, instrument, lab, isLastTrial, updateTrialView, undoBindings]);
+  }, [trialId, record, instrument, lab, isLastTrial, updateTrialView, undoBindings, view2d]);
   const sidebarCtx = useMemo(
     () => ({
       trialId,
@@ -1102,7 +1201,7 @@ function TrialChrome({
   const statusCtx = {
     trialId,
     instrumentName: record.instrumentName,
-    zoom: record.view.zoom
+    zoom: view2d ? view2d.zoom : null
   };
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
@@ -1131,7 +1230,21 @@ function TrialChrome({
           ] }),
           /* @__PURE__ */ jsx("div", { className: "lk-trial__content", children })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "lk-trial__status", children: statusBar ? statusBar(statusCtx) : /* @__PURE__ */ jsx(DefaultStatusBar, { ctx: statusCtx }) })
+        /* @__PURE__ */ jsxs("div", { className: "lk-trial__status", children: [
+          job ? /* @__PURE__ */ 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 })
+        ] })
       ]
     }
   );
@@ -1186,6 +1299,15 @@ function TrialRuntime({ record, instrument, store, isLast }) {
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
   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,
@@ -1204,13 +1326,19 @@ function TrialRuntime({ record, instrument, store, isLast }) {
     },
     trial: {
       id: record.id,
-      zoom: record.view.zoom,
-      setZoom: (z) => updateTrialView(record.id, { ...record.view, zoom: z })
+      view: record.view,
+      setView,
+      zoom: view2d?.zoom ?? 1,
+      setZoom: (z) => {
+        if (!view2d) return;
+        updateTrialView(record.id, { ...view2d, zoom: z });
+      }
     },
     emit: (event) => {
       snapshotIfNeeded(event);
       bus.emit(event);
-    }
+    },
+    job: jobCap ? job : void 0
   };
   const undoBindings = undoCap ? {
     canUndo: record.undoStack.past.length > 0,
@@ -1249,7 +1377,7 @@ function TrialRuntime({ 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) => {
@@ -1299,7 +1427,15 @@ function TrialRuntime({ record, instrument, store, isLast }) {
         className: "lk-trial__canvas-host",
         style: { width: "100%", height: "100%", position: "relative" },
         children: [
-          /* @__PURE__ */ jsx(CanvasStack, { layers: layersWithFeedback, view: record.view, onViewChange: setView, children: instrument.render(renderCtx) }),
+          /* @__PURE__ */ jsx(
+            CanvasStack,
+            {
+              layers: layersWithFeedback,
+              view: view2d ?? DEFAULT_VIEW,
+              onViewChange: setView,
+              children: instrument.render(renderCtx)
+            }
+          ),
           /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
         ]
       }
@@ -1326,6 +1462,7 @@ function TrialRuntime({ record, instrument, store, isLast }) {
   return /* @__PURE__ */ jsx(
     TrialChrome,
     {
+      job: jobCap ? job : void 0,
       trialId: record.id,
       record,
       instrument,
@@ -1341,7 +1478,7 @@ function TrialRuntime({ record, instrument, store, isLast }) {
 }
 
 // src/trial/trialOps.ts
-var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
+var DEFAULT_VIEW2 = { zoom: 1, pan: { x: 0, y: 0 } };
 function findInstrument(instruments, name) {
   const found = instruments.find((i) => i.name === name);
   if (!found) {
@@ -1350,7 +1487,7 @@ function findInstrument(instruments, name) {
   return found;
 }
 function initialView(instrument) {
-  return instrument.canvas?.initialView ? structuredClone(instrument.canvas.initialView) : { ...DEFAULT_VIEW, pan: { ...DEFAULT_VIEW.pan } };
+  return instrument.canvas?.initialView ? structuredClone(instrument.canvas.initialView) : { ...DEFAULT_VIEW2, pan: { ...DEFAULT_VIEW2.pan } };
 }
 function addTrial(trials, instruments, instrumentName) {
   const instrument = findInstrument(instruments, instrumentName);
@@ -1481,6 +1618,7 @@ function Workspace({
     storeRef.current = store2;
   }
   const store = storeRef.current;
+  const surface = useSurfaceOptional();
   useLayoutEffect(() => {
     store.updateContainerConfig(ZONE_ID, { resizable, gap, padding });
   }, [store, resizable, gap, padding]);
@@ -1499,6 +1637,11 @@ function Workspace({
     }
     store.setChildOrder(ZONE_ID, [...nodeIds]);
   }, [store, nodeIds]);
+  useEffect(() => {
+    if (!surface) return;
+    surface.invalidateRects();
+    return store.events.on("node.placementChanged", () => surface.invalidateRects());
+  }, [store, surface, nodeIds]);
   useEffect(() => {
     if (!onLayoutChange) return;
     return store.events.on("node.placementChanged", () => {
@@ -2283,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, Trial, TrialChrome, Workspace, addTrial, cloneTrial, closeTrial, defineInstrument, detectCapabilities, interstellarTheme, reorderTrials, resetTrial, 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