@fieldnotes/react 0.14.0 → 0.14.2

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   forwardRef,
   useImperativeHandle
 } from "react";
-import { Viewport, createDefaultTools } from "@fieldnotes/core";
+import { mountViewport } from "@fieldnotes/core";
 
 // src/context.ts
 import { createContext } from "react";
@@ -32,74 +32,37 @@ var FieldNotesCanvas = forwardRef(
   }, ref) {
     const containerRef = useRef(null);
     const [viewport, setViewport] = useState(null);
+    const mountedRef = useRef(null);
     const changeRef = useRef({ onChange, changeDebounceMs });
     changeRef.current = { onChange, changeDebounceMs };
     useImperativeHandle(ref, () => ({ viewport }), [viewport]);
     useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
-      const vp = new Viewport(el, options);
-      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" ? createDefaultTools() : tools ?? []) {
-        vp.toolManager.register(t);
-      }
-      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 createDefaultTools()) vp.toolManager.register(t);
-          }
-          activate(registerDefaults ? "select" : void 0);
+      const mounted = mountViewport(el, {
+        options,
+        tools,
+        initialData,
+        tool,
+        defaultTool,
+        onReady,
+        get onChange() {
+          return changeRef.current.onChange;
+        },
+        get changeDebounceMs() {
+          return changeRef.current.changeDebounceMs;
         }
-      } catch (error) {
-        clearTimeout(timer);
-        unsubscribe();
-        vp.destroy();
-        throw error;
-      }
-      setViewport(vp);
+      });
+      mountedRef.current = mounted;
+      setViewport(mounted.viewport);
       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();
+        mounted.destroy();
         setViewport(null);
       };
     }, []);
     useEffect(() => {
       if (!viewport || tool === void 0) return;
-      if (viewport.toolManager.activeTool?.name !== tool) {
-        viewport.setTool(tool);
-      }
+      mountedRef.current?.setTool(tool);
     }, [viewport, tool]);
     useEffect(() => {
       if (!viewport || !onToolChange) return;
@@ -111,11 +74,7 @@ var FieldNotesCanvas = forwardRef(
     }, [viewport, snapToGrid]);
     useEffect(() => {
       if (!viewport || !Array.isArray(tools)) return;
-      for (const t of tools) {
-        if (!viewport.toolManager.getTool(t.name)) {
-          viewport.toolManager.register(t);
-        }
-      }
+      mountedRef.current?.addTools(tools);
     }, [viewport, tools]);
     return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style, children: viewport && /* @__PURE__ */ jsx(ViewportContext.Provider, { value: viewport, children }) });
   }
