gridsmith-ui 0.31.1 → 0.33.0

package/dist/dashboard.js

@@ -0,0 +1,1210 @@
+"use client";
+import { useCompact, OverlayCloseCtx } from './chunk-ZQV26NND.js';
+import { DashboardCellContext } from './chunk-P3NUUIL6.js';
+import { useHydrated } from './chunk-GIA4BMGI.js';
+import './chunk-72SDAX54.js';
+import { DropdownMenu } from './chunk-WD6T57ZJ.js';
+import { FillContext } from './chunk-SS3C24IJ.js';
+import { Spinner, elementType } from './chunk-FF57N3P7.js';
+import './chunk-ZHUVLBCC.js';
+import './chunk-7RKC5C7G.js';
+import { keyboardScroll } from './chunk-F2XMZOUP.js';
+import { AutoTooltip, useRevealFocus } from './chunk-HCEHTJ5E.js';
+import { warnOnce, Icon } from './chunk-53F7GVBQ.js';
+import { cn, FOCUS_RING, GLASS_DROPDOWN, useLatest, focusAfterSelfRemoval, hasTabStop } from './chunk-2724SJO2.js';
+import { createContext, useContext, useId, useRef, useState, useLayoutEffect, useCallback, useMemo, useEffect, Children, isValidElement, Fragment as Fragment$1 } from 'react';
+import { createPortal } from 'react-dom';
+import { useDraggable, useSensors, useSensor, MouseSensor, TouchSensor, DndContext, DragOverlay } from '@dnd-kit/core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var SURFACE = 'svg[tabindex="0"]';
+var holdsStop = (el) => hasTabStop(el) || !!el.querySelector(SURFACE);
+function useCellFrameScroll(content, label) {
+  const part = useRef(null);
+  useRevealFocus(part);
+  const labelRef = useLatest(label);
+  useEffect(() => {
+    const wrapper = content.current;
+    if (!wrapper || typeof MutationObserver === "undefined") return;
+    let held = null;
+    let queued = 0;
+    const read = () => {
+      queued = 0;
+      const frame = wrapper.firstElementChild;
+      const button = frame?.getAttribute("role") === "button";
+      let stop = null;
+      let name = () => "";
+      if (frame instanceof HTMLElement && frame.hasAttribute("data-stats-card")) {
+        part.current = frame;
+        if (!button) {
+          stop = frame;
+          name = () => frame.querySelector("span")?.textContent?.trim() || labelRef.current;
+        }
+      } else if (frame?.matches("[data-card]:not([data-gs])")) {
+        const body = frame.querySelector(":scope > [data-card-content]");
+        part.current = body;
+        if (button) warnOnce("DashboardGrid", `the widget "${labelRef.current}" is a clickable Card with no CardTitle, so it stays a button and its content can't scroll by keyboard: give it a CardHeader with a CardTitle (every widget needs a title), which then carries the card's action.`);
+        else if (body) {
+          stop = body;
+          name = () => frame.querySelector(":scope > [data-card-header] [data-card-title]")?.textContent?.trim() || "Card content";
+        }
+      } else {
+        const table = frame?.matches('[data-gs="table"]') ? frame : frame?.matches("[data-gs-paged]") ? frame.querySelector(':scope > [data-gs="table"]') : null;
+        part.current = table?.querySelector(":scope > [data-table-scroll]") ?? null;
+      }
+      if (held && held.el !== stop) {
+        held.scroll?.end();
+        held = null;
+      }
+      if (held) held.scroll?.update();
+      else if (stop) held = { el: stop, scroll: keyboardScroll(stop, name, "y", holdsStop) };
+    };
+    read();
+    const observer = new MutationObserver(() => {
+      if (!queued) queued = requestAnimationFrame(read);
+    });
+    observer.observe(wrapper, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["role"] });
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(queued);
+      held?.scroll?.end();
+      part.current = null;
+    };
+  }, [content, labelRef]);
+}
+
+// ../../showcase/src/lib/dashboard-layout.ts
+var DASHBOARD_COLUMNS = 12;
+var MIN_W = 3;
+var DEFAULT_MIN_H = 2;
+var DASHBOARD_MAX_ROWS = 100;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var whole = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? Math.round(value) : fallback;
+function sizeLimits(item) {
+  const minW = clamp(whole(item.minW, MIN_W), MIN_W, DASHBOARD_COLUMNS);
+  const maxW = clamp(whole(item.maxW, DASHBOARD_COLUMNS), minW, DASHBOARD_COLUMNS);
+  const minH = clamp(whole(item.minH, DEFAULT_MIN_H), 1, DASHBOARD_MAX_ROWS);
+  const maxH = clamp(whole(item.maxH, DASHBOARD_MAX_ROWS), minH, DASHBOARD_MAX_ROWS);
+  return { minW, maxW, minH, maxH };
+}
+function normaliseItem(item) {
+  const limits = sizeLimits(item);
+  const next = { ...item, w: clamp(whole(item.w, limits.minW), limits.minW, limits.maxW), h: clamp(whole(item.h, limits.minH), limits.minH, limits.maxH) };
+  for (const key of ["minW", "maxW", "minH", "maxH"]) if (item[key] !== void 0) next[key] = limits[key];
+  return next;
+}
+function normaliseLayout(layout) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const item of Array.isArray(layout) ? layout : []) {
+    if (!item || typeof item.id !== "string" || item.id === "" || seen.has(item.id)) continue;
+    seen.add(item.id);
+    out.push(normaliseItem(item));
+  }
+  return out;
+}
+function moveItem(layout, id, toIndex) {
+  const items = normaliseLayout(layout);
+  const from = items.findIndex((item2) => item2.id === id);
+  if (from < 0) return items;
+  const [item] = items.splice(from, 1);
+  items.splice(clamp(whole(toIndex, from), 0, items.length), 0, item);
+  return items;
+}
+function resizeItem(layout, id, size) {
+  return normaliseLayout(layout).map((item) => item.id === id ? normaliseItem({ ...item, ...size.w !== void 0 ? { w: size.w } : {}, ...size.h !== void 0 ? { h: size.h } : {} }) : item);
+}
+function addItem(layout, item, index) {
+  const items = normaliseLayout(layout);
+  if (!item || typeof item.id !== "string" || item.id === "" || items.some((it) => it.id === item.id)) return items;
+  items.splice(clamp(whole(index, items.length), 0, items.length), 0, normaliseItem(item));
+  return items;
+}
+function placeLayout(items, columns = DASHBOARD_COLUMNS) {
+  const taken = [];
+  const free = (row2, col2, w, h) => {
+    for (let r = row2; r < row2 + h; r++) for (let c = col2; c < col2 + w; c++) if (taken[r]?.[c]) return false;
+    return true;
+  };
+  const out = [];
+  let row = 0;
+  let col = 0;
+  for (const item of items) {
+    const w = clamp(item.w, 1, columns);
+    const h = Math.max(1, item.h);
+    for (; ; ) {
+      if (col + w > columns) {
+        row++;
+        col = 0;
+        continue;
+      }
+      if (free(row, col, w, h)) break;
+      col++;
+    }
+    for (let r = row; r < row + h; r++) {
+      taken[r] ??= [];
+      for (let c = col; c < col + w; c++) taken[r][c] = true;
+    }
+    out.push({ id: item.id, col, row, w, h });
+  }
+  return out;
+}
+function landingAt(others, item, index, columns) {
+  return placeLayout([...others.slice(0, index), item, ...others.slice(index)], columns)[index];
+}
+function stepTarget(layout, id, step, columns = DASHBOARD_COLUMNS) {
+  const at = layout.findIndex((item2) => item2.id === id);
+  const last = layout.length - 1;
+  if (at < 0) return { blocked: "first" };
+  switch (step) {
+    case "earlier":
+      return at > 0 ? { index: at - 1 } : { blocked: "first" };
+    case "later":
+      return at < last ? { index: at + 1 } : { blocked: "last" };
+    case "first":
+      return at > 0 ? { index: 0 } : { blocked: "first" };
+    case "last":
+      return at < last ? { index: last } : { blocked: "last" };
+  }
+  const item = layout[at];
+  const others = layout.filter((_, i) => i !== at);
+  const here = placeLayout(layout, columns)[at];
+  let best = null;
+  for (let index = 0; index <= others.length; index++) {
+    if (index === at) continue;
+    const p = landingAt(others, item, index, columns);
+    if (step === "down" ? p.row <= here.row : p.row >= here.row) continue;
+    const rows = Math.abs(p.row - here.row);
+    const cols = Math.abs(p.col - here.col);
+    const steps = Math.abs(index - at);
+    if (!best || rows < best.rows || rows === best.rows && (cols < best.cols || cols === best.cols && steps < best.steps)) best = { index, rows, cols, steps };
+  }
+  return best ? { index: best.index } : { blocked: step === "up" ? "top" : "bottom" };
+}
+function nearestIndex(others, item, point, pitch, columns = DASHBOARD_COLUMNS) {
+  let best = 0;
+  let bestDistance = Infinity;
+  for (let index = 0; index <= others.length; index++) {
+    const p = landingAt(others, item, index, columns);
+    const distance = Math.hypot((p.col - point.col) * pitch.col, (p.row - point.row) * pitch.row);
+    if (distance < bestDistance - 1e-3) {
+      best = index;
+      bestDistance = distance;
+    }
+  }
+  return best;
+}
+var DASHBOARD_WIDTHS = [
+  { w: 3, label: "A quarter of the width", words: "a quarter of the width" },
+  { w: 4, label: "A third of the width", words: "a third of the width" },
+  { w: 6, label: "Half the width", words: "half the width" },
+  { w: 8, label: "Two thirds of the width", words: "two thirds of the width" },
+  { w: 9, label: "Three quarters of the width", words: "three quarters of the width" },
+  { w: 12, label: "The full width", words: "the full width" }
+];
+var DASHBOARD_HEIGHTS = [
+  { h: 2, label: "Short" },
+  { h: 5, label: "Medium" },
+  { h: 8, label: "Tall" }
+];
+var widthWords = (w) => DASHBOARD_WIDTHS.find((option) => option.w === w)?.words ?? `${w} ${w === 1 ? "column" : "columns"} wide`;
+var sizeWords = (w, h) => `${widthWords(w)}, ${h} ${h === 1 ? "row" : "rows"} tall`;
+var GAP = "var(--ds-space-4)";
+var ROW = "var(--ds-space-12)";
+var FLOOR = `calc(4 * ${ROW} + 3 * ${GAP})`;
+var UNLISTED = { w: 4, h: 4 };
+var WATCH_MS = 1e4;
+var NEW_ID = "\0new";
+var NO_BREAK_SPACE = String.fromCharCode(160);
+var LIFTED_LAYER = "ds-dashboard-lifted-layer";
+var FRAMES = '[data-card], [data-gs="table"], [data-gs-paged], [data-gs="chart"], [data-stats-card]';
+var SETTLE_MS = 1e4;
+var CONTROL = cn(
+  "absolute z-[1] inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)]",
+  "rounded-[var(--ds-radius-md)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+  "transition-colors duration-[var(--ds-transition-speed)]",
+  FOCUS_RING
+);
+var PLACE_TOP = [
+  "top-[calc(var(--ds-space-4)+(var(--ds-font-size-lg)*var(--ds-line-height-lg)-var(--ds-control-height-sm))/2)]",
+  "[:has(>[data-dashboard-content]>[data-stats-card])>&]:top-[calc(var(--ds-space-3)+(var(--ds-font-size-xs)*4/3-var(--ds-control-height-sm))/2)]",
+  "sm:[:has(>[data-dashboard-content]>[data-stats-card])>&]:top-[calc(var(--ds-space-5)+(var(--ds-font-size-xs)*4/3-var(--ds-control-height-sm))/2)]",
+  "@max-[13rem]/dashboard-cell:top-ds-4",
+  "@max-[13rem]/dashboard-cell:[:has(>[data-dashboard-content]>[data-stats-card])>&]:top-ds-3",
+  "sm:@max-[13rem]/dashboard-cell:[:has(>[data-dashboard-content]>[data-stats-card])>&]:top-ds-5"
+].join(" ");
+var PLACE_START = "start-ds-5 [:has(>[data-dashboard-content]>[data-stats-card])>&]:start-ds-3 sm:[:has(>[data-dashboard-content]>[data-stats-card])>&]:start-ds-5";
+var PLACE_END = "end-ds-5 [:has(>[data-dashboard-content]>[data-stats-card])>&]:end-ds-3 sm:[:has(>[data-dashboard-content]>[data-stats-card])>&]:end-ds-5";
+var GRIP = cn(
+  "absolute bottom-[4px] end-[4px] z-[1] inline-flex h-6 w-6 items-center justify-center rounded-[var(--ds-radius-sm)]",
+  "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+  "cursor-nwse-resize rtl:cursor-nesw-resize touch-manipulation select-none [-webkit-touch-callout:none]",
+  FOCUS_RING
+);
+var READOUT = cn(
+  "pointer-events-none absolute end-[4px] bottom-[calc(4px+1.5rem+var(--ds-space-1))] z-[2] whitespace-nowrap px-ds-2 py-ds-1 text-xs tabular-nums",
+  "bg-[var(--ds-bg-surface-elevated)] text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] rounded-[var(--ds-radius-sm)]",
+  GLASS_DROPDOWN
+);
+var PLACEHOLDER = "rounded-[var(--ds-radius-md)] border-2 border-dashed border-[var(--ds-accent-primary)] bg-[var(--ds-accent-subtle)]";
+var LIFTED = "rounded-[var(--ds-radius-md)] shadow-[var(--ds-shadow-lg)] outline-2 outline-dashed outline-offset-2 outline-[var(--ds-accent-primary)]";
+var SILENT = { onDragStart: () => void 0, onDragOver: () => void 0, onDragEnd: () => void 0, onDragCancel: () => void 0 };
+var MOUSE = { activationConstraint: { distance: 5 } };
+var TOUCH = { activationConstraint: { delay: 250, tolerance: 5 } };
+function isRtl(el) {
+  const dir = el.closest("[dir]")?.getAttribute("dir")?.toLowerCase();
+  if (dir === "rtl" || dir === "ltr") return dir === "rtl";
+  return typeof getComputedStyle === "function" && getComputedStyle(el).direction === "rtl";
+}
+function speedOf(el) {
+  const raw = getComputedStyle(el).getPropertyValue("--ds-transition-speed").trim();
+  const n = parseFloat(raw);
+  if (!Number.isFinite(n)) return 0;
+  return raw.endsWith("ms") ? n : raw.endsWith("s") ? n * 1e3 : n;
+}
+function pitchOf(cells, columns) {
+  const style = getComputedStyle(cells);
+  const colGap = parseFloat(style.columnGap) || 0;
+  const rowGap = parseFloat(style.rowGap) || 0;
+  const row = parseFloat(style.gridAutoRows) || 0;
+  return { col: (cells.clientWidth + colGap) / columns, row: row + rowGap, rtl: isRtl(cells) };
+}
+function partOf(root, attr, id) {
+  return [...root?.querySelectorAll(`[${attr}]`) ?? []].find((el) => el.getAttribute(attr) === id) ?? null;
+}
+var isThenable = (value) => value != null && typeof value.then === "function";
+var clamp2 = (value, min, max) => Math.min(Math.max(value, min), max);
+var DashboardArenaCtx = createContext(null);
+function Lifted({ picture, surface }) {
+  const host = useRef(null);
+  useLayoutEffect(() => {
+    host.current?.replaceChildren(picture);
+  }, [picture]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: host,
+      "aria-hidden": "true",
+      "data-dashboard-lifted": "",
+      className: cn(
+        "h-full w-full rounded-[var(--ds-radius-md)] shadow-[var(--ds-shadow-lg)]",
+        surface && "overflow-hidden bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
+      )
+    }
+  );
+}
+function pictureOf(el) {
+  if (!el) return null;
+  const copy = el.cloneNode(true);
+  copy.removeAttribute("role");
+  copy.removeAttribute("aria-label");
+  copy.removeAttribute("id");
+  for (const named of copy.querySelectorAll("[id]")) named.removeAttribute("id");
+  copy.setAttribute("inert", "");
+  copy.style.width = "100%";
+  copy.style.height = "100%";
+  return copy;
+}
+function DragArena({ children }) {
+  const drags = useRef(null);
+  const [grid, setGrid] = useState(null);
+  const [lifted, setLifted] = useState(null);
+  const [settle, setSettle] = useState(null);
+  const hydrated = useHydrated();
+  const sensors = useSensors(useSensor(MouseSensor, MOUSE), useSensor(TouchSensor, TOUCH));
+  const api = useMemo(() => ({
+    connect: (handlers) => {
+      if (drags.current && drags.current !== handlers) warnOnce("DashboardGrid", "one DashboardGrid at a time in a DashboardEditor: show one tab's grid at a time.");
+      drags.current = handlers;
+      return () => {
+        if (drags.current === handlers) drags.current = null;
+      };
+    },
+    publish: setGrid
+  }), []);
+  const value = useMemo(() => ({ ...api, grid, dragging: lifted?.type ?? null }), [api, grid, lifted]);
+  const dragOf = (active) => active.data.current;
+  const point = useRef(null);
+  const collisionDetection = useCallback(({ pointerCoordinates }) => {
+    point.current = pointerCoordinates;
+    return [];
+  }, []);
+  const dragOn = lifted !== null;
+  useEffect(() => {
+    if (!dragOn) return;
+    const claim = (e) => {
+      if (e.key === "Escape") e.preventDefault();
+    };
+    document.addEventListener("keydown", claim, true);
+    return () => document.removeEventListener("keydown", claim, true);
+  }, [dragOn]);
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      accessibility: { announcements: SILENT, screenReaderInstructions: { draggable: "" }, restoreFocus: false, container: hydrated ? document.body : void 0 },
+      collisionDetection,
+      cancelDrop: ({ active }) => {
+        const drag = dragOf(active);
+        return !!drag && !!drags.current?.current.refuses(drag, point.current);
+      },
+      onDragStart: ({ active }) => {
+        const drag = dragOf(active);
+        if (!drag) return;
+        const node = drag.picture();
+        setSettle({ type: drag.type, speed: speedOf(node ?? document.documentElement), rtl: !!node && isRtl(node) });
+        setLifted({ type: drag.type, picture: drag.type === "resize" ? null : pictureOf(node) });
+        drags.current?.current.start(drag);
+      },
+      onDragMove: (event) => {
+        const drag = dragOf(event.active);
+        if (drag) drags.current?.current.move(drag, event, point.current);
+      },
+      onDragEnd: ({ active }) => {
+        const drag = dragOf(active);
+        setLifted(null);
+        if (drag) drags.current?.current.end(drag);
+      },
+      onDragCancel: ({ active }) => {
+        const drag = dragOf(active);
+        setLifted(null);
+        if (drag) drags.current?.current.cancel(drag);
+      },
+      children: [
+        /* @__PURE__ */ jsx(DashboardArenaCtx, { value, children }),
+        hydrated && createPortal(
+          /* @__PURE__ */ jsx(
+            DragOverlay,
+            {
+              className: LIFTED_LAYER,
+              dropAnimation: settle?.type === "move" && settle.speed > 0 ? { duration: settle.speed, easing: "ease" } : null,
+              style: { cursor: settle?.type === "resize" ? settle.rtl ? "nesw-resize" : "nwse-resize" : "grabbing" },
+              children: lifted?.picture ? /* @__PURE__ */ jsx(Lifted, { picture: lifted.picture, surface: lifted.type === "kind" }) : null
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+function DashboardEditor({ children }) {
+  return /* @__PURE__ */ jsx(DragArena, { children });
+}
+function DashboardItem({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function itemsOf(children) {
+  const items = [];
+  const repeated = [];
+  let strays = 0;
+  const seen = /* @__PURE__ */ new Set();
+  const open = (node) => Children.forEach(node, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === Fragment$1) {
+      open(child.props.children);
+      return;
+    }
+    if (elementType(child.type) !== DashboardItem) {
+      strays++;
+      return;
+    }
+    const { id, label, children: content } = child.props;
+    if (typeof id !== "string" || id === "" || seen.has(id)) {
+      repeated.push(String(id));
+      return;
+    }
+    seen.add(id);
+    items.push({ id, label: typeof label === "string" && label ? label : id, content });
+  });
+  open(children);
+  return { items, strays, repeated };
+}
+function drawnLayout(layout, ids) {
+  const present = new Set(ids);
+  const known = normaliseLayout(layout).filter((item) => present.has(item.id));
+  const listed = new Set(known.map((item) => item.id));
+  return [...known, ...ids.filter((id) => !listed.has(id)).map((id) => ({ id, ...UNLISTED }))];
+}
+function applyPreview(committed, preview) {
+  if (!preview) return committed;
+  if (preview.type === "move") return moveItem(committed, preview.id, preview.index);
+  if (preview.type === "resize") return resizeItem(committed, preview.id, { w: preview.w, h: preview.h });
+  return addItem(committed, { id: NEW_ID, w: preview.kind.w, h: preview.kind.h }, preview.index);
+}
+var BLOCKED = {
+  first: (name) => `${name} is first.`,
+  last: (name) => `${name} is last.`,
+  top: (name) => `${name} is in the top row.`,
+  bottom: (name) => `${name} is in the bottom row.`
+};
+function tidy(entries) {
+  const isDivider = (e) => !!e && "type" in e && e.type === "divider";
+  return entries.reduce((acc, e) => isDivider(e) && (acc.length === 0 || isDivider(acc[acc.length - 1])) ? acc : [...acc, e], []).filter((e, i, all) => !(isDivider(e) && i === all.length - 1));
+}
+function menuEntries(item, at, total, stacked, actions) {
+  const { id } = item;
+  const last = total - 1;
+  const moves = [
+    ...at > 1 ? [{ label: "Move to the start", onClick: () => actions.moveTo(id, 0) }] : [],
+    ...at > 0 ? [{ label: "Move earlier", onClick: () => actions.moveTo(id, at - 1) }] : [],
+    ...at < last ? [{ label: "Move later", onClick: () => actions.moveTo(id, at + 1) }] : [],
+    ...at < last - 1 ? [{ label: "Move to the end", onClick: () => actions.moveTo(id, last) }] : []
+  ];
+  const limits = sizeLimits(item);
+  const widths = DASHBOARD_WIDTHS.filter((o) => o.w !== item.w && o.w >= limits.minW && o.w <= limits.maxW).map((o) => ({ label: o.label, onClick: () => actions.sizeTo(id, { w: o.w }) }));
+  const heights = DASHBOARD_HEIGHTS.filter((o) => o.h !== item.h && o.h >= limits.minH && o.h <= limits.maxH).map((o) => ({ label: o.label, onClick: () => actions.sizeTo(id, { h: o.h }) }));
+  const divider = { type: "divider" };
+  const size = widths.length && heights.length ? [...widths, divider, ...heights] : [...widths, ...heights];
+  const watched = (entry) => ({ ...entry, onClick: () => {
+    actions.chose(id);
+    entry.onClick();
+  } });
+  const own = (actions.itemActions?.(id) ?? []).map((entry) => "type" in entry ? entry : "items" in entry ? { ...entry, items: entry.items.map((sub) => "type" in sub ? sub : watched(sub)) } : watched(entry));
+  const select = actions.onSelect;
+  return tidy([
+    ...select ? [{ label: "Set up", onClick: () => select(id) }] : [],
+    ...moves.length ? [{ label: "Move", items: moves }] : [],
+    // A12: a stacked grid has no resizing; its widgets keep their rows, and their widths don't show
+    ...!stacked && size.length ? [{ label: "Size", items: size }] : [],
+    divider,
+    ...own
+  ]);
+}
+function DashboardGrid(props) {
+  const arena = useContext(DashboardArenaCtx);
+  return arena ? /* @__PURE__ */ jsx(Grid, { ...props, arena }) : /* @__PURE__ */ jsx(DragArena, { children: /* @__PURE__ */ jsx(OwnArenaGrid, { ...props }) });
+}
+function OwnArenaGrid(props) {
+  const arena = useContext(DashboardArenaCtx);
+  return arena ? /* @__PURE__ */ jsx(Grid, { ...props, arena }) : null;
+}
+var PART_ATTR = { handle: "data-dashboard-handle", menu: "data-dashboard-menu", grip: "data-dashboard-resize" };
+function Grid({ layout, onLayoutChange, editing = false, onSelect, itemActions, onAdd, children, "aria-label": ariaLabel = "Dashboard widgets", className, arena }) {
+  const prefix = useId();
+  const { items, strays, repeated } = itemsOf(children);
+  const byId = new Map(items.map((item) => [item.id, item]));
+  const committed = drawnLayout(layout, items.map((item) => item.id));
+  const committedIds = committed.map((item) => item.id).join("\n");
+  const nameOf = (id) => byId.get(id)?.label ?? id;
+  const rootRef = useRef(null);
+  const cellsRef = useRef(null);
+  const stacked = useCompact(rootRef, "sm", 16);
+  const columns = stacked ? 1 : DASHBOARD_COLUMNS;
+  const [preview, setPreviewState] = useState(null);
+  const previewRef = useRef(null);
+  const setPreview = (next) => {
+    previewRef.current = next;
+    setPreviewState(next);
+  };
+  if (preview && (!editing || preview.type !== "add" && !committed.some((item) => item.id === preview.id))) setPreviewState(null);
+  useLayoutEffect(() => {
+    previewRef.current = preview;
+  }, [preview]);
+  const shown = applyPreview(committed, preview);
+  const busy = preview !== null || arena.dragging !== null;
+  const [notice, setNotice] = useState("");
+  const say = useCallback((text) => setNotice((was) => was === text ? text + NO_BREAK_SPACE : text), []);
+  const refocus = useRef(null);
+  const [, setTick] = useState(0);
+  const removing = useRef(null);
+  const focusLater = (target) => {
+    refocus.current = target;
+    setTimeout(() => {
+      if (refocus.current === target) refocus.current = null;
+    }, WATCH_MS);
+  };
+  const commit = (next) => onLayoutChange?.(next);
+  const pickUp = (id, by) => {
+    const at = committed.findIndex((item) => item.id === id);
+    if (at < 0) return;
+    setPreview({ type: "move", id, index: at, from: at, by });
+    say(`Picked up ${nameOf(id)}, position ${at + 1} of ${committed.length}.`);
+  };
+  const stepMove = (step) => {
+    const p = previewRef.current;
+    if (p?.type !== "move") return;
+    const result = stepTarget(shown, p.id, step, columns);
+    if ("blocked" in result) {
+      say(BLOCKED[result.blocked](nameOf(p.id)));
+      return;
+    }
+    setPreview({ ...p, index: result.index });
+    say(`${nameOf(p.id)}, position ${result.index + 1} of ${committed.length}.`);
+  };
+  const dropMove = () => {
+    const p = previewRef.current;
+    if (p?.type !== "move") return;
+    setPreview(null);
+    say(`Dropped ${nameOf(p.id)} at position ${p.index + 1} of ${committed.length}.`);
+    if (p.index === p.from) return;
+    commit(moveItem(committed, p.id, p.index));
+    focusLater({ id: p.id, part: "handle" });
+  };
+  const cancelMove = () => {
+    const p = previewRef.current;
+    if (p?.type !== "move") return;
+    setPreview(null);
+    say(`Move cancelled. ${nameOf(p.id)} is back at position ${p.from + 1} of ${committed.length}.`);
+  };
+  const startResize = (id, by) => {
+    const item = committed.find((it) => it.id === id);
+    if (!item) return;
+    setPreview({ type: "resize", id, w: item.w, h: item.h, from: { w: item.w, h: item.h }, by });
+    say(`Resizing ${nameOf(id)}, ${sizeWords(item.w, item.h)}.`);
+  };
+  const resizeTo = (w, h) => {
+    const p = previewRef.current;
+    const item = p?.type === "resize" ? committed.find((it) => it.id === p.id) : void 0;
+    if (p?.type !== "resize" || !item) return null;
+    const limits = sizeLimits(item);
+    const next = { w: clamp2(w, limits.minW, limits.maxW), h: clamp2(h, limits.minH, limits.maxH) };
+    if (next.w !== p.w || next.h !== p.h) setPreview({ ...p, ...next });
+    return next;
+  };
+  const stepResize = (dw, dh) => {
+    const p = previewRef.current;
+    if (p?.type !== "resize") return;
+    const next = resizeTo(p.w + dw, p.h + dh);
+    if (!next) return;
+    const name = nameOf(p.id);
+    if (next.w === p.w && next.h === p.h) {
+      say(dw > 0 ? `${name} is at its widest.` : dw < 0 ? `${name} is at its narrowest.` : dh > 0 ? `${name} is at its tallest.` : `${name} is at its shortest.`);
+      return;
+    }
+    say(`${name}, ${sizeWords(next.w, next.h)}.`);
+  };
+  const keepResize = () => {
+    const p = previewRef.current;
+    if (p?.type !== "resize") return;
+    setPreview(null);
+    const name = nameOf(p.id);
+    if (p.w === p.from.w && p.h === p.from.h) {
+      say(`${name} is still ${sizeWords(p.w, p.h)}.`);
+      return;
+    }
+    commit(resizeItem(committed, p.id, { w: p.w, h: p.h }));
+    say(`Resized ${name} to ${sizeWords(p.w, p.h)}.`);
+  };
+  const cancelResize = () => {
+    const p = previewRef.current;
+    if (p?.type !== "resize") return;
+    setPreview(null);
+    say(`Resize cancelled. ${nameOf(p.id)} is back to ${sizeWords(p.from.w, p.from.h)}.`);
+  };
+  const moveTo = (id, index) => {
+    const at = committed.findIndex((item) => item.id === id);
+    if (at < 0 || index === at) return;
+    commit(moveItem(committed, id, index));
+    focusLater({ id, part: "menu" });
+    say(`Moved ${nameOf(id)} to position ${index + 1} of ${committed.length}.`);
+  };
+  const sizeTo = (id, size) => {
+    const next = resizeItem(committed, id, size);
+    const item = next.find((it) => it.id === id);
+    if (!item) return;
+    commit(next);
+    say(`Resized ${nameOf(id)} to ${sizeWords(item.w, item.h)}.`);
+  };
+  const watchRemoval = (id) => {
+    const cells = cellsRef.current;
+    const trigger = partOf(cells, PART_ATTR.menu, id);
+    const cell = partOf(cells, "data-dashboard-cell", id);
+    const entry = { id, name: nameOf(id) };
+    removing.current = entry;
+    setTimeout(() => {
+      if (removing.current === entry) removing.current = null;
+    }, WATCH_MS);
+    if (trigger && cell && cells) focusAfterSelfRemoval(trigger, { item: cell, group: cells });
+  };
+  const menuActions = { moveTo, sizeTo, chose: watchRemoval, onSelect, itemActions };
+  const add = (kind, index, then) => {
+    if (!onAdd) {
+      warnOnce("DashboardGrid", "a widget was added from the palette, but the grid has no onAdd: give it one that adds the page's widget and its layout entry (addItem) and returns the new widget's id.");
+      return;
+    }
+    const failed = (why, error) => {
+      console.error(`DashboardGrid: ${why}, so nothing was added.`, error);
+      say(`Couldn't add ${kind.name}.`);
+    };
+    let result;
+    try {
+      result = onAdd(kind, index ?? committed.length);
+    } catch (error) {
+      failed("onAdd threw", error);
+      return;
+    }
+    const land = (id) => {
+      if (typeof id !== "string" || id === "") {
+        warnOnce("DashboardGrid", "onAdd returned no id: return the new widget's id (or a promise of it), so focus can go to it.");
+        return;
+      }
+      focusLater({ id, part: "handle", added: true });
+      setTick((n) => n + 1);
+      then?.();
+    };
+    if (isThenable(result)) return result.then(land, (error) => failed("onAdd's promise was rejected", error));
+    land(result);
+  };
+  const addLatest = useLatest(add);
+  const handle = useMemo(() => ({ stacked, editing, add: (kind, then) => addLatest.current(kind, void 0, then) }), [stacked, editing, addLatest]);
+  const { publish, connect } = arena;
+  useLayoutEffect(() => {
+    publish(handle);
+    return () => publish(null);
+  }, [publish, handle]);
+  const pitch = useRef(null);
+  const pointOf = (event) => {
+    const cells = cellsRef.current;
+    const p = pitch.current;
+    const rect = event.active.rect.current.translated;
+    if (!cells || !p || !rect || p.col <= 0 || p.row <= 0) return null;
+    const box = cells.getBoundingClientRect();
+    return { col: (p.rtl ? box.right - rect.right : rect.left - box.left) / p.col, row: (rect.top - box.top) / p.row };
+  };
+  const whereIs = (point) => {
+    const box = cellsRef.current?.getBoundingClientRect();
+    if (!editing || !box || !point || point.x < box.left || point.x > box.right || point.y < box.top || point.y > box.bottom) return "away";
+    if (typeof document.elementsFromPoint !== "function") return "over";
+    const top = document.elementsFromPoint(point.x, point.y).find((el) => !el.closest(`.${LIFTED_LAYER}`));
+    if (!top) return "away";
+    return rootRef.current?.contains(top) ? "over" : "covered";
+  };
+  const drags = {
+    start(drag) {
+      pitch.current = cellsRef.current ? pitchOf(cellsRef.current, columns) : null;
+      if (drag.type === "move") pickUp(drag.id, "pointer");
+      else if (drag.type === "resize") startResize(drag.id, "pointer");
+      else say(`Picked up ${drag.kind.name}.`);
+    },
+    move(drag, event, at) {
+      const p = previewRef.current;
+      const g = pitch.current;
+      if (drag.type === "resize") {
+        if (p?.type !== "resize" || !g || g.col <= 0 || g.row <= 0) return;
+        const dx = g.rtl ? -event.delta.x : event.delta.x;
+        resizeTo(p.from.w + Math.round(dx / g.col), p.from.h + Math.round(event.delta.y / g.row));
+        return;
+      }
+      const point = pointOf(event);
+      if (drag.type === "move") {
+        const item2 = committed.find((it) => it.id === drag.id);
+        if (p?.type !== "move" || !point || !g || !item2) return;
+        if (whereIs(at) === "covered") {
+          if (p.covered) return;
+          setPreview({ ...p, index: p.from, covered: true });
+          say(`${nameOf(drag.id)} is not over the dashboard.`);
+          return;
+        }
+        const index2 = nearestIndex(committed.filter((it) => it.id !== drag.id), item2, point, g, columns);
+        if (index2 === p.index && !p.covered) return;
+        setPreview({ ...p, index: index2, covered: false });
+        say(`${nameOf(drag.id)}, position ${index2 + 1} of ${committed.length}.`);
+        return;
+      }
+      if (!point || !g || whereIs(at) !== "over") {
+        if (p?.type === "add") {
+          setPreview(null);
+          say(`${drag.kind.name} is not over the dashboard.`);
+        }
+        return;
+      }
+      const [item] = normaliseLayout([{ id: NEW_ID, w: drag.kind.w, h: drag.kind.h }]);
+      const index = nearestIndex(committed, item, point, g, columns);
+      if (p?.type === "add" && p.index === index) return;
+      setPreview({ type: "add", kind: drag.kind, index });
+      say(`${drag.kind.name}, position ${index + 1} of ${committed.length + 1}.`);
+    },
+    refuses(drag, at) {
+      const where = whereIs(at);
+      return drag.type === "kind" ? where !== "over" : drag.type === "move" && where === "covered";
+    },
+    end(drag) {
+      const p = previewRef.current;
+      if (drag.type === "move") dropMove();
+      else if (drag.type === "resize") keepResize();
+      else {
+        setPreview(null);
+        if (p?.type === "add") add(drag.kind, p.index);
+        else say(`${drag.kind.name} not added.`);
+      }
+    },
+    cancel(drag) {
+      if (drag.type === "move") cancelMove();
+      else if (drag.type === "resize") cancelResize();
+      else {
+        setPreview(null);
+        say(`${drag.kind.name} not added.`);
+      }
+    }
+  };
+  const dragsRef = useLatest(drags);
+  useLayoutEffect(() => connect(dragsRef), [connect, dragsRef]);
+  const onHandleKey = (id, e) => {
+    const p = previewRef.current;
+    const key = e.key;
+    const plain2 = !e.ctrlKey && !e.metaKey && !e.altKey;
+    if (!(p?.type === "move" && p.by === "keyboard" && p.id === id)) {
+      if ((key === " " || key === "Enter") && plain2 && !e.repeat && !p) {
+        e.preventDefault();
+        pickUp(id, "keyboard");
+      }
+      return;
+    }
+    if (key === " " || key === "Enter") {
+      e.preventDefault();
+      if (!e.repeat) dropMove();
+      return;
+    }
+    if (key === "Escape") {
+      e.preventDefault();
+      cancelMove();
+      return;
+    }
+    const rtl = isRtl(e.currentTarget);
+    const step = key === "ArrowLeft" ? rtl ? "later" : "earlier" : key === "ArrowRight" ? rtl ? "earlier" : "later" : key === "ArrowUp" ? "up" : key === "ArrowDown" ? "down" : key === "Home" ? "first" : key === "End" ? "last" : null;
+    if (step && plain2) {
+      e.preventDefault();
+      stepMove(step);
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && key.toLowerCase() === "z") e.preventDefault();
+  };
+  const onGripKey = (id, e) => {
+    const p = previewRef.current;
+    const key = e.key;
+    const plain2 = !e.ctrlKey && !e.metaKey && !e.altKey;
+    if (!(p?.type === "resize" && p.by === "keyboard" && p.id === id)) {
+      if ((key === " " || key === "Enter") && plain2 && !e.repeat && !p) {
+        e.preventDefault();
+        startResize(id, "keyboard");
+      }
+      return;
+    }
+    if (key === " " || key === "Enter") {
+      e.preventDefault();
+      if (!e.repeat) keepResize();
+      return;
+    }
+    if (key === "Escape") {
+      e.preventDefault();
+      cancelResize();
+      return;
+    }
+    const rtl = isRtl(e.currentTarget);
+    const change = key === (rtl ? "ArrowLeft" : "ArrowRight") ? [1, 0] : key === (rtl ? "ArrowRight" : "ArrowLeft") ? [-1, 0] : key === "ArrowDown" ? [0, 1] : key === "ArrowUp" ? [0, -1] : null;
+    if (change && plain2) {
+      e.preventDefault();
+      stepResize(change[0], change[1]);
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && key.toLowerCase() === "z") e.preventDefault();
+  };
+  const onControlBlur = (id, part) => {
+    const p = previewRef.current;
+    if (part === "handle" && p?.type === "move" && p.by === "keyboard" && p.id === id) cancelMove();
+    if (part === "grip" && p?.type === "resize" && p.by === "keyboard" && p.id === id) cancelResize();
+  };
+  useLayoutEffect(() => {
+    const target = refocus.current;
+    if (!target) return;
+    const cells = cellsRef.current;
+    const part = target.added && stacked ? "menu" : target.part;
+    const el = partOf(cells, PART_ATTR[part], target.id);
+    if (!el) return;
+    refocus.current = null;
+    if (target.added) {
+      const at = committed.findIndex((item) => item.id === target.id);
+      const active = document.activeElement;
+      const free = !active || active === document.body || !active.isConnected || !!rootRef.current?.contains(active) || !!active.closest("[data-dashboard-palette]");
+      if (free) el.focus();
+      say(`Added ${byId.get(target.id)?.label ?? target.id} at position ${at + 1} of ${committed.length}.`);
+      return;
+    }
+    el.focus();
+  });
+  useLayoutEffect(() => {
+    const r = removing.current;
+    if (!r || committedIds.split("\n").includes(r.id)) return;
+    removing.current = null;
+    say(`Removed ${r.name}.`);
+  }, [committedIds, say]);
+  useLayoutEffect(() => {
+    if (preview?.type !== "move" || preview.by !== "keyboard") return;
+    partOf(cellsRef.current, "data-dashboard-cell", preview.id)?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [preview]);
+  const shownKey = shown.map((item) => `${item.id}:${item.w}x${item.h}`).join(",");
+  const places = useRef(null);
+  const movingId = preview && preview.type !== "add" ? preview.id : null;
+  useLayoutEffect(() => {
+    const cells = cellsRef.current;
+    const at = new Map(placeLayout(shown, columns).map((p) => [p.id, { col: p.col, row: p.row }]));
+    const was = places.current;
+    places.current = { columns, at };
+    if (!cells || !was || was.columns !== columns) return;
+    const speed = speedOf(cells);
+    if (speed <= 0) return;
+    const g = pitchOf(cells, columns);
+    for (const el of Array.from(cells.children)) {
+      const id = el.getAttribute("data-dashboard-cell");
+      if (!id || id === movingId || typeof el.animate !== "function") continue;
+      const from = was.at.get(id);
+      const to = at.get(id);
+      if (!from || !to || from.col === to.col && from.row === to.row) continue;
+      const dx = (from.col - to.col) * g.col * (g.rtl ? -1 : 1);
+      const dy = (from.row - to.row) * g.row;
+      el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], { duration: speed, easing: "ease" });
+    }
+  }, [shownKey, columns]);
+  useEffect(() => {
+    if (strays) warnOnce("DashboardGrid", "its children are DashboardItems (an array or a fragment of them): anything else isn't drawn. Put each widget in a DashboardItem with its id and label.");
+    if (repeated.length) warnOnce("DashboardGrid", `two DashboardItems share an id, or one has none (${repeated.map((id) => `"${id}"`).join(", ")}): only the first of each id is drawn.`);
+    const ids = new Set(items.map((item) => item.id));
+    const listed = new Set(normaliseLayout(layout).map((item) => item.id));
+    const missing = items.filter((item) => !listed.has(item.id)).map((item) => item.id);
+    const orphans = [...listed].filter((id) => !ids.has(id));
+    if (missing.length) warnOnce("DashboardGrid", `the layout has no entry for ${missing.map((id) => `"${id}"`).join(", ")}: it's drawn after the rest at ${UNLISTED.w} columns by ${UNLISTED.h} rows. Add each widget's entry (addItem).`);
+    if (orphans.length) warnOnce("DashboardGrid", `the layout has entries with no DashboardItem (${orphans.map((id) => `"${id}"`).join(", ")}): they aren't drawn, and a change of layout leaves them out.`);
+    if (editing && !onLayoutChange) warnOnce("DashboardGrid", "it's editing with no onLayoutChange, so a move or a size the person chooses isn't kept: keep the layout it passes.");
+  });
+  const shownAt = new Map(shown.map((item, i) => [item.id, i]));
+  const adding = preview?.type === "add" ? shown.find((item) => item.id === NEW_ID) : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-dashboard-grid": "", "data-editing": editing ? "" : void 0, "data-stacked": stacked ? "" : void 0, className: cn("relative min-w-0", className), children: [
+    editing && stacked && /* @__PURE__ */ jsx("p", { "data-dashboard-narrow": "", className: "mb-ds-3 text-xs text-[var(--ds-text-muted)]", children: "Drag and resize on a larger screen" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: cellsRef,
+        "data-dashboard-cells": "",
+        role: editing ? "group" : void 0,
+        "aria-label": editing ? ariaLabel : void 0,
+        className: "relative isolate grid grid-flow-row",
+        style: { gridTemplateColumns: stacked ? "minmax(0, 1fr)" : `repeat(${DASHBOARD_COLUMNS}, minmax(0, 1fr))`, gridAutoRows: ROW, gap: GAP, minHeight: editing ? FLOOR : void 0 },
+        children: [
+          editing && !stacked && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", "data-dashboard-guides": "", className: "pointer-events-none absolute inset-0 -z-10 grid grid-cols-12", style: { gap: GAP }, children: Array.from({ length: DASHBOARD_COLUMNS }, (_, i) => /* @__PURE__ */ jsx("div", { className: "rounded-[var(--ds-radius-sm)] border border-[color-mix(in_srgb,var(--ds-text-primary)_10%,transparent)]" }, i)) }),
+          committed.map((item, at) => {
+            const drawn = shown[shownAt.get(item.id) ?? 0] ?? item;
+            const own = byId.get(item.id);
+            if (!own) return null;
+            const state = preview?.type === "move" && preview.id === item.id ? preview.by === "pointer" ? "placeholder" : "lifted" : preview?.type === "resize" && preview.id === item.id ? "resizing" : null;
+            return /* @__PURE__ */ jsx(
+              Cell,
+              {
+                prefix,
+                id: item.id,
+                label: own.label,
+                w: drawn.w,
+                h: drawn.h,
+                order: shownAt.get(item.id) ?? 0,
+                editing,
+                stacked,
+                busy,
+                state,
+                item,
+                at,
+                total: committed.length,
+                actions: menuActions,
+                onSelect,
+                onHandleKey,
+                onGripKey,
+                onControlBlur,
+                children: own.content
+              },
+              item.id
+            );
+          }),
+          adding && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-dashboard-placeholder": "",
+              className: PLACEHOLDER,
+              style: { gridColumn: stacked ? "1 / -1" : `span ${adding.w}`, gridRow: `span ${adding.h}`, order: shownAt.get(NEW_ID) ?? 0 }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: notice })
+  ] });
+}
+function GripMark() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", width: "12", height: "12", className: "rtl:-scale-x-100", children: /* @__PURE__ */ jsx("path", { d: "M11 4.5L4.5 11M11 8L8 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }) });
+}
+function Cell({ prefix, id, label, w, h, order, editing, stacked, busy, state, item, at, total, actions, onSelect, onHandleKey, onGripKey, onControlBlur, children }) {
+  const cellRef = useRef(null);
+  const contentRef = useRef(null);
+  const instructions = useId();
+  const gripInstructions = useId();
+  const draggable = editing && !stacked;
+  const picture = useCallback(() => cellRef.current, []);
+  const { setNodeRef, setActivatorNodeRef, listeners } = useDraggable({ id: `${prefix}move:${id}`, data: { type: "move", id, picture }, disabled: !draggable });
+  const { setNodeRef: setGripRef, listeners: gripListeners } = useDraggable({ id: `${prefix}resize:${id}`, data: { type: "resize", id, picture }, disabled: !draggable });
+  const setCell = useCallback((el) => {
+    cellRef.current = el;
+    setNodeRef(el);
+  }, [setNodeRef]);
+  const value = useMemo(() => ({ label, editing }), [label, editing]);
+  useCellFrameScroll(contentRef, label);
+  const pressed = useRef(false);
+  useEffect(() => {
+    const frame = contentRef.current?.firstElementChild;
+    if (!frame) return;
+    const title = (frame.hasAttribute("data-stats-card") ? frame.querySelector("span") : frame.querySelector("h1, h2, h3, h4, h5, h6"))?.textContent?.trim();
+    if (!title) warnOnce("DashboardGrid", `the widget "${label}" has no title on screen: give its frame one (ChartContainer's or Table's title, a CardHeader with a CardTitle, a StatsCard's label), as every widget needs one.`);
+    else if (title !== label.trim()) warnOnce("DashboardGrid", `the widget "${id}" is labelled "${label}", but its frame's title is "${title}": give its DashboardItem the frame's title as its label, so what a screen reader hears ("Move ${label}") names the widget people see.`);
+  });
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content || typeof MutationObserver === "undefined") return;
+    const misused = (what) => warnOnce("DashboardGrid", `the widget "${label}" ${what}: put its frame (a ChartContainer, a StatsCard, a titled Table or a Card) straight in its DashboardItem, alone, since the grid sizes the item's one child and anything else spills over the widgets beside it.`);
+    let timer;
+    const read = () => {
+      clearTimeout(timer);
+      const shown = [...content.children].filter((el) => !(el instanceof HTMLElement && el.style.display === "none"));
+      const [child] = shown;
+      if (shown.length > 1) return misused("holds more than one child");
+      if (!child || child.matches(FRAMES) || child.matches('[data-gs="skeleton"]')) return;
+      if (child.querySelector(FRAMES)) return misused("has a wrapper round its frame");
+      timer = setTimeout(() => {
+        if (child.parentElement === content) misused("isn't one of the library's frames");
+      }, SETTLE_MS);
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(content, { childList: true });
+    return () => {
+      observer.disconnect();
+      clearTimeout(timer);
+    };
+  }, [label]);
+  const placeholder = state === "placeholder";
+  const hidden = placeholder ? "opacity-0" : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setCell,
+      "data-dashboard-cell": id,
+      "data-editing": editing ? "" : void 0,
+      "data-stacked": editing && stacked ? "" : void 0,
+      role: editing ? "group" : void 0,
+      "aria-label": editing ? label : void 0,
+      className: cn("@container/dashboard-cell relative flex min-h-0 min-w-0 flex-col", editing && onSelect && "cursor-pointer"),
+      style: { gridColumn: stacked ? "1 / -1" : `span ${w}`, gridRow: `span ${h}`, order },
+      onPointerDown: editing ? (e) => {
+        const target = e.target;
+        pressed.current = e.currentTarget.contains(target) && !target.closest("[data-dashboard-control]");
+      } : void 0,
+      onClick: editing && onSelect ? (e) => {
+        const target = e.target;
+        const began = pressed.current;
+        pressed.current = false;
+        if (!began || !e.currentTarget.contains(target) || target.closest("[data-dashboard-control]")) return;
+        onSelect(id);
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: contentRef,
+            "data-dashboard-content": "",
+            inert: editing,
+            className: cn("flex min-h-0 flex-1 flex-col *:min-h-0 *:flex-auto", state === "lifted" && LIFTED, hidden),
+            children: /* @__PURE__ */ jsx(DashboardCellContext, { value, children: /* @__PURE__ */ jsx(FillContext, { value: true, children }) })
+          }
+        ),
+        placeholder && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", "data-dashboard-place": "", className: cn("pointer-events-none absolute inset-0", PLACEHOLDER) }),
+        editing && /* @__PURE__ */ jsxs(Fragment, { children: [
+          draggable && /* @__PURE__ */ jsx(AutoTooltip, { content: `Move ${label}`, disabled: busy, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ref: setActivatorNodeRef,
+              ...listeners,
+              "data-dashboard-handle": id,
+              "data-dashboard-control": "",
+              "aria-label": `Move ${label}`,
+              "aria-describedby": instructions,
+              onKeyDown: (e) => onHandleKey(id, e),
+              onBlur: () => onControlBlur(id, "handle"),
+              className: cn(CONTROL, PLACE_TOP, PLACE_START, "cursor-grab active:cursor-grabbing touch-manipulation select-none [-webkit-touch-callout:none]", hidden),
+              children: /* @__PURE__ */ jsx(Icon, { name: "grip-vertical", size: 16 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            DropdownMenu,
+            {
+              items: menuEntries(item, at, total, stacked, actions),
+              trigger: /* @__PURE__ */ jsx(AutoTooltip, { content: `${label} options`, disabled: busy, children: /* @__PURE__ */ jsx("button", { type: "button", "data-dashboard-menu": id, "data-dashboard-control": "", "aria-label": `${label} options`, className: cn(CONTROL, PLACE_TOP, PLACE_END, hidden), children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 }) }) })
+            }
+          ),
+          draggable && /* @__PURE__ */ jsx(AutoTooltip, { content: `Resize ${label}`, disabled: busy, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ref: setGripRef,
+              ...gripListeners,
+              "data-dashboard-resize": id,
+              "data-dashboard-control": "",
+              "aria-label": `Resize ${label}`,
+              "aria-describedby": gripInstructions,
+              onKeyDown: (e) => onGripKey(id, e),
+              onBlur: () => onControlBlur(id, "grip"),
+              className: cn(GRIP, hidden),
+              children: /* @__PURE__ */ jsx(GripMark, {})
+            }
+          ) }),
+          state === "resizing" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-dashboard-size": "", className: READOUT, children: `${w} \xD7 ${h}` }),
+          draggable && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { id: instructions, hidden: true, children: `Press Space to pick up ${label}, use the arrow keys to move it, and press Space again to drop it, or Escape to cancel.` }),
+            /* @__PURE__ */ jsx("span", { id: gripInstructions, hidden: true, children: `Press Space to resize ${label}, use the arrow keys to change its width and height, and press Space again to keep it, or Escape to cancel.` })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var HINT = (rowsDrag) => rowsDrag ? "Select or drag to add" : "Select a widget to add it";
+var isThenable2 = (value) => value != null && typeof value.then === "function";
+function DashboardPalette({ kinds, label = "Widget library", hint = HINT, className }) {
+  const arena = useContext(DashboardArenaCtx);
+  const close = useContext(OverlayCloseCtx);
+  const prefix = useId();
+  const grid = arena?.grid ?? null;
+  useEffect(() => {
+    if (!arena) warnOnce("DashboardPalette", "it adds widgets to a DashboardGrid through a DashboardEditor round them both: wrap the palette and the grid in one DashboardEditor.");
+  }, [arena]);
+  const draggable = !!grid && grid.editing && !grid.stacked;
+  const words = grid?.editing && kinds.length > 0 && hint ? hint(draggable) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    words && /* @__PURE__ */ jsx("p", { "data-dashboard-palette-hint": "", className: "mb-ds-2 text-sm text-[var(--ds-text-secondary)]", children: words }),
+    /* @__PURE__ */ jsx("ul", { "data-dashboard-palette": "", "aria-label": label, className: cn("flex flex-col", className), children: kinds.map((kind) => /* @__PURE__ */ jsx(PaletteKind, { prefix, kind, grid: grid?.editing ? grid : null, draggable, close }, kind.id)) })
+  ] });
+}
+var ROW2 = cn(
+  "flex flex-1 min-w-0 items-center gap-ds-3 py-ds-3 px-ds-2 text-start rounded-[var(--ds-radius-sm)]",
+  "transition-colors duration-[var(--ds-transition-speed)] hover:bg-[var(--ds-bg-emphasis)]",
+  "aria-disabled:cursor-not-allowed aria-disabled:not-aria-busy:opacity-disabled aria-busy:cursor-wait",
+  FOCUS_RING
+);
+function PaletteKind({ prefix, kind, grid, draggable, close }) {
+  const rowRef = useRef(null);
+  const picture = useCallback(() => rowRef.current, []);
+  const { setNodeRef, setActivatorNodeRef, listeners, isDragging } = useDraggable({ id: `${prefix}kind:${kind.id}`, data: { type: "kind", kind, picture }, disabled: !draggable });
+  const setRow = useCallback((el) => {
+    rowRef.current = el;
+    setNodeRef(el);
+    setActivatorNodeRef(el);
+  }, [setNodeRef, setActivatorNodeRef]);
+  const describedBy = useId();
+  const dragged = useRef(false);
+  useLayoutEffect(() => {
+    if (isDragging) dragged.current = true;
+  }, [isDragging]);
+  const [adding, setAdding] = useState(false);
+  const unavailable = !grid || adding;
+  const onAdd = (e) => {
+    if (dragged.current && e.detail > 0 || !grid || adding) return;
+    const result = grid.add(kind, close ? () => close() : void 0);
+    if (!isThenable2(result)) return;
+    setAdding(true);
+    result.then(() => setAdding(false), () => setAdding(false));
+  };
+  return /* @__PURE__ */ jsx("li", { className: "flex -mx-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] last:border-b-0", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ref: setRow,
+      ...listeners,
+      onPointerDown: (e) => {
+        dragged.current = false;
+        listeners?.onPointerDown?.(e);
+      },
+      onClick: onAdd,
+      "data-dashboard-kind": kind.id,
+      "data-dashboard-kind-draggable": draggable ? "" : void 0,
+      "aria-label": `Add ${kind.name}`,
+      "aria-describedby": kind.description ? describedBy : void 0,
+      "aria-busy": adding || void 0,
+      "aria-disabled": unavailable || void 0,
+      className: cn(ROW2, draggable ? "cursor-grab active:cursor-grabbing touch-manipulation select-none [-webkit-touch-callout:none]" : "cursor-pointer"),
+      children: [
+        kind.icon && // a StatsCard's tile
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)]", children: /* @__PURE__ */ jsx(Icon, { name: kind.icon, size: 16, className: "text-[var(--ds-text-muted)]" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)] break-words", children: kind.name }),
+          kind.description && /* @__PURE__ */ jsx("span", { id: describedBy, className: "text-xs text-[var(--ds-text-muted)] break-words", children: kind.description })
+        ] }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center text-[var(--ds-text-muted)]", children: adding ? /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "inherit" }) : /* @__PURE__ */ jsx(Icon, { name: "plus", size: 16 }) })
+      ]
+    }
+  ) });
+}
+function plain(value) {
+  if (Array.isArray(value)) return true;
+  if (typeof value !== "object" || value === null) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+function same(a, b) {
+  if (Object.is(a, b)) return true;
+  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+  if (!plain(a) || !plain(b) || Array.isArray(a) !== Array.isArray(b)) return false;
+  const ak = Object.keys(a);
+  const bk = Object.keys(b);
+  return ak.length === bk.length && ak.every((k) => Object.prototype.hasOwnProperty.call(b, k) && same(a[k], b[k]));
+}
+function typesText(target) {
+  if (!(target instanceof Element)) return false;
+  if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target.isContentEditable) return true;
+  if (target.closest('[contenteditable]:not([contenteditable="false"])')) return true;
+  if (target instanceof HTMLInputElement) return !/^(?:checkbox|radio|button|submit|reset|range|color|file|image)$/.test(target.type);
+  return /^(?:textbox|searchbox|combobox|spinbutton)$/.test(target.getAttribute("role") ?? "");
+}
+function useDraftHistory(initial, { shortcuts = true } = {}) {
+  const [store, setStore] = useState(() => {
+    const first = typeof initial === "function" ? initial() : initial;
+    return { past: [], present: first, future: [], saved: first, merge: null };
+  });
+  const set = useCallback((next, merge) => {
+    setStore((s) => {
+      const value = typeof next === "function" ? next(s.present) : next;
+      if (Object.is(value, s.present)) return s;
+      const key = merge ?? null;
+      const past = key !== null && key === s.merge && s.future.length === 0 ? s.past : [...s.past, s.present];
+      return { ...s, past, present: value, future: [], merge: key };
+    });
+  }, []);
+  const undo = useCallback(() => {
+    setStore((s) => s.past.length === 0 ? s : { ...s, past: s.past.slice(0, -1), present: s.past[s.past.length - 1], future: [s.present, ...s.future], merge: null });
+  }, []);
+  const redo = useCallback(() => {
+    setStore((s) => s.future.length === 0 ? s : { ...s, past: [...s.past, s.present], present: s.future[0], future: s.future.slice(1), merge: null });
+  }, []);
+  const reset = useCallback((...args) => {
+    setStore((s) => {
+      const value = args.length > 0 ? args[0] : s.present;
+      return { past: [], present: value, future: [], saved: value, merge: null };
+    });
+  }, []);
+  const canUndo = store.past.length > 0;
+  const canRedo = store.future.length > 0;
+  useEffect(() => {
+    if (!shortcuts || typeof document === "undefined") return;
+    const onKeyDown = (e) => {
+      if (e.defaultPrevented || e.altKey || !(e.ctrlKey || e.metaKey) || e.key.toLowerCase() !== "z" || typesText(e.target)) return;
+      if (e.shiftKey ? !canRedo : !canUndo) return;
+      e.preventDefault();
+      if (e.shiftKey) redo();
+      else undo();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [shortcuts, canUndo, canRedo, undo, redo]);
+  const dirty = useMemo(() => !same(store.present, store.saved), [store.present, store.saved]);
+  return { value: store.present, set, undo, redo, canUndo, canRedo, dirty, reset };
+}
+
+export { DashboardEditor, DashboardGrid, DashboardItem, DashboardPalette, useDraftHistory };
+//# sourceMappingURL=dashboard.js.map
+//# sourceMappingURL=dashboard.js.map