@mhamz.01/easyflow-whiteboard 1.0.0

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

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { FileText, Plus, Clock, Layers } from "lucide-react";
+import { useWhiteboardStore } from "../../store/whiteboard-store";
+const AVAILABLE_DOCUMENTS = [
+    {
+        id: "doc-1",
+        title: "Product Requirements Document",
+        project: "Website Redesign",
+        breadcrumb: ["Design", "Specs"],
+        preview: "This document outlines the core requirements for the new landing page including user flows, component specs, and acceptance criteria.",
+        updatedAt: "2 hours ago",
+    },
+    {
+        id: "doc-2",
+        title: "API Integration Guide",
+        project: "Backend API",
+        breadcrumb: ["Engineering", "Docs"],
+        preview: "Step-by-step guide for integrating the REST API endpoints. Covers authentication, rate limiting, and error handling patterns.",
+        updatedAt: "Yesterday",
+    },
+    {
+        id: "doc-3",
+        title: "Sprint Retrospective Notes",
+        project: "Team",
+        breadcrumb: ["Meetings"],
+        preview: "Summary of what went well, what needs improvement, and action items from the last sprint cycle.",
+        updatedAt: "3 days ago",
+    },
+    {
+        id: "doc-4",
+        title: "Deployment Runbook",
+        project: "DevOps",
+        breadcrumb: ["Infrastructure", "Guides"],
+        preview: "Step-by-step deployment checklist for production releases. Includes rollback procedures and health check endpoints.",
+        updatedAt: "1 week ago",
+    },
+    {
+        id: "doc-5",
+        title: "User Research Findings",
+        project: "Website Redesign",
+        breadcrumb: ["Research"],
+        preview: "Key insights from 12 user interviews conducted in Q1. Highlights pain points and opportunities for the onboarding flow.",
+        updatedAt: "4 days ago",
+    },
+];
+export default function DocumentDropdown({ onAddDocument, }) {
+    const setActiveTool = useWhiteboardStore((state) => state.setActiveTool);
+    const activeDropdown = useWhiteboardStore((s) => s.activeDropdown);
+    const setActiveDropdown = useWhiteboardStore((s) => s.setActiveDropdown);
+    return (_jsxs(DropdownMenu, { open: activeDropdown === "document", onOpenChange: (open) => {
+            if (open) {
+                setActiveTool("select");
+                setActiveDropdown("document");
+            }
+            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(FileText, { className: "w-5 h-5", strokeWidth: 2.5 }) }) }), _jsxs(DropdownMenuContent, { side: "top", align: "start", sideOffset: 10, className: "w-[380px] 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: "p-4 border-b border-white/5 flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-2 text-[#029AFF]", children: [_jsx(Layers, { className: "w-4 h-4" }), _jsx("h3", { className: "text-xs font-bold uppercase tracking-[0.2em]", children: "Documents" })] }) }), _jsx("div", { className: "max-h-80 overflow-y-auto p-2", children: AVAILABLE_DOCUMENTS.map((doc) => (_jsx("button", { onClick: () => {
+                                // 1. Add the document to the canvas
+                                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"] }) })] })] }));
+}

package/dist/components/toolbar/options/arrow-options.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+import { Canvas } from "fabric";
+interface ArrowOptionsProps {
+    fabricCanvas?: RefObject<Canvas | null>;
+}
+export default function ArrowOptions({ fabricCanvas }: ArrowOptionsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=arrow-options.d.ts.map

package/dist/components/toolbar/options/arrow-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-options.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/arrow-options.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAehC,UAAU,iBAAiB;IACzB,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CAiNvE"}

package/dist/components/toolbar/options/arrow-options.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWhiteboardStore } from "../../../store/whiteboard-store";
+import { cn } from "../../../lib/utils";
+import { useEffect, useState } from "react";
+import { Arrow } from "../../../lib/fabric-arrow";
+import { BidirectionalArrow } from "../../../lib/fabric-bidirectional-arrow";
+const PRESET_COLORS = [
+    "#FFFFFF", "#000000", "#DC2626", "#EA580C",
+    "#CA8A04", "#16A34A", "#2563EB", "#7C3AED", "#DB2777",
+];
+const STROKE_STYLES = [
+    { id: "solid", label: "Solid", dashArray: null },
+    { id: "dashed", label: "Dashed", dashArray: [10, 5] },
+    { id: "dotted", label: "Dotted", dashArray: [2, 4] },
+];
+export default function ArrowOptions({ fabricCanvas }) {
+    const toolOptions = useWhiteboardStore((state) => state.toolOptions);
+    const setToolOption = useWhiteboardStore((state) => state.setToolOption);
+    const { strokeColor, strokeWidth, strokeDashArray } = toolOptions.arrow;
+    const [isBidirectional, setIsBidirectional] = useState(false);
+    const isPresetColor = PRESET_COLORS.includes(strokeColor);
+    const activeStrokeStyle = STROKE_STYLES.find(style => {
+        if (!style.dashArray && !strokeDashArray)
+            return true;
+        if (style.dashArray && strokeDashArray &&
+            style.dashArray[0] === strokeDashArray[0] &&
+            style.dashArray[1] === strokeDashArray[1])
+            return true;
+        return false;
+    })?.id || "solid";
+    // Detect if selected object is bidirectional
+    useEffect(() => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return;
+        const handleSelection = () => {
+            const activeObj = canvas.getActiveObject();
+            if (activeObj) {
+                setIsBidirectional(activeObj.type === "bidirectional-arrow");
+            }
+        };
+        canvas.on("selection:created", handleSelection);
+        canvas.on("selection:updated", handleSelection);
+        canvas.on("selection:cleared", () => setIsBidirectional(false));
+        return () => {
+            canvas.off("selection:created", handleSelection);
+            canvas.off("selection:updated", handleSelection);
+            canvas.off("selection:cleared", () => setIsBidirectional(false));
+        };
+    }, [fabricCanvas]);
+    // Toggle between Arrow and BidirectionalArrow
+    const handleBidirectionalToggle = (bidirectional) => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return;
+        const activeObj = canvas.getActiveObject();
+        if (!activeObj || (activeObj.type !== "arrow" && activeObj.type !== "bidirectional-arrow"))
+            return;
+        // Get current properties
+        const props = {
+            stroke: activeObj.stroke,
+            strokeWidth: activeObj.strokeWidth,
+            strokeDashArray: activeObj.strokeDashArray,
+            left: activeObj.left,
+            top: activeObj.top,
+            angle: activeObj.angle,
+            scaleX: activeObj.scaleX,
+            scaleY: activeObj.scaleY,
+        };
+        // Get line points
+        const points = [
+            activeObj.x1,
+            activeObj.y1,
+            activeObj.x2,
+            activeObj.y2,
+        ];
+        // Remove old arrow
+        canvas.remove(activeObj);
+        // Create new arrow of the desired type
+        let newArrow;
+        if (bidirectional) {
+            newArrow = new BidirectionalArrow(points, props);
+        }
+        else {
+            newArrow = new Arrow(points, props);
+        }
+        // Add to canvas and select it
+        canvas.add(newArrow);
+        canvas.setActiveObject(newArrow);
+        canvas.renderAll();
+        setIsBidirectional(bidirectional);
+    };
+    return (_jsxs("div", { className: "space-y-6 text-neutral-200", children: [_jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-neutral-400", children: "Arrow Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Direction" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { onClick: () => handleBidirectionalToggle(false), className: cn("flex-1 h-10 rounded-lg border transition-colors duration-150 flex items-center justify-center gap-2", !isBidirectional
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), children: [_jsx("span", { className: "text-lg", children: "\u2192" }), _jsx("span", { className: "text-xs font-medium", children: "One-way" })] }), _jsxs("button", { onClick: () => handleBidirectionalToggle(true), className: cn("flex-1 h-10 rounded-lg border transition-colors duration-150 flex items-center justify-center gap-2", isBidirectional
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), children: [_jsx("span", { className: "text-lg", children: "\u2194" }), _jsx("span", { className: "text-xs font-medium", children: "Two-way" })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Line Style" }), _jsx("div", { className: "flex gap-2", children: STROKE_STYLES.map((style) => {
+                            const isActive = activeStrokeStyle === style.id;
+                            return (_jsxs("button", { onClick: () => setToolOption("arrow", "strokeDashArray", style.dashArray), className: cn("flex-1 h-10 rounded-lg border transition-colors duration-150 flex flex-col items-center justify-center gap-1", isActive
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), children: [_jsxs("div", { className: "w-8 h-[2px] relative", children: [style.id === "solid" && _jsx("div", { className: "absolute inset-0 bg-current" }), style.id === "dashed" && (_jsx("svg", { width: "32", height: "2", viewBox: "0 0 32 2", className: "absolute inset-0", children: _jsx("line", { x1: "0", y1: "1", x2: "32", y2: "1", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "10 5" }) })), style.id === "dotted" && (_jsx("svg", { width: "32", height: "2", viewBox: "0 0 32 2", className: "absolute inset-0", children: _jsx("line", { x1: "0", y1: "1", x2: "32", y2: "1", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "2 4" }) }))] }), _jsx("span", { className: "text-[10px] font-medium", children: style.label })] }, style.id));
+                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Color" }), _jsx("div", { className: "flex flex-wrap gap-2 overflow-visible", children: PRESET_COLORS.map((preset) => {
+                            const isActive = strokeColor === preset;
+                            return (_jsx("button", { onClick: () => setToolOption("arrow", "strokeColor", preset), className: cn("h-7 w-7 rounded-md border transition-colors duration-150", isActive
+                                    ? "border-neutral-200 outline outline-2 outline-neutral-400"
+                                    : "border-neutral-700 hover:border-neutral-500"), style: { backgroundColor: preset } }, preset));
+                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Stroke Width" }), _jsxs("span", { className: "text-xs font-semibold text-neutral-100", children: [strokeWidth, "px"] })] }), _jsx("input", { type: "range", min: 1, max: 10, step: 1, value: strokeWidth, onChange: (e) => setToolOption("arrow", "strokeWidth", parseInt(e.target.value)), className: "w-full h-2 rounded-lg appearance-none cursor-pointer bg-neutral-800 accent-neutral-200" })] }), _jsx("div", { className: "p-3 bg-neutral-900 border border-neutral-800 rounded-lg", children: _jsxs("p", { className: "text-[11px] text-neutral-400 leading-relaxed", children: [_jsx("strong", { className: "text-neutral-300", children: "Tip:" }), " Select an arrow and toggle between one-way (\u2192) and two-way (\u2194) directions."] }) })] }));
+}

package/dist/components/toolbar/options/erase-option.d.ts

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

package/dist/components/toolbar/options/erase-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"erase-option.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/erase-option.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,aAAa,4CAgEpC"}

package/dist/components/toolbar/options/erase-option.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWhiteboardStore } from "../../../store/whiteboard-store";
+const PRESET_SIZES = [10, 20, 30, 50];
+export default function EraserOptions() {
+    const toolOptions = useWhiteboardStore((state) => state.toolOptions);
+    const setToolOption = useWhiteboardStore((state) => state.setToolOption);
+    const { size } = toolOptions.eraser;
+    return (_jsxs("div", { className: "space-y-6 text-neutral-200", children: [_jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-neutral-400", children: "Eraser Settings" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Size" }), _jsxs("span", { className: "text-xs font-semibold text-neutral-100", children: [size, "px"] })] }), _jsx("div", { className: "flex gap-2", children: PRESET_SIZES.map((presetSize) => {
+                            const isActive = size === presetSize;
+                            return (_jsx("button", { onClick: () => setToolOption("eraser", "size", presetSize), className: `flex-1 h-8 rounded-lg border text-xs font-medium flex items-center justify-center transition-colors duration-150
+                  ${isActive
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"}
+                `, children: presetSize }, presetSize));
+                        }) }), _jsx("input", { type: "range", min: 5, max: 100, step: 5, value: size, onChange: (e) => setToolOption("eraser", "size", parseInt(e.target.value)), className: "w-full h-2 rounded-lg appearance-none cursor-pointer bg-neutral-800 accent-neutral-200" })] }), _jsx("div", { className: "flex items-center justify-center p-4 bg-neutral-900 rounded-lg border border-neutral-700", children: _jsx("div", { className: "rounded-full bg-neutral-500", style: {
+                        width: `${size}px`,
+                        height: `${size}px`,
+                    } }) })] }));
+}

