@weasel-js/labkit 1.0.2 → 1.0.4

package/dist/index.js

@@ -1,23 +1,25 @@
-export { LayerStack } from './chunk-2ZRE7WGQ.js';
-import { p, F } from './chunk-R4TACNW7.js';
-import './chunk-3P56ZCCJ.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-53XSBIUK.js';
-export { LabStoreContext, LabStoreProvider, WorkspaceIdContext, WorkspaceIdProvider, createMemoryAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, useExperimentState, useLabStore, useWorkspaceId } from './chunk-53XSBIUK.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, useLayoutEffect } from 'react';
+export { LayerStack } from './chunk-DEWXYFEU.js';
+import { p, F } from './chunk-BAPZPDDA.js';
+import './chunk-DWV7SFKR.js';
+import { Sidebar, StatusBar, Toolbar } from './chunk-PMAU3SEE.js';
+export { FpsMeter, ScaleIndicator, Sidebar, StatusBar, Toolbar } from './chunk-PMAU3SEE.js';
+import { LabStoreContext, createLabStore, noneAdapter } from './chunk-KSTEW2AF.js';
+export { LabStoreContext, LabStoreProvider, WorkspaceIdContext, WorkspaceIdProvider, createMemoryAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, useExperimentState, useLabStore, useWorkspaceId } from './chunk-KSTEW2AF.js';
+import { ControlPanel } from './chunk-5R2ATYPJ.js';
+export { ControlPanel } from './chunk-5R2ATYPJ.js';
+import { CanvasStack, screenToWorld } from './chunk-574LJAV4.js';
+export { CanvasStack, screenToWorld, worldToScreen } from './chunk-574LJAV4.js';
+export { CanvasStackContext } from './chunk-CPUJ3QXL.js';
+import { LayerList } from './chunk-SFL7NFKN.js';
+export { LayerList } from './chunk-SFL7NFKN.js';
+import { createEventBus, redo, undo, pushSnapshot } from './chunk-RL2LOLNI.js';
+export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
+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-RATE4LL3.js
+// ../theme/dist/chunk-STFENPNX.js
 var THEME_SOURCES = {
   "weasel": {
     "primitives": {
@@ -1390,6 +1384,13 @@ function resetWorkspace(workspaces, id, instruments) {
   };
   return [...workspaces.slice(0, idx), reset, ...workspaces.slice(idx + 1)];
 }
+function reorderWorkspaces(workspaces, ids) {
+  const byId = new Map(workspaces.map((w) => [w.id, w]));
+  const named = ids.map((id) => byId.get(id)).filter((w) => w !== void 0);
+  const seen = new Set(named.map((w) => w.id));
+  const rest = workspaces.filter((w) => !seen.has(w.id));
+  return [...named, ...rest];
+}
 function query() {
   if (typeof window === "undefined" || !window.matchMedia) return null;
   return window.matchMedia("(prefers-color-scheme: light)");
@@ -1421,14 +1422,107 @@ 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-workspaces");
+var STRATEGIES = { grid: gridStrategy };
+var KIND = "workspace";
+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 WorkspaceGrid({
+  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-workspace-tile", children: [
+          /* @__PURE__ */ jsx(DragHandle, { nodeId: node.id, className: "lk-workspace-tile__grip", children: /* @__PURE__ */ jsx("span", { className: "lk-workspace-tile__grip-dots", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsx("div", { className: "lk-workspace-tile__body", children: content })
+        ] });
+      }
+    };
+  }, [nodeIds, items, reorderable]);
+  const grid = /* @__PURE__ */ jsx(
+    Container,
+    {
+      parentId: ZONE_ID,
+      chrome,
+      className: "lk-workspace-grid 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 });
@@ -1484,6 +1578,7 @@ function Lab({
   const workspaces = useStore(store, (s) => s.workspaces);
   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) {
@@ -1512,6 +1607,9 @@ function Lab({
         const next = closeWorkspace(store.getState().workspaces, id);
         replaceWorkspaces(next);
       },
+      reorderWorkspaces: (ids) => {
+        replaceWorkspaces(reorderWorkspaces(store.getState().workspaces, ids));
+      },
       resetWorkspace: (id) => {
         const next = resetWorkspace(store.getState().workspaces, id, instruments);
         const record = next.find((w) => w.id === id);
@@ -1547,7 +1645,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(
+        WorkspaceGrid,
+        {
+          ids: workspaces.map((w) => w.id),
+          resizable: true,
+          reorderable: true,
+          onReorder: (ids) => contextValue.reorderWorkspaces(ids),
+          layout,
+          onLayoutChange: (next) => store.getState().setLayout(next),
+          children: workspaces.map((w) => /* @__PURE__ */ jsx(Workspace, { id: w.id }, w.id))
+        }
+      ) })
     }
   ) }) });
 }
@@ -1610,7 +1719,7 @@ function CurveField({
         F,
         {
           value: points,
-          onChange: handleChange,
+          onInput: handleChange,
           domain: "1d",
           constrain: "function",
           xRange: [0, 1],
@@ -2169,6 +2278,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, Workspace, WorkspaceChrome, WorkspaceGrid, addWorkspace, cloneWorkspace, closeWorkspace, defineInstrument, detectCapabilities, interstellarTheme, reorderWorkspaces, resetWorkspace, useLabContext, validateConfigSchema };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map