@weasel-js/labkit 0.1.0

package/dist/index.js

@@ -0,0 +1,1425 @@
+export { LayerStack } from './chunk-SD3HDXR7.js';
+import { Ae, ao } from './chunk-6FO7G5BB.js';
+import './chunk-B5ZUYRKN.js';
+import { Sidebar, StatusBar, Toolbar } from './chunk-HXZHVU4G.js';
+export { FpsMeter, ScaleIndicator, Sidebar, StatusBar, Toolbar } from './chunk-HXZHVU4G.js';
+import { LabStoreContext, createLabStore, noneAdapter } from './chunk-SSMHPMDV.js';
+export { LabStoreContext, LabStoreProvider, WorkspaceIdContext, WorkspaceIdProvider, createMemoryAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, useExperimentState, useLabStore, useWorkspaceId } from './chunk-SSMHPMDV.js';
+import { ControlPanel } from './chunk-VLAHRJOC.js';
+export { ControlPanel } from './chunk-VLAHRJOC.js';
+import { CanvasStack, screenToWorld } from './chunk-54IQ2DX7.js';
+export { CanvasStack, screenToWorld, worldToScreen } from './chunk-54IQ2DX7.js';
+export { CanvasStackContext } from './chunk-PWC7AQZM.js';
+import { LayerList } from './chunk-2QNYYL3V.js';
+export { LayerList } from './chunk-2QNYYL3V.js';
+import { createEventBus, redo, undo, pushSnapshot } from './chunk-7BKDG73Z.js';
+export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-7BKDG73Z.js';
+import { createContext, useContext, useMemo, useRef, useState, Children, useEffect, useCallback } from 'react';
+import { useStore } from 'zustand/react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/instrument/capabilityDetector.ts
+function detectCapabilities(instrument) {
+  return {
+    hasCanvas: instrument.canvas != null,
+    hasLayers: instrument.layers != null,
+    hasDragDrop: instrument.dragDrop != null,
+    hasUndo: instrument.undo != null
+  };
+}
+
+// src/instrument/defineInstrument.ts
+function defineInstrument(spec) {
+  return spec;
+}
+
+// src/instrument/validateConfigSchema.ts
+var KNOWN_TYPES = ["slider", "checkbox", "select", "number", "text", "color"];
+function validateConfigSchema(fields) {
+  const errors = [];
+  const seenKeys = /* @__PURE__ */ new Set();
+  for (const field of fields) {
+    if (field.key === "") {
+      errors.push("Field has empty key");
+    } else if (seenKeys.has(field.key)) {
+      errors.push(`Duplicate config key: "${field.key}"`);
+    } else {
+      seenKeys.add(field.key);
+    }
+    if (field.label === "") {
+      errors.push(`Field "${field.key}" has empty label`);
+    }
+    if (!KNOWN_TYPES.includes(field.type)) {
+      errors.push(`Unknown field type: "${field.type}" on key "${field.key}"`);
+      continue;
+    }
+    if (field.type === "slider") {
+      if (!Number.isFinite(field.default)) {
+        errors.push(`Field "${field.key}": default must be a finite number`);
+      }
+      if (field.min >= field.max) {
+        errors.push(`Slider "${field.key}": min must be < max`);
+      } else if (field.default < field.min || field.default > field.max) {
+        errors.push(`Slider "${field.key}": default ${field.default} is outside [min, max]`);
+      }
+    } else if (field.type === "number") {
+      if (!Number.isFinite(field.default)) {
+        errors.push(`Field "${field.key}": default must be a finite number`);
+      }
+    } else if (field.type === "select") {
+      if (field.options.length === 0) {
+        errors.push(`Select "${field.key}": options array must not be empty`);
+      } else {
+        const seenValues = /* @__PURE__ */ new Set();
+        for (const opt of field.options) {
+          if (seenValues.has(opt.value)) {
+            errors.push(`Select "${field.key}": duplicate option value "${opt.value}"`);
+          } else {
+            seenValues.add(opt.value);
+          }
+        }
+        if (!seenValues.has(field.default)) {
+          errors.push(`Select "${field.key}": default "${field.default}" is not among options`);
+        }
+      }
+    }
+  }
+  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 };
+}
+function DragGhost({ item, screenPos }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted || typeof document === "undefined") return null;
+  const style = {
+    left: `${screenPos.x + 12}px`,
+    top: `${screenPos.y + 12}px`
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { className: "lk-drag-ghost", style, children: /* @__PURE__ */ jsx("span", { className: "lk-drag-ghost__label", children: item.label }) }),
+    document.body
+  );
+}
+function useDragDrop({
+  capability,
+  canvasContainerRef,
+  view,
+  state,
+  config,
+  setState,
+  emit
+}) {
+  const [drag, setDrag] = useState(null);
+  const dragRef = useRef(null);
+  dragRef.current = drag;
+  const rafThrottle = useRef(null);
+  const isOverCanvas = useCallback(
+    (screenPos) => {
+      const el = canvasContainerRef.current;
+      if (!el) return false;
+      const r = el.getBoundingClientRect();
+      return screenPos.x >= r.left && screenPos.x <= r.right && screenPos.y >= r.top && screenPos.y <= r.bottom;
+    },
+    [canvasContainerRef]
+  );
+  const screenToWorldFromContainer = useCallback(
+    (screenPos) => {
+      const el = canvasContainerRef.current;
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      return screenToWorld({ x: screenPos.x - r.left, y: screenPos.y - r.top }, view);
+    },
+    [canvasContainerRef, view]
+  );
+  useEffect(() => {
+    if (!drag) return;
+    const handleMove = (e) => {
+      const screenPos = { x: e.clientX, y: e.clientY };
+      const current = dragRef.current;
+      if (!current) return;
+      if (rafThrottle.current !== null) {
+        dragRef.current = { ...current, screenPos };
+        setDrag(dragRef.current);
+        return;
+      }
+      rafThrottle.current = requestAnimationFrame(() => {
+        rafThrottle.current = null;
+        const active = dragRef.current;
+        if (!active) return;
+        let feedback = null;
+        if (capability.onDragOver && isOverCanvas(screenPos)) {
+          const world = screenToWorldFromContainer(screenPos);
+          if (world) feedback = capability.onDragOver(world, active.item, state, config);
+        }
+        setDrag({ ...active, screenPos, feedback });
+      });
+    };
+    const handleUp = (e) => {
+      const screenPos = { x: e.clientX, y: e.clientY };
+      const active = dragRef.current;
+      if (!active) return;
+      if (rafThrottle.current !== null) {
+        cancelAnimationFrame(rafThrottle.current);
+        rafThrottle.current = null;
+      }
+      if (isOverCanvas(screenPos)) {
+        const world = screenToWorldFromContainer(screenPos);
+        if (world) {
+          const nextState = capability.onDrop(world, active.item, state, config);
+          setState(nextState);
+          emit("canvas.itemAdded");
+        }
+      }
+      setDrag(null);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+    return () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+    };
+  }, [drag, capability, state, config, setState, emit, isOverCanvas, screenToWorldFromContainer]);
+  const startDrag = useCallback((item, originScreenPos) => {
+    setDrag({ item, screenPos: originScreenPos, feedback: null });
+  }, []);
+  return { drag, startDrag };
+}
+function DragOverlay({ drag }) {
+  if (!drag) return null;
+  return /* @__PURE__ */ jsx(DragGhost, { item: drag.item, screenPos: drag.screenPos });
+}
+function Palette({ items, onDragStart, className }) {
+  return /* @__PURE__ */ jsx("div", { className: className ? `lk-palette ${className}` : "lk-palette", children: items.map((item) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "lk-palette__item",
+      onPointerDown: (e) => {
+        e.preventDefault();
+        onDragStart(item, { x: e.clientX, y: e.clientY });
+      },
+      children: /* @__PURE__ */ jsx("span", { className: "lk-palette__label", children: item.label })
+    },
+    item.id
+  )) });
+}
+var LabContext = createContext(null);
+function useLabContext() {
+  const ctx = useContext(LabContext);
+  if (ctx === null) {
+    throw new Error("useLabContext must be used inside <Lab>");
+  }
+  return ctx;
+}
+function DefaultSidebar({ ctx }) {
+  if (ctx.configFields.length === 0) {
+    return /* @__PURE__ */ jsx(Sidebar, { title: ctx.instrumentName, children: /* @__PURE__ */ jsxs("div", { className: "lk-sidebar__placeholder", children: [
+      ctx.instrumentName,
+      " has no config fields."
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Sidebar, { title: ctx.instrumentName, children: /* @__PURE__ */ jsx(
+    ControlPanel,
+    {
+      fields: ctx.configFields,
+      config: ctx.config,
+      setConfig: (key, value) => ctx.setConfig(key, value)
+    }
+  ) });
+}
+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),
+      "%"
+    ] })
+  ] });
+}
+function DefaultToolbar({ ctx }) {
+  return /* @__PURE__ */ jsxs(Toolbar, { children: [
+    ctx.hasUndo && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.undo, disabled: !ctx.canUndo, title: "Undo (Cmd/Ctrl+Z)", children: "Undo" }),
+      /* @__PURE__ */ jsx(
+        Toolbar.Button,
+        {
+          onClick: ctx.redo,
+          disabled: !ctx.canRedo,
+          title: "Redo (Cmd/Ctrl+Shift+Z)",
+          children: "Redo"
+        }
+      ),
+      /* @__PURE__ */ jsx(Toolbar.Spacer, {})
+    ] }),
+    ctx.hasCanvas && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.zoomOut, title: "Zoom out", children: "\u2212" }),
+      /* @__PURE__ */ jsxs("span", { className: "lk-toolbar__zoom-label", children: [
+        Math.round(ctx.zoom * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.zoomIn, title: "Zoom in", children: "+" }),
+      /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.resetZoom, title: "Reset zoom", children: "1:1" }),
+      /* @__PURE__ */ jsx(Toolbar.Spacer, {})
+    ] }),
+    /* @__PURE__ */ jsx(Toolbar.Button, { onClick: () => ctx.saveSnapshot(), title: "Save snapshot (Cmd/Ctrl+S)", children: "Save" }),
+    ctx.savedSnapshots.length > 0 && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: "lk-toolbar__load-select",
+        "aria-label": "Load snapshot",
+        defaultValue: "",
+        onChange: (e) => {
+          const id = e.target.value;
+          if (id) {
+            ctx.loadSnapshot(id);
+            e.target.value = "";
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Load\u2026" }),
+          ctx.savedSnapshots.map((sn) => /* @__PURE__ */ jsx("option", { value: sn.id, children: sn.name }, sn.id))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Toolbar.Spacer, {}),
+    /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.clone, title: "Clone workspace", children: "Clone" }),
+    /* @__PURE__ */ jsx(Toolbar.Button, { onClick: ctx.reset, title: "Reset workspace", children: "Reset" }),
+    /* @__PURE__ */ jsx(
+      Toolbar.Button,
+      {
+        onClick: ctx.close,
+        disabled: ctx.isLastWorkspace,
+        title: ctx.isLastWorkspace ? "Cannot close the last workspace" : "Close workspace",
+        children: "Close"
+      }
+    )
+  ] });
+}
+function WorkspaceChrome({
+  workspaceId,
+  record,
+  instrument,
+  isLastWorkspace,
+  toolbar,
+  sidebar,
+  statusBar,
+  undoBindings,
+  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);
+  const toolbarCtx = useMemo(() => {
+    const setZoom = (z) => {
+      updateWorkspaceView(workspaceId, { ...record.view, zoom: z });
+    };
+    return {
+      workspaceId,
+      instrumentName: record.instrumentName,
+      hasUndo: instrument.undo != null,
+      canUndo: undoBindings?.canUndo ?? false,
+      canRedo: undoBindings?.canRedo ?? false,
+      undo: undoBindings?.undo ?? (() => {
+      }),
+      redo: undoBindings?.redo ?? (() => {
+      }),
+      zoom: record.view.zoom,
+      setZoom,
+      zoomIn: () => setZoom(record.view.zoom * 1.25),
+      zoomOut: () => setZoom(record.view.zoom * 0.8),
+      resetZoom: () => setZoom(1),
+      hasCanvas: instrument.canvas != null,
+      savedSnapshots: lab.savedSnapshots.filter((s) => s.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
+    };
+  }, [workspaceId, record, instrument, lab, isLastWorkspace, updateWorkspaceView, undoBindings]);
+  const sidebarCtx = useMemo(
+    () => ({
+      workspaceId,
+      instrumentName: record.instrumentName,
+      configFields: instrument.configSchema?.() ?? [],
+      config: record.config,
+      setConfig: (key, value) => {
+        const prevConfig = record.config;
+        if (process.env.NODE_ENV !== "production" && !(key in prevConfig)) {
+          console.warn(
+            `[labkit] setConfig: unknown key "${key}" for instrument "${record.instrumentName}"`
+          );
+        }
+        updateWorkspaceConfig(workspaceId, key, value);
+        if (instrument.onConfigChange) {
+          const nextConfig = { ...prevConfig, [key]: value };
+          const nextState = instrument.onConfigChange(nextConfig, prevConfig, record.state);
+          updateWorkspaceState(workspaceId, nextState);
+        }
+      }
+    }),
+    [workspaceId, record, instrument, updateWorkspaceConfig, updateWorkspaceState]
+  );
+  const statusCtx = {
+    workspaceId,
+    instrumentName: record.instrumentName,
+    zoom: record.view.zoom
+  };
+  const handleKeyDown = (e) => {
+    const mod = e.metaKey || e.ctrlKey;
+    if (!mod) return;
+    if (e.key === "z" || e.key === "Z") {
+      e.preventDefault();
+      if (e.shiftKey) toolbarCtx.redo();
+      else toolbarCtx.undo();
+    } else if (e.key === "s" || e.key === "S") {
+      e.preventDefault();
+      toolbarCtx.saveSnapshot();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "lk-workspace",
+      "aria-label": `Workspace ${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: [
+            sidebar ? sidebar(sidebarCtx) : /* @__PURE__ */ jsx(DefaultSidebar, { ctx: sidebarCtx }),
+            sidebarExtras
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "lk-workspace__content", children })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "lk-workspace__status", children: statusBar ? statusBar(statusCtx) : /* @__PURE__ */ jsx(DefaultStatusBar, { ctx: statusCtx }) })
+      ]
+    }
+  );
+}
+function Workspace({ 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 (!record) {
+    return /* @__PURE__ */ jsxs("div", { className: "lk-workspace lk-workspace--unknown", children: [
+      "Workspace 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: [
+      "Unknown instrument: ",
+      record.instrumentName
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    WorkspaceRuntime,
+    {
+      record,
+      instrument,
+      store: storeCtx.store,
+      isLast: lab.workspaces.length <= 1
+    }
+  );
+}
+function WorkspaceRuntime({ 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 busRef = useRef(null);
+  if (busRef.current === null) busRef.current = createEventBus();
+  const bus = busRef.current;
+  const [layerVisibility, setLayerVisibility] = useState({});
+  const [layerOrder, setLayerOrder] = useState(null);
+  const undoCap = instrument.undo;
+  const undoEvents = useMemo(() => new Set(undoCap?.snapshotOn ?? ["state.change"]), [undoCap]);
+  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);
+    if (!current) return;
+    const snap = structuredClone(current.state);
+    updateWorkspaceUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
+  };
+  const setView = (v) => updateWorkspaceView(record.id, v);
+  const renderCtx = {
+    state: record.state,
+    config: record.config,
+    setState: (next) => {
+      snapshotIfNeeded("state.change");
+      updateWorkspaceState(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);
+      bus.emit("config.change");
+      bus.emit(evt);
+    },
+    workspace: {
+      id: record.id,
+      zoom: record.view.zoom,
+      setZoom: (z) => updateWorkspaceView(record.id, { ...record.view, zoom: z })
+    },
+    emit: (event) => {
+      snapshotIfNeeded(event);
+      bus.emit(event);
+    }
+  };
+  const undoBindings = undoCap ? {
+    canUndo: record.undoStack.past.length > 0,
+    canRedo: record.undoStack.future.length > 0,
+    undo: () => {
+      const result = undo(record.undoStack, structuredClone(record.state));
+      if (!result) return;
+      updateWorkspaceState(record.id, result.snapshot);
+      updateWorkspaceUndoStack(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);
+    }
+  } : void 0;
+  const canvasLayers = useMemo(() => {
+    if (!instrument.canvas) return [];
+    const baseLayers = instrument.canvas.layers;
+    const ordered = layerOrder ? [...baseLayers].sort((a, b) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b.id)) : baseLayers;
+    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 })
+    }));
+  }, [instrument.canvas, record.state, record.config, layerVisibility, layerOrder]);
+  const layerDescriptors = useMemo(() => {
+    if (!instrument.layers) return [];
+    return instrument.layers.ids.map((lid) => ({ id: lid, label: lid }));
+  }, [instrument.layers]);
+  const dragDropResult = useDragDrop({
+    capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s) => s },
+    canvasContainerRef,
+    view: record.view,
+    state: record.state,
+    config: record.config,
+    setState: (next) => {
+      snapshotIfNeeded("canvas.itemAdded");
+      updateWorkspaceState(record.id, next);
+    },
+    emit: (evt) => {
+      snapshotIfNeeded(evt);
+      bus.emit(evt);
+    }
+  });
+  const paletteItems = useMemo(() => {
+    if (!instrument.dragDrop) return [];
+    const p = instrument.dragDrop.palette;
+    return typeof p === "function" ? p(record.state, record.config) : p;
+  }, [instrument.dragDrop, record.state, record.config]);
+  const layersWithFeedback = useMemo(() => {
+    if (!dragDropResult.drag?.feedback) return canvasLayers;
+    const fb = dragDropResult.drag.feedback;
+    const screen = dragDropResult.drag.screenPos;
+    return [
+      ...canvasLayers,
+      {
+        id: "__lk_drag_feedback",
+        visible: true,
+        render: (ctx) => {
+          const el = canvasContainerRef.current;
+          if (!el) return;
+          const r = el.getBoundingClientRect();
+          ctx.save();
+          ctx.strokeStyle = fb.ok ? "#3a7" : "#c44";
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+          ctx.arc(screen.x - r.left, screen.y - r.top, 16, 0, Math.PI * 2);
+          ctx.stroke();
+          ctx.restore();
+        }
+      }
+    ];
+  }, [canvasLayers, dragDropResult.drag]);
+  let body;
+  if (instrument.canvas) {
+    body = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: canvasContainerRef,
+        className: "lk-workspace__canvas-host",
+        style: { width: "100%", height: "100%", position: "relative" },
+        children: [
+          /* @__PURE__ */ jsx(CanvasStack, { layers: layersWithFeedback, view: record.view, onViewChange: setView }),
+          /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
+        ]
+      }
+    );
+  } else {
+    body = instrument.render(renderCtx);
+  }
+  const paletteNode = paletteItems.length > 0 ? /* @__PURE__ */ jsx(Palette, { items: paletteItems, onDragStart: dragDropResult.startDrag }) : null;
+  const layerListNode = instrument.layers && layerDescriptors.length > 0 ? /* @__PURE__ */ jsx(
+    LayerList,
+    {
+      layers: layerDescriptors,
+      visibility: layerVisibility,
+      onReorder: (next) => {
+        setLayerOrder(next.map((l) => l.id));
+        bus.emit("layers.reorder");
+      },
+      onToggle: (lid, visible) => {
+        setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
+        bus.emit("layers.toggle");
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(
+    WorkspaceChrome,
+    {
+      workspaceId: record.id,
+      record,
+      instrument,
+      isLastWorkspace: isLast,
+      undoBindings,
+      sidebarExtras: /* @__PURE__ */ jsxs(Fragment, { children: [
+        paletteNode,
+        layerListNode
+      ] }),
+      children: body
+    }
+  );
+}
+
+// src/workspace/workspaceOps.ts
+var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
+function findInstrument(instruments, name) {
+  const found = instruments.find((i) => i.name === name);
+  if (!found) {
+    throw new Error(`[labkit] Unknown instrument: "${name}"`);
+  }
+  return found;
+}
+function initialView(instrument) {
+  return instrument.canvas?.initialView ? structuredClone(instrument.canvas.initialView) : { ...DEFAULT_VIEW, pan: { ...DEFAULT_VIEW.pan } };
+}
+function addWorkspace(workspaces, instruments, instrumentName) {
+  const instrument = findInstrument(instruments, instrumentName);
+  const config = instrument.defaultConfig();
+  const state = instrument.initialState(config);
+  const record = {
+    id: crypto.randomUUID(),
+    instrumentName,
+    config,
+    state,
+    view: initialView(instrument),
+    undoStack: { past: [], future: [] }
+  };
+  return [...workspaces, record];
+}
+function cloneWorkspace(workspaces, id) {
+  const sourceIdx = workspaces.findIndex((w) => w.id === id);
+  const source = workspaces[sourceIdx];
+  if (!source) return workspaces;
+  const clone = {
+    ...source,
+    id: crypto.randomUUID(),
+    config: structuredClone(source.config),
+    state: structuredClone(source.state),
+    view: structuredClone(source.view),
+    undoStack: { past: [], future: [] }
+  };
+  return [...workspaces.slice(0, sourceIdx + 1), clone, ...workspaces.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 resetWorkspace(workspaces, id, instruments) {
+  const idx = workspaces.findIndex((w) => w.id === id);
+  const current = workspaces[idx];
+  if (!current) return workspaces;
+  const instrument = findInstrument(instruments, current.instrumentName);
+  const config = instrument.defaultConfig();
+  const state = instrument.initialState(config);
+  const reset = {
+    ...current,
+    config,
+    state,
+    view: initialView(instrument)
+  };
+  return [...workspaces.slice(0, idx), reset, ...workspaces.slice(idx + 1)];
+}
+function LabShell({ title, children, header, footer, theme = "auto" }) {
+  const themeClass = theme === "light" ? " lk-theme-light" : theme === "interstellar" ? " lk-theme-interstellar" : "";
+  return /* @__PURE__ */ jsxs("div", { className: `lk-root lk-shell${themeClass}`, children: [
+    /* @__PURE__ */ jsxs("header", { className: "lk-shell-header", children: [
+      /* @__PURE__ */ jsx("h1", { className: "lk-shell-title", children: title }),
+      header && /* @__PURE__ */ jsx("div", { className: "lk-shell-header-actions", children: header })
+    ] }),
+    /* @__PURE__ */ jsx("main", { className: "lk-shell-body", children }),
+    footer && /* @__PURE__ */ jsx("footer", { className: "lk-shell-footer", children: footer })
+  ] });
+}
+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 });
+}
+function buildStore(instruments, defaultInstrument, storage, storageKey, initialTheme) {
+  const store = createLabStore({ storageKey, storage, initialTheme });
+  if (store.getState().workspaces.length === 0) {
+    const seeded = addWorkspace([], instruments, defaultInstrument);
+    const record = seeded[0];
+    if (record) {
+      const { undoStack: _undoStack, ...rest } = record;
+      store.getState().addWorkspace(rest);
+    }
+  }
+  return store;
+}
+var NEBULA_SLOTS = [
+  { cx: "18%", cy: "30%", sx: "60%", sy: "80%", stop: "70%" },
+  { cx: "78%", cy: "70%", sx: "55%", sy: "90%", stop: "65%" },
+  { cx: "50%", cy: "50%", sx: "50%", sy: "70%", stop: "75%" },
+  { cx: "12%", cy: "82%", sx: "50%", sy: "70%", stop: "70%" },
+  { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
+];
+function buildNebula(colors) {
+  const blobs = colors.map((c, i) => {
+    const p = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
+    return `radial-gradient(ellipse ${p.sx} ${p.sy} at ${p.cx} ${p.cy}, color-mix(in srgb, ${c} 22%, transparent), transparent ${p.stop})`;
+  });
+  blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
+  return blobs.join(", ");
+}
+function Lab({
+  instruments,
+  defaultInstrument,
+  storage,
+  storageKey,
+  theme,
+  nebula,
+  title,
+  children
+}) {
+  if (process.env.NODE_ENV !== "production" && instruments.length === 0) {
+    throw new Error("[labkit] <Lab> requires a non-empty `instruments` array");
+  }
+  const storeRef = useRef(null);
+  if (storeRef.current === null) {
+    storeRef.current = buildStore(
+      instruments,
+      defaultInstrument,
+      storage ?? noneAdapter,
+      storageKey ?? "labkit",
+      theme ?? "auto"
+    );
+  }
+  const store = storeRef.current;
+  const workspaces = useStore(store, (s) => s.workspaces);
+  const savedSnapshots = useStore(store, (s) => s.savedSnapshots);
+  const themeValue = useStore(store, (s) => s.theme);
+  useEffect(() => {
+    if (theme && theme !== store.getState().theme) {
+      store.getState().setTheme(theme);
+    }
+  }, [theme, store]);
+  const contextValue = useMemo(() => {
+    const replaceWorkspaces = (next) => {
+      const currentById = new Map(store.getState().workspaces.map((w) => [w.id, w]));
+      const merged = next.map((w) => currentById.get(w.id) ?? w);
+      store.setState({ workspaces: merged });
+      store.getState().setTheme(store.getState().theme);
+    };
+    return {
+      instruments,
+      workspaces,
+      addWorkspace: (instrumentName) => {
+        const next = addWorkspace(store.getState().workspaces, instruments, instrumentName);
+        replaceWorkspaces(next);
+      },
+      cloneWorkspace: (id) => {
+        const next = cloneWorkspace(store.getState().workspaces, id);
+        replaceWorkspaces(next);
+      },
+      closeWorkspace: (id) => {
+        const next = closeWorkspace(store.getState().workspaces, id);
+        replaceWorkspaces(next);
+      },
+      resetWorkspace: (id) => {
+        const next = resetWorkspace(store.getState().workspaces, id, instruments);
+        const record = next.find((w) => w.id === id);
+        if (!record) return;
+        store.setState((s) => ({
+          workspaces: s.workspaces.map(
+            (w) => w.id === id ? { ...w, config: record.config, state: record.state, view: record.view } : w
+          )
+        }));
+        store.getState().updateWorkspaceView(id, record.view);
+      },
+      savedSnapshots,
+      saveSnapshot: (workspaceId, name) => {
+        store.getState().saveSnapshot(workspaceId, name ?? `Save ${(/* @__PURE__ */ new Date()).toLocaleString()}`);
+      },
+      loadSnapshot: (workspaceId, snapshotId) => {
+        store.getState().loadSnapshot(snapshotId, workspaceId);
+      },
+      deleteSnapshot: (snapshotId) => {
+        store.getState().deleteSnapshot(snapshotId);
+      },
+      theme: themeValue,
+      setTheme: (t) => {
+        store.getState().setTheme(t);
+      }
+    };
+  }, [instruments, workspaces, savedSnapshots, themeValue, store]);
+  const themeClass = themeValue === "light" ? "lk-theme-light" : themeValue === "interstellar" ? "lk-theme-interstellar" : "";
+  const nebulaStyle = themeValue === "interstellar" && nebula && nebula.length > 0 ? { ["--lk-space-nebula"]: buildNebula(nebula) } : void 0;
+  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: `lk-lab ${themeClass}`.trim(), style: nebulaStyle, children: /* @__PURE__ */ jsx(LabShell, { title: title ?? "Labkit", theme: themeValue, header: children, children: /* @__PURE__ */ jsx(WorkspaceGrid, { children: workspaces.map((w) => /* @__PURE__ */ jsx(Workspace, { id: w.id }, w.id)) }) }) }) }) });
+}
+function CurveField({
+  values,
+  min,
+  max,
+  step,
+  width,
+  height = 110,
+  defaults,
+  onChange,
+  marks
+}) {
+  const points = useMemo(() => {
+    const out = [];
+    for (let i = 0; i + 1 < values.length; i += 2) out.push({ x: values[i], y: values[i + 1] });
+    return out;
+  }, [values]);
+  const handleChange = useCallback(
+    (next) => {
+      const flat = new Array(next.length * 2);
+      for (let i = 0; i < next.length; i++) {
+        const ySnap = Math.round(next[i].y / step) * step;
+        const y = Math.max(min, Math.min(max, ySnap));
+        flat[i * 2] = next[i].x;
+        flat[i * 2 + 1] = y;
+      }
+      Ae("curve-field", "handleChange", {
+        nLen: next.length,
+        flatLen: flat.length,
+        sample: flat.slice(0, 4)
+      });
+      onChange(flat);
+    },
+    [onChange, min, max, step]
+  );
+  const handleFlip = useCallback(() => {
+    const flipped = [];
+    for (let i = 0; i + 1 < values.length; i += 2) {
+      flipped.push({ x: 1 - values[i], y: values[i + 1] });
+    }
+    flipped.sort((a, b) => a.x - b.x);
+    const out = [];
+    for (const p of flipped) out.push(p.x, p.y);
+    onChange(out);
+  }, [values, onChange]);
+  const handleFlipVertical = useCallback(() => {
+    const mid = (min + max) / 2;
+    const flipped = new Array(values.length);
+    for (let i = 0; i + 1 < values.length; i += 2) {
+      flipped[i] = values[i];
+      flipped[i + 1] = 2 * mid - values[i + 1];
+    }
+    onChange(flipped);
+  }, [values, min, max, onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "lk-curve-field", children: [
+    /* @__PURE__ */ jsxs("div", { className: "lk-curve-field__plot", children: [
+      /* @__PURE__ */ jsx(
+        ao,
+        {
+          value: points,
+          onChange: handleChange,
+          domain: "1d",
+          constrain: "function",
+          xRange: [0, 1],
+          yRange: [min, max],
+          width,
+          height,
+          endpoints: "pinned-x",
+          addPointMode: "click-curve",
+          minPoints: 2,
+          grid: {},
+          history: false
+        }
+      ),
+      marks && marks.length > 0 && /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "lk-curve-field__marks",
+          width,
+          height,
+          viewBox: `0 0 ${width} ${height}`,
+          "aria-hidden": "true",
+          children: marks.map((m) => {
+            const color = m.color ?? "#ffcc00";
+            if (m.kind === "band") {
+              const x0 = Math.max(0, Math.min(1, m.x[0])) * width;
+              const x1 = Math.max(0, Math.min(1, m.x[1])) * width;
+              const left = Math.min(x0, x1);
+              const w = Math.abs(x1 - x0);
+              return /* @__PURE__ */ jsxs("g", { children: [
+                /* @__PURE__ */ jsx("rect", { x: left, y: 0, width: w, height, fill: color, fillOpacity: 0.4 }),
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: left,
+                    y1: 0,
+                    x2: left,
+                    y2: height,
+                    stroke: color,
+                    strokeOpacity: 0.85,
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: left + w,
+                    y1: 0,
+                    x2: left + w,
+                    y2: height,
+                    stroke: color,
+                    strokeOpacity: 0.85,
+                    strokeWidth: 1
+                  }
+                )
+              ] }, `band-${m.x[0]}-${m.x[1]}-${color}`);
+            }
+            const x = Math.max(0, Math.min(1, m.x)) * width;
+            return /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: x,
+                y1: 0,
+                x2: x,
+                y2: height,
+                stroke: color,
+                strokeWidth: 1
+              },
+              `mark-${m.x}-${color}`
+            );
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "lk-curve-field__actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "lk-curve-field__action", onClick: handleFlip, children: "Flip horizontally" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "lk-curve-field__action", onClick: handleFlipVertical, children: "Flip vertically" }),
+      defaults && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-curve-field__action",
+          onClick: () => onChange([...defaults]),
+          children: "Reset"
+        }
+      )
+    ] })
+  ] });
+}
+function Subpanel({ title, children, className }) {
+  const cls = className ? `lk-subpanel ${className}` : "lk-subpanel";
+  return /* @__PURE__ */ jsxs("div", { className: cls, children: [
+    /* @__PURE__ */ jsxs("h4", { className: "lk-subpanel__title", children: [
+      /* @__PURE__ */ jsx("span", { children: title }),
+      /* @__PURE__ */ jsx("hr", {})
+    ] }),
+    children
+  ] });
+}
+function EffectCard({
+  title,
+  primary,
+  accent,
+  index,
+  expanded = true,
+  onToggleExpanded,
+  onRemove,
+  draggable,
+  onPressHandle,
+  onReleaseHandle,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  dragging,
+  children,
+  className
+}) {
+  const stateClass = `${expanded ? "is-expanded" : "is-collapsed"}${dragging ? " is-dragging" : ""}${accent ? " has-accent" : ""}`;
+  const cls = `lk-effect-card ${stateClass}${className ? ` ${className}` : ""}`;
+  const style = accent ? { "--lk-panel-accent": accent } : void 0;
+  const headProps = onToggleExpanded ? {
+    role: "button",
+    tabIndex: 0,
+    onClick: onToggleExpanded,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onToggleExpanded();
+      }
+    }
+  } : {};
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: native HTML5 drag-and-drop container — drag events are not click/keyboard interactions and have no semantic element; the in-card handle and header carry the a11y affordances.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cls,
+        style,
+        draggable,
+        onDragStart,
+        onDragEnd,
+        onDragOver,
+        onDragLeave,
+        onDrop,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "lk-effect-card__head", ...headProps, children: [
+            index != null ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "lk-effect-card__index-badge lk-effect-card__handle",
+                title: "Drag to reorder \xB7 click to toggle",
+                "aria-label": `Item ${index + 1} \u2014 drag to reorder, click to toggle`,
+                onMouseDown: onPressHandle,
+                onMouseUp: onReleaseHandle,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleExpanded?.();
+                },
+                children: index + 1
+              }
+            ) : /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "lk-effect-card__handle",
+                "aria-hidden": "true",
+                title: "Drag to reorder",
+                onMouseDown: onPressHandle,
+                onMouseUp: onReleaseHandle,
+                children: /* @__PURE__ */ jsx(DragHandleIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "lk-effect-card__title", children: title }),
+            primary != null && /* @__PURE__ */ jsx("span", { className: "lk-effect-card__primary", children: primary }),
+            onRemove && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "lk-effect-card__remove",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRemove();
+                },
+                title: "Remove",
+                "aria-label": "Remove",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          expanded && /* @__PURE__ */ jsx("div", { className: "lk-effect-card__body", children })
+        ]
+      }
+    )
+  );
+}
+function DragHandleIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "10", height: "14", viewBox: "0 0 10 14", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "1.3", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "3", r: "1.3", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "7", r: "1.3", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "1.3", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "11", r: "1.3", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "11", r: "1.3", fill: "currentColor" })
+  ] });
+}
+function EffectCardList({
+  items,
+  renderItem,
+  onReorder,
+  empty,
+  defaultExpandedIds
+}) {
+  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedIds ?? []));
+  const [draggingId, setDraggingId] = useState(null);
+  const [pressedId, setPressedId] = useState(null);
+  const [dropHint, setDropHint] = useState(
+    null
+  );
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: empty ?? /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list__empty", children: "No items." }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list", children: items.map((item) => {
+    const isExpanded = expanded.has(item.id);
+    const isDragging = draggingId === item.id;
+    const isPressed = pressedId === item.id;
+    const showHintBefore = dropHint && dropHint.id === item.id && dropHint.position === "before";
+    const showHintAfter = dropHint && dropHint.id === item.id && dropHint.position === "after";
+    const toggleExpanded = () => setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(item.id)) next.delete(item.id);
+      else next.add(item.id);
+      return next;
+    });
+    return /* @__PURE__ */ jsxs("div", { className: "lk-effect-card-list__wrap", children: [
+      showHintBefore && /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list__drop-hint" }),
+      renderItem(item, {
+        isExpanded,
+        isDragging,
+        toggleExpanded,
+        cardProps: {
+          expanded: isExpanded,
+          dragging: isDragging,
+          draggable: isPressed,
+          onToggleExpanded: toggleExpanded,
+          onPressHandle: () => setPressedId(item.id),
+          onReleaseHandle: () => setPressedId(null),
+          onDragStart: (e) => {
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.setData("text/plain", String(item.id));
+            setDraggingId(item.id);
+          },
+          onDragEnd: () => {
+            setDraggingId(null);
+            setPressedId(null);
+            setDropHint(null);
+          },
+          onDragOver: (e) => {
+            if (draggingId === null || draggingId === item.id) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "move";
+            const rect = e.currentTarget.getBoundingClientRect();
+            const position = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
+            setDropHint({ id: item.id, position });
+          },
+          onDragLeave: () => {
+            setDropHint((h) => h && h.id === item.id ? null : h);
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            if (draggingId === null || draggingId === item.id) {
+              setDropHint(null);
+              return;
+            }
+            const rect = e.currentTarget.getBoundingClientRect();
+            const position = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
+            onReorder(draggingId, item.id, position);
+            setDropHint(null);
+          }
+        }
+      }),
+      showHintAfter && /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list__drop-hint" })
+    ] }, String(item.id));
+  }) });
+}
+function PropertyGroup({
+  title,
+  hidden,
+  children,
+  className,
+  pack = "auto-color"
+}) {
+  if (hidden) return null;
+  const packClass = pack === "pairs" ? " lk-property-group--pairs" : "";
+  const cls = `lk-property-group${packClass}${className ? ` ${className}` : ""}`;
+  return /* @__PURE__ */ jsxs("div", { className: cls, children: [
+    /* @__PURE__ */ jsxs("h3", { className: "lk-property-group__title", children: [
+      /* @__PURE__ */ jsx("hr", {}),
+      /* @__PURE__ */ jsx("span", { children: title }),
+      /* @__PURE__ */ jsx("hr", {})
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "lk-property-group__body", children })
+  ] });
+}
+
+// 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: [
+    title != null && /* @__PURE__ */ jsx("h2", { className: "lk-property-panel__title", children: title }),
+    children
+  ] });
+}
+function PropertyList({ children, className, pack = "auto-color" }) {
+  const packClass = pack === "pairs" ? " lk-property-list--pairs" : "";
+  const cls = `lk-property-list${packClass}${className ? ` ${className}` : ""}`;
+  return /* @__PURE__ */ jsx("div", { className: cls, children });
+}
+function PropertyRow({
+  label,
+  readout,
+  variant = "default",
+  layout = "block",
+  children,
+  htmlFor,
+  className
+}) {
+  const variantClass = variant === "default" ? "" : ` lk-property-row--${variant}`;
+  const layoutClass = variant === "default" && layout === "inline" ? " lk-property-row--inline" : "";
+  const cls = `lk-property-row${variantClass}${layoutClass}${className ? ` ${className}` : ""}`;
+  return /* @__PURE__ */ jsxs("label", { className: cls, htmlFor, children: [
+    /* @__PURE__ */ jsxs("span", { className: "lk-property-row__label", children: [
+      label,
+      readout != null && /* @__PURE__ */ jsx("em", { className: "lk-property-row__readout", children: readout })
+    ] }),
+    children
+  ] });
+}
+function SliderRow({
+  label,
+  value,
+  min,
+  max,
+  step = 1,
+  onChange,
+  format,
+  unit,
+  layout
+}) {
+  const decimals = step >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(step))));
+  const effectiveFormat = format ?? ((n) => formatNumber(n, decimals));
+  return /* @__PURE__ */ jsx(
+    PropertyRow,
+    {
+      label,
+      readout: /* @__PURE__ */ jsx(
+        EditableReadout,
+        {
+          value,
+          min,
+          max,
+          format: effectiveFormat,
+          unit,
+          onCommit: onChange
+        }
+      ),
+      layout,
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          tabIndex: -1,
+          min,
+          max,
+          step,
+          value,
+          onChange: (e) => {
+            const v = Number(e.target.value);
+            Ae("property-panel", "slider", { label, value: v });
+            onChange(v);
+          }
+        }
+      )
+    }
+  );
+}
+function EditableReadout({ value, min, max, format, unit, onCommit }) {
+  const [draft, setDraft] = useState(null);
+  const fmt = (n) => format ? format(n) : formatNumber(n);
+  const displayValue = draft !== null ? draft : (() => {
+    const formatted = fmt(value);
+    return typeof formatted === "string" ? formatted : String(formatted);
+  })();
+  const suffix = unit == null ? null : typeof unit === "string" ? /* @__PURE__ */ jsx("span", { className: "lk-property-row__readout-unit", children: unit }) : unit;
+  const commit = () => {
+    if (draft !== null) {
+      const n = parseSignedNumber(draft);
+      if (Number.isFinite(n)) onCommit(Math.min(max, Math.max(min, n)));
+    }
+    setDraft(null);
+  };
+  return /* @__PURE__ */ jsxs("span", { className: "lk-property-row__readout-group", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        inputMode: "decimal",
+        className: "lk-property-row__readout-input",
+        value: displayValue,
+        onFocus: (e) => {
+          const formatted = fmt(value);
+          setDraft(typeof formatted === "string" ? formatted : String(formatted));
+          e.currentTarget.select();
+        },
+        onChange: (e) => setDraft(e.target.value.replace(/-/g, "\u2212")),
+        onBlur: commit,
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          e.currentTarget.focus();
+        },
+        onMouseDown: (e) => e.stopPropagation(),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            commit();
+            e.currentTarget.blur();
+          } else if (e.key === "Escape") {
+            setDraft(null);
+            e.currentTarget.blur();
+          }
+        }
+      }
+    ),
+    suffix
+  ] });
+}
+function ColorRow({
+  label,
+  value,
+  onChange,
+  alpha,
+  onAlphaChange,
+  alphaDisabled
+}) {
+  const showAlpha = alpha != null;
+  const className = alphaDisabled ? "lk-property-row--alpha-disabled" : void 0;
+  return /* @__PURE__ */ jsxs(PropertyRow, { label, variant: "color", className, children: [
+    /* @__PURE__ */ jsx("input", { type: "color", value, onChange: (e) => onChange(e.target.value) }),
+    showAlpha && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        className: "lk-property-row__alpha",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        value: alpha,
+        disabled: alphaDisabled,
+        onChange: (e) => onAlphaChange?.(Number(e.target.value))
+      }
+    )
+  ] });
+}
+function CheckboxRow({ label, value, onChange }) {
+  return /* @__PURE__ */ jsx(PropertyRow, { label, variant: "checkbox", children: /* @__PURE__ */ jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked) }) });
+}
+function TextRow({ label, value, onChange, placeholder, maxLength, layout }) {
+  return /* @__PURE__ */ jsx(PropertyRow, { label, layout, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value,
+      placeholder,
+      maxLength,
+      onChange: (e) => onChange(e.target.value)
+    }
+  ) });
+}
+function NumberRow({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  placeholder,
+  layout
+}) {
+  return /* @__PURE__ */ jsx(PropertyRow, { label, layout, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "number",
+      value,
+      min,
+      max,
+      step,
+      placeholder,
+      onChange: (e) => {
+        const raw = e.target.value;
+        if (raw === "") return;
+        const n = Number(raw);
+        if (Number.isFinite(n)) onChange(n);
+      }
+    }
+  ) });
+}
+function SelectRow({
+  label,
+  value,
+  options,
+  onChange,
+  layout
+}) {
+  return /* @__PURE__ */ jsx(PropertyRow, { label, layout, children: /* @__PURE__ */ jsx(
+    "select",
+    {
+      value,
+      onChange: (e) => {
+        const v = e.target.value;
+        Ae("property-panel", "select", { label, value: v });
+        onChange(v);
+      },
+      children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+    }
+  ) });
+}
+function ToggleRow({
+  label,
+  value,
+  options,
+  onChange,
+  layout
+}) {
+  return /* @__PURE__ */ jsx(PropertyRow, { label, layout, children: /* @__PURE__ */ jsx("div", { className: "lk-property-row__toggle", children: options.map((opt) => {
+    const selected = opt.value === value;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": selected,
+        className: selected ? "lk-property-row__toggle-button lk-property-row__toggle-button--selected" : "lk-property-row__toggle-button",
+        onClick: () => onChange(opt.value),
+        children: opt.label
+      },
+      opt.value
+    );
+  }) }) });
+}
+
+export { CheckboxRow, ColorRow, CurveField, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Lab, LabContext, LabShell, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SelectRow, SliderRow, Subpanel, TextRow, ToggleRow, Workspace, WorkspaceChrome, WorkspaceGrid, addWorkspace, cloneWorkspace, closeWorkspace, defineInstrument, detectCapabilities, gridDims, resetWorkspace, useLabContext, validateConfigSchema };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map