@alfadocs/ui-kit 1.57.0 → 1.59.0

package/dist/_chunks/dashboard-grid-SAGjktTs.js

@@ -0,0 +1,933 @@
+import { jsxs as Z, jsx as G } from "react/jsx-runtime";
+import { forwardRef as Be, useRef as x, useState as L, useCallback as C, useMemo as j, useEffect as X, useImperativeHandle as Je, useContext as Qe, Children as Ze, isValidElement as et, Fragment as tt, createContext as rt, cloneElement as Le } from "react";
+import { c as ce } from "./index-D2ZczOXr.js";
+import { useTranslation as We } from "react-i18next";
+import { I as ge } from "./icon-button-CsOGhuRB.js";
+import { T as nt } from "./tooltip-Cp-PLePW.js";
+import { u as _ } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as st } from "./registry-DvAUVLHh.js";
+import { P as it } from "./plus-DzMQ_c6b.js";
+import { G as ot } from "./grip-vertical-onSb1JXO.js";
+import { X as dt } from "./x-B5YnXwCz.js";
+import { c as at } from "./createLucideIcon-DhHxpK9K.js";
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ct = [
+  ["path", { d: "M19 13v6h-6", key: "1hxl6d" }],
+  ["path", { d: "M5 11V5h6", key: "12e2xe" }],
+  ["path", { d: "m5 5 14 14", key: "11anup" }]
+], ut = at("move-diagonal-2", ct), lt = {
+  id: "dashboard-grid",
+  // The board's whole purpose is in-place rearrangement of its widgets.
+  capabilities: ["edit_inline"],
+  state: {
+    layout: {
+      type: "{ id: string, x: number, y: number, w: number, h: number }[]",
+      descriptionKey: "ui.agent.dashboardGrid.state.layout",
+      description: "Current widget geometry in cell units — ids and rectangles only, no widget content.",
+      read: (r) => r.getGridState().layout
+    },
+    cols: {
+      type: "number",
+      descriptionKey: "ui.agent.dashboardGrid.state.cols",
+      description: "Logical column count of the board.",
+      read: (r) => r.getGridState().cols
+    },
+    editing: {
+      type: "boolean",
+      descriptionKey: "ui.agent.dashboardGrid.state.editing",
+      description: "Whether edit mode is on. Move/resize actions are refused while it is off — the host app owns the toggle.",
+      read: (r) => r.getGridState().editing
+    },
+    stacked: {
+      type: "boolean",
+      descriptionKey: "ui.agent.dashboardGrid.state.stacked",
+      description: "Whether the board is narrower than its stackBelow width and shows its widgets as one read-only column. Move/resize actions are unavailable while it is true, even in edit mode; the saved layout is unchanged.",
+      read: (r) => r.getGridState().stacked
+    }
+  },
+  actions: {
+    move_widget: {
+      // Rearranging the board mutates user configuration — a write,
+      // reversible by moving back.
+      safety: "write",
+      argsType: "id, x, y",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: { type: "string", description: "Widget id (see layout state)." },
+          x: {
+            type: "integer",
+            minimum: 0,
+            description: "0-based logical column."
+          },
+          y: { type: "integer", minimum: 0, description: "0-based row." }
+        },
+        required: ["id", "x", "y"]
+      },
+      returns: "boolean (accepted)",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when applied; false when edit mode is off, the board is stacked, or the id is unknown."
+      },
+      idempotent: !0,
+      errors: [
+        "Unavailable while the board is stacked (state stacked is true): returns false and changes nothing.",
+        "Unavailable while edit mode is off: returns false.",
+        "Unknown widget id: returns false."
+      ],
+      descriptionKey: "ui.agent.dashboardGrid.actions.moveWidget",
+      description: "Move a widget to a cell. Out-of-bounds targets are clamped; colliding widgets are pushed down and the layout re-compacts. Refused while edit mode is off or the board is stacked.",
+      invoke: (r, o) => r.moveWidgetTo(o.id, o.x, o.y)
+    },
+    resize_widget: {
+      safety: "write",
+      argsType: "id, w, h",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: { type: "string", description: "Widget id (see layout state)." },
+          w: {
+            type: "integer",
+            minimum: 1,
+            description: "Column span (≥ 1)."
+          },
+          h: { type: "integer", minimum: 1, description: "Row span (≥ 1)." }
+        },
+        required: ["id", "w", "h"]
+      },
+      returns: "boolean (accepted)",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when applied; false when edit mode is off, the board is stacked, or the id is unknown."
+      },
+      idempotent: !0,
+      errors: [
+        "Unavailable while the board is stacked (state stacked is true): returns false and changes nothing.",
+        "Unavailable while edit mode is off: returns false.",
+        "Unknown widget id: returns false."
+      ],
+      descriptionKey: "ui.agent.dashboardGrid.actions.resizeWidget",
+      description: "Resize a widget to a span. Clamped to the grid and the widget’s min/max; colliding widgets are pushed down. Refused while edit mode is off or the board is stacked.",
+      invoke: (r, o) => r.resizeWidgetTo(o.id, o.w, o.h)
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "dashboard-grid",
+      description: 'Also carries data-stacked="true" while the board shows one read-only column.'
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-widget-id",
+      description: "Each widget wrapper carries its layout id."
+    }
+  }
+};
+function q(r, o) {
+  return r.x < o.x + o.w && o.x < r.x + r.w && r.y < o.y + o.h && o.y < r.y + r.h;
+}
+function ue(r, o) {
+  const s = Math.max(1, r.minW ?? 1), u = Math.max(1, r.minH ?? 1), l = Math.min(o, r.maxW ?? o), b = r.maxH ?? Number.POSITIVE_INFINITY, a = Math.min(Math.max(r.w, s), l), h = Math.min(Math.max(r.h, u), b), i = Math.min(Math.max(0, r.x), o - a), m = Math.max(0, r.y);
+  return { ...r, x: i, y: m, w: a, h };
+}
+function H(r, o, s) {
+  const u = r.map((i) => ue(i, o)), l = [...u].sort((i, m) => i.id === s ? -1 : m.id === s ? 1 : i.y - m.y || i.x - m.x), b = [], a = s ? u.find((i) => i.id === s) : void 0;
+  for (const i of l) {
+    if (i.id !== s) {
+      if (a && q(a, i)) {
+        const m = { ...i, y: Math.max(0, a.y - i.h) };
+        !q(a, m) && !b.some((M) => M.id !== s && q(M, m)) && (i.y = m.y);
+      }
+      for (; b.some((m) => q(m, i)); )
+        i.y += 1;
+      for (; i.y > 0; ) {
+        const m = { ...i, y: i.y - 1 };
+        if (b.some((M) => q(M, m))) break;
+        i.y -= 1;
+      }
+    }
+    b.push(i);
+  }
+  const h = new Map(b.map((i) => [i.id, i]));
+  return r.map((i) => h.get(i.id));
+}
+function be(r, o, s, u, l) {
+  const b = r.map(
+    (a) => a.id === o ? ue({ ...a, x: s, y: u }, l) : a
+  );
+  return H(b, l, o);
+}
+function he(r, o, s, u, l) {
+  const b = r.map(
+    (a) => a.id === o ? (
+      // Resizing never moves the widget: the width clamps to the space
+      // between its position and the grid edge (clampRect would slide it).
+      // minW wins over the edge clamp so clampRect cannot re-raise w and
+      // slide x as a side effect.
+      ue(
+        {
+          ...a,
+          w: Math.max(a.minW ?? 1, Math.min(s, l - a.x)),
+          h: u
+        },
+        l
+      )
+    ) : a
+  );
+  return H(b, l, o);
+}
+function $e(r, o, s, u) {
+  const l = Math.min(Math.max(1, s), o), b = r.reduce((a, h) => Math.max(a, h.y + h.h), 0);
+  for (let a = 0; a <= b; a += 1)
+    for (let h = 0; h <= o - l; h += 1) {
+      const i = {
+        x: h,
+        y: a,
+        w: l,
+        h: u
+      };
+      if (!r.some((m) => q(m, i)))
+        return { x: h, y: a };
+    }
+  return { x: 0, y: b };
+}
+function ft(r) {
+  return r.reduce((o, s) => Math.max(o, s.y + s.h), 0);
+}
+const pt = 24;
+function Ae(r, o, s) {
+  return o === void 0 || !Number.isFinite(o) || o <= 0 ? !1 : !Number.isFinite(r) || r <= 0 ? s : s ? r < o + pt : r < o;
+}
+function mt(r, o) {
+  const s = new Map(o.map((u) => [u.id, u]));
+  return r.map((u, l) => ({ id: u, index: l, entry: s.get(u) })).sort((u, l) => !u.entry || !l.entry ? u.entry ? -1 : l.entry ? 1 : u.index - l.index : u.entry.y - l.entry.y || u.entry.x - l.entry.x || u.index - l.index).map(({ id: u }) => u);
+}
+const gt = ce(
+  [
+    "ds:grid ds:w-full",
+    "ds:gap-[var(--spacing-md)]",
+    // Edit-mode surface: tint the whole plane, draw faint cell lines, and
+    // reserve spare rows (--dg-min-block) so the AVAILABLE space reads at
+    // a glance instead of the board ending at the last occupied row.
+    "ds:data-[editing=true]:rounded-[var(--radius-lg)] ds:data-[editing=true]:bg-muted/10",
+    "ds:data-[editing=true]:[background-image:var(--dg-grid-lines)]",
+    "ds:data-[editing=true]:min-h-[var(--dg-min-block)]"
+  ].join(" "),
+  {
+    variants: {
+      // Stacked: one full-width column; each row takes its widget's block
+      // size. Focus can fall back to the board here (see the focus effect),
+      // so it gets the kit's focus ring.
+      stacked: {
+        false: [
+          "ds:[grid-template-columns:repeat(var(--dg-cols),minmax(0,1fr))]",
+          "ds:[grid-auto-rows:var(--dg-row)]"
+        ].join(" "),
+        true: [
+          "ds:grid-cols-1 ds:auto-rows-auto",
+          "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { stacked: !1 }
+  }
+), bt = ce(
+  [
+    "ds:relative ds:min-h-0 ds:min-w-0 ds:overflow-hidden",
+    // Mirror of Card variant="elevated" so widgets read as kit cards.
+    "ds:rounded-[var(--radius-lg)] ds:bg-[var(--card)] ds:text-[var(--card-foreground)]",
+    "ds:[:where(&)]:border-[length:var(--surface-border-width,var(--border-width-sm))] ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)]",
+    // Grabbed feedback (keyboard or pointer drag in flight).
+    "ds:data-[grabbed=true]:ring-[length:var(--focus-ring-width)] ds:data-[grabbed=true]:ring-ring ds:data-[grabbed=true]:z-10",
+    // Only reachable when stacking removes the focused edit control: the
+    // widget then takes focus itself (tabindex -1, set at that moment).
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+  ].join(" "),
+  {
+    variants: {
+      stacked: {
+        false: [
+          "ds:[grid-column-start:var(--dg-x)] ds:[grid-column-end:span_var(--dg-w)]",
+          "ds:[grid-row-start:var(--dg-y)] ds:[grid-row-end:span_var(--dg-h)]"
+        ].join(" "),
+        true: "ds:col-span-full ds:row-auto"
+      },
+      stackedHeight: { grid: "", content: "" }
+    },
+    compoundVariants: [
+      { stacked: !1, class: "ds:flex ds:flex-col" },
+      // At least the block size the widget has in the grid (h rows plus the
+      // h - 1 gaps). A minimum, not a fixed size: at 200% zoom the widget
+      // grows instead of clipping its content (WCAG 1.4.4, 1.4.10).
+      {
+        stacked: !0,
+        stackedHeight: "grid",
+        class: [
+          "ds:flex ds:flex-col",
+          "ds:[min-block-size:calc(var(--dg-h)*var(--dg-row)_+_(var(--dg-h)_-_1)*var(--spacing-md))]"
+        ].join(" ")
+      },
+      // As tall as the content, or minStackedHeight. A grid, not a flex
+      // column, so the body row is a definite box a 100% chart can fill.
+      {
+        stacked: !0,
+        stackedHeight: "content",
+        class: [
+          "ds:grid ds:grid-cols-[minmax(0,1fr)] ds:grid-rows-[auto_1fr]",
+          "ds:[min-block-size:var(--dg-min-stacked)]"
+        ].join(" ")
+      }
+    ],
+    defaultVariants: { stacked: !1, stackedHeight: "grid" }
+  }
+), ht = ce(
+  "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pb-[var(--spacing-md)] ds:pt-[var(--spacing-xs)]",
+  {
+    variants: {
+      // `box`: fill the widget's block size and clip to it. `content`: take
+      // the content's own height (the content-height stack), never a box.
+      fit: {
+        box: "ds:min-h-0 ds:flex-1 ds:overflow-hidden",
+        content: "ds:min-w-0"
+      }
+    },
+    defaultVariants: { fit: "box" }
+  }
+), yt = ce(
+  [
+    "ds:m-0 ds:min-w-0 ds:flex-1 ds:truncate ds:text-sm ds:font-medium",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+  ].join(" ")
+), Fe = rt(
+  null
+);
+function ae(r, o) {
+  Ze.forEach(r, (s) => {
+    if (et(s)) {
+      if (s.type === tt) {
+        ae(
+          s.props.children,
+          o
+        );
+        return;
+      }
+      o(s);
+    }
+  });
+}
+function je({
+  id: r,
+  title: o,
+  minStackedHeight: s,
+  actionsSlot: u,
+  children: l
+}) {
+  var g, ne, P;
+  const { t: b } = We("ui"), a = Qe(Fe), h = x(null), i = a == null ? void 0 : a.layoutById.get(r), [m, M] = L(null), [$, ee] = L(!1), [te, E] = L(!1), [le, re] = L(!1);
+  if (X(() => {
+    if (!m) return;
+    const p = () => ee(m.scrollWidth > m.clientWidth);
+    p();
+    const N = typeof document < "u" ? document.fonts : void 0;
+    N == null || N.addEventListener("loadingdone", p);
+    const v = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(p);
+    return v == null || v.observe(m), () => {
+      N == null || N.removeEventListener("loadingdone", p), v == null || v.disconnect();
+    };
+  }, [m, o]), X(() => {
+    $ || re(!1);
+  }, [$]), _(() => {
+    const p = h.current;
+    !p || !i || (p.style.setProperty("--dg-x", String(i.x + 1)), p.style.setProperty("--dg-y", String(i.y + 1)), p.style.setProperty("--dg-w", String(i.w)), p.style.setProperty("--dg-h", String(i.h)), p.style.setProperty(
+      "--dg-min-stacked",
+      s !== void 0 && Number.isFinite(s) && s > 0 ? `${s}px` : "auto"
+    ));
+  }, [i == null ? void 0 : i.x, i == null ? void 0 : i.y, i == null ? void 0 : i.w, i == null ? void 0 : i.h, i, s]), !a || !i) return null;
+  const y = ((g = a.grab) == null ? void 0 : g.id) === r, A = a.editing, R = a.headingLevel ? `h${a.headingLevel}` : "span";
+  return /* @__PURE__ */ Z(
+    "div",
+    {
+      ref: h,
+      role: "listitem",
+      "aria-label": o,
+      "data-component": "dashboard-grid-widget",
+      "data-widget-id": r,
+      "data-grabbed": y || void 0,
+      className: bt({
+        stacked: a.stacked,
+        stackedHeight: a.stackedHeight
+      }),
+      children: [
+        /* @__PURE__ */ Z("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pt-[var(--spacing-sm)]", children: [
+          A ? /* @__PURE__ */ G(
+            ge,
+            {
+              size: "sm",
+              intent: "outline",
+              type: "button",
+              icon: /* @__PURE__ */ G(ot, {}),
+              "aria-label": b("dashboardGrid.move", { title: o }),
+              "aria-pressed": y && ((ne = a.grab) == null ? void 0 : ne.kind) === "move",
+              className: "ds:cursor-grab ds:touch-none ds:bg-[var(--card)]",
+              onPointerDown: (p) => a.startPointerGrab("move", r, p),
+              onKeyDown: (p) => a.keyboardStep(p, r),
+              onClick: () => a.startKeyboardGrab("move", r)
+            }
+          ) : null,
+          /* @__PURE__ */ G(
+            nt,
+            {
+              label: o,
+              open: $ && le,
+              onOpenChange: (p) => re(p && $),
+              children: /* @__PURE__ */ G(
+                R,
+                {
+                  ref: M,
+                  tabIndex: $ || te ? 0 : void 0,
+                  onFocus: () => E(!0),
+                  onBlur: () => E(!1),
+                  className: yt(),
+                  children: o
+                }
+              )
+            }
+          ),
+          u,
+          A && a.canRemove ? /* @__PURE__ */ G(
+            ge,
+            {
+              size: "sm",
+              intent: "outline",
+              type: "button",
+              icon: /* @__PURE__ */ G(dt, {}),
+              className: "ds:bg-[var(--card)]",
+              "aria-label": b("dashboardGrid.remove", { title: o }),
+              onClick: () => a.requestRemove(r)
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ G(
+          "div",
+          {
+            className: ht({
+              fit: a.stacked && a.stackedHeight === "content" ? "content" : "box"
+            }),
+            children: l
+          }
+        ),
+        A ? /* @__PURE__ */ G("span", { className: "ds:absolute ds:bottom-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]", children: /* @__PURE__ */ G(
+          ge,
+          {
+            size: "sm",
+            intent: "outline",
+            type: "button",
+            icon: /* @__PURE__ */ G(ut, {}),
+            flipIconInRtl: !0,
+            "aria-label": b("dashboardGrid.resize", { title: o }),
+            "aria-pressed": y && ((P = a.grab) == null ? void 0 : P.kind) === "resize",
+            className: "ds:touch-none ds:bg-[var(--card)]",
+            onPointerDown: (p) => a.startPointerGrab("resize", r, p),
+            onKeyDown: (p) => a.keyboardStep(p, r),
+            onClick: () => a.startKeyboardGrab("resize", r)
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+je.displayName = "DashboardGrid.Widget";
+const _e = Be(
+  ({
+    "aria-label": r,
+    id: o,
+    cols: s = 12,
+    rowHeight: u = 96,
+    layout: l,
+    defaultLayout: b,
+    onLayoutChange: a,
+    editing: h = !1,
+    onRemoveWidget: i,
+    onRequestAdd: m,
+    stackBelow: M,
+    onStackedChange: $,
+    stackedHeight: ee = "grid",
+    widgetHeadingLevel: te,
+    children: E,
+    className: le
+  }, re) => {
+    const { t: y } = We("ui"), A = x(null), R = x(null), [g, ne] = L(!1), P = x(!1);
+    P.current = g;
+    const p = x(null), N = C((e) => {
+      var d;
+      if (e === P.current) return;
+      const t = A.current, n = typeof document < "u" ? document.activeElement : null;
+      p.current = t && n instanceof HTMLElement && t.contains(n) ? {
+        element: n,
+        widgetId: ((d = n.closest("[data-widget-id]")) == null ? void 0 : d.getAttribute("data-widget-id")) ?? null
+      } : null, P.current = e, ne(e);
+    }, []);
+    _(() => {
+      const e = A.current;
+      if (!e) return;
+      if (M === void 0) {
+        N(!1);
+        return;
+      }
+      if (N(
+        Ae(e.offsetWidth, M, P.current)
+      ), typeof ResizeObserver > "u") return;
+      const t = new ResizeObserver((n) => {
+        var f, w;
+        const d = n[n.length - 1];
+        if (!d) return;
+        const c = ((w = (f = d.borderBoxSize) == null ? void 0 : f[0]) == null ? void 0 : w.inlineSize) ?? d.contentRect.width;
+        N(Ae(c, M, P.current));
+      });
+      return t.observe(e), () => t.disconnect();
+    }, [M, N]);
+    const v = h && !g, ye = j(() => {
+      const e = [];
+      return ae(E, (t) => {
+        t.props.id && e.push(t.props.id);
+      }), e;
+    }, [E]), ve = j(() => {
+      const e = /* @__PURE__ */ new Map();
+      return ae(E, (t) => {
+        t.props.id && e.set(t.props.id, {
+          defaultW: t.props.defaultW ?? 4,
+          defaultH: t.props.defaultH ?? 2
+        });
+      }), e;
+    }, [E]), [Oe, Ke] = L(() => b ?? []), we = l ?? Oe, I = C(
+      (e) => {
+        l === void 0 && Ke(e), a == null || a(e);
+      },
+      [l, a]
+    ), { resolved: k, autoPlaced: xe } = j(() => {
+      const e = we.map((d) => ue(d, s)), t = ye.filter(
+        (d) => !e.some((c) => c.id === d)
+      );
+      if (t.length === 0)
+        return { resolved: e, autoPlaced: !1 };
+      const n = [...e];
+      for (const d of t) {
+        const c = ve.get(d) ?? { defaultW: 4, defaultH: 2 }, f = Math.min(c.defaultW, s), w = $e(n, s, f, c.defaultH);
+        n.push({ id: d, x: w.x, y: w.y, w: f, h: c.defaultH });
+      }
+      return { resolved: H(n, s), autoPlaced: !0 };
+    }, [we, ye, ve, s]), ke = x("");
+    X(() => {
+      if (!xe) return;
+      const e = k.map(
+        (t) => `${t.id}:${t.x},${t.y},${t.w},${t.h}`
+      ).join("|");
+      ke.current !== e && (ke.current = e, I(k));
+    }, [xe, k, I]);
+    const [Ve, He] = L(null), [z, Ge] = L(null), [Ue, O] = L(""), fe = x(null), W = x(null), B = x(null), se = x(!1), J = x(s);
+    J.current = s;
+    const U = x(k);
+    U.current = k;
+    const F = C((e) => {
+      fe.current = e, He(e);
+    }, []), ie = C(
+      (e, t, n) => {
+        const d = { kind: e, id: t, via: n };
+        W.current = { ...d, baseLayout: U.current }, Ge(d), F(U.current);
+      },
+      [F]
+    ), Q = Ve ?? k, Me = j(
+      () => new Map(Q.map((e) => [e.id, e])),
+      [Q]
+    ), Se = C(
+      (e, t) => {
+        O(
+          e === "move" ? y("dashboardGrid.movedTo", { col: t.x + 1, row: t.y + 1 }) : y("dashboardGrid.resizedTo", { cols: t.w, rows: t.h })
+        );
+      },
+      [y]
+    ), S = C(
+      (e) => {
+        const t = fe.current, n = W.current;
+        if (W.current = null, B.current = null, Ge(null), F(null), !e || !t || !n) {
+          O(y("dashboardGrid.cancelled"));
+          return;
+        }
+        const d = H(t, J.current), c = (w) => w.map((T) => `${T.id}:${T.x},${T.y},${T.w},${T.h}`).join("|");
+        if (c(d) === c(U.current)) {
+          O(y("dashboardGrid.cancelled"));
+          return;
+        }
+        I(d);
+        const f = d.find((w) => w.id === n.id);
+        O(
+          f ? y("dashboardGrid.droppedAt", {
+            col: f.x + 1,
+            row: f.y + 1
+          }) : y("dashboardGrid.cancelled")
+        );
+      },
+      [F, I, y]
+    ), Re = C(
+      (e, t) => {
+        if (!v) return;
+        if (se.current) {
+          se.current = !1;
+          return;
+        }
+        const n = W.current;
+        if ((n == null ? void 0 : n.via) !== "pointer") {
+          if (n && n.id === t && n.kind === e) {
+            S(!0);
+            return;
+          }
+          ie(e, t, "keyboard"), O(
+            y(e === "move" ? "dashboardGrid.grabbed" : "dashboardGrid.resizeGrabbed")
+          );
+        }
+      },
+      [v, ie, S, y]
+    ), Ne = C(
+      (e, t) => {
+        const n = W.current;
+        if (!n || n.id !== t || n.via !== "keyboard")
+          return;
+        if (e.key === "Escape") {
+          e.preventDefault(), S(!1);
+          return;
+        }
+        if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) return;
+        e.preventDefault();
+        const c = typeof window < "u" && R.current ? window.getComputedStyle(R.current).direction === "rtl" : !1, f = e.key === "ArrowRight" ? c ? -1 : 1 : e.key === "ArrowLeft" ? c ? 1 : -1 : 0, w = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0, D = (fe.current ?? n.baseLayout).find((Y) => Y.id === t);
+        if (!D) return;
+        const K = n.kind === "move" ? be(
+          n.baseLayout,
+          t,
+          D.x + f,
+          D.y + w,
+          s
+        ) : he(
+          n.baseLayout,
+          t,
+          D.w + f,
+          D.h + w,
+          s
+        );
+        F(K);
+        const V = K.find((Y) => Y.id === t);
+        V && Se(n.kind, V);
+      },
+      [s, S, F, Se]
+    ), Te = C(
+      (e, t, n) => {
+        var V, Y, Ce, Ie;
+        if (!v || W.current) return;
+        const d = R.current, c = U.current.find((Xe) => Xe.id === t);
+        if (!d || !c) return;
+        n.preventDefault(), (Y = (V = n.currentTarget).focus) == null || Y.call(V);
+        const f = d.getBoundingClientRect();
+        if (f.width <= 0) return;
+        const w = window.getComputedStyle(d), T = Number.parseFloat(w.columnGap) || 0, D = Number.parseFloat(w.rowGap) || 0, K = (f.width - T * (s - 1)) / s;
+        B.current = {
+          kind: e,
+          id: t,
+          pointerId: n.pointerId,
+          startClientX: n.clientX,
+          startClientY: n.clientY,
+          origin: c,
+          colStride: K + T,
+          rowStride: u + D,
+          isRtl: w.direction === "rtl"
+        };
+        try {
+          (Ie = (Ce = n.currentTarget).setPointerCapture) == null || Ie.call(Ce, n.pointerId);
+        } catch {
+        }
+        ie(e, t, "pointer");
+      },
+      [v, s, u, ie]
+    );
+    X(() => {
+      if (!z || z.via !== "pointer") return;
+      const e = (d) => {
+        const c = B.current, f = W.current;
+        if (!c || !f || d.pointerId !== c.pointerId)
+          return;
+        const w = d.clientX - c.startClientX, T = d.clientY - c.startClientY, D = Math.round(w / c.colStride) * (c.isRtl ? -1 : 1), K = Math.round(T / c.rowStride), V = c.kind === "move" ? be(
+          f.baseLayout,
+          c.id,
+          c.origin.x + D,
+          c.origin.y + K,
+          J.current
+        ) : he(
+          f.baseLayout,
+          c.id,
+          c.origin.w + D,
+          c.origin.h + K,
+          J.current
+        );
+        F(V);
+      }, t = (d) => {
+        const c = B.current;
+        !c || d.pointerId !== c.pointerId || (se.current = !0, S(!0));
+      }, n = (d) => {
+        const c = B.current;
+        !c || d.pointerId !== c.pointerId || (se.current = !0, S(!1));
+      };
+      return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), window.addEventListener("pointercancel", n), () => {
+        window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t), window.removeEventListener("pointercancel", n);
+      };
+    }, [z, S, F]), X(() => {
+      if (!z) return;
+      const e = (t) => {
+        t.key === "Escape" && S(!1);
+      };
+      return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+    }, [z, S]), X(() => {
+      if (!z || z.via !== "keyboard") return;
+      const e = (n) => {
+        var c;
+        const d = n.relatedTarget;
+        (!d || !((c = R.current) != null && c.contains(d))) && S(!1);
+      }, t = R.current;
+      return t == null || t.addEventListener("focusout", e), () => t == null ? void 0 : t.removeEventListener("focusout", e);
+    }, [z, S]), _(() => {
+      g && (W.current && S(!1), h && O(y("dashboardGrid.stackedReadOnly")));
+    }, [g, h, S, y]), _(() => {
+      var c;
+      const e = p.current;
+      p.current = null;
+      const t = A.current;
+      if (!e || !t) return;
+      const n = document.activeElement;
+      if (n === e.element || n !== null && n !== document.body) return;
+      if (t.contains(e.element)) {
+        e.element.focus();
+        return;
+      }
+      const d = e.widgetId ? Array.from(
+        t.querySelectorAll("[data-widget-id]")
+      ).find(
+        (f) => f.getAttribute("data-widget-id") === e.widgetId
+      ) : void 0;
+      if (d) {
+        d.setAttribute("tabindex", "-1"), d.focus();
+        return;
+      }
+      (c = R.current) == null || c.focus();
+    }, [g]);
+    const oe = x($);
+    oe.current = $;
+    const Ee = x(!1);
+    _(() => {
+      var e;
+      Ee.current !== g && (Ee.current = g, (e = oe.current) == null || e.call(oe, g));
+    }, [g]), _(() => {
+      const e = R.current;
+      e && (e.style.setProperty("--dg-cols", String(s)), e.style.setProperty("--dg-row", `${u}px`));
+    }, [s, u]);
+    const Pe = ft(Q);
+    _(() => {
+      const e = R.current;
+      e && (e.style.setProperty(
+        "--dg-grid-lines",
+        `repeating-linear-gradient(to right, color-mix(in srgb, var(--border) 50%, transparent) 0 1px, transparent 1px calc((100% + var(--spacing-md)) / ${s})), repeating-linear-gradient(to bottom, color-mix(in srgb, var(--border) 50%, transparent) 0 1px, transparent 1px calc(${u}px + var(--spacing-md)))`
+      ), e.style.setProperty(
+        "--dg-min-block",
+        `calc(${Pe + 2} * (${u}px + var(--spacing-md)) - var(--spacing-md))`
+      ));
+    }, [s, u, Pe]);
+    const ze = x(null), pe = v && !!m, de = j(
+      () => pe ? $e(Q, s, 2, 2) : null,
+      [pe, Q, s]
+    );
+    _(() => {
+      const e = ze.current;
+      !e || !de || (e.style.setProperty("--dg-x", String(de.x + 1)), e.style.setProperty("--dg-y", String(de.y + 1)), e.style.setProperty("--dg-w", "2"), e.style.setProperty("--dg-h", "2"));
+    }, [de]);
+    const De = C(
+      (e) => {
+        I(
+          H(
+            U.current.filter((t) => t.id !== e),
+            J.current
+          )
+        ), O(y("dashboardGrid.removed")), i == null || i(e), requestAnimationFrame(() => {
+          const t = R.current;
+          if (!t) return;
+          const n = t.querySelector("button");
+          n ? n.focus() : t.focus();
+        });
+      },
+      [I, i, y]
+    ), me = j(
+      () => ({
+        moveWidgetTo(e, t, n) {
+          return !v || P.current || !Number.isFinite(t) || !Number.isFinite(n) || !k.some((d) => d.id === e) ? !1 : (I(
+            H(
+              be(k, e, Math.round(t), Math.round(n), s),
+              s
+            )
+          ), !0);
+        },
+        resizeWidgetTo(e, t, n) {
+          return !v || P.current || !Number.isFinite(t) || !Number.isFinite(n) || !k.some((d) => d.id === e) ? !1 : (I(
+            H(
+              he(
+                k,
+                e,
+                Math.round(t),
+                Math.round(n),
+                s
+              ),
+              s
+            )
+          ), !0);
+        },
+        getGridState() {
+          return {
+            cols: s,
+            editing: h,
+            stacked: g,
+            layout: k.map((e) => ({ ...e }))
+          };
+        }
+      }),
+      [v, h, g, k, s, I]
+    );
+    Je(re, () => me, [me]), st(lt, me, o);
+    const Ye = j(
+      () => ({
+        editing: v,
+        stacked: g,
+        stackedHeight: ee,
+        headingLevel: te,
+        layoutById: Me,
+        grab: z,
+        canRemove: !!i,
+        requestRemove: De,
+        startKeyboardGrab: Re,
+        keyboardStep: Ne,
+        startPointerGrab: Te
+      }),
+      [
+        v,
+        g,
+        ee,
+        te,
+        Me,
+        z,
+        i,
+        De,
+        Re,
+        Ne,
+        Te
+      ]
+    ), qe = j(() => {
+      if (M === void 0) return E;
+      const e = [], t = /* @__PURE__ */ new Map(), n = [];
+      return ae(E, (d) => {
+        const c = d.props.id;
+        if (c && !t.has(c)) {
+          const f = Le(d, {
+            key: `widget:${c}:${d.key ?? ""}`
+          });
+          t.set(c, f), e.push(f);
+        } else {
+          const f = Le(d, {
+            key: d.key === null ? `child:at:${n.length}` : `child:key:${d.key}`
+          });
+          n.push(f), e.push(f);
+        }
+      }), g ? [
+        ...mt([...t.keys()], k).map(
+          (d) => t.get(d)
+        ),
+        ...n
+      ] : e;
+    }, [M, E, g, k]);
+    return /* @__PURE__ */ Z(
+      "div",
+      {
+        ref: A,
+        "data-component": "dashboard-grid",
+        "data-component-id": o,
+        "data-editing": v || void 0,
+        "data-stacked": g || void 0,
+        className: `ds:block ds:w-full ${le ?? ""}`.trim(),
+        children: [
+          /* @__PURE__ */ G("div", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: Ue }),
+          /* @__PURE__ */ Z(
+            "div",
+            {
+              ref: R,
+              role: "list",
+              "aria-label": r,
+              tabIndex: -1,
+              "data-editing": v || void 0,
+              "data-stacked": g || void 0,
+              className: gt({ stacked: g }),
+              children: [
+                /* @__PURE__ */ G(Fe.Provider, { value: Ye, children: qe }),
+                pe ? (
+                  // role="list" allows only listitem children — the tile wrapper
+                  // carries the grid placement, the button fills it.
+                  /* @__PURE__ */ G(
+                    "div",
+                    {
+                      ref: ze,
+                      role: "listitem",
+                      className: [
+                        "ds:flex",
+                        "ds:[grid-column-start:var(--dg-x)] ds:[grid-column-end:span_var(--dg-w)]",
+                        "ds:[grid-row-start:var(--dg-y)] ds:[grid-row-end:span_var(--dg-h)]"
+                      ].join(" "),
+                      children: /* @__PURE__ */ Z(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: m,
+                          className: [
+                            "ds:flex ds:flex-1 ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
+                            "ds:rounded-[var(--radius-lg)] ds:border ds:border-dashed ds:border-border",
+                            "ds:text-sm ds:text-muted-foreground ds:transition-colors",
+                            "ds:hover:bg-muted/10 ds:hover:text-foreground",
+                            "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-ring"
+                          ].join(" "),
+                          children: [
+                            /* @__PURE__ */ G(it, { "aria-hidden": "true", className: "ds:size-4" }),
+                            y("dashboardGrid.add")
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+_e.displayName = "DashboardGrid";
+const zt = Object.assign(_e, {
+  Widget: je
+});
+export {
+  zt as D,
+  lt as d
+};
+//# sourceMappingURL=dashboard-grid-SAGjktTs.js.map