@mhamz.01/easyflow-whiteboard 2.123.0 → 2.125.0

package/dist/components/node/custom-node-overlay-layer.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { FabricObject, Canvas } from "fabric";
 export interface Task {
     id: string;
@@ -40,6 +41,6 @@ interface CanvasOverlayLayerProps {
     fabricCanvas?: React.RefObject<Canvas | null>;
     canvasReady?: boolean;
 }
-export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, fabricCanvas, }: CanvasOverlayLayerProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const _default: React.NamedExoticComponent<CanvasOverlayLayerProps>;
+export default _default;
 //# sourceMappingURL=custom-node-overlay-layer.d.ts.map

package/dist/components/node/custom-node-overlay-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAM9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAaD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CAglBzB"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;;AAaD,wBA6pBG"}

package/dist/components/node/custom-node-overlay-layer.js

@@ -1,19 +1,25 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import TaskNode from "./custom-node";
 import DocumentNode from "./document-node";
 // ─── Component ────────────────────────────────────────────────────────────────
-export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, }) {
+export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, canvasReady: canvasReadyProp = false, }) {
     const [localTasks, setLocalTasks] = useState(tasks);
     const [localDocuments, setLocalDocuments] = useState(documents);
     const [selectedIds, setSelectedIds] = useState(new Set());
     const [dragging, setDragging] = useState(null);
-    const [canvasReady, setCanvasReady] = useState(false);
     const nodeClipboardRef = useRef({
         tasks: [],
         documents: [],
     });
+    // ── Refs for always-current state (Issue 4) ────────────────────────────────
+    const localTasksRef = useRef(localTasks);
+    const localDocumentsRef = useRef(localDocuments);
+    const selectedIdsRef = useRef(selectedIds);
+    localTasksRef.current = localTasks;
+    localDocumentsRef.current = localDocuments;
+    selectedIdsRef.current = selectedIds;
     const dragStateRef = useRef({
         isDragging: false,
         itemIds: [],
@@ -23,29 +29,18 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         offsetY: 0,
     });
     const rafIdRef = useRef(null);
+    const fabricMoveRafRef = useRef(null); // Issue 7
     const overlayRef = useRef(null);
-    const selectedIdsRef = useRef(selectedIds);
-    selectedIdsRef.current = selectedIds;
     // ── Sync props → local state ────────────────────────────────────────────────
-    useEffect(() => { setLocalTasks(tasks); }, [tasks]);
-    useEffect(() => { setLocalDocuments(documents); }, [documents]);
-    // effect — polls until fabricCanvas.current is available:
     useEffect(() => {
-        if (canvasReady)
-            return;
-        if (fabricCanvas?.current) {
-            setCanvasReady(true);
-            return;
-        }
-        // Poll every 50ms until canvas is ready (only needed on first load)
-        const interval = setInterval(() => {
-            if (fabricCanvas?.current) {
-                setCanvasReady(true);
-                clearInterval(interval);
-            }
-        }, 50);
-        return () => clearInterval(interval);
-    }, [fabricCanvas, canvasReady]);
+        setLocalTasks(tasks);
+    }, [tasks]);
+    useEffect(() => {
+        setLocalDocuments(documents);
+    }, [documents]);
+    // Issue 2: Remove internal canvasReady state and polling — use prop directly
+    // No longer needed: const [canvasReady, setCanvasReady] = useState(false);
+    // No longer needed: polling useEffect with setInterval
     // ── Event Forwarding (Fixes Zooming on Nodes) ───────────────────────────────
     const handleOverlayWheel = (e) => {
         if (e.ctrlKey || e.metaKey || e.shiftKey) {
@@ -61,7 +56,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 x: nativeEvent.clientX - rect.left,
                 y: nativeEvent.clientY - rect.top,
             };
-            // We cast to 'any' here because we are manually triggering an internal 
+            // We cast to 'any' here because we are manually triggering an internal
             // event bus, and Fabric's internal types for .fire() can be overly strict.
             canvas.fire("mouse:wheel", {
                 e: nativeEvent,
@@ -72,6 +67,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             e.stopPropagation();
         }
     };
+    // Issue 6: Remove canvasZoom from deps — not used in handler
     useEffect(() => {
         const overlayEl = overlayRef.current;
         const canvas = fabricCanvas?.current;
@@ -106,12 +102,14 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         return () => {
             overlayEl.removeEventListener("wheel", handleGlobalWheel);
         };
-    }, [fabricCanvas, canvasZoom, canvasReady]); // Re-bind when zoom changes to keep closure fresh
+    }, [fabricCanvas, canvasReadyProp]); // Issue 6: removed canvasZoom
     // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
