@weasel-js/labkit 1.0.3 → 1.1.0

package/dist/index.js

@@ -1,10 +1,10 @@
-export { LayerStack } from './chunk-73PXCRCR.js';
-import { p, F } from './chunk-N5KTQKQA.js';
-import './chunk-3WPOGKUP.js';
+export { LayerStack } from './chunk-NRKWVTVT.js';
+import { p, F } from './chunk-C6GJKPUI.js';
+import './chunk-DJLDIRFN.js';
 import { Sidebar, StatusBar, Toolbar } from './chunk-PMAU3SEE.js';
 export { FpsMeter, ScaleIndicator, Sidebar, StatusBar, Toolbar } from './chunk-PMAU3SEE.js';
-import { LabStoreContext, createLabStore, noneAdapter } from './chunk-T7OKNJTY.js';
-export { LabStoreContext, LabStoreProvider, WorkspaceIdContext, WorkspaceIdProvider, createMemoryAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, useExperimentState, useLabStore, useWorkspaceId } from './chunk-T7OKNJTY.js';
+import { LabStoreContext, createLabStore, noneAdapter } from './chunk-3TYUJR7Z.js';
+export { CURRENT_DOCUMENT_VERSION, LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, createMemoryAdapter, labDocumentKey, localStorageAdapter, noneAdapter, quarantineKey, sessionStorageAdapter, urlHashAdapter, useLabStore, useTrialId, useTrialState } from './chunk-3TYUJR7Z.js';
 import { ControlPanel } from './chunk-5R2ATYPJ.js';
 export { ControlPanel } from './chunk-5R2ATYPJ.js';
 import { CanvasStack, screenToWorld } from './chunk-574LJAV4.js';
