rud-dashboard 0.1.4

package/dist/preact/index.preact.js

@@ -0,0 +1,1656 @@
+"use client"
+
+// src/components/Dashboard.tsx
+import * as React2 from "react";
+import { useState as useState3, useRef as useRef2, useCallback as useCallback2, useEffect as useEffect2, useMemo } from "react";
+import { Plus as Plus2, X as X2, MoreHorizontal } from "lucide-react";
+
+// src/components/DashboardToolbar.tsx
+import React from "react";
+import { Zap, Edit3, Eye, Plus, X, Grid as Grid2, TrendingUp, ChevronLeft, ChevronRight } from "lucide-react";
+
+// src/ui/button.tsx
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/button.tsx
+import { jsx } from "preact/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({ className, variant, size, ref, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(buttonVariants({ variant, size }), className),
+      ref,
+      ...props
+    }
+  );
+}
+Button.displayName = "Button";
+
+// src/ui/tooltip.tsx
+import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx as jsx2 } from "preact/jsx-runtime";
+var TooltipContext = createContext(void 0);
+function TooltipProvider({ children }) {
+  return /* @__PURE__ */ jsx2(Fragment, { children });
+}
+function Tooltip({ children, delayDuration = 200 }) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const content = /* @__PURE__ */ jsx2("div", { ref: triggerRef, className: "relative inline-block", children });
+  return /* @__PURE__ */ jsx2(TooltipContext.Provider, { value: { open, setOpen, delay: delayDuration, triggerRef }, children: content });
+}
+function TooltipTrigger({ children, asChild, className, ...props }) {
+  const context = useContext(TooltipContext);
+  if (!context) throw new Error("TooltipTrigger must be used within Tooltip");
+  const { setOpen, delay } = context;
+  const timeoutRef = useRef();
+  const handleMouseEnter = () => {
+    timeoutRef.current = setTimeout(() => setOpen(true), delay);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setOpen(false);
+  };
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      className: cn("inline-block", className),
+      ...props,
+      children
+    }
+  );
+}
+TooltipTrigger.displayName = "TooltipTrigger";
+function TooltipContent({ className, sideOffset = 4, side = "top", children, ...props }) {
+  const context = useContext(TooltipContext);
+  const contentRef = useRef(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const [isPositioned, setIsPositioned] = useState(false);
+  if (!context) throw new Error("TooltipContent must be used within Tooltip");
+  const { open, triggerRef } = context;
+  useLayoutEffect(() => {
+    if (open && triggerRef.current && contentRef.current) {
+      const updatePosition = () => {
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const scrollY = window.scrollY;
+        const scrollX = window.scrollX;
+        let top = 0;
+        let left = 0;
+        left = triggerRect.left + scrollX + triggerRect.width / 2 - contentRect.width / 2;
+        top = triggerRect.top + scrollY - contentRect.height - sideOffset;
+        if (triggerRect.top - contentRect.height - sideOffset < 0) {
+          top = triggerRect.bottom + scrollY + sideOffset;
+        }
+        setPosition({ top, left });
+        setIsPositioned(true);
+      };
+      updatePosition();
+      window.addEventListener("resize", updatePosition);
+      window.addEventListener("scroll", updatePosition, true);
+      return () => {
+        window.removeEventListener("resize", updatePosition);
+        window.removeEventListener("scroll", updatePosition, true);
+        setIsPositioned(false);
+      };
+    }
+  }, [open, sideOffset]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: contentRef,
+        style: {
+          top: position.top,
+          left: position.left,
+          position: "absolute",
+          opacity: isPositioned ? 1 : 0,
+          pointerEvents: "none"
+        },
+        className: cn(
+          "z-50 overflow-hidden rounded-md border border-gray-200 dark:border-gray-700",
+          "bg-white dark:bg-gray-800 px-3 py-1.5 text-sm",
+          "text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-gray-900/50",
+          "animate-in fade-in-0 zoom-in-95 duration-200",
+          "whitespace-nowrap",
+          className
+        ),
+        ...props,
+        children
+      }
+    ),
+    document.body
+  );
+}
+TooltipContent.displayName = "TooltipContent";
+
+// src/components/widgets/BasicWidget.tsx
+import { Grid } from "lucide-react";
+import { jsx as jsx3, jsxs } from "preact/jsx-runtime";
+function BasicWidget({ id, title }) {
+  return /* @__PURE__ */ jsx3("div", { className: "p-4 h-full flex flex-col justify-center overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsx3("div", { className: "w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-700 dark:to-gray-600", children: /* @__PURE__ */ jsx3(Grid, { size: 20, className: "text-blue-600 dark:text-gray-200" }) }),
+    /* @__PURE__ */ jsx3("h3", { className: "text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2", children: title || "Basic Widget" }),
+    /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Customizable content area" }),
+    id && /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-gray-400 dark:text-gray-500", children: [
+      "ID: ",
+      id
+    ] })
+  ] }) });
+}
+function BasicWidgetPreview() {
+  return /* @__PURE__ */ jsx3("div", { className: "p-2 h-16 flex items-center justify-center bg-gray-50 dark:bg-gray-800 rounded", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx3("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-700 dark:to-gray-600 flex items-center justify-center", children: /* @__PURE__ */ jsx3(Grid, { size: 14, className: "text-blue-600 dark:text-gray-300" }) }),
+    /* @__PURE__ */ jsx3("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: "Basic Widget" })
+  ] }) });
+}
+
+// src/components/widgets/ProgressBarWidget.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "preact/jsx-runtime";
+function ProgressBarWidget({ data }) {
+  const defaultData = {
+    label: "Progress",
+    value: 75,
+    max: 100,
+    color: "bg-blue-500"
+  };
+  const widgetData = data || defaultData;
+  const percentage = widgetData.value / widgetData.max * 100;
+  return /* @__PURE__ */ jsx4("div", { className: "p-4 h-full flex flex-col justify-center overflow-hidden", children: /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsx4("h3", { className: "text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2", children: widgetData.label }),
+    /* @__PURE__ */ jsxs2("div", { className: "text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4", children: [
+      widgetData.value,
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 mb-2", children: /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `h-3 rounded-full ${widgetData.color || "bg-blue-500"} transition-all duration-300`,
+        style: { width: `${percentage}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+      widgetData.value,
+      " of ",
+      widgetData.max
+    ] })
+  ] }) });
+}
+function ProgressBarPreview() {
+  return /* @__PURE__ */ jsx4("div", { className: "p-2 h-16 flex items-center justify-center bg-gray-50 dark:bg-gray-800 rounded", children: /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-20", children: [
+    /* @__PURE__ */ jsx4("div", { className: "text-xs font-medium text-gray-600 dark:text-gray-400 mb-1 text-center", children: "Progress" }),
+    /* @__PURE__ */ jsx4("div", { className: "w-full bg-gray-200 dark:bg-gray-600 rounded-full h-1.5", children: /* @__PURE__ */ jsx4("div", { className: "bg-blue-400 h-1.5 rounded-full w-3/4 animate-pulse" }) })
+  ] }) });
+}
+
+// src/components/widgets/PieChartWidget.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "preact/jsx-runtime";
+function PieChartWidget({ data }) {
+  const defaultData = {
+    label: "Sales Distribution",
+    segments: [
+      { name: "Product A", value: 40, color: "#3B82F6" },
+      { name: "Product B", value: 30, color: "#EF4444" },
+      { name: "Product C", value: 20, color: "#10B981" },
+      { name: "Product D", value: 10, color: "#F59E0B" }
+    ]
+  };
+  const widgetData = data || defaultData;
+  const total = widgetData.segments.reduce((sum, segment) => sum + segment.value, 0);
+  let cumulativePercentage = 0;
+  const gradientStops = widgetData.segments.map((segment) => {
+    const percentage = segment.value / total * 100;
+    const start = cumulativePercentage;
+    const end = cumulativePercentage + percentage;
+    cumulativePercentage = end;
+    return `${segment.color} ${start}% ${end}%`;
+  }).join(", ");
+  return /* @__PURE__ */ jsxs3("div", { className: "p-4 h-full flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx5("h3", { className: "text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center flex-shrink-0", children: widgetData.label }),
+    /* @__PURE__ */ jsx5("div", { className: "flex-1 flex items-center justify-center min-h-0", children: /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className: "w-24 h-24 rounded-full",
+          style: {
+            background: `conic-gradient(${gradientStops})`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx5("div", { className: "w-8 h-8 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx5("span", { className: "text-xs font-bold text-gray-600 dark:text-gray-300", children: total }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-2 gap-1 mt-2 flex-shrink-0", children: widgetData.segments.map((segment, index) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 min-w-0", children: [
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className: "w-2 h-2 rounded-full flex-shrink-0",
+          style: { backgroundColor: segment.color }
+        }
+      ),
+      /* @__PURE__ */ jsx5("span", { className: "text-xs text-gray-600 dark:text-gray-400 truncate", children: segment.name })
+    ] }, index)) })
+  ] });
+}
+function PieChartPreview() {
+  return /* @__PURE__ */ jsx5("div", { className: "p-2 h-16 flex items-center justify-center bg-gray-50 dark:bg-gray-800 rounded", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx5("div", { className: "w-8 h-8 rounded-full bg-gradient-to-r from-blue-400 via-red-400 to-green-400 animate-pulse" }),
+      /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx5("div", { className: "w-3 h-3 bg-gray-50 dark:bg-gray-800 rounded-full" }) })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: "Pie Chart" })
+  ] }) });
+}
+
+// src/components/widgets/BarChartWidget.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "preact/jsx-runtime";
+function BarChartWidget({ data }) {
+  const defaultData = {
+    label: "Monthly Revenue",
+    data: [
+      { name: "Jan", value: 65, color: "#3B82F6" },
+      { name: "Feb", value: 85, color: "#3B82F6" },
+      { name: "Mar", value: 75, color: "#3B82F6" },
+      { name: "Apr", value: 95, color: "#3B82F6" },
+      { name: "May", value: 80, color: "#3B82F6" },
+      { name: "Jun", value: 90, color: "#3B82F6" }
+    ]
+  };
+  const widgetData = data || defaultData;
+  const maxValue = Math.max(...widgetData.data.map((item) => item.value));
+  return /* @__PURE__ */ jsxs4("div", { className: "p-4 h-full flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx6("h3", { className: "text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center flex-shrink-0", children: widgetData.label }),
+    /* @__PURE__ */ jsx6("div", { className: "flex-1 flex items-end justify-between gap-1 px-2 min-h-0", children: widgetData.data.map((item, index) => {
+      const height = item.value / maxValue * 100;
+      return /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx6("div", { className: "flex-1 flex items-end w-full", children: /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "w-full rounded-t transition-all duration-500 hover:opacity-80",
+            style: {
+              height: `${height}%`,
+              backgroundColor: item.color || "#3B82F6",
+              minHeight: "4px"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx6("div", { className: "text-xs text-gray-600 dark:text-gray-400 mt-1 text-center", children: item.name }),
+        /* @__PURE__ */ jsx6("div", { className: "text-xs text-gray-500 dark:text-gray-500", children: item.value })
+      ] }, index);
+    }) })
+  ] });
+}
+function BarChartPreview() {
+  const heights = [60, 80, 40, 90, 70];
+  return /* @__PURE__ */ jsxs4("div", { className: "p-2 h-16 flex items-center justify-center bg-gray-50 dark:bg-gray-800 rounded", children: [
+    /* @__PURE__ */ jsx6("div", { className: "flex items-end gap-1 h-8", children: heights.map((height, index) => /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: "w-2 bg-blue-400 rounded-t animate-pulse",
+        style: {
+          height: `${height}%`,
+          animationDelay: `${index * 0.1}s`
+        }
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsx6("div", { className: "ml-2 text-xs text-gray-600 dark:text-gray-400", children: "Bar Chart" })
+  ] });
+}
+
+// src/components/widgets/LineChartWidget.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "preact/jsx-runtime";
+function LineChartWidget({ data }) {
+  const defaultData = {
+    label: "Performance Trend",
+    data: [
+      { name: "Jan", value: 30 },
+      { name: "Feb", value: 45 },
+      { name: "Mar", value: 35 },
+      { name: "Apr", value: 60 },
+      { name: "May", value: 55 },
+      { name: "Jun", value: 75 },
+      { name: "Jul", value: 70 }
+    ],
+    color: "#3B82F6"
+  };
+  const widgetData = data || defaultData;
+  const maxValue = Math.max(...widgetData.data.map((item) => item.value));
+  const minValue = Math.min(...widgetData.data.map((item) => item.value));
+  const range = maxValue - minValue;
+  const width = 200;
+  const height = 80;
+  const padding = 10;
+  const points = widgetData.data.map((item, index) => {
+    const x = padding + index / (widgetData.data.length - 1) * (width - 2 * padding);
+    const y = height - padding - (item.value - minValue) / range * (height - 2 * padding);
+    return { x, y, value: item.value, name: item.name };
+  });
+  const pathData = points.reduce((path, point, index) => {
+    const command = index === 0 ? "M" : "L";
+    return `${path} ${command} ${point.x} ${point.y}`;
+  }, "");
+  return /* @__PURE__ */ jsxs5("div", { className: "p-4 h-full flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx7("h3", { className: "text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center flex-shrink-0", children: widgetData.label }),
+    /* @__PURE__ */ jsx7("div", { className: "flex-1 flex items-center justify-center min-h-0", children: /* @__PURE__ */ jsx7("div", { className: "relative max-w-full", children: /* @__PURE__ */ jsxs5("svg", { width, height, className: "max-w-full h-auto", children: [
+      [0, 25, 50, 75, 100].map((percent, index) => {
+        const y = height - padding - percent / 100 * (height - 2 * padding);
+        return /* @__PURE__ */ jsx7(
+          "line",
+          {
+            x1: padding,
+            y1: y,
+            x2: width - padding,
+            y2: y,
+            stroke: "currentColor",
+            strokeWidth: "0.5",
+            opacity: "0.2",
+            className: "text-gray-400"
+          },
+          index
+        );
+      }),
+      /* @__PURE__ */ jsx7(
+        "path",
+        {
+          d: pathData,
+          fill: "none",
+          stroke: widgetData.color || "#3B82F6",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      points.map((point, index) => /* @__PURE__ */ jsx7(
+        "circle",
+        {
+          cx: point.x,
+          cy: point.y,
+          r: "3",
+          fill: widgetData.color || "#3B82F6",
+          className: "hover:r-4 transition-all"
+        },
+        index
+      ))
+    ] }) }) }),
+    /* @__PURE__ */ jsx7("div", { className: "flex justify-between text-xs text-gray-600 dark:text-gray-400 mt-2 flex-shrink-0 gap-1", children: widgetData.data.map((item, index) => /* @__PURE__ */ jsx7("span", { className: "text-center truncate min-w-0 flex-1", children: item.name }, index)) })
+  ] });
+}
+function LineChartPreview() {
+  return /* @__PURE__ */ jsx7("div", { className: "p-2 h-16 flex items-center justify-center bg-gray-50 dark:bg-gray-800 rounded", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs5("svg", { width: "32", height: "20", className: "overflow-visible", children: [
+      /* @__PURE__ */ jsx7(
+        "path",
+        {
+          d: "M 2 18 L 8 12 L 14 15 L 20 8 L 26 10 L 30 6",
+          fill: "none",
+          stroke: "#3B82F6",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          className: "animate-pulse"
+        }
+      ),
+      [2, 8, 14, 20, 26, 30].map((x, index) => /* @__PURE__ */ jsx7(
+        "circle",
+        {
+          cx: x,
+          cy: [18, 12, 15, 8, 10, 6][index],
+          r: "1",
+          fill: "#3B82F6",
+          className: "animate-pulse",
+          style: { animationDelay: `${index * 0.1}s` }
+        },
+        index
+      ))
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: "Line Chart" })
+  ] }) });
+}
+
+// src/components/widgets/index.ts
+var widgetRegistry = {
+  basic: BasicWidget,
+  progress: ProgressBarWidget,
+  pie: PieChartWidget,
+  bar: BarChartWidget,
+  line: LineChartWidget
+};
+var previewRegistry = {
+  basic: BasicWidgetPreview,
+  progress: ProgressBarPreview,
+  pie: PieChartPreview,
+  bar: BarChartPreview,
+  line: LineChartPreview
+};
+function getWidgetComponent(type) {
+  return widgetRegistry[type] || BasicWidget;
+}
+function getPreviewComponent(type) {
+  return previewRegistry[type] || BasicWidgetPreview;
+}
+
+// src/components/DashboardToolbar.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "preact/jsx-runtime";
+var defaultWidgetTypes = [
+  {
+    id: "basic",
+    type: "basic",
+    title: "Basic Widget",
+    icon: /* @__PURE__ */ jsx8(Grid2, { size: 20 }),
+    defaultSize: { w: 4, h: 4 },
+    description: "A simple widget for general content",
+    component: widgetRegistry.basic,
+    preview: previewRegistry.basic
+  },
+  {
+    id: "progress",
+    type: "progress",
+    title: "Progress Bar",
+    icon: /* @__PURE__ */ jsx8(TrendingUp, { size: 20 }),
+    defaultSize: { w: 4, h: 3 },
+    description: "Display progress with visual bar",
+    component: widgetRegistry.progress,
+    preview: previewRegistry.progress
+  }
+];
+function DashboardToolbar({
+  isEditMode,
+  onToggleMode,
+  onAutoOrganize,
+  onToggleFixedHeight,
+  isFixedHeight,
+  gridDimensions,
+  itemCount,
+  isAddWidgetMode = false,
+  onToggleAddWidgetMode,
+  onAddWidget,
+  availableWidgetTypes = defaultWidgetTypes
+}) {
+  const [scrollPosition, setScrollPosition] = React.useState(0);
+  const carouselRef = React.useRef(null);
+  const scroll = (direction) => {
+    if (!carouselRef.current) return;
+    const scrollAmount = 200;
+    const newPosition = direction === "left" ? Math.max(0, scrollPosition - scrollAmount) : scrollPosition + scrollAmount;
+    carouselRef.current.scrollTo({ left: newPosition, behavior: "smooth" });
+    setScrollPosition(newPosition);
+  };
+  return /* @__PURE__ */ jsx8(TooltipProvider, { children: /* @__PURE__ */ jsxs6("div", { className: "bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-6", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx8(
+          Button,
+          {
+            onClick: onToggleMode,
+            variant: isEditMode ? "default" : "outline",
+            size: "sm",
+            className: "gap-2 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600",
+            children: isEditMode ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+              /* @__PURE__ */ jsx8(Edit3, { size: 16 }),
+              "Edit Mode"
+            ] }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+              /* @__PURE__ */ jsx8(Eye, { size: 16 }),
+              "View Mode"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "text-sm text-gray-500 dark:text-gray-200 px-2", children: [
+          "Grid: ",
+          gridDimensions.cols,
+          "\xD7",
+          gridDimensions.rows
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-3", children: isEditMode && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        isAddWidgetMode ? /* @__PURE__ */ jsxs6(
+          Button,
+          {
+            onClick: onToggleAddWidgetMode,
+            variant: "outline",
+            size: "sm",
+            className: "gap-2 text-red-600 hover:text-red-700 border-red-200 hover:border-red-300 bg-white dark:bg-gray-800",
+            children: [
+              /* @__PURE__ */ jsx8(X, { size: 16 }),
+              "Cancel"
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs6(
+          Button,
+          {
+            onClick: onToggleAddWidgetMode,
+            variant: "default",
+            size: "sm",
+            className: "gap-2 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600",
+            children: [
+              /* @__PURE__ */ jsx8(Plus, { size: 16 }),
+              "Add Widget"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          Button,
+          {
+            onClick: onToggleFixedHeight,
+            variant: "secondary",
+            size: "sm",
+            className: "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200",
+            children: isFixedHeight ? "Auto Height" : "Fix Height"
+          }
+        ),
+        /* @__PURE__ */ jsxs6(
+          Button,
+          {
+            onClick: onAutoOrganize,
+            variant: "outline",
+            size: "sm",
+            disabled: itemCount === 0,
+            className: "gap-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800",
+            children: [
+              /* @__PURE__ */ jsx8(Zap, { size: 16 }),
+              "Auto Organize"
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    isEditMode && isAddWidgetMode && /* @__PURE__ */ jsxs6("div", { className: "mt-4 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-2 mb-3", children: /* @__PURE__ */ jsx8("h3", { className: "font-medium text-gray-800 dark:text-gray-200", children: "Select a widget to add:" }) }),
+      /* @__PURE__ */ jsx8("div", { className: "relative", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx8(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => scroll("left"),
+            className: "flex-shrink-0 h-12 w-8 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200",
+            disabled: scrollPosition === 0,
+            children: /* @__PURE__ */ jsx8(ChevronLeft, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            ref: carouselRef,
+            className: "flex gap-3 overflow-x-auto scrollbar-hide flex-1",
+            style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+            children: availableWidgetTypes.map((widget) => {
+              const PreviewComponent = widget.preview || getPreviewComponent(widget.type);
+              return /* @__PURE__ */ jsxs6(Tooltip, { children: [
+                /* @__PURE__ */ jsx8(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
+                  Button,
+                  {
+                    variant: "outline",
+                    onClick: () => onAddWidget?.(widget),
+                    className: "flex-shrink-0 h-20 w-24 p-2 flex flex-col items-center gap-1 hover:border-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/50 bg-white dark:bg-gray-800 transition-colors group border-gray-200 dark:border-gray-700",
+                    children: [
+                      /* @__PURE__ */ jsx8("div", { className: "text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300", children: widget.icon }),
+                      /* @__PURE__ */ jsx8("span", { className: "text-xs font-medium text-center leading-tight text-gray-700 dark:text-gray-200", children: widget.title })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx8(TooltipContent, { children: /* @__PURE__ */ jsxs6("div", { className: "p-3", children: [
+                  /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 mb-2", children: [
+                    /* @__PURE__ */ jsx8("div", { className: "text-blue-600 dark:text-blue-400", children: widget.icon }),
+                    /* @__PURE__ */ jsxs6("div", { children: [
+                      /* @__PURE__ */ jsx8("h4", { className: "font-medium text-sm text-gray-800 dark:text-gray-200", children: widget.title }),
+                      /* @__PURE__ */ jsxs6("p", { className: "text-xs text-gray-500 dark:text-gray-200", children: [
+                        "Size: ",
+                        widget.defaultSize.w,
+                        "\xD7",
+                        widget.defaultSize.h
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx8("p", { className: "text-xs text-gray-600 dark:text-gray-200 mb-3", children: widget.description }),
+                  /* @__PURE__ */ jsx8("div", { className: "h-16 border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-750 overflow-hidden", children: /* @__PURE__ */ jsx8(PreviewComponent, {}) })
+                ] }) })
+              ] }, widget.id);
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => scroll("right"),
+            className: "flex-shrink-0 h-12 w-8 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200",
+            children: /* @__PURE__ */ jsx8(ChevronRight, { size: 16 })
+          }
+        )
+      ] }) })
+    ] })
+  ] }) });
+}
+
+// src/lib/useDashboardController.ts
+import { useState as useState2, useCallback } from "react";
+function useDashboardController({
+  initialItems = [],
+  initialEditMode = false
+} = {}) {
+  const [items, setItems] = useState2(initialItems);
+  const [isEditMode, setIsEditMode] = useState2(initialEditMode);
+  const addItem = useCallback((item) => {
+    setItems((prev) => [...prev, item]);
+  }, []);
+  const removeItem = useCallback((id) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  const updateItem = useCallback((id, updates) => {
+    setItems(
+      (prev) => prev.map((item) => item.id === id ? { ...item, ...updates } : item)
+    );
+  }, []);
+  const clear = useCallback(() => {
+    setItems([]);
+  }, []);
+  const save = useCallback(() => {
+    const serializedItems = items.map(({ content: _content, ...rest }) => rest);
+    return {
+      items: serializedItems
+    };
+  }, [items]);
+  const load = useCallback((state) => {
+    if (state && Array.isArray(state.items)) {
+      setItems(state.items);
+    }
+  }, []);
+  const toggleEditMode = useCallback(() => {
+    setIsEditMode((prev) => !prev);
+  }, []);
+  return {
+    items,
+    addItem,
+    removeItem,
+    updateItem,
+    setItems,
+    save,
+    load,
+    clear,
+    isEditMode,
+    toggleEditMode,
+    setEditMode: setIsEditMode
+  };
+}
+
+// src/constants.ts
+var GRID_SIZE = 40;
+var MARGIN = 8;
+var CELL_SIZE = GRID_SIZE + MARGIN;
+var ANIMATION_DURATION = 300;
+var MIN_SIZE = 2;
+var MAX_SIZE = 24;
+var CONTAINER_PADDING = 16;
+var MIN_CONTAINER_HEIGHT = 200;
+var DEBOUNCE_DELAY = 150;
+
+// src/components/Dashboard.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "preact/jsx-runtime";
+var createWidgetRenderer = (widgetRegistry2) => (item) => {
+  let WidgetComponent;
+  if (widgetRegistry2 && widgetRegistry2[item.type]) {
+    WidgetComponent = widgetRegistry2[item.type];
+  } else {
+    WidgetComponent = getWidgetComponent(item.type);
+  }
+  return /* @__PURE__ */ jsx9(WidgetComponent, { id: item.id, title: item.title, type: item.type });
+};
+function Dashboard({
+  availableWidgetTypes = [],
+  initialItems = [],
+  widgetRegistry: widgetRegistry2,
+  onItemsChange,
+  className = "",
+  enableEditMode = true,
+  defaultEditMode = true,
+  // Grid appearance
+  gridMode = "elegant",
+  // Toolbar customization options
+  showDefaultToolbar = true,
+  customToolbar,
+  toolbarClassName = "",
+  // Exposed action callbacks
+  onEditModeChange,
+  onAddWidgetModeChange,
+  onFixedHeightChange,
+  controller: externalController
+}) {
+  const renderWidgetContent = useMemo(() => createWidgetRenderer(widgetRegistry2), [widgetRegistry2]);
+  const transformInitialItems = useCallback2((items2) => {
+    return items2.map((item) => ({
+      ...item,
+      content: () => renderWidgetContent(item)
+    }));
+  }, [renderWidgetContent]);
+  const internalController = useDashboardController({
+    initialItems: transformInitialItems(initialItems),
+    initialEditMode: enableEditMode ? defaultEditMode : false
+  });
+  const controller = externalController || internalController;
+  const items = useMemo(() => {
+    return controller.items.map((item) => {
+      if (!item.content) {
+        return { ...item, content: () => renderWidgetContent(item) };
+      }
+      return item;
+    });
+  }, [controller.items, renderWidgetContent]);
+  const setItems = controller.setItems;
+  const isEditMode = controller.isEditMode;
+  const setIsEditMode = controller.setEditMode;
+  const [nextId, setNextId] = useState3(() => {
+    if (initialItems.length === 0) return 1;
+    const maxId = Math.max(...initialItems.map((item) => parseInt(item.id) || 0));
+    return maxId + 1;
+  });
+  const [dragState, setDragState] = useState3(null);
+  const [resizeState, setResizeState] = useState3(null);
+  const [preview, setPreview] = useState3(null);
+  const [gridDimensions, setGridDimensions] = useState3({ width: 800, height: 600, cols: 16, rows: 12 });
+  const [maxHeight, setMaxHeight] = useState3(null);
+  const [isAddWidgetMode, setIsAddWidgetMode] = useState3(false);
+  const containerRef = useRef2(null);
+  const debounceTimer = useRef2(null);
+  const isInitialLoad = useRef2(true);
+  useEffect2(() => {
+    if (onItemsChange && !isInitialLoad.current) {
+      const itemsForCallback = items.map(({ content, ...item }) => item);
+      onItemsChange(itemsForCallback);
+    }
+    isInitialLoad.current = false;
+  }, [items, onItemsChange]);
+  useEffect2(() => {
+    if (externalController) return;
+    const hasNewItems = initialItems.some((initItem) => !items.find((item) => item.id === initItem.id));
+    const hasMissingItems = items.some((item) => !initialItems.find((initItem) => initItem.id === item.id) && initialItems.length > 0);
+    if (hasNewItems || hasMissingItems && items.length < initialItems.length) {
+      const transformedItems = transformInitialItems(initialItems);
+      setItems(transformedItems);
+      isInitialLoad.current = true;
+    }
+  }, [initialItems, transformInitialItems, externalController]);
+  const itemsOverlap = (a, b) => !(a.x + a.w <= b.x || b.x + b.w <= a.x || a.y + a.h <= b.y || b.y + b.h <= a.y);
+  const isValidPosition = (item, allItems, excludeId) => {
+    if (item.w < MIN_SIZE || item.h < MIN_SIZE) return false;
+    if (item.x < 0 || item.y < 0 || item.x + item.w > gridDimensions.cols || item.y + item.h > gridDimensions.rows) {
+      return false;
+    }
+    return !allItems.some((other) => {
+      if (other.id === item.id || other.id === excludeId) return false;
+      return itemsOverlap(item, other);
+    });
+  };
+  function pixelToGrid(px, py, forCoord = "generic") {
+    if (forCoord === "x") return Math.round(px / CELL_SIZE);
+    if (forCoord === "y") return Math.round(py / CELL_SIZE);
+    return {
+      // Fallback to old logic if used generically, but prefer specific coord.
+      x: Math.round((px - CONTAINER_PADDING) / CELL_SIZE),
+      y: Math.round((py - CONTAINER_PADDING) / CELL_SIZE)
+    };
+  }
+  const gridToPixel = (x, y) => ({
+    x: x * CELL_SIZE,
+    y: y * CELL_SIZE
+  });
+  const findSafePosition = (item, existingItems, preferCurrentOverStoredOriginal = false) => {
+    let currentW = Math.min(item.w, gridDimensions.cols);
+    let currentH = item.h;
+    let startX = item.x;
+    let startY = item.y;
+    if (item.originalX !== void 0 && item.originalY !== void 0 && !preferCurrentOverStoredOriginal) {
+      startX = item.originalX;
+      startY = item.originalY;
+      if (item.originalW !== void 0) currentW = Math.min(item.originalW, gridDimensions.cols);
+      if (item.originalH !== void 0) currentH = item.originalH;
+    }
+    startX = Math.min(startX, gridDimensions.cols - currentW);
+    const testItemInitial = { ...item, x: startX, y: startY, w: currentW, h: currentH };
+    if (isValidPosition(testItemInitial, existingItems)) {
+      return { ...testItemInitial, isAnimating: true };
+    }
+    if (startX === 0 && startY === 0 && existingItems.length > 0) {
+      const maxY = Math.max(...existingItems.map((it) => it.y + it.h), 0);
+      for (let y = 0; y <= Math.max(maxY, gridDimensions.rows - currentH); y++) {
+        for (let x = 0; x <= gridDimensions.cols - currentW; x++) {
+          const candidateItem = { ...item, x, y, w: currentW, h: currentH };
+          if (isValidPosition(candidateItem, existingItems)) {
+            return { ...candidateItem, isAnimating: true };
+          }
+        }
+      }
+    }
+    const maxSearchDistance = Math.max(gridDimensions.cols, gridDimensions.rows);
+    for (let distance = 1; distance <= maxSearchDistance; distance++) {
+      for (let dy = -distance; dy <= distance; dy++) {
+        for (let dx = -distance; dx <= distance; dx++) {
+          if (Math.abs(dx) !== distance && Math.abs(dy) !== distance) continue;
+          const testX = startX + dx;
+          const testY = startY + dy;
+          if (testX < 0 || testX + currentW > gridDimensions.cols || testY < 0 || testY + currentH > gridDimensions.rows) continue;
+          const candidateItem = { ...item, x: testX, y: testY, w: currentW, h: currentH };
+          if (isValidPosition(candidateItem, existingItems)) {
+            return { ...candidateItem, isAnimating: true };
+          }
+        }
+      }
+    }
+    for (let y = 0; y <= gridDimensions.rows - currentH; y++) {
+      for (let x = 0; x <= gridDimensions.cols - currentW; x++) {
+        const candidateItem = { ...item, x, y, w: currentW, h: currentH };
+        if (isValidPosition(candidateItem, existingItems)) {
+          return { ...candidateItem, isAnimating: true };
+        }
+      }
+    }
+    const finalW = Math.min(currentW, gridDimensions.cols);
+    const finalH = Math.min(currentH, gridDimensions.rows);
+    return { ...item, x: 0, y: 0, w: finalW, h: finalH, isAnimating: true };
+  };
+  const detectAndFixOverlaps = (currentItems, tryReAnchorToOriginals = false) => {
+    const result = currentItems.map((i) => ({ ...i }));
+    let hasOverlaps = true;
+    let attempts = 0;
+    const maxAttempts = Math.max(20, result.length * 2);
+    while (hasOverlaps && attempts < maxAttempts) {
+      hasOverlaps = false;
+      attempts++;
+      result.sort((a, b) => a.y - b.y || a.x - b.x);
+      for (let i = 0; i < result.length; i++) {
+        for (let j = i + 1; j < result.length; j++) {
+          if (itemsOverlap(result[i], result[j])) {
+            hasOverlaps = true;
+            const itemToMoveIndex = result[j].y > result[i].y || result[j].y === result[i].y && result[j].x > result[i].x ? j : i;
+            const itemToMove = result[itemToMoveIndex];
+            const fixedItems = result.filter((_, idx) => idx !== itemToMoveIndex);
+            const newPositionData = findSafePosition(itemToMove, fixedItems, !tryReAnchorToOriginals);
+            result[itemToMoveIndex] = {
+              ...itemToMove,
+              x: newPositionData.x,
+              y: newPositionData.y,
+              w: newPositionData.w,
+              h: newPositionData.h,
+              isAnimating: newPositionData.isAnimating
+            };
+          }
+        }
+      }
+    }
+    return result;
+  };
+  const calculateDimensions = useCallback2(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const availableWidth = rect.width - CONTAINER_PADDING * 2;
+    const newCols = Math.max(MIN_SIZE, Math.floor((availableWidth + MARGIN) / CELL_SIZE));
+    const tempClampedItems = items.map((it) => ({
+      ...it,
+      w: Math.min(it.originalW !== void 0 ? it.originalW : it.w, newCols)
+      // Use originalW if available
+    }));
+    const maxY = tempClampedItems.length > 0 ? Math.max(...tempClampedItems.map((item) => item.y + item.h), 0) : MIN_SIZE;
+    const minRowsForMinHeight = Math.ceil((MIN_CONTAINER_HEIGHT - CONTAINER_PADDING * 2 + MARGIN) / CELL_SIZE);
+    const requiredRows = Math.max(minRowsForMinHeight, maxY + 4);
+    const newHeight = maxHeight || Math.max(
+      MIN_CONTAINER_HEIGHT,
+      requiredRows * CELL_SIZE - MARGIN + CONTAINER_PADDING * 2
+    );
+    const oldCols = gridDimensions.cols;
+    const oldRows = gridDimensions.rows;
+    setGridDimensions({
+      width: rect.width,
+      // Updated to use full container width
+      height: newHeight,
+      cols: newCols,
+      rows: requiredRows
+    });
+    if ((newCols !== oldCols || requiredRows > oldRows + 2) && newCols > 0 && items.length > 0) {
+      reflowItems(newCols, requiredRows);
+    }
+  }, [items, maxHeight, gridDimensions.cols, gridDimensions.rows]);
+  const reflowItems = (newCols, newRows) => {
+    const processedItems = [];
+    const isValidPositionForNewGrid = (item, allItems, excludeId) => {
+      if (item.w < MIN_SIZE || item.h < MIN_SIZE) return false;
+      if (item.x < 0 || item.y < 0 || item.x + item.w > newCols || item.y + item.h > newRows) {
+        return false;
+      }
+      return !allItems.some((other) => {
+        if (other.id === item.id || other.id === excludeId) return false;
+        return itemsOverlap(item, other);
+      });
+    };
+    const sortedItems = [...items].sort((a, b) => {
+      const aHasOriginal = a.originalX !== void 0 && a.originalY !== void 0;
+      const bHasOriginal = b.originalX !== void 0 && b.originalY !== void 0;
+      if (aHasOriginal && !bHasOriginal) return -1;
+      if (!aHasOriginal && bHasOriginal) return 1;
+      if (aHasOriginal && bHasOriginal) {
+        if (a.originalY !== b.originalY) return a.originalY - b.originalY;
+        return a.originalX - b.originalX;
+      }
+      return parseInt(a.id) - parseInt(b.id);
+    });
+    const itemsToProcess = sortedItems.map((item) => {
+      const targetW = item.originalW !== void 0 ? Math.min(item.originalW, newCols) : Math.min(item.w, newCols);
+      const targetH = item.originalH !== void 0 ? item.originalH : item.h;
+      return {
+        ...item,
+        w: Math.max(MIN_SIZE, targetW),
+        // Ensure min width
+        h: Math.max(MIN_SIZE, targetH),
+        // Ensure min height
+        isAnimating: true
+      };
+    });
+    if (newCols > gridDimensions.cols) {
+      const restored = [];
+      const needsRepositioning = [];
+      for (const item of itemsToProcess) {
+        if (item.originalX !== void 0 && item.originalY !== void 0) {
+          const restoredItem = {
+            ...item,
+            // Contains already adjusted w/h
+            x: item.originalX,
+            y: item.originalY
+          };
+          if (restoredItem.x + restoredItem.w <= newCols && restoredItem.y + restoredItem.h <= newRows && isValidPositionForNewGrid(restoredItem, restored)) {
+            restored.push(restoredItem);
+          } else {
+            needsRepositioning.push(item);
+          }
+        } else {
+          needsRepositioning.push(item);
+        }
+      }
+      for (const item of needsRepositioning) {
+        const safePosData = findSafePositionForNewGrid(item, restored, false, newCols, newRows);
+        restored.push({
+          ...item,
+          // Contains item's target w/h
+          x: safePosData.x,
+          y: safePosData.y,
+          w: safePosData.w,
+          // Use width from findSafePosition
+          h: safePosData.h
+          // Use height from findSafePosition
+          // originalX/Y/W/H are preserved from item
+        });
+      }
+      setItems(detectAndFixOverlaps(restored, true));
+    } else {
+      for (const item of itemsToProcess) {
+        let targetX = item.x;
+        if (newCols < gridDimensions.cols) {
+          targetX = Math.min(item.x, Math.max(0, newCols - item.w));
+        }
+        const itemForSafePos = { ...item, x: targetX };
+        const safePosData = findSafePositionForNewGrid(itemForSafePos, processedItems, true, newCols, newRows);
+        processedItems.push({
+          ...item,
+          // Contains item's target w/h
+          x: safePosData.x,
+          y: safePosData.y,
+          w: safePosData.w,
+          h: safePosData.h
+        });
+      }
+      setItems(detectAndFixOverlaps(processedItems, true));
+    }
+    setTimeout(() => setItems((prev) => prev.map((it) => ({ ...it, isAnimating: false }))), ANIMATION_DURATION);
+  };
+  const findSafePositionForNewGrid = (item, existingItems, preferCurrentOverStoredOriginal = false, cols, rows) => {
+    let currentW = Math.min(item.w, cols);
+    let currentH = item.h;
+    let startX = item.x;
+    let startY = item.y;
+    if (item.originalX !== void 0 && item.originalY !== void 0 && !preferCurrentOverStoredOriginal) {
+      startX = item.originalX;
+      startY = item.originalY;
+      if (item.originalW !== void 0) currentW = Math.min(item.originalW, cols);
+      if (item.originalH !== void 0) currentH = item.originalH;
+    }
+    startX = Math.min(startX, cols - currentW);
+    const testItemInitial = { ...item, x: startX, y: startY, w: currentW, h: currentH };
+    const isValidForNewGrid = (testItem) => {
+      if (testItem.w < MIN_SIZE || testItem.h < MIN_SIZE) return false;
+      if (testItem.x < 0 || testItem.y < 0 || testItem.x + testItem.w > cols || testItem.y + testItem.h > rows) {
+        return false;
+      }
+      return !existingItems.some((other) => {
+        if (other.id === testItem.id) return false;
+        return itemsOverlap(testItem, other);
+      });
+    };
+    if (isValidForNewGrid(testItemInitial)) {
+      return { ...testItemInitial, isAnimating: true };
+    }
+    const maxSearchDistance = Math.max(cols, rows);
+    for (let distance = 1; distance <= maxSearchDistance; distance++) {
+      for (let dy = -distance; dy <= distance; dy++) {
+        for (let dx = -distance; dx <= distance; dx++) {
+          if (Math.abs(dx) !== distance && Math.abs(dy) !== distance) continue;
+          const testX = startX + dx;
+          const testY = startY + dy;
+          if (testX < 0 || testX + currentW > cols || testY < 0 || testY + currentH > rows) continue;
+          const candidateItem = { ...item, x: testX, y: testY, w: currentW, h: currentH };
+          if (isValidForNewGrid(candidateItem)) {
+            return { ...candidateItem, isAnimating: true };
+          }
+        }
+      }
+    }
+    for (let y = 0; y <= rows - currentH; y++) {
+      for (let x = 0; x <= cols - currentW; x++) {
+        const candidateItem = { ...item, x, y, w: currentW, h: currentH };
+        if (isValidForNewGrid(candidateItem)) {
+          return { ...candidateItem, isAnimating: true };
+        }
+      }
+    }
+    const finalW = Math.min(currentW, cols);
+    const finalH = Math.min(currentH, rows);
+    return { ...item, x: 0, y: 0, w: finalW, h: finalH, isAnimating: true };
+  };
+  const handleMouseMove = useCallback2((e) => {
+    const gridContentRect = containerRef.current?.getBoundingClientRect();
+    if (!gridContentRect) return;
+    const mouseXInGridContent = e.clientX - gridContentRect.left - CONTAINER_PADDING;
+    const mouseYInGridContent = e.clientY - gridContentRect.top - CONTAINER_PADDING;
+    if (dragState && preview) {
+      const itemX = mouseXInGridContent - dragState.startX;
+      const itemY = mouseYInGridContent - dragState.startY;
+      const gridPos = {
+        x: pixelToGrid(itemX, 0, "x"),
+        // Only X coordinate matters for X grid position
+        y: pixelToGrid(0, itemY, "y")
+        // Only Y coordinate matters for Y grid position
+      };
+      let newX = Math.max(0, Math.min(gridDimensions.cols - preview.w, gridPos.x));
+      let newY = Math.max(0, Math.min(gridDimensions.rows - preview.h, gridPos.y));
+      setPreview({ ...preview, x: newX, y: newY });
+    }
+    if (resizeState && preview) {
+      let { x, y, w, h } = resizeState.originalItem;
+      const handle = resizeState.handle;
+      const dxInGridUnits = pixelToGrid(mouseXInGridContent - resizeState.startX, 0, "x");
+      const dyInGridUnits = pixelToGrid(0, mouseYInGridContent - resizeState.startY, "y");
+      if (handle.includes("e")) w = Math.max(MIN_SIZE, Math.min(MAX_SIZE, resizeState.originalItem.w + dxInGridUnits));
+      if (handle.includes("w")) {
+        const newW = Math.max(MIN_SIZE, Math.min(MAX_SIZE, resizeState.originalItem.w - dxInGridUnits));
+        x = resizeState.originalItem.x + (resizeState.originalItem.w - newW);
+        w = newW;
+      }
+      if (handle.includes("s")) h = Math.max(MIN_SIZE, Math.min(MAX_SIZE, resizeState.originalItem.h + dyInGridUnits));
+      if (handle.includes("n")) {
+        const newH = Math.max(MIN_SIZE, Math.min(MAX_SIZE, resizeState.originalItem.h - dyInGridUnits));
+        y = resizeState.originalItem.y + (resizeState.originalItem.h - newH);
+        h = newH;
+      }
+      x = Math.max(0, x);
+      y = Math.max(0, y);
+      w = Math.min(w, gridDimensions.cols - x);
+      h = Math.min(h, gridDimensions.rows - y);
+      w = Math.max(MIN_SIZE, w);
+      h = Math.max(MIN_SIZE, h);
+      setPreview({ ...preview, x, y, w, h });
+    }
+  }, [dragState, resizeState, preview, gridDimensions.cols, gridDimensions.rows]);
+  const handleMouseUp = useCallback2(() => {
+    if ((dragState || resizeState) && preview) {
+      const finalX = Math.max(0, Math.min(preview.x, gridDimensions.cols - MIN_SIZE));
+      const finalY = Math.max(0, Math.min(preview.y, gridDimensions.rows - MIN_SIZE));
+      const finalW = Math.max(MIN_SIZE, Math.min(preview.w, gridDimensions.cols - finalX));
+      const finalH = Math.max(MIN_SIZE, Math.min(preview.h, gridDimensions.rows - finalY));
+      const finalPreview = {
+        ...preview,
+        x: finalX,
+        y: finalY,
+        w: finalW,
+        h: finalH
+      };
+      const updatedItems = items.map((item) => {
+        if (item.id === (dragState?.id || resizeState?.id)) {
+          return {
+            ...finalPreview,
+            originalX: finalPreview.x,
+            originalY: finalPreview.y,
+            originalW: finalPreview.w,
+            originalH: finalPreview.h,
+            isAnimating: true
+          };
+        }
+        return item;
+      });
+      setItems(updatedItems);
+      setItems((prev) => detectAndFixOverlaps(prev.map((it) => ({ ...it, isAnimating: false })), true));
+    }
+    setDragState(null);
+    setResizeState(null);
+    setPreview(null);
+  }, [dragState, resizeState, preview, items, gridDimensions.cols, gridDimensions.rows]);
+  useEffect2(() => {
+    if (dragState || resizeState) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [dragState, resizeState, handleMouseMove, handleMouseUp]);
+  useEffect2(() => {
+    const observer = new ResizeObserver(() => {
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+      debounceTimer.current = setTimeout(calculateDimensions, DEBOUNCE_DELAY);
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+      calculateDimensions();
+    }
+    return () => {
+      observer.disconnect();
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    };
+  }, [calculateDimensions]);
+  const toggleEditMode = () => {
+    if (!enableEditMode) return;
+    const newEditMode = !isEditMode;
+    setIsEditMode(newEditMode);
+    setIsAddWidgetMode(false);
+    setDragState(null);
+    setResizeState(null);
+    setPreview(null);
+    onEditModeChange?.(newEditMode);
+  };
+  const toggleAddWidgetMode = () => {
+    if (!isEditMode) return;
+    const newAddWidgetMode = !isAddWidgetMode;
+    setIsAddWidgetMode(newAddWidgetMode);
+    onAddWidgetModeChange?.(newAddWidgetMode);
+  };
+  const toggleFixedHeight = () => {
+    const newMaxHeight = maxHeight === null ? MIN_CONTAINER_HEIGHT * 1.5 : null;
+    setMaxHeight(newMaxHeight);
+    onFixedHeightChange?.(newMaxHeight !== null);
+  };
+  const addWidgetAtPosition = (widgetConfig, x, y) => {
+    if (!isEditMode) return;
+    const tempItemForPositioning = {
+      id: "temp",
+      x: x ?? 0,
+      y: y ?? 0,
+      w: widgetConfig.defaultSize.w,
+      h: widgetConfig.defaultSize.h,
+      type: widgetConfig.type,
+      title: widgetConfig.title,
+      content: () => null,
+      originalX: x ?? 0,
+      originalY: y ?? 0,
+      originalW: widgetConfig.defaultSize.w,
+      originalH: widgetConfig.defaultSize.h
+    };
+    const safePosData = findSafePosition(tempItemForPositioning, items, false);
+    const newItem = {
+      id: nextId.toString(),
+      x: safePosData.x,
+      y: safePosData.y,
+      w: safePosData.w,
+      h: safePosData.h,
+      type: widgetConfig.type,
+      title: widgetConfig.title,
+      content: () => renderWidgetContent({ id: nextId.toString(), type: widgetConfig.type, title: widgetConfig.title }),
+      originalX: safePosData.x,
+      originalY: safePosData.y,
+      originalW: safePosData.w,
+      originalH: safePosData.h,
+      onMenuClick: widgetConfig.onMenuClick,
+      menuIcon: widgetConfig.menuIcon,
+      isAnimating: true
+    };
+    if (isValidPosition(newItem, items)) {
+      const newItems = [...items, newItem];
+      const itemsWithOverlapsFixed = detectAndFixOverlaps(newItems, true);
+      setItems(itemsWithOverlapsFixed);
+      setNextId((prevId) => prevId + 1);
+      setTimeout(() => {
+        setItems((prev) => prev.map((it) => ({ ...it, isAnimating: false })));
+      }, ANIMATION_DURATION);
+    } else {
+      const fallbackItem = { ...newItem, x: 0, y: 0, originalX: 0, originalY: 0 };
+      const newItems = [...items, fallbackItem];
+      const itemsWithOverlapsFixed = detectAndFixOverlaps(newItems, true);
+      setItems(itemsWithOverlapsFixed);
+      setNextId((prevId) => prevId + 1);
+      setTimeout(() => {
+        setItems((prev) => prev.map((it) => ({ ...it, isAnimating: false })));
+      }, ANIMATION_DURATION);
+    }
+  };
+  const removeItem = (id) => {
+    if (!isEditMode) return;
+    setItems(items.filter((item) => item.id !== id));
+  };
+  const autoOrganize = () => {
+    if (!isEditMode) return;
+    const sorted = [...items].sort((a, b) => {
+      const aArea = (a.originalW ?? a.w) * (a.originalH ?? a.h);
+      const bArea = (b.originalW ?? b.w) * (b.originalH ?? b.h);
+      return bArea - aArea || parseInt(a.id) - parseInt(b.id);
+    });
+    const organized = [];
+    for (const item of sorted) {
+      const targetW = Math.min(
+        item.originalW ?? item.w,
+        gridDimensions.cols
+      );
+      const targetH = item.originalH ?? item.h;
+      const itemToPlace = {
+        ...item,
+        w: Math.max(MIN_SIZE, targetW),
+        h: Math.max(MIN_SIZE, targetH),
+        isAnimating: true
+      };
+      let bestPosition = null;
+      let bestY = Infinity;
+      let bestX = Infinity;
+      for (let y = 0; y <= gridDimensions.rows - itemToPlace.h; y++) {
+        for (let x = 0; x <= gridDimensions.cols - itemToPlace.w; x++) {
+          const candidateItem = { ...itemToPlace, x, y };
+          const isValid = !organized.some(
+            (placedItem) => itemsOverlap(candidateItem, placedItem)
+          );
+          if (isValid) {
+            if (y < bestY || y === bestY && x < bestX) {
+              bestPosition = { x, y };
+              bestY = y;
+              bestX = x;
+              break;
+            }
+          }
+        }
+        if (bestPosition && bestY === y) break;
+      }
+      if (bestPosition) {
+        const organizedItem = {
+          ...item,
+          x: bestPosition.x,
+          y: bestPosition.y,
+          w: itemToPlace.w,
+          h: itemToPlace.h,
+          originalX: bestPosition.x,
+          originalY: bestPosition.y,
+          originalW: itemToPlace.w,
+          originalH: itemToPlace.h,
+          isAnimating: true
+        };
+        organized.push(organizedItem);
+      } else {
+        const safePositionData = findSafePosition(itemToPlace, organized, false);
+        const organizedItem = {
+          ...item,
+          x: safePositionData.x,
+          y: safePositionData.y,
+          w: safePositionData.w,
+          h: safePositionData.h,
+          originalX: safePositionData.x,
+          originalY: safePositionData.y,
+          originalW: safePositionData.w,
+          originalH: safePositionData.h,
+          isAnimating: true
+        };
+        organized.push(organizedItem);
+      }
+    }
+    setItems(organized);
+    setTimeout(() => {
+      setItems((prev) => prev.map((item) => ({ ...item, isAnimating: false })));
+    }, ANIMATION_DURATION);
+  };
+  const renderItem = (item, isPreview = false) => {
+    const pos = gridToPixel(item.x, item.y);
+    const itemWidth = Math.max(0, item.w);
+    const itemHeight = Math.max(0, item.h);
+    const size = {
+      width: itemWidth * GRID_SIZE + (itemWidth > 0 ? (itemWidth - 1) * MARGIN : 0),
+      height: itemHeight * GRID_SIZE + (itemHeight > 0 ? (itemHeight - 1) * MARGIN : 0)
+    };
+    const isActive = dragState?.id === item.id || resizeState?.id === item.id;
+    const handleMouseDownOnWidget = (e) => {
+      if (!isEditMode || isPreview) return;
+      e.preventDefault();
+      const rect = e.currentTarget.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const cornerSize = 20;
+      const isInTopLeft = mouseX <= cornerSize && mouseY <= cornerSize;
+      const isInTopRight = mouseX >= rect.width - cornerSize && mouseY <= cornerSize;
+      const isInBottomLeft = mouseX <= cornerSize && mouseY >= rect.height - cornerSize;
+      const isInBottomRight = mouseX >= rect.width - cornerSize && mouseY >= rect.height - cornerSize;
+      if (isInTopLeft || isInTopRight || isInBottomLeft || isInBottomRight) {
+        let handle = "";
+        if (isInTopLeft) handle = "nw";
+        else if (isInTopRight) handle = "ne";
+        else if (isInBottomLeft) handle = "sw";
+        else if (isInBottomRight) handle = "se";
+        const gridContentRect = containerRef.current?.getBoundingClientRect();
+        if (!gridContentRect) return;
+        setResizeState({
+          id: item.id,
+          startX: e.clientX - gridContentRect.left - CONTAINER_PADDING,
+          startY: e.clientY - gridContentRect.top - CONTAINER_PADDING,
+          originalItem: { ...item },
+          handle
+        });
+        setPreview({ ...item });
+      } else {
+        const gridContentRect = containerRef.current?.getBoundingClientRect();
+        if (!gridContentRect) return;
+        const mouseXInGridContent = e.clientX - gridContentRect.left - CONTAINER_PADDING;
+        const mouseYInGridContent = e.clientY - gridContentRect.top - CONTAINER_PADDING;
+        const itemPixelPos = gridToPixel(item.x, item.y);
+        setDragState({
+          id: item.id,
+          startX: mouseXInGridContent - itemPixelPos.x,
+          startY: mouseYInGridContent - itemPixelPos.y,
+          originalItem: { ...item }
+        });
+        setPreview({ ...item });
+      }
+    };
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: `group absolute rounded-lg border ${item.isAnimating || isPreview ? "transition-all duration-300" : ""} ${isPreview ? "bg-blue-100 dark:bg-blue-900/30 border-blue-300 dark:border-blue-600 border-2 opacity-80 z-50" : `bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg hover:shadow-xl dark:shadow-gray-900/50 z-10 ${isActive && !isPreview ? "opacity-50" : ""}`} ${isEditMode && !isPreview ? "cursor-grab active:cursor-grabbing" : "cursor-default"}`,
+        style: { left: pos.x, top: pos.y, width: size.width, height: size.height },
+        onMouseDown: handleMouseDownOnWidget,
+        children: [
+          !isPreview && isEditMode && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+            /* @__PURE__ */ jsx9("div", { className: "absolute top-0 left-0 w-5 h-5 cursor-nw-resize z-20" }),
+            /* @__PURE__ */ jsx9("div", { className: "absolute top-0 right-0 w-5 h-5 cursor-ne-resize z-20" }),
+            /* @__PURE__ */ jsx9("div", { className: "absolute bottom-0 left-0 w-5 h-5 cursor-sw-resize z-20" }),
+            /* @__PURE__ */ jsx9("div", { className: "absolute bottom-0 right-0 w-5 h-5 cursor-se-resize z-20" })
+          ] }),
+          /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              className: `flex items-center justify-between p-2 text-xs border-b select-none ${isPreview ? "bg-blue-50 dark:bg-blue-900/50 border-blue-200 dark:border-blue-700" : "bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-700 border-gray-200 dark:border-gray-700 hover:from-blue-100 hover:to-purple-100 dark:hover:from-gray-600 dark:hover:to-gray-600"}`,
+              children: [
+                /* @__PURE__ */ jsx9("span", { className: `font-medium truncate ${isPreview ? "text-blue-700 dark:text-blue-300" : "text-gray-700 dark:text-gray-200"}`, children: item.title }),
+                !isPreview && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+                  isEditMode && item.onMenuClick && /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      className: "text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 p-0.5",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        item.onMenuClick?.(e);
+                      },
+                      onMouseDown: (e) => e.stopPropagation(),
+                      title: "Widget options",
+                      children: item.menuIcon || /* @__PURE__ */ jsx9(MoreHorizontal, { size: 14 })
+                    }
+                  ),
+                  isEditMode && /* @__PURE__ */ jsx9(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeItem(item.id);
+                      },
+                      onMouseDown: (e) => e.stopPropagation(),
+                      className: "text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 p-0.5 hover:bg-red-50 dark:hover:bg-red-900/20 rounded",
+                      title: "Remove widget",
+                      children: /* @__PURE__ */ jsx9(X2, { size: 14 })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx9("div", { className: "p-1 flex items-center justify-center h-[calc(100%-30px)] overflow-auto", children: item.content ? item.content() : null })
+        ]
+      },
+      `${isPreview ? "preview-" : ""}${item.id}`
+    );
+  };
+  const dashboardActions = {
+    toggleEditMode,
+    toggleAddWidgetMode,
+    autoOrganize,
+    toggleFixedHeight,
+    addWidget: addWidgetAtPosition,
+    removeItem
+  };
+  const dashboardState = {
+    isEditMode,
+    isAddWidgetMode,
+    isFixedHeight: maxHeight !== null,
+    gridDimensions,
+    itemCount: items.length,
+    items
+  };
+  const customToolbarProps = {
+    state: dashboardState,
+    actions: dashboardActions,
+    availableWidgetTypes
+  };
+  const renderElegantGrid = () => /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "absolute pointer-events-none opacity-20",
+        style: {
+          top: CONTAINER_PADDING,
+          left: CONTAINER_PADDING,
+          right: CONTAINER_PADDING,
+          bottom: CONTAINER_PADDING,
+          backgroundImage: `
+            linear-gradient(to right, rgba(156, 163, 175, 0.25) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(156, 163, 175, 0.25) 1px, transparent 1px)
+          `,
+          backgroundSize: `${CELL_SIZE}px ${CELL_SIZE}px`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "absolute pointer-events-none dark:block hidden opacity-15",
+        style: {
+          top: CONTAINER_PADDING,
+          left: CONTAINER_PADDING,
+          right: CONTAINER_PADDING,
+          bottom: CONTAINER_PADDING,
+          backgroundImage: `
+            linear-gradient(to right, rgba(75, 85, 99, 0.3) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(75, 85, 99, 0.3) 1px, transparent 1px)
+          `,
+          backgroundSize: `${CELL_SIZE}px ${CELL_SIZE}px`
+        }
+      }
+    )
+  ] });
+  const renderDotsGrid = () => /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: "absolute pointer-events-none opacity-30 dark:opacity-20",
+      style: {
+        top: CONTAINER_PADDING,
+        left: CONTAINER_PADDING,
+        right: CONTAINER_PADDING,
+        bottom: CONTAINER_PADDING,
+        backgroundImage: `
+          radial-gradient(circle at center, rgba(156, 163, 175, 0.4) 1px, transparent 1px),
+          radial-gradient(circle at center, rgba(75, 85, 99, 0.5) 1px, transparent 1px)
+        `,
+        backgroundSize: `${CELL_SIZE}px ${CELL_SIZE}px`,
+        backgroundPosition: `${CELL_SIZE / 2}px ${CELL_SIZE / 2}px`
+      }
+    }
+  );
+  const renderHarshGrid = () => /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: "absolute opacity-20 dark:opacity-10 pointer-events-none",
+      style: {
+        top: CONTAINER_PADDING,
+        left: CONTAINER_PADDING,
+        right: CONTAINER_PADDING,
+        bottom: CONTAINER_PADDING,
+        backgroundImage: `
+          linear-gradient(to right, #ccc 1px, transparent 1px), 
+          linear-gradient(to bottom, #ccc 1px, transparent 1px)
+        `,
+        backgroundSize: `${CELL_SIZE}px ${CELL_SIZE}px`
+      }
+    }
+  );
+  const renderGrid = () => {
+    switch (gridMode) {
+      case "dots":
+        return renderDotsGrid();
+      case "harsh":
+        return renderHarshGrid();
+      case "blank":
+        return null;
+      case "elegant":
+      default:
+        return renderElegantGrid();
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: `p-4 bg-gray-50 dark:bg-gray-900 min-h-screen ${className}`, children: [
+    showDefaultToolbar && !customToolbar && /* @__PURE__ */ jsx9(
+      DashboardToolbar,
+      {
+        isEditMode,
+        onToggleMode: toggleEditMode,
+        onAutoOrganize: autoOrganize,
+        onToggleFixedHeight: toggleFixedHeight,
+        isFixedHeight: maxHeight !== null,
+        gridDimensions,
+        itemCount: items.length,
+        isAddWidgetMode,
+        onToggleAddWidgetMode: toggleAddWidgetMode,
+        onAddWidget: addWidgetAtPosition,
+        availableWidgetTypes
+      }
+    ),
+    customToolbar && /* @__PURE__ */ jsx9("div", { className: toolbarClassName, children: React2.isValidElement(customToolbar) ? customToolbar : React2.createElement(customToolbar, customToolbarProps) }),
+    /* @__PURE__ */ jsx9("div", { className: "w-full", children: /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref: containerRef,
+        className: `relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg w-full ${maxHeight ? "overflow-auto" : "overflow-hidden"}`,
+        style: { height: gridDimensions.height, minHeight: MIN_CONTAINER_HEIGHT, padding: CONTAINER_PADDING },
+        children: [
+          renderGrid(),
+          /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              className: "relative w-full",
+              style: { height: Math.max(0, gridDimensions.rows * CELL_SIZE - MARGIN), minHeight: `calc(100% - ${CONTAINER_PADDING * 2}px)` },
+              children: [
+                items.map((item) => renderItem(item)),
+                preview && renderItem(preview, true),
+                items.length === 0 && !isAddWidgetMode && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500", children: /* @__PURE__ */ jsxs7("div", { className: "text-center", children: [
+                  /* @__PURE__ */ jsx9("div", { className: "w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3", children: /* @__PURE__ */ jsx9(Plus2, { size: 24 }) }),
+                  /* @__PURE__ */ jsx9("p", { children: isEditMode ? 'Click "Add Widget" to start' : "No widgets" })
+                ] }) })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject('*,\n::before,\n::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: #e5e7eb;\n}\n::before,\n::after {\n  --tw-content: "";\n}\nhtml,\n:host {\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n  font-family:\n    ui-sans-serif,\n    system-ui,\n    sans-serif,\n    "Apple Color Emoji",\n    "Segoe UI Emoji",\n    "Segoe UI Symbol",\n    "Noto Color Emoji";\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  -webkit-tap-highlight-color: transparent;\n}\nbody {\n  margin: 0;\n  line-height: inherit;\n}\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\na {\n  color: inherit;\n  text-decoration: inherit;\n}\nb,\nstrong {\n  font-weight: bolder;\n}\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  font-size: 1em;\n}\nsmall {\n  font-size: 80%;\n}\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\nsup {\n  top: -0.5em;\n}\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\nbutton,\nselect {\n  text-transform: none;\n}\nbutton,\ninput:where([type=button]),\ninput:where([type=reset]),\ninput:where([type=submit]) {\n  -webkit-appearance: button;\n  background-color: transparent;\n  background-image: none;\n}\n:-moz-focusring {\n  outline: auto;\n}\n:-moz-ui-invalid {\n  box-shadow: none;\n}\nprogress {\n  vertical-align: baseline;\n}\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n[type=search] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\nsummary {\n  display: list-item;\n}\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nlegend {\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\ndialog {\n  padding: 0;\n}\ntextarea {\n  resize: vertical;\n}\ninput::-moz-placeholder,\ntextarea::-moz-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\nbutton,\n[role=button] {\n  cursor: pointer;\n}\n:disabled {\n  cursor: default;\n}\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n[hidden]:where(:not([hidden=until-found])) {\n  display: none;\n}\n:root {\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n  --card: 0 0% 100%;\n  --card-foreground: 222.2 84% 4.9%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 222.2 84% 4.9%;\n  --primary: 222.2 47.4% 11.2%;\n  --primary-foreground: 210 40% 98%;\n  --secondary: 210 40% 96.1%;\n  --secondary-foreground: 222.2 47.4% 11.2%;\n  --muted: 210 40% 96.1%;\n  --muted-foreground: 215.4 16.3% 46.9%;\n  --accent: 210 40% 96.1%;\n  --accent-foreground: 222.2 47.4% 11.2%;\n  --destructive: 0 84.2% 60.2%;\n  --destructive-foreground: 210 40% 98%;\n  --border: 214.3 31.8% 91.4%;\n  --input: 214.3 31.8% 91.4%;\n  --ring: 222.2 84% 4.9%;\n  --radius: 0.5rem;\n}\n* {\n  border-color: hsl(var(--border));\n}\nbody {\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n  width: 100vw;\n  max-width: 100vw;\n}\n#root {\n  width: 100%;\n  height: 100%;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.invisible {\n  visibility: hidden;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.right-4 {\n  right: 1rem;\n}\n.top-0 {\n  top: 0px;\n}\n.top-4 {\n  top: 1rem;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.z-40 {\n  z-index: 40;\n}\n.z-50 {\n  z-index: 50;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.mt-8 {\n  margin-top: 2rem;\n}\n.inline-block {\n  display: inline-block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.grid {\n  display: grid;\n}\n.hidden {\n  display: none;\n}\n.h-1\\.5 {\n  height: 0.375rem;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-11 {\n  height: 2.75rem;\n}\n.h-12 {\n  height: 3rem;\n}\n.h-16 {\n  height: 4rem;\n}\n.h-2 {\n  height: 0.5rem;\n}\n.h-20 {\n  height: 5rem;\n}\n.h-24 {\n  height: 6rem;\n}\n.h-3 {\n  height: 0.75rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-9 {\n  height: 2.25rem;\n}\n.h-\\[calc\\(100\\%-30px\\)\\] {\n  height: calc(100% - 30px);\n}\n.h-auto {\n  height: auto;\n}\n.h-full {\n  height: 100%;\n}\n.min-h-0 {\n  min-height: 0px;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.w-12 {\n  width: 3rem;\n}\n.w-16 {\n  width: 4rem;\n}\n.w-2 {\n  width: 0.5rem;\n}\n.w-24 {\n  width: 6rem;\n}\n.w-3 {\n  width: 0.75rem;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-48 {\n  width: 12rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-8 {\n  width: 2rem;\n}\n.w-full {\n  width: 100%;\n}\n.min-w-0 {\n  min-width: 0px;\n}\n.max-w-20 {\n  max-width: 5rem;\n}\n.max-w-7xl {\n  max-width: 80rem;\n}\n.max-w-full {\n  max-width: 100%;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n@keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n.animate-pulse {\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n.cursor-default {\n  cursor: default;\n}\n.cursor-grab {\n  cursor: grab;\n}\n.cursor-ne-resize {\n  cursor: ne-resize;\n}\n.cursor-nw-resize {\n  cursor: nw-resize;\n}\n.cursor-se-resize {\n  cursor: se-resize;\n}\n.cursor-sw-resize {\n  cursor: sw-resize;\n}\n.select-none {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.resize {\n  resize: both;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-start {\n  align-items: flex-start;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-0\\.5 {\n  gap: 0.125rem;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.overflow-x-auto {\n  overflow-x: auto;\n}\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: var(--radius);\n}\n.rounded-md {\n  border-radius: calc(var(--radius) - 2px);\n}\n.rounded-t {\n  border-top-left-radius: 0.25rem;\n  border-top-right-radius: 0.25rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-blue-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));\n}\n.border-blue-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n.border-green-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));\n}\n.border-input {\n  border-color: hsl(var(--input));\n}\n.border-red-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.bg-background {\n  background-color: hsl(var(--background));\n}\n.bg-blue-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));\n}\n.bg-destructive {\n  background-color: hsl(var(--destructive));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-green-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));\n}\n.bg-primary {\n  background-color: hsl(var(--primary));\n}\n.bg-secondary {\n  background-color: hsl(var(--secondary));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-gradient-to-br {\n  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));\n}\n.bg-gradient-to-r {\n  background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-blue-100 {\n  --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-blue-400 {\n  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-blue-50 {\n  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.via-red-400 {\n  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops:\n    var(--tw-gradient-from),\n    #f87171 var(--tw-gradient-via-position),\n    var(--tw-gradient-to);\n}\n.to-green-400 {\n  --tw-gradient-to: #4ade80 var(--tw-gradient-to-position);\n}\n.to-purple-100 {\n  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);\n}\n.to-purple-50 {\n  --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);\n}\n.p-0\\.5 {\n  padding: 0.125rem;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-3 {\n  padding: 0.75rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.p-8 {\n  padding: 2rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.leading-tight {\n  line-height: 1.25;\n}\n.text-blue-600 {\n  --tw-text-opacity: 1;\n  color: rgb(37 99 235 / var(--tw-text-opacity, 1));\n}\n.text-blue-700 {\n  --tw-text-opacity: 1;\n  color: rgb(29 78 216 / var(--tw-text-opacity, 1));\n}\n.text-destructive-foreground {\n  color: hsl(var(--destructive-foreground));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-700 {\n  --tw-text-opacity: 1;\n  color: rgb(21 128 61 / var(--tw-text-opacity, 1));\n}\n.text-green-900 {\n  --tw-text-opacity: 1;\n  color: rgb(20 83 45 / var(--tw-text-opacity, 1));\n}\n.text-primary {\n  color: hsl(var(--primary));\n}\n.text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.text-red-600 {\n  --tw-text-opacity: 1;\n  color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.text-secondary-foreground {\n  color: hsl(var(--secondary-foreground));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.opacity-15 {\n  opacity: 0.15;\n}\n.opacity-20 {\n  opacity: 0.2;\n}\n.opacity-30 {\n  opacity: 0.3;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.opacity-80 {\n  opacity: 0.8;\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.ring-1 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.ring-black {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));\n}\n.ring-opacity-5 {\n  --tw-ring-opacity: 0.05;\n}\n.ring-offset-background {\n  --tw-ring-offset-color: hsl(var(--background));\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.duration-500 {\n  transition-duration: 500ms;\n}\n@theme { --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); --color-card: hsl(var(--card)); --color-card-foreground: hsl(var(--card-foreground)); --color-popover: hsl(var(--popover)); --color-popover-foreground: hsl(var(--popover-foreground)); --color-primary: hsl(var(--primary)); --color-primary-foreground: hsl(var(--primary-foreground)); --color-secondary: hsl(var(--secondary)); --color-secondary-foreground: hsl(var(--secondary-foreground)); --color-muted: hsl(var(--muted)); --color-muted-foreground: hsl(var(--muted-foreground)); --color-accent: hsl(var(--accent)); --color-accent-foreground: hsl(var(--accent-foreground)); --color-destructive: hsl(var(--destructive)); --color-destructive-foreground: hsl(var(--destructive-foreground)); --color-border: hsl(var(--border)); --color-input: hsl(var(--input)); --color-ring: hsl(var(--ring)); --radius-lg: var(--radius); --radius-md: calc(var(--radius) - 2px); --radius-sm: calc(var(--radius) - 4px); }\n.hover\\:border-blue-300:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));\n}\n.hover\\:border-red-300:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));\n}\n.hover\\:bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:bg-blue-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-destructive\\/90:hover {\n  background-color: hsl(var(--destructive) / 0.9);\n}\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-primary\\/90:hover {\n  background-color: hsl(var(--primary) / 0.9);\n}\n.hover\\:bg-red-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-secondary\\/80:hover {\n  background-color: hsl(var(--secondary) / 0.8);\n}\n.hover\\:from-blue-100:hover {\n  --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.hover\\:to-purple-100:hover {\n  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);\n}\n.hover\\:text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:text-gray-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.hover\\:text-red-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.hover\\:text-red-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(185 28 28 / var(--tw-text-opacity, 1));\n}\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n.hover\\:opacity-80:hover {\n  opacity: 0.8;\n}\n.hover\\:shadow-xl:hover {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.focus-visible\\:outline-none:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-ring:focus-visible {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus-visible\\:ring-offset-2:focus-visible {\n  --tw-ring-offset-width: 2px;\n}\n.active\\:cursor-grabbing:active {\n  cursor: grabbing;\n}\n.disabled\\:pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n.group:hover .group-hover\\:text-blue-700 {\n  --tw-text-opacity: 1;\n  color: rgb(29 78 216 / var(--tw-text-opacity, 1));\n}\n@media (prefers-color-scheme: dark) {\n  .dark\\:block {\n    display: block;\n  }\n  .dark\\:border-blue-600 {\n    --tw-border-opacity: 1;\n    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));\n  }\n  .dark\\:border-blue-700 {\n    --tw-border-opacity: 1;\n    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));\n  }\n  .dark\\:border-gray-600 {\n    --tw-border-opacity: 1;\n    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));\n  }\n  .dark\\:border-gray-700 {\n    --tw-border-opacity: 1;\n    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));\n  }\n  .dark\\:bg-blue-900\\/30 {\n    background-color: rgb(30 58 138 / 0.3);\n  }\n  .dark\\:bg-blue-900\\/50 {\n    background-color: rgb(30 58 138 / 0.5);\n  }\n  .dark\\:bg-gray-600 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));\n  }\n  .dark\\:bg-gray-700 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));\n  }\n  .dark\\:bg-gray-800 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));\n  }\n  .dark\\:bg-gray-900 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));\n  }\n  .dark\\:from-gray-700 {\n    --tw-gradient-from: #374151 var(--tw-gradient-from-position);\n    --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);\n    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n  }\n  .dark\\:to-gray-600 {\n    --tw-gradient-to: #4b5563 var(--tw-gradient-to-position);\n  }\n  .dark\\:to-gray-700 {\n    --tw-gradient-to: #374151 var(--tw-gradient-to-position);\n  }\n  .dark\\:text-blue-300 {\n    --tw-text-opacity: 1;\n    color: rgb(147 197 253 / var(--tw-text-opacity, 1));\n  }\n  .dark\\:text-blue-400 {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity, 1));\n  }\n  .dark\\:text-gray-100 {\n    --tw-text-opacity: 1;\n    color: rgb(243 244 246 / var(--tw-text-opacity, 1));\n  }\n  .dark\\:text-gray-200 {\n    --tw-text-opacity: 1;\n    color: rgb(229 231 235 / var(--tw-text-opacity, 1));\n  }\n  .dark\\:text-gray-300 {\n    --tw-text-opacity: 1;\n    color: rgb(209 213 219 / var(--tw-text-opacity, 1));\n  }\n  .dark\\:text-gray-400 {\n    --tw-text-opacity: 1;\n    color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n  }\n  .dark\\:text-gray-500 {\n    --tw-text-opacity: 1;\n    color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n  }\n  .dark\\:text-red-400 {\n    --tw-text-opacity: 1;\n    color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n  }\n  .dark\\:opacity-10 {\n    opacity: 0.1;\n  }\n  .dark\\:opacity-20 {\n    opacity: 0.2;\n  }\n  .dark\\:shadow-gray-900\\/50 {\n    --tw-shadow-color: rgb(17 24 39 / 0.5);\n    --tw-shadow: var(--tw-shadow-colored);\n  }\n  .dark\\:hover\\:bg-blue-900\\/50:hover {\n    background-color: rgb(30 58 138 / 0.5);\n  }\n  .dark\\:hover\\:bg-gray-600:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));\n  }\n  .dark\\:hover\\:bg-gray-700:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));\n  }\n  .dark\\:hover\\:bg-red-900\\/20:hover {\n    background-color: rgb(127 29 29 / 0.2);\n  }\n  .dark\\:hover\\:from-gray-600:hover {\n    --tw-gradient-from: #4b5563 var(--tw-gradient-from-position);\n    --tw-gradient-to: rgb(75 85 99 / 0) var(--tw-gradient-to-position);\n    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n  }\n  .dark\\:hover\\:to-gray-600:hover {\n    --tw-gradient-to: #4b5563 var(--tw-gradient-to-position);\n  }\n  .dark\\:hover\\:text-gray-300:hover {\n    --tw-text-opacity: 1;\n    color: rgb(209 213 219 / var(--tw-text-opacity, 1));\n  }\n  .dark\\:hover\\:text-red-400:hover {\n    --tw-text-opacity: 1;\n    color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n  }\n  .group:hover .dark\\:group-hover\\:text-blue-300 {\n    --tw-text-opacity: 1;\n    color: rgb(147 197 253 / var(--tw-text-opacity, 1));\n  }\n}\n.\\[\\&_svg\\]\\:pointer-events-none svg {\n  pointer-events: none;\n}\n.\\[\\&_svg\\]\\:size-4 svg {\n  width: 1rem;\n  height: 1rem;\n}\n.\\[\\&_svg\\]\\:shrink-0 svg {\n  flex-shrink: 0;\n}\n');
+
+// src/index.preact.ts
+var index_preact_default = Dashboard;
+export {
+  ANIMATION_DURATION,
+  Button,
+  CELL_SIZE,
+  CONTAINER_PADDING,
+  DEBOUNCE_DELAY,
+  Dashboard,
+  DashboardToolbar,
+  GRID_SIZE,
+  MARGIN,
+  MAX_SIZE,
+  MIN_CONTAINER_HEIGHT,
+  MIN_SIZE,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  index_preact_default as default
+};
+//# sourceMappingURL=index.preact.js.map