@mhamz.01/easyflow-whiteboard 1.0.0

package/dist/components/toolbar/task-dropdown.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, } from "../ui/dropdown-menu";
+import { CheckSquare, Plus, Calendar, Hash } from "lucide-react";
+import { useWhiteboardStore } from "../../store/whiteboard-store";
+const AVAILABLE_TASKS = [
+    {
+        id: "task-1",
+        title: "Design landing page mockups",
+        status: "in-progress",
+        assignee: "Sarah Chen",
+        project: "Website Redesign",
+        priority: "high",
+        dueDate: "Feb 15",
+    },
+    {
+        id: "task-2",
+        title: "Implement user authentication",
+        status: "todo",
+        assignee: "John Doe",
+        project: "Backend API",
+        priority: "high",
+        dueDate: "Feb 18",
+    },
+    {
+        id: "task-3",
+        title: "Write API documentation",
+        status: "done",
+        assignee: "Mike Wilson",
+        project: "Documentation",
+        priority: "medium",
+        dueDate: "Feb 10",
+    },
+    {
+        id: "task-4",
+        title: "Setup CI/CD pipeline",
+        status: "todo",
+        assignee: "Alex Turner",
+        project: "DevOps",
+        priority: "low",
+        dueDate: "Feb 20",
+    },
+    {
+        id: "task-5",
+        title: "Database schema optimization",
+        status: "todo",
+        assignee: "Emma Davis",
+        project: "Backend API",
+        priority: "medium",
+        dueDate: "Feb 22",
+    },
+    {
+        id: "task-6",
+        title: "Mobile responsive testing",
+        status: "in-progress",
+        assignee: "Sarah Chen",
+        project: "Website Redesign",
+        priority: "high",
+        dueDate: "Feb 16",
+    },
+];
+export default function TaskDropdown({ onAddTask }) {
+    const setActiveTool = useWhiteboardStore((state) => state.setActiveTool);
+    const activeDropdown = useWhiteboardStore((s) => s.activeDropdown);
+    const setActiveDropdown = useWhiteboardStore((s) => s.setActiveDropdown);
+    const priorityColors = {
+        high: "bg-red-500",
+        medium: "bg-orange-500",
+        low: "bg-emerald-500",
+    };
+    return (_jsxs(DropdownMenu, { open: activeDropdown === "task", onOpenChange: (open) => {
+            if (open) {
+                setActiveTool("select");
+                setActiveDropdown("task");
+            }
+            else {
+                setActiveDropdown(null);
+            }
+        }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 text-white hover:bg-white/10", children: _jsx(CheckSquare, { className: "w-5 h-5", strokeWidth: 2.5 }) }) }), _jsxs(DropdownMenuContent, { side: "top", align: "start", sideOffset: 10, className: "w-[340px] bg-[#121214]/95 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-[0_32px_64px_rgba(0,0,0,0.6)] p-0 z-[100]", children: [_jsx("div", { className: "flex items-center justify-between p-4 border-b border-white/5", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-[#10B981] animate-pulse" }), _jsx("h3", { className: "text-xs font-bold uppercase tracking-widest text-gray-400", children: "Task Library" })] }) }), _jsx("div", { className: "max-h-80 overflow-y-auto p-2", children: AVAILABLE_TASKS.map((task) => (_jsxs("button", { onClick: () => {
+                                // 1. Add the task to the canvas
+                                onAddTask(task);
+                                // 2. CLOSE the dropdown immediately
+                                setActiveDropdown(null);
+                            }, className: "group relative w-full p-3 hover:bg-white/5 rounded-xl transition-all text-left border border-transparent hover:border-white/5", children: [_jsx("div", { className: `absolute left-0 top-3 bottom-3 w-1 rounded-r-full ${priorityColors[task.priority || "low"]}` }), _jsxs("div", { className: "pl-3", children: [_jsx("h4", { className: "text-sm font-semibold text-gray-100 group-hover:text-[#10B981] transition-colors mb-1", children: task.title }), _jsxs("div", { className: "flex items-center gap-3 mt-2", children: [_jsxs("div", { className: "flex items-center gap-1 text-[10px] text-gray-500 font-medium", children: [_jsx(Hash, { className: "w-3 h-3" }), " ", task.project] }), task.dueDate && (_jsxs("div", { className: "flex items-center gap-1 text-[10px] text-gray-500 font-medium", children: [_jsx(Calendar, { className: "w-3 h-3" }), " ", task.dueDate] }))] })] })] }, task.id))) }), _jsx("div", { className: "p-3 bg-white/[0.02] border-t border-white/5", children: _jsxs("button", { className: "w-full py-2.5 flex items-center justify-center gap-2 text-xs font-bold text-gray-400 hover:text-white hover:bg-[#10B981] hover:text-black rounded-xl transition-all", children: [_jsx(Plus, { className: "w-4 h-4" }), " NEW TASK TEMPLATE"] }) })] })] }));
+}

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

