@mhamz.01/easyflow-whiteboard 2.177.0 → 2.178.0

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

@@ -9,7 +9,8 @@ export interface DocumentTemplate {
 interface DocumentDropdownProps {
     onAddDocument: (doc: DocumentTemplate) => void;
     availableDocuments?: DocumentTemplate[];
+    createNewHref?: string;
 }
-export default function DocumentDropdown({ onAddDocument, availableDocuments }: DocumentDropdownProps): import("react/jsx-runtime").JSX.Element;
+export default function DocumentDropdown({ onAddDocument, availableDocuments, createNewHref, }: DocumentDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=document-dropdown.d.ts.map

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

@@ -1 +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;IAE/C,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACzC;AAkDD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,EACb,kBAAuB,EACxB,EAAE,qBAAqB,2CA2FvB"}
+{"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;IAC/C,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkDD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,EACb,kBAAuB,EACvB,aAAa,GACd,EAAE,qBAAqB,2CAoGvB"}

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

@@ -45,7 +45,7 @@ const AVAILABLE_DOCUMENTS = [
         updatedAt: "4 days ago",
     },
 ];
-export default function DocumentDropdown({ onAddDocument, availableDocuments = [] }) {
+export default function DocumentDropdown({ onAddDocument, availableDocuments = [], createNewHref, }) {
     const setActiveTool = useWhiteboardStore((state) => state.setActiveTool);
     const activeDropdown = useWhiteboardStore((s) => s.activeDropdown);
     const setActiveDropdown = useWhiteboardStore((s) => s.setActiveDropdown);
@@ -62,5 +62,5 @@ export default function DocumentDropdown({ onAddDocument, availableDocuments = [
                                 onAddDocument(doc);
                                 // 2. CLOSE the dropdown immediately
                                 setActiveDropdown(null);
-                            }, className: "group w-full p-4 hover:bg-white/5 rounded-xl transition-all text-left border border-transparent hover:border-white/5", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-lg bg-[#029AFF]/10 flex items-center justify-center flex-shrink-0 group-hover:bg-[#029AFF] transition-all", children: _jsx(FileText, { className: "w-5 h-5 text-[#029AFF] group-hover:text-white" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h4", { className: "text-sm font-bold text-gray-100 truncate mb-1", children: doc.title }), _jsxs("div", { className: "flex items-center gap-1 text-[10px] text-gray-500 font-semibold uppercase tracking-tight", children: [doc.project, doc.breadcrumb?.map((b) => ` › ${b}`)] }), _jsxs("p", { className: "text-[11px] text-gray-500 line-clamp-2 mt-2 leading-relaxed italic group-hover:text-gray-400", children: ["\"", doc.preview, "\""] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-3 text-[9px] text-gray-600", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", doc.updatedAt] })] })] }) }, doc.id))) }), _jsx("div", { className: "p-3 bg-white/[0.02] border-t border-white/5", children: _jsxs("button", { className: "w-full py-3 flex items-center justify-center gap-2 text-xs font-bold text-[#029AFF] hover:bg-[#029AFF] hover:text-white rounded-xl transition-all border border-[#029AFF]/20", children: [_jsx(Plus, { className: "w-4 h-4" }), " CREATE NEW DOC"] }) })] })] }));
+                            }, className: "group w-full p-4 hover:bg-white/5 rounded-xl transition-all text-left border border-transparent hover:border-white/5", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-lg bg-[#029AFF]/10 flex items-center justify-center flex-shrink-0 group-hover:bg-[#029AFF] transition-all", children: _jsx(FileText, { className: "w-5 h-5 text-[#029AFF] group-hover:text-white" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h4", { className: "text-sm font-bold text-gray-100 truncate mb-1", children: doc.title }), _jsxs("div", { className: "flex items-center gap-1 text-[10px] text-gray-500 font-semibold uppercase tracking-tight", children: [doc.project, doc.breadcrumb?.map((b) => ` › ${b}`)] }), _jsxs("p", { className: "text-[11px] text-gray-500 line-clamp-2 mt-2 leading-relaxed italic group-hover:text-gray-400", children: ["\"", doc.preview, "\""] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-3 text-[9px] text-gray-600", children: [_jsx(Clock, { className: "w-3 h-3" }), " ", doc.updatedAt] })] })] }) }, doc.id))) }), _jsx("div", { className: "p-3 bg-white/[0.02] border-t border-white/5", children: createNewHref ? (_jsxs("a", { href: createNewHref, className: "w-full py-3 flex items-center justify-center gap-2 text-xs font-bold text-[#029AFF] hover:bg-[#029AFF] hover:text-white rounded-xl transition-all border border-[#029AFF]/20", children: [_jsx(Plus, { className: "w-4 h-4" }), " CREATE NEW DOC"] })) : (_jsxs("button", { className: "w-full py-3 flex items-center justify-center gap-2 text-xs font-bold text-[#029AFF] hover:bg-[#029AFF] hover:text-white rounded-xl transition-all border border-[#029AFF]/20", children: [_jsx(Plus, { className: "w-4 h-4" }), " CREATE NEW DOC"] })) })] })] }));
 }

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

@@ -10,7 +10,8 @@ export interface TaskTemplate {
 interface TaskDropdownProps {
     onAddTask: (task: TaskTemplate) => void;
     availableTasks?: TaskTemplate[];
+    createNewHref?: string;
 }
-export default function TaskDropdown({ onAddTask, availableTasks }: TaskDropdownProps): import("react/jsx-runtime").JSX.Element;
+export default function TaskDropdown({ onAddTask, availableTasks, createNewHref }: TaskDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=task-dropdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"task-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/task-dropdown.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,iBAAiB;IACzB,SAAS,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;CACjC;AA2DD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,cAAiB,EAAE,EAAE,iBAAiB,2CAkGvF"}
+{"version":3,"file":"task-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/task-dropdown.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,iBAAiB;IACzB,SAAS,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2DD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,cAAmB,EAAE,aAAa,EAAE,EAAE,iBAAiB,2CA2GxG"}

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

@@ -59,7 +59,7 @@ const AVAILABLE_TASKS = [
         dueDate: "Feb 16",
     },
 ];
-export default function TaskDropdown({ onAddTask, availableTasks = [] }) {
+export default function TaskDropdown({ onAddTask, availableTasks = [], createNewHref }) {
     const setActiveTool = useWhiteboardStore((state) => state.setActiveTool);
     const activeDropdown = useWhiteboardStore((s) => s.activeDropdown);
     const setActiveDropdown = useWhiteboardStore((s) => s.setActiveDropdown);
@@ -81,5 +81,5 @@ export default function TaskDropdown({ onAddTask, availableTasks = [] }) {
                                 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"] }) })] })] }));
+                            }, 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: createNewHref ? (_jsxs("a", { href: createNewHref, 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"] })) : (_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/whiteboard-toolbar.d.ts

@@ -25,6 +25,8 @@ interface WhiteboardToolbarProps {
     availableTasks?: TaskTemplate[];
     availableDocuments?: DocumentTemplate[];
     isLoadingData?: boolean;
+    createNewTaskHref?: string;
+    createNewDocumentHref?: string;
 }
 declare const _default: React.NamedExoticComponent<WhiteboardToolbarProps>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/whiteboard-toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAqB,gBAAgB,EAAkC,MAAM,OAAO,CAAC;AAKnG,OAAO,EAAE,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAQtC,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,cAAc,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;;AAUD,wBA2SG"}
+{"version":3,"file":"whiteboard-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/whiteboard-toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAqB,gBAAgB,EAAkC,MAAM,OAAO,CAAC;AAKnG,OAAO,EAAE,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAQtC,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,cAAc,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;;AAUD,wBA+SG"}

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

@@ -30,7 +30,7 @@ const MemoizedToolbarSeparator = React.memo(ToolbarSeparator);
 const MemoizedTaskDropdown = React.memo(TaskDropdown);
 const MemoizedDocumentDropdown = React.memo(DocumentDropdown);
 // ── Main Component ────────────────────────────────────────────────────────────
-export default React.memo(function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddTask, onAddDocument, availableTasks = [], availableDocuments = [], isLoadingData = false, }) {
+export default React.memo(function WhiteboardToolbar({ fabricCanvas, isRestoringRef, onAddTask, onAddDocument, availableTasks = [], availableDocuments = [], isLoadingData = false, createNewTaskHref, createNewDocumentHref, }) {
     const activeTool = useWhiteboardStore((s) => s.activeTool);
     const setActiveTool = useWhiteboardStore((s) => s.setActiveTool);
     const canUndo = useWhiteboardStore((s) => s.canUndo);
@@ -176,7 +176,7 @@ export default React.memo(function WhiteboardToolbar({ fabricCanvas, isRestoring
     // ── Memoized tool buttons ─────────────────────────────────────────────────────
     const toolButtons = useMemo(() => TOOLS.map((tool, index) => (_jsxs("div", { className: "flex items-center snap-center", children: [_jsx(MemoizedToolButton, { icon: tool.icon, label: tool.label, isActive: activeTool === tool.id, onClick: () => handleToolClick(tool.id), disabled: (tool.id === "undo" && !canUndo) || (tool.id === "redo" && !canRedo), shortcut: tool.shortcut }), (index === 1 || index === 9) && (_jsx("div", { className: "hidden md:block mx-1", children: _jsx(MemoizedToolbarSeparator, {}) }))] }, tool.id))), [activeTool, canUndo, canRedo, handleToolClick]);
     // ── Memoized dropdown section ─────────────────────────────────────────────────
-    const dropdownSection = useMemo(() => (onAddTask || onAddDocument) && (_jsxs("div", { className: "flex items-center gap-1 snap-center pr-2", children: [_jsx("div", { className: "mx-1 flex-shrink-0", children: _jsx(MemoizedToolbarSeparator, {}) }), onAddTask && (_jsx(MemoizedTaskDropdown, { onAddTask: onAddTask, availableTasks: availableTasks })), onAddDocument && (_jsx(MemoizedDocumentDropdown, { onAddDocument: onAddDocument, availableDocuments: availableDocuments }))] })), [onAddTask, onAddDocument, availableTasks, availableDocuments]);
+    const dropdownSection = useMemo(() => (onAddTask || onAddDocument) && (_jsxs("div", { className: "flex items-center gap-1 snap-center pr-2", children: [_jsx("div", { className: "mx-1 flex-shrink-0", children: _jsx(MemoizedToolbarSeparator, {}) }), onAddTask && (_jsx(MemoizedTaskDropdown, { onAddTask: onAddTask, availableTasks: availableTasks, createNewHref: createNewTaskHref })), onAddDocument && (_jsx(MemoizedDocumentDropdown, { onAddDocument: onAddDocument, availableDocuments: availableDocuments, createNewHref: createNewDocumentHref }))] })), [onAddTask, onAddDocument, availableTasks, availableDocuments, createNewTaskHref, createNewDocumentHref]);
     // ── Scroll indicator visibility ───────────────────────────────────────────────
     const scrollIndicators = useMemo(() => (_jsxs("div", { className: "flex gap-1.5 md:hidden", children: [_jsx("div", { className: `w-1.5 h-1.5 rounded-full transition-all duration-300 ${scrollPosition < 0.5 ? "bg-white w-6" : "bg-white/30"}` }), _jsx("div", { className: `w-1.5 h-1.5 rounded-full transition-all duration-300 ${scrollPosition >= 0.5 ? "bg-white w-6" : "bg-white/30"}` })] })), [scrollPosition]);
     return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden" }), _jsxs("div", { className: "fixed bottom-4 md:bottom-6 left-0 right-0 z-50 flex flex-col items-center gap-2 px-4 pointer-events-none", children: [_jsxs("div", { className: "relative w-full md:w-auto max-w-full pointer-events-auto", children: [_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-[#0b0b0b] to-transparent pointer-events-none z-10 md:hidden rounded-l-2xl" }), _jsx("div", { className: "absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-[#0b0b0b] to-transparent pointer-events-none z-10 md:hidden rounded-r-2xl" }), _jsxs("div", { ref: scrollRef, onScroll: handleScroll, className: "flex items-center gap-1 px-2 py-2 bg-black/95 backdrop-blur-md border border-[#A1A1A1] rounded-2xl shadow-2xl overflow-x-auto md:overflow-x-visible snap-x snap-mandatory md:snap-none scrollbar-hide scroll-smooth", children: [toolButtons, dropdownSection] })] }), scrollIndicators] }), _jsx("style", { children: `

package/package.json

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