@@ -14,10 +14,12 @@ 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, useEffect, useCallback, useLayoutEffect } from 'react';
+import { createContext, useContext, useMemo, useRef, useState, Children, useLayoutEffect, useEffect, useCallback } 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';
 
 // src/instrument/capabilityDetector.ts
 function detectCapabilities(instrument) {
@@ -88,15 +90,7 @@ function validateConfigSchema(fields) {
   return { valid: errors.length === 0, errors };
 }
 
-// src/lab/gridDims.ts
-function gridDims(count) {
-  if (count <= 1) return { cols: 1, rows: 1 };
-  const cols = Math.ceil(Math.sqrt(count));
-  const rows = Math.ceil(count / cols);
-  return { cols, rows };
-}
-
-// ../theme/dist/chunk-STFENPNX.js
+// ../theme/dist/chunk-E3FOFGMD.js
 var THEME_SOURCES = {
   "weasel": {
     "primitives": {
@@ -636,19 +630,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) {
@@ -656,17 +651,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);
@@ -955,13 +950,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),
-      "%"
-    ] })
+    /* @__PURE__ */ jsx(StatusBar.Section, { children: formatZoom(ctx.zoom) })
   ] });
 }
 function DefaultToolbar({ ctx }) {
@@ -981,10 +990,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, {})
@@ -1010,24 +1016,24 @@ 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,
@@ -1037,16 +1043,16 @@ function WorkspaceChrome({
 }) {
   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 toolbarCtx = useMemo(() => {
     const setZoom = (z) => {
-      updateWorkspaceView(workspaceId, { ...record.view, zoom: z });
+      updateTrialView(trialId, { ...record.view, zoom: z });
     };
     return {
-      workspaceId,
+      trialId,
       instrumentName: record.instrumentName,
       hasUndo: instrument.undo != null,
       canUndo: undoBindings?.canUndo ?? false,
@@ -1061,18 +1067,18 @@ function WorkspaceChrome({
       zoomOut: () => setZoom(record.view.zoom * 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]);
   const sidebarCtx = useMemo(
     () => ({
-      workspaceId,
+      trialId,
       instrumentName: record.instrumentName,
       configFields: instrument.configSchema?.() ?? [],
       config: record.config,
@@ -1083,18 +1089,18 @@ 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
   };
@@ -1113,57 +1119,57 @@ 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__ */ jsx("div", { className: "lk-trial__status", children: 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;
@@ -1174,32 +1180,32 @@ 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 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 })
+      setZoom: (z) => updateTrialView(record.id, { ...record.view, zoom: z })
     },
     emit: (event) => {
       snapshotIfNeeded(event);
@@ -1212,14 +1218,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(() => {
@@ -1229,7 +1235,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(() => {
@@ -1244,7 +1254,7 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
     config: record.config,
     setState: (next) => {
       snapshotIfNeeded("canvas.itemAdded");
-      updateWorkspaceState(record.id, next);
+      updateTrialState(record.id, next);
     },
     emit: (evt) => {
       snapshotIfNeeded(evt);
@@ -1286,10 +1296,10 @@ 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: record.view, onViewChange: setView, children: instrument.render(renderCtx) }),
           /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
         ]
       }
@@ -1314,12 +1324,12 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
     }
   ) : null;
   return /* @__PURE__ */ jsx(
-    WorkspaceChrome,
+    TrialChrome,
     {
-      workspaceId: record.id,
+      trialId: record.id,
       record,
       instrument,
-      isLastWorkspace: isLast,
+      isLastTrial: isLast,
       undoBindings,
       sidebarExtras: /* @__PURE__ */ jsxs(Fragment, { children: [
         paletteNode,
@@ -1330,7 +1340,7 @@ function WorkspaceRuntime({ record, instrument, store, isLast }) {
   );
 }
 
-// src/workspace/workspaceOps.ts
+// src/trial/trialOps.ts
 var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
 function findInstrument(instruments, name) {
   const found = instruments.find((i) => i.name === name);
@@ -1342,7 +1352,7 @@ function findInstrument(instruments, name) {
 function initialView(instrument) {
   return instrument.canvas?.initialView ? structuredClone(instrument.canvas.initialView) : { ...DEFAULT_VIEW, pan: { ...DEFAULT_VIEW.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);
@@ -1354,12 +1364,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(),
@@ -1368,17 +1378,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);
@@ -1388,7 +1398,14 @@ 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 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));
+  return [...named, ...rest];
 }
 function query() {
   if (typeof window === "undefined" || !window.matchMedia) return null;
@@ -1421,23 +1438,116 @@ function LabShell({ title, children, header, footer, mode = "auto" }) {
   ] });
   return outer ? shell : /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, mode: resolved, children: shell });
 }
-function WorkspaceGrid({ children }) {
-  const count = Children.count(children);
-  const { cols, rows } = gridDims(count);
-  const style = {
-    "--lk-grid-cols": String(cols),
-    "--lk-grid-rows": String(rows)
-  };
-  return /* @__PURE__ */ jsx("div", { className: "lk-workspace-grid", style, children });
+var ZONE_ID = asNodeId("lk-workspace");
+var STRATEGIES = { grid: gridStrategy };
+var KIND = "trial";
+function extentOf(store, id) {
+  const p2 = store.getNode(id)?.membership?.placement;
+  if (!p2) return null;
+  const out = {};
+  if (p2.size) out.size = p2.size;
+  if (p2.span) out.span = p2.span;
+  return Object.keys(out).length > 0 ? out : null;
+}
+function Workspace({
+  children,
+  ids,
+  resizable = false,
+  reorderable = false,
+  onReorder,
+  layout,
+  onLayoutChange,
+  gap = 12,
+  padding = 0,
+  viewport
+}) {
+  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 layoutRef = useRef(layout);
+  layoutRef.current = layout;
+  const onLayoutChangeRef = useRef(onLayoutChange);
+  onLayoutChangeRef.current = onLayoutChange;
+  const storeRef = useRef(null);
+  if (storeRef.current === null) {
+    const store2 = new Store();
+    store2.registerNode(
+      createNode({
+        kind: "zone",
+        id: ZONE_ID,
+        container: { strategyId: "grid", config: { resizable, gap, padding } }
+      })
+    );
+    storeRef.current = store2;
+  }
+  const store = storeRef.current;
+  useLayoutEffect(() => {
+    store.updateContainerConfig(ZONE_ID, { resizable, gap, padding });
+  }, [store, resizable, gap, padding]);
+  useLayoutEffect(() => {
+    const present = new Set(store.getContainerView(ZONE_ID)?.childOrder ?? []);
+    const wanted = new Set(nodeIds);
+    for (const id of present) {
+      if (!wanted.has(id)) store.unregisterNode(id);
+    }
+    for (const id of nodeIds) {
+      if (present.has(id)) continue;
+      store.registerNode(createNode({ kind: KIND, id, parentId: ZONE_ID, focus: true }));
+      store.showNode(id);
+      const saved = layoutRef.current?.[id];
+      if (saved) store.patchPlacement(id, saved);
+    }
+    store.setChildOrder(ZONE_ID, [...nodeIds]);
+  }, [store, nodeIds]);
+  useEffect(() => {
+    if (!onLayoutChange) return;
+    return store.events.on("node.placementChanged", () => {
+      const next = {};
+      for (const child of store.getChildren(ZONE_ID)) {
+        const extent = extentOf(store, child.id);
+        if (extent) next[child.id] = extent;
+      }
+      onLayoutChangeRef.current?.(next);
+    });
+  }, [store, onLayoutChange]);
+  const commitOrder = useCallback(
+    (nextIds) => onReorder?.(nextIds.map(String)),
+    [onReorder]
+  );
+  const chrome = useMemo(() => {
+    const byId = new Map(nodeIds.map((id, i) => [id, items[i]]));
+    return {
+      [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 })
+        ] });
+      }
+    };
+  }, [nodeIds, items, reorderable]);
+  const grid = /* @__PURE__ */ jsx(
+    Container,
+    {
+      parentId: ZONE_ID,
+      chrome,
+      className: "lk-workspace windease-zone",
+      affordances: resizable,
+      viewport,
+      onChildOrderChange: reorderable ? commitOrder : void 0
+    }
+  );
+  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES, children: reorderable ? /* @__PURE__ */ jsx(DragProvider, { children: grid }) : grid }) });
 }
 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;
@@ -1481,9 +1591,10 @@ 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);
   const resolvedMode = useResolvedMode(modeValue);
   useEffect(() => {
     if (mode && mode !== store.getState().mode) {
@@ -1491,44 +1602,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);
       },
-      resetWorkspace: (id) => {
-        const next = resetWorkspace(store.getState().workspaces, id, instruments);
+      reorderTrials: (ids) => {
+        replaceTrials(reorderTrials(store.getState().trials, ids));
+      },
+      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);
@@ -1538,7 +1652,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,
@@ -1547,7 +1661,18 @@ function Lab({
       mode: resolvedMode,
       className: "lk-lab",
       style: backdropStyle,
-      children: /* @__PURE__ */ jsx(LabShell, { title: title ?? "Labkit", mode: modeValue, header: children, children: /* @__PURE__ */ jsx(WorkspaceGrid, { children: workspaces.map((w) => /* @__PURE__ */ jsx(Workspace, { id: w.id }, w.id)) }) })
+      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))
+        }
+      ) })
     }
   ) }) });
 }
@@ -1915,17 +2040,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: [
@@ -2169,6 +2283,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, gridDims, interstellarTheme, resetWorkspace, useLabContext, validateConfigSchema };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map