+    // Issue 5: Remove canvasZoom from deps — not used in handlers
     useEffect(() => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
+        // Issue 7: Throttle handleObjectMoving with rAF gate
         const handleObjectMoving = (e) => {
             const target = e.transform?.target || e.target;
             if (!target)
@@ -122,10 +120,19 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             target._prevTop = target.top;
             if (deltaX === 0 && deltaY === 0)
                 return;
-            // ── Read from ref — always fresh, never stale ──
             const sel = selectedIdsRef.current;
-            setLocalTasks((prev) => prev.map((t) => sel.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t));
-            setLocalDocuments((prev) => prev.map((d) => sel.has(d.id) ? { ...d, x: d.x + deltaX, y: d.y + deltaY } : d));
+            // Skip if frame already queued
+            if (fabricMoveRafRef.current !== null)
+                return;
+            fabricMoveRafRef.current = requestAnimationFrame(() => {
+                fabricMoveRafRef.current = null;
+                setLocalTasks((prev) => prev.map((t) => sel.has(t.id)
+                    ? { ...t, x: t.x + deltaX, y: t.y + deltaY }
+                    : t));
+                setLocalDocuments((prev) => prev.map((d) => sel.has(d.id)
+                    ? { ...d, x: d.x + deltaX, y: d.y + deltaY }
+                    : d));
+            });
         };
         const handleMouseDown = (e) => {
             const target = e.target;
@@ -160,18 +167,17 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             canvas.off("object:moving", handleObjectMoving);
             canvas.off("mouse:down", handleMouseDown);
             canvas.off("selection:cleared", handleSelectionCleared);
+            if (fabricMoveRafRef.current !== null) {
+                cancelAnimationFrame(fabricMoveRafRef.current);
+            }
         };
-        // ── selectedIds REMOVED from deps — read via selectedIdsRef instead ──────
-        // Having selectedIds here caused the effect to re-register on every selection
-        // change, creating a new closure each time. The second drag captured a stale
-        // or empty selectedIds from the closure at re-registration time.
-    }, [canvasZoom, fabricCanvas, canvasReady]);
+    }, [fabricCanvas, canvasReadyProp]); // Issue 5: removed canvasZoom
     // ── Helpers ─────────────────────────────────────────────────────────────────
     const getItemPosition = (id) => {
-        const task = localTasks.find((t) => t.id === id);
+        const task = localTasksRef.current.find((t) => t.id === id);
         if (task)
             return { x: task.x, y: task.y };
-        const doc = localDocuments.find((d) => d.id === id);
+        const doc = localDocumentsRef.current.find((d) => d.id === id);
         if (doc)
             return { x: doc.x, y: doc.y };
         return undefined;
@@ -193,11 +199,11 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             return;
         // ── O(n) single pass — no sort, no join, no extra allocations ──
         const newSelected = new Set();
-        for (const task of localTasks) {
+        for (const task of localTasksRef.current) {
             if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
                 newSelected.add(task.id);
         }
-        for (const doc of localDocuments) {
+        for (const doc of localDocumentsRef.current) {
             if (isItemInSelectionBox(doc.x, doc.y, 320, 160, selectionBox))
                 newSelected.add(doc.id);
         }
@@ -215,7 +221,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     // ── Drag start (HTML Node side) ──────────────────────────────────────────────
     // Helper to extract coordinates regardless of event type
     const getPointerEvent = (e) => {
-        if ('touches' in e && e.touches.length > 0)
+        if ("touches" in e && e.touches.length > 0)
             return e.touches[0];
         return e;
     };
@@ -231,8 +237,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         // 3. Determine which items are being dragged
         // selection update DOES NOT trigger before drag snapshot
         let itemsToDrag;
-        if (selectedIds.has(itemId)) {
-            itemsToDrag = Array.from(selectedIds);
+        if (selectedIdsRef.current.has(itemId)) {
+            itemsToDrag = Array.from(selectedIdsRef.current);
         }
         else {
             itemsToDrag = [itemId];
@@ -265,7 +271,10 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         // 9. Snapshot starting positions for all selected Fabric objects
         const canvasObjectsStartPos = new Map();
         selectedCanvasObjects.forEach((obj) => {
-            canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
+            canvasObjectsStartPos.set(obj, {
+                left: obj.left || 0,
+                top: obj.top || 0,
+            });
         });
         // 10. Commit to the ref for the requestAnimationFrame loop
         dragStateRef.current = {
@@ -276,7 +285,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             offsetX: clickWorldX, // Now stored as World Units
             offsetY: clickWorldY, // Now stored as World Units
         };
-        if (!selectedIds.has(itemId) && dragStateRef.current.itemIds.length === 0) {
+        if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
             setSelectedIds(new Set([itemId]));
         }
         // 11. Trigger UI states
@@ -286,10 +295,10 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         document.body.style.touchAction = "none";
     };
     // ── Drag move (HTML Node side) ───────────────────────────────────────────────
+    // Issue 3: Remove localTasks/localDocuments from deps — use refs instead
     useEffect(() => {
         if (!dragging)
             return;
-        // Inside the useEffect that watches [dragging, localTasks, localDocuments, fabricCanvas]
         const handleMove = (e) => {
             if (!dragStateRef.current.isDragging)
                 return;
@@ -300,7 +309,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
             rafIdRef.current = requestAnimationFrame(() => {
-                const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
+                const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY, } = dragStateRef.current;
                 const canvas = fabricCanvas?.current;
                 if (!canvas)
                     return;
@@ -316,33 +325,27 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 // (Current Mouse World - Initial World Offset from Start)
                 const deltaX = currentWorldX - offsetX;
                 const deltaY = currentWorldY - offsetY;
-                // if (itemIds.length > 0) {
-                //   console.groupCollapsed(`Dragging Node: ${itemIds[0]}`);
-                //   console.log("Screen Mouse:", { x: pointer.clientX, y: pointer.clientY });
-                //   console.log("World Mouse:", { x: currentWorldX.toFixed(2), y: currentWorldY.toFixed(2) });
-                //   console.log("Canvas Zoom:", liveZoom.toFixed(2));
-                //   console.log("New Node Pos:", { x: deltaX.toFixed(2), y: deltaY.toFixed(2) });
-                //   console.groupEnd();
-                // }
                 // 5. Calculate the Movement Delta in World Units
                 // We compare where the first item started vs where it is now.
                 const firstId = itemIds[0];
                 const firstStart = startPositions.get(firstId);
                 if (!firstStart)
                     return;
-                // The real problem of task jumps 
-                // const deltaX = deltaX - firstStart.x;
                 // 6. Update HTML Nodes (Batching these into one state update)
-                setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id) ? {
-                    ...t,
-                    x: (startPositions.get(t.id)?.x ?? t.x) + deltaX,
-                    y: (startPositions.get(t.id)?.y ?? t.y) + deltaY,
-                } : t));
-                setLocalDocuments((prev) => prev.map((d) => itemIds.includes(d.id) ? {
-                    ...d,
-                    x: (startPositions.get(d.id)?.x ?? d.x) + deltaX,
-                    y: (startPositions.get(d.id)?.y ?? d.y) + deltaY,
-                } : d));
+                setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id)
+                    ? {
+                        ...t,
+                        x: (startPositions.get(t.id)?.x ?? t.x) + deltaX,
+                        y: (startPositions.get(t.id)?.y ?? t.y) + deltaY,
+                    }
+                    : t));
+                setLocalDocuments((prev) => prev.map((d) => itemIds.includes(d.id)
+                    ? {
+                        ...d,
+                        x: (startPositions.get(d.id)?.x ?? d.x) + deltaX,
+                        y: (startPositions.get(d.id)?.y ?? d.y) + deltaY,
+                    }
+                    : d));
                 // 7. Sync Fabric Objects (Imperative update for performance)
                 canvasObjectsStartPos.forEach((startPos, obj) => {
                     obj.set({
@@ -355,6 +358,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 canvas.requestRenderAll();
             });
         };
+        // Issue 4: Use refs for always-current values
         const handleEnd = () => {
             if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
@@ -363,8 +367,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
             document.body.style.touchAction = "";
-            onTasksUpdate?.(localTasks);
-            onDocumentsUpdate?.(localDocuments);
+            onTasksUpdate?.(localTasksRef.current);
+            onDocumentsUpdate?.(localDocumentsRef.current);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);
@@ -378,7 +382,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             window.removeEventListener("touchend", handleEnd);
             window.removeEventListener("touchcancel", handleEnd);
         };
-    }, [dragging, localTasks, localDocuments, fabricCanvas]);
+    }, [dragging, fabricCanvas]); // Issue 3: removed localTasks/localDocuments
     // ── Selection, Status, Keyboard Logic ────────────────────────────────────────
     const handleSelect = (id, e) => {
         if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
@@ -393,29 +397,36 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         }
     };
     const handleStatusChange = (taskId, newStatus) => {
-        const updated = localTasks.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t));
+        const updated = localTasksRef.current.map((t) => t.id === taskId ? { ...t, status: newStatus } : t);
         setLocalTasks(updated);
         onTasksUpdate?.(updated);
     };
