@alfadocs/ui-kit 1.55.0 → 1.57.0

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

@@ -0,0 +1,844 @@
+import { jsxs as J, jsx as M } from "react/jsx-runtime";
+import { forwardRef as qe, useRef as w, useState as X, useCallback as z, useMemo as A, useEffect as ne, useImperativeHandle as Xe, useContext as Je, Children as Qe, isValidElement as Ze, Fragment as Be, createContext as et, cloneElement as De } from "react";
+import { c as Ce } from "./index-D2ZczOXr.js";
+import { useTranslation as Te } from "react-i18next";
+import { I as ue } from "./icon-button-COX76Jdj.js";
+import { u as $ } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as tt } from "./registry-DvAUVLHh.js";
+import { P as rt } from "./plus-DzMQ_c6b.js";
+import { G as nt } from "./grip-vertical-onSb1JXO.js";
+import { X as st } from "./x-B5YnXwCz.js";
+import { c as it } 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 ot = [
+  ["path", { d: "M19 13v6h-6", key: "1hxl6d" }],
+  ["path", { d: "M5 11V5h6", key: "12e2xe" }],
+  ["path", { d: "m5 5 14 14", key: "11anup" }]
+], at = it("move-diagonal-2", ot), dt = {
+  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 U(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 ie(r, o) {
+  const s = Math.max(1, r.minW ?? 1), u = Math.max(1, r.minH ?? 1), p = Math.min(o, r.maxW ?? o), l = r.maxH ?? Number.POSITIVE_INFINITY, f = Math.min(Math.max(r.w, s), p), c = Math.min(Math.max(r.h, u), l), d = Math.min(Math.max(0, r.x), o - f), g = Math.max(0, r.y);
+  return { ...r, x: d, y: g, w: f, h: c };
+}
+function F(r, o, s) {
+  const u = r.map((d) => ie(d, o)), p = [...u].sort((d, g) => d.id === s ? -1 : g.id === s ? 1 : d.y - g.y || d.x - g.x), l = [], f = s ? u.find((d) => d.id === s) : void 0;
+  for (const d of p) {
+    if (d.id !== s) {
+      if (f && U(f, d)) {
+        const g = { ...d, y: Math.max(0, f.y - d.h) };
+        !U(f, g) && !l.some((x) => x.id !== s && U(x, g)) && (d.y = g.y);
+      }
+      for (; l.some((g) => U(g, d)); )
+        d.y += 1;
+      for (; d.y > 0; ) {
+        const g = { ...d, y: d.y - 1 };
+        if (l.some((x) => U(x, g))) break;
+        d.y -= 1;
+      }
+    }
+    l.push(d);
+  }
+  const c = new Map(l.map((d) => [d.id, d]));
+  return r.map((d) => c.get(d.id));
+}
+function le(r, o, s, u, p) {
+  const l = r.map(
+    (f) => f.id === o ? ie({ ...f, x: s, y: u }, p) : f
+  );
+  return F(l, p, o);
+}
+function fe(r, o, s, u, p) {
+  const l = r.map(
+    (f) => f.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.
+      ie(
+        {
+          ...f,
+          w: Math.max(f.minW ?? 1, Math.min(s, p - f.x)),
+          h: u
+        },
+        p
+      )
+    ) : f
+  );
+  return F(l, p, o);
+}
+function ze(r, o, s, u) {
+  const p = Math.min(Math.max(1, s), o), l = r.reduce((f, c) => Math.max(f, c.y + c.h), 0);
+  for (let f = 0; f <= l; f += 1)
+    for (let c = 0; c <= o - p; c += 1) {
+      const d = {
+        x: c,
+        y: f,
+        w: p,
+        h: u
+      };
+      if (!r.some((g) => U(g, d)))
+        return { x: c, y: f };
+    }
+  return { x: 0, y: l };
+}
+function ct(r) {
+  return r.reduce((o, s) => Math.max(o, s.y + s.h), 0);
+}
+const ut = 24;
+function Ie(r, o, s) {
+  return o === void 0 || !Number.isFinite(o) || o <= 0 ? !1 : !Number.isFinite(r) || r <= 0 ? s : s ? r < o + ut : r < o;
+}
+function lt(r, o) {
+  const s = new Map(o.map((u) => [u.id, u]));
+  return r.map((u, p) => ({ id: u, index: p, entry: s.get(u) })).sort((u, p) => !u.entry || !p.entry ? u.entry ? -1 : p.entry ? 1 : u.index - p.index : u.entry.y - p.entry.y || u.entry.x - p.entry.x || u.index - p.index).map(({ id: u }) => u);
+}
+const ft = 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 }
+  }
+), pt = Ce(
+  [
+    "ds:relative ds:flex ds:min-h-0 ds:min-w-0 ds:flex-col 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(" "),
+        // Full width, and at least the block size the widget has in the
+        // grid (h rows plus the h - 1 gaps it spans there). A minimum, not a
+        // fixed size: at 200% zoom or with long text the widget grows
+        // instead of clipping its content (WCAG 1.4.4, 1.4.10).
+        true: [
+          "ds:col-span-full ds:row-auto",
+          "ds:[min-block-size:calc(var(--dg-h)*var(--dg-row)_+_(var(--dg-h)_-_1)*var(--spacing-md))]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { stacked: !1 }
+  }
+), Ae = et(
+  null
+);
+function se(r, o) {
+  Qe.forEach(r, (s) => {
+    if (Ze(s)) {
+      if (s.type === Be) {
+        se(
+          s.props.children,
+          o
+        );
+        return;
+      }
+      o(s);
+    }
+  });
+}
+function $e({
+  id: r,
+  title: o,
+  actionsSlot: s,
+  children: u
+}) {
+  var x, V, N;
+  const { t: p } = Te("ui"), l = Je(Ae), f = w(null), c = l == null ? void 0 : l.layoutById.get(r);
+  if ($(() => {
+    const v = f.current;
+    !v || !c || (v.style.setProperty("--dg-x", String(c.x + 1)), v.style.setProperty("--dg-y", String(c.y + 1)), v.style.setProperty("--dg-w", String(c.w)), v.style.setProperty("--dg-h", String(c.h)));
+  }, [c == null ? void 0 : c.x, c == null ? void 0 : c.y, c == null ? void 0 : c.w, c == null ? void 0 : c.h, c]), !l || !c) return null;
+  const d = ((x = l.grab) == null ? void 0 : x.id) === r, g = l.editing;
+  return /* @__PURE__ */ J(
+    "div",
+    {
+      ref: f,
+      role: "listitem",
+      "aria-label": o,
+      "data-component": "dashboard-grid-widget",
+      "data-widget-id": r,
+      "data-grabbed": d || void 0,
+      className: pt({ stacked: l.stacked }),
+      children: [
+        /* @__PURE__ */ J("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: [
+          g ? /* @__PURE__ */ M(
+            ue,
+            {
+              size: "sm",
+              intent: "outline",
+              type: "button",
+              icon: /* @__PURE__ */ M(nt, {}),
+              "aria-label": p("dashboardGrid.move", { title: o }),
+              "aria-pressed": d && ((V = l.grab) == null ? void 0 : V.kind) === "move",
+              className: "ds:cursor-grab ds:touch-none ds:bg-[var(--card)]",
+              onPointerDown: (v) => l.startPointerGrab("move", r, v),
+              onKeyDown: (v) => l.keyboardStep(v, r),
+              onClick: () => l.startKeyboardGrab("move", r)
+            }
+          ) : null,
+          /* @__PURE__ */ M("span", { className: "ds:min-w-0 ds:flex-1 ds:truncate ds:text-sm ds:font-medium", children: o }),
+          s,
+          g && l.canRemove ? /* @__PURE__ */ M(
+            ue,
+            {
+              size: "sm",
+              intent: "outline",
+              type: "button",
+              icon: /* @__PURE__ */ M(st, {}),
+              className: "ds:bg-[var(--card)]",
+              "aria-label": p("dashboardGrid.remove", { title: o }),
+              onClick: () => l.requestRemove(r)
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ M("div", { className: "ds:min-h-0 ds:flex-1 ds:overflow-hidden ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pb-[var(--spacing-md)] ds:pt-[var(--spacing-xs)]", children: u }),
+        g ? /* @__PURE__ */ M("span", { className: "ds:absolute ds:bottom-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]", children: /* @__PURE__ */ M(
+          ue,
+          {
+            size: "sm",
+            intent: "outline",
+            type: "button",
+            icon: /* @__PURE__ */ M(at, {}),
+            flipIconInRtl: !0,
+            "aria-label": p("dashboardGrid.resize", { title: o }),
+            "aria-pressed": d && ((N = l.grab) == null ? void 0 : N.kind) === "resize",
+            className: "ds:touch-none ds:bg-[var(--card)]",
+            onPointerDown: (v) => l.startPointerGrab("resize", r, v),
+            onKeyDown: (v) => l.keyboardStep(v, r),
+            onClick: () => l.startKeyboardGrab("resize", r)
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+$e.displayName = "DashboardGrid.Widget";
+const Le = qe(
+  ({
+    "aria-label": r,
+    id: o,
+    cols: s = 12,
+    rowHeight: u = 96,
+    layout: p,
+    defaultLayout: l,
+    onLayoutChange: f,
+    editing: c = !1,
+    onRemoveWidget: d,
+    onRequestAdd: g,
+    stackBelow: x,
+    onStackedChange: V,
+    children: N,
+    className: v
+  }, We) => {
+    const { t: y } = Te("ui"), Q = w(null), P = w(null), [b, je] = X(!1), L = w(!1);
+    L.current = b;
+    const oe = w(null), Z = z((e) => {
+      var i;
+      if (e === L.current) return;
+      const t = Q.current, n = typeof document < "u" ? document.activeElement : null;
+      oe.current = t && n instanceof HTMLElement && t.contains(n) ? {
+        element: n,
+        widgetId: ((i = n.closest("[data-widget-id]")) == null ? void 0 : i.getAttribute("data-widget-id")) ?? null
+      } : null, L.current = e, je(e);
+    }, []);
+    $(() => {
+      const e = Q.current;
+      if (!e) return;
+      if (x === void 0) {
+        Z(!1);
+        return;
+      }
+      if (Z(
+        Ie(e.offsetWidth, x, L.current)
+      ), typeof ResizeObserver > "u") return;
+      const t = new ResizeObserver((n) => {
+        var m, h;
+        const i = n[n.length - 1];
+        if (!i) return;
+        const a = ((h = (m = i.borderBoxSize) == null ? void 0 : m[0]) == null ? void 0 : h.inlineSize) ?? i.contentRect.width;
+        Z(Ie(a, x, L.current));
+      });
+      return t.observe(e), () => t.disconnect();
+    }, [x, Z]);
+    const S = c && !b, pe = A(() => {
+      const e = [];
+      return se(N, (t) => {
+        t.props.id && e.push(t.props.id);
+      }), e;
+    }, [N]), me = A(() => {
+      const e = /* @__PURE__ */ new Map();
+      return se(N, (t) => {
+        t.props.id && e.set(t.props.id, {
+          defaultW: t.props.defaultW ?? 4,
+          defaultH: t.props.defaultH ?? 2
+        });
+      }), e;
+    }, [N]), [_e, Fe] = X(() => l ?? []), ge = p ?? _e, I = z(
+      (e) => {
+        p === void 0 && Fe(e), f == null || f(e);
+      },
+      [p, f]
+    ), { resolved: k, autoPlaced: be } = A(() => {
+      const e = ge.map((i) => ie(i, s)), t = pe.filter(
+        (i) => !e.some((a) => a.id === i)
+      );
+      if (t.length === 0)
+        return { resolved: e, autoPlaced: !1 };
+      const n = [...e];
+      for (const i of t) {
+        const a = me.get(i) ?? { defaultW: 4, defaultH: 2 }, m = Math.min(a.defaultW, s), h = ze(n, s, m, a.defaultH);
+        n.push({ id: i, x: h.x, y: h.y, w: m, h: a.defaultH });
+      }
+      return { resolved: F(n, s), autoPlaced: !0 };
+    }, [ge, pe, me, s]), he = w("");
+    ne(() => {
+      if (!be) return;
+      const e = k.map(
+        (t) => `${t.id}:${t.x},${t.y},${t.w},${t.h}`
+      ).join("|");
+      he.current !== e && (he.current = e, I(k));
+    }, [be, k, I]);
+    const [Ke, Oe] = X(null), [E, ye] = X(null), [Ue, W] = X(""), ae = w(null), C = w(null), H = w(null), B = w(!1), Y = w(s);
+    Y.current = s;
+    const K = w(k);
+    K.current = k;
+    const T = z((e) => {
+      ae.current = e, Oe(e);
+    }, []), ee = z(
+      (e, t, n) => {
+        const i = { kind: e, id: t, via: n };
+        C.current = { ...i, baseLayout: K.current }, ye(i), T(K.current);
+      },
+      [T]
+    ), q = Ke ?? k, ve = A(
+      () => new Map(q.map((e) => [e.id, e])),
+      [q]
+    ), we = z(
+      (e, t) => {
+        W(
+          e === "move" ? y("dashboardGrid.movedTo", { col: t.x + 1, row: t.y + 1 }) : y("dashboardGrid.resizedTo", { cols: t.w, rows: t.h })
+        );
+      },
+      [y]
+    ), G = z(
+      (e) => {
+        const t = ae.current, n = C.current;
+        if (C.current = null, H.current = null, ye(null), T(null), !e || !t || !n) {
+          W(y("dashboardGrid.cancelled"));
+          return;
+        }
+        const i = F(t, Y.current), a = (h) => h.map((R) => `${R.id}:${R.x},${R.y},${R.w},${R.h}`).join("|");
+        if (a(i) === a(K.current)) {
+          W(y("dashboardGrid.cancelled"));
+          return;
+        }
+        I(i);
+        const m = i.find((h) => h.id === n.id);
+        W(
+          m ? y("dashboardGrid.droppedAt", {
+            col: m.x + 1,
+            row: m.y + 1
+          }) : y("dashboardGrid.cancelled")
+        );
+      },
+      [T, I, y]
+    ), xe = z(
+      (e, t) => {
+        if (!S) return;
+        if (B.current) {
+          B.current = !1;
+          return;
+        }
+        const n = C.current;
+        if ((n == null ? void 0 : n.via) !== "pointer") {
+          if (n && n.id === t && n.kind === e) {
+            G(!0);
+            return;
+          }
+          ee(e, t, "keyboard"), W(
+            y(e === "move" ? "dashboardGrid.grabbed" : "dashboardGrid.resizeGrabbed")
+          );
+        }
+      },
+      [S, ee, G, y]
+    ), ke = z(
+      (e, t) => {
+        const n = C.current;
+        if (!n || n.id !== t || n.via !== "keyboard")
+          return;
+        if (e.key === "Escape") {
+          e.preventDefault(), G(!1);
+          return;
+        }
+        if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) return;
+        e.preventDefault();
+        const a = typeof window < "u" && P.current ? window.getComputedStyle(P.current).direction === "rtl" : !1, m = e.key === "ArrowRight" ? a ? -1 : 1 : e.key === "ArrowLeft" ? a ? 1 : -1 : 0, h = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0, D = (ae.current ?? n.baseLayout).find((O) => O.id === t);
+        if (!D) return;
+        const j = n.kind === "move" ? le(
+          n.baseLayout,
+          t,
+          D.x + m,
+          D.y + h,
+          s
+        ) : fe(
+          n.baseLayout,
+          t,
+          D.w + m,
+          D.h + h,
+          s
+        );
+        T(j);
+        const _ = j.find((O) => O.id === t);
+        _ && we(n.kind, _);
+      },
+      [s, G, T, we]
+    ), Ge = z(
+      (e, t, n) => {
+        var _, O, Pe, Ee;
+        if (!S || C.current) return;
+        const i = P.current, a = K.current.find((Ye) => Ye.id === t);
+        if (!i || !a) return;
+        n.preventDefault(), (O = (_ = n.currentTarget).focus) == null || O.call(_);
+        const m = i.getBoundingClientRect();
+        if (m.width <= 0) return;
+        const h = window.getComputedStyle(i), R = Number.parseFloat(h.columnGap) || 0, D = Number.parseFloat(h.rowGap) || 0, j = (m.width - R * (s - 1)) / s;
+        H.current = {
+          kind: e,
+          id: t,
+          pointerId: n.pointerId,
+          startClientX: n.clientX,
+          startClientY: n.clientY,
+          origin: a,
+          colStride: j + R,
+          rowStride: u + D,
+          isRtl: h.direction === "rtl"
+        };
+        try {
+          (Ee = (Pe = n.currentTarget).setPointerCapture) == null || Ee.call(Pe, n.pointerId);
+        } catch {
+        }
+        ee(e, t, "pointer");
+      },
+      [S, s, u, ee]
+    );
+    ne(() => {
+      if (!E || E.via !== "pointer") return;
+      const e = (i) => {
+        const a = H.current, m = C.current;
+        if (!a || !m || i.pointerId !== a.pointerId)
+          return;
+        const h = i.clientX - a.startClientX, R = i.clientY - a.startClientY, D = Math.round(h / a.colStride) * (a.isRtl ? -1 : 1), j = Math.round(R / a.rowStride), _ = a.kind === "move" ? le(
+          m.baseLayout,
+          a.id,
+          a.origin.x + D,
+          a.origin.y + j,
+          Y.current
+        ) : fe(
+          m.baseLayout,
+          a.id,
+          a.origin.w + D,
+          a.origin.h + j,
+          Y.current
+        );
+        T(_);
+      }, t = (i) => {
+        const a = H.current;
+        !a || i.pointerId !== a.pointerId || (B.current = !0, G(!0));
+      }, n = (i) => {
+        const a = H.current;
+        !a || i.pointerId !== a.pointerId || (B.current = !0, G(!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);
+      };
+    }, [E, G, T]), ne(() => {
+      if (!E) return;
+      const e = (t) => {
+        t.key === "Escape" && G(!1);
+      };
+      return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+    }, [E, G]), ne(() => {
+      if (!E || E.via !== "keyboard") return;
+      const e = (n) => {
+        var a;
+        const i = n.relatedTarget;
+        (!i || !((a = P.current) != null && a.contains(i))) && G(!1);
+      }, t = P.current;
+      return t == null || t.addEventListener("focusout", e), () => t == null ? void 0 : t.removeEventListener("focusout", e);
+    }, [E, G]), $(() => {
+      b && (C.current && G(!1), c && W(y("dashboardGrid.stackedReadOnly")));
+    }, [b, c, G, y]), $(() => {
+      var a;
+      const e = oe.current;
+      oe.current = null;
+      const t = Q.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 i = e.widgetId ? Array.from(
+        t.querySelectorAll("[data-widget-id]")
+      ).find(
+        (m) => m.getAttribute("data-widget-id") === e.widgetId
+      ) : void 0;
+      if (i) {
+        i.setAttribute("tabindex", "-1"), i.focus();
+        return;
+      }
+      (a = P.current) == null || a.focus();
+    }, [b]);
+    const te = w(V);
+    te.current = V;
+    const Me = w(!1);
+    $(() => {
+      var e;
+      Me.current !== b && (Me.current = b, (e = te.current) == null || e.call(te, b));
+    }, [b]), $(() => {
+      const e = P.current;
+      e && (e.style.setProperty("--dg-cols", String(s)), e.style.setProperty("--dg-row", `${u}px`));
+    }, [s, u]);
+    const Se = ct(q);
+    $(() => {
+      const e = P.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(${Se + 2} * (${u}px + var(--spacing-md)) - var(--spacing-md))`
+      ));
+    }, [s, u, Se]);
+    const Re = w(null), de = S && !!g, re = A(
+      () => de ? ze(q, s, 2, 2) : null,
+      [de, q, s]
+    );
+    $(() => {
+      const e = Re.current;
+      !e || !re || (e.style.setProperty("--dg-x", String(re.x + 1)), e.style.setProperty("--dg-y", String(re.y + 1)), e.style.setProperty("--dg-w", "2"), e.style.setProperty("--dg-h", "2"));
+    }, [re]);
+    const Ne = z(
+      (e) => {
+        I(
+          F(
+            K.current.filter((t) => t.id !== e),
+            Y.current
+          )
+        ), W(y("dashboardGrid.removed")), d == null || d(e), requestAnimationFrame(() => {
+          const t = P.current;
+          if (!t) return;
+          const n = t.querySelector("button");
+          n ? n.focus() : t.focus();
+        });
+      },
+      [I, d, y]
+    ), ce = A(
+      () => ({
+        moveWidgetTo(e, t, n) {
+          return !S || L.current || !Number.isFinite(t) || !Number.isFinite(n) || !k.some((i) => i.id === e) ? !1 : (I(
+            F(
+              le(k, e, Math.round(t), Math.round(n), s),
+              s
+            )
+          ), !0);
+        },
+        resizeWidgetTo(e, t, n) {
+          return !S || L.current || !Number.isFinite(t) || !Number.isFinite(n) || !k.some((i) => i.id === e) ? !1 : (I(
+            F(
+              fe(
+                k,
+                e,
+                Math.round(t),
+                Math.round(n),
+                s
+              ),
+              s
+            )
+          ), !0);
+        },
+        getGridState() {
+          return {
+            cols: s,
+            editing: c,
+            stacked: b,
+            layout: k.map((e) => ({ ...e }))
+          };
+        }
+      }),
+      [S, c, b, k, s, I]
+    );
+    Xe(We, () => ce, [ce]), tt(dt, ce, o);
+    const Ve = A(
+      () => ({
+        editing: S,
+        stacked: b,
+        layoutById: ve,
+        grab: E,
+        canRemove: !!d,
+        requestRemove: Ne,
+        startKeyboardGrab: xe,
+        keyboardStep: ke,
+        startPointerGrab: Ge
+      }),
+      [
+        S,
+        b,
+        ve,
+        E,
+        d,
+        Ne,
+        xe,
+        ke,
+        Ge
+      ]
+    ), He = A(() => {
+      if (x === void 0) return N;
+      const e = [], t = /* @__PURE__ */ new Map(), n = [];
+      return se(N, (i) => {
+        const a = i.props.id;
+        if (a && !t.has(a)) {
+          const m = De(i, {
+            key: `widget:${a}:${i.key ?? ""}`
+          });
+          t.set(a, m), e.push(m);
+        } else {
+          const m = De(i, {
+            key: i.key === null ? `child:at:${n.length}` : `child:key:${i.key}`
+          });
+          n.push(m), e.push(m);
+        }
+      }), b ? [
+        ...lt([...t.keys()], k).map(
+          (i) => t.get(i)
+        ),
+        ...n
+      ] : e;
+    }, [x, N, b, k]);
+    return /* @__PURE__ */ J(
+      "div",
+      {
+        ref: Q,
+        "data-component": "dashboard-grid",
+        "data-component-id": o,
+        "data-editing": S || void 0,
+        "data-stacked": b || void 0,
+        className: `ds:block ds:w-full ${v ?? ""}`.trim(),
+        children: [
+          /* @__PURE__ */ M("div", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: Ue }),
+          /* @__PURE__ */ J(
+            "div",
+            {
+              ref: P,
+              role: "list",
+              "aria-label": r,
+              tabIndex: -1,
+              "data-editing": S || void 0,
+              "data-stacked": b || void 0,
+              className: ft({ stacked: b }),
+              children: [
+                /* @__PURE__ */ M(Ae.Provider, { value: Ve, children: He }),
+                de ? (
+                  // role="list" allows only listitem children — the tile wrapper
+                  // carries the grid placement, the button fills it.
+                  /* @__PURE__ */ M(
+                    "div",
+                    {
+                      ref: Re,
+                      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__ */ J(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: g,
+                          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__ */ M(rt, { "aria-hidden": "true", className: "ds:size-4" }),
+                            y("dashboardGrid.add")
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Le.displayName = "DashboardGrid";
+const St = Object.assign(Le, {
+  Widget: $e
+});
+export {
+  St as D,
+  dt as d
+};
+//# sourceMappingURL=dashboard-grid-DfEY2qci.js.map