@bwp-web/canvas 0.8.2 → 0.9.0

package/dist/index.js

@@ -85,7 +85,7 @@ function Canvas({
 }
 
 // src/hooks/useEditCanvas.ts
-import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
 import { Polygon as Polygon4 } from "fabric";
 
 // src/viewport.ts
@@ -2455,6 +2455,7 @@ function useEditCanvas(options) {
   const vertexEditCleanupRef = useRef2(null);
   const keyboardCleanupRef = useRef2(null);
   const historyRef = useRef2(null);
+  const isInitialLoadRef = useRef2(false);
   const optionsRef = useRef2(options);
   optionsRef.current = options;
   const savedSelectabilityRef = useRef2(
@@ -2467,6 +2468,11 @@ function useEditCanvas(options) {
   const [isDirty, setIsDirty] = useState(false);
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
+  const [objects, setObjects] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lockLightMode, setLockLightModeState] = useState(
+    void 0
+  );
   const setMode = useCallback((setup) => {
     vertexEditCleanupRef.current?.();
     vertexEditCleanupRef.current = null;
@@ -2551,11 +2557,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 = () => {
@@ -2593,8 +2602,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);
@@ -2624,37 +2656,25 @@ function useEditCanvas(options) {
       alignmentCleanupRef.current = null;
     }
   }, [options?.enableAlignment]);
+  useEffect2(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || options?.invertBackground === void 0) return;
+    setBackgroundInverted(canvas, options.invertBackground);
+  }, [options?.invertBackground]);
+  const setLockLightMode = useCallback((value) => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      canvas.lockLightMode = value;
+    }
+    setLockLightModeState(value);
+  }, []);
   const setViewportMode = useCallback((mode) => {
     viewportRef.current?.setMode(mode);
     setViewportModeState(mode);
   }, []);
   const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit } = useViewportActions(canvasRef, viewportRef, setZoom);
