@mieweb/ui 0.7.3 → 0.8.0-dev.1

package/dist/chunk-YVIH26FG.cjs

@@ -0,0 +1,736 @@
+'use strict';
+
+var chunkPLMXN23Q_cjs = require('./chunk-PLMXN23Q.cjs');
+var chunkRS5VA6QU_cjs = require('./chunk-RS5VA6QU.cjs');
+var chunkRDGRKYQ5_cjs = require('./chunk-RDGRKYQ5.cjs');
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var React2 = require('react');
+var reactDom = require('react-dom');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+function DashboardCustomizePanel({
+  open,
+  onOpenChange,
+  widgets,
+  hiddenIds,
+  onToggleWidget,
+  onReset,
+  title = "Customize dashboard",
+  description = "Choose which widgets appear on this dashboard. Drag a widget by its handle to rearrange it."
+}) {
+  const hidden = React2__namespace.useMemo(() => new Set(hiddenIds), [hiddenIds]);
+  const groups = React2__namespace.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const w of widgets) {
+      const key = w.category ?? "";
+      const list = map.get(key);
+      if (list) list.push(w);
+      else map.set(key, [w]);
+    }
+    return Array.from(map.entries());
+  }, [widgets]);
+  const visibleCount = widgets.length - hidden.size;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkRS5VA6QU_cjs.Sheet,
+    {
+      open,
+      onOpenChange,
+      side: "end",
+      "aria-label": title,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkRS5VA6QU_cjs.SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkRS5VA6QU_cjs.SheetTitle, { children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkRS5VA6QU_cjs.SheetDescription, { children: description })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkRS5VA6QU_cjs.SheetBody, { className: "flex flex-col gap-5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-xs font-medium", children: [
+            visibleCount,
+            " of ",
+            widgets.length,
+            " widgets shown"
+          ] }),
+          groups.map(([category, items]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            category && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-muted-foreground pb-1 text-xs font-semibold tracking-wide uppercase", children: category }),
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex list-none flex-col gap-1 p-0", children: items.map((widget) => {
+              const isVisible = !hidden.has(widget.id);
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "li",
+                {
+                  className: chunkS5RVSXDV_cjs.cn(
+                    "border-border flex items-center gap-3 rounded-lg border p-3 transition-colors",
+                    isVisible ? "bg-card" : "bg-muted/50"
+                  ),
+                  children: [
+                    widget.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: chunkS5RVSXDV_cjs.cn(
+                          "shrink-0",
+                          isVisible ? "text-primary-600 dark:text-primary-400" : "text-muted-foreground"
+                        ),
+                        children: widget.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: chunkS5RVSXDV_cjs.cn(
+                            "truncate text-sm font-medium",
+                            isVisible ? "text-foreground" : "text-muted-foreground"
+                          ),
+                          children: widget.title
+                        }
+                      ),
+                      widget.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground truncate text-xs", children: widget.description })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      chunkPLMXN23Q_cjs.Switch,
+                      {
+                        checked: isVisible,
+                        onCheckedChange: (checked) => onToggleWidget(widget.id, checked),
+                        "aria-label": `Show ${widget.title}`
+                      }
+                    )
+                  ]
+                },
+                widget.id
+              );
+            }) })
+          ] }, category || "general"))
+        ] }),
+        onReset && /* @__PURE__ */ jsxRuntime.jsx(chunkRS5VA6QU_cjs.SheetFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkRDGRKYQ5_cjs.Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: onReset,
+            leftIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { "aria-hidden": "true", className: "h-4 w-4" }),
+            children: "Reset layout"
+          }
+        ) })
+      ]
+    }
+  );
+}
+var COL_IDS = ["column-0", "column-1", "column-2"];
+var DEFAULT_HANDLE_SELECTOR = '[data-slot="dashboard-widget-header"]';
+var HEADER_LAYOUT_CLASSES = [
+  "flex",
+  "flex-row",
+  "flex-nowrap",
+  "items-center",
+  "[&>:nth-child(2)]:ms-auto"
+];
+function orderStorageKey(base) {
+  return `${base}-portlet-order`;
+}
+function layoutStorageKey(base) {
+  return `${base}-dashboard-layout`;
+}
+function hiddenStorageKey(base) {
+  return `${base}-dashboard-hidden`;
+}
+function loadHidden(base) {
+  if (!base) return null;
+  try {
+    const raw = localStorage.getItem(hiddenStorageKey(base));
+    const parsed = raw ? JSON.parse(raw) : null;
+    return Array.isArray(parsed) ? parsed.filter((v) => typeof v === "string") : null;
+  } catch {
+    return null;
+  }
+}
+function saveHidden(base, ids) {
+  if (!base) return;
+  try {
+    localStorage.setItem(hiddenStorageKey(base), JSON.stringify(ids));
+  } catch {
+  }
+}
+function loadLayout(base) {
+  if (!base) return null;
+  try {
+    const raw = localStorage.getItem(layoutStorageKey(base));
+    const val = raw ? Number(raw) : null;
+    return val === 1 || val === 2 || val === 3 ? val : null;
+  } catch {
+    return null;
+  }
+}
+function saveLayout(base, mode) {
+  if (!base) return;
+  try {
+    localStorage.setItem(layoutStorageKey(base), String(mode));
+  } catch {
+  }
+}
+function sanitizeSlot(value) {
+  return Array.isArray(value) ? value.filter((v) => typeof v === "string") : [];
+}
+function loadOrder(base) {
+  if (!base) return null;
+  try {
+    const raw = localStorage.getItem(orderStorageKey(base));
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return [
+      sanitizeSlot(parsed[0]),
+      sanitizeSlot(parsed[1]),
+      sanitizeSlot(parsed[2])
+    ];
+  } catch {
+    return null;
+  }
+}
+function saveOrder(base, order) {
+  if (!base) return;
+  try {
+    const record = {};
+    order.forEach((ids, i) => {
+      record[i] = ids;
+    });
+    localStorage.setItem(orderStorageKey(base), JSON.stringify(record));
+  } catch {
+  }
+}
+function mergeColumnOrder(columns, saved) {
+  const allIds = new Set(
+    [...columns[0], ...columns[1], ...columns[2]].map((p) => p.id)
+  );
+  const result = [[], [], []];
+  const placed = /* @__PURE__ */ new Set();
+  for (let i = 0; i < 3; i++) {
+    for (const id of saved?.[i] ?? []) {
+      if (allIds.has(id) && !placed.has(id)) {
+        result[i].push(id);
+        placed.add(id);
+      }
+    }
+  }
+  for (let i = 0; i < 3; i++) {
+    for (const item of columns[i]) {
+      if (!placed.has(item.id)) {
+        result[i].push(item.id);
+        placed.add(item.id);
+      }
+    }
+  }
+  return result;
+}
+function buildItemMap(columns) {
+  const map = /* @__PURE__ */ new Map();
+  for (const col of columns) {
+    for (const item of col) map.set(item.id, item);
+  }
+  return map;
+}
+function findColumn(colOrder, itemId) {
+  return colOrder.findIndex((ids) => ids.includes(itemId));
+}
+function moveAcrossColumns(order, activeId, overId) {
+  const colIdx = COL_IDS.indexOf(overId);
+  const sourceCol = findColumn(order, activeId);
+  if (sourceCol === -1) return order;
+  const targetCol = colIdx !== -1 ? colIdx : findColumn(order, overId);
+  if (targetCol === -1 || sourceCol === targetCol) return order;
+  const next = order.map((col) => [...col]);
+  next[sourceCol] = next[sourceCol].filter((id) => id !== activeId);
+  const overIdx = colIdx !== -1 ? -1 : next[targetCol].indexOf(overId);
+  if (overIdx === -1) {
+    next[targetCol].push(activeId);
+  } else {
+    next[targetCol].splice(overIdx, 0, activeId);
+  }
+  return next;
+}
+function reorderOnDrop(order, activeId, overId, crossedColumns) {
+  const isColumnTarget = COL_IDS.indexOf(overId) !== -1;
+  if (isColumnTarget || overId === activeId) return order;
+  const col = findColumn(order, activeId);
+  if (col === -1 || findColumn(order, overId) !== col) return order;
+  const oldIdx = order[col].indexOf(activeId);
+  const newIdx = order[col].indexOf(overId);
+  if (oldIdx === -1 || newIdx === -1) return order;
+  if (crossedColumns && newIdx === oldIdx + 1) return order;
+  const next = order.map((c) => [...c]);
+  next[col] = sortable.arrayMove(next[col], oldIdx, newIdx);
+  return next;
+}
+function consolidateColumns(order, mode) {
+  if (mode >= 3 || requiredColumns(order) <= mode) return order;
+  if (mode === 1) return [[...order[0], ...order[1], ...order[2]], [], []];
+  return [[...order[0]], [...order[1], ...order[2]], []];
+}
+function requiredColumns(order) {
+  return Math.max(
+    1,
+    ...order.map((ids, i) => ids.length > 0 ? i + 1 : 0)
+  );
+}
+var collisionDetection = (args) => {
+  const pw = core.pointerWithin(args);
+  if (pw.length > 0) return pw;
+  const cc = core.closestCenter(args);
+  if (cc.length > 0) return cc;
+  return core.rectIntersection(args);
+};
+function SortablePortlet({
+  id,
+  handleSelector,
+  children
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id });
+  const wrapperRef = React2__namespace.useRef(null);
+  const [headerEl, setHeaderEl] = React2__namespace.useState(null);
+  const [searched, setSearched] = React2__namespace.useState(false);
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1
+  };
+  React2__namespace.useEffect(() => {
+    const container = wrapperRef.current;
+    if (!container) return;
+    let rafId = 0;
+    const findHeader = () => {
+      const header = container.querySelector(handleSelector);
+      if (header instanceof HTMLElement) {
+        header.classList.add(...HEADER_LAYOUT_CLASSES);
+        setHeaderEl(header);
+        observer.disconnect();
+      } else {
+        setHeaderEl(null);
+      }
+      setSearched(true);
+    };
+    const observer = new MutationObserver(() => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(findHeader);
+    });
+    findHeader();
+    observer.observe(container, { childList: true, subtree: true });
+    return () => {
+      cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
+  }, [handleSelector]);
+  const handle = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: chunkS5RVSXDV_cjs.cn(
+        "inline-flex h-7 w-6 shrink-0 cursor-grab touch-none items-center justify-center rounded border-none bg-transparent",
+        "text-muted-foreground hover:bg-muted hover:text-foreground active:cursor-grabbing",
+        "opacity-40 transition-opacity group-hover/portlet:opacity-100 focus-visible:opacity-100",
+        "[@media(hover:none)]:opacity-100",
+        !headerEl && "bg-card/80 absolute end-2 top-2 z-10 shadow-sm"
+      ),
+      "aria-label": "Drag to reorder",
+      ...attributes,
+      ...listeners,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { "aria-hidden": "true", className: "h-4 w-4" })
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: (node) => {
+        setNodeRef(node);
+        wrapperRef.current = node;
+      },
+      style,
+      className: "group/portlet relative min-w-0",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-0", children }),
+        headerEl ? reactDom.createPortal(handle, headerEl) : searched ? handle : null
+      ]
+    }
+  );
+}
+function DroppableColumn({
+  id,
+  items,
+  columnIndex,
+  handleSelector,
+  flatten,
+  dragActive
+}) {
+  const { setNodeRef, isOver } = core.useDroppable({ id });
+  const ids = items.map((p) => p.id);
+  return /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: ids, strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: chunkS5RVSXDV_cjs.cn(
+        "flex min-h-16 min-w-0 flex-col gap-3",
+        flatten && "max-lg:contents"
+      ),
+      role: "group",
+      "aria-label": `Dashboard column ${columnIndex + 1}`,
+      children: [
+        items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          SortablePortlet,
+          {
+            id: item.id,
+            handleSelector,
+            children: item.node
+          },
+          item.id
+        )),
+        items.length === 0 && dragActive && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: chunkS5RVSXDV_cjs.cn(
+              "border-border text-muted-foreground flex min-h-32 items-center justify-center rounded-lg border-2 border-dashed text-sm font-medium transition-colors",
+              isOver && "border-primary-500 bg-primary-500/10 text-primary-600"
+            ),
+            children: "Drop here"
+          }
+        )
+      ]
+    }
+  ) });
+}
+var CustomizableDashboard = React2__namespace.forwardRef(function CustomizableDashboard2({
+  columns,
+  title,
+  storageKey,
+  ariaLabel,
+  toolbarSlot,
+  defaultOrder,
+  order: controlledOrder,
+  onOrderChange,
+  defaultLayout = 3,
+  layout: controlledLayout,
+  onLayoutChange,
+  dragHandleSelector = DEFAULT_HANDLE_SELECTOR,
+  widgets,
+  defaultHiddenIds,
+  hiddenIds: controlledHidden,
+  onHiddenChange,
+  customizeLabel = "Customize",
+  className
+}, ref) {
+  const itemMap = React2__namespace.useMemo(() => buildItemMap(columns), [columns]);
+  const [internalLayout, setInternalLayout] = React2__namespace.useState(defaultLayout);
+  const layoutMode = controlledLayout ?? internalLayout;
+  const [colOrder, setColOrder] = React2__namespace.useState(
+    () => consolidateColumns(
+      mergeColumnOrder(columns, controlledOrder ?? defaultOrder ?? null),
+      controlledLayout ?? defaultLayout
+    )
+  );
+  const [activeId, setActiveId] = React2__namespace.useState(null);
+  const [internalHidden, setInternalHidden] = React2__namespace.useState(
+    () => defaultHiddenIds ?? []
+  );
+  const hiddenList = controlledHidden ?? internalHidden;
+  const hiddenSet = React2__namespace.useMemo(() => new Set(hiddenList), [hiddenList]);
+  const [panelOpen, setPanelOpen] = React2__namespace.useState(false);
+  const prevColOrder = React2__namespace.useRef(colOrder);
+  const layoutModeRef = React2__namespace.useRef(layoutMode);
+  layoutModeRef.current = layoutMode;
+  const colOrderRef = React2__namespace.useRef(colOrder);
+  colOrderRef.current = colOrder;
+  const columnsRef = React2__namespace.useRef(columns);
+  columnsRef.current = columns;
+  const draggingRef = React2__namespace.useRef(false);
+  React2__namespace.useEffect(() => {
+    if (!storageKey) return;
+    if (controlledLayout === void 0) {
+      const savedLayout = loadLayout(storageKey);
+      if (savedLayout !== null) setInternalLayout(savedLayout);
+    }
+    if (controlledOrder === void 0) {
+      const savedOrder = loadOrder(storageKey);
+      if (savedOrder) {
+        setColOrder(mergeColumnOrder(columnsRef.current, savedOrder));
+      }
+    }
+    if (controlledHidden === void 0) {
+      const savedHidden = loadHidden(storageKey);
+      if (savedHidden) setInternalHidden(savedHidden);
+    }
+  }, [storageKey]);
+  React2__namespace.useEffect(() => {
+    if (draggingRef.current) return;
+    setColOrder((prev) => {
+      const next = consolidateColumns(
+        mergeColumnOrder(columns, controlledOrder ?? prev),
+        layoutMode
+      );
+      return JSON.stringify(next) === JSON.stringify(prev) ? prev : next;
+    });
+  }, [columns, controlledOrder, layoutMode]);
+  const setLayout = React2__namespace.useCallback(
+    (mode) => {
+      if (controlledLayout === void 0) setInternalLayout(mode);
+      saveLayout(storageKey, mode);
+      onLayoutChange?.(mode);
+    },
+    [controlledLayout, storageKey, onLayoutChange]
+  );
+  const commitOrder = React2__namespace.useCallback(
+    (next) => {
+      saveOrder(storageKey, next);
+      onOrderChange?.(next);
+      const occupied = requiredColumns(next);
+      if (occupied < layoutModeRef.current) {
+        setLayout(occupied);
+      }
+    },
+    [storageKey, onOrderChange, setLayout]
+  );
+  const handleLayoutChange = React2__namespace.useCallback(
+    (mode) => {
+      setLayout(mode);
+      const next = consolidateColumns(colOrderRef.current, mode);
+      if (next !== colOrderRef.current) {
+        setColOrder(next);
+        saveOrder(storageKey, next);
+        onOrderChange?.(next);
+      }
+    },
+    [setLayout, storageKey, onOrderChange]
+  );
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, { activationConstraint: { distance: 5 } }),
+    core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
+  );
+  const resolve = (ids) => ids.filter((id) => !hiddenSet.has(id)).map((id) => itemMap.get(id)).filter(Boolean);
+  const handleDragStart = React2__namespace.useCallback(
+    (event) => {
+      prevColOrder.current = colOrder;
+      draggingRef.current = true;
+      setActiveId(String(event.active.id));
+    },
+    [colOrder]
+  );
+  const handleDragOver = React2__namespace.useCallback((event) => {
+    const { active, over } = event;
+    if (!over) return;
+    const next = moveAcrossColumns(
+      colOrderRef.current,
+      String(active.id),
+      String(over.id)
+    );
+    if (next !== colOrderRef.current) setColOrder(next);
+  }, []);
+  const handleDragEnd = React2__namespace.useCallback(
+    (event) => {
+      const { active, over } = event;
+      draggingRef.current = false;
+      setActiveId(null);
+      if (!over) {
+        setColOrder(prevColOrder.current);
+        return;
+      }
+      const activeItemId = String(active.id);
+      const crossedColumns = findColumn(prevColOrder.current, activeItemId) !== findColumn(colOrderRef.current, activeItemId);
+      const next = reorderOnDrop(
+        colOrderRef.current,
+        activeItemId,
+        String(over.id),
+        crossedColumns
+      );
+      if (next !== colOrderRef.current) setColOrder(next);
+      if (JSON.stringify(next) !== JSON.stringify(prevColOrder.current)) {
+        commitOrder(next);
+      }
+    },
+    [commitOrder]
+  );
+  const handleDragCancel = React2__namespace.useCallback(() => {
+    draggingRef.current = false;
+    setActiveId(null);
+    setColOrder(prevColOrder.current);
+  }, []);
+  const setHidden = React2__namespace.useCallback(
+    (ids) => {
+      if (controlledHidden === void 0) setInternalHidden(ids);
+      saveHidden(storageKey, ids);
+      onHiddenChange?.(ids);
+    },
+    [controlledHidden, storageKey, onHiddenChange]
+  );
+  const handleToggleWidget = React2__namespace.useCallback(
+    (id, visible) => {
+      setHidden(
+        visible ? hiddenList.filter((h) => h !== id) : [...hiddenList, id]
+      );
+    },
+    [hiddenList, setHidden]
+  );
+  const handleReset = React2__namespace.useCallback(() => {
+    if (storageKey) {
+      try {
+        localStorage.removeItem(orderStorageKey(storageKey));
+        localStorage.removeItem(layoutStorageKey(storageKey));
+        localStorage.removeItem(hiddenStorageKey(storageKey));
+      } catch {
+      }
+    }
+    const next = mergeColumnOrder(columns, defaultOrder ?? null);
+    setColOrder(next);
+    onOrderChange?.(next);
+    if (controlledLayout === void 0) setInternalLayout(defaultLayout);
+    onLayoutChange?.(defaultLayout);
+    const hidden = defaultHiddenIds ?? [];
+    if (controlledHidden === void 0) setInternalHidden(hidden);
+    onHiddenChange?.(hidden);
+  }, [
+    storageKey,
+    columns,
+    defaultOrder,
+    onOrderChange,
+    controlledLayout,
+    defaultLayout,
+    onLayoutChange,
+    defaultHiddenIds,
+    controlledHidden,
+    onHiddenChange
+  ]);
+  const cols = [
+    resolve(colOrder[0]),
+    resolve(colOrder[1]),
+    resolve(colOrder[2])
+  ];
+  const visibleCols = layoutMode === 1 ? [cols[0]] : layoutMode === 2 ? [cols[0], cols[1]] : cols;
+  const toolbar = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3 pb-2", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-foreground me-auto text-lg font-semibold", children: title }),
+    widgets && widgets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      chunkRDGRKYQ5_cjs.Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => setPanelOpen(true),
+        "aria-haspopup": "dialog",
+        leftIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { "aria-hidden": "true", className: "h-4 w-4" }),
+        children: customizeLabel
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "border-border bg-muted flex gap-0.5 rounded-md border p-0.5 max-md:hidden",
+        role: "radiogroup",
+        "aria-label": "Column layout",
+        children: [3, 2, 1].map((mode) => {
+          const Icon = mode === 3 ? lucideReact.Columns3 : mode === 2 ? lucideReact.Columns2 : lucideReact.Square;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: chunkS5RVSXDV_cjs.cn(
+                "flex h-7 w-7 items-center justify-center rounded transition-colors",
+                layoutMode === mode ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background hover:text-foreground"
+              ),
+              onClick: () => handleLayoutChange(mode),
+              role: "radio",
+              "aria-checked": layoutMode === mode,
+              "aria-label": `${mode} column layout`,
+              title: `${mode} column${mode > 1 ? "s" : ""}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true", className: "h-4 w-4" })
+            },
+            mode
+          );
+        })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.DndContext,
+    {
+      sensors,
+      collisionDetection,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      children: [
+        toolbarSlot ? reactDom.createPortal(toolbar, toolbarSlot) : toolbar,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            className: chunkS5RVSXDV_cjs.cn(
+              "grid items-start gap-3",
+              layoutMode === 3 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+              layoutMode === 2 && "grid-cols-1 md:grid-cols-2",
+              layoutMode === 1 && "grid-cols-1",
+              className
+            ),
+            role: "region",
+            "aria-label": ariaLabel ?? "Dashboard",
+            children: visibleCols.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              DroppableColumn,
+              {
+                id: COL_IDS[i],
+                items: col,
+                columnIndex: i,
+                handleSelector: dragHandleSelector,
+                flatten: layoutMode === 3,
+                dragActive: activeId !== null
+              },
+              COL_IDS[i]
+            ))
+          }
+        ),
+        widgets && widgets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          DashboardCustomizePanel,
+          {
+            open: panelOpen,
+            onOpenChange: setPanelOpen,
+            widgets,
+            hiddenIds: hiddenList,
+            onToggleWidget: handleToggleWidget,
+            onReset: handleReset
+          }
+        )
+      ]
+    }
+  );
+});
+
+exports.CustomizableDashboard = CustomizableDashboard;
+exports.DashboardCustomizePanel = DashboardCustomizePanel;
+exports.consolidateColumns = consolidateColumns;
+exports.mergeColumnOrder = mergeColumnOrder;
+exports.moveAcrossColumns = moveAcrossColumns;
+exports.reorderOnDrop = reorderOnDrop;
+exports.requiredColumns = requiredColumns;
+//# sourceMappingURL=chunk-YVIH26FG.cjs.map
+//# sourceMappingURL=chunk-YVIH26FG.cjs.map