@mhamz.01/easyflow-whiteboard 2.168.0 → 2.170.0

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

@@ -1,14 +1,11 @@
-interface TaskNodeProps {
-    id: string;
+import type { BaseNodeProps } from "./types/overlay-types";
+interface TaskNodeProps extends BaseNodeProps {
     title: string;
     status: "todo" | "in-progress" | "done";
     assignee?: string;
     project?: string;
     priority?: "low" | "medium" | "high";
     dueDate?: string;
-    isSelected?: boolean;
-    onSelect?: (id: string, e?: React.MouseEvent) => void;
-    onDragStart?: (id: string, e: React.MouseEvent | React.TouchEvent) => void;
     onStatusChange?: (id: string, newStatus: "todo" | "in-progress" | "done") => void;
     zoom?: number;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"custom-node.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node.tsx"],"names":[],"mappings":"AAYA,UAAU,aAAa;IACrB,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;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC3E,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,IAAQ,GACT,EAAE,aAAa,2CAgJf"}
+{"version":3,"file":"custom-node.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,aAAc,SAAQ,aAAa;IAC3C,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;IACjB,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,IAAQ,GACT,EAAE,aAAa,2CAoIf"}

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

@@ -14,35 +14,24 @@ export default function TaskNode({ id, title, status, assignee, project, priorit
     // Logic: Increase border thickness if zoomed out to keep it visible
     const dynamicBorderWidth = zoom < 0.6 ? "2px" : "1px";
     const focusRingSize = isSelected ? (zoom < 0.5 ? "6px" : "3px") : "0px";
-    // 2. Update the internal handler
     const handleStart = (e) => {
         const target = e.target;
-        // Don't drag if clicking buttons or the scrollable text
-        if (target.closest('.interactive-element'))
+        if (target.closest(".interactive-element"))
             return;
-        // For touch events, we don't want the browser to scroll the page
-        // but we only preventDefault if it's not an interactive element
-        if (e.type === 'touchstart' && e.cancelable) {
-            // We don't preventDefault here because it might block clicks on 
-            // internal non-interactive elements, let handleDragStart handle it.
-        }
         setIsDragging(true);
-        if (onDragStart)
-            onDragStart(id, e);
-        if (onSelect)
-            onSelect(id, e); // Cast for compatibility
+        onDragStart?.(id, e);
+        onSelect?.(id, e);
     };
-    // 3. Update the cleanup effect
     useEffect(() => {
+        if (!isDragging)
+            return;
         const handleUp = () => setIsDragging(false);
-        if (isDragging) {
-            window.addEventListener("mouseup", handleUp);
-            window.addEventListener("touchend", handleUp); // Add touch cleanup
-            return () => {
-                window.removeEventListener("mouseup", handleUp);
-                window.removeEventListener("touchend", handleUp);
-            };
-        }
+        window.addEventListener("mouseup", handleUp);
+        window.addEventListener("touchend", handleUp);
+        return () => {
+            window.removeEventListener("mouseup", handleUp);
+            window.removeEventListener("touchend", handleUp);
+        };
     }, [isDragging]);
     return (_jsxs("div", { onMouseDown: handleStart, onTouchStart: handleStart, className: `
         relative w-[310px] bg-[#161617] rounded-2xl transition-all duration-300 ease-out

package/dist/components/node/document-node.d.ts

@@ -1,13 +1,10 @@
-interface DocumentNodeProps {
-    id: string;
+import type { BaseNodeProps } from "./types/overlay-types";
+interface DocumentNodeProps extends BaseNodeProps {
     title: string;
     project: string;
     breadcrumb?: string[];
     preview: string;
     updatedAt?: string;
-    isSelected?: boolean;
-    onSelect?: (id: string, e?: React.MouseEvent) => void;
-    onDragStart?: (id: string, e: React.MouseEvent | React.TouchEvent) => void;
 }
 export default function DocumentNode({ id, title, project, breadcrumb, preview, updatedAt, isSelected, onSelect, onDragStart, }: DocumentNodeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/node/document-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"document-node.d.ts","sourceRoot":"","sources":["../../../src/components/node/document-node.tsx"],"names":[],"mappings":"AAKE,UAAU,iBAAiB;IACzB,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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC5E;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,OAAO,EACP,UAAe,EACf,OAAO,EACP,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,GACZ,EAAE,iBAAiB,2CAuJnB"}
+{"version":3,"file":"document-node.d.ts","sourceRoot":"","sources":["../../../src/components/node/document-node.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,iBAAkB,SAAQ,aAAa;IAC/C,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;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,OAAO,EACP,UAAe,EACf,OAAO,EACP,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,GACZ,EAAE,iBAAiB,2CAwHnB"}

package/dist/components/node/document-node.js

@@ -5,54 +5,37 @@ import { ChevronDown, ChevronUp, Clock, ExternalLink, MoreHorizontal, Layers } f
 export default function DocumentNode({ id, title, project, breadcrumb = [], preview, updatedAt, isSelected = false, onSelect, onDragStart, }) {
     const [isDragging, setIsDragging] = useState(false);
     const [isExpanded, setIsExpanded] = useState(false);
-    // 2. Update the internal handler
     const handleStart = (e) => {
         const target = e.target;
-        // Don't drag if clicking buttons or the scrollable text
-        if (target.closest('.interactive-element'))
+        if (target.closest(".interactive-element"))
             return;
-        // For touch events, we don't want the browser to scroll the page
-        // but we only preventDefault if it's not an interactive element
-        if (e.type === 'touchstart' && e.cancelable) {
-            // We don't preventDefault here because it might block clicks on 
-            // internal non-interactive elements, let handleDragStart handle it.
-        }
         setIsDragging(true);
-        if (onDragStart)
-            onDragStart(id, e);
-        if (onSelect)
-            onSelect(id, e); // Cast for compatibility
+        onDragStart?.(id, e);
+        onSelect?.(id, e);
     };
-    // 3. Update the cleanup effect
     useEffect(() => {
+        if (!isDragging)
+            return;
         const handleUp = () => setIsDragging(false);
-        if (isDragging) {
-            window.addEventListener("mouseup", handleUp);
-            window.addEventListener("touchend", handleUp); // Add touch cleanup
-            return () => {
-                window.removeEventListener("mouseup", handleUp);
-                window.removeEventListener("touchend", handleUp);
-            };
-        }
+        window.addEventListener("mouseup", handleUp);
+        window.addEventListener("touchend", handleUp);
+        return () => {
+            window.removeEventListener("mouseup", handleUp);
+            window.removeEventListener("touchend", handleUp);
+        };
     }, [isDragging]);
-    return (_jsxs("div", { onMouseDown: handleStart, onTouchStart: handleStart, className: `
-          relative w-[320px] bg-[#121214] rounded-2xl border transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]
-          ${isDragging ? "cursor-grabbing scale-[1.03] z-50 shadow-2xl" : "cursor-grab shadow-lg hover:border-[#3e3e42]"}
-          ${isSelected ? "border-[#029AFF] ring-1 ring-[#029AFF]" : "border-[#28282b]"}
-          ${isExpanded ? "w-[400px]" : "w-[320px]"}
-        `, children: [isSelected && (_jsx("div", { className: "absolute -inset-px bg-gradient-to-r from-[#029AFF]/20 to-[#7000FF]/20 rounded-2xl blur-md -z-10" })), _jsxs("div", { className: "flex items-center justify-between p-3 pb-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-1.5 bg-[#029AFF]/10 rounded-lg", children: _jsx(Layers, { className: "w-3.5 h-3.5 text-[#029AFF]" }) }), _jsx("span", { className: "text-[10px] font-bold text-gray-500 tracking-tighter uppercase", children: project })] }), _jsx("button", { className: "interactive-element p-1 hover:bg-white/5 rounded-md text-gray-600 transition-colors", children: _jsx(MoreHorizontal, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "p-4 pt-2", children: [_jsxs("div", { onClick: () => setIsExpanded(!isExpanded), className: "interactive-element flex items-start justify-between group/title cursor-pointer", children: [_jsx("h3", { className: "text-[16px] font-semibold text-white leading-tight group-hover/title:text-[#029AFF] transition-colors pr-2", children: title }), _jsx("div", { className: "mt-1", children: isExpanded ?
-                                    _jsx(ChevronUp, { className: "w-4 h-4 text-gray-500" }) :
-                                    _jsx(ChevronDown, { className: "w-4 h-4 text-gray-500" }) })] }), _jsx("div", { className: "flex items-center gap-2 mt-2 overflow-x-auto no-scrollbar pb-1", children: breadcrumb.map((item, i) => (_jsx("div", { className: "flex items-center gap-2 flex-shrink-0", children: _jsx("span", { className: "text-[10px] px-2 py-0.5 bg-[#1C1C1E] border border-[#2C2C2E] text-gray-400 rounded-full", children: item }) }, i))) }), _jsxs("div", { className: `
-            mt-4 relative transition-all duration-500 ease-in-out overflow-hidden
-            ${isExpanded ? "h-[300px]" : "h-[100px]"}
-          `, children: [_jsxs("div", { onMouseDown: (e) => e.stopPropagation(), className: "interactive-element h-full w-full bg-[#09090A] border border-[#232326] rounded-xl overflow-y-auto p-3 text-[13px] text-gray-400 leading-relaxed custom-scrollbar selection:bg-[#029AFF]/40", children: [preview, isExpanded && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[#232326] flex items-center justify-between", children: [_jsx("span", { className: "text-[11px] text-gray-500 italic", children: "End of document preview" }), _jsxs("button", { className: "flex items-center gap-2 text-[11px] text-[#029AFF] hover:underline font-medium", children: ["Open Full File ", _jsx(ExternalLink, { className: "w-3 h-3" })] })] }))] }), !isExpanded && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-[#09090A] to-transparent pointer-events-none" }))] }), _jsxs("div", { className: "mt-4 flex items-center justify-between opacity-60", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-gray-400", children: [_jsx(Clock, { className: "w-3 h-3" }), _jsxs("span", { children: ["Updated ", updatedAt || "recently"] })] }), _jsx("div", { className: "flex -space-x-1.5", children: [1, 2].map(i => (_jsxs("div", { className: "w-5 h-5 rounded-full border-2 border-[#121214] bg-[#2C2C2E] flex items-center justify-center text-[8px] text-white", children: ["U", i] }, i))) })] })] }), _jsx("style", { children: `
-          .no-scrollbar::-webkit-scrollbar { display: none; }
-          .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-          .custom-scrollbar::-webkit-scrollbar { width: 5px; }
-          .custom-scrollbar::-webkit-scrollbar-thumb { 
-            background: #232326; 
-            border-radius: 10px; 
-          }
-          .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #029AFF; }
-        ` })] }));
+    return (_jsxs("div", { onMouseDown: handleStart, onTouchStart: handleStart, className: `
+        relative w-[320px] bg-[#121214] rounded-2xl border transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]
+        ${isDragging ? "cursor-grabbing scale-[1.03] z-50 shadow-2xl" : "cursor-grab shadow-lg hover:border-[#3e3e42]"}
+        ${isSelected ? "border-[#029AFF] ring-1 ring-[#029AFF]" : "border-[#28282b]"}
+        ${isExpanded ? "w-[400px]" : "w-[320px]"}
+      `, children: [isSelected && (_jsx("div", { className: "absolute -inset-px bg-gradient-to-r from-[#029AFF]/20 to-[#7000FF]/20 rounded-2xl blur-md -z-10" })), _jsxs("div", { className: "flex items-center justify-between p-3 pb-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-1.5 bg-[#029AFF]/10 rounded-lg", children: _jsx(Layers, { className: "w-3.5 h-3.5 text-[#029AFF]" }) }), _jsx("span", { className: "text-[10px] font-bold text-gray-500 tracking-tighter uppercase", children: project })] }), _jsx("button", { className: "interactive-element p-1 hover:bg-white/5 rounded-md text-gray-600 transition-colors", children: _jsx(MoreHorizontal, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "p-4 pt-2", children: [_jsxs("div", { onClick: () => setIsExpanded(!isExpanded), className: "interactive-element flex items-start justify-between group/title cursor-pointer", children: [_jsx("h3", { className: "text-[16px] font-semibold text-white leading-tight group-hover/title:text-[#029AFF] transition-colors pr-2", children: title }), _jsx("div", { className: "mt-1", children: isExpanded
+                                    ? _jsx(ChevronUp, { className: "w-4 h-4 text-gray-500" })
+                                    : _jsx(ChevronDown, { className: "w-4 h-4 text-gray-500" }) })] }), _jsx("div", { className: "flex items-center gap-2 mt-2 overflow-x-auto no-scrollbar pb-1", children: breadcrumb.map((item, i) => (_jsx("div", { className: "flex items-center gap-2 flex-shrink-0", children: _jsx("span", { className: "text-[10px] px-2 py-0.5 bg-[#1C1C1E] border border-[#2C2C2E] text-gray-400 rounded-full", children: item }) }, i))) }), _jsxs("div", { className: `mt-4 relative transition-all duration-500 ease-in-out overflow-hidden ${isExpanded ? "h-[300px]" : "h-[100px]"}`, children: [_jsxs("div", { onMouseDown: (e) => e.stopPropagation(), className: "interactive-element h-full w-full bg-[#09090A] border border-[#232326] rounded-xl overflow-y-auto p-3 text-[13px] text-gray-400 leading-relaxed custom-scrollbar selection:bg-[#029AFF]/40", children: [preview, isExpanded && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[#232326] flex items-center justify-between", children: [_jsx("span", { className: "text-[11px] text-gray-500 italic", children: "End of document preview" }), _jsxs("button", { className: "flex items-center gap-2 text-[11px] text-[#029AFF] hover:underline font-medium", children: ["Open Full File ", _jsx(ExternalLink, { className: "w-3 h-3" })] })] }))] }), !isExpanded && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-[#09090A] to-transparent pointer-events-none" }))] }), _jsxs("div", { className: "mt-4 flex items-center justify-between opacity-60", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-gray-400", children: [_jsx(Clock, { className: "w-3 h-3" }), _jsxs("span", { children: ["Updated ", updatedAt || "recently"] })] }), _jsx("div", { className: "flex -space-x-1.5", children: [1, 2].map((i) => (_jsxs("div", { className: "w-5 h-5 rounded-full border-2 border-[#121214] bg-[#2C2C2E] flex items-center justify-center text-[8px] text-white", children: ["U", i] }, i))) })] })] }), _jsx("style", { children: `
+        .no-scrollbar::-webkit-scrollbar { display: none; }
+        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: #232326; border-radius: 10px; }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #029AFF; }
+      ` })] }));
 }

package/dist/components/node/hooks/useFabricSync.d.ts

@@ -0,0 +1,30 @@
+import type { RefObject, MutableRefObject, Dispatch, SetStateAction } from "react";
+import type { Canvas } from "fabric";
+import type { Task, Document } from "../types/overlay-types";
+interface UseFabricSyncProps {
+    fabricCanvas?: RefObject<Canvas | null>;
+    canvasReady: boolean;
+    dragSelectedIdsRef: MutableRefObject<Set<string>>;
+    selectedIdsRef: MutableRefObject<Set<string>>;
+    isHtmlSelectingRef: MutableRefObject<boolean>;
+    isSelectionBoxActiveRef: MutableRefObject<boolean>;
+    htmlNodesSelectedByBoxRef: MutableRefObject<boolean>;
+    setSelectedIds: Dispatch<SetStateAction<Set<string>>>;
+    setLocalTasks: Dispatch<SetStateAction<Task[]>>;
+    setLocalDocuments: Dispatch<SetStateAction<Document[]>>;
+}
+/**
+ * SRP: listens to Fabric canvas events and propagates changes to the HTML
+ * overlay state. Handles four events:
+ *
+ *  object:moving      — mirrors Fabric object movement onto HTML node positions
+ *                       (rAF-throttled, uses dragSelectedIdsRef snapshot)
+ *  mouse:down         — clears HTML selection when clicking a Fabric object,
+ *                       respects guard refs to avoid feedback loops
+ *  selection:created  — clears HTML selection when Fabric creates a selection,
+ *                       skipped when the HTML layer initiated the selection
+ *  selection:updated  — same as above for selection updates
+ */
+export declare function useFabricSync({ fabricCanvas, canvasReady, dragSelectedIdsRef, selectedIdsRef, isHtmlSelectingRef, isSelectionBoxActiveRef, htmlNodesSelectedByBoxRef, setSelectedIds, setLocalTasks, setLocalDocuments, }: UseFabricSyncProps): void;
+export {};
+//# sourceMappingURL=useFabricSync.d.ts.map

package/dist/components/node/hooks/useFabricSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFabricSync.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useFabricSync.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7D,UAAU,kBAAkB;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC9C,uBAAuB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnD,yBAAyB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACtD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;CACzD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACvB,yBAAyB,EACzB,cAAc,EACd,aAAa,EACb,iBAAiB,GAClB,EAAE,kBAAkB,QAmFpB"}

package/dist/components/node/hooks/useFabricSync.js

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from "react";
+/**
+ * SRP: listens to Fabric canvas events and propagates changes to the HTML
+ * overlay state. Handles four events:
+ *
+ *  object:moving      — mirrors Fabric object movement onto HTML node positions
+ *                       (rAF-throttled, uses dragSelectedIdsRef snapshot)
+ *  mouse:down         — clears HTML selection when clicking a Fabric object,
+ *                       respects guard refs to avoid feedback loops
+ *  selection:created  — clears HTML selection when Fabric creates a selection,
+ *                       skipped when the HTML layer initiated the selection
+ *  selection:updated  — same as above for selection updates
+ */
+export function useFabricSync({ fabricCanvas, canvasReady, dragSelectedIdsRef, selectedIdsRef, isHtmlSelectingRef, isSelectionBoxActiveRef, htmlNodesSelectedByBoxRef, setSelectedIds, setLocalTasks, setLocalDocuments, }) {
+    const fabricMoveRafRef = useRef(null);
+    useEffect(() => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return;
+        const handleObjectMoving = (e) => {
+            const target = e.transform?.target || e.target;
+            if (!target)
+                return;
+            const deltaX = target.left - (target._prevLeft ?? target.left);
+            const deltaY = target.top - (target._prevTop ?? target.top);
+            target._prevLeft = target.left;
+            target._prevTop = target.top;
+            if (deltaX === 0 && deltaY === 0)
+                return;
+            const sel = dragSelectedIdsRef.current;
+            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;
+            if (target) {
+                target._prevLeft = target.left;
+                target._prevTop = target.top;
+            }
+            const activeObjects = canvas.getActiveObjects();
+            const isClickingIntoActiveSelection = target && activeObjects.length > 1 && activeObjects.includes(target);
+            if (isClickingIntoActiveSelection) {
+                dragSelectedIdsRef.current = new Set(selectedIdsRef.current);
+                return;
+            }
+            if (isSelectionBoxActiveRef.current)
+                return;
+            dragSelectedIdsRef.current = new Set(selectedIdsRef.current);
+            htmlNodesSelectedByBoxRef.current = false;
+            setSelectedIds(new Set());
+        };
+        const handleSelectionCreated = () => {
+            if (isHtmlSelectingRef.current)
+                return;
+            if (isSelectionBoxActiveRef.current)
+                return;
+            if (htmlNodesSelectedByBoxRef.current)
+                return;
+            setSelectedIds(new Set());
+        };
+        const handleSelectionUpdated = () => {
+            if (isHtmlSelectingRef.current)
+                return;
+            if (isSelectionBoxActiveRef.current)
+                return;
+            if (htmlNodesSelectedByBoxRef.current)
+                return;
+            setSelectedIds(new Set());
+        };
+        canvas.on("object:moving", handleObjectMoving);
+        canvas.on("mouse:down", handleMouseDown);
+        canvas.on("selection:created", handleSelectionCreated);
+        canvas.on("selection:updated", handleSelectionUpdated);
+        return () => {
+            canvas.off("object:moving", handleObjectMoving);
+            canvas.off("mouse:down", handleMouseDown);
+            canvas.off("selection:created", handleSelectionCreated);
+            canvas.off("selection:updated", handleSelectionUpdated);
+            if (fabricMoveRafRef.current !== null) {
+                cancelAnimationFrame(fabricMoveRafRef.current);
+            }
+        };
+    }, [fabricCanvas, canvasReady]);
+}

package/dist/components/node/hooks/useKeyboardShortcuts.d.ts

@@ -1,12 +1,26 @@
-import { Task, Document } from "../types/overlay-types";
+import type { MutableRefObject, Dispatch, SetStateAction } from "react";
+import type { Task, Document } from "../types/overlay-types";
 interface UseKeyboardShortcutsProps {
-    selectedIds: Set<string>;
-    localTasks: Task[];
-    localDocuments: Document[];
-    onSelectAll: () => void;
-    onClearSelection: () => void;
-    onDeleteSelected: (tasks: Task[], docs: Document[]) => void;
+    localTasksRef: MutableRefObject<Task[]>;
+    localDocumentsRef: MutableRefObject<Document[]>;
+    selectedIdsRef: MutableRefObject<Set<string>>;
+    setSelectedIds: Dispatch<SetStateAction<Set<string>>>;
+    setLocalTasks: Dispatch<SetStateAction<Task[]>>;
+    setLocalDocuments: Dispatch<SetStateAction<Document[]>>;
+    onTasksUpdate?: (tasks: Task[]) => void;
+    onDocumentsUpdate?: (documents: Document[]) => void;
 }
-export declare function useKeyboardShortcuts({ selectedIds, localTasks, localDocuments, onSelectAll, onClearSelection, onDeleteSelected, }: UseKeyboardShortcutsProps): void;
+/**
+ * SRP: handles global keyboard shortcuts for the overlay.
+ *
+ * Uses refs (not raw state values) so the event listener is registered once
+ * and never re-registered due to selection/data changes — only stable
+ * callback props trigger a re-bind.
+ *
+ *  Ctrl/Cmd+A — select all HTML nodes
+ *  Escape     — clear selection
+ *  Delete/Backspace — delete selected nodes
+ */
+export declare function useKeyboardShortcuts({ localTasksRef, localDocumentsRef, selectedIdsRef, setSelectedIds, setLocalTasks, setLocalDocuments, onTasksUpdate, onDocumentsUpdate, }: UseKeyboardShortcutsProps): void;
 export {};
 //# sourceMappingURL=useKeyboardShortcuts.d.ts.map

package/dist/components/node/hooks/useKeyboardShortcuts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,yBAAyB;IACjC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,EAAE,IAAI,EAAE,CAAC;IACnB,cAAc,EAAE,QAAQ,EAAE,CAAC;IAC3B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CAC7D;AAED,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,UAAU,EACV,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,yBAAyB,QA2C3B"}
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7D,UAAU,yBAAyB;IACjC,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACtD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,yBAAyB,QAwC3B"}

package/dist/components/node/hooks/useKeyboardShortcuts.js

@@ -1,37 +1,46 @@
 import { useEffect } from "react";
-export function useKeyboardShortcuts({ selectedIds, localTasks, localDocuments, onSelectAll, onClearSelection, onDeleteSelected, }) {
+/**
+ * SRP: handles global keyboard shortcuts for the overlay.
+ *
+ * Uses refs (not raw state values) so the event listener is registered once
+ * and never re-registered due to selection/data changes — only stable
+ * callback props trigger a re-bind.
+ *
+ *  Ctrl/Cmd+A — select all HTML nodes
+ *  Escape     — clear selection
+ *  Delete/Backspace — delete selected nodes
+ */
+export function useKeyboardShortcuts({ localTasksRef, localDocumentsRef, selectedIdsRef, setSelectedIds, setLocalTasks, setLocalDocuments, onTasksUpdate, onDocumentsUpdate, }) {
     useEffect(() => {
         const handleKeyDown = (e) => {
-            // Don't trigger if typing in input
             if (e.target instanceof HTMLInputElement ||
-                e.target instanceof HTMLTextAreaElement) {
+                e.target instanceof HTMLTextAreaElement)
                 return;
-            }
-            // Select All (Ctrl+A / Cmd+A)
             if ((e.ctrlKey || e.metaKey) && e.key === "a") {
                 e.preventDefault();
-                onSelectAll();
+                setSelectedIds(new Set([
+                    ...localTasksRef.current.map((t) => t.id),
+                    ...localDocumentsRef.current.map((d) => d.id),
+                ]));
+                return;
             }
-            // Clear selection (Escape)
             if (e.key === "Escape") {
-                onClearSelection();
+                setSelectedIds(new Set());
+                return;
             }
-            // Delete selected nodes (Delete / Backspace)
-            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
+            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));
-                onDeleteSelected(updatedTasks, updatedDocs);
+                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());
+                onTasksUpdate?.(updatedTasks);
+                onDocumentsUpdate?.(updatedDocs);
             }
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [
-        selectedIds,
-        localTasks,
-        localDocuments,
-        onSelectAll,
-        onClearSelection,
-        onDeleteSelected,
-    ]);
+    }, [onTasksUpdate, onDocumentsUpdate]);
 }

package/dist/components/node/hooks/useNodeDrag.d.ts

@@ -1,25 +1,38 @@
-import { FabricObject, Canvas } from "fabric";
-import { DragState, PointerCoords, ViewportTransform } from "../types/overlay-types";
-import { Task, Document } from "../types/overlay-types";
+import type { RefObject, MutableRefObject, Dispatch, SetStateAction, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from "react";
+import type { Canvas } from "fabric";
+import type { Task, Document } from "../types/overlay-types";
 interface UseNodeDragProps {
-    selectedIds: Set<string>;
-    fabricCanvas?: React.RefObject<Canvas | null>;
-    selectedCanvasObjects: FabricObject[];
-    onDragStateChange: (dragging: {
-        itemIds: string[];
-    } | null) => void;
+    selectedIdsRef: MutableRefObject<Set<string>>;
+    dragSelectedIdsRef: MutableRefObject<Set<string>>;
+    localTasksRef: MutableRefObject<Task[]>;
+    localDocumentsRef: MutableRefObject<Document[]>;
+    fabricCanvas?: RefObject<Canvas | null>;
+    setLocalTasks: Dispatch<SetStateAction<Task[]>>;
+    setLocalDocuments: Dispatch<SetStateAction<Document[]>>;
+    onTasksUpdate?: (tasks: Task[]) => void;
+    onDocumentsUpdate?: (documents: Document[]) => void;
 }
-export declare function useNodeDrag({ selectedIds, fabricCanvas, selectedCanvasObjects, onDragStateChange, }: UseNodeDragProps): {
-    dragStateRef: import("react").RefObject<DragState>;
-    rafIdRef: import("react").RefObject<number | null>;
-    getPointerEvent: (e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent) => PointerCoords;
-    getViewportTransform: (canvas: Canvas) => ViewportTransform;
-    handleDragStart: (itemId: string, getItemPosition: (id: string) => {
+/**
+ * SRP: owns the full HTML-node drag lifecycle — start, move (rAF-throttled),
+ * and end — while keeping Fabric canvas objects in sync imperatively.
+ *
+ * Key design decisions:
+ *  - All world-space math reads live viewport transform from Fabric so zoom/pan
+ *    during a drag stays correct without extra state dependencies.
+ *  - startPositions + anchor-offset approach prevents the "jump on drag start"
+ *    bug that occurs when using raw mouse coords.
+ *  - activeSelection group positions are resolved via calcTransformMatrix so
+ *    multi-selected Fabric objects stay in sync when dragged from HTML nodes.
+ */
+export declare function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, localTasksRef, localDocumentsRef, fabricCanvas, setLocalTasks, setLocalDocuments, onTasksUpdate, onDocumentsUpdate, }: UseNodeDragProps): {
+    dragging: {
+        itemIds: string[];
+    } | null;
+    getItemPosition: (id: string) => {
         x: number;
         y: number;
-    } | undefined, e: React.MouseEvent | React.TouchEvent) => void;
-    handleDragMove: (pointer: PointerCoords, onTasksUpdate: (tasks: Task[], docs: Document[]) => void) => void;
-    handleDragEnd: () => void;
+    } | undefined;
+    handleDragStart: (itemId: string, e: ReactMouseEvent | ReactTouchEvent) => void;
 };
 export {};
 //# sourceMappingURL=useNodeDrag.d.ts.map

package/dist/components/node/hooks/useNodeDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodeDrag.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeDrag.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,gBAAgB;IACxB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,qBAAqB,EAAE,YAAY,EAAE,CAAC;IACtC,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CACrE;AAED,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,iBAAiB,GAClB,EAAE,gBAAgB;;;yBAaZ,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,GAAG,UAAU,GAAG,UAAU,KAC/D,aAAa;mCAasB,MAAM,KAAG,iBAAiB;8BAWpD,MAAM,mBACG,CAAC,EAAE,EAAE,MAAM,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,KAClE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU;8BAqD7B,aAAa,iBACP,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,IAAI;;EAsD7D"}
+{"version":3,"file":"useNodeDrag.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeDrag.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,UAAU,IAAI,eAAe,EAC7B,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAA4B,MAAM,wBAAwB,CAAC;AAEvF,UAAU,gBAAgB;IACxB,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAcD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB;;iBACmC,MAAM,EAAE;;0BAcrD,MAAM,KAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;8BAWzC,MAAM,KAAK,eAAe,GAAG,eAAe;EA2JxD"}