@@ -124,6 +83,7 @@ var FieldNotesCanvas = forwardRef(
 // src/canvas-element.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
+import { attachHostElement } from "@fieldnotes/core";
 
 // src/hooks/use-viewport.ts
 import { useContext } from "react";
@@ -136,11 +96,10 @@ function useViewport() {
 }
 
 // src/canvas-element.tsx
-var HOST_ORIGIN = "host";
 function CanvasElement({ position, size, children }) {
   const viewport = useViewport();
   const [portalTarget, setPortalTarget] = useState2(null);
-  const elementIdRef = useRef2(null);
+  const hostRef = useRef2(null);
   const geometryRef = useRef2({ position, size });
   useEffect2(() => {
     const container = document.createElement("div");
@@ -148,118 +107,59 @@ function CanvasElement({ position, size, children }) {
       width: "100%",
       height: "100%"
     });
-    const register = () => {
-      viewport.domLayer.appendChild(container);
-      const { position: current, size: currentSize } = geometryRef.current;
-      return viewport.addHtmlElement(container, current, currentSize, {
-        transient: true,
-        origin: HOST_ORIGIN
-      });
-    };
-    elementIdRef.current = register();
+    const host = attachHostElement(viewport, container, geometryRef.current);
+    hostRef.current = host;
     setPortalTarget(container);
-    let disposed = false;
-    const handleStoreReplacement = () => {
-      const clearedId = elementIdRef.current;
-      if (clearedId === null) return;
-      queueMicrotask(() => {
-        if (disposed || elementIdRef.current !== clearedId) return;
-        if (viewport.store.getById(clearedId)?.type === "html") {
-          viewport.updateHtmlElement(clearedId, container);
-        } else {
-          elementIdRef.current = register();
-        }
-        viewport.requestRender();
-      });
-    };
-    const unsubscribeClear = viewport.store.on("clear", handleStoreReplacement);
-    const unsubscribeBatch = viewport.store.on("batch", handleStoreReplacement);
     return () => {
-      disposed = true;
-      unsubscribeClear();
-      unsubscribeBatch();
-      if (elementIdRef.current) {
-        viewport.store.remove(elementIdRef.current, { origin: HOST_ORIGIN });
-        viewport.requestRender();
-        elementIdRef.current = null;
-      }
-      if (container.parentNode === viewport.domLayer) container.remove();
+      host.destroy();
       setPortalTarget(null);
     };
   }, [viewport]);
   useEffect2(() => {
     geometryRef.current = { position, size };
-    const id = elementIdRef.current;
-    if (!id) return;
-    viewport.store.update(id, { position, ...size ? { size } : {} }, { origin: HOST_ORIGIN });
-    viewport.requestRender();
+    hostRef.current?.setGeometry({ position, size });
   }, [viewport, position.x, position.y, size?.w, size?.h]);
   if (!portalTarget) return null;
   return createPortal(children, portalTarget);
 }
 
 // src/hooks/use-active-tool.ts
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+import { createActiveToolSource } from "@fieldnotes/core";
 function useActiveTool() {
   const viewport = useViewport();
-  const subscribe = useCallback(
-    (onStoreChange) => viewport.toolManager.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback(() => viewport.toolManager.activeTool?.name ?? "", [viewport]);
-  const toolName = useSyncExternalStore(subscribe, getSnapshot);
+  const source = useMemo(() => createActiveToolSource(viewport), [viewport]);
+  const toolName = useSyncExternalStore(source.subscribe, source.getSnapshot);
   const setTool = useCallback((name) => viewport.setTool(name), [viewport]);
   return [toolName, setTool];
 }
 
 // src/hooks/use-camera.ts
-import { useCallback as useCallback2, useRef as useRef3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useMemo as useMemo2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { createCameraSource } from "@fieldnotes/core";
 function useCamera() {
   const viewport = useViewport();
-  const cachedRef = useRef3({ x: 0, y: 0, zoom: 1 });
-  const subscribe = useCallback2(
-    (onStoreChange) => viewport.camera.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback2(() => {
-    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 useSyncExternalStore2(subscribe, getSnapshot);
+  const source = useMemo2(() => createCameraSource(viewport), [viewport]);
+  return useSyncExternalStore2(source.subscribe, source.getSnapshot);
 }
 
 // src/hooks/use-tool-options.ts
-import { useCallback as useCallback3, useRef as useRef4, useSyncExternalStore as useSyncExternalStore3 } from "react";
-function noop() {
-}
+import { useCallback as useCallback2, useMemo as useMemo3, useRef as useRef3, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { createToolOptionsSource } from "@fieldnotes/core";
 function useToolOptions(toolName) {
   const viewport = useViewport();
-  const cachedRef = useRef4(null);
-  const subscribe = useCallback3(
-    (onStoreChange) => {
-      const tool = viewport.toolManager.getTool(toolName);
-      if (!tool?.onOptionsChange) return noop;
-      return tool.onOptionsChange(onStoreChange);
-    },
-    [viewport, toolName]
+  const nameRef = useRef3(toolName);
+  nameRef.current = toolName;
+  const source = useMemo3(
+    () => createToolOptionsSource(viewport, () => nameRef.current),
+    [viewport]
+  );
+  const subscribe = useCallback2(
+    (onStoreChange) => source.subscribe(onStoreChange),
+    [source, toolName]
   );
-  const getSnapshot = useCallback3(() => {
-    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 = useSyncExternalStore3(subscribe, getSnapshot);
-  const setOptions = useCallback3(
+  const options = useSyncExternalStore3(subscribe, source.getSnapshot);
+  const setOptions = useCallback2(
     (partial) => {
       const tool = viewport.toolManager.getTool(toolName);
       tool?.setOptions?.(partial);
@@ -268,84 +168,47 @@ 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
-import { useCallback as useCallback4, useRef as useRef5, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo4, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { createLayersSource } from "@fieldnotes/core";
 function useLayers() {
   const viewport = useViewport();
-  const cachedRef = useRef5({ layers: [], activeLayerId: "" });
-  const subscribe = useCallback4(
-    (onStoreChange) => viewport.layerManager.on("change", onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback4(() => {
-    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 = useSyncExternalStore4(subscribe, getSnapshot);
-  const createLayer = useCallback4(
+  const source = useMemo4(() => createLayersSource(viewport), [viewport]);
+  const snapshot = useSyncExternalStore4(source.subscribe, source.getSnapshot);
+  const createLayer = useCallback3(
     (name) => viewport.layerManager.createLayer(name),
     [viewport]
   );
-  const removeLayer = useCallback4(
+  const removeLayer = useCallback3(
     (id) => viewport.layerManager.removeLayer(id),
     [viewport]
   );
-  const renameLayer = useCallback4(
+  const renameLayer = useCallback3(
     (id, name) => viewport.layerManager.renameLayer(id, name),
     [viewport]
   );
-  const reorderLayer = useCallback4(
+  const reorderLayer = useCallback3(
     (id, newOrder) => viewport.layerManager.reorderLayer(id, newOrder),
     [viewport]
   );
-  const setVisible = useCallback4(
+  const setVisible = useCallback3(
     (id, visible) => viewport.layerManager.setLayerVisible(id, visible),
     [viewport]
   );
-  const setLocked = useCallback4(
+  const setLocked = useCallback3(
     (id, locked) => viewport.layerManager.setLayerLocked(id, locked),
     [viewport]
   );
-  const setOpacity = useCallback4(
+  const setOpacity = useCallback3(
     (id, opacity) => viewport.layerManager.setLayerOpacity(id, opacity),
     [viewport]
   );
-  const setActiveLayer = useCallback4(
+  const setActiveLayer = useCallback3(
     (id) => viewport.layerManager.setActiveLayer(id),
     [viewport]
   );
-  const moveElement = useCallback4(
+  const moveElement = useCallback3(
     (elementId, layerId) => viewport.layerManager.moveElementToLayer(elementId, layerId),
     [viewport]
   );
@@ -365,28 +228,14 @@ function useLayers() {
 }
 
 // src/hooks/use-history.ts
-import { useCallback as useCallback5, useRef as useRef6, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { createHistorySource } from "@fieldnotes/core";
 function useHistory() {
   const viewport = useViewport();
-  const cachedRef = useRef6({ canUndo: false, canRedo: false });
-  const subscribe = useCallback5(
-    (onStoreChange) => viewport.history.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback5(() => {
-    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 = useSyncExternalStore5(subscribe, getSnapshot);
-  const undo = useCallback5(() => viewport.undo(), [viewport]);
-  const redo = useCallback5(() => viewport.redo(), [viewport]);
+  const source = useMemo5(() => createHistorySource(viewport), [viewport]);
+  const snapshot = useSyncExternalStore5(source.subscribe, source.getSnapshot);
+  const undo = useCallback4(() => viewport.undo(), [viewport]);
+  const redo = useCallback4(() => viewport.redo(), [viewport]);
   return {
     canUndo: snapshot.canUndo,
     canRedo: snapshot.canRedo,
@@ -396,197 +245,80 @@ function useHistory() {
 }
 
 // src/hooks/use-elements.ts
-import { useCallback as useCallback6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "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;
-}
+import { useMemo as useMemo6, useRef as useRef4, useSyncExternalStore as useSyncExternalStore6 } from "react";
+import { createElementsSelectorSource, createElementsSource } from "@fieldnotes/core";
 function useElements(arg, isEqual) {
   const viewport = useViewport();
-  const cachedRef = useRef7([]);
-  const selectedRef = useRef7(null);
-  const subscribe = useCallback6(
-    (onStoreChange) => viewport.store.onChange(onStoreChange),
+  const latest = useRef4({ arg, isEqual });
+  latest.current = { arg, isEqual };
+  const elementsSource = useMemo6(
+    () => createElementsSource(viewport, () => {
+      const a = latest.current.arg;
+      return typeof a === "function" ? void 0 : a;
+    }),
     [viewport]
   );
-  const getSnapshot = useCallback6(() => {
-    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 useSyncExternalStore6(subscribe, getSnapshot);
+  const selectorSource = useMemo6(
+    () => 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 useSyncExternalStore6(source.subscribe, source.getSnapshot);
 }
 
 // src/hooks/use-selection.ts
-import { useCallback as useCallback7, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { createSelectionSource } from "@fieldnotes/core";
 function useSelection() {
   const viewport = useViewport();
-  const subscribe = useCallback7(
-    (onChange) => viewport.onSelectionChange(onChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback7(() => viewport.getSelectedIds(), [viewport]);
-  return useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
+  const source = useMemo7(() => createSelectionSource(viewport), [viewport]);
+  return useSyncExternalStore7(source.subscribe, source.getSnapshot, source.getSnapshot);
 }
 
 // src/hooks/use-selection-style.ts
-import { useCallback as useCallback8, useRef as useRef8, useSyncExternalStore as useSyncExternalStore8 } from "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]);
-}
+import { useCallback as useCallback5, useMemo as useMemo8, useSyncExternalStore as useSyncExternalStore8 } from "react";
+import { createSelectionStyleSource } from "@fieldnotes/core";
 function useSelectionStyle() {
   const viewport = useViewport();
-  const cacheRef = useRef8(null);
-  const subscribe = useCallback8(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = useCallback8(() => {
-    const next = viewport.getSelectionStyle();
-    if (styleEqual(cacheRef.current, next)) return cacheRef.current;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const style = useSyncExternalStore8(subscribe, getSnapshot, getSnapshot);
-  const apply = useCallback8((s) => viewport.applyStyleToSelection(s), [viewport]);
+  const source = useMemo8(() => createSelectionStyleSource(viewport), [viewport]);
+  const style = useSyncExternalStore8(source.subscribe, source.getSnapshot, source.getSnapshot);
+  const apply = useCallback5((s) => viewport.applyStyleToSelection(s), [viewport]);
   return [style, apply];
 }
 
 // src/hooks/use-selection-style-details.ts
-import { useCallback as useCallback9, useRef as useRef9, useSyncExternalStore as useSyncExternalStore9 } from "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]);
-}
+import { useCallback as useCallback6, useMemo as useMemo9, useSyncExternalStore as useSyncExternalStore9 } from "react";
+import { createSelectionStyleDetailsSource } from "@fieldnotes/core";
 function useSelectionStyleDetails() {
   const viewport = useViewport();
-  const cacheRef = useRef9(null);
-  const subscribe = useCallback9(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = useCallback9(() => {
-    const next = viewport.getSelectionStyleDetails();
-    if (detailsEqual(cacheRef.current, next)) return cacheRef.current;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const details = useSyncExternalStore9(subscribe, getSnapshot, getSnapshot);
-  const apply = useCallback9((s) => viewport.applyStyleToSelection(s), [viewport]);
+  const source = useMemo9(() => createSelectionStyleDetailsSource(viewport), [viewport]);
+  const details = useSyncExternalStore9(source.subscribe, source.getSnapshot, source.getSnapshot);
+  const apply = useCallback6((s) => viewport.applyStyleToSelection(s), [viewport]);
   return [details, apply];
 }
 
 // src/hooks/use-selection-ops.ts
-import { useCallback as useCallback10, useRef as useRef10, useSyncExternalStore as useSyncExternalStore10 } from "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;
-}
+import { useCallback as useCallback7, useMemo as useMemo10, useSyncExternalStore as useSyncExternalStore10 } from "react";
+import { createSelectionOpsSource } from "@fieldnotes/core";
 function useSelectionOps() {
   const viewport = useViewport();
-  const cacheRef = useRef10(null);
-  const subscribe = useCallback10(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = useCallback10(() => {
-    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 = useSyncExternalStore10(subscribe, getSnapshot, getSnapshot);
-  const group = useCallback10(() => viewport.groupSelection(), [viewport]);
-  const ungroup = useCallback10(() => viewport.ungroupSelection(), [viewport]);
-  const toggleLock = useCallback10(() => viewport.toggleLockSelection(), [viewport]);
-  const align = useCallback10((edge) => viewport.alignSelection(edge), [viewport]);
-  const distribute = useCallback10(
+  const source = useMemo10(() => createSelectionOpsSource(viewport), [viewport]);
+  const snap = useSyncExternalStore10(source.subscribe, source.getSnapshot, source.getSnapshot);
+  const group = useCallback7(() => viewport.groupSelection(), [viewport]);
+  const ungroup = useCallback7(() => viewport.ungroupSelection(), [viewport]);
+  const toggleLock = useCallback7(() => viewport.toggleLockSelection(), [viewport]);
+  const align = useCallback7((edge) => viewport.alignSelection(edge), [viewport]);
+  const distribute = useCallback7(
     (axis) => viewport.distributeSelection(axis),
     [viewport]
   );
-  const rotateCW = useCallback10(() => viewport.rotateSelection("cw"), [viewport]);
-  const rotateCCW = useCallback10(() => viewport.rotateSelection("ccw"), [viewport]);
+  const rotateCW = useCallback7(() => viewport.rotateSelection("cw"), [viewport]);
+  const rotateCCW = useCallback7(() => viewport.rotateSelection("ccw"), [viewport]);
   return {
     selectedIds: snap.selectedIds,
     selectedCount: snap.selectedIds.length,
@@ -606,16 +338,16 @@ function useSelectionOps() {
 }
 
 // src/hooks/use-element-rects.ts
-import { useCallback as useCallback11, useEffect as useEffect3, useRef as useRef11, useSyncExternalStore as useSyncExternalStore11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect3, useRef as useRef5, useSyncExternalStore as useSyncExternalStore11 } from "react";
 import { ElementRectTracker, computeElementRects, elementRectsEqual } from "@fieldnotes/core";
 function useElementRects(match) {
   const viewport = useViewport();
-  const matchRef = useRef11(match);
+  const matchRef = useRef5(match);
   matchRef.current = match;
-  const stableMatch = useCallback11((el) => matchRef.current(el), []);
-  const cacheRef = useRef11(null);
-  const trackerRef = useRef11(null);
-  const subscribe = useCallback11(
+  const stableMatch = useCallback8((el) => matchRef.current(el), []);
+  const cacheRef = useRef5(null);
+  const trackerRef = useRef5(null);
+  const subscribe = useCallback8(
     (onStoreChange) => {
       const tracker = new ElementRectTracker(viewport, { match: stableMatch });
       trackerRef.current = tracker;
@@ -637,7 +369,7 @@ function useElementRects(match) {
     },
     [viewport, stableMatch]
   );
-  const getSnapshot = useCallback11(() => {
+  const getSnapshot = useCallback8(() => {
     if (cacheRef.current === null) {
       cacheRef.current = computeElementRects(viewport.store, stableMatch);
     }
@@ -651,7 +383,7 @@ function useElementRects(match) {
 }
 
 // src/minimap.tsx
-import { useEffect as useEffect4, useRef as useRef12, useState as useState3 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState3 } from "react";
 import { MinimapController } from "@fieldnotes/core";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var toggleStyle = {
@@ -679,7 +411,7 @@ function Minimap({
 }) {
   const viewport = useViewport();
   const [collapsed, setCollapsed] = useState3(defaultCollapsed);
-  const canvasRef = useRef12(null);
+  const canvasRef = useRef6(null);
   useEffect4(() => {
     if (collapsed) return;
     const canvas = canvasRef.current;