@bwp-web/canvas 0.8.2 → 0.9.0

package/dist/index.cjs

@@ -79,11 +79,16 @@ __export(index_exports, {
   snapCursorPoint: () => snapCursorPoint,
   useCanvasClick: () => useCanvasClick,
   useCanvasEvents: () => useCanvasEvents,
+  useCanvasRef: () => useCanvasRef,
   useCanvasTooltip: () => useCanvasTooltip,
   useEditCanvas: () => useEditCanvas,
   useEditCanvasContext: () => useEditCanvasContext,
+  useEditCanvasState: () => useEditCanvasState,
+  useEditCanvasViewport: () => useEditCanvasViewport,
   useViewCanvas: () => useViewCanvas,
   useViewCanvasContext: () => useViewCanvasContext,
+  useViewCanvasState: () => useViewCanvasState,
+  useViewCanvasViewport: () => useViewCanvasViewport,
   util: () => import_fabric19.util
 });
 module.exports = __toCommonJS(index_exports);
@@ -2528,6 +2533,7 @@ function useEditCanvas(options) {
   const vertexEditCleanupRef = (0, import_react3.useRef)(null);
   const keyboardCleanupRef = (0, import_react3.useRef)(null);
   const historyRef = (0, import_react3.useRef)(null);
+  const isInitialLoadRef = (0, import_react3.useRef)(false);
   const optionsRef = (0, import_react3.useRef)(options);
   optionsRef.current = options;
   const savedSelectabilityRef = (0, import_react3.useRef)(
@@ -2540,6 +2546,11 @@ function useEditCanvas(options) {
   const [isDirty, setIsDirty] = (0, import_react3.useState)(false);
   const [canUndo, setCanUndo] = (0, import_react3.useState)(false);
   const [canRedo, setCanRedo] = (0, import_react3.useState)(false);
+  const [objects, setObjects] = (0, import_react3.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
+  const [lockLightMode, setLockLightModeState] = (0, import_react3.useState)(
+    void 0
+  );
   const setMode = (0, import_react3.useCallback)((setup) => {
     vertexEditCleanupRef.current?.();
     vertexEditCleanupRef.current = null;
@@ -2624,11 +2635,14 @@ function useEditCanvas(options) {
         canvas.on("selection:created", (e) => setSelected(e.selected ?? []));
         canvas.on("selection:updated", (e) => setSelected(e.selected ?? []));
         canvas.on("selection:cleared", () => setSelected([]));
-        if (opts?.trackChanges) {
-          canvas.on("object:added", () => setIsDirty(true));
-          canvas.on("object:removed", () => setIsDirty(true));
-          canvas.on("object:modified", () => setIsDirty(true));
-          canvas.on("background:modified", () => setIsDirty(true));
+        if (opts?.trackChanges !== false) {
+          const markDirtyIfNotLoading = () => {
+            if (!isInitialLoadRef.current) setIsDirty(true);
+          };
+          canvas.on("object:added", markDirtyIfNotLoading);
+          canvas.on("object:removed", markDirtyIfNotLoading);
+          canvas.on("object:modified", markDirtyIfNotLoading);
+          canvas.on("background:modified", markDirtyIfNotLoading);
         }
         if (opts?.history) {
           const syncHistoryState = () => {
@@ -2666,8 +2680,31 @@ function useEditCanvas(options) {
         }
       }
       function invokeOnReady() {
-        const onReadyResult = opts?.onReady?.(canvas);
-        Promise.resolve(onReadyResult).then(() => {
+        const initPromise = (async () => {
+          if (opts?.canvasData) {
+            setIsLoading(true);
+            isInitialLoadRef.current = true;
+            try {
+              const loaded = await loadCanvas(canvas, opts.canvasData, {
+                filter: opts.filter,
+                borderRadius: opts.borderRadius
+              });
+              setObjects(loaded);
+            } finally {
+              isInitialLoadRef.current = false;
+              setIsLoading(false);
+            }
+          }
+        })();
+        initPromise.then(async () => {
+          const onReadyResult = opts?.onReady?.(canvas);
+          await Promise.resolve(onReadyResult);
+          if (opts?.invertBackground !== void 0) {
+            setBackgroundInverted(canvas, opts.invertBackground);
+          }
+          if (canvas.lockLightMode !== void 0) {
+            setLockLightModeState(canvas.lockLightMode);
+          }
           if (opts?.autoFitToBackground !== false && canvas.backgroundImage) {
             fitViewportToBackground(canvas);
             syncZoom(canvasRef, setZoom);
@@ -2697,37 +2734,25 @@ function useEditCanvas(options) {
       alignmentCleanupRef.current = null;
     }
   }, [options?.enableAlignment]);
+  (0, import_react3.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || options?.invertBackground === void 0) return;
+    setBackgroundInverted(canvas, options.invertBackground);
+  }, [options?.invertBackground]);
+  const setLockLightMode = (0, import_react3.useCallback)((value) => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      canvas.lockLightMode = value;
+    }
+    setLockLightModeState(value);
+  }, []);
   const setViewportMode = (0, import_react3.useCallback)((mode) => {
     viewportRef.current?.setMode(mode);
     setViewportModeState(mode);
   }, []);
   const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit } = useViewportActions(canvasRef, viewportRef, setZoom);
-  const setBackground = (0, import_react3.useCallback)(
-    async (url, bgOpts) => {
-      const canvas = canvasRef.current;
-      if (!canvas) throw new Error("Canvas not ready");
-      const opts = optionsRef.current;
-      const resizeOpts = opts?.backgroundResize !== false ? typeof opts?.backgroundResize === "object" ? { ...opts.backgroundResize, ...bgOpts } : { ...bgOpts } : bgOpts?.preserveContrast ? { preserveContrast: true } : void 0;
-      const img = await setBackgroundImage(canvas, url, resizeOpts);
-      if (opts?.autoFitToBackground !== false) {
-        fitViewportToBackground(canvas);
-        syncZoom(canvasRef, setZoom);
-      }
-      return img;
-    },
-    []
-  );
-  return {
-    /** Pass this to `<Canvas onReady={...} />` */
-    onReady,
-    /** Ref to the underlying Fabric canvas instance. */
-    canvasRef,
-    /** Current zoom level (reactive). */
-    zoom,
-    /** Currently selected objects (reactive). */
-    selected,
-    /** Viewport controls. */
-    viewport: {
+  const viewport = (0, import_react3.useMemo)(
+    () => ({
       /** Current viewport mode (reactive). */
       mode: viewportMode,
       /** Switch between 'select' and 'pan' viewport modes. */
@@ -2742,61 +2767,125 @@ function useEditCanvas(options) {
       panToObject,
       /** Zoom and pan to fit a specific object in the viewport. */
       zoomToFit
+    }),
+    [
+      viewportMode,
+      setViewportMode,
+      resetViewport2,
+      zoomIn,
+      zoomOut,
+      panToObject,
+      zoomToFit
+    ]
+  );
+  const resetDirty = (0, import_react3.useCallback)(() => setIsDirty(false), []);
+  const markDirty = (0, import_react3.useCallback)(() => setIsDirty(true), []);
+  const undo = (0, import_react3.useCallback)(async () => {
+    const h = historyRef.current;
+    if (!h) return;
+    await h.undo();
+    setCanUndo(h.canUndo());
+    setCanRedo(h.canRedo());
+  }, []);
+  const redo = (0, import_react3.useCallback)(async () => {
+    const h = historyRef.current;
+    if (!h) return;
+    await h.redo();
+    setCanUndo(h.canUndo());
+    setCanRedo(h.canRedo());
+  }, []);
+  const setBackground = (0, import_react3.useCallback)(
+    async (url, bgOpts) => {
+      const canvas = canvasRef.current;
+      if (!canvas) throw new Error("Canvas not ready");
+      const opts = optionsRef.current;
+      const resizeOpts = opts?.backgroundResize !== false ? typeof opts?.backgroundResize === "object" ? { ...opts.backgroundResize, ...bgOpts } : { ...bgOpts } : bgOpts?.preserveContrast ? { preserveContrast: true } : void 0;
+      const img = await setBackgroundImage(canvas, url, resizeOpts);
+      if (opts?.autoFitToBackground !== false) {
+        fitViewportToBackground(canvas);
+        syncZoom(canvasRef, setZoom);
+      }
+      return img;
     },
-    /** Whether vertex edit mode is currently active (reactive). */
-    isEditingVertices,
-    /**
-     * Activate an interaction mode or return to select mode.
-     *
-     * Pass a setup function to activate a creation mode:
-     * ```ts
-     * canvas.setMode((c, viewport) =>
-     *   enableClickToCreate(c, factory, { viewport })
-     * );
-     * ```
-     *
-     * Pass `null` to deactivate and return to select mode:
-     * ```ts
-     * canvas.setMode(null);
-     * ```
-     */
-    setMode,
-    /**
-     * Set a background image from a URL. Automatically resizes if the image
-     * exceeds the configured limits (opt out via `backgroundResize: false`),
-     * and fits the viewport after setting if `autoFitToBackground` is enabled.
-     *
-     * Pass `{ preserveContrast: true }` to keep the current background contrast
-     * when replacing the image.
-     */
-    setBackground,
-    /** Whether the canvas has been modified since the last `resetDirty()` call. Requires `trackChanges: true`. */
-    isDirty,
-    /** Reset the dirty flag (e.g., after a successful save). */
-    resetDirty: (0, import_react3.useCallback)(() => setIsDirty(false), []),
-    /** Manually mark the canvas as dirty (e.g., after a custom operation not tracked automatically). */
-    markDirty: (0, import_react3.useCallback)(() => setIsDirty(true), []),
-    /** Undo the last change. Requires `history: true`. */
-    undo: (0, import_react3.useCallback)(async () => {
-      const h = historyRef.current;
-      if (!h) return;
-      await h.undo();
-      setCanUndo(h.canUndo());
-      setCanRedo(h.canRedo());
-    }, []),
-    /** Redo a previously undone change. Requires `history: true`. */
-    redo: (0, import_react3.useCallback)(async () => {
-      const h = historyRef.current;
-      if (!h) return;
-      await h.redo();
-      setCanUndo(h.canUndo());
-      setCanRedo(h.canRedo());
-    }, []),
-    /** Whether an undo operation is available (reactive). Requires `history: true`. */
-    canUndo,
-    /** Whether a redo operation is available (reactive). Requires `history: true`. */
-    canRedo
-  };
+    []
+  );
+  return (0, import_react3.useMemo)(
+    () => ({
+      /** Pass this to `<Canvas onReady={...} />` */
+      onReady,
+      /** Ref to the underlying Fabric canvas instance. */
+      canvasRef,
+      /** Current zoom level (reactive). */
+      zoom,
+      /** Loaded objects (reactive). Populated when `canvasData` is provided. */
+      objects,
+      /** Whether canvas data is currently being loaded. */
+      isLoading,
+      /** Currently selected objects (reactive). */
+      selected,
+      /** Viewport controls. */
+      viewport,
+      /** Whether vertex edit mode is currently active (reactive). */
+      isEditingVertices,
+      /**
+       * Activate an interaction mode or return to select mode.
+       *
+       * Pass a setup function to activate a creation mode:
+       * ```ts
+       * canvas.setMode((c, viewport) =>
+       *   enableClickToCreate(c, factory, { viewport })
+       * );
+       * ```
+       *
+       * Pass `null` to deactivate and return to select mode:
+       * ```ts
+       * canvas.setMode(null);
+       * ```
+       */
+      setMode,
+      /**
+       * Set a background image from a URL. Automatically resizes if the image
+       * exceeds the configured limits (opt out via `backgroundResize: false`),
+       * and fits the viewport after setting if `autoFitToBackground` is enabled.
+       *
+       * Pass `{ preserveContrast: true }` to keep the current background contrast
+       * when replacing the image.
+       */
+      setBackground,
+      /** Whether the canvas has been modified since the last `resetDirty()` call. Enabled by default (disable via `trackChanges: false`). */
+      isDirty,
+      /** Reset the dirty flag (e.g., after a successful save). */
+      resetDirty,
+      /** Manually mark the canvas as dirty (e.g., after a custom operation not tracked automatically). */
+      markDirty,
+      /** Undo the last change. Requires `history: true`. */
+      undo,
+      /** Redo a previously undone change. Requires `history: true`. */
+      redo,
+      /** Whether an undo operation is available (reactive). Requires `history: true`. */
+      canUndo,
+      /** Whether a redo operation is available (reactive). Requires `history: true`. */
+      canRedo,
+      /** Whether the canvas is locked to light mode. Read from loaded canvas data. */
+      lockLightMode,
+      /** Update lockLightMode on both the canvas instance and React state. */
+      setLockLightMode
+    }),
+    // Only reactive state in deps — refs and stable callbacks are omitted
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      zoom,
+      objects,
+      isLoading,
+      selected,
+      viewport,
+      isEditingVertices,
+      isDirty,
+      canUndo,
+      canRedo,
+      lockLightMode
+    ]
+  );
 }
 
 // src/hooks/useViewCanvas.ts
@@ -2813,6 +2902,8 @@ function useViewCanvas(options) {
   const optionsRef = (0, import_react4.useRef)(options);
   optionsRef.current = options;
   const [zoom, setZoom] = (0, import_react4.useState)(1);
+  const [objects, setObjects] = (0, import_react4.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
   const onReady = (0, import_react4.useCallback)(
     (canvas) => {
       canvasRef.current = canvas;
@@ -2839,20 +2930,57 @@ function useViewCanvas(options) {
       canvas.on("mouse:wheel", () => {
         setZoom(canvas.getZoom());
       });
-      const onReadyResult = opts?.onReady?.(canvas);
-      if (opts?.autoFitToBackground !== false) {
-        Promise.resolve(onReadyResult).then(() => {
-          if (canvas.backgroundImage) {
-            fitViewportToBackground(canvas);
-            syncZoom(canvasRef, setZoom);
+      const initPromise = (async () => {
+        if (opts?.canvasData) {
+          setIsLoading(true);
+          try {
+            const loaded = await loadCanvas(canvas, opts.canvasData, {
+              filter: opts.filter,
+              borderRadius: opts.borderRadius
+            });
+            lockCanvas(canvas);
+            setObjects(loaded);
+          } finally {
+            setIsLoading(false);
           }
-        });
-      }
+        }
+      })();
+      initPromise.then(async () => {
+        const onReadyResult = opts?.onReady?.(canvas);
+        await Promise.resolve(onReadyResult);
+        if (opts?.invertBackground !== void 0) {
+          setBackgroundInverted(canvas, opts.invertBackground);
+        }
+        if (opts?.autoFitToBackground !== false && canvas.backgroundImage) {
+          fitViewportToBackground(canvas);
+          syncZoom(canvasRef, setZoom);
+        }
+      });
     },
     // onReady and panAndZoom are intentionally excluded — we only initialize once
     []
   );
+  (0, import_react4.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || options?.invertBackground === void 0) return;
+    setBackgroundInverted(canvas, options.invertBackground);
+  }, [options?.invertBackground]);
   const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit } = useViewportActions(canvasRef, viewportRef, setZoom);
+  const viewport = (0, import_react4.useMemo)(
+    () => ({
+      /** Reset viewport to default (no pan, zoom = 1), or fit to background if one is set. */
+      reset: resetViewport2,
+      /** Zoom in toward the canvas center. Default step: 0.2. */
+      zoomIn,
+      /** Zoom out from the canvas center. Default step: 0.2. */
+      zoomOut,
+      /** Pan the viewport to center on a specific object. */
+      panToObject,
+      /** Zoom and pan to fit a specific object in the viewport. */
+      zoomToFit
+    }),
+    [resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit]
+  );
   const findObject = (id) => {
     const c = canvasRef.current;
     if (!c) return void 0;
@@ -2868,9 +2996,9 @@ function useViewCanvas(options) {
     (styles) => {
       const c = canvasRef.current;
       if (!c) return;
-      const objects = c.getObjects();
+      const objects2 = c.getObjects();
       const idMap = /* @__PURE__ */ new Map();
-      for (const obj of objects) {
+      for (const obj of objects2) {
         if (obj.data?.id) idMap.set(obj.data.id, obj);
       }
       let updated = false;
@@ -2900,42 +3028,58 @@ function useViewCanvas(options) {
     },
     []
   );
-  return {
-    /** Pass this to `<Canvas onReady={...} />` */
-    onReady,
-    /** Ref to the underlying Fabric canvas instance. */
-    canvasRef,
-    /** Current zoom level (reactive). */
-    zoom,
-    /** Viewport controls. */
-    viewport: {
-      /** Reset viewport to default (no pan, zoom = 1), or fit to background if one is set. */
-      reset: resetViewport2,
-      /** Zoom in toward the canvas center. Default step: 0.2. */
-      zoomIn,
-      /** Zoom out from the canvas center. Default step: 0.2. */
-      zoomOut,
-      /** Pan the viewport to center on a specific object. */
-      panToObject,
-      /** Zoom and pan to fit a specific object in the viewport. */
-      zoomToFit
-    },
-    /** Update a single object's visual style by its `data.id`. */
-    setObjectStyle,
-    /** Batch-update multiple objects' visual styles in one render. Keyed by `data.id`. */
-    setObjectStyles,
-    /** Apply a visual style to all objects whose `data.type` matches. */
-    setObjectStyleByType
-  };
+  return (0, import_react4.useMemo)(
+    () => ({
+      /** Pass this to `<Canvas onReady={...} />` */
+      onReady,
+      /** Ref to the underlying Fabric canvas instance. */
+      canvasRef,
+      /** Current zoom level (reactive). */
+      zoom,
+      /** Loaded objects (reactive). Populated when `canvasData` is provided. */
+      objects,
+      /** Whether canvas data is currently being loaded. */
+      isLoading,
+      /** Viewport controls. */
+      viewport,
+      /** Update a single object's visual style by its `data.id`. */
+      setObjectStyle,
+      /** Batch-update multiple objects' visual styles in one render. Keyed by `data.id`. */
+      setObjectStyles,
+      /** Apply a visual style to all objects whose `data.type` matches. */
+      setObjectStyleByType
+    }),
+    // Only reactive state in deps — refs and stable callbacks are omitted
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [zoom, objects, isLoading, viewport]
+  );
 }
 
 // src/hooks/useCanvasEvents.ts
+var import_react6 = require("react");
+
+// src/context/CanvasRefContext.ts
 var import_react5 = require("react");
-function useCanvasEvents(canvasRef, events) {
-  const eventsRef = (0, import_react5.useRef)(events);
+var CanvasRefContext = (0, import_react5.createContext)(null);
+function useCanvasRefContext() {
+  return (0, import_react5.useContext)(CanvasRefContext);
+}
+
+// src/context/useCanvasRef.ts
+function useCanvasRef() {
+  return useCanvasRefContext();
+}
+
+// src/hooks/useCanvasEvents.ts
+function useCanvasEvents(canvasRefOrEvents, maybeEvents) {
+  const isContextOverload = maybeEvents === void 0;
+  const contextCanvasRef = useCanvasRef();
+  const resolvedCanvasRef = isContextOverload ? contextCanvasRef : canvasRefOrEvents;
+  const events = isContextOverload ? canvasRefOrEvents : maybeEvents;
+  const eventsRef = (0, import_react6.useRef)(events);
   eventsRef.current = events;
-  (0, import_react5.useEffect)(() => {
-    const canvas = canvasRef.current;
+  (0, import_react6.useEffect)(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     const wrappers = /* @__PURE__ */ new Map();
     for (const key of Object.keys(eventsRef.current)) {
@@ -2951,22 +3095,26 @@ function useCanvasEvents(canvasRef, events) {
         canvas.off(name, handler);
       });
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
 }
 
 // src/hooks/useCanvasTooltip.ts
-var import_react6 = require("react");
-function useCanvasTooltip(canvasRef, options) {
-  const [state, setState] = (0, import_react6.useState)({
+var import_react7 = require("react");
+function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
+  const isContextOverload = maybeOptions === void 0;
+  const contextCanvasRef = useCanvasRef();
+  const resolvedCanvasRef = isContextOverload ? contextCanvasRef : canvasRefOrOptions;
+  const options = isContextOverload ? canvasRefOrOptions : maybeOptions;
+  const [state, setState] = (0, import_react7.useState)({
     visible: false,
     content: null,
     position: { x: 0, y: 0 }
   });
-  const hoveredObjectRef = (0, import_react6.useRef)(null);
-  const optionsRef = (0, import_react6.useRef)(options);
+  const hoveredObjectRef = (0, import_react7.useRef)(null);
+  const optionsRef = (0, import_react7.useRef)(options);
   optionsRef.current = options;
-  (0, import_react6.useEffect)(() => {
-    const canvas = canvasRef.current;
+  (0, import_react7.useEffect)(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     function calculatePosition(target) {
       const bounds = target.getBoundingRect();
@@ -3014,19 +3162,24 @@ function useCanvasTooltip(canvasRef, options) {
       canvas.off("after:render", updatePosition);
       canvas.off("mouse:wheel", updatePosition);
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
   return state;
 }
 
 // src/hooks/useCanvasClick.ts
-var import_react7 = require("react");
-function useCanvasClick(canvasRef, onClick, options) {
-  const onClickRef = (0, import_react7.useRef)(onClick);
+var import_react8 = require("react");
+function useCanvasClick(canvasRefOrOnClick, onClickOrOptions, maybeOptions) {
+  const isContextOverload = typeof canvasRefOrOnClick === "function";
+  const contextCanvasRef = useCanvasRef();
+  const resolvedCanvasRef = isContextOverload ? contextCanvasRef : canvasRefOrOnClick;
+  const onClick = isContextOverload ? canvasRefOrOnClick : onClickOrOptions;
+  const options = isContextOverload ? onClickOrOptions : maybeOptions;
+  const onClickRef = (0, import_react8.useRef)(onClick);
   onClickRef.current = onClick;
-  const optionsRef = (0, import_react7.useRef)(options);
+  const optionsRef = (0, import_react8.useRef)(options);
   optionsRef.current = options;
-  (0, import_react7.useEffect)(() => {
-    const canvas = canvasRef.current;
+  (0, import_react8.useEffect)(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     let mouseDown = null;
     let isPanning = false;
@@ -3066,66 +3219,169 @@ function useCanvasClick(canvasRef, onClick, options) {
       canvas.off("mouse:move", handleMouseMove);
       canvas.off("mouse:up", handleMouseUp);
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
 }
 
 // src/context/EditCanvasContext.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var EditCanvasContext = (0, import_react8.createContext)(null);
+var EditViewportContext = (0, import_react9.createContext)(null);
+var EditStateContext = (0, import_react9.createContext)(null);
 function EditCanvasProvider({
   options,
   children
 }) {
   const canvas = useEditCanvas(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditCanvasContext.Provider, { value: canvas, children });
+  const viewportValue = (0, import_react9.useMemo)(
+    () => ({ zoom: canvas.zoom, viewport: canvas.viewport }),
+    [canvas.zoom, canvas.viewport]
+  );
+  const stateValue = (0, import_react9.useMemo)(
+    () => ({
+      onReady: canvas.onReady,
+      objects: canvas.objects,
+      isLoading: canvas.isLoading,
+      selected: canvas.selected,
+      isEditingVertices: canvas.isEditingVertices,
+      setMode: canvas.setMode,
+      setBackground: canvas.setBackground,
+      isDirty: canvas.isDirty,
+      resetDirty: canvas.resetDirty,
+      markDirty: canvas.markDirty,
+      undo: canvas.undo,
+      redo: canvas.redo,
+      canUndo: canvas.canUndo,
+      canRedo: canvas.canRedo,
+      lockLightMode: canvas.lockLightMode,
+      setLockLightMode: canvas.setLockLightMode
+    }),
+    // Only reactive state — stable callbacks omitted
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      canvas.objects,
+      canvas.isLoading,
+      canvas.selected,
+      canvas.isEditingVertices,
+      canvas.isDirty,
+      canvas.canUndo,
+      canvas.canRedo,
+      canvas.lockLightMode
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CanvasRefContext.Provider, { value: canvas.canvasRef, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditViewportContext.Provider, { value: viewportValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditStateContext.Provider, { value: stateValue, children }) }) });
 }
 function useEditCanvasContext() {
-  const ctx = (0, import_react8.useContext)(EditCanvasContext);
-  if (ctx === null) {
+  const canvasRef = (0, import_react9.useContext)(CanvasRefContext);
+  const viewport = (0, import_react9.useContext)(EditViewportContext);
+  const state = (0, import_react9.useContext)(EditStateContext);
+  if (canvasRef === null || viewport === null || state === null) {
     throw new Error(
       "useEditCanvasContext must be used within an <EditCanvasProvider>"
     );
   }
+  return (0, import_react9.useMemo)(
+    () => ({ canvasRef, ...viewport, ...state }),
+    [canvasRef, viewport, state]
+  );
+}
+function useEditCanvasViewport() {
+  const ctx = (0, import_react9.useContext)(EditViewportContext);
+  if (ctx === null) {
+    throw new Error(
+      "useEditCanvasViewport must be used within an <EditCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+function useEditCanvasState() {
+  const ctx = (0, import_react9.useContext)(EditStateContext);
+  if (ctx === null) {
+    throw new Error(
+      "useEditCanvasState must be used within an <EditCanvasProvider>"
+    );
+  }
   return ctx;
 }
 
 // src/context/ViewCanvasContext.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var ViewCanvasContext = (0, import_react9.createContext)(null);
+var ViewViewportContext = (0, import_react10.createContext)(null);
+var ViewStateContext = (0, import_react10.createContext)(null);
 function ViewCanvasProvider({
   options,
   children
 }) {
   const canvas = useViewCanvas(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewCanvasContext.Provider, { value: canvas, children });
+  const viewportValue = (0, import_react10.useMemo)(
+    () => ({ zoom: canvas.zoom, viewport: canvas.viewport }),
+    [canvas.zoom, canvas.viewport]
+  );
+  const stateValue = (0, import_react10.useMemo)(
+    () => ({
+      onReady: canvas.onReady,
+      objects: canvas.objects,
+      isLoading: canvas.isLoading,
+      setObjectStyle: canvas.setObjectStyle,
+      setObjectStyles: canvas.setObjectStyles,
+      setObjectStyleByType: canvas.setObjectStyleByType
+    }),
+    // Only reactive state — stable callbacks omitted
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [canvas.objects, canvas.isLoading]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CanvasRefContext.Provider, { value: canvas.canvasRef, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewViewportContext.Provider, { value: viewportValue, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewStateContext.Provider, { value: stateValue, children }) }) });
 }
 function useViewCanvasContext() {
-  const ctx = (0, import_react9.useContext)(ViewCanvasContext);
-  if (ctx === null) {
+  const canvasRef = (0, import_react10.useContext)(CanvasRefContext);
+  const viewport = (0, import_react10.useContext)(ViewViewportContext);
+  const state = (0, import_react10.useContext)(ViewStateContext);
+  if (canvasRef === null || viewport === null || state === null) {
     throw new Error(
       "useViewCanvasContext must be used within a <ViewCanvasProvider>"
     );
   }
+  return (0, import_react10.useMemo)(
+    () => ({ canvasRef, ...viewport, ...state }),
+    [canvasRef, viewport, state]
+  );
+}
+function useViewCanvasViewport() {
+  const ctx = (0, import_react10.useContext)(ViewViewportContext);
+  if (ctx === null) {
+    throw new Error(
+      "useViewCanvasViewport must be used within a <ViewCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+function useViewCanvasState() {
+  const ctx = (0, import_react10.useContext)(ViewStateContext);
+  if (ctx === null) {
+    throw new Error(
+      "useViewCanvasState must be used within a <ViewCanvasProvider>"
+    );
+  }
   return ctx;
 }
 
 // src/overlay/ObjectOverlay.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_material = require("@mui/material");
 var import_fabric18 = require("fabric");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function ObjectOverlay({
-  canvasRef,
+  canvasRef: canvasRefProp,
   object,
   sx,
   children,
   ...rest
 }) {
-  const stackRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
-    const canvas = canvasRef.current;
+  const contextCanvasRef = useCanvasRef();
+  const canvasRef = canvasRefProp ?? contextCanvasRef;
+  const stackRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
+    const canvas = canvasRef?.current;
     if (!canvas || !object) return;
     function update() {
       const el = stackRef.current;
@@ -3179,7 +3435,7 @@ function ObjectOverlay({
 
 // src/overlay/OverlayContent.tsx
 var import_material2 = require("@mui/material");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function OverlayContent({
   children,
@@ -3188,9 +3444,9 @@ function OverlayContent({
   sx,
   ...rest
 }) {
-  const outerRef = (0, import_react11.useRef)(null);
-  const innerRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const outerRef = (0, import_react12.useRef)(null);
+  const innerRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     const outer = outerRef.current;
     const inner = innerRef.current;
     if (!outer || !inner) return;
@@ -3251,7 +3507,7 @@ function OverlayContent({
 
 // src/overlay/FixedSizeContent.tsx
 var import_material3 = require("@mui/material");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function FixedSizeContent({
   children,
@@ -3260,9 +3516,9 @@ function FixedSizeContent({
   sx,
   ...rest
 }) {
-  const ref = (0, import_react12.useRef)(null);
-  const totalContentHeightRef = (0, import_react12.useRef)(0);
-  (0, import_react12.useEffect)(() => {
+  const ref = (0, import_react13.useRef)(null);
+  const totalContentHeightRef = (0, import_react13.useRef)(0);
+  (0, import_react13.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     let clipAncestor = el.parentElement;
@@ -3325,7 +3581,7 @@ function FixedSizeContent({
 
 // src/overlay/OverlayBadge.tsx
 var import_material4 = require("@mui/material");
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function toPx(v) {
   if (v === void 0) return void 0;
@@ -3368,9 +3624,9 @@ function OverlayBadge({
   sx,
   ...rest
 }) {
-  const ref = (0, import_react13.useRef)(null);
-  const baseSize = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const ref = (0, import_react14.useRef)(null);
+  const baseSize = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const ancestor = el.parentElement;
@@ -3505,11 +3761,16 @@ var import_fabric19 = require("fabric");
   snapCursorPoint,
   useCanvasClick,
   useCanvasEvents,
+  useCanvasRef,
   useCanvasTooltip,
   useEditCanvas,
   useEditCanvasContext,
+  useEditCanvasState,
+  useEditCanvasViewport,
   useViewCanvas,
   useViewCanvasContext,
+  useViewCanvasState,
+  useViewCanvasViewport,
   util
 });
 //# sourceMappingURL=index.cjs.map