@vertly/dashboard-grid 0.1.0 → 0.2.0

package/dist/dashboard-grid.cjs

@@ -0,0 +1,621 @@
+"use strict";
+"use client";
+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);
+var dashboard_grid_exports = {};
+__export(dashboard_grid_exports, {
+  DashboardGrid: () => DashboardGrid,
+  EXTERNAL_ITEM_TYPE: () => EXTERNAL_ITEM_TYPE
+});
+module.exports = __toCommonJS(dashboard_grid_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+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");
+var import_layout_engine = require("./layout-engine");
+var import_cn = require("./cn");
+const DEFAULT_SAVE_DEBOUNCE_MS = 600;
+const ItemTypes = { WIDGET: "widget", ROW: "row" };
+const EXTERNAL_ITEM_TYPE = "vertly-dashboard-grid:external-item";
+function DashboardGrid({
+  rows: initialRows,
+  widgets,
+  readOnly = false,
+  saveDebounceMs = DEFAULT_SAVE_DEBOUNCE_MS,
+  onUpdateLayout,
+  onDeleteWidget,
+  onDropExternalItem,
+  onCreateRowExternalItem,
+  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 = (0, import_layout_engine.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 = (0, import_layout_engine.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 = (0, import_layout_engine.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 = (0, import_layout_engine.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 = (0, import_layout_engine.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 = (0, import_layout_engine.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,
+      onDropExternalItem,
+      onCreateRowExternalItem,
+      renderRowEdgeAdd,
+      renderWidgetMenu,
+      renderWidgetConfigDialog
+    }
+  ) });
+}
+function Board({
+  rows,
+  items,
+  widgets,
+  readOnly,
+  onDropExisting,
+  onCreateRowExisting,
+  onRemoveWidget,
+  onResizeWidget,
+  onResizeRow,
+  onMoveRow,
+  onDropExternalItem,
+  onCreateRowExternalItem,
+  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,
+        onDropExternalItem,
+        renderRowEdgeAdd,
+        renderWidgetMenu,
+        renderWidgetConfigDialog
+      },
+      row.id
+    )),
+    !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      NewRowDropZone,
+      {
+        onDropExisting: onCreateRowExisting,
+        onCreateRowExternalItem
+      }
+    ) : null
+  ] });
+}
+function NewRowDropZone({
+  onDropExisting,
+  onCreateRowExternalItem
+}) {
+  const [{ isOver }, dropRef] = (0, import_react_dnd.useDrop)(
+    () => ({
+      accept: onCreateRowExternalItem ? [ItemTypes.WIDGET, EXTERNAL_ITEM_TYPE] : ItemTypes.WIDGET,
+      drop: (item, monitor) => {
+        if (monitor.getItemType() === EXTERNAL_ITEM_TYPE) {
+          onCreateRowExternalItem?.(item);
+        } else {
+          onDropExisting(item);
+        }
+      },
+      collect: (monitor) => ({ isOver: monitor.isOver() })
+    }),
+    [onDropExisting, onCreateRowExternalItem]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: (node) => {
+        dropRef(node);
+      },
+      className: (0, import_cn.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,
+  onDropExternalItem,
+  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: (0, import_cn.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 < import_layout_engine.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,
+            onDropExternalItem,
+            renderWidgetMenu,
+            renderWidgetConfigDialog
+          }
+        ),
+        !readOnly && row.widgetIds.length < import_layout_engine.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,
+  onDropExternalItem,
+  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,
+        onDropExternalItem
+      }
+    ) : /* @__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,
+              onDropExternalItem,
+              onResizeWidget
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoneSpacer, {})
+        ] }, widgetId)
+      );
+    })
+  ] });
+}
+function ZoneSpacer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: import_layout_engine.ZONE_WIDTH_PX }, className: "shrink-0" });
+}
+function InsertionZone({
+  rowId,
+  index,
+  widgetCount,
+  dragActive,
+  leftWidgetId,
+  rightWidgetId,
+  leftColSpan,
+  containerRef,
+  onDropExisting,
+  onDropExternalItem,
+  onResizeWidget
+}) {
+  const [{ isOver, canDrop }, dropRef] = (0, import_react_dnd.useDrop)(
+    () => ({
+      accept: onDropExternalItem ? [ItemTypes.WIDGET, EXTERNAL_ITEM_TYPE] : 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). A
+      // dropped external item is always a net-new member (there's nothing
+      // to reorder), so it only ever gets the row-not-full check.
+      canDrop: (item, monitor) => {
+        if (monitor.getItemType() === EXTERNAL_ITEM_TYPE) {
+          return widgetCount < import_layout_engine.MAX_ITEMS_PER_ROW;
+        }
+        if (widgetCount < import_layout_engine.MAX_ITEMS_PER_ROW) return true;
+        return item.fromRowId === rowId;
+      },
+      drop: (item, monitor) => {
+        if (monitor.getItemType() === EXTERNAL_ITEM_TYPE) {
+          onDropExternalItem?.(item, rowId, index);
+        } else {
+          onDropExisting(item, rowId, index);
+        }
+      },
+      collect: (monitor) => ({ isOver: monitor.isOver(), canDrop: monitor.canDrop() })
+    }),
+    [rowId, index, widgetCount, onDropExisting, onDropExternalItem]
+  );
+  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) * import_layout_engine.ZONE_WIDTH_PX;
+      const colWidthPx = (containerWidth - zonesWidthPx) / import_layout_engine.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: import_layout_engine.ZONE_WIDTH_PX },
+      className: (0, import_cn.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: (0, import_cn.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) * import_layout_engine.ZONE_WIDTH_PX;
+  const widthCss = `calc((100% - ${zonesWidthPx}px) * ${item.colSpan} / ${import_layout_engine.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: (0, import_cn.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(
+          import_layout_engine.MAX_ROW_HEIGHT,
+          Math.max(import_layout_engine.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 = {
+  DashboardGrid,
+  EXTERNAL_ITEM_TYPE
+});
+//# sourceMappingURL=dashboard-grid.cjs.map