@fieldnotes/react 0.13.0 → 0.14.1

package/README.md

@@ -8,13 +8,42 @@ React bindings for the [Field Notes](https://github.com/IrakliDevelop/fieldnotes
 npm install @fieldnotes/core @fieldnotes/react
 ```
 
-Requires React 18+.
+Requires React 18+. Using Vue or Svelte? See [`@fieldnotes/vue`](../vue) and [`@fieldnotes/svelte`](../svelte).
 
 ## Quick Start
 
 Full runnable example: `examples/react-app` — `pnpm --filter fieldnotes-react-example dev`
 
-The canvas needs a container with a defined size — it fills whatever it's given:
+The canvas needs a container with a defined size — it fills whatever it's given. With no `tools`
+prop and no tools registered in `onReady`, it registers the default tool bundle
+(`createDefaultTools()`: hand, select, pencil, eraser, arrow, note, text, shape) with `select`
+active, so a persisting board is one line:
+
+```tsx
+import { FieldNotesCanvas } from '@fieldnotes/react';
+import type { CanvasState } from '@fieldnotes/core';
+
+const saved = localStorage.getItem('board') ?? undefined;
+const save = (state: CanvasState) => localStorage.setItem('board', JSON.stringify(state));
+
+export function App() {
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <FieldNotesCanvas
+        initialData={saved}
+        onChange={save}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </div>
+  );
+}
+```
+
+`initialData` takes a saved state object or JSON string. `onChange` receives `viewport.exportState()`,
+trailing-debounced by `changeDebounceMs` (default 250); a pending call is flushed on unmount, and
+the initial load is not reported as a change.
+
+For your own toolbar, pass an explicit tool array and control the active tool:
 
 ```tsx
 import { useState } from 'react';