-  const setBackground = 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 = useMemo2(
+    () => ({
       /** Current viewport mode (reactive). */
       mode: viewportMode,
       /** Switch between 'select' and 'pan' viewport modes. */
@@ -2669,65 +2689,129 @@ 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 = useCallback(() => setIsDirty(false), []);
+  const markDirty = useCallback(() => setIsDirty(true), []);
+  const undo = useCallback(async () => {
+    const h = historyRef.current;
+    if (!h) return;
+    await h.undo();
+    setCanUndo(h.canUndo());
+    setCanRedo(h.canRedo());
+  }, []);
+  const redo = useCallback(async () => {
+    const h = historyRef.current;
+    if (!h) return;
+    await h.redo();
+    setCanUndo(h.canUndo());
+    setCanRedo(h.canRedo());
+  }, []);
+  const setBackground = 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: useCallback(() => setIsDirty(false), []),
-    /** Manually mark the canvas as dirty (e.g., after a custom operation not tracked automatically). */
-    markDirty: useCallback(() => setIsDirty(true), []),
-    /** Undo the last change. Requires `history: true`. */
-    undo: 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: 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 useMemo2(
+    () => ({
+      /** 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
-import { useCallback as useCallback2, useRef as useRef3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState2 } from "react";
 function lockCanvas(canvas) {
   canvas.selection = false;
   canvas.forEachObject((obj) => {
@@ -2740,6 +2824,8 @@ function useViewCanvas(options) {
   const optionsRef = useRef3(options);
   optionsRef.current = options;
   const [zoom, setZoom] = useState2(1);
+  const [objects, setObjects] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
   const onReady = useCallback2(
     (canvas) => {
       canvasRef.current = canvas;
@@ -2766,20 +2852,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
     []
   );
+  useEffect3(() => {
+    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 = useMemo3(
+    () => ({
+      /** 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;
@@ -2795,9 +2918,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;
@@ -2827,42 +2950,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 useMemo3(
+    () => ({
+      /** 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
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
-function useCanvasEvents(canvasRef, events) {
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
+
+// src/context/CanvasRefContext.ts
+import { createContext, useContext } from "react";
+var CanvasRefContext = createContext(null);
+function useCanvasRefContext() {
+  return 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 = useRef4(events);
   eventsRef.current = events;
-  useEffect3(() => {
-    const canvas = canvasRef.current;
+  useEffect4(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     const wrappers = /* @__PURE__ */ new Map();
     for (const key of Object.keys(eventsRef.current)) {
@@ -2878,12 +3017,16 @@ function useCanvasEvents(canvasRef, events) {
         canvas.off(name, handler);
       });
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
 }
 
 // src/hooks/useCanvasTooltip.ts
-import { useEffect as useEffect4, useRef as useRef5, useState as useState3 } from "react";
-function useCanvasTooltip(canvasRef, options) {
+import { useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "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] = useState3({
     visible: false,
     content: null,
@@ -2892,8 +3035,8 @@ function useCanvasTooltip(canvasRef, options) {
   const hoveredObjectRef = useRef5(null);
   const optionsRef = useRef5(options);
   optionsRef.current = options;
-  useEffect4(() => {
-    const canvas = canvasRef.current;
+  useEffect5(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     function calculatePosition(target) {
       const bounds = target.getBoundingRect();
@@ -2941,19 +3084,24 @@ function useCanvasTooltip(canvasRef, options) {
       canvas.off("after:render", updatePosition);
       canvas.off("mouse:wheel", updatePosition);
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
   return state;
 }
 
 // src/hooks/useCanvasClick.ts
-import { useEffect as useEffect5, useRef as useRef6 } from "react";
-function useCanvasClick(canvasRef, onClick, options) {
+import { useEffect as useEffect6, useRef as useRef6 } from "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 = useRef6(onClick);
   onClickRef.current = onClick;
   const optionsRef = useRef6(options);
   optionsRef.current = options;
-  useEffect5(() => {
-    const canvas = canvasRef.current;
+  useEffect6(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     let mouseDown = null;
     let isPanning = false;
@@ -2993,66 +3141,169 @@ function useCanvasClick(canvasRef, onClick, options) {
       canvas.off("mouse:move", handleMouseMove);
       canvas.off("mouse:up", handleMouseUp);
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
 }
 
 // src/context/EditCanvasContext.tsx
-import { createContext, useContext } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo4 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var EditCanvasContext = createContext(null);
+var EditViewportContext = createContext2(null);
+var EditStateContext = createContext2(null);
 function EditCanvasProvider({
   options,
   children
 }) {
   const canvas = useEditCanvas(options);
-  return /* @__PURE__ */ jsx2(EditCanvasContext.Provider, { value: canvas, children });
+  const viewportValue = useMemo4(
+    () => ({ zoom: canvas.zoom, viewport: canvas.viewport }),
+    [canvas.zoom, canvas.viewport]
+  );
+  const stateValue = useMemo4(
+    () => ({
+      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__ */ jsx2(CanvasRefContext.Provider, { value: canvas.canvasRef, children: /* @__PURE__ */ jsx2(EditViewportContext.Provider, { value: viewportValue, children: /* @__PURE__ */ jsx2(EditStateContext.Provider, { value: stateValue, children }) }) });
 }
 function useEditCanvasContext() {
-  const ctx = useContext(EditCanvasContext);
-  if (ctx === null) {
+  const canvasRef = useContext2(CanvasRefContext);
+  const viewport = useContext2(EditViewportContext);
+  const state = useContext2(EditStateContext);
+  if (canvasRef === null || viewport === null || state === null) {
     throw new Error(
       "useEditCanvasContext must be used within an <EditCanvasProvider>"
     );
   }
+  return useMemo4(
+    () => ({ canvasRef, ...viewport, ...state }),
+    [canvasRef, viewport, state]
+  );
+}
+function useEditCanvasViewport() {
+  const ctx = useContext2(EditViewportContext);
+  if (ctx === null) {
+    throw new Error(
+      "useEditCanvasViewport must be used within an <EditCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+function useEditCanvasState() {
+  const ctx = useContext2(EditStateContext);
+  if (ctx === null) {
+    throw new Error(
+      "useEditCanvasState must be used within an <EditCanvasProvider>"
+    );
+  }
   return ctx;
 }
 
 // src/context/ViewCanvasContext.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo5 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var ViewCanvasContext = createContext2(null);
+var ViewViewportContext = createContext3(null);
+var ViewStateContext = createContext3(null);
 function ViewCanvasProvider({
   options,
   children
 }) {
   const canvas = useViewCanvas(options);
-  return /* @__PURE__ */ jsx3(ViewCanvasContext.Provider, { value: canvas, children });
+  const viewportValue = useMemo5(
+    () => ({ zoom: canvas.zoom, viewport: canvas.viewport }),
+    [canvas.zoom, canvas.viewport]
+  );
+  const stateValue = useMemo5(
+    () => ({
+      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__ */ jsx3(CanvasRefContext.Provider, { value: canvas.canvasRef, children: /* @__PURE__ */ jsx3(ViewViewportContext.Provider, { value: viewportValue, children: /* @__PURE__ */ jsx3(ViewStateContext.Provider, { value: stateValue, children }) }) });
 }
 function useViewCanvasContext() {
-  const ctx = useContext2(ViewCanvasContext);
-  if (ctx === null) {
+  const canvasRef = useContext3(CanvasRefContext);
+  const viewport = useContext3(ViewViewportContext);
+  const state = useContext3(ViewStateContext);
+  if (canvasRef === null || viewport === null || state === null) {
     throw new Error(
       "useViewCanvasContext must be used within a <ViewCanvasProvider>"
     );
   }
+  return useMemo5(
+    () => ({ canvasRef, ...viewport, ...state }),
+    [canvasRef, viewport, state]
+  );
+}
+function useViewCanvasViewport() {
+  const ctx = useContext3(ViewViewportContext);
+  if (ctx === null) {
+    throw new Error(
+      "useViewCanvasViewport must be used within a <ViewCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+function useViewCanvasState() {
+  const ctx = useContext3(ViewStateContext);
+  if (ctx === null) {
+    throw new Error(
+      "useViewCanvasState must be used within a <ViewCanvasProvider>"
+    );
+  }
   return ctx;
 }
 
 // src/overlay/ObjectOverlay.tsx
-import { useEffect as useEffect6, useRef as useRef7 } from "react";
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { Stack } from "@mui/material";
 import { util as util4 } from "fabric";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function ObjectOverlay({
-  canvasRef,
+  canvasRef: canvasRefProp,
   object,
   sx,
   children,
   ...rest
 }) {
+  const contextCanvasRef = useCanvasRef();
+  const canvasRef = canvasRefProp ?? contextCanvasRef;
   const stackRef = useRef7(null);
-  useEffect6(() => {
-    const canvas = canvasRef.current;
+  useEffect7(() => {
+    const canvas = canvasRef?.current;
     if (!canvas || !object) return;
     function update() {
       const el = stackRef.current;
@@ -3106,7 +3357,7 @@ function ObjectOverlay({
 
 // src/overlay/OverlayContent.tsx
 import { Stack as Stack2 } from "@mui/material";
-import { useEffect as useEffect7, useRef as useRef8 } from "react";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function OverlayContent({
   children,
@@ -3117,7 +3368,7 @@ function OverlayContent({
 }) {
   const outerRef = useRef8(null);
   const innerRef = useRef8(null);
-  useEffect7(() => {
+  useEffect8(() => {
     const outer = outerRef.current;
     const inner = innerRef.current;
     if (!outer || !inner) return;
@@ -3178,7 +3429,7 @@ function OverlayContent({
 
 // src/overlay/FixedSizeContent.tsx
 import { Stack as Stack3 } from "@mui/material";
-import { useEffect as useEffect8, useRef as useRef9 } from "react";
+import { useEffect as useEffect9, useRef as useRef9 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function FixedSizeContent({
   children,
@@ -3189,7 +3440,7 @@ function FixedSizeContent({
 }) {
   const ref = useRef9(null);
   const totalContentHeightRef = useRef9(0);
-  useEffect8(() => {
+  useEffect9(() => {
     const el = ref.current;
     if (!el) return;
     let clipAncestor = el.parentElement;
@@ -3252,7 +3503,7 @@ function FixedSizeContent({
 
 // src/overlay/OverlayBadge.tsx
 import { Stack as Stack4 } from "@mui/material";
-import { useEffect as useEffect9, useRef as useRef10 } from "react";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function toPx(v) {
   if (v === void 0) return void 0;
@@ -3297,7 +3548,7 @@ function OverlayBadge({
 }) {
   const ref = useRef10(null);
   const baseSize = useRef10(null);
-  useEffect9(() => {
+  useEffect10(() => {
     const el = ref.current;
     if (!el) return;
     const ancestor = el.parentElement;
@@ -3439,11 +3690,16 @@ export {
   snapCursorPoint,
   useCanvasClick,
   useCanvasEvents,
+  useCanvasRef,
   useCanvasTooltip,
   useEditCanvas,
   useEditCanvasContext,
+  useEditCanvasState,
+  useEditCanvasViewport,
   useViewCanvas,
   useViewCanvasContext,
+  useViewCanvasState,
+  useViewCanvasViewport,
   util5 as util
 };
 //# sourceMappingURL=index.js.map