package/dist/components/toolbar/options/image-options.d.ts

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

package/dist/components/toolbar/options/image-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-options.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/image-options.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,YAAY,4CA8CnC"}

package/dist/components/toolbar/options/image-options.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWhiteboardStore } from "../../../store/whiteboard-store";
+import { Label } from "../../../components/ui/label";
+import { Slider } from "../../../components/ui/slider";
+export default function ImageOptions() {
+    const toolOptions = useWhiteboardStore((state) => state.toolOptions);
+    const setToolOption = useWhiteboardStore((state) => state.setToolOption);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { className: "text-xs text-neutral-400", children: "Opacity" }), _jsxs("span", { className: "text-xs text-neutral-500", children: [Math.round(toolOptions.image.opacity * 100), "%"] })] }), _jsx(Slider, { value: [toolOptions.image.opacity], min: 0, max: 1, step: 0.01, onValueChange: ([value]) => setToolOption("image", "opacity", value), className: "w-full" })] }), _jsxs("div", { className: "mt-4 p-3 bg-neutral-800/50 rounded-lg border border-neutral-700", children: [_jsxs("p", { className: "text-xs text-neutral-400", children: ["Click the ", _jsx("strong", { className: "text-neutral-200", children: "Image" }), " button to upload an image from your computer."] }), _jsx("p", { className: "text-xs text-neutral-500 mt-2", children: "Supported formats: JPG, PNG, GIF, WebP" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs text-neutral-400", children: "Tips" }), _jsxs("ul", { className: "text-xs text-neutral-500 space-y-1 list-disc list-inside", children: [_jsx("li", { children: "Drag corners to resize" }), _jsx("li", { children: "Click and drag to move" }), _jsx("li", { children: "Use Delete key to remove" }), _jsx("li", { children: "Double-click to edit properties" })] })] })] }));
+}

package/dist/components/toolbar/options/line-options.d.ts

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

package/dist/components/toolbar/options/line-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-options.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/line-options.tsx"],"names":[],"mappings":"AAuBA,MAAM,CAAC,OAAO,UAAU,WAAW,4CAyJlC"}

package/dist/components/toolbar/options/line-options.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWhiteboardStore } from "../../../store/whiteboard-store";
+import { cn } from "../../../lib/utils";
+const PRESET_COLORS = [
+    "#FFFFFF", // White
+    "#000000", // Black
+    "#DC2626", // Red
+    "#EA580C", // Orange
+    "#CA8A04", // Yellow
+    "#16A34A", // Green
+    "#2563EB", // Blue
+    "#7C3AED", // Purple
+    "#DB2777", // Pink
+];
+const STROKE_STYLES = [
+    { id: "solid", label: "Solid", dashArray: null },
+    { id: "dashed", label: "Dashed", dashArray: [10, 5] },
+    { id: "dotted", label: "Dotted", dashArray: [2, 4] },
+];
+export default function LineOptions() {
+    const toolOptions = useWhiteboardStore((state) => state.toolOptions);
+    const setToolOption = useWhiteboardStore((state) => state.setToolOption);
+    const { strokeColor, strokeWidth, strokeDashArray } = toolOptions.line;
+    const isPresetColor = PRESET_COLORS.includes(strokeColor);
+    const activeStrokeStyle = STROKE_STYLES.find(style => {
+        if (!style.dashArray && !strokeDashArray)
+            return true;
+        if (style.dashArray && strokeDashArray &&
+            style.dashArray[0] === strokeDashArray[0] &&
+            style.dashArray[1] === strokeDashArray[1])
+            return true;
+        return false;
+    })?.id || "solid";
+    return (_jsxs("div", { className: "space-y-6 text-neutral-200", children: [_jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-neutral-400", children: "Line Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Line Style" }), _jsx("div", { className: "flex gap-2", children: STROKE_STYLES.map((style) => {
+                            const isActive = activeStrokeStyle === style.id;
+                            return (_jsxs("button", { onClick: () => setToolOption("line", "strokeDashArray", style.dashArray), className: cn("flex-1 h-10 rounded-lg border transition-colors duration-150 flex flex-col items-center justify-center gap-1", isActive
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), title: style.label, children: [_jsxs("div", { className: "w-8 h-[2px] relative", children: [style.id === "solid" && (_jsx("div", { className: "absolute inset-0 bg-current" })), style.id === "dashed" && (_jsx("svg", { width: "32", height: "2", viewBox: "0 0 32 2", className: "absolute inset-0", children: _jsx("line", { x1: "0", y1: "1", x2: "32", y2: "1", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "10 5" }) })), style.id === "dotted" && (_jsx("svg", { width: "32", height: "2", viewBox: "0 0 32 2", className: "absolute inset-0", children: _jsx("line", { x1: "0", y1: "1", x2: "32", y2: "1", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "2 4" }) }))] }), _jsx("span", { className: "text-[10px] font-medium", children: style.label })] }, style.id));
+                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Color" }), _jsx("div", { className: "flex items-center gap-3 overflow-visible pr-1", children: _jsx("div", { className: "flex flex-wrap gap-2 overflow-visible", children: PRESET_COLORS.map((preset) => {
+                                const isActive = strokeColor === preset;
+                                return (_jsx("button", { onClick: () => setToolOption("line", "strokeColor", preset), className: cn("h-7 w-7 rounded-md border transition-colors duration-150", isActive
+                                        ? "border-neutral-200 outline outline-2 outline-neutral-400"
+                                        : "border-neutral-700 hover:border-neutral-500"), style: { backgroundColor: preset }, "aria-label": `Color ${preset}` }, preset));
+                            }) }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Stroke Width" }), _jsxs("span", { className: "text-xs font-semibold text-neutral-100", children: [strokeWidth, "px"] })] }), _jsx("input", { type: "range", min: 1, max: 10, step: 1, value: strokeWidth, onChange: (e) => setToolOption("line", "strokeWidth", parseInt(e.target.value)), className: "w-full h-2 rounded-lg appearance-none cursor-pointer bg-neutral-800 accent-neutral-200" })] }), _jsx("div", { className: "p-3 bg-neutral-900 border border-neutral-800 rounded-lg", children: _jsxs("p", { className: "text-[11px] text-neutral-400 leading-relaxed", children: [_jsx("strong", { className: "text-neutral-300", children: "Tip:" }), " Click and drag to draw a line. The line follows your cursor until you release."] }) })] }));
+}

package/dist/components/toolbar/options/pen-option.d.ts

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

package/dist/components/toolbar/options/pen-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pen-option.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/pen-option.tsx"],"names":[],"mappings":"AA0BA,MAAM,CAAC,OAAO,UAAU,UAAU,4CAgMjC"}

package/dist/components/toolbar/options/pen-option.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWhiteboardStore } from "../../../store/whiteboard-store";
+import { cn } from "../../../lib/utils";
+const PRESET_COLORS = [
+    "#FFFFFF",
+    "#DC2626",
+    "#EA580C",
+    "#CA8A04",
+    "#16A34A",
+    "#2563EB",
+    "#7C3AED",
+    "#DB2777",
+];
+const PRESET_WIDTHS = [1, 2, 4, 8, 12];
+// Stroke styles for pen
+const STROKE_STYLES = [
+    { id: "solid", label: "Solid", dashArray: null },
+    { id: "dashed", label: "Dashed", dashArray: [2, 2] },
+    { id: "dotted", label: "Dotted", dashArray: [0.5, 2] },
+];
+export default function PenOptions() {
+    const toolOptions = useWhiteboardStore((state) => state.toolOptions);
+    const setToolOption = useWhiteboardStore((state) => state.setToolOption);
+    const { color, strokeWidth, opacity, strokeDashArray } = toolOptions.pen;
+    const isPresetColor = PRESET_COLORS.includes(color);
+    // Determine active stroke style
+    const activeStrokeStyle = STROKE_STYLES.find(style => {
+        if (!style.dashArray && !strokeDashArray)
+            return true;
+        if (style.dashArray && strokeDashArray &&
+            style.dashArray[0] === strokeDashArray[0] &&
+            style.dashArray[1] === strokeDashArray[1])
+            return true;
+        return false;
+    })?.id || "solid";
+    return (_jsxs("div", { className: "space-y-6 text-neutral-200 overflow-hidden", children: [_jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-neutral-400", children: "Pen settings" }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Stroke style" }), _jsx("div", { className: "flex gap-2", children: STROKE_STYLES.map((style) => {
+                            const isActive = activeStrokeStyle === style.id;
+                            return (_jsxs("button", { onClick: () => setToolOption("pen", "strokeDashArray", style.dashArray), className: cn("flex-1 h-10 rounded-lg border transition-colors duration-150 flex flex-col items-center justify-center gap-1", isActive
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), title: style.label, children: [_jsxs("div", { className: "w-8 h-[2px] relative", children: [style.id === "solid" && (_jsx("div", { className: "absolute inset-0 bg-current" })), style.id === "dashed" && (_jsx("svg", { width: "32", height: "2", viewBox: "0 0 32 2", className: "absolute inset-0", children: _jsx("line", { x1: "0", y1: "1", x2: "32", y2: "1", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "10 5" }) })), style.id === "dotted" && (_jsx("svg", { width: "32", height: "2", viewBox: "0 0 32 2", className: "absolute inset-0", children: _jsx("line", { x1: "0", y1: "1", x2: "32", y2: "1", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "2 4" }) }))] }), _jsx("span", { className: "text-[10px] font-medium", children: style.label })] }, style.id));
+                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Color" }), _jsx("div", { className: "flex items-center gap-3 overflow-visible pr-1", children: _jsx("div", { className: "flex flex-wrap gap-2 overflow-visible", children: PRESET_COLORS.map((preset) => {
+                                const isActive = color === preset;
+                                return (_jsx("button", { onClick: () => setToolOption("pen", "color", preset), className: cn("h-7 w-7 rounded-md border transition-colors duration-150", isActive
+                                        ? "border-neutral-200 outline outline-2 outline-neutral-400"
+                                        : "border-neutral-700 hover:border-neutral-500"), style: { backgroundColor: preset }, "aria-label": `Color ${preset}` }, preset));
+                            }) }) })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Stroke width" }), _jsxs("span", { className: "text-xs font-semibold text-neutral-100", children: [strokeWidth, "px"] })] }), _jsx("div", { className: "flex gap-2", children: PRESET_WIDTHS.map((width) => {
+                            const isActive = strokeWidth === width;
+                            return (_jsx("button", { onClick: () => setToolOption("pen", "strokeWidth", width), className: cn("flex-1 h-8 rounded-lg border text-xs font-medium transition-colors duration-150", isActive
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), children: width }, width));
+                        }) }), _jsx("input", { type: "range", min: 1, max: 20, step: 1, value: strokeWidth, onChange: (e) => setToolOption("pen", "strokeWidth", Number(e.target.value)), className: "w-full h-2 rounded-lg appearance-none cursor-pointer bg-neutral-800 accent-neutral-200" })] })] }));
+}