@@ -80,14 +109,22 @@ function Toolbar({ tool, onSelect }: { tool: string; onSelect: (name: string) =>
 
 Not all props are reactive — the canvas is stateful. Changing a mount-only prop after mount has no effect:
 
-| Prop                               | Reactivity                                                                          |
-| ---------------------------------- | ----------------------------------------------------------------------------------- |
-| `options`                          | Mount-only — the canvas is stateful; construct with the right options               |
-| `tools`                            | Reactive, append-only (tools cannot be unregistered). Hoist the array out of render |
-| `tool` / `onToolChange`            | Reactive (controlled). Memoize the callback                                         |
-| `defaultTool`                      | Mount-only (uncontrolled initial tool)                                              |
-| `snapToGrid` (deprecated)          | Reactive compatibility prop; prefer a domain constraint service                     |
-| `className` / `style` / `children` | Reactive (plain React)                                                              |
+| Prop                               | Reactivity                                                                   |
+| ---------------------------------- | ---------------------------------------------------------------------------- |
+| `options`                          | Mount-only — the canvas is stateful; construct with the right options        |
+| `tools`                            | Array: reactive, append-only. Omitted or `'default'`: mount-only (see below) |
+| `initialData`                      | Mount-only — loaded once before `onReady`                                    |
+| `onChange` / `changeDebounceMs`    | Reactive — the latest callback is used without resubscribing                 |
+| `tool` / `onToolChange`            | Reactive (controlled). Memoize the callback                                  |
+| `defaultTool`                      | Mount-only (uncontrolled initial tool)                                       |
+| `snapToGrid` (deprecated)          | Reactive compatibility prop; prefer a domain constraint service              |
+| `className` / `style` / `children` | Reactive (plain React)                                                       |
+
+`tools` as an array registers each tool once (tools cannot be unregistered); hoist it out of render.
+`tools="default"` registers `createDefaultTools()` at mount, before `onReady` (so you can customise
+them there). Omitted registers the same bundle after `onReady` only when neither `options.tools` is
+set nor any tool was registered by then, then activates `tool`, `defaultTool` or `select`; hosts
+that register tools in `onReady` get no defaults. `tools={[]}` registers nothing.
 
 Runtime changes beyond these go through the viewport — access it via `useViewport()` or the ref. Grid snapping is domain behavior; VTT consumers should configure `GridController` and its constraint service rather than adopting the deprecated React prop. The background pattern is constructor-only (`options.background`).
 
@@ -352,11 +389,11 @@ export class StampTool implements Tool {
 Register alongside the built-in tools:
 
 ```tsx
-import { HandTool, SelectTool } from '@fieldnotes/core';
+import { createDefaultTools } from '@fieldnotes/core';
 import { StampTool } from './StampTool';
 
 // Hoisted — stable reference across renders
-const TOOLS = [new HandTool(), new SelectTool(), new StampTool()];
+const TOOLS = [...createDefaultTools(), new StampTool()];
 
 function App() {
   const [tool, setTool] = useState('select');

package/dist/index.cjs

@@ -56,6 +56,9 @@ var FieldNotesCanvas = (0, import_react2.forwardRef)(
     defaultTool,
     tool,
     onToolChange,
+    initialData,
+    onChange,
+    changeDebounceMs = 250,
     snapToGrid,
     className,
     style,
@@ -64,23 +67,65 @@ var FieldNotesCanvas = (0, import_react2.forwardRef)(
   }, ref) {
     const containerRef = (0, import_react2.useRef)(null);
     const [viewport, setViewport] = (0, import_react2.useState)(null);
+    const changeRef = (0, import_react2.useRef)({ onChange, changeDebounceMs });
+    changeRef.current = { onChange, changeDebounceMs };
     (0, import_react2.useImperativeHandle)(ref, () => ({ viewport }), [viewport]);
     (0, import_react2.useEffect)(() => {
       const el = containerRef.current;
       if (!el) return;
       const vp = new import_core.Viewport(el, options);
-      if (tools) {
-        for (const t of tools) {
-          vp.toolManager.register(t);
-        }
+      const activate = (fallback) => {
+        const name = tool ?? defaultTool ?? fallback;
+        if (name) vp.setTool(name);
+      };
+      const deferDefaults = tools === void 0 && options?.tools === void 0;
+      for (const t of tools === "default" ? (0, import_core.createDefaultTools)() : tools ?? []) {
+        vp.toolManager.register(t);
       }
-      const initialTool = tool ?? defaultTool;
-      if (initialTool) {
-        vp.setTool(initialTool);
+      if (!deferDefaults) activate(tools === "default" ? "select" : void 0);
+      try {
+        if (typeof initialData === "string") vp.loadJSON(initialData);
+        else if (initialData) vp.loadState(initialData);
+      } catch (error) {
+        vp.destroy();
+        throw error;
+      }
+      let timer;
+      const emit = () => {
+        timer = void 0;
+        changeRef.current.onChange?.(vp.exportState());
+      };
+      const unsubscribe = vp.onStateChange(() => {
+        clearTimeout(timer);
+        timer = setTimeout(emit, changeRef.current.changeDebounceMs);
+      });
+      try {
+        onReady?.(vp);
+        if (deferDefaults) {
+          const registerDefaults = vp.toolManager.toolNames.length === 0;
+          if (registerDefaults) {
+            for (const t of (0, import_core.createDefaultTools)()) vp.toolManager.register(t);
+          }
+          activate(registerDefaults ? "select" : void 0);
+        }
+      } catch (error) {
+        clearTimeout(timer);
+        unsubscribe();
+        vp.destroy();
+        throw error;
       }
       setViewport(vp);
-      onReady?.(vp);
       return () => {
+        if (timer !== void 0) {
+          clearTimeout(timer);
+          try {
+            emit();
+          } catch (error) {
+            if (typeof reportError === "function") reportError(error);
+            else console.error("[fieldnotes] onChange failed during unmount", error);
+          }
+        }
+        unsubscribe();
         vp.destroy();
         setViewport(null);
       };
@@ -100,7 +145,7 @@ var FieldNotesCanvas = (0, import_react2.forwardRef)(
       viewport.setSnapToGrid(snapToGrid);
     }, [viewport, snapToGrid]);
     (0, import_react2.useEffect)(() => {
-      if (!viewport || !tools) return;
+      if (!viewport || !Array.isArray(tools)) return;
       for (const t of tools) {
         if (!viewport.toolManager.getTool(t.name)) {
           viewport.toolManager.register(t);
@@ -148,12 +193,11 @@ function CanvasElement({ position, size, children }) {
     };
     elementIdRef.current = register();
     setPortalTarget(container);
-    let disposed = false;
     const handleStoreReplacement = () => {
       const clearedId = elementIdRef.current;
       if (clearedId === null) return;
       queueMicrotask(() => {
-        if (disposed || elementIdRef.current !== clearedId) return;
+        if (elementIdRef.current !== clearedId) return;
         if (viewport.store.getById(clearedId)?.type === "html") {
           viewport.updateHtmlElement(clearedId, container);
         } else {
@@ -165,7 +209,6 @@ function CanvasElement({ position, size, children }) {
     const unsubscribeClear = viewport.store.on("clear", handleStoreReplacement);
     const unsubscribeBatch = viewport.store.on("batch", handleStoreReplacement);
     return () => {
-      disposed = true;
       unsubscribeClear();
       unsubscribeBatch();
       if (elementIdRef.current) {
@@ -190,65 +233,40 @@ function CanvasElement({ position, size, children }) {
 
 // src/hooks/use-active-tool.ts
 var import_react5 = require("react");
+var import_core2 = require("@fieldnotes/core");
 function useActiveTool() {
   const viewport = useViewport();
-  const subscribe = (0, import_react5.useCallback)(
-    (onStoreChange) => viewport.toolManager.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react5.useCallback)(() => viewport.toolManager.activeTool?.name ?? "", [viewport]);
-  const toolName = (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
+  const source = (0, import_react5.useMemo)(() => (0, import_core2.createActiveToolSource)(viewport), [viewport]);
+  const toolName = (0, import_react5.useSyncExternalStore)(source.subscribe, source.getSnapshot);
   const setTool = (0, import_react5.useCallback)((name) => viewport.setTool(name), [viewport]);
   return [toolName, setTool];
 }
 
 // src/hooks/use-camera.ts
 var import_react6 = require("react");
+var import_core3 = require("@fieldnotes/core");
 function useCamera() {
   const viewport = useViewport();
-  const cachedRef = (0, import_react6.useRef)({ x: 0, y: 0, zoom: 1 });
-  const subscribe = (0, import_react6.useCallback)(
-    (onStoreChange) => viewport.camera.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react6.useCallback)(() => {
-    const { position, zoom } = viewport.camera;
-    const cached = cachedRef.current;
-    if (cached.x === position.x && cached.y === position.y && cached.zoom === zoom) {
-      return cached;
-    }
-    const next = { x: position.x, y: position.y, zoom };
-    cachedRef.current = next;
-    return next;
-  }, [viewport]);
-  return (0, import_react6.useSyncExternalStore)(subscribe, getSnapshot);
+  const source = (0, import_react6.useMemo)(() => (0, import_core3.createCameraSource)(viewport), [viewport]);
+  return (0, import_react6.useSyncExternalStore)(source.subscribe, source.getSnapshot);
 }
 
 // src/hooks/use-tool-options.ts
 var import_react7 = require("react");
-function noop() {
-}
+var import_core4 = require("@fieldnotes/core");
 function useToolOptions(toolName) {
   const viewport = useViewport();
-  const cachedRef = (0, import_react7.useRef)(null);
+  const nameRef = (0, import_react7.useRef)(toolName);
+  nameRef.current = toolName;
+  const source = (0, import_react7.useMemo)(
+    () => (0, import_core4.createToolOptionsSource)(viewport, () => nameRef.current),
+    [viewport]
+  );
   const subscribe = (0, import_react7.useCallback)(
-    (onStoreChange) => {
-      const tool = viewport.toolManager.getTool(toolName);
-      if (!tool?.onOptionsChange) return noop;
-      return tool.onOptionsChange(onStoreChange);
-    },
-    [viewport, toolName]
+    (onStoreChange) => source.subscribe(onStoreChange),
+    [source, toolName]
   );
-  const getSnapshot = (0, import_react7.useCallback)(() => {
-    const tool = viewport.toolManager.getTool(toolName);
-    if (!tool?.getOptions) return null;
-    const next = tool.getOptions();
-    const cached = cachedRef.current;
-    if (cached && shallowEqual(cached, next)) return cached;
-    cachedRef.current = next;
-    return next;
-  }, [viewport, toolName]);
-  const options = (0, import_react7.useSyncExternalStore)(subscribe, getSnapshot);
+  const options = (0, import_react7.useSyncExternalStore)(subscribe, source.getSnapshot);
   const setOptions = (0, import_react7.useCallback)(
     (partial) => {
       const tool = viewport.toolManager.getTool(toolName);
@@ -258,51 +276,14 @@ function useToolOptions(toolName) {
   );
   return [options, setOptions];
 }
-function shallowEqual(a, b) {
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    const valA = a[key];
-    const valB = b[key];
-    if (valA === valB) continue;
-    if (typeof valA === "object" && valA !== null && typeof valB === "object" && valB !== null && !Array.isArray(valA) && !Array.isArray(valB)) {
-      const objA = valA;
-      const objB = valB;
-      const innerKeys = Object.keys(objA);
-      if (innerKeys.length === Object.keys(objB).length && innerKeys.every((k) => objA[k] === objB[k])) {
-        continue;
-      }
-    }
-    return false;
-  }
-  return true;
-}
 
 // src/hooks/use-layers.ts
 var import_react8 = require("react");
+var import_core5 = require("@fieldnotes/core");
 function useLayers() {
   const viewport = useViewport();
-  const cachedRef = (0, import_react8.useRef)({ layers: [], activeLayerId: "" });
-  const subscribe = (0, import_react8.useCallback)(
-    (onStoreChange) => viewport.layerManager.on("change", onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react8.useCallback)(() => {
-    const layers = viewport.layerManager.getLayers();
-    const activeLayerId = viewport.layerManager.activeLayerId;
-    const cached = cachedRef.current;
-    if (cached.activeLayerId === activeLayerId && cached.layers.length === layers.length && cached.layers.every((l, i) => {
-      const next2 = layers[i];
-      return next2 !== void 0 && l.id === next2.id && l.name === next2.name && l.visible === next2.visible && l.locked === next2.locked && l.order === next2.order && l.opacity === next2.opacity;
-    })) {
-      return cached;
-    }
-    const next = { layers, activeLayerId };
-    cachedRef.current = next;
-    return next;
-  }, [viewport]);
-  const snapshot = (0, import_react8.useSyncExternalStore)(subscribe, getSnapshot);
+  const source = (0, import_react8.useMemo)(() => (0, import_core5.createLayersSource)(viewport), [viewport]);
+  const snapshot = (0, import_react8.useSyncExternalStore)(source.subscribe, source.getSnapshot);
   const createLayer = (0, import_react8.useCallback)(
     (name) => viewport.layerManager.createLayer(name),
     [viewport]
@@ -356,25 +337,11 @@ function useLayers() {
 
 // src/hooks/use-history.ts
 var import_react9 = require("react");
+var import_core6 = require("@fieldnotes/core");
 function useHistory() {
   const viewport = useViewport();
-  const cachedRef = (0, import_react9.useRef)({ canUndo: false, canRedo: false });
-  const subscribe = (0, import_react9.useCallback)(
-    (onStoreChange) => viewport.history.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react9.useCallback)(() => {
-    const canUndo = viewport.history.canUndo;
-    const canRedo = viewport.history.canRedo;
-    const cached = cachedRef.current;
-    if (cached.canUndo === canUndo && cached.canRedo === canRedo) {
-      return cached;
-    }
-    const next = { canUndo, canRedo };
-    cachedRef.current = next;
-    return next;
-  }, [viewport]);
-  const snapshot = (0, import_react9.useSyncExternalStore)(subscribe, getSnapshot);
+  const source = (0, import_react9.useMemo)(() => (0, import_core6.createHistorySource)(viewport), [viewport]);
+  const snapshot = (0, import_react9.useSyncExternalStore)(source.subscribe, source.getSnapshot);
   const undo = (0, import_react9.useCallback)(() => viewport.undo(), [viewport]);
   const redo = (0, import_react9.useCallback)(() => viewport.redo(), [viewport]);
   return {
@@ -387,186 +354,69 @@ function useHistory() {
 
 // src/hooks/use-elements.ts
 var import_react10 = require("react");
-function shallowEqual2(a, b) {
-  if (Object.is(a, b)) return true;
-  if (Array.isArray(a) && Array.isArray(b)) {
-    return a.length === b.length && a.every((v, i) => Object.is(v, b[i]));
-  }
-  if (typeof a === "object" && a !== null && typeof b === "object" && b !== null && !Array.isArray(a) && !Array.isArray(b)) {
-    const ka = Object.keys(a);
-    const kb = Object.keys(b);
-    return ka.length === kb.length && ka.every(
-      (k) => k in b && Object.is(a[k], b[k])
-    );
-  }
-  return false;
-}
+var import_core7 = require("@fieldnotes/core");
 function useElements(arg, isEqual) {
   const viewport = useViewport();
-  const cachedRef = (0, import_react10.useRef)([]);
-  const selectedRef = (0, import_react10.useRef)(null);
-  const subscribe = (0, import_react10.useCallback)(
-    (onStoreChange) => viewport.store.onChange(onStoreChange),
+  const latest = (0, import_react10.useRef)({ arg, isEqual });
+  latest.current = { arg, isEqual };
+  const elementsSource = (0, import_react10.useMemo)(
+    () => (0, import_core7.createElementsSource)(viewport, () => {
+      const a = latest.current.arg;
+      return typeof a === "function" ? void 0 : a;
+    }),
     [viewport]
   );
-  const getSnapshot = (0, import_react10.useCallback)(() => {
-    if (typeof arg === "function") {
-      const next2 = arg(viewport.store.getAll());
-      const prev = selectedRef.current;
-      const equal = isEqual ?? shallowEqual2;
-      if (prev !== null && equal(prev.value, next2)) {
-        return prev.value;
-      }
-      selectedRef.current = { value: next2 };
-      return next2;
-    }
-    const next = arg ? viewport.store.getElementsByType(arg) : viewport.store.getAll();
-    const cached = cachedRef.current;
-    if (cached.length === next.length && cached.every((el, i) => el === next[i])) {
-      return cached;
-    }
-    cachedRef.current = next;
-    return next;
-  }, [viewport, arg, isEqual]);
-  return (0, import_react10.useSyncExternalStore)(subscribe, getSnapshot);
+  const selectorSource = (0, import_react10.useMemo)(
+    () => (0, import_core7.createElementsSelectorSource)(
+      viewport,
+      // Only read while `arg` is a selector: the source is picked below by `typeof arg`.
+      () => latest.current.arg,
+      () => latest.current.isEqual
+    ),
+    [viewport]
+  );
+  const source = typeof arg === "function" ? selectorSource : elementsSource;
+  return (0, import_react10.useSyncExternalStore)(source.subscribe, source.getSnapshot);
 }
 
 // src/hooks/use-selection.ts
 var import_react11 = require("react");
+var import_core8 = require("@fieldnotes/core");
 function useSelection() {
   const viewport = useViewport();
-  const subscribe = (0, import_react11.useCallback)(
-    (onChange) => viewport.onSelectionChange(onChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react11.useCallback)(() => viewport.getSelectedIds(), [viewport]);
-  return (0, import_react11.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const source = (0, import_react11.useMemo)(() => (0, import_core8.createSelectionSource)(viewport), [viewport]);
+  return (0, import_react11.useSyncExternalStore)(source.subscribe, source.getSnapshot, source.getSnapshot);
 }
 
 // src/hooks/use-selection-style.ts
 var import_react12 = require("react");
-
-// src/hooks/style-keys.ts
-var STYLE_KEYS = [
-  "color",
-  "fillColor",
-  "strokeWidth",
-  "opacity",
-  "fontSize",
-  "strokeStyle"
-];
-
-// src/hooks/use-selection-style.ts
-function styleEqual(a, b) {
-  if (a === b) return true;
-  if (a === null || b === null) return false;
-  return STYLE_KEYS.every((k) => a[k] === b[k]);
-}
+var import_core9 = require("@fieldnotes/core");
 function useSelectionStyle() {
   const viewport = useViewport();
-  const cacheRef = (0, import_react12.useRef)(null);
-  const subscribe = (0, import_react12.useCallback)(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = (0, import_react12.useCallback)(() => {
-    const next = viewport.getSelectionStyle();
-    if (styleEqual(cacheRef.current, next)) return cacheRef.current;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const style = (0, import_react12.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const source = (0, import_react12.useMemo)(() => (0, import_core9.createSelectionStyleSource)(viewport), [viewport]);
+  const style = (0, import_react12.useSyncExternalStore)(source.subscribe, source.getSnapshot, source.getSnapshot);
   const apply = (0, import_react12.useCallback)((s) => viewport.applyStyleToSelection(s), [viewport]);
   return [style, apply];
 }
 
 // src/hooks/use-selection-style-details.ts
 var import_react13 = require("react");
-function keysEqual(a, b) {
-  return a.length === b.length && a.every((k, i) => k === b[i]);
-}
-function detailsEqual(a, b) {
-  if (a === b) return true;
-  if (a === null || b === null) return false;
-  return keysEqual(a.applicable, b.applicable) && keysEqual(a.mixed, b.mixed) && STYLE_KEYS.every((k) => a.common[k] === b.common[k]);
-}
+var import_core10 = require("@fieldnotes/core");
 function useSelectionStyleDetails() {
   const viewport = useViewport();
-  const cacheRef = (0, import_react13.useRef)(null);
-  const subscribe = (0, import_react13.useCallback)(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = (0, import_react13.useCallback)(() => {
-    const next = viewport.getSelectionStyleDetails();
-    if (detailsEqual(cacheRef.current, next)) return cacheRef.current;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const details = (0, import_react13.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const source = (0, import_react13.useMemo)(() => (0, import_core10.createSelectionStyleDetailsSource)(viewport), [viewport]);
+  const details = (0, import_react13.useSyncExternalStore)(source.subscribe, source.getSnapshot, source.getSnapshot);
   const apply = (0, import_react13.useCallback)((s) => viewport.applyStyleToSelection(s), [viewport]);
   return [details, apply];
 }
 
 // src/hooks/use-selection-ops.ts
 var import_react14 = require("react");
-function snapshotEqual(a, b) {
-  return a.selectedIds === b.selectedIds && a.canGroup === b.canGroup && a.canUngroup === b.canUngroup && a.canAlign === b.canAlign && a.canDistribute === b.canDistribute && a.isLocked === b.isLocked;
-}
+var import_core11 = require("@fieldnotes/core");
 function useSelectionOps() {
   const viewport = useViewport();
-  const cacheRef = (0, import_react14.useRef)(null);
-  const subscribe = (0, import_react14.useCallback)(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = (0, import_react14.useCallback)(() => {
-    const ids = viewport.getSelectedIds();
-    const n = ids.length;
-    let canUngroup = false;
-    let lockedCount = 0;
-    for (const id of ids) {
-      const el = viewport.store.getById(id);
-      if (!el) continue;
-      if (el.groupId !== void 0) canUngroup = true;
-      if (el.locked) lockedCount++;
-    }
-    const isLocked = n === 0 ? null : lockedCount === n ? true : lockedCount === 0 ? false : null;
-    const next = {
-      selectedIds: ids,
-      canGroup: n >= 2,
-      canUngroup,
-      canAlign: n >= 2,
-      canDistribute: n >= 3,
-      isLocked
-    };
-    const prev = cacheRef.current;
-    if (prev && snapshotEqual(prev, next)) return prev;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const snap = (0, import_react14.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const source = (0, import_react14.useMemo)(() => (0, import_core11.createSelectionOpsSource)(viewport), [viewport]);
+  const snap = (0, import_react14.useSyncExternalStore)(source.subscribe, source.getSnapshot, source.getSnapshot);
   const group = (0, import_react14.useCallback)(() => viewport.groupSelection(), [viewport]);
   const ungroup = (0, import_react14.useCallback)(() => viewport.ungroupSelection(), [viewport]);
   const toggleLock = (0, import_react14.useCallback)(() => viewport.toggleLockSelection(), [viewport]);
@@ -597,7 +447,7 @@ function useSelectionOps() {
 
 // src/hooks/use-element-rects.ts
 var import_react15 = require("react");
-var import_core2 = require("@fieldnotes/core");
+var import_core12 = require("@fieldnotes/core");
 function useElementRects(match) {
   const viewport = useViewport();
   const matchRef = (0, import_react15.useRef)(match);
@@ -607,11 +457,11 @@ function useElementRects(match) {
   const trackerRef = (0, import_react15.useRef)(null);
   const subscribe = (0, import_react15.useCallback)(
     (onStoreChange) => {
-      const tracker = new import_core2.ElementRectTracker(viewport, { match: stableMatch });
+      const tracker = new import_core12.ElementRectTracker(viewport, { match: stableMatch });
       trackerRef.current = tracker;
       const next = tracker.getRects();
       const previous = cacheRef.current;
-      if (previous === null || !(0, import_core2.elementRectsEqual)(previous, next)) {
+      if (previous === null || !(0, import_core12.elementRectsEqual)(previous, next)) {
         cacheRef.current = next;
         onStoreChange();
       }
@@ -629,7 +479,7 @@ function useElementRects(match) {
   );
   const getSnapshot = (0, import_react15.useCallback)(() => {
     if (cacheRef.current === null) {
-      cacheRef.current = (0, import_core2.computeElementRects)(viewport.store, stableMatch);
+      cacheRef.current = (0, import_core12.computeElementRects)(viewport.store, stableMatch);
     }
     return cacheRef.current;
   }, [viewport, stableMatch]);
@@ -642,7 +492,7 @@ function useElementRects(match) {
 
 // src/minimap.tsx
 var import_react16 = require("react");
-var import_core3 = require("@fieldnotes/core");
+var import_core13 = require("@fieldnotes/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var toggleStyle = {
   position: "absolute",
@@ -674,7 +524,7 @@ function Minimap({
     if (collapsed) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
-    const controller = new import_core3.MinimapController(viewport, canvas, {
+    const controller = new import_core13.MinimapController(viewport, canvas, {
       width,
       height,
       background,