@@ -0,0 +1,12 @@
+import { LucideIcon } from "lucide-react";
+interface ToolButtonProps {
+    icon: LucideIcon;
+    label: string;
+    isActive: boolean;
+    onClick: () => void;
+    disabled?: boolean;
+    shortcut?: string;
+}
+export default function ToolButton({ icon: Icon, label, isActive, onClick, disabled, shortcut, }: ToolButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=toolbar-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-button.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/toolbar-button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,UAAU,eAAe;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EAAE,IAAI,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,GACT,EAAE,eAAe,2CAkDjB"}

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

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+export default function ToolButton({ icon: Icon, label, isActive, onClick, disabled = false, shortcut, }) {
+    return (_jsxs("div", { className: "group/tooltip relative", children: [_jsx("button", { onClick: onClick, disabled: disabled, className: cn("relative flex items-center justify-center", "w-10 h-10 rounded-xl", "transition-all duration-200 ease-out", "focus-visible:outline-none focus-visible:ring-2", "focus-visible:ring-blue-500 focus-visible:ring-offset-2", "active:scale-95", "disabled:opacity-40 disabled:cursor-not-allowed", isActive
+                    ? "bg-[#A1A1A1] text-white shadow-sm"
+                    : "text-white hover:bg-gray-100 hover:text-gray-900"), "aria-label": label, "aria-pressed": isActive, type: "button", children: _jsx(Icon, { size: 20, strokeWidth: 2, className: "transition-transform duration-200 group-hover:scale-110" }) }), _jsxs("div", { className: cn("absolute -top-11 left-1/2 -translate-x-1/2", "px-2 py-1.5 bg-gray-900 text-white rounded-md", "opacity-0 group-hover/tooltip:opacity-100", "transition-opacity duration-200", "pointer-events-none whitespace-nowrap z-[60]", "text-xs font-medium", "after:content-[''] after:absolute after:top-0 after:left-1/2", "after:-translate-x-1/2 after:-translate-y-full", "after:border-4 after:border-transparent after:border-b-gray-900"), children: [_jsx("span", { children: label }), shortcut && (_jsx("span", { className: "ml-2 opacity-70 text-[10px]", children: shortcut }))] })] }));
+}

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

@@ -0,0 +1,6 @@
+interface ToolbarSeparatorProps {
+    className?: string;
+}
+export default function ToolbarSeparator({ className, }: ToolbarSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=toolbar-seperator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-seperator.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/toolbar-seperator.tsx"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAc,GACf,EAAE,qBAAqB,2CAQvB"}

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

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ToolbarSeparator({ className = "", }) {
+    return (_jsx("div", { className: `w-px h-6 bg-gray-200 mx-1 ${className}`, role: "separator", "aria-orientation": "vertical" }));
+}

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

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

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

@@ -0,0 +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;AACvE,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAYjC,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,2CAuMvB"}

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

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { cn } from "../../lib/utils";
+import { useWhiteboardStore } from "../../store/whiteboard-store";
+import PenOptions from "./options/pen-option";
+import ShapeOptions from "./options/shape-option";
+import TextOptions from "./options/text-option";
+import ImageOptions from "./options/image-options";
+import LineOptions from "./options/line-options";
+import ArrowOptions from "./options/arrow-options";
+import { Rect, Circle, IText } from "fabric";
+import { Settings2, ChevronDown } from "lucide-react";
+export default 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
+    useEffect(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        const selectedObject = canvas.getActiveObject();
+        if (!selectedObject || !selectedObjectType)
+            return;
+        switch (selectedObjectType) {
+            case "rectangle":
+                if (selectedObject instanceof Rect) {
+                    selectedObject.set({
+                        fill: toolOptions.rectangle.fillColor,
+                        stroke: toolOptions.rectangle.strokeColor,
+                        strokeWidth: toolOptions.rectangle.strokeWidth,
+                    });
+                }
+                break;
+            case "circle":
+                if (selectedObject instanceof Circle) {
+                    selectedObject.set({
+                        fill: toolOptions.circle.fillColor,
+                        stroke: toolOptions.circle.strokeColor,
+                        strokeWidth: toolOptions.circle.strokeWidth,
+                    });
+                }
+                break;
+            case "text":
+                if (selectedObject instanceof IText) {
+                    selectedObject.set({
+                        fill: toolOptions.text.color,
+                        fontSize: toolOptions.text.fontSize,
+                        fontFamily: toolOptions.text.fontFamily,
+                    });
+                }
+                break;
+        }
+        canvas.renderAll();
+    }, [toolOptions, selectedObjectType, fabricCanvas]);
+    const toolsWithoutOptions = ["select", "pan", "undo", "redo", "eraser"];
+    const isOpen = useMemo(() => {
+        const target = selectedObjectType || activeTool;
+        return target && !toolsWithoutOptions.includes(target);
+    }, [activeTool, selectedObjectType]);
+    useEffect(() => {
+        if (!isOpen) {
+            setIsMobileExpanded(false);
+        }
+    }, [isOpen]);
+    return (_jsxs(_Fragment, { children: [_jsxs("aside", { className: cn("hidden md:flex", "fixed 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 })] }) }), _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: `
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: #029AFF;
+        }
+      ` })] }));
+}

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

@@ -0,0 +1,28 @@
+import { MutableRefObject } from "react";
+import { Canvas } from "fabric";
+interface TaskTemplate {
+    id: string;
+    title: string;
+    status: "todo" | "in-progress" | "done";
+    assignee?: string;
+    project?: string;
+    priority?: "low" | "medium" | "high";
+    dueDate?: string;
+}
+interface DocumentTemplate {
+    id: string;
+    title: string;
+    project: string;
+    breadcrumb?: string[];
+    preview: string;
+    updatedAt?: string;
+}
+interface WhiteboardToolbarProps {
+    fabricCanvas: MutableRefObject<Canvas | null>;
+    isRestoringRef: MutableRefObject<boolean>;
+    onAddTask?: (task: TaskTemplate) => void;
+    onAddDocument?: (doc: DocumentTemplate) => void;
+}
+export default function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddTask, onAddDocument }: WhiteboardToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=whiteboard-toolbar.d.ts.map

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

@@ -0,0 +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;AAI5E,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;CACjD;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,sBAAsB,2CAiM3H"}

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

@@ -0,0 +1,160 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } 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";
+import ToolButton from "./toolbar-button";
+import ToolbarSeparator from "./toolbar-seperator";
+import TaskDropdown from "./task-dropdown";
+import DocumentDropdown from "./document-dropdown";
+import { deleteSelectedObjects, addImageToCanvas } from "../../lib/fabric-utils";
+const TOOLS = [
+    { id: "select", icon: MousePointer2, label: "Select", shortcut: "V", category: "basic" },
+    { id: "pan", icon: Hand, label: "Pan", shortcut: "H", category: "navigation" },
+    { id: "pen", icon: Pencil, label: "Pen", shortcut: "P", category: "drawing" },
+    { id: "rectangle", icon: Square, label: "Rectangle", shortcut: "R", category: "shapes" },
+    { id: "circle", icon: Circle, label: "Circle", shortcut: "C", category: "shapes" },
+    { id: "frame", icon: Frame, label: "Frame", shortcut: "F", category: "shapes" },
+    { id: "line", icon: Minus, label: "Line", shortcut: "L", category: "shapes" },
+    { id: "arrow", icon: MoveRight, label: "Arrow", shortcut: "A", category: "shapes" },
+    { id: "text", icon: Type, label: "Text", shortcut: "T", category: "drawing" },
+    { id: "image", icon: ImageIcon, label: "Image", shortcut: "I", category: "media" },
+    { id: "eraser", icon: Eraser, label: "Eraser", shortcut: "E", category: "drawing" },
+    { 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 }) {
+    const activeTool = useWhiteboardStore((s) => s.activeTool);
+    const setActiveTool = useWhiteboardStore((s) => s.setActiveTool);
+    const canUndo = useWhiteboardStore((s) => s.canUndo);
+    const canRedo = useWhiteboardStore((s) => s.canRedo);
+    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 = () => {
+        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
+        canvas.loadFromJSON(JSON.parse(json)).then(() => {
+            canvas.isDrawingMode = false;
+            canvas.selection = true;
+            canvas.forEachObject((obj) => { obj.selectable = true; obj.evented = true; });
+            canvas.renderAll();
+            setActiveTool("select");
+            isRestoringRef.current = false; // ← re-enable saveState after restore done
+        });
+    };
+    const handleToolClick = (toolId) => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        canvas.discardActiveObject();
+        canvas.renderAll();
+        if (toolId === "undo") {
+            const state = undo();
+            if (state)
+                restoreCanvas(canvas, state);
+            return;
+        }
+        if (toolId === "redo") {
+            const state = redo();
+            if (state)
+                restoreCanvas(canvas, state);
+            return;
+        }
+        if (toolId === "image") {
+            fileInputRef.current?.click();
+            return;
+        }
+        setActiveTool(toolId);
+    };
+    const handleImageUpload = (e) => {
+        const file = e.target.files?.[0];
+        if (!file || !file.type.startsWith("image/"))
+            return;
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        const reader = new FileReader();
+        reader.onload = (ev) => { const url = ev.target?.result; if (url)
+            addImageToCanvas(canvas, url); };
+        reader.readAsDataURL(file);
+        e.target.value = "";
+    };
+    // Keyboard shortcuts
+    useEffect(() => {
+        const onKey = (e) => {
+            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" };
+            if (shortcuts[key] && !ctrl) {
+                e.preventDefault();
+                handleToolClick(shortcuts[key]);
+                return;
+            }
+            if (key === "delete" || key === "backspace") {
+                if (fabricCanvas.current && activeTool === "select") {
+                    e.preventDefault();
+                    deleteSelectedObjects(fabricCanvas.current);
+                }
+                return;
+            }
+            if (ctrl) {
+                if (key === "z" && !e.shiftKey) {
+                    e.preventDefault();
+                    handleToolClick("undo");
+                }
+                else if ((key === "z" && e.shiftKey) || key === "y") {
+                    e.preventDefault();
+                    handleToolClick("redo");
+                }
+            }
+        };
+        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 }), onAddDocument && _jsx(DocumentDropdown, { onAddDocument: onAddDocument })] }))] })] }), _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: `
+        .scrollbar-hide::-webkit-scrollbar { display: none; }
+        .scrollbar-hide { 
+          -ms-overflow-style: none; 
+          scrollbar-width: none;
+          -webkit-overflow-scrolling: touch;
+        }
+      ` })] }));
+}

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/ui/dropdown-menu.d.ts.map

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

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { cn } from "../../lib/utils";
+function DropdownMenu({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props }));
+}
+function DropdownMenuTrigger({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className), ...props }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className), ...props }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
+}
+function DropdownMenuSubContent({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/ui/label.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

package/dist/components/ui/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AAIlD,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAWlD;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/label.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label as LabelPrimitive } from "radix-ui";
+import { cn } from "../../lib/utils";
+function Label({ className, ...props }) {
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
+}
+export { Label };

package/dist/components/ui/slider.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Slider };
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/ui/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AAIpD,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CA8CnD;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/slider.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { cn } from "../../lib/utils";
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+    const _values = React.useMemo(() => Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+            ? defaultValue
+            : [min, max], [value, defaultValue, min, max]);
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" }, index)))] }));
+}
+export { Slider };

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

@@ -0,0 +1,2 @@
+export default function FabricWhiteboard(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=whiteboard-test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AA4CA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAkQvC"}