@mhamz.01/easyflow-whiteboard 2.38.0 → 2.40.0

package/dist/hooks/usePan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePan.d.ts","sourceRoot":"","sources":["../../src/hooks/usePan.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,WAAW;IACnB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,GAAI,8DAKpB,WAAW,SAkGb,CAAC"}
+{"version":3,"file":"usePan.d.ts","sourceRoot":"","sources":["../../src/hooks/usePan.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,WAAW;IACnB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,GAAI,8DAKpB,WAAW,SA8Gb,CAAC"}

package/dist/hooks/usePan.js

@@ -1,5 +1,14 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport, }) => {
+    // Refs so the effect registers ONCE but always reads latest values.
+    // Avoids tearing down/reattaching mouse:down/move/up on every tool change.
+    const activeToolRef = useRef(activeTool);
+    const handleZoomRef = useRef(handleZoom);
+    const setCanvasViewportRef = useRef(setCanvasViewport);
+    // Assigned synchronously in render — always fresh before any event fires
+    activeToolRef.current = activeTool;
+    handleZoomRef.current = handleZoom;
+    setCanvasViewportRef.current = setCanvasViewport;
     useEffect(() => {
         const canvas = fabricCanvas.current;
         if (!canvas)
@@ -11,16 +20,14 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
         let lastY = 0;
         let lastTouchDistance = 0;
         const onDown = (opt) => {
-            if (activeTool !== "pan")
+            if (activeToolRef.current !== "pan")
                 return;
             const e = opt.e;
-            // Pinch initialization
             if (e.touches && e.touches.length === 2) {
                 isPanning = false;
                 lastTouchDistance = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
                 return;
             }
-            // Pan initialization
             const pointer = e.touches ? e.touches[0] : e;
             isPanning = true;
             lastX = pointer.clientX;
@@ -28,45 +35,50 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
             canvas.setCursor("grabbing");
         };
         const onMove = (opt) => {
-            if (activeTool !== "pan")
+            if (activeToolRef.current !== "pan")
                 return;
             const e = opt.e;
-            // Handle pinch zoom (two fingers)
             if (e.touches && e.touches.length === 2) {
                 const currentDistance = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
                 if (lastTouchDistance > 0) {
                     const zoom = canvas.getZoom();
                     const delta = (currentDistance - lastTouchDistance) * 0.01;
-                    const newZoom = zoom + delta;
                     const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
                     const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
                     const rect = canvasEl.getBoundingClientRect();
-                    handleZoom(newZoom, { x: midX - rect.left, y: midY - rect.top });
+                    handleZoomRef.current(zoom + delta, {
+                        x: midX - rect.left,
+                        y: midY - rect.top,
+                    });
                 }
                 lastTouchDistance = currentDistance;
                 return;
             }
-            // Handle panning (one finger or mouse)
-            if (isPanning) {
-                const pointer = e.touches ? e.touches[0] : e;
-                const vpt = canvas.viewportTransform;
-                if (vpt) {
-                    vpt[4] += pointer.clientX - lastX;
-                    vpt[5] += pointer.clientY - lastY;
-                    canvas.requestRenderAll();
-                }
-                lastX = pointer.clientX;
-                lastY = pointer.clientY;
-            }
+            if (!isPanning)
+                return; // early exit — avoids any work on non-pan moves
+            const pointer = e.touches ? e.touches[0] : e;
+            const vpt = canvas.viewportTransform;
+            if (!vpt)
+                return;
+            // VPT mutation is synchronous — NO rAF here intentionally.
+            // rAF delays the mutation by one frame which makes pan feel like 20fps.
+            vpt[4] += pointer.clientX - lastX;
+            vpt[5] += pointer.clientY - lastY;
+            canvas.requestRenderAll();
+            lastX = pointer.clientX;
+            lastY = pointer.clientY;
         };
         const onUp = () => {
+            if (!isPanning && lastTouchDistance === 0)
+                return; // nothing to clean up
             const vpt = canvas.viewportTransform;
             if (vpt) {
-                setCanvasViewport({ x: vpt[4], y: vpt[5] });
+                // React state update only on mouse:up — not per-frame during pan
+                setCanvasViewportRef.current({ x: vpt[4], y: vpt[5] });
             }
             isPanning = false;
             lastTouchDistance = 0;
-            canvas.setCursor(activeTool === "pan" ? "grab" : "default");
+            canvas.setCursor(activeToolRef.current === "pan" ? "grab" : "default");
         };
         canvas.on("mouse:down", onDown);
         canvas.on("mouse:move", onMove);
@@ -76,5 +88,5 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
             canvas.off("mouse:move", onMove);
             canvas.off("mouse:up", onUp);
         };
-    }, [activeTool, handleZoom, setCanvasViewport, fabricCanvas]);
+    }, [fabricCanvas]); // registered once per canvas mount
 };

