@vertly/dashboard-grid 0.1.0

package/dist/index.cjs

@@ -0,0 +1,732 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  COLS: () => COLS,
+  DEFAULT_ROW_HEIGHT: () => DEFAULT_ROW_HEIGHT,
+  DashboardGrid: () => DashboardGrid,
+  MAX_ITEMS_PER_ROW: () => MAX_ITEMS_PER_ROW,
+  MAX_ROW_HEIGHT: () => MAX_ROW_HEIGHT,
+  MIN_COL_SPAN: () => MIN_COL_SPAN,
+  MIN_ROW_HEIGHT: () => MIN_ROW_HEIGHT,
+  ZONE_WIDTH_PX: () => ZONE_WIDTH_PX,
+  canPlaceInRow: () => canPlaceInRow,
+  moveRow: () => moveRow,
+  placeItemAt: () => placeItemAt,
+  placeItemInNewRow: () => placeItemInNewRow,
+  rebalanceRow: () => rebalanceRow,
+  removeItemFromRow: () => removeItemFromRow,
+  resizeItemPair: () => resizeItemPair,
+  resizeRow: () => resizeRow
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/dashboard-grid.tsx
+var import_react = require("react");
+var import_react_dnd = require("react-dnd");
+var import_react_dnd_html5_backend = require("react-dnd-html5-backend");
+var import_lucide_react = require("lucide-react");
+
+// src/layout-engine.ts
+var COLS = 12;
+var ZONE_WIDTH_PX = 12;
+var MIN_COL_SPAN = 1;
+var MAX_ITEMS_PER_ROW = 4;
+var DEFAULT_ROW_HEIGHT = 220;
+var MIN_ROW_HEIGHT = 80;
+var MAX_ROW_HEIGHT = 480;
+function rebalanceRow(items, row) {
+  if (row.widgetIds.length === 0) return items;
+  const span = COLS / row.widgetIds.length;
+  const next = { ...items };
+  for (const id of row.widgetIds) {
+    const item = next[id];
+    if (item && item.colSpan !== span) next[id] = { ...item, colSpan: span };
+  }
+  return next;
+}
+function canPlaceInRow(row, isSameRowMove) {
+  if (isSameRowMove) return true;
+  return (row?.widgetIds.length ?? 0) < MAX_ITEMS_PER_ROW;
+}
+function placeItemAt(rows, items, itemId, fromRowId, targetRowId, index) {
+  const targetRowBefore = rows.find((row) => row.id === targetRowId);
+  const targetCountBefore = targetRowBefore?.widgetIds.length ?? 0;
+  const isSameRowMove = fromRowId === targetRowId;
+  if (!canPlaceInRow(targetRowBefore, isSameRowMove)) {
+    return { rows, items };
+  }
+  let nextRows = rows;
+  let nextItems = items;
+  let insertIndex = index;
+  let sourceCountBefore = 0;
+  if (fromRowId !== void 0) {
+    const fromRow = rows.find((row) => row.id === fromRowId);
+    sourceCountBefore = fromRow?.widgetIds.length ?? 0;
+    const fromIndex = fromRow?.widgetIds.indexOf(itemId) ?? -1;
+    if (fromRowId === targetRowId && fromIndex !== -1 && fromIndex < insertIndex) {
+      insertIndex -= 1;
+    }
+    nextRows = nextRows.map(
+      (row) => row.id === fromRowId ? { ...row, widgetIds: row.widgetIds.filter((id) => id !== itemId) } : row
+    );
+    nextRows = nextRows.filter((row) => row.widgetIds.length > 0 || row.id === targetRowId);
+  }
+  nextRows = nextRows.map((row) => {
+    if (row.id !== targetRowId) return row;
+    const next = [...row.widgetIds];
+    next.splice(Math.min(Math.max(insertIndex, 0), next.length), 0, itemId);
+    return { ...row, widgetIds: next };
+  });
+  const targetRowAfter = nextRows.find((row) => row.id === targetRowId);
+  if (targetRowAfter && targetRowAfter.widgetIds.length !== targetCountBefore) {
+    nextItems = rebalanceRow(nextItems, targetRowAfter);
+  }
+  if (fromRowId !== void 0 && fromRowId !== targetRowId) {
+    const sourceRowAfter = nextRows.find((row) => row.id === fromRowId);
+    if (sourceRowAfter && sourceRowAfter.widgetIds.length !== sourceCountBefore) {
+      nextItems = rebalanceRow(nextItems, sourceRowAfter);
+    }
+  }
+  return { rows: nextRows, items: nextItems };
+}
+function placeItemInNewRow(rows, items, itemId, fromRowId, newRowId, heightPx = DEFAULT_ROW_HEIGHT) {
+  let nextRows = rows;
+  let nextItems = items;
+  if (fromRowId !== void 0) {
+    const fromRow = rows.find((row) => row.id === fromRowId);
+    nextRows = nextRows.map(
+      (row) => row.id === fromRowId ? { ...row, widgetIds: row.widgetIds.filter((id) => id !== itemId) } : row
+    ).filter((row) => row.widgetIds.length > 0);
+    const sourceRowAfter = nextRows.find((row) => row.id === fromRowId);
+    if (sourceRowAfter && sourceRowAfter.widgetIds.length !== fromRow?.widgetIds.length) {
+      nextItems = rebalanceRow(nextItems, sourceRowAfter);
+    }
+  }
+  const newRow = { id: newRowId, widgetIds: [itemId], heightPx };
+  nextItems = rebalanceRow(nextItems, newRow);
+  return { rows: [...nextRows, newRow], items: nextItems };
+}
+function removeItemFromRow(rows, items, itemId, rowId) {
+  const nextRows = rows.map(
+    (row) => row.id === rowId ? { ...row, widgetIds: row.widgetIds.filter((id) => id !== itemId) } : row
+  ).filter((row) => row.widgetIds.length > 0);
+  const withoutItem = { ...items };
+  delete withoutItem[itemId];
+  const rowAfter = nextRows.find((row) => row.id === rowId);
+  const nextItems = rowAfter ? rebalanceRow(withoutItem, rowAfter) : withoutItem;
+  return { rows: nextRows, items: nextItems };
+}
+function resizeItemPair(items, leftId, rightId, nextLeftColSpan) {
+  const left = items[leftId];
+  const right = items[rightId];
+  if (!left || !right) return items;
+  const combined = left.colSpan + right.colSpan;
+  const clampedLeft = Math.min(combined - MIN_COL_SPAN, Math.max(MIN_COL_SPAN, nextLeftColSpan));
+  const nextRight = combined - clampedLeft;
+  return {
+    ...items,
+    [leftId]: { ...left, colSpan: clampedLeft },
+    [rightId]: { ...right, colSpan: nextRight }
+  };
+}
+function resizeRow(rows, rowId, heightPx) {
+  return rows.map((row) => row.id === rowId ? { ...row, heightPx } : row);
+}
+function moveRow(rows, from, to) {
+  const next = [...rows];
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return next;
+}
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/dashboard-grid.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_SAVE_DEBOUNCE_MS = 600;
+var ItemTypes = { WIDGET: "widget", ROW: "row" };
+function DashboardGrid({
+  rows: initialRows,
+  widgets,
+  readOnly = false,
+  saveDebounceMs = DEFAULT_SAVE_DEBOUNCE_MS,
+  onUpdateLayout,
+  onDeleteWidget,
+  renderRowEdgeAdd,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const [{ rows, items }, setState] = (0, import_react.useState)(() => ({
+    rows: initialRows.map((row) => ({
+      id: row.id,
+      heightPx: row.heightPx,
+      widgetIds: row.widgetIds
+    })),
+    items: Object.fromEntries(
+      Object.values(widgets).map((w) => [w.id, { id: w.id, colSpan: w.colSpan }])
+    )
+  }));
+  const saveTimer = (0, import_react.useRef)(null);
+  const persist = (0, import_react.useCallback)(
+    (nextRows, nextItems) => {
+      if (readOnly) return;
+      if (saveTimer.current) clearTimeout(saveTimer.current);
+      saveTimer.current = setTimeout(() => {
+        onUpdateLayout?.(
+          nextRows.map((row) => ({ id: row.id, heightPx: row.heightPx, widgetIds: row.widgetIds })),
+          Object.values(nextItems).map((item) => ({ id: item.id, colSpan: item.colSpan }))
+        );
+      }, saveDebounceMs);
+    },
+    [readOnly, saveDebounceMs, onUpdateLayout]
+  );
+  const placeWidgetAt = (0, import_react.useCallback)(
+    (opts, targetRowId, index) => {
+      setState((prev) => {
+        const next = placeItemAt(
+          prev.rows,
+          prev.items,
+          opts.widgetId,
+          opts.fromRowId,
+          targetRowId,
+          index
+        );
+        persist(next.rows, next.items);
+        return next;
+      });
+    },
+    [persist]
+  );
+  const createRowWith = (0, import_react.useCallback)(
+    (opts) => {
+      setState((prev) => {
+        const next = placeItemInNewRow(
+          prev.rows,
+          prev.items,
+          opts.widgetId,
+          opts.fromRowId,
+          `row-${crypto.randomUUID()}`
+        );
+        persist(next.rows, next.items);
+        return next;
+      });
+    },
+    [persist]
+  );
+  const removeWidget = (0, import_react.useCallback)(
+    (widgetId, rowId) => {
+      setState((prev) => {
+        const next = removeItemFromRow(prev.rows, prev.items, widgetId, rowId);
+        persist(next.rows, next.items);
+        return next;
+      });
+      onDeleteWidget?.(widgetId);
+    },
+    [persist, onDeleteWidget]
+  );
+  const resizeWidgetPair = (0, import_react.useCallback)(
+    (leftId, rightId, nextLeftColSpan) => {
+      setState((prev) => {
+        const nextItems = resizeItemPair(prev.items, leftId, rightId, nextLeftColSpan);
+        persist(prev.rows, nextItems);
+        return { rows: prev.rows, items: nextItems };
+      });
+    },
+    [persist]
+  );
+  const resizeRowHeight = (0, import_react.useCallback)(
+    (rowId, heightPx) => {
+      setState((prev) => {
+        const nextRows = resizeRow(prev.rows, rowId, heightPx);
+        persist(nextRows, prev.items);
+        return { rows: nextRows, items: prev.items };
+      });
+    },
+    [persist]
+  );
+  const moveRowTo = (0, import_react.useCallback)(
+    (from, to) => {
+      setState((prev) => {
+        const nextRows = moveRow(prev.rows, from, to);
+        persist(nextRows, prev.items);
+        return { rows: nextRows, items: prev.items };
+      });
+    },
+    [persist]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_dnd.DndProvider, { backend: import_react_dnd_html5_backend.HTML5Backend, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Board,
+    {
+      rows,
+      items,
+      widgets,
+      readOnly,
+      onDropExisting: placeWidgetAt,
+      onCreateRowExisting: createRowWith,
+      onRemoveWidget: removeWidget,
+      onResizeWidget: resizeWidgetPair,
+      onResizeRow: resizeRowHeight,
+      onMoveRow: moveRowTo,
+      renderRowEdgeAdd,
+      renderWidgetMenu,
+      renderWidgetConfigDialog
+    }
+  ) });
+}
+function Board({
+  rows,
+  items,
+  widgets,
+  readOnly,
+  onDropExisting,
+  onCreateRowExisting,
+  onRemoveWidget,
+  onResizeWidget,
+  onResizeRow,
+  onMoveRow,
+  renderRowEdgeAdd,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const dragActive = (0, import_react_dnd.useDragLayer)((monitor) => monitor.isDragging());
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
+    rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SortableRow,
+      {
+        row,
+        index,
+        items,
+        widgets,
+        readOnly,
+        dragActive,
+        onDropExisting,
+        onRemoveWidget,
+        onResizeWidget,
+        onResizeRow,
+        onMoveRow,
+        renderRowEdgeAdd,
+        renderWidgetMenu,
+        renderWidgetConfigDialog
+      },
+      row.id
+    )),
+    !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NewRowDropZone, { onDropExisting: onCreateRowExisting }) : null
+  ] });
+}
+function NewRowDropZone({
+  onDropExisting
+}) {
+  const [{ isOver }, dropRef] = (0, import_react_dnd.useDrop)(() => ({
+    accept: ItemTypes.WIDGET,
+    drop: (item) => onDropExisting(item),
+    collect: (monitor) => ({ isOver: monitor.isOver() })
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: (node) => {
+        dropRef(node);
+      },
+      className: cn(
+        "flex h-12 items-center justify-center rounded-lg border-2 border-dashed border-border text-xs text-muted-foreground transition-colors",
+        isOver && "border-primary bg-primary/5 text-primary"
+      ),
+      children: "Drop here to start a new row"
+    }
+  );
+}
+function SortableRow({
+  row,
+  index,
+  items,
+  widgets,
+  readOnly,
+  dragActive,
+  onDropExisting,
+  onRemoveWidget,
+  onResizeWidget,
+  onResizeRow,
+  onMoveRow,
+  renderRowEdgeAdd,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const [{ isDragging }, dragRef, previewRef] = (0, import_react_dnd.useDrag)(
+    () => ({
+      type: ItemTypes.ROW,
+      item: { rowId: row.id, index },
+      canDrag: !readOnly,
+      collect: (monitor) => ({ isDragging: monitor.isDragging() })
+    }),
+    [row.id, index, readOnly]
+  );
+  const [, dropRef] = (0, import_react_dnd.useDrop)(
+    () => ({
+      accept: ItemTypes.ROW,
+      canDrop: () => !readOnly,
+      hover: (item) => {
+        if (readOnly || item.index === index) return;
+        onMoveRow(item.index, index);
+        item.index = index;
+      }
+    }),
+    [index, readOnly, onMoveRow]
+  );
+  const setRowRef = (0, import_react.useCallback)(
+    (node) => {
+      previewRef(node);
+      dropRef(node);
+    },
+    [previewRef, dropRef]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: setRowRef,
+      style: { height: row.heightPx },
+      className: cn(
+        "group/row relative flex items-stretch gap-2 rounded-lg bg-muted/30 p-2 transition-opacity",
+        isDragging && "opacity-40"
+      ),
+      children: [
+        !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: (node) => {
+              dragRef(node);
+            },
+            className: "flex w-6 shrink-0 cursor-grab items-center justify-center text-muted-foreground active:cursor-grabbing",
+            title: "Drag to reorder row",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.GripVerticalIcon, { className: "size-4" })
+          }
+        ) : null,
+        !readOnly && row.widgetIds.length < MAX_ITEMS_PER_ROW ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RowEdgeAddWidget, { rowId: row.id, edge: "start", render: renderRowEdgeAdd }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          RowContent,
+          {
+            row,
+            items,
+            widgets,
+            readOnly,
+            dragActive,
+            onDropExisting,
+            onRemoveWidget,
+            onResizeWidget,
+            renderWidgetMenu,
+            renderWidgetConfigDialog
+          }
+        ),
+        !readOnly && row.widgetIds.length < MAX_ITEMS_PER_ROW ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RowEdgeAddWidget, { rowId: row.id, edge: "end", render: renderRowEdgeAdd }) : null,
+        !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RowResizeHandle, { rowId: row.id, heightPx: row.heightPx, onResize: onResizeRow }) : null
+      ]
+    }
+  );
+}
+function RowEdgeAddWidget({
+  rowId,
+  edge,
+  render
+}) {
+  if (!render) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: render({ rowId, edge }) });
+}
+function RowContent({
+  row,
+  items,
+  widgets,
+  readOnly,
+  dragActive,
+  onDropExisting,
+  onRemoveWidget,
+  onResizeWidget,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className: "flex h-full min-w-0 flex-1 items-stretch", children: [
+    !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      InsertionZone,
+      {
+        rowId: row.id,
+        index: 0,
+        widgetCount: row.widgetIds.length,
+        dragActive,
+        onDropExisting
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoneSpacer, {}),
+    row.widgetIds.map((widgetId, i) => {
+      const item = items[widgetId];
+      const widget = widgets[widgetId];
+      if (!item || !widget) return null;
+      return (
+        // A Fragment, not a wrapping div — PlacedWidget must be a direct
+        // flex child of the row container above, since its percentage
+        // width resolves against its immediate parent. A wrapper div here
+        // (with no definite width of its own) would make that percentage
+        // resolve against an indefinite size and collapse to content
+        // width instead.
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            PlacedWidget,
+            {
+              item,
+              widget,
+              rowId: row.id,
+              widgetCount: row.widgetIds.length,
+              readOnly,
+              onRemoveWidget,
+              renderWidgetMenu,
+              renderWidgetConfigDialog
+            }
+          ),
+          !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            InsertionZone,
+            {
+              rowId: row.id,
+              index: i + 1,
+              widgetCount: row.widgetIds.length,
+              dragActive,
+              leftWidgetId: widgetId,
+              rightWidgetId: row.widgetIds[i + 1],
+              leftColSpan: item.colSpan,
+              containerRef,
+              onDropExisting,
+              onResizeWidget
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoneSpacer, {})
+        ] }, widgetId)
+      );
+    })
+  ] });
+}
+function ZoneSpacer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: ZONE_WIDTH_PX }, className: "shrink-0" });
+}
+function InsertionZone({
+  rowId,
+  index,
+  widgetCount,
+  dragActive,
+  leftWidgetId,
+  rightWidgetId,
+  leftColSpan,
+  containerRef,
+  onDropExisting,
+  onResizeWidget
+}) {
+  const [{ isOver, canDrop }, dropRef] = (0, import_react_dnd.useDrop)(
+    () => ({
+      accept: ItemTypes.WIDGET,
+      // A same-row reorder never grows the row, so it's always allowed —
+      // only a drop that would add a net-new member to an already-full row
+      // is rejected (mirrors the authoritative check in placeItemAt).
+      canDrop: (item) => {
+        if (widgetCount < MAX_ITEMS_PER_ROW) return true;
+        return item.fromRowId === rowId;
+      },
+      drop: (item) => onDropExisting(item, rowId, index),
+      collect: (monitor) => ({ isOver: monitor.isOver(), canDrop: monitor.canDrop() })
+    }),
+    [rowId, index, widgetCount, onDropExisting]
+  );
+  const isResizable = leftWidgetId !== void 0 && rightWidgetId !== void 0;
+  const handleMouseDown = (0, import_react.useCallback)(
+    (event) => {
+      if (leftWidgetId === void 0 || rightWidgetId === void 0 || leftColSpan === void 0 || !containerRef?.current || !onResizeWidget) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const containerWidth = containerRef.current.getBoundingClientRect().width;
+      if (!containerWidth) return;
+      const zonesWidthPx = (widgetCount + 1) * ZONE_WIDTH_PX;
+      const colWidthPx = (containerWidth - zonesWidthPx) / COLS;
+      const startX = event.clientX;
+      const startLeftColSpan = leftColSpan;
+      const resolvedOnResize = onResizeWidget;
+      const resolvedLeftId = leftWidgetId;
+      const resolvedRightId = rightWidgetId;
+      function handleMove(moveEvent) {
+        const deltaCols = Math.round((moveEvent.clientX - startX) / colWidthPx);
+        resolvedOnResize(resolvedLeftId, resolvedRightId, startLeftColSpan + deltaCols);
+      }
+      function handleUp() {
+        window.removeEventListener("mousemove", handleMove);
+        window.removeEventListener("mouseup", handleUp);
+      }
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    },
+    [leftWidgetId, rightWidgetId, leftColSpan, containerRef, widgetCount, onResizeWidget]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: (node) => {
+        dropRef(node);
+      },
+      onMouseDown: handleMouseDown,
+      style: { width: ZONE_WIDTH_PX },
+      className: cn(
+        // Fixed footprint at all times — the "grows on hover" affordance
+        // comes from a scale transform on the inner pill, not a width
+        // change, so it can't perturb every other widget's calc()'d width
+        // mid-drag.
+        "flex h-full shrink-0 items-center justify-center",
+        isResizable && "cursor-ew-resize"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: cn(
+            "h-full w-full rounded-full transition-all",
+            isOver && canDrop ? "scale-x-150 bg-primary/25 ring-2 ring-primary" : dragActive && canDrop ? "ring-dashed bg-muted-foreground/20 ring-1 ring-border" : isResizable ? "bg-transparent hover:bg-muted-foreground/20 hover:ring-1 hover:ring-border" : "bg-transparent"
+          )
+        }
+      )
+    }
+  );
+}
+function PlacedWidget({
+  item,
+  widget,
+  rowId,
+  widgetCount,
+  readOnly,
+  onRemoveWidget,
+  renderWidgetMenu,
+  renderWidgetConfigDialog
+}) {
+  const zonesWidthPx = (widgetCount + 1) * ZONE_WIDTH_PX;
+  const widthCss = `calc((100% - ${zonesWidthPx}px) * ${item.colSpan} / ${COLS})`;
+  const [{ isDragging }, dragRef, previewRef] = (0, import_react_dnd.useDrag)(
+    () => ({
+      type: ItemTypes.WIDGET,
+      item: { widgetId: item.id, fromRowId: rowId },
+      canDrag: !readOnly,
+      collect: (monitor) => ({ isDragging: monitor.isDragging() })
+    }),
+    [item.id, rowId, readOnly]
+  );
+  const [configureOpen, setConfigureOpen] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: (node) => {
+        previewRef(node);
+      },
+      style: { width: widthCss },
+      className: cn(
+        "group relative h-full min-w-0 shrink-0 overflow-hidden transition-opacity",
+        isDragging && "opacity-40"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full", children: widget.content }),
+        !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              ref: (node) => {
+                dragRef(node);
+              },
+              className: "absolute top-2 left-2 z-10 cursor-grab rounded-md bg-background/80 p-1 text-muted-foreground opacity-0 backdrop-blur transition-opacity group-hover:opacity-100 focus-visible:opacity-100 active:cursor-grabbing",
+              title: "Drag to move",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.GripVerticalIcon, { className: "size-3.5" })
+            }
+          ),
+          renderWidgetMenu?.(widget, {
+            onConfigure: () => setConfigureOpen(true),
+            onDelete: () => onRemoveWidget(widget.id, rowId)
+          }),
+          renderWidgetConfigDialog?.({
+            widget,
+            open: configureOpen,
+            onOpenChange: setConfigureOpen
+          })
+        ] }) : null
+      ]
+    }
+  );
+}
+function RowResizeHandle({
+  rowId,
+  heightPx,
+  onResize
+}) {
+  const handleMouseDown = (0, import_react.useCallback)(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const startY = event.clientY;
+      const startHeight = heightPx;
+      function handleMove(moveEvent) {
+        const nextHeight = Math.min(
+          MAX_ROW_HEIGHT,
+          Math.max(MIN_ROW_HEIGHT, startHeight + (moveEvent.clientY - startY))
+        );
+        onResize(rowId, nextHeight);
+      }
+      function handleUp() {
+        window.removeEventListener("mousemove", handleMove);
+        window.removeEventListener("mouseup", handleUp);
+      }
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    },
+    [rowId, heightPx, onResize]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      onMouseDown: handleMouseDown,
+      className: "absolute inset-x-6 -bottom-2 flex h-3 cursor-ns-resize items-center justify-center",
+      title: "Drag to resize row height",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1 w-10 rounded-full bg-border" })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  COLS,
+  DEFAULT_ROW_HEIGHT,
+  DashboardGrid,
+  MAX_ITEMS_PER_ROW,
+  MAX_ROW_HEIGHT,
+  MIN_COL_SPAN,
+  MIN_ROW_HEIGHT,
+  ZONE_WIDTH_PX,
+  canPlaceInRow,
+  moveRow,
+  placeItemAt,
+  placeItemInNewRow,
+  rebalanceRow,
+  removeItemFromRow,
+  resizeItemPair,
+  resizeRow
+});
+//# sourceMappingURL=index.cjs.map