@etus/ui 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/chunk-QWRHPNBY.js

@@ -0,0 +1,924 @@
+import { Label } from './chunk-XPVKJIWY.js';
+import { TextInput } from './chunk-PWCMCMDN.js';
+import { Button } from './chunk-RPV77BCQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { LayoutGrid, BarChart2, PieChart, Table, Type, Undo2, Redo2, Eye, Save, ChevronRight, ChevronLeft, X, GripVertical, Trash2 } from 'lucide-react';
+import { useState, useMemo, useRef, useId, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var dashboardBuilderVariants = cva(
+  "relative flex h-full w-full overflow-hidden rounded-lg border bg-background transition-all duration-300",
+  {
+    variants: {
+      mode: {
+        edit: "",
+        preview: "",
+        configure: ""
+      },
+      size: {
+        default: "",
+        compact: "",
+        full: "h-screen"
+      }
+    },
+    defaultVariants: {
+      mode: "edit",
+      size: "default"
+    }
+  }
+);
+var dashboardBuilderToolbarVariants = cva(
+  "flex h-14 shrink-0 items-center justify-between border-b bg-card px-4 transition-all duration-200",
+  {
+    variants: {
+      position: {
+        top: "",
+        bottom: "border-b-0 border-t"
+      }
+    },
+    defaultVariants: {
+      position: "top"
+    }
+  }
+);
+var dashboardBuilderCanvasVariants = cva(
+  "relative flex-1 overflow-auto bg-muted/30 p-4 transition-all duration-200",
+  {
+    variants: {
+      showGrid: {
+        true: [
+          "bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)]",
+          "bg-[size:var(--grid-size)_var(--grid-size)]"
+        ],
+        false: ""
+      },
+      state: {
+        idle: "",
+        dragging: "cursor-grabbing",
+        resizing: "cursor-nwse-resize",
+        configuring: "",
+        saving: "pointer-events-none opacity-75"
+      }
+    },
+    defaultVariants: {
+      showGrid: true,
+      state: "idle"
+    }
+  }
+);
+var dashboardBuilderWidgetLibraryVariants = cva(
+  "flex w-64 shrink-0 flex-col border-r bg-card transition-all duration-200",
+  {
+    variants: {
+      collapsed: {
+        true: "w-14",
+        false: "w-64"
+      },
+      position: {
+        left: "border-r",
+        right: "border-l border-r-0"
+      }
+    },
+    defaultVariants: {
+      collapsed: false,
+      position: "left"
+    }
+  }
+);
+var dashboardBuilderPropertiesPanelVariants = cva(
+  "flex w-72 shrink-0 flex-col border-l bg-card transition-all duration-200",
+  {
+    variants: {
+      open: {
+        true: "w-72",
+        false: "w-0 overflow-hidden border-l-0"
+      }
+    },
+    defaultVariants: {
+      open: false
+    }
+  }
+);
+var dashboardBuilderWidgetCardVariants = cva(
+  "flex cursor-grab items-center gap-3 rounded-md border bg-background p-3 transition-all duration-200 hover:border-primary hover:shadow-sm active:cursor-grabbing",
+  {
+    variants: {
+      category: {
+        default: "",
+        charts: "border-l-2 border-l-blue-500",
+        kpi: "border-l-2 border-l-green-500",
+        tables: "border-l-2 border-l-purple-500",
+        text: "border-l-2 border-l-orange-500"
+      },
+      dragging: {
+        true: "opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      category: "default",
+      dragging: false
+    }
+  }
+);
+var dashboardBuilderWidgetVariants = cva(
+  "group relative rounded-md border-2 bg-card transition-all duration-200",
+  {
+    variants: {
+      state: {
+        idle: "border-transparent hover:border-muted-foreground/30",
+        selected: "border-primary ring-2 ring-primary/20",
+        dragging: "border-primary border-dashed opacity-75",
+        resizing: "border-primary",
+        preview: "border-border"
+      }
+    },
+    defaultVariants: {
+      state: "idle"
+    }
+  }
+);
+var dashboardBuilderResizeHandleVariants = cva(
+  "absolute opacity-0 transition-opacity group-hover:opacity-100",
+  {
+    variants: {
+      position: {
+        se: "bottom-0 right-0 cursor-se-resize",
+        sw: "bottom-0 left-0 cursor-sw-resize",
+        ne: "right-0 top-0 cursor-ne-resize",
+        nw: "left-0 top-0 cursor-nw-resize",
+        e: "right-0 top-1/2 -translate-y-1/2 cursor-e-resize",
+        w: "left-0 top-1/2 -translate-y-1/2 cursor-w-resize",
+        n: "left-1/2 top-0 -translate-x-1/2 cursor-n-resize",
+        s: "bottom-0 left-1/2 -translate-x-1/2 cursor-s-resize"
+      },
+      size: {
+        sm: "h-2 w-2",
+        default: "h-3 w-3",
+        lg: "h-4 w-4"
+      }
+    },
+    defaultVariants: {
+      position: "se",
+      size: "default"
+    }
+  }
+);
+var dashboardBuilderDropZoneVariants = cva(
+  "pointer-events-none absolute rounded-md border-2 transition-all duration-200",
+  {
+    variants: {
+      active: {
+        true: "border-primary bg-primary/10",
+        false: "border-transparent"
+      },
+      valid: {
+        true: "border-primary bg-primary/10",
+        false: "border-destructive bg-destructive/10"
+      }
+    },
+    defaultVariants: {
+      active: false,
+      valid: true
+    }
+  }
+);
+var dashboardBuilderEmptyStateVariants = cva(
+  "flex h-full flex-col items-center justify-center gap-4 text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        minimal: "gap-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function PlaceholderWidget({ config, title }) {
+  const value = config["value"];
+  const getDisplayValue = () => {
+    if (value === null || value === void 0) return "";
+    if (typeof value === "object") return JSON.stringify(value);
+    return String(value);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: title }),
+    value !== void 0 && value !== null && /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold text-primary", children: getDisplayValue() })
+  ] });
+}
+var defaultWidgets = [
+  {
+    type: "kpi",
+    name: "KPI Card",
+    description: "Display a key performance indicator",
+    icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" }),
+    category: "kpi",
+    defaultSize: { w: 3, h: 2 },
+    minSize: { w: 2, h: 1 },
+    maxSize: { w: 6, h: 4 },
+    configSchema: {
+      fields: [
+        { name: "title", type: "text", label: "Title", defaultValue: "KPI" },
+        { name: "value", type: "text", label: "Value", defaultValue: "0" },
+        { name: "unit", type: "text", label: "Unit", defaultValue: "" }
+      ]
+    },
+    component: PlaceholderWidget
+  },
+  {
+    type: "chart-line",
+    name: "Line Chart",
+    description: "Display data as a line chart",
+    icon: /* @__PURE__ */ jsx(BarChart2, { className: "h-4 w-4" }),
+    category: "charts",
+    defaultSize: { w: 6, h: 4 },
+    minSize: { w: 4, h: 3 },
+    configSchema: {
+      fields: [
+        { name: "title", type: "text", label: "Title", defaultValue: "Chart" },
+        {
+          name: "showLegend",
+          type: "boolean",
+          label: "Show Legend",
+          defaultValue: true
+        }
+      ]
+    },
+    component: PlaceholderWidget
+  },
+  {
+    type: "chart-pie",
+    name: "Pie Chart",
+    description: "Display data as a pie chart",
+    icon: /* @__PURE__ */ jsx(PieChart, { className: "h-4 w-4" }),
+    category: "charts",
+    defaultSize: { w: 4, h: 4 },
+    minSize: { w: 3, h: 3 },
+    configSchema: {
+      fields: [
+        { name: "title", type: "text", label: "Title", defaultValue: "Chart" }
+      ]
+    },
+    component: PlaceholderWidget
+  },
+  {
+    type: "table",
+    name: "Data Table",
+    description: "Display data in a table format",
+    icon: /* @__PURE__ */ jsx(Table, { className: "h-4 w-4" }),
+    category: "tables",
+    defaultSize: { w: 6, h: 4 },
+    minSize: { w: 4, h: 3 },
+    configSchema: {
+      fields: [
+        { name: "title", type: "text", label: "Title", defaultValue: "Table" },
+        {
+          name: "pageSize",
+          type: "number",
+          label: "Page Size",
+          defaultValue: 10
+        }
+      ]
+    },
+    component: PlaceholderWidget
+  },
+  {
+    type: "text",
+    name: "Text Block",
+    description: "Display formatted text content",
+    icon: /* @__PURE__ */ jsx(Type, { className: "h-4 w-4" }),
+    category: "text",
+    defaultSize: { w: 4, h: 2 },
+    minSize: { w: 2, h: 1 },
+    configSchema: {
+      fields: [
+        { name: "content", type: "text", label: "Content", defaultValue: "" }
+      ]
+    },
+    component: PlaceholderWidget
+  }
+];
+function DashboardBuilderToolbar({
+  canRedo,
+  canUndo,
+  onRedo,
+  onSave,
+  onTogglePreview,
+  onUndo,
+  showPreview,
+  showUndo
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: dashboardBuilderToolbarVariants(),
+      "data-slot": "dashboard-builder-toolbar",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Dashboard Builder" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          showUndo && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Undo",
+                disabled: !canUndo,
+                size: "sm",
+                variant: "ghost",
+                onClick: onUndo,
+                children: /* @__PURE__ */ jsx(Undo2, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Redo",
+                disabled: !canRedo,
+                size: "sm",
+                variant: "ghost",
+                onClick: onRedo,
+                children: /* @__PURE__ */ jsx(Redo2, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "mx-2 h-6 w-px bg-border" })
+          ] }),
+          showPreview && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              "aria-label": "Preview dashboard",
+              size: "sm",
+              variant: "outline",
+              onClick: onTogglePreview,
+              children: [
+                /* @__PURE__ */ jsx(Eye, { className: "mr-2 h-4 w-4" }),
+                "Preview"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onSave, children: [
+            /* @__PURE__ */ jsx(Save, { className: "mr-2 h-4 w-4" }),
+            "Save"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function DashboardBuilderWidgetLibrary({
+  widgets
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const groupedWidgets = useMemo(() => {
+    return widgets.reduce((acc, widget) => {
+      const category = widget.category || "default";
+      acc[category] ??= [];
+      acc[category].push(widget);
+      return acc;
+    }, {});
+  }, [widgets]);
+  const handleDragStart = (e, widget) => {
+    e.dataTransfer.setData("widget-type", widget.type);
+    e.dataTransfer.effectAllowed = "copy";
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: dashboardBuilderWidgetLibraryVariants({ collapsed }),
+      "data-slot": "dashboard-builder-widget-library",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center justify-between border-b px-4", children: [
+          !collapsed && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Widgets" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": collapsed ? "Expand widget library" : "Collapse widget library",
+              className: "ml-auto",
+              size: "icon",
+              variant: "ghost",
+              onClick: () => {
+                setCollapsed(!collapsed);
+              },
+              children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        !collapsed && /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.entries(groupedWidgets).map(([category, categoryWidgets]) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-medium uppercase text-muted-foreground", children: category }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: categoryWidgets.map((widget) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              draggable: true,
+              className: dashboardBuilderWidgetCardVariants({
+                category
+              }),
+              "aria-label": `Drag ${widget.name} widget`,
+              role: "button",
+              tabIndex: 0,
+              title: widget.description,
+              onDragStart: (e) => {
+                handleDragStart(e, widget);
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: widget.icon }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm", children: widget.name })
+              ]
+            },
+            widget.type
+          )) })
+        ] }, category)) }) })
+      ]
+    }
+  );
+}
+function DashboardBuilderCanvas({
+  children,
+  columns,
+  onWidgetDrop,
+  rowHeight,
+  showGrid,
+  widgets
+}) {
+  const canvasRef = useRef(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setIsDragOver(true);
+  };
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const widgetType = e.dataTransfer.getData("widget-type");
+    if (!widgetType || !canvasRef.current) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const gridWidth = rect.width / columns;
+    const x = Math.floor((e.clientX - rect.left) / gridWidth);
+    const y = Math.floor((e.clientY - rect.top) / rowHeight);
+    onWidgetDrop?.(widgetType, { x, y });
+  };
+  const gridSizeStyle = {
+    "--grid-size": `${String(100 / columns)}%`
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: canvasRef,
+      className: cn(
+        dashboardBuilderCanvasVariants({ showGrid }),
+        isDragOver && "ring-2 ring-primary ring-offset-2"
+      ),
+      "aria-describedby": "canvas-instructions",
+      "aria-label": "Dashboard canvas",
+      "data-slot": "dashboard-builder-canvas",
+      role: "region",
+      style: gridSizeStyle,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", id: "canvas-instructions", children: "Drag widgets from the library to add them. Use arrow keys to move selected widgets. Press Delete to remove selected widget." }),
+        widgets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: dashboardBuilderEmptyStateVariants(), children: [
+          /* @__PURE__ */ jsx(LayoutGrid, { className: "h-12 w-12 opacity-50" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "No widgets yet" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Drag widgets from the library to get started" })
+          ] })
+        ] }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(${String(columns)}, 1fr)`,
+              gap: "var(--spacing-4)",
+              minHeight: "100%"
+            },
+            className: "relative",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function DashboardBuilderPropertiesPanel({
+  onClose,
+  onConfigChange,
+  widget,
+  widgetDefinition
+}) {
+  const panelId = useId();
+  if (!widget || !widgetDefinition) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: dashboardBuilderPropertiesPanelVariants({ open: false }),
+        "data-slot": "dashboard-builder-properties-panel"
+      }
+    );
+  }
+  const handleFieldChange = (fieldName, value) => {
+    const newConfig = { ...widget.config, [fieldName]: value };
+    onConfigChange?.(newConfig);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-labelledby": `${panelId}-title`,
+      className: dashboardBuilderPropertiesPanelVariants({ open: true }),
+      "data-slot": "dashboard-builder-properties-panel",
+      role: "region",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center justify-between border-b px-4", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", id: `${panelId}-title`, children: "Properties" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "Close properties panel",
+              size: "icon",
+              variant: "ghost",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium uppercase text-muted-foreground", children: [
+            "Widget: ",
+            widgetDefinition.name
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border" }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: widgetDefinition.configSchema.fields.map((field) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: `${panelId}-${field.name}`, children: field.label }),
+            field.type === "text" && /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: (() => {
+                  const val = widget.config[field.name] ?? field.defaultValue ?? "";
+                  if (typeof val === "object") return JSON.stringify(val);
+                  return String(val);
+                })(),
+                id: `${panelId}-${field.name}`,
+                onChange: (e) => {
+                  handleFieldChange(field.name, e.target.value);
+                }
+              }
+            ),
+            field.type === "number" && /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: (() => {
+                  const val = widget.config[field.name] ?? field.defaultValue ?? 0;
+                  if (typeof val === "object") return "0";
+                  return String(val);
+                })(),
+                id: `${panelId}-${field.name}`,
+                type: "number",
+                onChange: (e) => {
+                  handleFieldChange(field.name, Number(e.target.value));
+                }
+              }
+            ),
+            field.type === "boolean" && /* @__PURE__ */ jsx(
+              "input",
+              {
+                checked: Boolean(widget.config[field.name] ?? field.defaultValue),
+                className: "h-4 w-4",
+                id: `${panelId}-${field.name}`,
+                type: "checkbox",
+                onChange: (e) => {
+                  handleFieldChange(field.name, e.target.checked);
+                }
+              }
+            )
+          ] }, field.name)) })
+        ] }) })
+      ]
+    }
+  );
+}
+function DashboardBuilderWidgetComponent({
+  isDragging,
+  isSelected,
+  onClick,
+  onRemove,
+  widget,
+  widgetDefinition
+}) {
+  const WidgetComponent = widgetDefinition?.component;
+  const state = isSelected ? "selected" : isDragging ? "dragging" : "idle";
+  const handleKeyDown = (e) => {
+    if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault();
+      onRemove?.();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        gridColumn: `span ${String(widget.w)}`,
+        gridRow: `span ${String(widget.h)}`,
+        minHeight: `${String(widget.h * 100)}px`
+      },
+      "aria-label": `Widget: ${widget.title}`,
+      "aria-selected": isSelected,
+      className: dashboardBuilderWidgetVariants({ state }),
+      "data-slot": "dashboard-builder-widget",
+      "data-widget-id": widget.id,
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b bg-muted/50 px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 cursor-grab text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: widget.title })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": `Remove ${widget.title}`,
+              className: "opacity-0 group-hover:opacity-100",
+              size: "icon",
+              variant: "ghost",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove?.();
+              },
+              children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden p-2", children: WidgetComponent ? /* @__PURE__ */ jsx(
+          WidgetComponent,
+          {
+            config: widget.config,
+            height: widget.h,
+            id: widget.id,
+            title: widget.title,
+            width: widget.w
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Unknown widget type" }) }) })
+      ]
+    }
+  );
+}
+function DashboardBuilder({
+  "aria-label": ariaLabel = "Dashboard builder",
+  allowOverlap = false,
+  autoSaveInterval = 3e4,
+  availableWidgets = defaultWidgets,
+  className,
+  columns = 12,
+  enableAutoSave = false,
+  initialLayout,
+  initialWidgets = [],
+  mode,
+  onLayoutChange,
+  onPreview,
+  onRedo,
+  onSave,
+  onUndo,
+  onWidgetAdd,
+  onWidgetRemove,
+  onWidgetUpdate,
+  rowHeight = 100,
+  showGrid = true,
+  showPreview = true,
+  showUndo = true,
+  size,
+  snapToGrid = true,
+  ...props
+}) {
+  const builderId = useId();
+  const [widgets, setWidgets] = useState(initialWidgets);
+  const [selectedWidgetId, setSelectedWidgetId] = useState(null);
+  const [_builderMode, setBuilderMode] = useState("edit");
+  const [_builderState, setBuilderState] = useState("idle");
+  const [history, setHistory] = useState([initialWidgets]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+  const selectedWidget = useMemo(
+    () => widgets.find((w) => w.id === selectedWidgetId) ?? null,
+    [widgets, selectedWidgetId]
+  );
+  const selectedWidgetDefinition = useMemo(
+    () => selectedWidget ? availableWidgets.find((w) => w.type === selectedWidget.type) : void 0,
+    [selectedWidget, availableWidgets]
+  );
+  const canUndo = historyIndex > 0;
+  const canRedo = historyIndex < history.length - 1;
+  const updateHistory = useCallback((newWidgets) => {
+    setHistory((prev) => {
+      const newHistory = prev.slice(0, historyIndex + 1);
+      newHistory.push(newWidgets);
+      return newHistory;
+    });
+    setHistoryIndex((prev) => prev + 1);
+  }, [historyIndex]);
+  const generateId = () => `widget-${String(Date.now())}-${Math.random().toString(36).slice(2, 9)}`;
+  const getLayoutConfig = useCallback(() => {
+    return {
+      columns,
+      rowHeight,
+      widgets: widgets.map((w) => ({
+        i: w.id,
+        x: w.x,
+        y: w.y,
+        w: w.w,
+        h: w.h
+      }))
+    };
+  }, [columns, rowHeight, widgets]);
+  const handleWidgetDrop = useCallback(
+    (widgetType, position) => {
+      const definition = availableWidgets.find((w) => w.type === widgetType);
+      if (!definition) return;
+      const newWidget = {
+        id: generateId(),
+        type: widgetType,
+        title: definition.name,
+        x: position.x,
+        y: position.y,
+        w: definition.defaultSize.w,
+        h: definition.defaultSize.h,
+        config: definition.configSchema.fields.reduce(
+          (acc, field) => {
+            acc[field.name] = field.defaultValue;
+            return acc;
+          },
+          {}
+        )
+      };
+      const newWidgets = [...widgets, newWidget];
+      setWidgets(newWidgets);
+      updateHistory(newWidgets);
+      setSelectedWidgetId(newWidget.id);
+      onWidgetAdd?.({ widget: newWidget, position });
+      onLayoutChange?.(getLayoutConfig());
+    },
+    [availableWidgets, widgets, updateHistory, onWidgetAdd, onLayoutChange, getLayoutConfig]
+  );
+  const handleWidgetRemove = useCallback(
+    (widgetId) => {
+      const newWidgets = widgets.filter((w) => w.id !== widgetId);
+      setWidgets(newWidgets);
+      updateHistory(newWidgets);
+      if (selectedWidgetId === widgetId) {
+        setSelectedWidgetId(null);
+      }
+      onWidgetRemove?.({ widgetId });
+      onLayoutChange?.(getLayoutConfig());
+    },
+    [widgets, selectedWidgetId, updateHistory, onWidgetRemove, onLayoutChange, getLayoutConfig]
+  );
+  const handleWidgetSelect = useCallback((widgetId) => {
+    setSelectedWidgetId(widgetId);
+    setBuilderState("configuring");
+  }, []);
+  const handleConfigChange = useCallback(
+    (newConfig) => {
+      if (!selectedWidgetId) return;
+      const newWidgets = widgets.map(
+        (w) => w.id === selectedWidgetId ? { ...w, config: newConfig } : w
+      );
+      setWidgets(newWidgets);
+      updateHistory(newWidgets);
+      onWidgetUpdate?.({ widgetId: selectedWidgetId, config: newConfig });
+    },
+    [selectedWidgetId, widgets, updateHistory, onWidgetUpdate]
+  );
+  const handleSave = useCallback(() => {
+    setBuilderState("saving");
+    onSave?.({ widgets, layout: getLayoutConfig() });
+    setBuilderState("idle");
+  }, [widgets, getLayoutConfig, onSave]);
+  const handleUndo = useCallback(() => {
+    if (!canUndo) return;
+    const newIndex = historyIndex - 1;
+    setHistoryIndex(newIndex);
+    setWidgets(history[newIndex] ?? []);
+    onUndo?.();
+  }, [canUndo, historyIndex, history, onUndo]);
+  const handleRedo = useCallback(() => {
+    if (!canRedo) return;
+    const newIndex = historyIndex + 1;
+    setHistoryIndex(newIndex);
+    setWidgets(history[newIndex] ?? []);
+    onRedo?.();
+  }, [canRedo, historyIndex, history, onRedo]);
+  const handlePreview = useCallback(() => {
+    setBuilderMode("preview");
+    onPreview?.();
+  }, [onPreview]);
+  const handleCloseProperties = useCallback(() => {
+    setSelectedWidgetId(null);
+    setBuilderState("idle");
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        handleSave();
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        handleUndo();
+      }
+      if ((e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey)) {
+        e.preventDefault();
+        handleRedo();
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && selectedWidgetId) {
+        e.preventDefault();
+        handleWidgetRemove(selectedWidgetId);
+      }
+    },
+    [handleSave, handleUndo, handleRedo, selectedWidgetId, handleWidgetRemove]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(dashboardBuilderVariants({ mode, size }), className),
+      "data-slot": "dashboard-builder",
+      id: builderId,
+      role: "application",
+      tabIndex: -1,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx(
+          DashboardBuilderToolbar,
+          {
+            canRedo,
+            canUndo,
+            showPreview,
+            showUndo,
+            onRedo: handleRedo,
+            onSave: handleSave,
+            onTogglePreview: handlePreview,
+            onUndo: handleUndo
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(DashboardBuilderWidgetLibrary, { widgets: availableWidgets }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col", children: /* @__PURE__ */ jsx(
+            DashboardBuilderCanvas,
+            {
+              columns,
+              rowHeight,
+              selectedWidgetId,
+              showGrid,
+              widgetDefinitions: availableWidgets,
+              widgets,
+              onWidgetClick: handleWidgetSelect,
+              onWidgetDrop: handleWidgetDrop,
+              onWidgetRemove: handleWidgetRemove,
+              children: widgets.map((widget) => {
+                const definition = availableWidgets.find(
+                  (w) => w.type === widget.type
+                );
+                return /* @__PURE__ */ jsx(
+                  DashboardBuilderWidgetComponent,
+                  {
+                    isSelected: widget.id === selectedWidgetId,
+                    widget,
+                    widgetDefinition: definition,
+                    onClick: () => {
+                      handleWidgetSelect(widget.id);
+                    },
+                    onRemove: () => {
+                      handleWidgetRemove(widget.id);
+                    }
+                  },
+                  widget.id
+                );
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            DashboardBuilderPropertiesPanel,
+            {
+              widget: selectedWidget,
+              widgetDefinition: selectedWidgetDefinition,
+              onClose: handleCloseProperties,
+              onConfigChange: handleConfigChange
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+DashboardBuilder.displayName = "DashboardBuilder";
+
+export { DashboardBuilder, DashboardBuilderCanvas, DashboardBuilderPropertiesPanel, DashboardBuilderToolbar, DashboardBuilderWidgetComponent, DashboardBuilderWidgetLibrary, dashboardBuilderCanvasVariants, dashboardBuilderDropZoneVariants, dashboardBuilderEmptyStateVariants, dashboardBuilderPropertiesPanelVariants, dashboardBuilderResizeHandleVariants, dashboardBuilderToolbarVariants, dashboardBuilderVariants, dashboardBuilderWidgetCardVariants, dashboardBuilderWidgetLibraryVariants, dashboardBuilderWidgetVariants, defaultWidgets };
+//# sourceMappingURL=chunk-QWRHPNBY.js.map
+//# sourceMappingURL=chunk-QWRHPNBY.js.map