@mhamz.01/easyflow-whiteboard 1.0.0

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

@@ -0,0 +1,44 @@
+import { FabricObject, Canvas } from "fabric";
+export interface Task {
+    id: string;
+    title: string;
+    status: "todo" | "in-progress" | "done";
+    x: number;
+    y: number;
+    assignee?: string;
+    project?: string;
+    priority?: "low" | "medium" | "high";
+    dueDate?: string;
+}
+export interface Document {
+    id: string;
+    title: string;
+    project: string;
+    breadcrumb?: string[];
+    preview: string;
+    updatedAt?: string;
+    x: number;
+    y: number;
+}
+interface CanvasOverlayLayerProps {
+    tasks: Task[];
+    documents: Document[];
+    onTasksUpdate?: (tasks: Task[]) => void;
+    onDocumentsUpdate?: (documents: Document[]) => void;
+    canvasZoom?: number;
+    canvasViewport?: {
+        x: number;
+        y: number;
+    };
+    selectionBox?: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    } | null;
+    selectedCanvasObjects?: FabricObject[];
+    fabricCanvas?: React.RefObject<Canvas | null>;
+}
+export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, fabricCanvas, }: CanvasOverlayLayerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=custom-node-overlay-layer.d.ts.map

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

@@ -0,0 +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;CAC/C;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,2CA+czB"}

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