+    // Issue 9: Use refs and only depend on stable callbacks
     useEffect(() => {
         const handleKeyDown = (e) => {
             // Don't trigger if typing in input
-            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
+            if (e.target instanceof HTMLInputElement ||
+                e.target instanceof HTMLTextAreaElement)
                 return;
             // Select All
             if ((e.ctrlKey || e.metaKey) && e.key === "a") {
                 e.preventDefault();
-                setSelectedIds(new Set([...localTasks.map((t) => t.id), ...localDocuments.map((d) => d.id)]));
+                setSelectedIds(new Set([
+                    ...localTasksRef.current.map((t) => t.id),
+                    ...localDocumentsRef.current.map((d) => d.id),
+                ]));
             }
             // Clear selection
             if (e.key === "Escape") {
                 setSelectedIds(new Set());
             }
-            // ← ADD THIS: Delete selected nodes
-            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
+            // Delete selected nodes
+            if ((e.key === "Delete" || e.key === "Backspace") &&
+                selectedIdsRef.current.size > 0) {
                 e.preventDefault();
-                const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
-                const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
+                const sel = selectedIdsRef.current;
+                const updatedTasks = localTasksRef.current.filter((t) => !sel.has(t.id));
+                const updatedDocs = localDocumentsRef.current.filter((d) => !sel.has(d.id));
                 setLocalTasks(updatedTasks);
                 setLocalDocuments(updatedDocs);
                 setSelectedIds(new Set());
@@ -425,14 +436,12 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
+    }, [onTasksUpdate, onDocumentsUpdate]); // Issue 9: only stable callbacks
     // ── Render helper ────────────────────────────────────────────────────────────
     const renderItem = (id, x, y, children) => {
         const screenX = x * canvasZoom;
         const screenY = y * canvasZoom;
         // 1. Detect if the user is interacting with the canvas at all
-        // 'dragging' is your existing state. 
-        // You might want to pass 'isZooming' or 'isPanning' from your main canvas component here.
         const isDragging = dragging?.itemIds.includes(id);
         return (_jsx("div", { className: "pointer-events-auto absolute", style: {
                 left: 0,
@@ -455,4 +464,19 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
                 transformOrigin: "top left",
             }, children: [localTasks.map((task) => renderItem(task.id, task.x, task.y, _jsx(TaskNode, { ...task, isSelected: selectedIds.has(task.id), onSelect: handleSelect, onDragStart: handleDragStart, onStatusChange: handleStatusChange, zoom: 1 }))), localDocuments.map((doc) => renderItem(doc.id, doc.x, doc.y, _jsx(DocumentNode, { ...doc, isSelected: selectedIds.has(doc.id), onSelect: handleSelect, onDragStart: handleDragStart })))] }) }));
-}
+}, (prev, next) => {
+    // Custom comparator — skip re-render if props are equal
+    // Return true to skip re-render, false to re-render
+    return (prev.tasks === next.tasks &&
+        prev.documents === next.documents &&
+        prev.canvasZoom === next.canvasZoom &&
+        prev.canvasViewport?.x === next.canvasViewport?.x &&
+        prev.canvasViewport?.y === next.canvasViewport?.y &&
+        prev.selectionBox === next.selectionBox &&
+        prev.selectedCanvasObjects === next.selectedCanvasObjects &&
+        prev.onTasksUpdate === next.onTasksUpdate &&
+        prev.onDocumentsUpdate === next.onDocumentsUpdate &&
+        prev.canvasReady === next.canvasReady
+    // fabricCanvas ref intentionally omitted — it's stable and doesn't need comparison
+    );
+});

package/dist/components/toolbar/tooloptions-panel.d.ts

@@ -1,8 +1,8 @@
-import { RefObject } from "react";
+import React, { RefObject } from "react";
 import fabric from "fabric";
 interface ToolOptionsPanelProps {
     fabricCanvas: RefObject<fabric.Canvas | null>;
 }
-export default function ToolOptionsPanel({ fabricCanvas, }: ToolOptionsPanelProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const _default: React.NamedExoticComponent<ToolOptionsPanelProps>;
+export default _default;
 //# sourceMappingURL=tooloptions-panel.d.ts.map

package/dist/components/toolbar/tooloptions-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooloptions-panel.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/tooloptions-panel.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,SAAS,EAAgC,MAAM,OAAO,CAAC;AAUvE,OAAO,MAA2C,MAAM,QAAQ,CAAC;AAIjE,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,YAAY,GACb,EAAE,qBAAqB,2CA0MvB"}
+{"version":3,"file":"tooloptions-panel.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/tooloptions-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA6C,MAAM,OAAO,CAAC;AAUpF,OAAO,MAA4C,MAAM,QAAQ,CAAC;AAIlE,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;;AAWD,wBA2PG"}

package/dist/components/toolbar/tooloptions-panel.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, useCallback } from "react";
 import { cn } from "../../lib/utils";
 import { useWhiteboardStore } from "../../store/whiteboard-store";
 import PenOptions from "./options/pen-option";
@@ -12,13 +12,21 @@ import ArrowOptions from "./options/arrow-options";
 import { Rect, Circle, IText } from "fabric";
 import { Settings2, ChevronDown } from "lucide-react";
 import LayerControls from "./layers-control";
-export default function ToolOptionsPanel({ fabricCanvas, }) {
+// ── Memoized child components ─────────────────────────────────────────────────
+const MemoizedPenOptions = React.memo(PenOptions);
+const MemoizedShapeOptions = React.memo(ShapeOptions);
+const MemoizedTextOptions = React.memo(TextOptions);
+const MemoizedImageOptions = React.memo(ImageOptions);
+const MemoizedLineOptions = React.memo(LineOptions);
+const MemoizedArrowOptions = React.memo(ArrowOptions);
+const MemoizedLayerControls = React.memo(LayerControls);
+export default React.memo(function ToolOptionsPanel({ fabricCanvas, }) {
     const activeTool = useWhiteboardStore((state) => state.activeTool);
     const selectedObjectType = useWhiteboardStore((state) => state.selectedObjectType);
     const toolOptions = useWhiteboardStore((state) => state.toolOptions);
     const [isMobileExpanded, setIsMobileExpanded] = useState(false);
     const displayTool = selectedObjectType || activeTool;
-    // Real-time fabric updates
+    // ── Real-time fabric updates ──────────────────────────────────────────────────
     useEffect(() => {
         const canvas = fabricCanvas.current;
         if (!canvas)
@@ -57,21 +65,43 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
         }
         canvas.renderAll();
     }, [toolOptions, selectedObjectType, fabricCanvas]);
-    const toolsWithoutOptions = ["select", "pan", "undo", "redo", "eraser"];
+    // ── Memoized constants ────────────────────────────────────────────────────────
+    const toolsWithoutOptions = useMemo(() => ["select", "pan", "undo", "redo", "eraser"], []);
     const isOpen = useMemo(() => {
         const target = selectedObjectType || activeTool;
         return target && !toolsWithoutOptions.includes(target);
-    }, [activeTool, selectedObjectType]);
+    }, [activeTool, selectedObjectType, toolsWithoutOptions]);
+    // ── Auto-collapse mobile panel when tool changes ───────────────────────────────
     useEffect(() => {
         if (!isOpen) {
             setIsMobileExpanded(false);
         }
     }, [isOpen]);
