@slotted/react 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/dashboard-grid-CBMP_-JV.js

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