package/dist/components/toolbar/options/shape-option.d.ts

@@ -0,0 +1,6 @@
+interface ShapeOptionsProps {
+    shapeType: "rectangle" | "circle" | "frame";
+}
+export default function ShapeOptions({ shapeType }: ShapeOptionsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=shape-option.d.ts.map

package/dist/components/toolbar/options/shape-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-option.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/shape-option.tsx"],"names":[],"mappings":"AAuBA,UAAU,iBAAiB;IACzB,SAAS,EAAE,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC7C;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CA2MpE"}

package/dist/components/toolbar/options/shape-option.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useWhiteboardStore } from "../../../store/whiteboard-store";
+import { cn } from "../../../lib/utils";
+const PRESET_COLORS = [
+    "transparent",
+    "#000000",
+    "#DC2626",
+    "#EA580C",
+    "#CA8A04",
+    "#16A34A",
+    "#2563EB",
+    "#7C3AED",
+];
+// Stroke styles for shapes
+const STROKE_STYLES = [
+    { id: "solid", label: "Solid", dashArray: null },
+    { id: "dashed", label: "Dashed", dashArray: [10, 5] },
+    { id: "dotted", label: "Dotted", dashArray: [2, 4] },
+];
+export default function ShapeOptions({ shapeType }) {
+    const toolOptions = useWhiteboardStore((state) => state.toolOptions);
+    const setToolOption = useWhiteboardStore((state) => state.setToolOption);
+    const { fillColor, strokeColor, strokeWidth, strokeDashArray } = toolOptions[shapeType];
+    // Determine active stroke style
+    const activeStrokeStyle = STROKE_STYLES.find(style => {
+        if (!style.dashArray && !strokeDashArray)
+            return true;
+        if (style.dashArray && strokeDashArray &&
+            style.dashArray[0] === strokeDashArray[0] &&
+            style.dashArray[1] === strokeDashArray[1])
+            return true;
+        return false;
+    })?.id || "solid";
+    return (_jsxs("div", { className: "space-y-6 text-neutral-200 overflow-hidden", children: [_jsxs("p", { className: "text-[11px] font-medium uppercase tracking-wide text-neutral-400", children: [shapeType, " settings"] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Stroke style" }), _jsx("div", { className: "flex gap-2", children: STROKE_STYLES.map((style) => {
+                            const isActive = activeStrokeStyle === style.id;
+                            return (_jsxs("button", { onClick: () => setToolOption(shapeType, "strokeDashArray", style.dashArray), className: cn("flex-1 h-10 rounded-lg border transition-colors duration-150 flex flex-col items-center justify-center gap-1", isActive
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), title: style.label, children: [_jsxs("div", { className: "w-8 h-[2px] relative", children: [style.id === "solid" && (_jsx("div", { className: "absolute inset-0 bg-current" })), style.id === "dashed" && (_jsx("svg", { width: "32", height: "2", viewBox: "0 0 32 2", className: "absolute inset-0", children: _jsx("line", { x1: "0", y1: "1", x2: "32", y2: "1", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "10 5" }) })), style.id === "dotted" && (_jsx("svg", { width: "32", height: "2", viewBox: "0 0 32 2", className: "absolute inset-0", children: _jsx("line", { x1: "0", y1: "1", x2: "32", y2: "1", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "2 4" }) }))] }), _jsx("span", { className: "text-[10px] font-medium", children: style.label })] }, style.id));
+                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Fill Color" }), _jsx("div", { className: "flex items-center gap-3 overflow-visible pr-1", children: _jsx("div", { className: "flex flex-wrap gap-2 overflow-visible", children: PRESET_COLORS.map((presetColor) => {
+                                const isActive = fillColor === presetColor;
+                                return (_jsx("button", { onClick: () => setToolOption(shapeType, "fillColor", presetColor), className: cn("w-7 h-7 rounded-md border transition-colors duration-150", isActive
+                                        ? "border-neutral-200 outline outline-2 outline-neutral-400"
+                                        : "border-neutral-700 hover:border-neutral-500"), style: {
+                                        backgroundColor: presetColor === "transparent" ? undefined : presetColor,
+                                        backgroundImage: presetColor === "transparent"
+                                            ? "linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444)"
+                                            : undefined,
+                                        backgroundSize: presetColor === "transparent" ? "8px 8px" : undefined,
+                                        backgroundPosition: presetColor === "transparent" ? "0 0, 4px 4px" : undefined,
+                                    }, "aria-label": `Fill color ${presetColor}` }, `fill-${presetColor}`));
+                            }) }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Stroke Color" }), _jsx("div", { className: "flex items-center gap-3 overflow-visible pr-1", children: _jsx("div", { className: "flex flex-wrap gap-2 overflow-visible", children: PRESET_COLORS.slice(1).map((presetColor) => {
+                                const isActive = strokeColor === presetColor;
+                                return (_jsx("button", { onClick: () => setToolOption(shapeType, "strokeColor", presetColor), className: cn("w-7 h-7 rounded-md border transition-colors duration-150", isActive
+                                        ? "border-neutral-200 outline outline-2 outline-neutral-400"
+                                        : "border-neutral-700 hover:border-neutral-500"), style: { backgroundColor: presetColor }, "aria-label": `Stroke color ${presetColor}` }, `stroke-${presetColor}`));
+                            }) }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Stroke Width" }), _jsxs("span", { className: "text-xs font-semibold text-neutral-100", children: [strokeWidth, "px"] })] }), _jsx("input", { type: "range", min: 1, max: 10, step: 1, value: strokeWidth, onChange: (e) => setToolOption(shapeType, "strokeWidth", parseInt(e.target.value)), className: "w-full h-2 rounded-lg appearance-none cursor-pointer bg-neutral-800 accent-neutral-200" })] })] }));
+}