-    return (_jsxs(_Fragment, { children: [_jsxs("aside", { className: cn("hidden md:flex", "absolute left-4 top-1/2 -translate-y-1/2 z-40", "flex-col", "w-64 max-h-[85vh]", "bg-[#1A1A1E]/90 backdrop-blur-xl", "border border-white/10", "shadow-[0_20px_50px_rgba(0,0,0,0.5)]", "rounded-[24px]", "transition-all duration-500 cubic-bezier(0.16, 1, 0.3, 1)", isOpen
-                    ? "translate-x-0 opacity-100 visible scale-100"
-                    : "-translate-x-12 opacity-0 invisible scale-95 pointer-events-none"), children: [_jsx("div", { className: "absolute -left-[1px] top-1/2 -translate-y-1/2 w-[3px] h-12 bg-[#029AFF] rounded-r-full shadow-[0_0_15px_#029AFF]" }), _jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-white/5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "w-4 h-4 text-[#029AFF]" }), _jsx("h3", { className: "text-[11px] font-bold uppercase tracking-[0.1em] text-neutral-400", children: "Properties" })] }), _jsx("div", { className: "text-[10px] px-2 py-0.5 rounded-full bg-white/5 text-white/40 border border-white/5", children: displayTool })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-5 custom-scrollbar scroll-smooth", children: _jsxs("div", { className: "space-y-6 text-neutral-200", children: [displayTool === "pen" && _jsx(PenOptions, {}), (displayTool === "rectangle" || displayTool === "circle" || displayTool === "frame") && (_jsx(ShapeOptions, { shapeType: displayTool })), displayTool === "text" && _jsx(TextOptions, {}), displayTool === "image" && _jsx(ImageOptions, {}), displayTool === "line" && _jsx(LineOptions, {}), displayTool === "arrow" && _jsx(ArrowOptions, { fabricCanvas: fabricCanvas }), selectedObjectType && (_jsx(LayerControls, { fabricCanvas: fabricCanvas }))] }) }), _jsx("div", { className: "p-3 flex justify-center", children: _jsx("div", { className: "w-8 h-1 rounded-full bg-white/10" }) })] }), isOpen && (_jsxs("div", { className: cn("md:hidden", "fixed left-3 top-4 z-40", // Positioned Top-Left to stay clear of Top-Right zoom
-                "w-[calc(100%-80px)] max-w-[180px]", // Leave room on the right to tap canvas
-                "bg-[#1A1A1E]/95 backdrop-blur-xl", "border border-white/10", "rounded-2xl shadow-2xl", "transition-all duration-300 ease-in-out", isMobileExpanded ? "max-h-[70vh]" : "h-[48px]"), children: [_jsxs("div", { className: "flex items-center justify-between px-4 h-[48px] cursor-pointer", onClick: () => setIsMobileExpanded(!isMobileExpanded), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "w-4 h-4 text-[#029AFF]" }), _jsxs("span", { className: "text-[10px] font-bold uppercase tracking-wider text-neutral-300", children: [displayTool, " Settings"] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: cn("transition-transform duration-300", isMobileExpanded ? "rotate-180" : "rotate-0"), children: _jsx(ChevronDown, { className: "w-4 h-4 text-white/50" }) }) })] }), _jsx("div", { className: cn("overflow-hidden transition-all duration-300", isMobileExpanded ? "opacity-100 h-auto" : "opacity-0 h-0"), children: _jsxs("div", { className: "px-4 pb-5 pt-2 space-y-4 overflow-y-auto max-h-[60vh] custom-scrollbar", children: [_jsx("div", { className: "h-[1px] w-full bg-white/5 mb-4" }), displayTool === "pen" && _jsx(PenOptions, {}), (displayTool === "rectangle" || displayTool === "circle" || displayTool === "frame") && (_jsx(ShapeOptions, { shapeType: displayTool })), displayTool === "text" && _jsx(TextOptions, {}), displayTool === "image" && _jsx(ImageOptions, {}), displayTool === "line" && _jsx(LineOptions, {}), displayTool === "arrow" && _jsx(ArrowOptions, { fabricCanvas: fabricCanvas })] }) })] })), _jsx("style", { children: `
+    // ── Memoized handlers ─────────────────────────────────────────────────────────
+    const handleMobileToggle = useCallback(() => {
+        setIsMobileExpanded((prev) => !prev);
+    }, []);
+    // ── Memoized desktop sidebar content ──────────────────────────────────────────
+    const desktopContent = useMemo(() => {
+        return (_jsxs("div", { className: "space-y-6 text-neutral-200", children: [displayTool === "pen" && _jsx(MemoizedPenOptions, {}), (displayTool === "rectangle" || displayTool === "circle" || displayTool === "frame") && (_jsx(MemoizedShapeOptions, { shapeType: displayTool })), displayTool === "text" && _jsx(MemoizedTextOptions, {}), displayTool === "image" && _jsx(MemoizedImageOptions, {}), displayTool === "line" && _jsx(MemoizedLineOptions, {}), displayTool === "arrow" && _jsx(MemoizedArrowOptions, { fabricCanvas: fabricCanvas }), selectedObjectType && _jsx(MemoizedLayerControls, { fabricCanvas: fabricCanvas })] }));
+    }, [displayTool, selectedObjectType, fabricCanvas]);
+    // ── Memoized mobile content ───────────────────────────────────────────────────
+    const mobileContent = useMemo(() => {
+        return (_jsxs("div", { className: "px-4 pb-5 pt-2 space-y-4 overflow-y-auto max-h-[60vh] custom-scrollbar", children: [_jsx("div", { className: "h-[1px] w-full bg-white/5 mb-4" }), displayTool === "pen" && _jsx(MemoizedPenOptions, {}), (displayTool === "rectangle" || displayTool === "circle" || displayTool === "frame") && (_jsx(MemoizedShapeOptions, { shapeType: displayTool })), displayTool === "text" && _jsx(MemoizedTextOptions, {}), displayTool === "image" && _jsx(MemoizedImageOptions, {}), displayTool === "line" && _jsx(MemoizedLineOptions, {}), displayTool === "arrow" && _jsx(MemoizedArrowOptions, { fabricCanvas: fabricCanvas })] }));
+    }, [displayTool, fabricCanvas]);
+    // ── Memoized desktop header ───────────────────────────────────────────────────
+    const desktopHeader = useMemo(() => (_jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-white/5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "w-4 h-4 text-[#029AFF]" }), _jsx("h3", { className: "text-[11px] font-bold uppercase tracking-[0.1em] text-neutral-400", children: "Properties" })] }), _jsx("div", { className: "text-[10px] px-2 py-0.5 rounded-full bg-white/5 text-white/40 border border-white/5", children: displayTool })] })), [displayTool]);
+    // ── Memoized mobile header ────────────────────────────────────────────────────
+    const mobileHeader = useMemo(() => (_jsxs("div", { className: "flex items-center justify-between px-4 h-[48px] cursor-pointer", onClick: handleMobileToggle, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "w-4 h-4 text-[#029AFF]" }), _jsxs("span", { className: "text-[10px] font-bold uppercase tracking-wider text-neutral-300", children: [displayTool, " Settings"] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: cn("transition-transform duration-300", isMobileExpanded ? "rotate-180" : "rotate-0"), children: _jsx(ChevronDown, { className: "w-4 h-4 text-white/50" }) }) })] })), [displayTool, isMobileExpanded, handleMobileToggle]);
+    // ── Memoized desktop sidebar classes ──────────────────────────────────────────
+    const desktopSidebarClasses = useMemo(() => cn("hidden md:flex", "absolute left-4 top-1/2 -translate-y-1/2 z-40", "flex-col", "w-64 max-h-[85vh]", "bg-[#1A1A1E]/90 backdrop-blur-xl", "border border-white/10", "shadow-[0_20px_50px_rgba(0,0,0,0.5)]", "rounded-[24px]", "transition-all duration-500 cubic-bezier(0.16, 1, 0.3, 1)", isOpen
+        ? "translate-x-0 opacity-100 visible scale-100"
+        : "-translate-x-12 opacity-0 invisible scale-95 pointer-events-none"), [isOpen]);
+    // ── Memoized mobile panel classes ─────────────────────────────────────────────
+    const mobilePanelClasses = useMemo(() => cn("md:hidden", "fixed left-3 top-4 z-40", "w-[calc(100%-80px)] max-w-[180px]", "bg-[#1A1A1E]/95 backdrop-blur-xl", "border border-white/10", "rounded-2xl shadow-2xl", "transition-all duration-300 ease-in-out", isMobileExpanded ? "max-h-[70vh]" : "h-[48px]"), [isMobileExpanded]);
+    // ── Memoized mobile content container classes ─────────────────────────────────
+    const mobileContentClasses = useMemo(() => cn("overflow-hidden transition-all duration-300", isMobileExpanded ? "opacity-100 h-auto" : "opacity-0 h-0"), [isMobileExpanded]);
+    return (_jsxs(_Fragment, { children: [_jsxs("aside", { className: desktopSidebarClasses, children: [_jsx("div", { className: "absolute -left-[1px] top-1/2 -translate-y-1/2 w-[3px] h-12 bg-[#029AFF] rounded-r-full shadow-[0_0_15px_#029AFF]" }), desktopHeader, _jsx("div", { className: "flex-1 overflow-y-auto p-5 custom-scrollbar scroll-smooth", children: desktopContent }), _jsx("div", { className: "p-3 flex justify-center", children: _jsx("div", { className: "w-8 h-1 rounded-full bg-white/10" }) })] }), isOpen && (_jsxs("div", { className: mobilePanelClasses, children: [mobileHeader, _jsx("div", { className: mobileContentClasses, children: mobileContent })] })), _jsx("style", { children: `
         .custom-scrollbar::-webkit-scrollbar {
           width: 4px;
         }
@@ -86,4 +116,8 @@ export default function ToolOptionsPanel({ fabricCanvas, }) {
           background: #029AFF;
         }
       ` })] }));
-}
+}, (prev, next) => {
+    // Custom comparator for React.memo
+    // Return true to skip re-render, false to re-render
+    return prev.fabricCanvas === next.fabricCanvas;
+});

package/dist/components/toolbar/whiteboard-toolbar.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import React, { MutableRefObject } from "react";
 import { Canvas } from "fabric";
 interface TaskTemplate {
     id: string;
@@ -26,6 +26,6 @@ interface WhiteboardToolbarProps {
     availableDocuments?: DocumentTemplate[];
     isLoadingData?: boolean;
 }
-export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddTask, onAddDocument, availableTasks, availableDocuments, isLoadingData }: WhiteboardToolbarProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const _default: React.NamedExoticComponent<WhiteboardToolbarProps>;
+export default _default;
 //# sourceMappingURL=whiteboard-toolbar.d.ts.map

package/dist/components/toolbar/whiteboard-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/whiteboard-toolbar.tsx"],"names":[],"mappings":"AAEA,OAAa,EAAqB,gBAAgB,EAAY,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAOtC,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC7F;AACD,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5D;AAkBD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,cAAc,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAGhD,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;CAEzB;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,cAAmB,EACrH,kBAAuB,EAAE,aAAmB,EAAE,EAAE,sBAAsB,2CAkMvE"}
+{"version":3,"file":"whiteboard-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/whiteboard-toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAqB,gBAAgB,EAAkC,MAAM,OAAO,CAAC;AAKnG,OAAO,EAAE,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAQtC,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,cAAc,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;;AAUD,wBA2SG"}

package/dist/components/toolbar/whiteboard-toolbar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { MousePointer2, Pencil, Square, Circle, Minus, MoveRight, Type, Eraser, Hand, Frame, Undo2, Redo2, Image as ImageIcon, } from "lucide-react";
 import { util } from "fabric";
 import { useWhiteboardStore } from "../../store/whiteboard-store";
@@ -24,7 +24,13 @@ const TOOLS = [
     { id: "undo", icon: Undo2, label: "Undo", shortcut: "⌘Z", category: "history" },
     { id: "redo", icon: Redo2, label: "Redo", shortcut: "⌘⇧Z", category: "history" },
 ];
-export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddTask, onAddDocument, availableTasks = [], availableDocuments = [], isLoadingData = false }) {
+// ── Memoized ToolButton wrapper ───────────────────────────────────────────────
+const MemoizedToolButton = React.memo(ToolButton);
+const MemoizedToolbarSeparator = React.memo(ToolbarSeparator);
+const MemoizedTaskDropdown = React.memo(TaskDropdown);
+const MemoizedDocumentDropdown = React.memo(DocumentDropdown);
+// ── Main Component ────────────────────────────────────────────────────────────
+export default React.memo(function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddTask, onAddDocument, availableTasks = [], availableDocuments = [], isLoadingData = false, }) {
     const activeTool = useWhiteboardStore((s) => s.activeTool);
     const setActiveTool = useWhiteboardStore((s) => s.setActiveTool);
     const canUndo = useWhiteboardStore((s) => s.canUndo);
@@ -32,53 +38,33 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
     const undo = useWhiteboardStore((s) => s.undo);
     const redo = useWhiteboardStore((s) => s.redo);
     const scrollRef = useRef(null);
-    const [scrollPosition, setScrollPosition] = useState(0);
     const fileInputRef = useRef(null);
-    const handleScroll = () => {
+    const [scrollPosition, setScrollPosition] = useState(0);
+    // ── Memoized callbacks ────────────────────────────────────────────────────────
+    const handleScroll = useCallback(() => {
         if (scrollRef.current) {
             const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
             const position = scrollLeft / (scrollWidth - clientWidth);
             setScrollPosition(position);
         }
-    };
-    // fade out and remove the welcome hero when user selects a tool for the first time
-    useEffect(() => {
-        const canvas = fabricCanvas.current;
-        // If the user selects something other than the default 'select' tool
-        if (!canvas || activeTool === "select")
-            return;
-        const hero = canvas.getObjects().find((obj) => obj.id === "welcome-hero");
-        if (hero) {
-            hero.animate({
-                opacity: 0,
-                top: (hero.top || 0) - 20 // Subtle "lift" animation on exit
-            }, {
-                duration: 500,
-                easing: util.ease.easeInQuad,
-                onChange: () => canvas.requestRenderAll(),
-                onComplete: () => {
-                    canvas.remove(hero);
-                    canvas.requestRenderAll();
-                },
-            });
-        }
-    }, [activeTool]);
-    // ── Restore helper ───────────────────────────────────────────────────────────
-    // Sets isRestoringRef=true BEFORE loadFromJSON so that the object:added events
-    // fired during restore do NOT push new entries onto the history stack.
-    // Without this, undo corrupts the stack and redo breaks permanently.
-    const restoreCanvas = (canvas, json) => {
-        isRestoringRef.current = true; // ← block saveState during restore
+    }, []);
+    // ── Restore helper (memoized) ─────────────────────────────────────────────────
+    const restoreCanvas = useCallback((canvas, json) => {
+        isRestoringRef.current = true;
         canvas.loadFromJSON(JSON.parse(json)).then(() => {
             canvas.isDrawingMode = false;
             canvas.selection = true;
-            canvas.forEachObject((obj) => { obj.selectable = true; obj.evented = true; });
+            canvas.forEachObject((obj) => {
+                obj.selectable = true;
+                obj.evented = true;
+            });
             canvas.renderAll();
             setActiveTool("select");
-            isRestoringRef.current = false; // ← re-enable saveState after restore done
+            isRestoringRef.current = false;
         });
-    };
-    const handleToolClick = (toolId) => {
+    }, [setActiveTool, isRestoringRef]);
+    // ── Handle tool click (memoized) ──────────────────────────────────────────────
+    const handleToolClick = useCallback((toolId) => {
         const canvas = fabricCanvas.current;
         if (!canvas)
             return;
@@ -101,8 +87,9 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
             return;
         }
         setActiveTool(toolId);
-    };
-    const handleImageUpload = (e) => {
+    }, [fabricCanvas, undo, redo, restoreCanvas, setActiveTool]);
+    // ── Handle image upload (memoized) ────────────────────────────────────────────
+    const handleImageUpload = useCallback((e) => {
         const file = e.target.files?.[0];
         if (!file || !file.type.startsWith("image/"))
             return;
@@ -110,19 +97,56 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
         if (!canvas)
             return;
         const reader = new FileReader();
-        reader.onload = (ev) => { const url = ev.target?.result; if (url)
-            addImageToCanvas(canvas, url); };
+        reader.onload = (ev) => {
+            const url = ev.target?.result;
+            if (url)
+                addImageToCanvas(canvas, url);
+        };
         reader.readAsDataURL(file);
         e.target.value = "";
-    };
-    // Keyboard shortcuts
+    }, [fabricCanvas]);
+    // ── Hero animation effect ─────────────────────────────────────────────────────
+    useEffect(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas || activeTool === "select")
+            return;
+        const hero = canvas.getObjects().find((obj) => obj.id === "welcome-hero");
+        if (hero) {
+            hero.animate({
+                opacity: 0,
+                top: (hero.top || 0) - 20,
+            }, {
+                duration: 500,
+                easing: util.ease.easeInQuad,
+                onChange: () => canvas.requestRenderAll(),
+                onComplete: () => {
+                    canvas.remove(hero);
+                    canvas.requestRenderAll();
+                },
+            });
+        }
+    }, [activeTool, fabricCanvas]);
+    // ── Keyboard shortcuts effect ─────────────────────────────────────────────────
     useEffect(() => {
         const onKey = (e) => {
-            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
+            if (e.target instanceof HTMLInputElement ||
+                e.target instanceof HTMLTextAreaElement)
                 return;
             const key = e.key.toLowerCase();
             const ctrl = e.ctrlKey || e.metaKey;
-            const shortcuts = { v: "select", h: "pan", p: "pen", r: "rectangle", c: "circle", f: "frame", l: "line", a: "arrow", t: "text", i: "image", e: "eraser" };
+            const shortcuts = {
+                v: "select",
+                h: "pan",
+                p: "pen",
+                r: "rectangle",
+                c: "circle",
+                f: "frame",
+                l: "line",
+                a: "arrow",
+                t: "text",
+                i: "image",
+                e: "eraser",
+            };
             if (shortcuts[key] && !ctrl) {
                 e.preventDefault();
                 handleToolClick(shortcuts[key]);
@@ -148,8 +172,14 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
         };
         window.addEventListener("keydown", onKey);
         return () => window.removeEventListener("keydown", onKey);
-    }, [canUndo, canRedo, activeTool]);
-    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden" }), _jsxs("div", { className: "fixed bottom-4 md:bottom-6 left-0 right-0 z-50 flex flex-col items-center gap-2 px-4 pointer-events-none", children: [_jsxs("div", { className: "relative w-full md:w-auto max-w-full pointer-events-auto", children: [_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-[#0b0b0b] to-transparent  pointer-events-none z-10 md:hidden rounded-l-2xl" }), _jsx("div", { className: "absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-[#0b0b0b] to-transparent pointer-events-none z-10 md:hidden rounded-r-2xl" }), _jsxs("div", { ref: scrollRef, onScroll: handleScroll, className: "flex items-center gap-1 px-2 py-2 bg-black/95 backdrop-blur-md border border-[#A1A1A1] rounded-2xl shadow-2xl overflow-x-auto md:overflow-x-visible snap-x snap-mandatory md:snap-none scrollbar-hide scroll-smooth", children: [TOOLS.map((tool, index) => (_jsxs("div", { className: "flex items-center snap-center", children: [_jsx(ToolButton, { icon: tool.icon, label: tool.label, isActive: activeTool === tool.id, onClick: () => handleToolClick(tool.id), disabled: (tool.id === "undo" && !canUndo) || (tool.id === "redo" && !canRedo), shortcut: tool.shortcut }), (index === 1 || index === 9) && (_jsx("div", { className: "hidden md:block mx-1", children: _jsx(ToolbarSeparator, {}) }))] }, tool.id))), (onAddTask || onAddDocument) && (_jsxs("div", { className: "flex items-center gap-1 snap-center pr-2", children: [_jsx("div", { className: "mx-1 flex-shrink-0", children: _jsx(ToolbarSeparator, {}) }), onAddTask && _jsx(TaskDropdown, { onAddTask: onAddTask, availableTasks: availableTasks }), onAddDocument && _jsx(DocumentDropdown, { onAddDocument: onAddDocument, availableDocuments: availableDocuments })] }))] })] }), _jsxs("div", { className: "flex gap-1.5 md:hidden", children: [_jsx("div", { className: `w-1.5 h-1.5 rounded-full transition-all duration-300 ${scrollPosition < 0.5 ? "bg-white w-6" : "bg-white/30"}` }), _jsx("div", { className: `w-1.5 h-1.5 rounded-full transition-all duration-300 ${scrollPosition >= 0.5 ? "bg-white w-6" : "bg-white/30"}` })] })] }), _jsx("style", { children: `
+    }, [fabricCanvas, activeTool, handleToolClick]);
+    // ── Memoized tool buttons ─────────────────────────────────────────────────────
+    const toolButtons = useMemo(() => TOOLS.map((tool, index) => (_jsxs("div", { className: "flex items-center snap-center", children: [_jsx(MemoizedToolButton, { icon: tool.icon, label: tool.label, isActive: activeTool === tool.id, onClick: () => handleToolClick(tool.id), disabled: (tool.id === "undo" && !canUndo) || (tool.id === "redo" && !canRedo), shortcut: tool.shortcut }), (index === 1 || index === 9) && (_jsx("div", { className: "hidden md:block mx-1", children: _jsx(MemoizedToolbarSeparator, {}) }))] }, tool.id))), [activeTool, canUndo, canRedo, handleToolClick]);
+    // ── Memoized dropdown section ─────────────────────────────────────────────────
+    const dropdownSection = useMemo(() => (onAddTask || onAddDocument) && (_jsxs("div", { className: "flex items-center gap-1 snap-center pr-2", children: [_jsx("div", { className: "mx-1 flex-shrink-0", children: _jsx(MemoizedToolbarSeparator, {}) }), onAddTask && (_jsx(MemoizedTaskDropdown, { onAddTask: onAddTask, availableTasks: availableTasks })), onAddDocument && (_jsx(MemoizedDocumentDropdown, { onAddDocument: onAddDocument, availableDocuments: availableDocuments }))] })), [onAddTask, onAddDocument, availableTasks, availableDocuments]);
+    // ── Scroll indicator visibility ───────────────────────────────────────────────
+    const scrollIndicators = useMemo(() => (_jsxs("div", { className: "flex gap-1.5 md:hidden", children: [_jsx("div", { className: `w-1.5 h-1.5 rounded-full transition-all duration-300 ${scrollPosition < 0.5 ? "bg-white w-6" : "bg-white/30"}` }), _jsx("div", { className: `w-1.5 h-1.5 rounded-full transition-all duration-300 ${scrollPosition >= 0.5 ? "bg-white w-6" : "bg-white/30"}` })] })), [scrollPosition]);
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden" }), _jsxs("div", { className: "fixed bottom-4 md:bottom-6 left-0 right-0 z-50 flex flex-col items-center gap-2 px-4 pointer-events-none", children: [_jsxs("div", { className: "relative w-full md:w-auto max-w-full pointer-events-auto", children: [_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-[#0b0b0b] to-transparent pointer-events-none z-10 md:hidden rounded-l-2xl" }), _jsx("div", { className: "absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-[#0b0b0b] to-transparent pointer-events-none z-10 md:hidden rounded-r-2xl" }), _jsxs("div", { ref: scrollRef, onScroll: handleScroll, className: "flex items-center gap-1 px-2 py-2 bg-black/95 backdrop-blur-md border border-[#A1A1A1] rounded-2xl shadow-2xl overflow-x-auto md:overflow-x-visible snap-x snap-mandatory md:snap-none scrollbar-hide scroll-smooth", children: [toolButtons, dropdownSection] })] }), scrollIndicators] }), _jsx("style", { children: `
         .scrollbar-hide::-webkit-scrollbar { display: none; }
         .scrollbar-hide { 
           -ms-overflow-style: none; 
@@ -157,4 +187,14 @@ export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddT
           -webkit-overflow-scrolling: touch;
         }
       ` })] }));