package/dist/hooks/usePersistance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePersistance.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9C;AAKD,eAAO,MAAM,cAAc,GAAI,sFAO5B,mBAAmB,SAgFrB,CAAC"}
+{"version":3,"file":"usePersistance.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9C;AAKD,eAAO,MAAM,cAAc,GAAI,sFAO5B,mBAAmB,SAkFrB,CAAC"}

package/dist/hooks/usePersistance.js

@@ -12,6 +12,7 @@ export const usePersistence = ({ fabricCanvas, tasks, documents, pushHistory, is
                 const json = JSON.stringify(canvas.toJSON());
                 localStorage.setItem(CANVAS_KEY, json);
                 pushHistory(json);
+                console.log("💾 Canvas content saving to storage is: " + json);
                 console.log("💾 Canvas saved via requestIdleCallback");
             }
             catch (err) {
@@ -34,6 +35,7 @@ export const usePersistence = ({ fabricCanvas, tasks, documents, pushHistory, is
             try {
                 const nodesData = { tasks, documents };
                 localStorage.setItem(NODES_KEY, JSON.stringify(nodesData));
+                console.log("💾 Nodes saving to storage is: " + JSON.stringify(nodesData));
                 console.log("💾 Custom nodes saved");
             }
             catch (err) {

package/dist/store/whiteboard-store.d.ts

@@ -62,38 +62,22 @@ interface WhiteboardState {
     addCanvasObject: (obj: FabricObject) => void;
     removeCanvasObject: (obj: FabricObject) => void;
     clearCanvasObjects: () => void;
+    selectedObjects: FabricObject[];
+    setSelectedObjects: (objects: FabricObject[]) => void;
     toolOptions: ToolOptions;
     setToolOption: <T extends keyof ToolOptions>(tool: T, option: keyof ToolOptions[T], value: any) => void;
     history: string[];
     historyIndex: number;
     canUndo: boolean;
     canRedo: boolean;
-    pushHistory: (state: string) => void;
+    pushHistory: (snapshot: string) => void;
     undo: () => string | null;
     redo: () => string | null;
-    setCanUndo: (canUndo: boolean) => void;
-    setCanRedo: (canRedo: boolean) => void;
+    setCanUndo: (v: boolean) => void;
+    setCanRedo: (v: boolean) => void;
     zoom: number;
     setZoom: (zoom: number) => void;
-    selectedObjects: FabricObject[];
-    setSelectedObjects: (objects: FabricObject[]) => void;
 }
-export declare const useWhiteboardStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<WhiteboardState>, "setState" | "devtools"> & {
-    setState(partial: WhiteboardState | Partial<WhiteboardState> | ((state: WhiteboardState) => WhiteboardState | Partial<WhiteboardState>), replace?: false | undefined, action?: (string | {
-        [x: string]: unknown;
-        [x: number]: unknown;
-        [x: symbol]: unknown;
-        type: string;
-    }) | undefined): void;
-    setState(state: WhiteboardState | ((state: WhiteboardState) => WhiteboardState), replace: true, action?: (string | {
-        [x: string]: unknown;
-        [x: number]: unknown;
-        [x: symbol]: unknown;
-        type: string;
-    }) | undefined): void;
-    devtools: {
-        cleanup: () => void;
-    };
-}>;
+export declare const useWhiteboardStore: import("zustand").UseBoundStore<import("zustand").StoreApi<WhiteboardState>>;
 export {};
 //# sourceMappingURL=whiteboard-store.d.ts.map

package/dist/store/whiteboard-store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-store.d.ts","sourceRoot":"","sources":["../../src/store/whiteboard-store.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,IAAI,GACZ,QAAQ,GACR,KAAK,GACL,KAAK,GACL,WAAW,GACX,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,WAAW,GACX,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;QAChB,eAAe,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;KAClC,CAAC;IACF,SAAS,EAAE;QACT,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;KAClC,CAAC;IACF,MAAM,EAAE;QACN,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;KAClC,CAAC;IACF,KAAK,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;KAClC,CAAC;IACF,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,EAAE;QAEL,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;KAClC,CAAC;IAEF,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;KAClC,CAAC;CACH;AAED,UAAU,eAAe;IAGvB,UAAU,EAAE,IAAI,CAAC;IACjB,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAEpC,cAAc,EAAE,cAAc,CAAC;IAC/B,iBAAiB,EAAE,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,CAAC;IAGhD,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAGrD,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,eAAe,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,kBAAkB,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAG/B,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,CAAC,CAAC,SAAS,MAAM,WAAW,EACzC,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,MAAM,WAAW,CAAC,CAAC,CAAC,EAC5B,KAAK,EAAE,GAAG,KACP,IAAI,CAAC;IAGV,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,IAAI,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAGvC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAGhC,eAAe,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACvD;AAsDD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;EAwG9B,CAAC"}
+{"version":3,"file":"whiteboard-store.d.ts","sourceRoot":"","sources":["../../src/store/whiteboard-store.ts"],"names":[],"mappings":"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"}

package/dist/store/whiteboard-store.js

@@ -1,137 +1,84 @@
 import { create } from "zustand";
-import { devtools } from "zustand/middleware";
+// ─── Constants ────────────────────────────────────────────────────────────────
+// Each history entry is a full JSON canvas snapshot (can be 100KB+).
+// Without a cap: 200 actions × 100KB = 20MB of undo history in memory.
+const MAX_HISTORY = 50;
 const defaultToolOptions = {
-    pen: {
-        color: "#ffffff",
-        strokeWidth: 2,
-        opacity: 1,
-        strokeDashArray: null,
-    },
-    rectangle: {
-        fillColor: "transparent",
-        strokeColor: "#ffffff",
-        strokeWidth: 2,
-        strokeDashArray: null,
-    },
-    circle: {
-        fillColor: "transparent",
-        strokeColor: "#ffffff",
-        strokeWidth: 2,
-        strokeDashArray: null,
-    },
-    frame: {
-        fillColor: "#FFFFFF",
-        strokeColor: "#E5E7EB",
-        strokeWidth: 1,
-        strokeDashArray: null,
-    },
-    text: {
-        fontSize: 24,
-        fontFamily: "cursive",
-        color: "#ffffff",
-        fontWeight: "400",
-        textAlign: "left",
-    },
-    image: {
-        opacity: 1,
-        filters: [],
-    },
-    eraser: {
-        size: 20,
-    },
-    line: {
-        strokeColor: "#ffffff",
-        strokeWidth: 2,
-        strokeDashArray: null,
-    }, // ← ADD THIS
-    arrow: {
-        strokeColor: "#ffffff",
-        strokeWidth: 2,
-        strokeDashArray: null,
-    }, // ← ADD THIS
+    pen: { color: "#ffffff", strokeWidth: 2, opacity: 1, strokeDashArray: null },
+    rectangle: { fillColor: "transparent", strokeColor: "#ffffff", strokeWidth: 2, strokeDashArray: null },
+    circle: { fillColor: "transparent", strokeColor: "#ffffff", strokeWidth: 2, strokeDashArray: null },
+    frame: { fillColor: "#FFFFFF", strokeColor: "#E5E7EB", strokeWidth: 1, strokeDashArray: null },
+    text: { fontSize: 24, fontFamily: "cursive", color: "#ffffff", fontWeight: "400", textAlign: "left" },
+    image: { opacity: 1, filters: [] },
+    eraser: { size: 20 },
+    line: { strokeColor: "#ffffff", strokeWidth: 2, strokeDashArray: null },
+    arrow: { strokeColor: "#ffffff", strokeWidth: 2, strokeDashArray: null },
 };
-export const useWhiteboardStore = create()(devtools((set, get) => ({
-    // Tool state
+// ─── Store ────────────────────────────────────────────────────────────────────
+export const useWhiteboardStore = create()((set, get) => ({
+    // ── Tool ──────────────────────────────────────────────────────────────────
     activeTool: "select",
     setActiveTool: (tool) => set({ activeTool: tool }),
-    // Selected object type (for editing)
+    // ── Dropdown ──────────────────────────────────────────────────────────────
+    activeDropdown: null,
+    setActiveDropdown: (id) => set({ activeDropdown: id }),
+    // ── Selected object type ──────────────────────────────────────────────────
     selectedObjectType: null,
     setSelectedObjectType: (type) => set({ selectedObjectType: type }),
-    // Canvas objects
+    // ── Canvas objects ────────────────────────────────────────────────────────
+    // NOTE: Fabric instances have circular refs and DOM refs — they cannot be
+    // serialized. If you add devtools back, exclude this slice or it will throw.
+    // Using concat() instead of spread avoids the intermediate spread allocation.
     canvasObjects: [],
-    addCanvasObject: (obj) => set((state) => ({
-        canvasObjects: [...state.canvasObjects, obj],
-    })),
-    removeCanvasObject: (obj) => set((state) => ({
-        canvasObjects: state.canvasObjects.filter((o) => o !== obj),
-    })),
+    addCanvasObject: (obj) => set((s) => ({ canvasObjects: s.canvasObjects.concat(obj) })),
+    removeCanvasObject: (obj) => set((s) => ({ canvasObjects: s.canvasObjects.filter((o) => o !== obj) })),
     clearCanvasObjects: () => set({ canvasObjects: [] }),
-    // Tool options
+    // ── Selected objects ──────────────────────────────────────────────────────
+    selectedObjects: [],
+    setSelectedObjects: (objects) => set({ selectedObjects: objects }),
+    // ── Tool options ──────────────────────────────────────────────────────────
     toolOptions: defaultToolOptions,
-    setToolOption: (tool, option, value) => set((state) => ({
+    setToolOption: (tool, option, value) => set((s) => ({
         toolOptions: {
-            ...state.toolOptions,
-            [tool]: {
-                ...state.toolOptions[tool],
-                [option]: value,
-            },
+            ...s.toolOptions,
+            [tool]: { ...s.toolOptions[tool], [option]: value },
         },
     })),
-    // History
+    // ── History ───────────────────────────────────────────────────────────────
     history: [],
     historyIndex: -1,
     canUndo: false,
     canRedo: false,
-    pushHistory: (state) => {
-        const { history, historyIndex } = get();
-        // Slice off any redo states ahead of current index
-        const newHistory = history.slice(0, historyIndex + 1);
-        newHistory.push(state);
-        set({
-            history: newHistory,
-            historyIndex: newHistory.length - 1,
-            // Can undo if there is at least 1 previous state (index > 0)
-            canUndo: newHistory.length > 1,
-            canRedo: false,
-        });
-    },
-    // Sets the selected dropdown (task/document) - used to auto-switch back to select tool when closing
-    activeDropdown: null,
-    setActiveDropdown: (id) => set({
-        activeDropdown: id,
+    // Uses set() updater (single atomic write) instead of get() + set() which
+    // could interleave in React concurrent mode.
+    pushHistory: (snapshot) => set((s) => {
+        const trimmed = s.history.slice(0, s.historyIndex + 1);
+        trimmed.push(snapshot);
+        const capped = trimmed.length > MAX_HISTORY ? trimmed.slice(-MAX_HISTORY) : trimmed;
+        const newIndex = capped.length - 1;
+        return { history: capped, historyIndex: newIndex, canUndo: newIndex > 0, canRedo: false };
     }),
     undo: () => {
         const { history, historyIndex } = get();
-        // Must have a previous state to go back to
         if (historyIndex > 0) {
-            const newIndex = historyIndex - 1;
-            set({
-                historyIndex: newIndex,
-                canUndo: newIndex > 0,
-                canRedo: true,
-            });
-            return history[newIndex];
+            const i = historyIndex - 1;
+            set({ historyIndex: i, canUndo: i > 0, canRedo: true });
+            return history[i];
         }
         return null;
     },
     redo: () => {
         const { history, historyIndex } = get();
         if (historyIndex < history.length - 1) {
-            const newIndex = historyIndex + 1;
-            set({
-                historyIndex: newIndex,
-                canUndo: true,
-                canRedo: newIndex < history.length - 1,
-            });
-            return history[newIndex];
+            const i = historyIndex + 1;
+            set({ historyIndex: i, canUndo: true, canRedo: i < history.length - 1 });
+            return history[i];
         }
         return null;
     },
     setCanUndo: (v) => set({ canUndo: v }),
     setCanRedo: (v) => set({ canRedo: v }),
-    // Zoom
+    // ── Zoom ──────────────────────────────────────────────────────────────────
     zoom: 1,
     setZoom: (zoom) => set({ zoom }),
-    selectedObjects: [],
-    setSelectedObjects: (objects) => set({ selectedObjects: objects }),
-}), { name: "fabric-whiteboard-store" }));
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mhamz.01/easyflow-whiteboard",
-    "version": "2.38.0",
+    "version": "2.40.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",