@bwp-web/canvas 0.8.3 → 0.9.0

package/dist/context/CanvasRefContext.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from 'react';
+import type { Canvas as FabricCanvas } from 'fabric';
+/**
+ * Shared context for the canvas ref. Provided by both
+ * {@link EditCanvasProvider} and {@link ViewCanvasProvider}.
+ *
+ * The value is a stable `RefObject` that never changes identity after
+ * mount, so consumers of this context will **not** re-render when
+ * canvas state (zoom, selection, etc.) changes.
+ */
+export declare const CanvasRefContext: import("react").Context<RefObject<FabricCanvas | null> | null>;
+/**
+ * Read `canvasRef` from the nearest {@link CanvasRefContext} provider.
+ * Returns `null` if no provider is present.
+ */
+export declare function useCanvasRefContext(): RefObject<FabricCanvas | null> | null;
+//# sourceMappingURL=CanvasRefContext.d.ts.map

package/dist/context/CanvasRefContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasRefContext.d.ts","sourceRoot":"","sources":["../../src/context/CanvasRefContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAErD;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,gEAC+B,CAAC;AAE7D;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,IAAI,CAE3E"}

package/dist/context/EditCanvasContext.d.ts

@@ -2,6 +2,10 @@ import { type ReactNode } from 'react';
 import { useEditCanvas, type UseEditCanvasOptions } from '../hooks/useEditCanvas';
 /** The full return value of {@link useEditCanvas}, exposed via context. */
 export type EditCanvasContextValue = ReturnType<typeof useEditCanvas>;