@@ -0,0 +1,353 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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, }) {
+    const [localTasks, setLocalTasks] = useState(tasks);
+    const [localDocuments, setLocalDocuments] = useState(documents);
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const [dragging, setDragging] = useState(null);
+    const dragStateRef = useRef({
+        isDragging: false,
+        itemIds: [],
+        startPositions: new Map(),
+        canvasObjectsStartPos: new Map(),
+        offsetX: 0,
+        offsetY: 0,
+    });
+    const rafIdRef = useRef(null);
+    const overlayRef = useRef(null);
+    // ── Sync props → local state ────────────────────────────────────────────────
+    useEffect(() => { setLocalTasks(tasks); }, [tasks]);
+    useEffect(() => { setLocalDocuments(documents); }, [documents]);
+    // ── Event Forwarding (Fixes Zooming on Nodes) ───────────────────────────────
+    const handleOverlayWheel = (e) => {
+        if (e.ctrlKey || e.metaKey || e.shiftKey) {
+            const canvas = fabricCanvas?.current;
+            if (!canvas)
+                return;
+            const nativeEvent = e.nativeEvent;
+            // getScenePoint handles the transformation from screen to canvas space
+            const scenePoint = canvas.getScenePoint(nativeEvent);
+            // Viewport point is simply the mouse position relative to the canvas element
+            const rect = canvas.getElement().getBoundingClientRect();
+            const viewportPoint = {
+                x: nativeEvent.clientX - rect.left,
+                y: nativeEvent.clientY - rect.top,
+            };
+            // 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,
+                scenePoint,
+                viewportPoint,
+            });
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    useEffect(() => {
+        const overlayEl = overlayRef.current;
+        const canvas = fabricCanvas?.current;
+        if (!overlayEl || !canvas)
+            return;
+        const handleGlobalWheel = (e) => {
+            // Check if the user is hovering over an element that has pointer-events: auto
+            // (meaning they are hovering over a Task or Document)
+            const target = e.target;
+            const isOverNode = target !== overlayEl;
+            if ((e.ctrlKey || e.metaKey) && isOverNode) {
+                // 1. Prevent Browser Zoom immediately
+                e.preventDefault();
+                e.stopPropagation();
+                // 2. Calculate coordinates for Fabric
+                const scenePoint = canvas.getScenePoint(e);
+                const rect = canvas.getElement().getBoundingClientRect();
+                const viewportPoint = {
+                    x: e.clientX - rect.left,
+                    y: e.clientY - rect.top,
+                };
+                // 3. Manually fire the event into Fabric
+                canvas.fire("mouse:wheel", {
+                    e: e,
+                    scenePoint,
+                    viewportPoint,
+                });
+            }
+        };
+        // CRITICAL: { passive: false } allows us to cancel the browser's zoom
+        overlayEl.addEventListener("wheel", handleGlobalWheel, { passive: false });
+        return () => {
+            overlayEl.removeEventListener("wheel", handleGlobalWheel);
+        };
+    }, [fabricCanvas, canvasZoom]); // Re-bind when zoom changes to keep closure fresh
+    // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
+    useEffect(() => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return;
+        const handleObjectMoving = (e) => {
+            const target = e.transform?.target || e.target;
+            if (!target)
+                return;
+            // 1. Calculate delta in raw Scene Coordinates
+            // We do NOT divide by zoom here because target.left/top are world units.
+            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;
+            // 2. Apply the raw delta to HTML items
+            setLocalTasks((prev) => prev.map((t) => (selectedIds.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t)));
+            setLocalDocuments((prev) => prev.map((d) => (selectedIds.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;
+            }
+        };
+        canvas.on("object:moving", handleObjectMoving);
+        canvas.on("mouse:down", handleMouseDown);
+        return () => {
+            canvas.off("object:moving", handleObjectMoving);
+            canvas.off("mouse:down", handleMouseDown);
+        };
+    }, [canvasZoom, selectedIds, fabricCanvas]);
+    // ── Helpers ─────────────────────────────────────────────────────────────────
+    const getItemPosition = (id) => {
+        const task = localTasks.find((t) => t.id === id);
+        if (task)
+            return { x: task.x, y: task.y };
+        const doc = localDocuments.find((d) => d.id === id);
+        if (doc)
+            return { x: doc.x, y: doc.y };
+        return undefined;
+    };
+    const isItemInSelectionBox = (x, y, width, height, box) => {
+        const itemX1 = x * canvasZoom + canvasViewport.x;
+        const itemY1 = y * canvasZoom + canvasViewport.y;
+        const itemX2 = itemX1 + width * canvasZoom;
+        const itemY2 = itemY1 + height * canvasZoom;
+        const boxX1 = Math.min(box.x1, box.x2);
+        const boxY1 = Math.min(box.y1, box.y2);
+        const boxX2 = Math.max(box.x1, box.x2);
+        const boxY2 = Math.max(box.y1, box.y2);
+        return !(boxX2 < itemX1 || boxX1 > itemX2 || boxY2 < itemY1 || boxY1 > itemY2);
+    };
+    // ── Selection box detection ──────────────────────────────────────────────────
+    useEffect(() => {
+        if (!selectionBox)
+            return;
+        const newSelected = new Set();
+        localTasks.forEach((task) => {
+            if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
+                newSelected.add(task.id);
+        });
+        localDocuments.forEach((doc) => {
+            if (isItemInSelectionBox(doc.x, doc.y, 300, 160, selectionBox))
+                newSelected.add(doc.id);
+        });
+        setSelectedIds(newSelected);
+    }, [selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport]);
+    // ── Drag start (HTML Node side) ──────────────────────────────────────────────
+    // Helper to extract coordinates regardless of event type
+    const getPointerEvent = (e) => {
+        if ('touches' in e && e.touches.length > 0)
+            return e.touches[0];
+        return e;
+    };
+    const handleDragStart = (itemId, e) => {
+        // Prevent browser scrolling while dragging
+        if (e.cancelable)
+            e.preventDefault();
+        const pointer = getPointerEvent(e);
+        let itemsToDrag;
+        if (selectedIds.has(itemId)) {
+            itemsToDrag = Array.from(selectedIds);
+        }
+        else {
+            itemsToDrag = [itemId];
+            setSelectedIds(new Set([itemId]));
+        }
+        const startPositions = new Map();
+        itemsToDrag.forEach((id) => {
+            const pos = getItemPosition(id);
+            if (pos)
+                startPositions.set(id, pos);
+        });
+        const canvasObjectsStartPos = new Map();
+        selectedCanvasObjects.forEach((obj) => {
+            canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
+        });
+        const clickedPos = getItemPosition(itemId);
+        if (!clickedPos)
+            return;
+        const screenX = clickedPos.x * canvasZoom + canvasViewport.x;
+        const screenY = clickedPos.y * canvasZoom + canvasViewport.y;
+        dragStateRef.current = {
+            isDragging: true,
+            itemIds: itemsToDrag,
+            startPositions,
+            canvasObjectsStartPos,
+            offsetX: pointer.clientX - screenX,
+            offsetY: pointer.clientY - screenY,
+        };
+        setDragging({ itemIds: itemsToDrag });
+        document.body.style.cursor = "grabbing";
+        document.body.style.userSelect = "none";
+        // Prevents mobile pull-to-refresh
+        document.body.style.touchAction = "none";
+    };
+    // ── Drag move (HTML Node side) ───────────────────────────────────────────────
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const handleMove = (e) => {
+            if (!dragStateRef.current.isDragging)
+                return;
+            // Prevent mobile scrolling
+            if (e.cancelable)
+                e.preventDefault();
+            const pointer = getPointerEvent(e);
+            if (rafIdRef.current !== null)
+                cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = requestAnimationFrame(() => {
+                const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
+                const firstId = itemIds[0];
+                const firstStart = startPositions.get(firstId);
+                if (!firstStart)
+                    return;
+                // Calculate new world coordinates
+                const newX = (pointer.clientX - offsetX - canvasViewport.x) / canvasZoom;
+                const newY = (pointer.clientY - offsetY - canvasViewport.y) / canvasZoom;
+                const deltaX = newX - firstStart.x;
+                const deltaY = newY - firstStart.y;
+                // Batch state updates for React
+                setLocalTasks((prev) => prev.map((t) => (itemIds.includes(t.id) ? {
+                    ...t,
+                    x: (startPositions.get(t.id)?.x || 0) + deltaX,
+                    y: (startPositions.get(t.id)?.y || 0) + deltaY
+                } : t)));
+                setLocalDocuments((prev) => prev.map((d) => (itemIds.includes(d.id) ? {
+                    ...d,
+                    x: (startPositions.get(d.id)?.x || 0) + deltaX,
+                    y: (startPositions.get(d.id)?.y || 0) + deltaY
+                } : d)));
+                if (fabricCanvas?.current) {
+                    canvasObjectsStartPos.forEach((startPos, obj) => {
+                        obj.set({
+                            left: startPos.left + deltaX,
+                            top: startPos.top + deltaY,
+                        });
+                        obj.setCoords();
+                    });
+                    fabricCanvas.current.requestRenderAll();
+                }
+            });
+        };
+        const handleEnd = () => {
+            if (rafIdRef.current !== null)
+                cancelAnimationFrame(rafIdRef.current);
+            dragStateRef.current.isDragging = false;
+            setDragging(null);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            document.body.style.touchAction = "";
+            onTasksUpdate?.(localTasks);
+            onDocumentsUpdate?.(localDocuments);
+        };
+        window.addEventListener("mousemove", handleMove, { passive: false });
+        window.addEventListener("mouseup", handleEnd);
+        window.addEventListener("touchmove", handleMove, { passive: false });
+        window.addEventListener("touchend", handleEnd);
+        window.addEventListener("touchcancel", handleEnd);
+        return () => {
+            window.removeEventListener("mousemove", handleMove);
+            window.removeEventListener("mouseup", handleEnd);
+            window.removeEventListener("touchmove", handleMove);
+            window.removeEventListener("touchend", handleEnd);
+            window.removeEventListener("touchcancel", handleEnd);
+        };
+    }, [dragging, canvasZoom, canvasViewport, localTasks, localDocuments, fabricCanvas]);
+    // ── Selection, Status, Keyboard Logic ────────────────────────────────────────
+    const handleSelect = (id, e) => {
+        if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
+            setSelectedIds((prev) => {
+                const next = new Set(prev);
+                next.has(id) ? next.delete(id) : next.add(id);
+                return next;
+            });
+        }
+        else {
+            setSelectedIds(new Set([id]));
+        }
+    };
+    const handleStatusChange = (taskId, newStatus) => {
+        const updated = localTasks.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t));
+        setLocalTasks(updated);
+        onTasksUpdate?.(updated);
+    };
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Don't trigger if typing in input
+            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)]));
+            }
+            // Clear selection
+            if (e.key === "Escape") {
+                setSelectedIds(new Set());
+            }
+            // ← ADD THIS: Delete selected nodes
+            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
+                e.preventDefault();
+                const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
+                const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
+                setLocalTasks(updatedTasks);
+                setLocalDocuments(updatedDocs);
+                setSelectedIds(new Set());
+                onTasksUpdate?.(updatedTasks);
+                onDocumentsUpdate?.(updatedDocs);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
+    // ── 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,
+                top: 0,
+                // 2. Use translate3d for GPU performance
+                transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`,
+                transformOrigin: "top left",
+                // 3. THE FIX: Remove transition entirely during any viewport change
+                // Any 'ease' during zoom causes the "shaking" behavior.
+                transition: "none",
+                // 4. Optimization
+                willChange: "transform",
+                zIndex: isDragging ? 1000 : 1,
+            }, children: children }, id));
+    };
+    return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {
+            if (e.target === e.currentTarget)
+                setSelectedIds(new Set());
+        }, children: _jsxs("div", { className: "absolute top-0 left-0 pointer-events-none", style: {
+                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 })))] }) }));
+}

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

@@ -0,0 +1,17 @@
+interface TaskNodeProps {
+    id: string;
+    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;
+}
+export default function TaskNode({ id, title, status, assignee, project, priority, dueDate, isSelected, onSelect, onDragStart, onStatusChange, zoom, }: TaskNodeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=custom-node.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Check, ListCheck, Calendar, User2, AlertCircle } from "lucide-react";
+export default function TaskNode({ id, title, status, assignee, project, priority, dueDate, isSelected = false, onSelect, onDragStart, onStatusChange, zoom = 1, // Default to 1:1 scale
+ }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const statusConfig = {
+        todo: { accent: "bg-[#3A3A3C]", pill: "bg-[#2C2C2E] text-gray-400 border-gray-700", label: "To Do" },
+        "in-progress": { accent: "bg-[#029AFF]", pill: "bg-[#029AFF]/10 text-[#029AFF] border-[#029AFF]/20", label: "In Progress" },
+        done: { accent: "bg-[#10B981]", pill: "bg-[#10B981]/10 text-[#10B981] border-[#10B981]/20", label: "Completed" },
+    };
+    const currentStatus = statusConfig[status];
+    // 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'))
+            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
+    };
+    // 3. Update the cleanup effect
+    useEffect(() => {
+        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);
+            };
+        }
+    }, [isDragging]);
+    return (_jsxs("div", { onMouseDown: handleStart, onTouchStart: handleStart, className: `
+        relative w-[310px] bg-[#161617] rounded-2xl transition-all duration-300 ease-out
+        ${isDragging ? "cursor-grabbing scale-[1.04] z-[100] shadow-2xl" : "cursor-grab shadow-xl"}
+      `, style: {
+            border: `${dynamicBorderWidth} solid ${isSelected ? "#10B981" : "#2C2C2E"}`,
+            boxShadow: isSelected ? `0 0 25px rgba(16,185,129, ${0.2 / zoom})` : 'none',
+            outline: `${focusRingSize} solid rgba(16,185,129, 0.2)`
+        }, children: [_jsx("div", { className: `absolute left-0 top-6 bottom-6 w-1 rounded-r-full transition-colors duration-500 ${currentStatus.accent}` }), _jsxs("div", { className: "p-5 pl-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-5 h-5 flex items-center justify-center rounded-md bg-[#10B981]/10 border border-[#10B981]/20", children: _jsx(ListCheck, { className: "w-3 h-3 text-[#10B981]" }) }), zoom > 0.4 && (_jsx("span", { className: "text-[10px] font-bold text-gray-500 uppercase tracking-widest truncate max-w-[120px]", children: project || "Task" }))] }), _jsx("div", { className: `interactive-element px-2 py-0.5 rounded-lg text-[9px] font-bold border uppercase ${currentStatus.pill}`, children: currentStatus.label })] }), _jsx("div", { className: "mb-4", children: _jsx("h3", { className: `text-[15px] font-semibold leading-snug transition-all duration-500 ${status === "done" ? "text-gray-600 line-through opacity-70" : "text-white"}`, children: title }) }), zoom > 0.5 && (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [priority && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(AlertCircle, { className: `w-3 h-3 ${priority === 'high' ? 'text-red-500' : 'text-gray-500'}` }), _jsx("span", { className: "text-[11px] text-gray-400 font-medium capitalize", children: priority })] })), dueDate && (_jsxs("div", { className: "flex items-center gap-1.5 text-gray-500", children: [_jsx(Calendar, { className: "w-3 h-3" }), _jsx("span", { className: "text-[11px] font-medium", children: dueDate })] }))] })), _jsxs("div", { className: "mt-5 pt-4 border-t border-[#252526] flex items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-2", children: assignee ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-6 h-6 rounded-full bg-[#10B981] flex items-center justify-center text-[10px] font-bold text-black ring-2 ring-[#161617]", children: assignee.charAt(0) }), zoom > 0.6 && _jsx("span", { className: "text-[11px] text-gray-400 font-medium", children: assignee })] })) : (_jsx(User2, { className: "w-3.5 h-3.5 text-gray-600" })) }), _jsx("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    onStatusChange?.(id, status === "done" ? "todo" : "done");
+                                }, className: `
+              interactive-element w-8 h-8 rounded-xl border flex items-center justify-center transition-all duration-300
+              ${status === "done"
+                                    ? "bg-[#10B981] border-[#10B981] shadow-lg shadow-[#10B981]/20"
+                                    : "bg-transparent border-[#333] hover:border-[#10B981] text-transparent hover:text-[#10B981]/50"}
+            `, children: _jsx(Check, { className: `w-4 h-4 ${status === "done" ? "text-black" : "text-current"}`, strokeWidth: 3 }) })] })] })] }));
+}

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

@@ -0,0 +1,14 @@
+interface DocumentNodeProps {
+    id: string;
+    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 {};
+//# sourceMappingURL=document-node.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"document-node.d.ts","sourceRoot":"","sources":["../../../src/components/node/document-node.tsx"],"names":[],"mappings":"AAKA,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"}

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { ChevronDown, ChevronUp, Clock, ExternalLink, MoreHorizontal, Layers } from "lucide-react";
+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'))
+            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
+    };
+    // 3. Update the cleanup effect
+    useEffect(() => {
+        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);
+            };
+        }
+    }, [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; }
+      ` })] }));
+}

package/dist/components/toolbar/document-dropdown.d.ts

@@ -0,0 +1,14 @@
+export interface DocumentTemplate {
+    id: string;
+    title: string;
+    project: string;
+    breadcrumb?: string[];
+    preview: string;
+    updatedAt?: string;
+}
+interface DocumentDropdownProps {
+    onAddDocument: (doc: DocumentTemplate) => void;
+}
+export default function DocumentDropdown({ onAddDocument, }: DocumentDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=document-dropdown.d.ts.map

package/dist/components/toolbar/document-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/document-dropdown.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,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;AAED,UAAU,qBAAqB;IAC7B,aAAa,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAChD;AAkDD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,GACd,EAAE,qBAAqB,2CA2FvB"}