@fieldnotes/react 0.2.1 → 0.4.0

package/README.md

@@ -1,190 +1,301 @@
-# @fieldnotes/react
-
-React bindings for the [Field Notes](https://github.com/IrakliDevelop/fieldnotes) infinite canvas SDK. Embed React components directly onto an infinite, pannable, zoomable canvas.
-
-## Install
-
-```bash
-npm install @fieldnotes/core @fieldnotes/react
-```
-
-Requires React 18+.
-
-## Quick Start
-
-```tsx
-import { FieldNotesCanvas } from '@fieldnotes/react';
-import { HandTool, SelectTool, PencilTool } from '@fieldnotes/core';
-
-function App() {
-  return (
-    <FieldNotesCanvas
-      tools={[new HandTool(), new SelectTool(), new PencilTool()]}
-      defaultTool="select"
-      style={{ width: '100vw', height: '100vh' }}
-    />
-  );
-}
-```
-
-Your container needs a defined size — the canvas fills it.
-
-## Embedding React Components
-
-The main feature — render any React component as a canvas element that pans, zooms, and resizes with the canvas:
-
-```tsx
-import { FieldNotesCanvas, CanvasElement } from '@fieldnotes/react';
-import { SelectTool } from '@fieldnotes/core';
-
-function App() {
-  return (
-    <FieldNotesCanvas
-      tools={[new SelectTool()]}
-      defaultTool="select"
-      style={{ width: '100vw', height: '100vh' }}
-    >
-      <CanvasElement position={{ x: 100, y: 200 }} size={{ w: 300, h: 200 }}>
-        <MyCard />
-      </CanvasElement>
-
-      <CanvasElement position={{ x: 500, y: 100 }}>
-        <button onClick={() => console.log('clicked!')}>Interactive button on the canvas</button>
-      </CanvasElement>
-    </FieldNotesCanvas>
-  );
-}
-```
-
-Embedded components use a **two-mode interaction model**: by default they can be selected, dragged, and resized. **Double-click** to enter interact mode (clicks, inputs, forms work). **Escape** or click outside to exit.
-
-## Hooks
-
-### `useViewport()`
-
-Access the core `Viewport` instance for imperative operations:
-
-```tsx
-import { useViewport } from '@fieldnotes/react';
-
-function Toolbar() {
-  const viewport = useViewport();
-
-  return <button onClick={() => viewport.undo()}>Undo</button>;
-}
-```
-
-Must be used inside `<FieldNotesCanvas>`.
-
-### `useActiveTool()`
-
-Reactive current tool name — re-renders when the tool changes:
-
-```tsx
-import { useActiveTool, useViewport } from '@fieldnotes/react';
-
-function ToolIndicator() {
-  const tool = useActiveTool();
-  const viewport = useViewport();
-
-  return (
-    <div>
-      <span>Current: {tool}</span>
-      <button onClick={() => viewport.toolManager.setTool('pencil', viewport.toolContext)}>
-        Pencil
-      </button>
-    </div>
-  );
-}
-```
-
-### `useCamera()`
-
-Reactive camera state (position + zoom) — re-renders on pan/zoom:
-
-```tsx
-import { useCamera } from '@fieldnotes/react';
-
-function CameraInfo() {
-  const { x, y, zoom } = useCamera();
-
-  return (
-    <span>
-      {zoom.toFixed(2)}x at ({x.toFixed(0)}, {y.toFixed(0)})
-    </span>
-  );
-}
-```
-
-### Changing Tool Options
-
-Use `useViewport()` to access tool instances and change options at runtime:
-
-```tsx
-import { useViewport } from '@fieldnotes/react';
-import type { PencilTool } from '@fieldnotes/core';
-
-function ColorPicker() {
-  const viewport = useViewport();
-
-  const setColor = (color: string) => {
-    viewport.toolManager.getTool<PencilTool>('pencil')?.setOptions({ color });
-  };
-
-  return <input type="color" onChange={(e) => setColor(e.target.value)} />;
-}
-```
-
-## Component API
-
-### `<FieldNotesCanvas>`
-
-| Prop          | Type                           | Description                             |
-| ------------- | ------------------------------ | --------------------------------------- |
-| `options`     | `ViewportOptions`              | Camera and background config            |
-| `tools`       | `Tool[]`                       | Tools to register on mount              |
-| `defaultTool` | `string`                       | Tool to activate on mount               |
-| `className`   | `string`                       | CSS class for the container div         |
-| `style`       | `CSSProperties`                | Inline styles for the container div     |
-| `onReady`     | `(viewport: Viewport) => void` | Called after Viewport is created        |
-| `children`    | `ReactNode`                    | Child components (have access to hooks) |
-| `ref`         | `Ref<FieldNotesCanvasRef>`     | Exposes `{ viewport }`                  |
-
-### `<CanvasElement>`
-
-| Prop       | Type                       | Default              | Description                        |
-| ---------- | -------------------------- | -------------------- | ---------------------------------- |
-| `position` | `{ x: number; y: number }` | required             | World-space position               |
-| `size`     | `{ w: number; h: number }` | `{ w: 200, h: 150 }` | Element size in world-space pixels |
-| `children` | `ReactNode`                | required             | React content to render on canvas  |
-
-Position and size updates are reactive — change the props and the element moves/resizes on the canvas.
-
-## Accessing the Viewport Directly
-
-For advanced use cases, use a ref:
-
-```tsx
-import { useRef } from 'react';
-import { FieldNotesCanvas, type FieldNotesCanvasRef } from '@fieldnotes/react';
-
-function App() {
-  const canvasRef = useRef<FieldNotesCanvasRef>(null);
-
-  const exportState = () => {
-    const json = canvasRef.current?.viewport?.exportJSON();
-    console.log(json);
-  };
-
-  return (
-    <>
-      <FieldNotesCanvas ref={canvasRef} style={{ width: '100vw', height: '100vh' }} />
-      <button onClick={exportState}>Export</button>
-    </>
-  );
-}
-```
-
-## License
-
-MIT
+# @fieldnotes/react
+
+React bindings for the [Field Notes](https://github.com/IrakliDevelop/fieldnotes) infinite canvas SDK. Embed React components directly onto an infinite, pannable, zoomable canvas.
+
+## Install
+
+```bash
+npm install @fieldnotes/core @fieldnotes/react
+```
+
+Requires React 18+.
+
+## Quick Start
+
+```tsx
+import { FieldNotesCanvas } from '@fieldnotes/react';
+import { HandTool, SelectTool, PencilTool } from '@fieldnotes/core';
+
+function App() {
+  return (
+    <FieldNotesCanvas
+      tools={[new HandTool(), new SelectTool(), new PencilTool()]}
+      defaultTool="select"
+      style={{ width: '100vw', height: '100vh' }}
+    />
+  );
+}
+```
+
+Your container needs a defined size — the canvas fills it.
+
+## Embedding React Components
+
+The main feature — render any React component as a canvas element that pans, zooms, and resizes with the canvas:
+
+```tsx
+import { FieldNotesCanvas, CanvasElement } from '@fieldnotes/react';
+import { SelectTool } from '@fieldnotes/core';
+
+function App() {
+  return (
+    <FieldNotesCanvas
+      tools={[new SelectTool()]}
+      defaultTool="select"
+      style={{ width: '100vw', height: '100vh' }}
+    >
+      <CanvasElement position={{ x: 100, y: 200 }} size={{ w: 300, h: 200 }}>
+        <MyCard />
+      </CanvasElement>
+
+      <CanvasElement position={{ x: 500, y: 100 }}>
+        <button onClick={() => console.log('clicked!')}>Interactive button on the canvas</button>
+      </CanvasElement>
+    </FieldNotesCanvas>
+  );
+}
+```
+
+Embedded components use a **two-mode interaction model**: by default they can be selected, dragged, and resized. **Double-click** to enter interact mode (clicks, inputs, forms work). **Escape** or click outside to exit.
+
+## Hooks
+
+All hooks must be used inside `<FieldNotesCanvas>`.
+
+### `useActiveTool()`
+
+Reactive tool name + setter — re-renders when the active tool changes:
+
+```tsx
+import { useActiveTool } from '@fieldnotes/react';
+
+function Toolbar() {
+  const [tool, setTool] = useActiveTool();
+
+  return (
+    <div>
+      <span>Current: {tool}</span>
+      <button onClick={() => setTool('pencil')}>Pencil</button>
+      <button onClick={() => setTool('select')}>Select</button>
+    </div>
+  );
+}
+```
+
+### `useToolOptions(toolName)`
+
+Reactive tool options with two-way sync — read and write tool configuration:
+
+```tsx
+import { useActiveTool, useToolOptions } from '@fieldnotes/react';
+import type { PencilToolOptions } from '@fieldnotes/core';
+
+function PencilSettings() {
+  const [tool, setTool] = useActiveTool();
+  const [opts, setOpts] = useToolOptions<PencilToolOptions>('pencil');
+
+  return (
+    <div>
+      <button onClick={() => setTool('pencil')}>Pencil</button>
+      {tool === 'pencil' && opts && (
+        <>
+          <input
+            type="color"
+            value={opts.color}
+            onChange={(e) => setOpts({ color: e.target.value })}
+          />
+          <input
+            type="range"
+            min={1}
+            max={20}
+            value={opts.width}
+            onChange={(e) => setOpts({ width: Number(e.target.value) })}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+```
+
+Returns `[null, noop]` for tools that don't support options (e.g., `HandTool`).
+
+### `useLayers()`
+
+Full layer management — reactive layer list with action callbacks:
+
+```tsx
+import { useLayers } from '@fieldnotes/react';
+
+function LayersPanel() {
+  const {
+    layers,
+    activeLayerId,
+    createLayer,
+    removeLayer,
+    setVisible,
+    setLocked,
+    setOpacity,
+    setActiveLayer,
+  } = useLayers();
+
+  return (
+    <div>
+      <button onClick={() => createLayer()}>Add Layer</button>
+      {layers.map((layer) => (
+        <div key={layer.id} onClick={() => setActiveLayer(layer.id)}>
+          <span>
+            {layer.name} {layer.id === activeLayerId ? '(active)' : ''}
+          </span>
+          <button onClick={() => setVisible(layer.id, !layer.visible)}>
+            {layer.visible ? 'Hide' : 'Show'}
+          </button>
+          <button onClick={() => setLocked(layer.id, !layer.locked)}>
+            {layer.locked ? 'Unlock' : 'Lock'}
+          </button>
+          <input
+            type="range"
+            min={0}
+            max={1}
+            step={0.1}
+            value={layer.opacity}
+            onChange={(e) => setOpacity(layer.id, Number(e.target.value))}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+Also exposes: `renameLayer`, `reorderLayer`, `moveElement`.
+
+### `useHistory()`
+
+Reactive undo/redo state:
+
+```tsx
+import { useHistory } from '@fieldnotes/react';
+
+function UndoRedo() {
+  const { canUndo, canRedo, undo, redo } = useHistory();
+
+  return (
+    <div>
+      <button onClick={undo} disabled={!canUndo}>
+        Undo
+      </button>
+      <button onClick={redo} disabled={!canRedo}>
+        Redo
+      </button>
+    </div>
+  );
+}
+```
+
+### `useElements(type?)`
+
+Reactive element list — re-renders when elements are added, removed, or updated:
+
+```tsx
+import { useElements } from '@fieldnotes/react';
+
+function ElementCount() {
+  const elements = useElements();
+  const notes = useElements('note');
+
+  return (
+    <span>
+      {notes.length} notes / {elements.length} total
+    </span>
+  );
+}
+```
+
+Pass an element type (`'note'`, `'stroke'`, `'arrow'`, etc.) to filter.
+
+### `useCamera()`
+
+Reactive camera state (position + zoom) — re-renders on pan/zoom:
+
+```tsx
+import { useCamera } from '@fieldnotes/react';
+
+function CameraInfo() {
+  const { x, y, zoom } = useCamera();
+
+  return (
+    <span>
+      {zoom.toFixed(2)}x at ({x.toFixed(0)}, {y.toFixed(0)})
+    </span>
+  );
+}
+```
+
+### `useViewport()`
+
+Access the core `Viewport` instance for imperative operations not covered by the hooks above:
+
+```tsx
+import { useViewport } from '@fieldnotes/react';
+
+function ExportButton() {
+  const viewport = useViewport();
+
+  return <button onClick={() => viewport.exportImage()}>Export PNG</button>;
+}
+```
+
+## Component API
+
+### `<FieldNotesCanvas>`
+
+| Prop          | Type                           | Description                             |
+| ------------- | ------------------------------ | --------------------------------------- |
+| `options`     | `ViewportOptions`              | Camera and background config            |
+| `tools`       | `Tool[]`                       | Tools to register on mount              |
+| `defaultTool` | `string`                       | Tool to activate on mount               |
+| `className`   | `string`                       | CSS class for the container div         |
+| `style`       | `CSSProperties`                | Inline styles for the container div     |
+| `onReady`     | `(viewport: Viewport) => void` | Called after Viewport is created        |
+| `children`    | `ReactNode`                    | Child components (have access to hooks) |
+| `ref`         | `Ref<FieldNotesCanvasRef>`     | Exposes `{ viewport }`                  |
+
+### `<CanvasElement>`
+
+| Prop       | Type                       | Default              | Description                        |
+| ---------- | -------------------------- | -------------------- | ---------------------------------- |
+| `position` | `{ x: number; y: number }` | required             | World-space position               |
+| `size`     | `{ w: number; h: number }` | `{ w: 200, h: 150 }` | Element size in world-space pixels |
+| `children` | `ReactNode`                | required             | React content to render on canvas  |
+
+Position and size updates are reactive — change the props and the element moves/resizes on the canvas.
+
+## Accessing the Viewport Directly
+
+For advanced use cases, use a ref:
+
+```tsx
+import { useRef } from 'react';
+import { FieldNotesCanvas, type FieldNotesCanvasRef } from '@fieldnotes/react';
+
+function App() {
+  const canvasRef = useRef<FieldNotesCanvasRef>(null);
+
+  const exportState = () => {
+    const json = canvasRef.current?.viewport?.exportJSON();
+    console.log(json);
+  };
+
+  return (
+    <>
+      <FieldNotesCanvas ref={canvasRef} style={{ width: '100vw', height: '100vh' }} />
+      <button onClick={exportState}>Export</button>
+    </>
+  );
+}
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -25,6 +25,10 @@ __export(index_exports, {
   ViewportContext: () => ViewportContext,
   useActiveTool: () => useActiveTool,
   useCamera: () => useCamera,
+  useElements: () => useElements,
+  useHistory: () => useHistory,
+  useLayers: () => useLayers,
+  useToolOptions: () => useToolOptions,
   useViewport: () => useViewport
 });
 module.exports = __toCommonJS(index_exports);
@@ -71,7 +75,7 @@ var FieldNotesCanvas = (0, import_react2.forwardRef)(
 var import_react4 = require("react");
 var import_react_dom = require("react-dom");
 
-// src/use-viewport.ts
+// src/hooks/use-viewport.ts
 var import_react3 = require("react");
 function useViewport() {
   const viewport = (0, import_react3.useContext)(ViewportContext);
@@ -118,7 +122,7 @@ function CanvasElement({ position, size, children }) {
   return (0, import_react_dom.createPortal)(children, portalTarget);
 }
 
-// src/use-active-tool.ts
+// src/hooks/use-active-tool.ts
 var import_react5 = require("react");
 function useActiveTool() {
   const viewport = useViewport();
@@ -127,10 +131,15 @@ function useActiveTool() {
     [viewport]
   );
   const getSnapshot = (0, import_react5.useCallback)(() => viewport.toolManager.activeTool?.name ?? "", [viewport]);
-  return (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
+  const toolName = (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
+  const setTool = (0, import_react5.useCallback)(
+    (name) => viewport.toolManager.setTool(name, viewport.toolContext),
+    [viewport]
+  );
+  return [toolName, setTool];
 }
 
-// src/use-camera.ts
+// src/hooks/use-camera.ts
 var import_react6 = require("react");
 function useCamera() {
   const viewport = useViewport();
@@ -151,6 +160,188 @@ function useCamera() {
   }, [viewport]);
   return (0, import_react6.useSyncExternalStore)(subscribe, getSnapshot);
 }
+
+// src/hooks/use-tool-options.ts
+var import_react7 = require("react");
+function noop() {
+}
+function useToolOptions(toolName) {
+  const viewport = useViewport();
+  const cachedRef = (0, import_react7.useRef)(null);
+  const subscribe = (0, import_react7.useCallback)(
+    (onStoreChange) => {
+      const tool = viewport.toolManager.getTool(toolName);
+      if (!tool?.onOptionsChange) return noop;
+      return tool.onOptionsChange(onStoreChange);
+    },
+    [viewport, 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 setOptions = (0, import_react7.useCallback)(
+    (partial) => {
+      const tool = viewport.toolManager.getTool(toolName);
+      tool?.setOptions?.(partial);
+    },
+    [viewport, 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");
+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 createLayer = (0, import_react8.useCallback)(
+    (name) => viewport.layerManager.createLayer(name),
+    [viewport]
+  );
+  const removeLayer = (0, import_react8.useCallback)(
+    (id) => viewport.layerManager.removeLayer(id),
+    [viewport]
+  );
+  const renameLayer = (0, import_react8.useCallback)(
+    (id, name) => viewport.layerManager.renameLayer(id, name),
+    [viewport]
+  );
+  const reorderLayer = (0, import_react8.useCallback)(
+    (id, newOrder) => viewport.layerManager.reorderLayer(id, newOrder),
+    [viewport]
+  );
+  const setVisible = (0, import_react8.useCallback)(
+    (id, visible) => viewport.layerManager.setLayerVisible(id, visible),
+    [viewport]
+  );
+  const setLocked = (0, import_react8.useCallback)(
+    (id, locked) => viewport.layerManager.setLayerLocked(id, locked),
+    [viewport]
+  );
+  const setOpacity = (0, import_react8.useCallback)(
+    (id, opacity) => viewport.layerManager.setLayerOpacity(id, opacity),
+    [viewport]
+  );
+  const setActiveLayer = (0, import_react8.useCallback)(
+    (id) => viewport.layerManager.setActiveLayer(id),
+    [viewport]
+  );
+  const moveElement = (0, import_react8.useCallback)(
+    (elementId, layerId) => viewport.layerManager.moveElementToLayer(elementId, layerId),
+    [viewport]
+  );
+  return {
+    layers: snapshot.layers,
+    activeLayerId: snapshot.activeLayerId,
+    createLayer,
+    removeLayer,
+    renameLayer,
+    reorderLayer,
+    setVisible,
+    setLocked,
+    setOpacity,
+    setActiveLayer,
+    moveElement
+  };
+}
+
+// src/hooks/use-history.ts
+var import_react9 = require("react");
+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 undo = (0, import_react9.useCallback)(() => viewport.undo(), [viewport]);
+  const redo = (0, import_react9.useCallback)(() => viewport.redo(), [viewport]);
+  return {
+    canUndo: snapshot.canUndo,
+    canRedo: snapshot.canRedo,
+    undo,
+    redo
+  };
+}
+
+// src/hooks/use-elements.ts
+var import_react10 = require("react");
+function useElements(type) {
+  const viewport = useViewport();
+  const cachedRef = (0, import_react10.useRef)([]);
+  const subscribe = (0, import_react10.useCallback)(
+    (onStoreChange) => viewport.store.onChange(onStoreChange),
+    [viewport]
+  );
+  const getSnapshot = (0, import_react10.useCallback)(() => {
+    const next = type ? viewport.store.getElementsByType(type) : 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, type]);
+  return (0, import_react10.useSyncExternalStore)(subscribe, getSnapshot);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CanvasElement,
@@ -158,6 +349,10 @@ function useCamera() {
   ViewportContext,
   useActiveTool,
   useCamera,
+  useElements,
+  useHistory,
+  useLayers,
+  useToolOptions,
   useViewport
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/field-notes-canvas.tsx","../src/context.ts","../src/canvas-element.tsx","../src/use-viewport.ts","../src/use-active-tool.ts","../src/use-camera.ts"],"sourcesContent":["export { FieldNotesCanvas } from './field-notes-canvas';\r\nexport type { FieldNotesCanvasProps, FieldNotesCanvasRef } from './field-notes-canvas';\r\nexport { CanvasElement } from './canvas-element';\r\nexport type { CanvasElementProps } from './canvas-element';\r\nexport { useViewport } from './use-viewport';\r\nexport { useActiveTool } from './use-active-tool';\r\nexport { useCamera } from './use-camera';\r\nexport type { CameraState } from './use-camera';\r\nexport { ViewportContext } from './context';\r\n","import {\r\n  useRef,\r\n  useEffect,\r\n  useState,\r\n  forwardRef,\r\n  useImperativeHandle,\r\n  type ReactNode,\r\n  type CSSProperties,\r\n} from 'react';\r\nimport { Viewport } from '@fieldnotes/core';\r\nimport type { ViewportOptions, Tool } from '@fieldnotes/core';\r\nimport { ViewportContext } from './context';\r\n\r\nexport interface FieldNotesCanvasProps {\r\n  options?: ViewportOptions;\r\n  tools?: Tool[];\r\n  defaultTool?: string;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n  children?: ReactNode;\r\n  onReady?: (viewport: Viewport) => void;\r\n}\r\n\r\nexport interface FieldNotesCanvasRef {\r\n  viewport: Viewport | null;\r\n}\r\n\r\nexport const FieldNotesCanvas = forwardRef<FieldNotesCanvasRef, FieldNotesCanvasProps>(\r\n  function FieldNotesCanvas(\r\n    { options, tools, defaultTool, className, style, children, onReady },\r\n    ref,\r\n  ) {\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const [viewport, setViewport] = useState<Viewport | null>(null);\r\n\r\n    useImperativeHandle(ref, () => ({ viewport }), [viewport]);\r\n\r\n    useEffect(() => {\r\n      const el = containerRef.current;\r\n      if (!el) return;\r\n\r\n      const vp = new Viewport(el, options);\r\n\r\n      if (tools) {\r\n        for (const tool of tools) {\r\n          vp.toolManager.register(tool);\r\n        }\r\n      }\r\n\r\n      if (defaultTool) {\r\n        vp.toolManager.setTool(defaultTool, vp.toolContext);\r\n      }\r\n\r\n      setViewport(vp);\r\n      onReady?.(vp);\r\n\r\n      return () => {\r\n        vp.destroy();\r\n        setViewport(null);\r\n      };\r\n    }, []);\r\n\r\n    return (\r\n      <div ref={containerRef} className={className} style={style}>\r\n        {viewport && (\r\n          <ViewportContext.Provider value={viewport}>{children}</ViewportContext.Provider>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n","import { createContext } from 'react';\r\nimport type { Viewport } from '@fieldnotes/core';\r\n\r\nexport const ViewportContext = createContext<Viewport | null>(null);\r\n","import { useEffect, useRef, useState, type ReactNode } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { useViewport } from './use-viewport';\r\n\r\nexport interface CanvasElementProps {\r\n  position: { x: number; y: number };\r\n  size?: { w: number; h: number };\r\n  children: ReactNode;\r\n}\r\n\r\nexport function CanvasElement({ position, size, children }: CanvasElementProps) {\r\n  const viewport = useViewport();\r\n  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\r\n  const elementIdRef = useRef<string | null>(null);\r\n\r\n  useEffect(() => {\r\n    const container = document.createElement('div');\r\n    Object.assign(container.style, {\r\n      width: '100%',\r\n      height: '100%',\r\n    });\r\n\r\n    // Append to domLayer immediately so portal children are queryable in the document\r\n    // before the viewport render loop fires via requestAnimationFrame.\r\n    viewport.domLayer.appendChild(container);\r\n\r\n    const id = viewport.addHtmlElement(container, position, size);\r\n    elementIdRef.current = id;\r\n    setPortalTarget(container);\r\n\r\n    return () => {\r\n      if (elementIdRef.current) {\r\n        viewport.store.remove(elementIdRef.current);\r\n        viewport.requestRender();\r\n        elementIdRef.current = null;\r\n      }\r\n      setPortalTarget(null);\r\n    };\r\n  }, [viewport]);\r\n\r\n  useEffect(() => {\r\n    const id = elementIdRef.current;\r\n    if (!id) return;\r\n    viewport.store.update(id, { position });\r\n    if (size) {\r\n      viewport.store.update(id, { size });\r\n    }\r\n    viewport.requestRender();\r\n  }, [viewport, position.x, position.y, size?.w, size?.h]);\r\n\r\n  if (!portalTarget) return null;\r\n  return createPortal(children, portalTarget);\r\n}\r\n","import { useContext } from 'react';\r\nimport type { Viewport } from '@fieldnotes/core';\r\nimport { ViewportContext } from './context';\r\n\r\nexport function useViewport(): Viewport {\r\n  const viewport = useContext(ViewportContext);\r\n  if (!viewport) {\r\n    throw new Error('useViewport must be used inside <FieldNotesCanvas>');\r\n  }\r\n  return viewport;\r\n}\r\n","import { useCallback, useSyncExternalStore } from 'react';\r\nimport { useViewport } from './use-viewport';\r\n\r\nexport function useActiveTool(): string {\r\n  const viewport = useViewport();\r\n\r\n  const subscribe = useCallback(\r\n    (onStoreChange: () => void) => viewport.toolManager.onChange(() => onStoreChange()),\r\n    [viewport],\r\n  );\r\n\r\n  const getSnapshot = useCallback(() => viewport.toolManager.activeTool?.name ?? '', [viewport]);\r\n\r\n  return useSyncExternalStore(subscribe, getSnapshot);\r\n}\r\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\r\nimport { useViewport } from './use-viewport';\r\n\r\nexport interface CameraState {\r\n  x: number;\r\n  y: number;\r\n  zoom: number;\r\n}\r\n\r\nexport function useCamera(): CameraState {\r\n  const viewport = useViewport();\r\n  const cachedRef = useRef<CameraState>({ x: 0, y: 0, zoom: 1 });\r\n\r\n  const subscribe = useCallback(\r\n    (onStoreChange: () => void) => viewport.camera.onChange(onStoreChange),\r\n    [viewport],\r\n  );\r\n\r\n  const getSnapshot = useCallback((): CameraState => {\r\n    const { position, zoom } = viewport.camera;\r\n    const cached = cachedRef.current;\r\n    if (cached.x === position.x && cached.y === position.y && cached.zoom === zoom) {\r\n      return cached;\r\n    }\r\n    const next = { x: position.x, y: position.y, zoom };\r\n    cachedRef.current = next;\r\n    return next;\r\n  }, [viewport]);\r\n\r\n  return useSyncExternalStore(subscribe, getSnapshot);\r\n}\r\n"],"mappings":"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","names":["import_react","FieldNotesCanvas","import_react","import_react","import_react","import_react"]}
+{"version":3,"sources":["../src/index.ts","../src/field-notes-canvas.tsx","../src/context.ts","../src/canvas-element.tsx","../src/hooks/use-viewport.ts","../src/hooks/use-active-tool.ts","../src/hooks/use-camera.ts","../src/hooks/use-tool-options.ts","../src/hooks/use-layers.ts","../src/hooks/use-history.ts","../src/hooks/use-elements.ts"],"sourcesContent":["export { FieldNotesCanvas } from './field-notes-canvas';\nexport type { FieldNotesCanvasProps, FieldNotesCanvasRef } from './field-notes-canvas';\nexport { CanvasElement } from './canvas-element';\nexport type { CanvasElementProps } from './canvas-element';\nexport {\n  useViewport,\n  useActiveTool,\n  useCamera,\n  useToolOptions,\n  useLayers,\n  useHistory,\n  useElements,\n} from './hooks';\nexport type { CameraState, UseLayersResult, UseHistoryResult } from './hooks';\nexport { ViewportContext } from './context';\n","import {\r\n  useRef,\r\n  useEffect,\r\n  useState,\r\n  forwardRef,\r\n  useImperativeHandle,\r\n  type ReactNode,\r\n  type CSSProperties,\r\n} from 'react';\r\nimport { Viewport } from '@fieldnotes/core';\r\nimport type { ViewportOptions, Tool } from '@fieldnotes/core';\r\nimport { ViewportContext } from './context';\r\n\r\nexport interface FieldNotesCanvasProps {\r\n  options?: ViewportOptions;\r\n  tools?: Tool[];\r\n  defaultTool?: string;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n  children?: ReactNode;\r\n  onReady?: (viewport: Viewport) => void;\r\n}\r\n\r\nexport interface FieldNotesCanvasRef {\r\n  viewport: Viewport | null;\r\n}\r\n\r\nexport const FieldNotesCanvas = forwardRef<FieldNotesCanvasRef, FieldNotesCanvasProps>(\r\n  function FieldNotesCanvas(\r\n    { options, tools, defaultTool, className, style, children, onReady },\r\n    ref,\r\n  ) {\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const [viewport, setViewport] = useState<Viewport | null>(null);\r\n\r\n    useImperativeHandle(ref, () => ({ viewport }), [viewport]);\r\n\r\n    useEffect(() => {\r\n      const el = containerRef.current;\r\n      if (!el) return;\r\n\r\n      const vp = new Viewport(el, options);\r\n\r\n      if (tools) {\r\n        for (const tool of tools) {\r\n          vp.toolManager.register(tool);\r\n        }\r\n      }\r\n\r\n      if (defaultTool) {\r\n        vp.toolManager.setTool(defaultTool, vp.toolContext);\r\n      }\r\n\r\n      setViewport(vp);\r\n      onReady?.(vp);\r\n\r\n      return () => {\r\n        vp.destroy();\r\n        setViewport(null);\r\n      };\r\n    }, []);\r\n\r\n    return (\r\n      <div ref={containerRef} className={className} style={style}>\r\n        {viewport && (\r\n          <ViewportContext.Provider value={viewport}>{children}</ViewportContext.Provider>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n","import { createContext } from 'react';\r\nimport type { Viewport } from '@fieldnotes/core';\r\n\r\nexport const ViewportContext = createContext<Viewport | null>(null);\r\n","import { useEffect, useRef, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useViewport } from './hooks/use-viewport';\n\nexport interface CanvasElementProps {\n  position: { x: number; y: number };\n  size?: { w: number; h: number };\n  children: ReactNode;\n}\n\nexport function CanvasElement({ position, size, children }: CanvasElementProps) {\n  const viewport = useViewport();\n  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n  const elementIdRef = useRef<string | null>(null);\n\n  useEffect(() => {\n    const container = document.createElement('div');\n    Object.assign(container.style, {\n      width: '100%',\n      height: '100%',\n    });\n\n    // Append to domLayer immediately so portal children are queryable in the document\n    // before the viewport render loop fires via requestAnimationFrame.\n    viewport.domLayer.appendChild(container);\n\n    const id = viewport.addHtmlElement(container, position, size);\n    elementIdRef.current = id;\n    setPortalTarget(container);\n\n    return () => {\n      if (elementIdRef.current) {\n        viewport.store.remove(elementIdRef.current);\n        viewport.requestRender();\n        elementIdRef.current = null;\n      }\n      setPortalTarget(null);\n    };\n  }, [viewport]);\n\n  useEffect(() => {\n    const id = elementIdRef.current;\n    if (!id) return;\n    viewport.store.update(id, { position });\n    if (size) {\n      viewport.store.update(id, { size });\n    }\n    viewport.requestRender();\n  }, [viewport, position.x, position.y, size?.w, size?.h]);\n\n  if (!portalTarget) return null;\n  return createPortal(children, portalTarget);\n}\n","import { useContext } from 'react';\nimport type { Viewport } from '@fieldnotes/core';\nimport { ViewportContext } from '../context';\n\nexport function useViewport(): Viewport {\n  const viewport = useContext(ViewportContext);\n  if (!viewport) {\n    throw new Error('useViewport must be used inside <FieldNotesCanvas>');\n  }\n  return viewport;\n}\n","import { useCallback, useSyncExternalStore } from 'react';\nimport { useViewport } from './use-viewport';\n\nexport function useActiveTool(): [toolName: string, setTool: (name: string) => void] {\n  const viewport = useViewport();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.toolManager.onChange(() => onStoreChange()),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback(() => viewport.toolManager.activeTool?.name ?? '', [viewport]);\n\n  const toolName = useSyncExternalStore(subscribe, getSnapshot);\n\n  const setTool = useCallback(\n    (name: string) => viewport.toolManager.setTool(name, viewport.toolContext),\n    [viewport],\n  );\n\n  return [toolName, setTool];\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport { useViewport } from './use-viewport';\n\nexport interface CameraState {\n  x: number;\n  y: number;\n  zoom: number;\n}\n\nexport function useCamera(): CameraState {\n  const viewport = useViewport();\n  const cachedRef = useRef<CameraState>({ x: 0, y: 0, zoom: 1 });\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.camera.onChange(onStoreChange),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback((): CameraState => {\n    const { position, zoom } = viewport.camera;\n    const cached = cachedRef.current;\n    if (cached.x === position.x && cached.y === position.y && cached.zoom === zoom) {\n      return cached;\n    }\n    const next = { x: position.x, y: position.y, zoom };\n    cachedRef.current = next;\n    return next;\n  }, [viewport]);\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport { useViewport } from './use-viewport';\n\nfunction noop() {\n  /* unsubscribe placeholder */\n}\n\nexport function useToolOptions<T extends Record<string, unknown>>(\n  toolName: string,\n): [options: T | null, setOptions: (partial: Partial<T>) => void] {\n  const viewport = useViewport();\n  const cachedRef = useRef<T | null>(null);\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      const tool = viewport.toolManager.getTool(toolName);\n      if (!tool?.onOptionsChange) return noop;\n      return tool.onOptionsChange(onStoreChange);\n    },\n    [viewport, toolName],\n  );\n\n  const getSnapshot = useCallback((): T | null => {\n    const tool = viewport.toolManager.getTool(toolName);\n    if (!tool?.getOptions) return null;\n    const next = tool.getOptions() as T;\n    const cached = cachedRef.current;\n    if (cached && shallowEqual(cached, next)) return cached;\n    cachedRef.current = next;\n    return next;\n  }, [viewport, toolName]);\n\n  const options = useSyncExternalStore(subscribe, getSnapshot);\n\n  const setOptions = useCallback(\n    (partial: Partial<T>) => {\n      const tool = viewport.toolManager.getTool(toolName);\n      tool?.setOptions?.(partial as Record<string, unknown>);\n    },\n    [viewport, toolName],\n  );\n\n  return [options, setOptions];\n}\n\nfunction shallowEqual(a: Record<string, unknown>, b: Record<string, unknown>): boolean {\n  const keysA = Object.keys(a);\n  const keysB = Object.keys(b);\n  if (keysA.length !== keysB.length) return false;\n  for (const key of keysA) {\n    const valA = a[key];\n    const valB = b[key];\n    if (valA === valB) continue;\n    if (\n      typeof valA === 'object' &&\n      valA !== null &&\n      typeof valB === 'object' &&\n      valB !== null &&\n      !Array.isArray(valA) &&\n      !Array.isArray(valB)\n    ) {\n      const objA = valA as Record<string, unknown>;\n      const objB = valB as Record<string, unknown>;\n      const innerKeys = Object.keys(objA);\n      if (\n        innerKeys.length === Object.keys(objB).length &&\n        innerKeys.every((k) => objA[k] === objB[k])\n      ) {\n        continue;\n      }\n    }\n    return false;\n  }\n  return true;\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport type { Layer } from '@fieldnotes/core';\nimport { useViewport } from './use-viewport';\n\ninterface LayersSnapshot {\n  layers: Layer[];\n  activeLayerId: string;\n}\n\nexport interface UseLayersResult {\n  layers: Layer[];\n  activeLayerId: string;\n  createLayer: (name?: string) => Layer;\n  removeLayer: (id: string) => void;\n  renameLayer: (id: string, name: string) => void;\n  reorderLayer: (id: string, newOrder: number) => void;\n  setVisible: (id: string, visible: boolean) => void;\n  setLocked: (id: string, locked: boolean) => void;\n  setOpacity: (id: string, opacity: number) => void;\n  setActiveLayer: (id: string) => void;\n  moveElement: (elementId: string, layerId: string) => void;\n}\n\nexport function useLayers(): UseLayersResult {\n  const viewport = useViewport();\n  const cachedRef = useRef<LayersSnapshot>({ layers: [], activeLayerId: '' });\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.layerManager.on('change', onStoreChange),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback((): LayersSnapshot => {\n    const layers = viewport.layerManager.getLayers();\n    const activeLayerId = viewport.layerManager.activeLayerId;\n    const cached = cachedRef.current;\n    if (\n      cached.activeLayerId === activeLayerId &&\n      cached.layers.length === layers.length &&\n      cached.layers.every((l, i) => {\n        const next = layers[i];\n        return (\n          next !== undefined &&\n          l.id === next.id &&\n          l.name === next.name &&\n          l.visible === next.visible &&\n          l.locked === next.locked &&\n          l.order === next.order &&\n          l.opacity === next.opacity\n        );\n      })\n    ) {\n      return cached;\n    }\n    const next = { layers, activeLayerId };\n    cachedRef.current = next;\n    return next;\n  }, [viewport]);\n\n  const snapshot = useSyncExternalStore(subscribe, getSnapshot);\n\n  const createLayer = useCallback(\n    (name?: string) => viewport.layerManager.createLayer(name),\n    [viewport],\n  );\n\n  const removeLayer = useCallback(\n    (id: string) => viewport.layerManager.removeLayer(id),\n    [viewport],\n  );\n\n  const renameLayer = useCallback(\n    (id: string, name: string) => viewport.layerManager.renameLayer(id, name),\n    [viewport],\n  );\n\n  const reorderLayer = useCallback(\n    (id: string, newOrder: number) => viewport.layerManager.reorderLayer(id, newOrder),\n    [viewport],\n  );\n\n  const setVisible = useCallback(\n    (id: string, visible: boolean) => viewport.layerManager.setLayerVisible(id, visible),\n    [viewport],\n  );\n\n  const setLocked = useCallback(\n    (id: string, locked: boolean) => viewport.layerManager.setLayerLocked(id, locked),\n    [viewport],\n  );\n\n  const setOpacity = useCallback(\n    (id: string, opacity: number) => viewport.layerManager.setLayerOpacity(id, opacity),\n    [viewport],\n  );\n\n  const setActiveLayer = useCallback(\n    (id: string) => viewport.layerManager.setActiveLayer(id),\n    [viewport],\n  );\n\n  const moveElement = useCallback(\n    (elementId: string, layerId: string) =>\n      viewport.layerManager.moveElementToLayer(elementId, layerId),\n    [viewport],\n  );\n\n  return {\n    layers: snapshot.layers,\n    activeLayerId: snapshot.activeLayerId,\n    createLayer,\n    removeLayer,\n    renameLayer,\n    reorderLayer,\n    setVisible,\n    setLocked,\n    setOpacity,\n    setActiveLayer,\n    moveElement,\n  };\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport { useViewport } from './use-viewport';\n\ninterface HistorySnapshot {\n  canUndo: boolean;\n  canRedo: boolean;\n}\n\nexport interface UseHistoryResult {\n  canUndo: boolean;\n  canRedo: boolean;\n  undo: () => void;\n  redo: () => void;\n}\n\nexport function useHistory(): UseHistoryResult {\n  const viewport = useViewport();\n  const cachedRef = useRef<HistorySnapshot>({ canUndo: false, canRedo: false });\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.history.onChange(onStoreChange),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback((): HistorySnapshot => {\n    const canUndo = viewport.history.canUndo;\n    const canRedo = viewport.history.canRedo;\n    const cached = cachedRef.current;\n    if (cached.canUndo === canUndo && cached.canRedo === canRedo) {\n      return cached;\n    }\n    const next = { canUndo, canRedo };\n    cachedRef.current = next;\n    return next;\n  }, [viewport]);\n\n  const snapshot = useSyncExternalStore(subscribe, getSnapshot);\n\n  const undo = useCallback(() => viewport.undo(), [viewport]);\n  const redo = useCallback(() => viewport.redo(), [viewport]);\n\n  return {\n    canUndo: snapshot.canUndo,\n    canRedo: snapshot.canRedo,\n    undo,\n    redo,\n  };\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport type { CanvasElement, ElementType } from '@fieldnotes/core';\nimport { useViewport } from './use-viewport';\n\nexport function useElements(): CanvasElement[];\nexport function useElements<T extends ElementType>(type: T): Extract<CanvasElement, { type: T }>[];\nexport function useElements(type?: ElementType): CanvasElement[] {\n  const viewport = useViewport();\n  const cachedRef = useRef<CanvasElement[]>([]);\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.store.onChange(onStoreChange),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback((): CanvasElement[] => {\n    const next = type ? viewport.store.getElementsByType(type) : viewport.store.getAll();\n    const cached = cachedRef.current;\n    if (cached.length === next.length && cached.every((el, i) => el === next[i])) {\n      return cached;\n    }\n    cachedRef.current = next;\n    return next;\n  }, [viewport, type]);\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n"],"mappings":"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","names":["import_react","FieldNotesCanvas","import_react","import_react","import_react","import_react","import_react","import_react","next","import_react","import_react"]}

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
-import { ViewportOptions, Tool, Viewport } from '@fieldnotes/core';
+import { ViewportOptions, Tool, Viewport, Layer, CanvasElement as CanvasElement$1, ElementType } from '@fieldnotes/core';
 
 interface FieldNotesCanvasProps {
     options?: ViewportOptions;
@@ -31,7 +31,7 @@ declare function CanvasElement({ position, size, children }: CanvasElementProps)
 
 declare function useViewport(): Viewport;
 
-declare function useActiveTool(): string;
+declare function useActiveTool(): [toolName: string, setTool: (name: string) => void];
 
 interface CameraState {
     x: number;
@@ -40,6 +40,36 @@ interface CameraState {
 }
 declare function useCamera(): CameraState;
 
+declare function useToolOptions<T extends Record<string, unknown>>(toolName: string): [options: T | null, setOptions: (partial: Partial<T>) => void];
+
+interface UseLayersResult {
+    layers: Layer[];
+    activeLayerId: string;
+    createLayer: (name?: string) => Layer;
+    removeLayer: (id: string) => void;
+    renameLayer: (id: string, name: string) => void;
+    reorderLayer: (id: string, newOrder: number) => void;
+    setVisible: (id: string, visible: boolean) => void;
+    setLocked: (id: string, locked: boolean) => void;
+    setOpacity: (id: string, opacity: number) => void;
+    setActiveLayer: (id: string) => void;
+    moveElement: (elementId: string, layerId: string) => void;
+}
+declare function useLayers(): UseLayersResult;
+
+interface UseHistoryResult {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+}
+declare function useHistory(): UseHistoryResult;
+
+declare function useElements(): CanvasElement$1[];
+declare function useElements<T extends ElementType>(type: T): Extract<CanvasElement$1, {
+    type: T;
+}>[];
+
 declare const ViewportContext: react.Context<Viewport | null>;
 
-export { type CameraState, CanvasElement, type CanvasElementProps, FieldNotesCanvas, type FieldNotesCanvasProps, type FieldNotesCanvasRef, ViewportContext, useActiveTool, useCamera, useViewport };
+export { type CameraState, CanvasElement, type CanvasElementProps, FieldNotesCanvas, type FieldNotesCanvasProps, type FieldNotesCanvasRef, type UseHistoryResult, type UseLayersResult, ViewportContext, useActiveTool, useCamera, useElements, useHistory, useLayers, useToolOptions, useViewport };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
-import { ViewportOptions, Tool, Viewport } from '@fieldnotes/core';
+import { ViewportOptions, Tool, Viewport, Layer, CanvasElement as CanvasElement$1, ElementType } from '@fieldnotes/core';
 
 interface FieldNotesCanvasProps {
     options?: ViewportOptions;
@@ -31,7 +31,7 @@ declare function CanvasElement({ position, size, children }: CanvasElementProps)
 
 declare function useViewport(): Viewport;
 
-declare function useActiveTool(): string;
+declare function useActiveTool(): [toolName: string, setTool: (name: string) => void];
 
 interface CameraState {
     x: number;
@@ -40,6 +40,36 @@ interface CameraState {
 }
 declare function useCamera(): CameraState;
 
+declare function useToolOptions<T extends Record<string, unknown>>(toolName: string): [options: T | null, setOptions: (partial: Partial<T>) => void];
+
+interface UseLayersResult {
+    layers: Layer[];
+    activeLayerId: string;
+    createLayer: (name?: string) => Layer;
+    removeLayer: (id: string) => void;
+    renameLayer: (id: string, name: string) => void;
+    reorderLayer: (id: string, newOrder: number) => void;
+    setVisible: (id: string, visible: boolean) => void;
+    setLocked: (id: string, locked: boolean) => void;
+    setOpacity: (id: string, opacity: number) => void;
+    setActiveLayer: (id: string) => void;
+    moveElement: (elementId: string, layerId: string) => void;
+}
+declare function useLayers(): UseLayersResult;
+
+interface UseHistoryResult {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+}
+declare function useHistory(): UseHistoryResult;
+
+declare function useElements(): CanvasElement$1[];
+declare function useElements<T extends ElementType>(type: T): Extract<CanvasElement$1, {
+    type: T;
+}>[];
+
 declare const ViewportContext: react.Context<Viewport | null>;
 
-export { type CameraState, CanvasElement, type CanvasElementProps, FieldNotesCanvas, type FieldNotesCanvasProps, type FieldNotesCanvasRef, ViewportContext, useActiveTool, useCamera, useViewport };
+export { type CameraState, CanvasElement, type CanvasElementProps, FieldNotesCanvas, type FieldNotesCanvasProps, type FieldNotesCanvasRef, type UseHistoryResult, type UseLayersResult, ViewportContext, useActiveTool, useCamera, useElements, useHistory, useLayers, useToolOptions, useViewport };

package/dist/index.js

@@ -46,7 +46,7 @@ var FieldNotesCanvas = forwardRef(
 import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 
-// src/use-viewport.ts
+// src/hooks/use-viewport.ts
 import { useContext } from "react";
 function useViewport() {
   const viewport = useContext(ViewportContext);
@@ -93,7 +93,7 @@ function CanvasElement({ position, size, children }) {
   return createPortal(children, portalTarget);
 }
 
-// src/use-active-tool.ts
+// src/hooks/use-active-tool.ts
 import { useCallback, useSyncExternalStore } from "react";
 function useActiveTool() {
   const viewport = useViewport();
@@ -102,10 +102,15 @@ function useActiveTool() {
     [viewport]
   );
   const getSnapshot = useCallback(() => viewport.toolManager.activeTool?.name ?? "", [viewport]);
-  return useSyncExternalStore(subscribe, getSnapshot);
+  const toolName = useSyncExternalStore(subscribe, getSnapshot);
+  const setTool = useCallback(
+    (name) => viewport.toolManager.setTool(name, viewport.toolContext),
+    [viewport]
+  );
+  return [toolName, setTool];
 }
 
-// src/use-camera.ts
+// src/hooks/use-camera.ts
 import { useCallback as useCallback2, useRef as useRef3, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useCamera() {
   const viewport = useViewport();
@@ -126,12 +131,198 @@ function useCamera() {
   }, [viewport]);
   return useSyncExternalStore2(subscribe, getSnapshot);
 }
+
+// src/hooks/use-tool-options.ts
+import { useCallback as useCallback3, useRef as useRef4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+function noop() {
+}
+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 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(
+    (partial) => {
+      const tool = viewport.toolManager.getTool(toolName);
+      tool?.setOptions?.(partial);
+    },
+    [viewport, 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";
+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(
+    (name) => viewport.layerManager.createLayer(name),
+    [viewport]
+  );
+  const removeLayer = useCallback4(
+    (id) => viewport.layerManager.removeLayer(id),
+    [viewport]
+  );
+  const renameLayer = useCallback4(
+    (id, name) => viewport.layerManager.renameLayer(id, name),
+    [viewport]
+  );
+  const reorderLayer = useCallback4(
+    (id, newOrder) => viewport.layerManager.reorderLayer(id, newOrder),
+    [viewport]
+  );
+  const setVisible = useCallback4(
+    (id, visible) => viewport.layerManager.setLayerVisible(id, visible),
+    [viewport]
+  );
+  const setLocked = useCallback4(
+    (id, locked) => viewport.layerManager.setLayerLocked(id, locked),
+    [viewport]
+  );
+  const setOpacity = useCallback4(
+    (id, opacity) => viewport.layerManager.setLayerOpacity(id, opacity),
+    [viewport]
+  );
+  const setActiveLayer = useCallback4(
+    (id) => viewport.layerManager.setActiveLayer(id),
+    [viewport]
+  );
+  const moveElement = useCallback4(
+    (elementId, layerId) => viewport.layerManager.moveElementToLayer(elementId, layerId),
+    [viewport]
+  );
+  return {
+    layers: snapshot.layers,
+    activeLayerId: snapshot.activeLayerId,
+    createLayer,
+    removeLayer,
+    renameLayer,
+    reorderLayer,
+    setVisible,
+    setLocked,
+    setOpacity,
+    setActiveLayer,
+    moveElement
+  };
+}
+
+// src/hooks/use-history.ts
+import { useCallback as useCallback5, useRef as useRef6, useSyncExternalStore as useSyncExternalStore5 } from "react";
+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]);
+  return {
+    canUndo: snapshot.canUndo,
+    canRedo: snapshot.canRedo,
+    undo,
+    redo
+  };
+}
+
+// src/hooks/use-elements.ts
+import { useCallback as useCallback6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "react";
+function useElements(type) {
+  const viewport = useViewport();
+  const cachedRef = useRef7([]);
+  const subscribe = useCallback6(
+    (onStoreChange) => viewport.store.onChange(onStoreChange),
+    [viewport]
+  );
+  const getSnapshot = useCallback6(() => {
+    const next = type ? viewport.store.getElementsByType(type) : 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, type]);
+  return useSyncExternalStore6(subscribe, getSnapshot);
+}
 export {
   CanvasElement,
   FieldNotesCanvas,
   ViewportContext,
   useActiveTool,
   useCamera,
+  useElements,
+  useHistory,
+  useLayers,
+  useToolOptions,
   useViewport
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/field-notes-canvas.tsx","../src/context.ts","../src/canvas-element.tsx","../src/use-viewport.ts","../src/use-active-tool.ts","../src/use-camera.ts"],"sourcesContent":["import {\r\n  useRef,\r\n  useEffect,\r\n  useState,\r\n  forwardRef,\r\n  useImperativeHandle,\r\n  type ReactNode,\r\n  type CSSProperties,\r\n} from 'react';\r\nimport { Viewport } from '@fieldnotes/core';\r\nimport type { ViewportOptions, Tool } from '@fieldnotes/core';\r\nimport { ViewportContext } from './context';\r\n\r\nexport interface FieldNotesCanvasProps {\r\n  options?: ViewportOptions;\r\n  tools?: Tool[];\r\n  defaultTool?: string;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n  children?: ReactNode;\r\n  onReady?: (viewport: Viewport) => void;\r\n}\r\n\r\nexport interface FieldNotesCanvasRef {\r\n  viewport: Viewport | null;\r\n}\r\n\r\nexport const FieldNotesCanvas = forwardRef<FieldNotesCanvasRef, FieldNotesCanvasProps>(\r\n  function FieldNotesCanvas(\r\n    { options, tools, defaultTool, className, style, children, onReady },\r\n    ref,\r\n  ) {\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const [viewport, setViewport] = useState<Viewport | null>(null);\r\n\r\n    useImperativeHandle(ref, () => ({ viewport }), [viewport]);\r\n\r\n    useEffect(() => {\r\n      const el = containerRef.current;\r\n      if (!el) return;\r\n\r\n      const vp = new Viewport(el, options);\r\n\r\n      if (tools) {\r\n        for (const tool of tools) {\r\n          vp.toolManager.register(tool);\r\n        }\r\n      }\r\n\r\n      if (defaultTool) {\r\n        vp.toolManager.setTool(defaultTool, vp.toolContext);\r\n      }\r\n\r\n      setViewport(vp);\r\n      onReady?.(vp);\r\n\r\n      return () => {\r\n        vp.destroy();\r\n        setViewport(null);\r\n      };\r\n    }, []);\r\n\r\n    return (\r\n      <div ref={containerRef} className={className} style={style}>\r\n        {viewport && (\r\n          <ViewportContext.Provider value={viewport}>{children}</ViewportContext.Provider>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n","import { createContext } from 'react';\r\nimport type { Viewport } from '@fieldnotes/core';\r\n\r\nexport const ViewportContext = createContext<Viewport | null>(null);\r\n","import { useEffect, useRef, useState, type ReactNode } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { useViewport } from './use-viewport';\r\n\r\nexport interface CanvasElementProps {\r\n  position: { x: number; y: number };\r\n  size?: { w: number; h: number };\r\n  children: ReactNode;\r\n}\r\n\r\nexport function CanvasElement({ position, size, children }: CanvasElementProps) {\r\n  const viewport = useViewport();\r\n  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\r\n  const elementIdRef = useRef<string | null>(null);\r\n\r\n  useEffect(() => {\r\n    const container = document.createElement('div');\r\n    Object.assign(container.style, {\r\n      width: '100%',\r\n      height: '100%',\r\n    });\r\n\r\n    // Append to domLayer immediately so portal children are queryable in the document\r\n    // before the viewport render loop fires via requestAnimationFrame.\r\n    viewport.domLayer.appendChild(container);\r\n\r\n    const id = viewport.addHtmlElement(container, position, size);\r\n    elementIdRef.current = id;\r\n    setPortalTarget(container);\r\n\r\n    return () => {\r\n      if (elementIdRef.current) {\r\n        viewport.store.remove(elementIdRef.current);\r\n        viewport.requestRender();\r\n        elementIdRef.current = null;\r\n      }\r\n      setPortalTarget(null);\r\n    };\r\n  }, [viewport]);\r\n\r\n  useEffect(() => {\r\n    const id = elementIdRef.current;\r\n    if (!id) return;\r\n    viewport.store.update(id, { position });\r\n    if (size) {\r\n      viewport.store.update(id, { size });\r\n    }\r\n    viewport.requestRender();\r\n  }, [viewport, position.x, position.y, size?.w, size?.h]);\r\n\r\n  if (!portalTarget) return null;\r\n  return createPortal(children, portalTarget);\r\n}\r\n","import { useContext } from 'react';\r\nimport type { Viewport } from '@fieldnotes/core';\r\nimport { ViewportContext } from './context';\r\n\r\nexport function useViewport(): Viewport {\r\n  const viewport = useContext(ViewportContext);\r\n  if (!viewport) {\r\n    throw new Error('useViewport must be used inside <FieldNotesCanvas>');\r\n  }\r\n  return viewport;\r\n}\r\n","import { useCallback, useSyncExternalStore } from 'react';\r\nimport { useViewport } from './use-viewport';\r\n\r\nexport function useActiveTool(): string {\r\n  const viewport = useViewport();\r\n\r\n  const subscribe = useCallback(\r\n    (onStoreChange: () => void) => viewport.toolManager.onChange(() => onStoreChange()),\r\n    [viewport],\r\n  );\r\n\r\n  const getSnapshot = useCallback(() => viewport.toolManager.activeTool?.name ?? '', [viewport]);\r\n\r\n  return useSyncExternalStore(subscribe, getSnapshot);\r\n}\r\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\r\nimport { useViewport } from './use-viewport';\r\n\r\nexport interface CameraState {\r\n  x: number;\r\n  y: number;\r\n  zoom: number;\r\n}\r\n\r\nexport function useCamera(): CameraState {\r\n  const viewport = useViewport();\r\n  const cachedRef = useRef<CameraState>({ x: 0, y: 0, zoom: 1 });\r\n\r\n  const subscribe = useCallback(\r\n    (onStoreChange: () => void) => viewport.camera.onChange(onStoreChange),\r\n    [viewport],\r\n  );\r\n\r\n  const getSnapshot = useCallback((): CameraState => {\r\n    const { position, zoom } = viewport.camera;\r\n    const cached = cachedRef.current;\r\n    if (cached.x === position.x && cached.y === position.y && cached.zoom === zoom) {\r\n      return cached;\r\n    }\r\n    const next = { x: position.x, y: position.y, zoom };\r\n    cachedRef.current = next;\r\n    return next;\r\n  }, [viewport]);\r\n\r\n  return useSyncExternalStore(subscribe, getSnapshot);\r\n}\r\n"],"mappings":"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","names":["FieldNotesCanvas","useEffect","useRef","useState","useState","useRef","useEffect","useCallback","useRef","useSyncExternalStore","useRef","useCallback","useSyncExternalStore"]}
+{"version":3,"sources":["../src/field-notes-canvas.tsx","../src/context.ts","../src/canvas-element.tsx","../src/hooks/use-viewport.ts","../src/hooks/use-active-tool.ts","../src/hooks/use-camera.ts","../src/hooks/use-tool-options.ts","../src/hooks/use-layers.ts","../src/hooks/use-history.ts","../src/hooks/use-elements.ts"],"sourcesContent":["import {\r\n  useRef,\r\n  useEffect,\r\n  useState,\r\n  forwardRef,\r\n  useImperativeHandle,\r\n  type ReactNode,\r\n  type CSSProperties,\r\n} from 'react';\r\nimport { Viewport } from '@fieldnotes/core';\r\nimport type { ViewportOptions, Tool } from '@fieldnotes/core';\r\nimport { ViewportContext } from './context';\r\n\r\nexport interface FieldNotesCanvasProps {\r\n  options?: ViewportOptions;\r\n  tools?: Tool[];\r\n  defaultTool?: string;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n  children?: ReactNode;\r\n  onReady?: (viewport: Viewport) => void;\r\n}\r\n\r\nexport interface FieldNotesCanvasRef {\r\n  viewport: Viewport | null;\r\n}\r\n\r\nexport const FieldNotesCanvas = forwardRef<FieldNotesCanvasRef, FieldNotesCanvasProps>(\r\n  function FieldNotesCanvas(\r\n    { options, tools, defaultTool, className, style, children, onReady },\r\n    ref,\r\n  ) {\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const [viewport, setViewport] = useState<Viewport | null>(null);\r\n\r\n    useImperativeHandle(ref, () => ({ viewport }), [viewport]);\r\n\r\n    useEffect(() => {\r\n      const el = containerRef.current;\r\n      if (!el) return;\r\n\r\n      const vp = new Viewport(el, options);\r\n\r\n      if (tools) {\r\n        for (const tool of tools) {\r\n          vp.toolManager.register(tool);\r\n        }\r\n      }\r\n\r\n      if (defaultTool) {\r\n        vp.toolManager.setTool(defaultTool, vp.toolContext);\r\n      }\r\n\r\n      setViewport(vp);\r\n      onReady?.(vp);\r\n\r\n      return () => {\r\n        vp.destroy();\r\n        setViewport(null);\r\n      };\r\n    }, []);\r\n\r\n    return (\r\n      <div ref={containerRef} className={className} style={style}>\r\n        {viewport && (\r\n          <ViewportContext.Provider value={viewport}>{children}</ViewportContext.Provider>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n","import { createContext } from 'react';\r\nimport type { Viewport } from '@fieldnotes/core';\r\n\r\nexport const ViewportContext = createContext<Viewport | null>(null);\r\n","import { useEffect, useRef, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useViewport } from './hooks/use-viewport';\n\nexport interface CanvasElementProps {\n  position: { x: number; y: number };\n  size?: { w: number; h: number };\n  children: ReactNode;\n}\n\nexport function CanvasElement({ position, size, children }: CanvasElementProps) {\n  const viewport = useViewport();\n  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n  const elementIdRef = useRef<string | null>(null);\n\n  useEffect(() => {\n    const container = document.createElement('div');\n    Object.assign(container.style, {\n      width: '100%',\n      height: '100%',\n    });\n\n    // Append to domLayer immediately so portal children are queryable in the document\n    // before the viewport render loop fires via requestAnimationFrame.\n    viewport.domLayer.appendChild(container);\n\n    const id = viewport.addHtmlElement(container, position, size);\n    elementIdRef.current = id;\n    setPortalTarget(container);\n\n    return () => {\n      if (elementIdRef.current) {\n        viewport.store.remove(elementIdRef.current);\n        viewport.requestRender();\n        elementIdRef.current = null;\n      }\n      setPortalTarget(null);\n    };\n  }, [viewport]);\n\n  useEffect(() => {\n    const id = elementIdRef.current;\n    if (!id) return;\n    viewport.store.update(id, { position });\n    if (size) {\n      viewport.store.update(id, { size });\n    }\n    viewport.requestRender();\n  }, [viewport, position.x, position.y, size?.w, size?.h]);\n\n  if (!portalTarget) return null;\n  return createPortal(children, portalTarget);\n}\n","import { useContext } from 'react';\nimport type { Viewport } from '@fieldnotes/core';\nimport { ViewportContext } from '../context';\n\nexport function useViewport(): Viewport {\n  const viewport = useContext(ViewportContext);\n  if (!viewport) {\n    throw new Error('useViewport must be used inside <FieldNotesCanvas>');\n  }\n  return viewport;\n}\n","import { useCallback, useSyncExternalStore } from 'react';\nimport { useViewport } from './use-viewport';\n\nexport function useActiveTool(): [toolName: string, setTool: (name: string) => void] {\n  const viewport = useViewport();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.toolManager.onChange(() => onStoreChange()),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback(() => viewport.toolManager.activeTool?.name ?? '', [viewport]);\n\n  const toolName = useSyncExternalStore(subscribe, getSnapshot);\n\n  const setTool = useCallback(\n    (name: string) => viewport.toolManager.setTool(name, viewport.toolContext),\n    [viewport],\n  );\n\n  return [toolName, setTool];\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport { useViewport } from './use-viewport';\n\nexport interface CameraState {\n  x: number;\n  y: number;\n  zoom: number;\n}\n\nexport function useCamera(): CameraState {\n  const viewport = useViewport();\n  const cachedRef = useRef<CameraState>({ x: 0, y: 0, zoom: 1 });\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.camera.onChange(onStoreChange),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback((): CameraState => {\n    const { position, zoom } = viewport.camera;\n    const cached = cachedRef.current;\n    if (cached.x === position.x && cached.y === position.y && cached.zoom === zoom) {\n      return cached;\n    }\n    const next = { x: position.x, y: position.y, zoom };\n    cachedRef.current = next;\n    return next;\n  }, [viewport]);\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport { useViewport } from './use-viewport';\n\nfunction noop() {\n  /* unsubscribe placeholder */\n}\n\nexport function useToolOptions<T extends Record<string, unknown>>(\n  toolName: string,\n): [options: T | null, setOptions: (partial: Partial<T>) => void] {\n  const viewport = useViewport();\n  const cachedRef = useRef<T | null>(null);\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      const tool = viewport.toolManager.getTool(toolName);\n      if (!tool?.onOptionsChange) return noop;\n      return tool.onOptionsChange(onStoreChange);\n    },\n    [viewport, toolName],\n  );\n\n  const getSnapshot = useCallback((): T | null => {\n    const tool = viewport.toolManager.getTool(toolName);\n    if (!tool?.getOptions) return null;\n    const next = tool.getOptions() as T;\n    const cached = cachedRef.current;\n    if (cached && shallowEqual(cached, next)) return cached;\n    cachedRef.current = next;\n    return next;\n  }, [viewport, toolName]);\n\n  const options = useSyncExternalStore(subscribe, getSnapshot);\n\n  const setOptions = useCallback(\n    (partial: Partial<T>) => {\n      const tool = viewport.toolManager.getTool(toolName);\n      tool?.setOptions?.(partial as Record<string, unknown>);\n    },\n    [viewport, toolName],\n  );\n\n  return [options, setOptions];\n}\n\nfunction shallowEqual(a: Record<string, unknown>, b: Record<string, unknown>): boolean {\n  const keysA = Object.keys(a);\n  const keysB = Object.keys(b);\n  if (keysA.length !== keysB.length) return false;\n  for (const key of keysA) {\n    const valA = a[key];\n    const valB = b[key];\n    if (valA === valB) continue;\n    if (\n      typeof valA === 'object' &&\n      valA !== null &&\n      typeof valB === 'object' &&\n      valB !== null &&\n      !Array.isArray(valA) &&\n      !Array.isArray(valB)\n    ) {\n      const objA = valA as Record<string, unknown>;\n      const objB = valB as Record<string, unknown>;\n      const innerKeys = Object.keys(objA);\n      if (\n        innerKeys.length === Object.keys(objB).length &&\n        innerKeys.every((k) => objA[k] === objB[k])\n      ) {\n        continue;\n      }\n    }\n    return false;\n  }\n  return true;\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport type { Layer } from '@fieldnotes/core';\nimport { useViewport } from './use-viewport';\n\ninterface LayersSnapshot {\n  layers: Layer[];\n  activeLayerId: string;\n}\n\nexport interface UseLayersResult {\n  layers: Layer[];\n  activeLayerId: string;\n  createLayer: (name?: string) => Layer;\n  removeLayer: (id: string) => void;\n  renameLayer: (id: string, name: string) => void;\n  reorderLayer: (id: string, newOrder: number) => void;\n  setVisible: (id: string, visible: boolean) => void;\n  setLocked: (id: string, locked: boolean) => void;\n  setOpacity: (id: string, opacity: number) => void;\n  setActiveLayer: (id: string) => void;\n  moveElement: (elementId: string, layerId: string) => void;\n}\n\nexport function useLayers(): UseLayersResult {\n  const viewport = useViewport();\n  const cachedRef = useRef<LayersSnapshot>({ layers: [], activeLayerId: '' });\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.layerManager.on('change', onStoreChange),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback((): LayersSnapshot => {\n    const layers = viewport.layerManager.getLayers();\n    const activeLayerId = viewport.layerManager.activeLayerId;\n    const cached = cachedRef.current;\n    if (\n      cached.activeLayerId === activeLayerId &&\n      cached.layers.length === layers.length &&\n      cached.layers.every((l, i) => {\n        const next = layers[i];\n        return (\n          next !== undefined &&\n          l.id === next.id &&\n          l.name === next.name &&\n          l.visible === next.visible &&\n          l.locked === next.locked &&\n          l.order === next.order &&\n          l.opacity === next.opacity\n        );\n      })\n    ) {\n      return cached;\n    }\n    const next = { layers, activeLayerId };\n    cachedRef.current = next;\n    return next;\n  }, [viewport]);\n\n  const snapshot = useSyncExternalStore(subscribe, getSnapshot);\n\n  const createLayer = useCallback(\n    (name?: string) => viewport.layerManager.createLayer(name),\n    [viewport],\n  );\n\n  const removeLayer = useCallback(\n    (id: string) => viewport.layerManager.removeLayer(id),\n    [viewport],\n  );\n\n  const renameLayer = useCallback(\n    (id: string, name: string) => viewport.layerManager.renameLayer(id, name),\n    [viewport],\n  );\n\n  const reorderLayer = useCallback(\n    (id: string, newOrder: number) => viewport.layerManager.reorderLayer(id, newOrder),\n    [viewport],\n  );\n\n  const setVisible = useCallback(\n    (id: string, visible: boolean) => viewport.layerManager.setLayerVisible(id, visible),\n    [viewport],\n  );\n\n  const setLocked = useCallback(\n    (id: string, locked: boolean) => viewport.layerManager.setLayerLocked(id, locked),\n    [viewport],\n  );\n\n  const setOpacity = useCallback(\n    (id: string, opacity: number) => viewport.layerManager.setLayerOpacity(id, opacity),\n    [viewport],\n  );\n\n  const setActiveLayer = useCallback(\n    (id: string) => viewport.layerManager.setActiveLayer(id),\n    [viewport],\n  );\n\n  const moveElement = useCallback(\n    (elementId: string, layerId: string) =>\n      viewport.layerManager.moveElementToLayer(elementId, layerId),\n    [viewport],\n  );\n\n  return {\n    layers: snapshot.layers,\n    activeLayerId: snapshot.activeLayerId,\n    createLayer,\n    removeLayer,\n    renameLayer,\n    reorderLayer,\n    setVisible,\n    setLocked,\n    setOpacity,\n    setActiveLayer,\n    moveElement,\n  };\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport { useViewport } from './use-viewport';\n\ninterface HistorySnapshot {\n  canUndo: boolean;\n  canRedo: boolean;\n}\n\nexport interface UseHistoryResult {\n  canUndo: boolean;\n  canRedo: boolean;\n  undo: () => void;\n  redo: () => void;\n}\n\nexport function useHistory(): UseHistoryResult {\n  const viewport = useViewport();\n  const cachedRef = useRef<HistorySnapshot>({ canUndo: false, canRedo: false });\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.history.onChange(onStoreChange),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback((): HistorySnapshot => {\n    const canUndo = viewport.history.canUndo;\n    const canRedo = viewport.history.canRedo;\n    const cached = cachedRef.current;\n    if (cached.canUndo === canUndo && cached.canRedo === canRedo) {\n      return cached;\n    }\n    const next = { canUndo, canRedo };\n    cachedRef.current = next;\n    return next;\n  }, [viewport]);\n\n  const snapshot = useSyncExternalStore(subscribe, getSnapshot);\n\n  const undo = useCallback(() => viewport.undo(), [viewport]);\n  const redo = useCallback(() => viewport.redo(), [viewport]);\n\n  return {\n    canUndo: snapshot.canUndo,\n    canRedo: snapshot.canRedo,\n    undo,\n    redo,\n  };\n}\n","import { useCallback, useRef, useSyncExternalStore } from 'react';\nimport type { CanvasElement, ElementType } from '@fieldnotes/core';\nimport { useViewport } from './use-viewport';\n\nexport function useElements(): CanvasElement[];\nexport function useElements<T extends ElementType>(type: T): Extract<CanvasElement, { type: T }>[];\nexport function useElements(type?: ElementType): CanvasElement[] {\n  const viewport = useViewport();\n  const cachedRef = useRef<CanvasElement[]>([]);\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => viewport.store.onChange(onStoreChange),\n    [viewport],\n  );\n\n  const getSnapshot = useCallback((): CanvasElement[] => {\n    const next = type ? viewport.store.getElementsByType(type) : viewport.store.getAll();\n    const cached = cachedRef.current;\n    if (cached.length === next.length && cached.every((el, i) => el === next[i])) {\n      return cached;\n    }\n    cachedRef.current = next;\n    return next;\n  }, [viewport, type]);\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n}\n"],"mappings":"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","names":["FieldNotesCanvas","useEffect","useRef","useState","useState","useRef","useEffect","useCallback","useRef","useSyncExternalStore","useRef","useCallback","useSyncExternalStore","useCallback","useRef","useSyncExternalStore","useRef","useCallback","useSyncExternalStore","useCallback","useRef","useSyncExternalStore","useRef","useCallback","next","useSyncExternalStore","useCallback","useRef","useSyncExternalStore","useRef","useCallback","useSyncExternalStore","useCallback","useRef","useSyncExternalStore","useRef","useCallback","useSyncExternalStore"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/react",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "React wrapper for Field Notes canvas SDK",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -33,10 +33,8 @@
     "html-embedding",
     "fieldnotes"
   ],
-  "dependencies": {
-    "@fieldnotes/core": "0.2.3"
-  },
   "peerDependencies": {
+    "@fieldnotes/core": ">=0.2.0",
     "react": ">=18",
     "react-dom": ">=18"
   },
@@ -49,7 +47,8 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tsup": "^8.5.1",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.0",
+    "@fieldnotes/core": "0.8.4"
   },
   "scripts": {
     "build": "tsup",