-}
+}, (prev, next) => {
+    // Custom comparator for React.memo
+    // Return true to skip re-render, false to re-render
+    return (prev.fabricCanvas === next.fabricCanvas &&
+        prev.isRestoringRef === next.isRestoringRef &&
+        prev.onAddTask === next.onAddTask &&
+        prev.onAddDocument === next.onAddDocument &&
+        prev.availableTasks === next.availableTasks &&
+        prev.availableDocuments === next.availableDocuments &&
+        prev.isLoadingData === next.isLoadingData);
+});

package/dist/components/whiteboard/whiteboard-test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;KACxB,CAAC;IACF,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,SAAS,EAAE,GAAG,EAAE,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CA4PvB"}
+{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;KACxB,CAAC;IACF,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,SAAS,EAAE,GAAG,EAAE,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA2HD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CAiRvB"}

package/dist/components/whiteboard/whiteboard-test.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { classRegistry } from "fabric";
 import { useWhiteboardStore } from "../../store/whiteboard-store";
 import WhiteboardToolbar from "../toolbar/whiteboard-toolbar";
@@ -23,6 +23,54 @@ import { usePersistence } from "../../hooks/usePersistance";
 import { ToolbarSkeleton } from "../toolbar/toolbar-skeleton/toolbar-skeleton";
 import { useCopyPaste } from "../../hooks/useCopyPaste";
 classRegistry.setClass(Frame, "frame");
+// ── Memoized Toolbar wrapper (Issue 10) ───────────────────────────────────────
+const MemoizedToolbarWrapper = React.memo(function ToolbarWrapper({ canvasReady, fabricCanvasRef, isRestoringRef, onAddTask, onAddDocument, availableDocuments, availableTasks, isLoadingData, }) {
+    return canvasReady ? (_jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: onAddTask, onAddDocument: onAddDocument, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData })) : (_jsx(ToolbarSkeleton, {}));
+});
+// ── Memoized Overlay wrapper (Issue 11) ───────────────────────────────────────
+// This wrapper only updates when tasks/documents/canvasReady change
+// Not on every pan/zoom frame
+const MemoizedOverlayWrapper = React.memo(function OverlayWrapper({ tasks, documents, canvasReady, fabricCanvasRef, onTasksUpdate, onDocumentsUpdate, }) {
+    // Issue 11: Read zoom/viewport directly from fabricCanvas instead of prop drilling
+    // This prevents re-renders on every pan/zoom frame
+    const [canvasZoom, setCanvasZoom] = useState(1);
+    const [canvasViewport, setCanvasViewport] = useState({ x: 0, y: 0 });
+    const [selectionBox, setSelectionBox] = useState(null);
+    const [selectedCanvasObjects, setSelectedCanvasObjects] = useState([]);
+    // Effect to sync zoom/viewport from fabric canvas
+    // This keeps the overlay in sync without prop drilling
+    React.useEffect(() => {
+        const canvas = fabricCanvasRef.current;
+        if (!canvas)
+            return;
+        const updateViewport = () => {
+            const vpt = canvas.viewportTransform;
+            if (!vpt)
+                return;
+            // Extract zoom (scale) from viewport transform
+            const zoom = vpt[0];
+            const vpX = vpt[4];
+            const vpY = vpt[5];
+            setCanvasZoom(zoom);
+            setCanvasViewport({ x: vpX, y: vpY });
+        };
+        // Update on viewport change
+        canvas.on("viewport:changed", updateViewport);
+        updateViewport(); // Initial sync
+        return () => {
+            canvas.off("viewport:changed", updateViewport);
+        };
+    }, [fabricCanvasRef, canvasReady]);
+    return (_jsx(CanvasOverlayLayer, { tasks: tasks, documents: documents, onTasksUpdate: onTasksUpdate, onDocumentsUpdate: onDocumentsUpdate, canvasZoom: canvasZoom, canvasViewport: canvasViewport, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects, fabricCanvas: fabricCanvasRef, canvasReady: canvasReady }));
+}, (prev, next) => {
+    // Custom comparator — only re-render if these props change
+    return (prev.tasks === next.tasks &&
+        prev.documents === next.documents &&
+        prev.canvasReady === next.canvasReady &&
+        prev.fabricCanvasRef === next.fabricCanvasRef &&
+        prev.onTasksUpdate === next.onTasksUpdate &&
+        prev.onDocumentsUpdate === next.onDocumentsUpdate);
+});
 export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs, availableTasks = [], availableDocuments = [], isLoadingData = false, }) {
     // Refs
     const canvasRef = useRef(null);
@@ -48,14 +96,10 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
     const [tasks, setTasks] = useState([]);
     const [canvasReady, setCanvasReady] = useState(false);
     const [documents, setDocuments] = useState([]);
-    const [canvasZoom, setCanvasZoom] = useState(1);
-    const [canvasViewport, setCanvasViewport] = useState({ x: 0, y: 0 });
-    const [selectionBox, setSelectionBox] = useState(null);
-    const [selectedCanvasObjects, setSelectedCanvasObjects] = useState([]);
     const MIN_ZOOM = 0.1;
     const MAX_ZOOM = 5;
     const ZOOM_STEP = 0.1;
-    // CHANGE 2: Pass initialData to useCanvasInit (replaces localStorage.getItem)
+    // Initialize canvas
     useCanvasInit({
         canvasRef,
         fabricCanvasRef,
@@ -68,7 +112,7 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
         initialData,
         onReady: () => setCanvasReady(true),
     });
-    // CHANGE 3: Pass onSave and saveDebounceMs to usePersistence (replaces localStorage.setItem)
+    // Persistence
     usePersistence({
         fabricCanvas: fabricCanvasRef,
         tasks,
@@ -121,26 +165,26 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
         fabricCanvas: fabricCanvasRef,
         MIN_ZOOM,
         MAX_ZOOM,
-        canvasZoom,
-        canvasViewport,
-        setCanvasZoom,
-        setCanvasViewport,
+        canvasZoom: 1, // Not used for state — just reference
+        canvasViewport: { x: 0, y: 0 },
+        setCanvasZoom: () => { }, // Not used anymore
+        setCanvasViewport: () => { }, // Not used anymore
     });
     // Pan
     usePan({
         fabricCanvas: fabricCanvasRef,
         activeTool,
         handleZoom,
-        setCanvasViewport,
+        setCanvasViewport: () => { }, // Not used anymore
     });
     // Selection
     useSelection({
         fabricCanvas: fabricCanvasRef,
         activeTool,
-        canvasZoom,
-        canvasViewport,
-        setSelectionBox,
-        setSelectedCanvasObjects,
+        canvasZoom: 1, // Read from canvas instead
+        canvasViewport: { x: 0, y: 0 },
+        setSelectionBox: () => { }, // Not used anymore
+        setSelectedCanvasObjects: () => { }, // Not used anymore
         isDrawingRef,
     });
     // Text style updates
@@ -161,7 +205,7 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
         drawingHandlers,
         eraserHandlers,
     });
