@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/dashboard-grid-nfhEewA4.js

@@ -0,0 +1,1005 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { _ as n, c as r, d as i, g as a, n as o, p as s, t as c } from "./menu-parts-BQej6eU9.js";
+import { r as l } from "./i18n-DpW8lqJ1.js";
+/* empty css                         */
+import { n as u, t as d } from "./icon-button-TnvMhK4o.js";
+import { a as f, c as p, i as m, o as ee, s as h } from "./card-CpVu8PyZ.js";
+import { i as g, o as te, r as ne } from "./skeleton-2LSpg84Z.js";
+import { i as _, n as v, o as re, r as y, t as ie } from "./result-state-CZsQfdN4.js";
+import { createControllable as ae } from "@slotted/core/state";
+import { Children as b, createContext as oe, isValidElement as se, useCallback as x, useContext as ce, useEffect as le, useId as ue, useImperativeHandle as de, useLayoutEffect as fe, useMemo as S, useRef as C, useState as pe } from "react";
+import { Fragment as me, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { dashboardGridMessages as he, dragMessages as ge } from "@slotted/core/i18n";
+import { getLiveAnnouncer as _e } from "@slotted/core/live-announcer";
+import { createDragController as ve } from "@slotted/core/drag";
+import { cellAt as ye, dashboardKeyIntent as be, gridStyle as xe, handleShortcuts as Se, layoutsEqual as Ce, materializeLayout as E, measureTiles as we, moveTile as Te, moveTileBy as Ee, parseDashboardLayout as De, parseDuration as Oe, playFlip as ke, playResize as Ae, resizeTileBy as je, resizeTileInClass as Me, resolveColumns as Ne, resolveTiles as D, serializeDashboardLayout as O, setTileHidden as Pe, sizeClassOf as k, spanFromTravel as A, swapTiles as Fe, tileStyle as Ie } from "@slotted/core/dashboard-grid";
+//#region src/dashboard-grid/dashboard-grid-context.ts
+var Le = oe(null);
+function Re(e) {
+	let t = ce(Le);
+	if (t === null) throw Error(`${e} must be rendered inside a DashboardGrid`);
+	return t;
+}
+//#endregion
+//#region src/dashboard-grid/dashboard-grid-defaults.tsx
+var j = {
+	columns: 12,
+	editBar: !0,
+	headingLevel: 3
+}, M = oe(j);
+function ze() {
+	return ce(M);
+}
+function Be({ children: e, ...t }) {
+	let n = ze();
+	return /* @__PURE__ */ w(M.Provider, {
+		value: {
+			columns: t.columns ?? n.columns,
+			editBar: t.editBar ?? n.editBar,
+			headingLevel: t.headingLevel ?? n.headingLevel
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/dashboard-grid/dashboard-grid.tsx
+var Ve = [], N = "dashboard-grid", He = "\0placeholder";
+function Ue(e, t, n, r = Object.is) {
+	let [i, a] = pe(t), o = e === void 0 ? i : e, s = C({
+		controlled: e,
+		value: o,
+		onRequest: n,
+		equals: r
+	});
+	return s.current = {
+		controlled: e,
+		value: o,
+		onRequest: n,
+		equals: r
+	}, [o, x((e, t, n, r) => {
+		let { controlled: i, value: o, onRequest: c, equals: l } = s.current;
+		if (l(o, e)) return !1;
+		let u = !0;
+		return ae({
+			controlled: i,
+			initial: o,
+			equals: l,
+			onRequest: (e) => {
+				c?.(e.value, Object.assign(e, r ?? {})), u = !e.cancelled;
+			}
+		}).request(e, t, n) && (s.current.value = e, a(e)), u;
+	}, [])];
+}
+function P(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function F(e) {
+	return e === null || typeof getComputedStyle != "function" ? "ltr" : getComputedStyle(e).direction === "rtl" ? "rtl" : "ltr";
+}
+function I(e) {
+	return e !== null && e.clientWidth > 0 ? k(e.clientWidth) : "expanded";
+}
+function We(e) {
+	let { props: t } = e;
+	return {
+		key: t.value,
+		...t.defaultColumns === void 0 ? {} : { defaultColumns: t.defaultColumns },
+		...t.defaultRows === void 0 ? {} : { defaultRows: t.defaultRows },
+		...t.minColumns === void 0 ? {} : { minColumns: t.minColumns },
+		...t.maxColumns === void 0 ? {} : { maxColumns: t.maxColumns },
+		...t.minRows === void 0 ? {} : { minRows: t.minRows },
+		...t.maxRows === void 0 ? {} : { maxRows: t.maxRows },
+		...t.movable === void 0 ? {} : { movable: t.movable },
+		...t.resizable === void 0 ? {} : { resizable: t.resizable },
+		...t.removable === void 0 ? {} : { removable: t.removable }
+	};
+}
+function Ge(e, t) {
+	let n = getComputedStyle(e), r = parseFloat(n.columnGap) || 0, i = parseFloat(n.rowGap) || 0;
+	return {
+		columns: t,
+		track: (e.clientWidth - r * (t - 1)) / Math.max(1, t),
+		columnGap: r,
+		row: parseFloat(n.gridAutoRows) || 0,
+		rowGap: i
+	};
+}
+function Ke(e, t, n) {
+	let r = e.getBoundingClientRect(), i = t.getBoundingClientRect();
+	return {
+		inlineStart: n ? i.right - r.right : r.left - i.left,
+		blockStart: r.top - i.top,
+		inlineSize: r.width,
+		blockSize: r.height
+	};
+}
+function qe(e, t) {
+	e.style.setProperty("--_dg-origin-inline-start", `${t.inlineStart}px`), e.style.setProperty("--_dg-origin-block-start", `${t.blockStart}px`), e.style.setProperty("--_dg-origin-inline-size", `${t.inlineSize}px`), e.style.setProperty("--_dg-origin-block-size", `${t.blockSize}px`);
+}
+function Je(e) {
+	if (e !== void 0) for (let t of [
+		"--_dg-origin-inline-start",
+		"--_dg-origin-block-start",
+		"--_dg-origin-inline-size",
+		"--_dg-origin-block-size",
+		"--_dg-lift-x",
+		"--_dg-lift-y"
+	]) e.style.removeProperty(t);
+}
+function L({ "aria-label": a, "aria-labelledby": s, children: d, columns: f, defaultEditing: p = !1, defaultLayout: m = Ve, editBar: ee, editing: h, headingLevel: g, layout: te, messages: ne, onEditingChange: v, onLayoutChange: ae, ref: oe, render: ce, style: Se, ...De }) {
+	let O = ze(), k = l(he, ne), Re = l(ge), j = S(() => Ne(f ?? O.columns), [f, O.columns]), M = ee ?? O.editBar, Be = g ?? O.headingLevel, L = `${ue()}-edit-status`, Ye = S(() => {
+		let e = /* @__PURE__ */ new Map();
+		return b.forEach(d, (t) => {
+			if (!se(t)) return;
+			let n = t.props.value;
+			typeof n == "string" && !e.has(n) && e.set(n, t);
+		}), e;
+	}, [d]), R = S(() => [...Ye.values()].map(We), [Ye]), Xe = S(() => new Map([...Ye].map(([e, t]) => [e, t.props.title])), [Ye]), [z, B] = Ue(te, m, ae, Ce), [V, H] = Ue(h, p, v), U = S(() => D(z, R, j), [
+		z,
+		R,
+		j
+	]), W = S(() => U.filter((e) => !e.hidden), [U]), [G, Ze] = pe(null), Qe = C(null), [K, $e] = pe(null), et = C(null), tt = C(null), q = C(/* @__PURE__ */ new Map()), nt = C(/* @__PURE__ */ new Map()), rt = C(/* @__PURE__ */ new Map()), [it, at] = pe(0), ot = x((e, t, n) => {
+		let r = e.get(t);
+		if (n === null) {
+			if (r === void 0) return;
+			e.delete(t);
+		} else {
+			if (r === n) return;
+			e.set(t, n);
+		}
+		at((e) => e + 1);
+	}, []), st = x((e, t) => ot(q.current, e, t), [ot]), ct = x((e, t) => ot(nt.current, e, t), [ot]), lt = x((e, t) => ot(rt.current, e, t), [ot]), [ut, dt] = pe("expanded");
+	le(() => {
+		if (!K || typeof ResizeObserver > "u") return;
+		let e = new ResizeObserver(() => dt(I(K)));
+		return e.observe(K), dt(I(K)), () => e.disconnect();
+	}, [K]);
+	let ft = C(null), pt = C(null), J = C(null), mt = x(() => {
+		let e = new Map(q.current), t = Qe.current?.key;
+		t !== void 0 && e.delete(t), tt.current && e.set(He, tt.current), ft.current = we(e);
+	}, []), Y = x((e) => {
+		mt(), Qe.current = e, Ze(e);
+	}, [mt]), ht = x((e) => {
+		let t = K?.ownerDocument;
+		t && e !== "" && _e(t).announce(e);
+	}, [K]), X = C({
+		layout: z,
+		widgets: R,
+		grid: j,
+		tiles: U,
+		visible: W,
+		t: k,
+		dragT: Re,
+		titles: Xe,
+		editing: V
+	});
+	X.current = {
+		layout: z,
+		widgets: R,
+		grid: j,
+		tiles: U,
+		visible: W,
+		t: k,
+		dragT: Re,
+		titles: Xe,
+		editing: V
+	};
+	let Z = x((e) => X.current.titles.get(e) ?? e, []), Q = x((e, t, n, r, i) => {
+		let a = X.current, o = E(e, a.widgets, a.grid);
+		return !Ce(o, E(a.layout, a.widgets, a.grid)) && (ft.current === null && mt(), B(o, t, r, { change: n }) ? (ht(i(o)), !0) : (ft.current = null, !1));
+	}, [
+		ht,
+		mt,
+		B
+	]), $ = x(() => I(K), [K]), gt = x((e, t) => (n) => {
+		let r = X.current, i = D(n, r.widgets, r.grid).filter((e) => !e.hidden), a = i.findIndex((t) => t.key === e), o = i[a];
+		return o === void 0 ? "" : t === "expanded" ? r.t("moved", {
+			title: Z(e),
+			row: o.y + 1,
+			column: o.x + 1
+		}) : r.t("movedInOrder", {
+			title: Z(e),
+			position: a + 1,
+			total: i.length
+		});
+	}, [Z]), _t = x((e, t) => (n) => {
+		let r = X.current, i = D(n, r.widgets, r.grid).find((t) => t.key === e);
+		return i === void 0 ? "" : r.t("resized", {
+			title: Z(e),
+			columns: t === "medium" ? i.medium : i.w,
+			rows: i.h
+		});
+	}, [Z]), vt = x((e, t, n, r) => {
+		let i = X.current, a = $(), o = Ee(i.layout, i.widgets, i.grid, e, t, a);
+		J.current = e, Q(o, n, {
+			kind: "move",
+			key: e
+		}, r, gt(e, a)) || (J.current = null);
+	}, [
+		Q,
+		gt,
+		$
+	]), yt = x((e, t, n, r) => {
+		let i = X.current, a = $(), o = je(i.layout, i.widgets, i.grid, e, t, a);
+		J.current = e, Q(o, n, {
+			kind: "resize",
+			key: e
+		}, r, _t(e, a)) || (J.current = null);
+	}, [
+		Q,
+		_t,
+		$
+	]), bt = x((e, t, n) => {
+		let r = X.current, i = r.visible.findIndex((t) => t.key === e), a = r.visible[i];
+		if (a === void 0 || !a.removable) return;
+		let o = r.visible[i + 1] ?? r.visible[i - 1];
+		J.current = o?.key ?? `${N}:add`;
+		let s = Pe(r.layout, r.widgets, r.grid, e, !0);
+		Q(s, t, {
+			kind: "hide",
+			key: e
+		}, n, () => r.t("hidden", { title: Z(e) })) || (J.current = null);
+	}, [Q, Z]), xt = x((e, t, n) => {
+		let r = X.current;
+		J.current = e;
+		let i = Pe(r.layout, r.widgets, r.grid, e, !1);
+		Q(i, t, {
+			kind: "show",
+			key: e
+		}, n, () => r.t("shown", { title: Z(e) }));
+	}, [Q, Z]), St = C(null), Ct = C(null), wt = C(!1);
+	fe(() => {
+		if (V && !wt.current) {
+			let e = X.current;
+			St.current = E(e.layout, e.widgets, e.grid), Ct.current = K?.ownerDocument.activeElement ?? null;
+		}
+		if (!V && wt.current) {
+			let e = K?.ownerDocument, t = e?.activeElement ?? null, n = t === null || t === e?.body || !t.isConnected, r = Ct.current;
+			n && r instanceof HTMLElement && r.isConnected && r.focus(), St.current = null, Ct.current = null;
+		}
+		wt.current = V;
+	}, [V, K]);
+	let Tt = x((e, t) => {
+		H(!1, e, t);
+	}, [H]), Et = x((e, t) => {
+		let n = X.current, r = St.current;
+		r !== null && Q(r, "dismiss", {
+			kind: "cancel",
+			key: null
+		}, t, () => n.t("cancelled")), H(!1, e, t);
+	}, [Q, H]), Dt = x((e, t) => {
+		let n = X.current;
+		Q(Ve, e, {
+			kind: "reset",
+			key: null
+		}, t, () => n.t("resetDone"));
+	}, [Q]), Ot = x((e, t) => {
+		let n = be(t, F(t.currentTarget));
+		if (n === null) return;
+		let r = X.current.visible.find((t) => t.key === e);
+		if (r === void 0) return;
+		t.preventDefault(), t.stopPropagation();
+		let i = t.nativeEvent;
+		n.kind === "move" && r.movable && vt(e, n.direction, "keyboard", i), n.kind === "resize" && r.resizable && yt(e, {
+			columns: n.columns,
+			rows: n.rows
+		}, "keyboard", i), n.kind === "hide" && bt(e, "remove", i);
+	}, [
+		bt,
+		vt,
+		yt
+	]), kt = C(null), At = x((e, t, n) => {
+		if (n.button !== 0 || kt.current !== null) return;
+		let r = X.current, i = r.visible.find((t) => t.key === e), a = et.current, o = q.current.get(e);
+		if (i === void 0 || !i.resizable || a === null || o === void 0) return;
+		n.preventDefault(), n.stopPropagation();
+		let s = $();
+		if (s === "compact") return;
+		let c = n.currentTarget, l = F(a) === "rtl", u = Ge(a, r.grid[s]), d = Ke(o, a, l), f = {
+			x: n.clientX,
+			y: n.clientY
+		}, p = s === "medium" ? i.medium : i.w, m = t === "start" || t === "bottom-start", ee = t === "end" || t === "bottom-end", h = t !== "start" && t !== "end", g = {
+			x: i.x,
+			y: i.y,
+			w: p,
+			h: i.h
+		}, te = E(r.layout, r.widgets, r.grid);
+		qe(o, d), Y({
+			kind: "resize",
+			key: e,
+			edge: t,
+			preview: te,
+			sizeClass: s
+		});
+		let ne = (n) => {
+			let r = n.clientX - f.x, a = n.clientY - f.y, c = l ? -r : r, ne = u.track, _ = ee ? Math.max(ne, d.inlineSize + c) : m ? Math.max(ne, d.inlineSize - c) : d.inlineSize, v = h ? Math.max(u.row, d.blockSize + a) : d.blockSize;
+			o.style.setProperty("--_dg-origin-inline-size", `${_}px`), o.style.setProperty("--_dg-origin-block-size", `${v}px`);
+			let re = m ? d.inlineSize - _ : 0;
+			o.style.setProperty("--_dg-lift-x", `${l ? -re : re}px`);
+			let y = A({
+				span: p,
+				track: u.track,
+				gap: u.columnGap,
+				travel: _ - d.inlineSize
+			}), ie = h ? A({
+				span: i.h,
+				track: u.row,
+				gap: u.rowGap,
+				travel: v - d.blockSize
+			}) : i.h, ae = m ? i.x + i.w - y : i.x;
+			if (y === g.w && ie === g.h && ae === g.x) return;
+			g = {
+				x: ae,
+				y: i.y,
+				w: y,
+				h: ie
+			};
+			let b = X.current;
+			te = Me(b.layout, b.widgets, b.grid, e, g, s), Y({
+				kind: "resize",
+				key: e,
+				edge: t,
+				preview: te,
+				sizeClass: s
+			});
+		}, _ = (t, n) => {
+			kt.current?.();
+			let r = o.getBoundingClientRect();
+			pt.current = {
+				key: e,
+				box: {
+					left: r.left,
+					top: r.top,
+					width: r.width,
+					height: r.height
+				}
+			}, Je(o), Y(null), t && Q(te, "pointer", {
+				kind: "resize",
+				key: e
+			}, n, _t(e, s));
+		}, v = (e) => _(!0, e), re = () => _(!1), y = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), _(!1));
+		}, ie = c.ownerDocument;
+		c.setPointerCapture?.(n.pointerId), c.addEventListener("pointermove", ne), c.addEventListener("pointerup", v), c.addEventListener("pointercancel", re), ie.addEventListener("keydown", y, !0), kt.current = () => {
+			kt.current = null, c.removeEventListener("pointermove", ne), c.removeEventListener("pointerup", v), c.removeEventListener("pointercancel", re), ie.removeEventListener("keydown", y, !0), c.hasPointerCapture?.(n.pointerId) && c.releasePointerCapture(n.pointerId);
+		};
+	}, [
+		Q,
+		_t,
+		Y,
+		$
+	]);
+	le(() => () => kt.current?.(), []), le(() => {
+		let e = et.current;
+		if (!K || !V || e === null) return;
+		let t = K.ownerDocument, n = () => X.current.visible.map((e) => e.key), r = null, i = null, a = "expanded", o = !1, s = null, c = (t) => {
+			let n = t.target?.closest("[data-part=\"widget\"]"), i = n?.dataset.key;
+			if (!n || i === void 0 || n.parentElement !== e) return;
+			let a = n.getBoundingClientRect();
+			r = {
+				x: t.clientX,
+				y: t.clientY,
+				grabX: t.clientX - a.left,
+				grabY: t.clientY - a.top,
+				key: i
+			};
+		};
+		e.addEventListener("pointerdown", c, !0);
+		let l = (e, t) => {
+			let n = X.current;
+			if (t.startsWith("swap:")) return Fe(n.layout, n.widgets, n.grid, e, t.slice(5));
+			let [r, i] = t.split(",").map(Number);
+			return Te(n.layout, n.widgets, n.grid, e, {
+				x: r ?? 0,
+				y: i ?? 0
+			});
+		}, u = ve({
+			document: t,
+			restoreFocus: !1,
+			preview: !1,
+			autoScroll: { axis: "y" },
+			t: (e, t) => X.current.dragT(e, t),
+			silent: [
+				"pickedUp",
+				"moved",
+				"dropped",
+				"cancelled"
+			],
+			resolveTarget: (t) => {
+				let n = u.state.items[0];
+				if (n === void 0 || r === null || s === null) return null;
+				let c = e.getBoundingClientRect();
+				if (a === "expanded") {
+					let e = t.x - r.grabX, a = t.y - r.grabY, l = X.current.visible.find((e) => e.key === n), u = l ? l.w * s.track + (l.w - 1) * s.columnGap : 0, d = o ? e + u - s.track / 2 : e + s.track / 2, f = ye({
+						x: d,
+						y: a + s.row / 2
+					}, {
+						left: c.left,
+						top: c.top,
+						width: c.width
+					}, {
+						columns: s.columns,
+						row: s.row,
+						gap: s.columnGap
+					}, o ? "rtl" : "ltr");
+					i = `${f.x},${f.y}`;
+				} else for (let [e, r] of q.current) {
+					if (e === n) continue;
+					let a = r.getBoundingClientRect();
+					if (t.x >= a.left && t.x <= a.right && t.y >= a.top && t.y <= a.bottom) {
+						i = `swap:${e}`;
+						break;
+					}
+				}
+				return i === null ? null : {
+					kind: "on",
+					container: N,
+					key: i
+				};
+			},
+			onTargetChange: ({ state: e }) => {
+				let t = e.items[0];
+				t !== void 0 && e.target?.kind === "on" && Y({
+					kind: "move",
+					key: t,
+					preview: l(t, e.target.key)
+				});
+			},
+			onDrop: ({ items: e, target: t, reason: n, event: r }) => {
+				let i = e[0];
+				i !== void 0 && t.kind === "on" && (J.current = null, Q(l(i, t.key), n === "keyboard" ? "keyboard" : "pointer", {
+					kind: "move",
+					key: i
+				}, r, gt(i, a)));
+			}
+		}), d = u.registerContainer({
+			key: N,
+			items: n,
+			orientation: "grid",
+			targets: ["on"],
+			element: () => e,
+			itemElement: (e) => q.current.get(e) ?? null,
+			label: () => X.current.t("editBar"),
+			itemLabel: Z
+		}), f = !1, p = null, m = (e) => {
+			f && (f = !1, e.preventDefault(), e.stopPropagation());
+		};
+		K.addEventListener("click", m, !0);
+		let ee = u.subscribe((t) => {
+			if (t.status !== "dragging") {
+				if (p !== null) {
+					let e = q.current.get(p);
+					if (e) {
+						let t = e.getBoundingClientRect();
+						pt.current = {
+							key: p,
+							box: {
+								left: t.left,
+								top: t.top,
+								width: t.width,
+								height: t.height
+							}
+						};
+					}
+					Je(e), f = t.reason === "pointer" || t.reason === null, window.setTimeout(() => {
+						f = !1;
+					}, 0), p = null, i = null, K.removeAttribute("data-gesture"), Qe.current?.kind === "move" && Y(null);
+				}
+				return;
+			}
+			let n = t.items[0];
+			if (n === void 0 || r === null) return;
+			let c = q.current.get(n);
+			c !== void 0 && (p === null && (p = n, a = I(K), o = F(e) === "rtl", s = Ge(e, X.current.grid[a]), qe(c, Ke(c, e, o)), K.setAttribute("data-gesture", ""), Y({
+				kind: "move",
+				key: n,
+				preview: E(X.current.layout, X.current.widgets, X.current.grid)
+			})), t.point !== null && (c.style.setProperty("--_dg-lift-x", `${t.point.x - r.x}px`), c.style.setProperty("--_dg-lift-y", `${t.point.y - r.y}px`)));
+		}), h = [];
+		for (let e of X.current.visible) {
+			if (!e.movable) continue;
+			let t = q.current.get(e.key);
+			if (t === void 0) continue;
+			let n = rt.current.get(e.key), r = nt.current.get(e.key);
+			n && h.push(u.attachDraggable(t, {
+				container: N,
+				key: e.key,
+				handle: () => n,
+				canDrag: (e) => e.pointerType !== "touch"
+			})), r && h.push(u.attachDraggable(t, {
+				container: N,
+				key: e.key,
+				handle: () => r,
+				delay: { touch: 0 }
+			}));
+		}
+		return () => {
+			for (let e of h) e();
+			e.removeEventListener("pointerdown", c, !0), K.removeEventListener("click", m, !0), ee(), d(), u.destroy();
+		};
+	}, [
+		K,
+		V,
+		it,
+		Q,
+		gt,
+		Y,
+		Z
+	]);
+	let jt = S(() => JSON.stringify(E(z, R, j)), [
+		z,
+		R,
+		j
+	]);
+	fe(() => {
+		if (K === null) return;
+		let e = getComputedStyle(K), t = {
+			duration: Oe(e.getPropertyValue("--slotted-duration-medium")),
+			easing: e.getPropertyValue("--slotted-easing-standard").trim() || "ease"
+		}, n = ft.current;
+		if (n !== null) {
+			ft.current = null;
+			let e = new Map(q.current), r = Qe.current?.key;
+			r !== void 0 && e.delete(r), tt.current && e.set(He, tt.current), ke(e, n, t);
+		}
+		let r = pt.current;
+		if (r !== null && Qe.current === null) {
+			pt.current = null;
+			let e = q.current.get(r.key);
+			e && Ae(e, r.box, t);
+		}
+		let i = J.current;
+		if (i === null) return;
+		J.current = null;
+		let a = i === `${N}:add` ? K.querySelector("[data-part=\"add\"]") : X.current.editing ? nt.current.get(i) : null;
+		a && a !== K.ownerDocument.activeElement && a.focus();
+	}, [
+		jt,
+		G,
+		K
+	]), de(oe, () => ({
+		get element() {
+			return K;
+		},
+		focusWidget: (e) => {
+			((X.current.editing ? nt.current.get(e) : void 0) ?? q.current.get(e)?.querySelector("a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+		},
+		commitEditing: () => Tt("programmatic"),
+		cancelEditing: () => Et("programmatic")
+	}), [
+		Et,
+		Tt,
+		K
+	]);
+	let Mt = S(() => G === null ? U : D(G.preview, R, j), [
+		G,
+		U,
+		R,
+		j
+	]), Nt = S(() => Mt.filter((e) => !e.hidden), [Mt]), Pt = S(() => {
+		let e = /* @__PURE__ */ new Map(), t = new Map(Nt.map((e, t) => [e.key, t])), n = E(z, R, j), r = (e) => !Ce(E(e, R, j), n);
+		for (let n of W) {
+			let i = Mt.find((e) => e.key === n.key) ?? n, a = G !== null && G.key === n.key, o = a && G.kind === "resize", s = (e) => V && r(Ee(z, R, j, n.key, e, ut)), c = (e, t) => V && r(je(z, R, j, n.key, {
+				columns: e,
+				rows: t
+			}, ut));
+			e.set(n.key, {
+				tile: i,
+				order: G === null ? void 0 : t.get(n.key),
+				dragging: a && G.kind === "move",
+				resizing: o,
+				edge: o ? G.edge : null,
+				readout: o ? k("size", {
+					columns: G.sizeClass === "medium" ? i.medium : i.w,
+					rows: i.h
+				}) : null,
+				can: {
+					up: s("up"),
+					down: s("down"),
+					left: s("left"),
+					right: s("right"),
+					wider: c(1, 0),
+					narrower: c(-1, 0),
+					taller: c(0, 1),
+					shorter: c(0, -1)
+				}
+			});
+		}
+		return e;
+	}, [
+		Mt,
+		Nt,
+		W,
+		G,
+		k,
+		V,
+		z,
+		R,
+		j,
+		ut
+	]), Ft = S(() => ({
+		editing: V,
+		t: k,
+		headingLevel: Be,
+		statusId: L,
+		sizeClass: ut,
+		slots: Pt,
+		registerWidget: st,
+		registerHandle: ct,
+		registerCard: lt,
+		move: vt,
+		resize: yt,
+		hide: bt,
+		onHandleKeyDown: Ot,
+		onResizePointerDown: At
+	}), [
+		V,
+		k,
+		Be,
+		L,
+		ut,
+		Pt,
+		st,
+		ct,
+		lt,
+		vt,
+		yt,
+		bt,
+		Ot,
+		At
+	]), It = U.filter((e) => e.hidden), Lt = /* @__PURE__ */ w("p", {
+		"data-part": "edit-status",
+		id: L,
+		...M ? {} : { "data-ui": "visually-hidden" },
+		children: k("editStatus")
+	}), Rt = It.length === 0 ? null : /* @__PURE__ */ T(n, { children: [/* @__PURE__ */ w(o, { render: ({ ref: n, ...r }) => /* @__PURE__ */ w(u, {
+		...r,
+		size: "sm",
+		variant: "outline",
+		tone: "secondary",
+		start: /* @__PURE__ */ w(t, { children: /* @__PURE__ */ w(e, { name: "plus" }) }),
+		render: (e) => /* @__PURE__ */ w("button", {
+			...e,
+			ref: n,
+			"data-part": "add"
+		}),
+		children: k("add")
+	}) }), /* @__PURE__ */ w(c, { children: It.map((e) => /* @__PURE__ */ w(r, {
+		onSelect: (t) => xt(e.key, t.reason === "keyboard" ? "keyboard" : "pointer", t.source),
+		children: /* @__PURE__ */ w(i, { children: Z(e.key) })
+	}, e.key)) })] }), zt = (e, t, n) => /* @__PURE__ */ w(u, {
+		size: "sm",
+		tone: e === "done" ? "accent" : "secondary",
+		variant: e === "done" ? "solid" : e === "cancel" ? "outline" : "ghost",
+		onClick: n,
+		render: (t) => /* @__PURE__ */ w("button", {
+			...t,
+			"data-part": e
+		}),
+		children: t
+	}), Bt = G === null ? null : Mt.find((e) => e.key === G.key), Vt = {
+		...De,
+		style: {
+			...xe(j),
+			...Se
+		},
+		"data-ui": "dashboard-grid",
+		"data-part": "root",
+		...V ? { "data-editing": "" } : {},
+		ref: $e,
+		children: /* @__PURE__ */ T(me, { children: [
+			V && M ? /* @__PURE__ */ T("div", {
+				"data-part": "edit-bar",
+				role: "group",
+				"aria-label": k("editBar"),
+				children: [Lt, /* @__PURE__ */ T("div", {
+					"data-part": "edit-actions",
+					children: [
+						Rt,
+						zt("reset", k("reset"), (e) => Dt(P(e), e.nativeEvent)),
+						zt("cancel", k("cancel"), (e) => Et(P(e), e.nativeEvent)),
+						zt("done", k("done"), (e) => Tt("submit", e.nativeEvent))
+					]
+				})]
+			}) : null,
+			V && !M ? Lt : null,
+			/* @__PURE__ */ T("ul", {
+				ref: et,
+				"data-part": "grid",
+				role: "list",
+				"aria-label": a,
+				"aria-labelledby": s,
+				hidden: W.length === 0 || void 0,
+				children: [W.map((e) => Ye.get(e.key)), Bt ? /* @__PURE__ */ w("li", {
+					ref: tt,
+					"data-part": "placeholder",
+					"aria-hidden": "true",
+					style: {
+						...Ie(Bt),
+						order: Nt.findIndex((e) => e.key === Bt.key)
+					}
+				}) : null]
+			}),
+			W.length === 0 ? /* @__PURE__ */ w("div", {
+				"data-part": "empty",
+				children: /* @__PURE__ */ w(ie, {
+					status: "empty",
+					reach: "section",
+					live: "polite",
+					children: /* @__PURE__ */ T(y, { children: [/* @__PURE__ */ w(re, { children: k("empty") }), V ? /* @__PURE__ */ w(_, { children: k("emptyEditing") }) : null] })
+				})
+			}) : null
+		] })
+	};
+	return /* @__PURE__ */ w(Le.Provider, {
+		value: Ft,
+		children: ce === void 0 ? /* @__PURE__ */ w("div", { ...Vt }) : ce(Vt)
+	});
+}
+//#endregion
+//#region src/dashboard-grid/dashboard-widget.tsx
+var Ye = [
+	"start",
+	"end",
+	"bottom",
+	"bottom-start",
+	"bottom-end"
+];
+function R(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+var Xe = (e) => e.reason === "keyboard" ? "keyboard" : "pointer";
+function z({ register: n, triggerRef: r, ...i }) {
+	let a = C(r);
+	a.current = r;
+	let o = x((e) => {
+		n(e), R(a.current, e);
+	}, [n]);
+	return /* @__PURE__ */ w("button", {
+		...i,
+		type: "button",
+		"data-part": "handle",
+		ref: o,
+		children: /* @__PURE__ */ w(t, { children: /* @__PURE__ */ w(e, { name: "grip-horizontal" }) })
+	});
+}
+function B({ value: l, title: ae, description: b, children: oe, headingLevel: se, defaultColumns: ce, defaultRows: le, minColumns: de, maxColumns: fe, minRows: S, maxRows: C, movable: pe, resizable: he, removable: ge, loading: _e = !1, busy: ve = !1, status: ye = "ready", skeleton: be, emptyTitle: xe, emptyDescription: Ce, emptyAction: E, errorTitle: we, errorDescription: Te, onRetry: Ee, detailHref: De, onDetail: Oe, actions: ke, footer: Ae, fill: je, size: Me, render: Ne, ref: D, style: O, ...Pe }) {
+	let k = Re("DashboardWidget"), A = k.slots.get(l), Fe = `${ue()}-title`, Le = `${Fe}-description`, j = te(), M = ne({
+		delay: j.delay ?? 0,
+		loading: _e,
+		minDuration: j.minDuration ?? 0
+	}), { registerWidget: ze, registerHandle: Be, registerCard: Ve } = k, N = x((e) => {
+		ze(l, e), R(D, e);
+	}, [
+		D,
+		ze,
+		l
+	]), He = x((e) => Ve(l, e), [Ve, l]), Ue = x((e) => Be(l, e), [Be, l]);
+	if (A === void 0) return null;
+	let { tile: P, can: F } = A, { t: I, editing: We, sizeClass: Ge } = k, Ke = `h${se ?? k.headingLevel}`, qe = { title: ae }, Je = Ge !== "expanded", L = De === void 0 ? Oe === void 0 ? null : /* @__PURE__ */ w(d, {
+		"aria-label": I("detail", qe),
+		size: "sm",
+		tone: "secondary",
+		variant: "ghost",
+		onClick: Oe,
+		render: (e) => /* @__PURE__ */ w("button", {
+			...e,
+			"data-part": "detail"
+		}),
+		children: /* @__PURE__ */ w(t, {
+			directional: !0,
+			children: /* @__PURE__ */ w(e, { name: "external" })
+		})
+	}) : /* @__PURE__ */ w(d, {
+		"aria-label": I("detail", qe),
+		size: "sm",
+		tone: "secondary",
+		variant: "ghost",
+		render: ({ type: e, disabled: t, ...n }) => /* @__PURE__ */ w("a", {
+			...n,
+			"data-part": "detail",
+			href: De,
+			onClick: Oe
+		}),
+		children: /* @__PURE__ */ w(t, {
+			directional: !0,
+			children: /* @__PURE__ */ w(e, { name: "external" })
+		})
+	}), B = (e) => (t) => k.move(l, e, Xe(t), t.source), V = (e, t) => (n) => k.resize(l, {
+		columns: e,
+		rows: t
+	}, Xe(n), n.source), H = P.resizable && Ge !== "compact", U = We && (P.movable || H || P.removable) ? /* @__PURE__ */ T(n, { children: [/* @__PURE__ */ w(o, {
+		onKeyDown: (e) => k.onHandleKeyDown(l, e),
+		render: ({ ref: e, ...t }) => /* @__PURE__ */ w(z, {
+			...t,
+			"aria-label": I("handle", qe),
+			"aria-describedby": k.statusId,
+			"aria-keyshortcuts": Se(P.removable),
+			register: Ue,
+			triggerRef: e
+		})
+	}), /* @__PURE__ */ T(c, { children: [
+		P.movable ? /* @__PURE__ */ T(me, { children: [
+			/* @__PURE__ */ T(r, {
+				disabled: !F.up,
+				onSelect: B("up"),
+				children: [/* @__PURE__ */ w(i, { children: I("moveUp") }), /* @__PURE__ */ w(s, { keys: "Alt+ArrowUp" })]
+			}),
+			/* @__PURE__ */ T(r, {
+				disabled: !F.down,
+				onSelect: B("down"),
+				children: [/* @__PURE__ */ w(i, { children: I("moveDown") }), /* @__PURE__ */ w(s, { keys: "Alt+ArrowDown" })]
+			}),
+			Je ? null : /* @__PURE__ */ T(me, { children: [/* @__PURE__ */ T(r, {
+				disabled: !F.left,
+				onSelect: B("left"),
+				children: [/* @__PURE__ */ w(i, { children: I("moveStart") }), /* @__PURE__ */ w(s, { keys: "Alt+ArrowLeft" })]
+			}), /* @__PURE__ */ T(r, {
+				disabled: !F.right,
+				onSelect: B("right"),
+				children: [/* @__PURE__ */ w(i, { children: I("moveEnd") }), /* @__PURE__ */ w(s, { keys: "Alt+ArrowRight" })]
+			})] })
+		] }) : null,
+		P.movable && H ? /* @__PURE__ */ w(a, {}) : null,
+		H ? /* @__PURE__ */ T(me, { children: [
+			/* @__PURE__ */ T(r, {
+				disabled: !F.wider,
+				onSelect: V(1, 0),
+				children: [/* @__PURE__ */ w(i, { children: I("wider") }), /* @__PURE__ */ w(s, { keys: "Shift+ArrowRight" })]
+			}),
+			/* @__PURE__ */ T(r, {
+				disabled: !F.narrower,
+				onSelect: V(-1, 0),
+				children: [/* @__PURE__ */ w(i, { children: I("narrower") }), /* @__PURE__ */ w(s, { keys: "Shift+ArrowLeft" })]
+			}),
+			/* @__PURE__ */ T(r, {
+				disabled: !F.taller,
+				onSelect: V(0, 1),
+				children: [/* @__PURE__ */ w(i, { children: I("taller") }), /* @__PURE__ */ w(s, { keys: "Shift+ArrowDown" })]
+			}),
+			/* @__PURE__ */ T(r, {
+				disabled: !F.shorter,
+				onSelect: V(0, -1),
+				children: [/* @__PURE__ */ w(i, { children: I("shorter") }), /* @__PURE__ */ w(s, { keys: "Shift+ArrowUp" })]
+			})
+		] }) : null,
+		P.removable ? /* @__PURE__ */ T(me, { children: [P.movable || H ? /* @__PURE__ */ w(a, {}) : null, /* @__PURE__ */ T(r, {
+			tone: "danger",
+			onSelect: (e) => k.hide(l, "remove", e.source),
+			children: [/* @__PURE__ */ w(i, { children: I("hide") }), /* @__PURE__ */ w(s, { keys: "Delete" })]
+		})] }) : null
+	] })] }) : null, W = (n) => /* @__PURE__ */ w("div", {
+		"data-part": "message",
+		children: /* @__PURE__ */ T(ie, {
+			status: n,
+			reach: "section",
+			align: "center",
+			live: n === "error" ? "polite" : "off",
+			children: [
+				/* @__PURE__ */ T(y, { children: [/* @__PURE__ */ w(re, { children: n === "empty" ? xe ?? I("emptyTitle") : we ?? I("errorTitle") }), (n === "empty" ? Ce : Te) === void 0 ? null : /* @__PURE__ */ w(_, { children: n === "empty" ? Ce : Te })] }),
+				n === "empty" && E !== void 0 ? /* @__PURE__ */ w(v, { children: E }) : null,
+				n === "error" && Ee !== void 0 ? /* @__PURE__ */ w(v, { children: /* @__PURE__ */ w(u, {
+					size: "sm",
+					tone: "secondary",
+					variant: "outline",
+					start: /* @__PURE__ */ w(t, { children: /* @__PURE__ */ w(e, { name: "rotate-ccw" }) }),
+					onClick: Ee,
+					render: (e) => /* @__PURE__ */ w("button", {
+						...e,
+						"data-part": "retry"
+					}),
+					children: I("retry")
+				}) }) : null
+			]
+		})
+	}), G = M ? /* @__PURE__ */ w("div", {
+		"data-part": "skeleton",
+		children: be ?? /* @__PURE__ */ w(g, { shape: "block" })
+	}) : ye === "empty" ? W("empty") : ye === "error" ? W("error") : oe, Ze = {
+		...Pe,
+		style: {
+			...Ie(P),
+			...A.order === void 0 ? {} : { order: A.order },
+			...O
+		},
+		"data-part": "widget",
+		"data-key": l,
+		"data-status": ye,
+		...M ? { "data-loading": "" } : {},
+		...P.movable ? { "data-movable": "" } : {},
+		...P.resizable ? { "data-resizable": "" } : {},
+		...A.dragging ? { "data-dragging": "" } : {},
+		...A.resizing ? { "data-resizing": "" } : {},
+		ref: N,
+		children: /* @__PURE__ */ T(me, { children: [
+			/* @__PURE__ */ T(p, {
+				fill: je,
+				size: Me,
+				render: (e) => /* @__PURE__ */ w("article", {
+					...e,
+					ref: He,
+					"aria-labelledby": Fe,
+					"aria-describedby": b === void 0 ? void 0 : Le,
+					"aria-busy": M || ve || void 0
+				}),
+				children: [
+					/* @__PURE__ */ T(m, { children: [
+						/* @__PURE__ */ w(Ke, {
+							"data-part": "title",
+							id: Fe,
+							children: ae
+						}),
+						b === void 0 ? null : /* @__PURE__ */ w("p", {
+							"data-part": "description",
+							id: Le,
+							children: b
+						}),
+						ke !== void 0 || L !== null ? /* @__PURE__ */ T(h, { children: [ke, L] }) : null
+					] }),
+					/* @__PURE__ */ T(ee, { children: [ve && !M ? /* @__PURE__ */ w("span", {
+						"data-part": "busy-indicator",
+						"aria-hidden": "true"
+					}) : null, G] }),
+					Ae === void 0 ? null : /* @__PURE__ */ w(f, { children: Ae })
+				]
+			}),
+			U,
+			We && H ? Ye.map((e) => /* @__PURE__ */ w("span", {
+				"data-part": "resize-handle",
+				"data-edge": e,
+				...A.edge === e ? { "data-active": "" } : {},
+				"aria-hidden": "true",
+				onPointerDown: (t) => k.onResizePointerDown(l, e, t)
+			}, e)) : null,
+			A.readout === null ? null : /* @__PURE__ */ w("span", {
+				"data-part": "size-readout",
+				"data-edge": A.edge ?? void 0,
+				"aria-hidden": "true",
+				children: A.readout
+			})
+		] })
+	};
+	return Ne === void 0 ? /* @__PURE__ */ w("li", { ...Ze }) : Ne(Ze);
+}
+//#endregion
+//#region src/dashboard-grid/use-persisted-dashboard-layout.ts
+var V = [];
+function H() {
+	try {
+		return typeof window > "u" ? null : window.localStorage;
+	} catch {
+		return null;
+	}
+}
+function U({ key: e, storage: t, defaultLayout: n = V }) {
+	let r = S(() => t === void 0 ? H() : t, [t]), [i, a] = pe(() => {
+		let t;
+		try {
+			t = r?.getItem(e) ?? null;
+		} catch {
+			t = null;
+		}
+		return (t === null ? null : De(t)) ?? n;
+	});
+	return {
+		layout: i,
+		onLayoutChange: x((t) => {
+			a(t);
+			try {
+				r?.setItem(e, O(t));
+			} catch {}
+		}, [e, r]),
+		clear: x(() => {
+			a(n);
+			try {
+				r?.removeItem(e);
+			} catch {}
+		}, [
+			n,
+			e,
+			r
+		])
+	};
+}
+//#endregion
+export { Be as a, j as i, B as n, ze as o, L as r, U as t };