package/dist/components/toolbar/options/text-option.d.ts

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

package/dist/components/toolbar/options/text-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-option.d.ts","sourceRoot":"","sources":["../../../../src/components/toolbar/options/text-option.tsx"],"names":[],"mappings":"AA4CA,MAAM,CAAC,OAAO,UAAU,WAAW,4CA2NlC"}

package/dist/components/toolbar/options/text-option.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useWhiteboardStore } from "../../../store/whiteboard-store";
+import { cn } from "../../../lib/utils";
+import { AlignLeft, AlignCenter, AlignRight, AlignJustify, ChevronDown } from "lucide-react";
+import { useState } from "react";
+// Professional fonts for whiteboard use
+const FONT_FAMILIES = [
+    { value: "Inter", label: "Inter", style: "font-sans" },
+    { value: "Roboto", label: "Roboto", style: "font-sans" },
+    { value: "Caveat", label: "Caveat", style: "font-handwriting" },
+    { value: "Courier New", label: "Courier", style: "font-mono" },
+    { value: "Georgia", label: "Georgia", style: "font-serif" },
+];
+const FONT_WEIGHTS = [
+    { value: "300", label: "Light" },
+    { value: "400", label: "Regular" },
+    { value: "600", label: "Medium" },
+    { value: "700", label: "Bold" },
+];
+const PRESET_SIZES = [12, 16, 20, 24, 32, 48];
+const PRESET_COLORS = [
+    "#000000", // Black
+    "#FFFFFF", // White
+    "#DC2626", // Red
+    "#EA580C", // Orange
+    "#CA8A04", // Yellow
+    "#16A34A", // Green
+    "#2563EB", // Blue
+    "#7C3AED", // Purple
+    "#DB2777", // Pink
+];
+const TEXT_ALIGNMENTS = [
+    { value: "left", icon: AlignLeft, label: "Left" },
+    { value: "center", icon: AlignCenter, label: "Center" },
+    { value: "right", icon: AlignRight, label: "Right" },
+    { value: "justify", icon: AlignJustify, label: "Justify" },
+];
+export default function TextOptions() {
+    const toolOptions = useWhiteboardStore((state) => state.toolOptions);
+    const setToolOption = useWhiteboardStore((state) => state.setToolOption);
+    const { fontSize, fontFamily, fontWeight, color, textAlign } = toolOptions.text;
+    const [fontDropdownOpen, setFontDropdownOpen] = useState(false);
+    const selectedFont = FONT_FAMILIES.find(f => f.value === fontFamily) || FONT_FAMILIES[0];
+    const isPresetColor = PRESET_COLORS.includes(color);
+    return (_jsxs("div", { className: "space-y-6 text-neutral-200", children: [_jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-neutral-400", children: "Text Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Font" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { onClick: () => setFontDropdownOpen(!fontDropdownOpen), className: "w-full px-3 py-2.5 border border-neutral-700 bg-neutral-900 text-sm text-neutral-200 rounded-lg hover:bg-neutral-800 transition-colors flex items-center justify-between", children: [_jsx("span", { className: selectedFont.style, children: selectedFont.label }), _jsx(ChevronDown, { className: cn("w-4 h-4 transition-transform", fontDropdownOpen && "rotate-180") })] }), fontDropdownOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setFontDropdownOpen(false) }), _jsx("div", { className: "absolute top-full left-0 right-0 mt-1 bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl z-20 overflow-hidden", children: FONT_FAMILIES.map((font) => (_jsx("button", { onClick: () => {
+                                                setToolOption("text", "fontFamily", font.value);
+                                                setFontDropdownOpen(false);
+                                            }, className: cn("w-full px-3 py-2.5 text-left text-sm transition-colors", font.style, font.value === fontFamily
+                                                ? "bg-neutral-700 text-white"
+                                                : "text-neutral-200 hover:bg-neutral-800"), children: font.label }, font.value))) })] }))] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Weight" }), _jsx("div", { className: "grid grid-cols-4 gap-2", children: FONT_WEIGHTS.map((weight) => {
+                            const isActive = fontWeight === weight.value;
+                            return (_jsx("button", { onClick: () => setToolOption("text", "fontWeight", weight.value), className: cn("h-9  rounded-lg border text-xs font-medium transition-colors duration-150", isActive
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), children: weight.label }, weight.value));
+                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Size" }), _jsxs("span", { className: "text-xs font-semibold text-neutral-100", children: [fontSize, "px"] })] }), _jsx("div", { className: "grid grid-cols-6 gap-2", children: PRESET_SIZES.map((size) => {
+                            const isActive = fontSize === size;
+                            return (_jsx("button", { onClick: () => setToolOption("text", "fontSize", size), className: cn("h-8 rounded-lg border text-xs font-medium transition-colors duration-150", isActive
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), children: size }, size));
+                        }) }), _jsx("input", { type: "range", min: 8, max: 72, step: 2, value: fontSize, onChange: (e) => setToolOption("text", "fontSize", parseInt(e.target.value)), className: "w-full h-2 rounded-lg appearance-none cursor-pointer bg-neutral-800 accent-neutral-200" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Color" }), _jsx("div", { className: "flex items-center gap-3 overflow-visible pr-1", children: _jsx("div", { className: "flex flex-wrap gap-2 overflow-visible", children: PRESET_COLORS.map((preset) => {
+                                const isActive = color === preset;
+                                return (_jsx("button", { onClick: () => setToolOption("text", "color", preset), className: cn("h-7 w-7 rounded-md border transition-colors duration-150", isActive
+                                        ? "border-neutral-200 outline outline-2 outline-neutral-400"
+                                        : "border-neutral-700 hover:border-neutral-500"), style: { backgroundColor: preset }, "aria-label": `Color ${preset}` }, preset));
+                            }) }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-medium text-neutral-300", children: "Alignment" }), _jsx("div", { className: "grid grid-cols-4 gap-2", children: TEXT_ALIGNMENTS.map((alignment) => {
+                            const isActive = textAlign === alignment.value;
+                            const Icon = alignment.icon;
+                            return (_jsx("button", { onClick: () => setToolOption("text", "textAlign", alignment.value), className: cn("h-9 rounded-lg border transition-colors duration-150 flex items-center justify-center", isActive
+                                    ? "bg-neutral-700 border-neutral-500 text-white"
+                                    : "bg-neutral-900 border-neutral-800 text-neutral-300 hover:bg-neutral-800"), title: alignment.label, children: _jsx(Icon, { className: "w-4 h-4" }) }, alignment.value));
+                        }) })] })] }));
+}

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

@@ -0,0 +1,15 @@
+export interface TaskTemplate {
+    id: string;
+    title: string;
+    status: "todo" | "in-progress" | "done";
+    assignee?: string;
+    project?: string;
+    priority?: "low" | "medium" | "high";
+    dueDate?: string;
+}
+interface TaskDropdownProps {
+    onAddTask: (task: TaskTemplate) => void;
+}
+export default function TaskDropdown({ onAddTask }: TaskDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=task-dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"task-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/task-dropdown.tsx"],"names":[],"mappings":"AAWA,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;CACzC;AA2DD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAkGpE"}