-    // 1. Memoize static handlers
+    // ── Memoized static handlers ──────────────────────────────────────────────────
     const handleAddTaskFromDropdown = useCallback((taskTemplate) => {
         const canvas = fabricCanvasRef.current;
         if (!canvas)
@@ -172,7 +216,15 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
         const liveZoom = vpt[0];
         const cx = (canvas.getWidth() / 2 - vpt[4]) / liveZoom;
         const cy = (canvas.getHeight() / 2 - vpt[5]) / liveZoom;
-        setTasks((prev) => [...prev, { ...taskTemplate, id: `${taskTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 60 }]);
+        setTasks((prev) => [
+            ...prev,
+            {
+                ...taskTemplate,
+                id: `${taskTemplate.id}-${Date.now()}`,
+                x: cx - 150,
+                y: cy - 60,
+            },
+        ]);
     }, []);
     const handleAddDocumentFromDropdown = useCallback((docTemplate) => {
         const canvas = fabricCanvasRef.current;
@@ -184,18 +236,43 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
         const liveZoom = vpt[0];
         const cx = (canvas.getWidth() / 2 - vpt[4]) / liveZoom;
         const cy = (canvas.getHeight() / 2 - vpt[5]) / liveZoom;
-        setDocuments((prev) => [...prev, { ...docTemplate, id: `${docTemplate.id}-${Date.now()}`, x: cx - 160, y: cy - 80 }]);
+        setDocuments((prev) => [
+            ...prev,
+            {
+                ...docTemplate,
+                id: `${docTemplate.id}-${Date.now()}`,
+                x: cx - 160,
+                y: cy - 80,
+            },
+        ]);
     }, []);
-    const handleZoomIn = useCallback(() => handleZoom(canvasZoom + ZOOM_STEP), [canvasZoom, handleZoom]);
-    const handleZoomOut = useCallback(() => handleZoom(canvasZoom - ZOOM_STEP), [canvasZoom, handleZoom]);
-    const handleResetZoom = useCallback(() => handleZoom(1), [handleZoom]);
-    const MemoOverlay = useMemo(() => (_jsx(CanvasOverlayLayer, { tasks: tasks, documents: documents, onTasksUpdate: setTasks, onDocumentsUpdate: setDocuments, canvasZoom: canvasZoom, canvasViewport: canvasViewport, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects, fabricCanvas: fabricCanvasRef, canvasReady: canvasReady })), [tasks, documents, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, canvasReady]);
-    const MemoToolbar = useMemo(() => (canvasReady
-        ? _jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData })
-        : _jsx(ToolbarSkeleton, {})), [canvasReady, availableDocuments, availableTasks, isLoadingData, handleAddTaskFromDropdown, handleAddDocumentFromDropdown]);
+    // ── Zoom handlers (read from canvas directly) ────────────────────────────────
+    const handleZoomIn = useCallback(() => {
+        const canvas = fabricCanvasRef.current;
+        if (!canvas)
+            return;
+        const vpt = canvas.viewportTransform;
+        if (!vpt)
+            return;
+        const currentZoom = vpt[0];
+        handleZoom(currentZoom + ZOOM_STEP);
+    }, [handleZoom]);
+    const handleZoomOut = useCallback(() => {
+        const canvas = fabricCanvasRef.current;
+        if (!canvas)
+            return;
+        const vpt = canvas.viewportTransform;
+        if (!vpt)
+            return;
+        const currentZoom = vpt[0];
+        handleZoom(currentZoom - ZOOM_STEP);
+    }, [handleZoom]);
+    const handleResetZoom = useCallback(() => {
+        handleZoom(1);
+    }, [handleZoom]);
     return (_jsx("div", { className: "easyflow-whiteboard w-full h-full", children: _jsxs("div", { ref: containerRef, className: "relative w-full h-full overflow-hidden bg-[#0b0b0b]", style: { touchAction: "none", overscrollBehavior: "none" }, children: [_jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
                         backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.2) 1.2px, transparent 1.2px)`,
                         backgroundSize: "40px 40px",
                         zIndex: 0,
-                    } }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }), MemoOverlay, _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: MemoToolbar }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ToolOptionsPanel, { fabricCanvas: fabricCanvasRef }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ZoomControls, { zoom: canvasZoom, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onResetZoom: handleResetZoom }) })] })] }) }));
+                    } }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }), _jsx(MemoizedOverlayWrapper, { tasks: tasks, documents: documents, canvasReady: canvasReady, fabricCanvasRef: fabricCanvasRef, onTasksUpdate: setTasks, onDocumentsUpdate: setDocuments }), _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: _jsx(MemoizedToolbarWrapper, { canvasReady: canvasReady, fabricCanvasRef: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ToolOptionsPanel, { fabricCanvas: fabricCanvasRef }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ZoomControls, { zoom: 1, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onResetZoom: handleResetZoom }) })] })] }) }));
 }

package/dist/styles.css

@@ -333,6 +333,24 @@
   .z-\[100\] {
     z-index: 100;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }

package/package.json

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