@fieldnotes/react 0.14.0 → 0.14.2

package/README.md

@@ -8,7 +8,7 @@ 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
 

package/dist/index.cjs

@@ -67,74 +67,37 @@ var FieldNotesCanvas = (0, import_react2.forwardRef)(
   }, ref) {
     const containerRef = (0, import_react2.useRef)(null);
     const [viewport, setViewport] = (0, import_react2.useState)(null);
+    const mountedRef = (0, import_react2.useRef)(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);
-      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);
-      }
-      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);
+      const mounted = (0, import_core.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);
       };
     }, []);
     (0, import_react2.useEffect)(() => {
       if (!viewport || tool === void 0) return;
-      if (viewport.toolManager.activeTool?.name !== tool) {
-        viewport.setTool(tool);
-      }
+      mountedRef.current?.setTool(tool);
     }, [viewport, tool]);
     (0, import_react2.useEffect)(() => {
       if (!viewport || !onToolChange) return;
@@ -146,11 +109,7 @@ var FieldNotesCanvas = (0, import_react2.forwardRef)(
     }, [viewport, snapToGrid]);
     (0, import_react2.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__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className, style, children: viewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContext.Provider, { value: viewport, children }) });
   }
@@ -159,6 +118,7 @@ var FieldNotesCanvas = (0, import_react2.forwardRef)(
 // src/canvas-element.tsx
 var import_react4 = require("react");
 var import_react_dom = require("react-dom");
+var import_core2 = require("@fieldnotes/core");
 
 // src/hooks/use-viewport.ts
 var import_react3 = require("react");
@@ -171,11 +131,10 @@ function useViewport() {
 }
 
 // src/canvas-element.tsx
-var HOST_ORIGIN = "host";
 function CanvasElement({ position, size, children }) {
   const viewport = useViewport();
   const [portalTarget, setPortalTarget] = (0, import_react4.useState)(null);
-  const elementIdRef = (0, import_react4.useRef)(null);
+  const hostRef = (0, import_react4.useRef)(null);
   const geometryRef = (0, import_react4.useRef)({ position, size });
   (0, import_react4.useEffect)(() => {
     const container = document.createElement("div");
@@ -183,51 +142,17 @@ 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 = (0, import_core2.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]);
   (0, import_react4.useEffect)(() => {
     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 (0, import_react_dom.createPortal)(children, portalTarget);
@@ -235,65 +160,40 @@ function CanvasElement({ position, size, children }) {
 
 // src/hooks/use-active-tool.ts
 var import_react5 = require("react");
+var import_core3 = 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_core3.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_core4 = 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_core4.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_core5 = 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_core5.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);
@@ -303,51 +203,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_core6 = 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_core6.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]
@@ -401,25 +264,11 @@ function useLayers() {
 
 // src/hooks/use-history.ts
 var import_react9 = require("react");
+var import_core7 = 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_core7.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 {
@@ -432,186 +281,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_core8 = 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_core8.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_core8.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_core9 = 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_core9.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_core10 = 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_core10.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_core11 = 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_core11.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_core12 = 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_core12.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]);
@@ -642,7 +374,7 @@ function useSelectionOps() {
 
 // src/hooks/use-element-rects.ts
 var import_react15 = require("react");
-var import_core2 = require("@fieldnotes/core");
+var import_core13 = require("@fieldnotes/core");
 function useElementRects(match) {
   const viewport = useViewport();
   const matchRef = (0, import_react15.useRef)(match);
@@ -652,11 +384,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_core13.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_core13.elementRectsEqual)(previous, next)) {
         cacheRef.current = next;
         onStoreChange();
       }
@@ -674,7 +406,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_core13.computeElementRects)(viewport.store, stableMatch);
     }
     return cacheRef.current;
   }, [viewport, stableMatch]);
@@ -687,7 +419,7 @@ function useElementRects(match) {
 
 // src/minimap.tsx
 var import_react16 = require("react");
-var import_core3 = require("@fieldnotes/core");
+var import_core14 = require("@fieldnotes/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var toggleStyle = {
   position: "absolute",
@@ -719,7 +451,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_core14.MinimapController(viewport, canvas, {
       width,
       height,
       background,