+/** Viewport slice — changes on every zoom/scroll. */
+export type EditCanvasViewportValue = Pick<EditCanvasContextValue, 'zoom' | 'viewport'>;
+/** State slice — everything except canvasRef and viewport. */
+export type EditCanvasStateValue = Omit<EditCanvasContextValue, 'canvasRef' | 'zoom' | 'viewport'>;
 export interface EditCanvasProviderProps {
     /** Options forwarded to the underlying {@link useEditCanvas} hook. */
     options?: UseEditCanvasOptions;
@@ -11,10 +15,14 @@ export interface EditCanvasProviderProps {
  * Calls {@link useEditCanvas} internally and provides the full canvas API
  * to all descendants via React context.
  *
- * Use {@link useEditCanvasContext} in any descendant to access `canvasRef`,
- * `isDirty`, `objects`, `isLoading`, `lockLightMode`, `viewport`,
- * `setMode`, `setBackground`, and every other value that `useEditCanvas`
- * returns — without prop drilling or bridge contexts.
+ * Internally splits state into three contexts (ref, viewport, state) so
+ * that helper hooks like {@link useCanvasRef} and components like
+ * {@link ObjectOverlay} do not re-render on unrelated state changes.
+ *
+ * Use {@link useEditCanvasContext} in any descendant to access the full
+ * combined value, or use the fine-grained hooks
+ * {@link useEditCanvasViewport} / {@link useEditCanvasState} for better
+ * performance.
  *
  * Descendant components can also use {@link ObjectOverlay},
  * {@link useCanvasEvents}, {@link useCanvasTooltip}, and
@@ -40,7 +48,7 @@ export interface EditCanvasProviderProps {
  * }
  *
  * function MySidebar() {
- *   const { isDirty, resetDirty } = useEditCanvasContext();
+ *   const { isDirty, resetDirty } = useEditCanvasState();
  *   return <SaveButton disabled={!isDirty} onClick={() => { save(); resetDirty(); }} />;
  * }
  * ```
@@ -50,6 +58,10 @@ export declare function EditCanvasProvider({ options, children, }: EditCanvasPro
  * Access the full {@link useEditCanvas} API from any descendant of
  * {@link EditCanvasProvider}.
  *
+ * This subscribes to all three internal contexts, so the component will
+ * re-render on any state change. For better performance, prefer
+ * {@link useEditCanvasViewport} or {@link useEditCanvasState}.
+ *
  * Throws if called outside of a provider.
  */
 export declare function useEditCanvasContext(): EditCanvasContextValue;
@@ -58,4 +70,24 @@ export declare function useEditCanvasContext(): EditCanvasContextValue;
  * when called outside of an {@link EditCanvasProvider}.
  */
 export declare function useEditCanvasContextSafe(): EditCanvasContextValue | null;
+/**
+ * Access only the viewport slice (zoom level and viewport controls) from
+ * the nearest {@link EditCanvasProvider}.
+ *
+ * This subscribes only to viewport changes — the component will **not**
+ * re-render when selection, dirty state, or other non-viewport state changes.
+ *
+ * Throws if called outside of a provider.
+ */
+export declare function useEditCanvasViewport(): EditCanvasViewportValue;
+/**
+ * Access only the non-viewport state slice from the nearest
+ * {@link EditCanvasProvider}.
+ *
+ * This subscribes only to state changes (selection, dirty, history, etc.) —
+ * the component will **not** re-render on zoom/scroll changes.
+ *
+ * Throws if called outside of a provider.
+ */
+export declare function useEditCanvasState(): EditCanvasStateValue;
 //# sourceMappingURL=EditCanvasContext.d.ts.map

package/dist/context/EditCanvasContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditCanvasContext.d.ts","sourceRoot":"","sources":["../../src/context/EditCanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAEhC,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAItE,MAAM,WAAW,uBAAuB;IACtC,sEAAsE;IACtE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,2CAOzB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CAQ7D;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,sBAAsB,GAAG,IAAI,CAExE"}
+{"version":3,"file":"EditCanvasContext.d.ts","sourceRoot":"","sources":["../../src/context/EditCanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAGhC,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAEtE,qDAAqD;AACrD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,sBAAsB,EACtB,MAAM,GAAG,UAAU,CACpB,CAAC;AAEF,8DAA8D;AAC9D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,sBAAsB,EACtB,WAAW,GAAG,MAAM,GAAG,UAAU,CAClC,CAAC;AAOF,MAAM,WAAW,uBAAuB;IACtC,sEAAsE;IACtE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,2CAkDzB;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CAe7D;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,sBAAsB,GAAG,IAAI,CAcxE;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,IAAI,uBAAuB,CAQ/D;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,IAAI,oBAAoB,CAQzD"}

package/dist/context/ViewCanvasContext.d.ts

@@ -2,6 +2,10 @@ import { type ReactNode } from 'react';
 import { useViewCanvas, type UseViewCanvasOptions } from '../hooks/useViewCanvas';
 /** The full return value of {@link useViewCanvas}, exposed via context. */
 export type ViewCanvasContextValue = ReturnType<typeof useViewCanvas>;
+/** Viewport slice — changes on every zoom/scroll. */
+export type ViewCanvasViewportValue = Pick<ViewCanvasContextValue, 'zoom' | 'viewport'>;
+/** State slice — everything except canvasRef and viewport. */
+export type ViewCanvasStateValue = Omit<ViewCanvasContextValue, 'canvasRef' | 'zoom' | 'viewport'>;
 export interface ViewCanvasProviderProps {
     /** Options forwarded to the underlying {@link useViewCanvas} hook. */
     options?: UseViewCanvasOptions;
@@ -11,10 +15,14 @@ export interface ViewCanvasProviderProps {
  * Calls {@link useViewCanvas} internally and provides the full canvas API
  * to all descendants via React context.
  *
- * Use {@link useViewCanvasContext} in any descendant to access `canvasRef`,
- * `viewport`, `objects`, `isLoading`, `setObjectStyle`, and every other
- * value that `useViewCanvas` returns — without prop drilling or bridge
- * contexts.
+ * Internally splits state into three contexts (ref, viewport, state) so
+ * that helper hooks like {@link useCanvasRef} and components like
+ * {@link ObjectOverlay} do not re-render on unrelated state changes.
+ *
+ * Use {@link useViewCanvasContext} in any descendant to access the full
+ * combined value, or use the fine-grained hooks
+ * {@link useViewCanvasViewport} / {@link useViewCanvasState} for better
+ * performance.
  *
  * Descendant components can also use {@link ObjectOverlay},
  * {@link useCanvasEvents}, {@link useCanvasTooltip}, and
@@ -38,7 +46,7 @@ export interface ViewCanvasProviderProps {
  * }
  *
  * function MyToolbar() {
- *   const { viewport } = useViewCanvasContext();
+ *   const { viewport } = useViewCanvasViewport();
  *   return <ZoomControls onZoomIn={viewport.zoomIn} onZoomOut={viewport.zoomOut} />;
  * }
  * ```
@@ -48,6 +56,10 @@ export declare function ViewCanvasProvider({ options, children, }: ViewCanvasPro
  * Access the full {@link useViewCanvas} API from any descendant of
  * {@link ViewCanvasProvider}.
  *
+ * This subscribes to all three internal contexts, so the component will
+ * re-render on any state change. For better performance, prefer
+ * {@link useViewCanvasViewport} or {@link useViewCanvasState}.
+ *
  * Throws if called outside of a provider.
  */
 export declare function useViewCanvasContext(): ViewCanvasContextValue;
@@ -56,4 +68,24 @@ export declare function useViewCanvasContext(): ViewCanvasContextValue;
  * when called outside of a {@link ViewCanvasProvider}.
  */
 export declare function useViewCanvasContextSafe(): ViewCanvasContextValue | null;
+/**
+ * Access only the viewport slice (zoom level and viewport controls) from
+ * the nearest {@link ViewCanvasProvider}.
+ *
+ * This subscribes only to viewport changes — the component will **not**
+ * re-render when objects or loading state changes.
+ *
+ * Throws if called outside of a provider.
+ */
+export declare function useViewCanvasViewport(): ViewCanvasViewportValue;
+/**
+ * Access only the non-viewport state slice from the nearest
+ * {@link ViewCanvasProvider}.
+ *
+ * This subscribes only to state changes (objects, loading, etc.) —
+ * the component will **not** re-render on zoom/scroll changes.
+ *
+ * Throws if called outside of a provider.
+ */
+export declare function useViewCanvasState(): ViewCanvasStateValue;
 //# sourceMappingURL=ViewCanvasContext.d.ts.map

package/dist/context/ViewCanvasContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewCanvasContext.d.ts","sourceRoot":"","sources":["../../src/context/ViewCanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAEhC,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAItE,MAAM,WAAW,uBAAuB;IACtC,sEAAsE;IACtE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,2CAOzB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CAQ7D;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,sBAAsB,GAAG,IAAI,CAExE"}
+{"version":3,"file":"ViewCanvasContext.d.ts","sourceRoot":"","sources":["../../src/context/ViewCanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAGhC,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAEtE,qDAAqD;AACrD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,sBAAsB,EACtB,MAAM,GAAG,UAAU,CACpB,CAAC;AAEF,8DAA8D;AAC9D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,sBAAsB,EACtB,WAAW,GAAG,MAAM,GAAG,UAAU,CAClC,CAAC;AAOF,MAAM,WAAW,uBAAuB;IACtC,sEAAsE;IACtE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,2CA+BzB;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CAe7D;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,sBAAsB,GAAG,IAAI,CAcxE;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,IAAI,uBAAuB,CAQ/D;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,IAAI,oBAAoB,CAQzD"}

package/dist/context/index.d.ts

@@ -1,6 +1,6 @@
-export { EditCanvasProvider, useEditCanvasContext } from './EditCanvasContext';
-export type { EditCanvasProviderProps, EditCanvasContextValue, } from './EditCanvasContext';
-export { ViewCanvasProvider, useViewCanvasContext } from './ViewCanvasContext';
-export type { ViewCanvasProviderProps, ViewCanvasContextValue, } from './ViewCanvasContext';
+export { EditCanvasProvider, useEditCanvasContext, useEditCanvasContextSafe, useEditCanvasViewport, useEditCanvasState, } from './EditCanvasContext';
+export type { EditCanvasProviderProps, EditCanvasContextValue, EditCanvasViewportValue, EditCanvasStateValue, } from './EditCanvasContext';
+export { ViewCanvasProvider, useViewCanvasContext, useViewCanvasContextSafe, useViewCanvasViewport, useViewCanvasState, } from './ViewCanvasContext';
+export type { ViewCanvasProviderProps, ViewCanvasContextValue, ViewCanvasViewportValue, ViewCanvasStateValue, } from './ViewCanvasContext';
 export { useCanvasRef } from './useCanvasRef';
 //# sourceMappingURL=index.d.ts.map

package/dist/context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/context/useCanvasRef.d.ts

@@ -6,8 +6,10 @@ import type { Canvas as FabricCanvas } from 'fabric';
  *
  * Returns `null` if neither provider is present in the tree.
  *
- * Both context hooks are called unconditionally (Rules-of-Hooks compliant).
- * In practice only one provider will be active at a time.
+ * This hook reads from the shared {@link CanvasRefContext}, which holds a
+ * stable `RefObject` that never changes identity. Consumers of this hook
+ * will **not** re-render when canvas state (zoom, selection, etc.) changes
+ * — only when the provider mounts/unmounts.
  */
 export declare function useCanvasRef(): RefObject<FabricCanvas | null> | null;
 //# sourceMappingURL=useCanvasRef.d.ts.map

package/dist/context/useCanvasRef.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCanvasRef.d.ts","sourceRoot":"","sources":["../../src/context/useCanvasRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAIrD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,IAAI,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,IAAI,CAIpE"}
+{"version":3,"file":"useCanvasRef.d.ts","sourceRoot":"","sources":["../../src/context/useCanvasRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGrD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,IAAI,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,IAAI,CAEpE"}

package/dist/index.cjs

@@ -83,8 +83,12 @@ __export(index_exports, {
   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);
@@ -3052,61 +3056,18 @@ function useViewCanvas(options) {
 }
 
 // src/hooks/useCanvasEvents.ts
-var import_react7 = require("react");
+var import_react6 = require("react");
 
-// src/context/ViewCanvasContext.tsx
+// src/context/CanvasRefContext.ts
 var import_react5 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ViewCanvasContext = (0, import_react5.createContext)(null);
-function ViewCanvasProvider({
-  options,
-  children
-}) {
-  const canvas = useViewCanvas(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ViewCanvasContext.Provider, { value: canvas, children });
-}
-function useViewCanvasContext() {
-  const ctx = (0, import_react5.useContext)(ViewCanvasContext);
-  if (ctx === null) {
-    throw new Error(
-      "useViewCanvasContext must be used within a <ViewCanvasProvider>"
-    );
-  }
-  return ctx;
-}
-function useViewCanvasContextSafe() {
-  return (0, import_react5.useContext)(ViewCanvasContext);
-}
-
-// src/context/EditCanvasContext.tsx
-var import_react6 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var EditCanvasContext = (0, import_react6.createContext)(null);
-function EditCanvasProvider({
-  options,
-  children
-}) {
-  const canvas = useEditCanvas(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditCanvasContext.Provider, { value: canvas, children });
-}
-function useEditCanvasContext() {
-  const ctx = (0, import_react6.useContext)(EditCanvasContext);
-  if (ctx === null) {
-    throw new Error(
-      "useEditCanvasContext must be used within an <EditCanvasProvider>"
-    );
-  }
-  return ctx;
-}
-function useEditCanvasContextSafe() {
-  return (0, import_react6.useContext)(EditCanvasContext);
+var CanvasRefContext = (0, import_react5.createContext)(null);
+function useCanvasRefContext() {
+  return (0, import_react5.useContext)(CanvasRefContext);
 }
 
 // src/context/useCanvasRef.ts
 function useCanvasRef() {
-  const viewCtx = useViewCanvasContextSafe();
-  const editCtx = useEditCanvasContextSafe();
-  return viewCtx?.canvasRef ?? editCtx?.canvasRef ?? null;
+  return useCanvasRefContext();
 }
 
 // src/hooks/useCanvasEvents.ts
@@ -3115,9 +3076,9 @@ function useCanvasEvents(canvasRefOrEvents, maybeEvents) {
   const contextCanvasRef = useCanvasRef();
   const resolvedCanvasRef = isContextOverload ? contextCanvasRef : canvasRefOrEvents;
   const events = isContextOverload ? canvasRefOrEvents : maybeEvents;
-  const eventsRef = (0, import_react7.useRef)(events);
+  const eventsRef = (0, import_react6.useRef)(events);
   eventsRef.current = events;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     const wrappers = /* @__PURE__ */ new Map();
@@ -3138,21 +3099,21 @@ function useCanvasEvents(canvasRefOrEvents, maybeEvents) {
 }
 
 // src/hooks/useCanvasTooltip.ts
-var import_react8 = require("react");
+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_react8.useState)({
+  const [state, setState] = (0, import_react7.useState)({
     visible: false,
     content: null,
     position: { x: 0, y: 0 }
   });
-  const hoveredObjectRef = (0, import_react8.useRef)(null);
-  const optionsRef = (0, import_react8.useRef)(options);
+  const hoveredObjectRef = (0, import_react7.useRef)(null);
+  const optionsRef = (0, import_react7.useRef)(options);
   optionsRef.current = options;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     function calculatePosition(target) {
@@ -3206,18 +3167,18 @@ function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
 }
 
 // src/hooks/useCanvasClick.ts
-var import_react9 = require("react");
+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_react9.useRef)(onClick);
+  const onClickRef = (0, import_react8.useRef)(onClick);
   onClickRef.current = onClick;
-  const optionsRef = (0, import_react9.useRef)(options);
+  const optionsRef = (0, import_react8.useRef)(options);
   optionsRef.current = options;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     let mouseDown = null;
@@ -3261,8 +3222,151 @@ function useCanvasClick(canvasRefOrOnClick, onClickOrOptions, maybeOptions) {
   }, [resolvedCanvasRef]);
 }
 
-// src/overlay/ObjectOverlay.tsx
+// src/context/EditCanvasContext.tsx
+var import_react9 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var EditViewportContext = (0, import_react9.createContext)(null);
+var EditStateContext = (0, import_react9.createContext)(null);
+function EditCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useEditCanvas(options);
+  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 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_react10 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ViewViewportContext = (0, import_react10.createContext)(null);
+var ViewStateContext = (0, import_react10.createContext)(null);
+function ViewCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useViewCanvas(options);
+  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 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_react11 = require("react");
 var import_material = require("@mui/material");
 var import_fabric18 = require("fabric");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -3275,8 +3379,8 @@ function ObjectOverlay({
 }) {
   const contextCanvasRef = useCanvasRef();
   const canvasRef = canvasRefProp ?? contextCanvasRef;
-  const stackRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const stackRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     const canvas = canvasRef?.current;
     if (!canvas || !object) return;
     function update() {
@@ -3331,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,
@@ -3340,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;
@@ -3403,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,
@@ -3412,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;
@@ -3477,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;
@@ -3520,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;
@@ -3661,8 +3765,12 @@ var import_fabric19 = require("fabric");
   useCanvasTooltip,
   useEditCanvas,
   useEditCanvasContext,
+  useEditCanvasState,
+  useEditCanvasViewport,
   useViewCanvas,
   useViewCanvasContext,
+  useViewCanvasState,
+  useViewCanvasViewport,
   util
 });
 //# sourceMappingURL=index.cjs.map