@box-kite/react 2.2.7 → 2.2.9

package/components/dashboard.mjs

@@ -1,14 +1,15 @@
 "use client";
-import { d as e } from "../platform.mjs";
+import { p as e } from "../platform.mjs";
 import t from "../box.mjs";
 import { a as n, i as r, o as i } from "../behavior.mjs";
 import { t as a } from "../dashboardSchema.mjs";
-import { Circle as o, Path as s, Svg as c } from "./svg.mjs";
-import l from "./visuallyHidden.mjs";
-import { createContext as u, useContext as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { i as o, r as s } from "../reporting.mjs";
+import { Circle as c, Path as l, Svg as u } from "./svg.mjs";
+import d from "./visuallyHidden.mjs";
+import { createContext as f, useContext as p, useId as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/utils/dashboard/dashboardUtils.ts
-var v;
+var b;
 (function(e) {
 	let t = e.VERSION = 1, n = e.MIN_COLUMNS = 1, r = e.MAX_COLUMNS = 24;
 	function i(e, t, n) {
@@ -271,34 +272,34 @@ var v;
 		};
 	}
 	e.parse = E, e.SCHEMA = a;
-})(v ||= {});
-var y = v, b = [
+})(b ||= {});
+var x = b, S = [
 	"xs",
 	"sm",
 	"md",
 	"lg",
 	"xl",
 	"xxl"
-], x = [
+], C = [
 	"h1",
 	"h2",
 	"h3",
 	"h4",
 	"h5",
 	"h6"
-], S = u(null);
-function C(e, t, n) {
+], w = f(null);
+function T(e, t, n) {
 	return Math.min(Math.max(e, t), n);
 }
-function w(e) {
-	if (typeof e == "number") return [{ count: C(Math.round(e), y.MIN_COLUMNS, y.MAX_COLUMNS) }];
-	let t = b.filter((t) => typeof e[t] == "number").map((t) => ({
+function E(e) {
+	if (typeof e == "number") return [{ count: T(Math.round(e), x.MIN_COLUMNS, x.MAX_COLUMNS) }];
+	let t = S.filter((t) => typeof e[t] == "number").map((t) => ({
 		size: t,
-		count: C(Math.round(e[t]), y.MIN_COLUMNS, y.MAX_COLUMNS)
+		count: T(Math.round(e[t]), x.MIN_COLUMNS, x.MAX_COLUMNS)
 	}));
 	return t.length > 0 ? t : [{ count: 12 }];
 }
-function T(e) {
+function D(e) {
 	return {
 		gridColumnStart: e.x + 1,
 		gridColumnEnd: e.x + 1 + e.w,
@@ -306,10 +307,10 @@ function T(e) {
 		gridRowEnd: e.y + 1 + e.h
 	};
 }
-function E(e) {
+function O(e) {
 	return `max${e[0].toUpperCase()}${e.slice(1)}`;
 }
-function D(e, t) {
+function ee(e, t) {
 	let n = t ? -1 : 1;
 	if (e === "ArrowLeft") return {
 		x: -n,
@@ -328,39 +329,39 @@ function D(e, t) {
 		y: 1
 	};
 }
-function O(e) {
+function k(e) {
 	return `column ${e.x + 1}, row ${e.y + 1}`;
 }
-function k(e) {
+function A(e) {
 	return `${e.w} ${e.w === 1 ? "column" : "columns"} by ${e.h} ${e.h === 1 ? "row" : "rows"}`;
 }
-function A(a) {
-	let { children: o, layout: s, defaultLayout: c, onLayoutChange: u, onLayoutCommit: d, columns: v = {
+function j(a) {
+	let { children: c, layout: l, defaultLayout: u, onLayoutChange: f, onLayoutCommit: p, columns: b = {
 		xs: 1,
 		md: 6,
 		xxl: 12
-	}, rowHeight: x = 24, editable: C = !1, label: A, labelledBy: j, props: M, ...N } = a, P = m(null), [F, I] = h(null), [L, R] = h(null), [ee, z] = h(""), B = `${f()}-dashboard`, [V, te] = r({
-		value: s,
-		defaultValue: c ?? {
-			version: y.VERSION,
+	}, rowHeight: C = 24, editable: T = !1, label: j, labelledBy: M, props: N, ...P } = a, F = g(null), [I, L] = _(null), [R, z] = _(null), [te, B] = _(""), V = `${m()}-dashboard`, [H, ne] = r({
+		value: l,
+		defaultValue: u ?? {
+			version: x.VERSION,
 			columns: 12,
 			items: []
 		},
-		onChange: u
-	}), H = p(() => y.normalize(V), [V]), U = i(H), W = n(d), ne = typeof v == "number" ? String(v) : b.map((e) => v[e] ?? "").join(), G = p(() => w(v), [ne]), K = G[G.length - 1], q = p(() => {
-		let e = y.ranks(H), t = /* @__PURE__ */ new Map();
-		for (let n of G) {
-			let r = n.count === K.count ? H : y.project(H, n.count), i = K.count / n.count;
+		onChange: f
+	}), U = h(() => x.normalize(H), [H]), W = i(U), G = s(p, "dashboard", "layoutCommit"), re = typeof b == "number" ? String(b) : S.map((e) => b[e] ?? "").join(), K = h(() => E(b), [re]), q = K[K.length - 1], J = h(() => {
+		let e = x.ranks(U), t = /* @__PURE__ */ new Map();
+		for (let n of K) {
+			let r = n.count === q.count ? U : x.project(U, n.count), i = q.count / n.count;
 			for (let a of r.items) {
 				let r = t.get(a.id) ?? {
 					order: e.get(a.id) ?? 0,
 					fixed: a.fixed === !0
-				}, o = T({
+				}, o = D({
 					...a,
 					x: Math.round(a.x * i),
 					w: Math.round((a.x + a.w) * i) - Math.round(a.x * i)
 				});
-				n === G[0] ? r.placement = o : r.query = {
+				n === K[0] ? r.placement = o : r.query = {
 					...r.query,
 					[n.size]: o
 				}, t.set(a.id, r);
@@ -368,145 +369,151 @@ function A(a) {
 		}
 		return t;
 	}, [
-		H,
-		G,
-		K.count
-	]), J = n((e, t) => {
-		y.same(e, U.current) || te(e, t);
-	}), re = (e, t) => {
-		let n = e.getBoundingClientRect(), r = P.current, i = r && typeof getComputedStyle == "function" ? getComputedStyle(r) : void 0, a = Number.parseFloat(i?.columnGap ?? "") || 0, o = Number.parseFloat(i?.rowGap ?? "") || 0;
+		U,
+		K,
+		q.count
+	]), Y = n((e, t) => {
+		x.same(e, W.current) || ne(e, t);
+	}), ie = (e, t) => {
+		let n = e.getBoundingClientRect(), r = F.current, i = r && typeof getComputedStyle == "function" ? getComputedStyle(r) : void 0, a = Number.parseFloat(i?.columnGap ?? "") || 0, o = Number.parseFloat(i?.rowGap ?? "") || 0;
 		return {
 			x: (n.width + a) / t.w,
 			y: (n.height + o) / t.h
 		};
-	}, ie = (e) => e instanceof Element ? e.closest("[data-widget-id]") : null, Y = (e, t, n, r) => {
-		let i = e.kind === "move" ? y.moveTo(U.current, e.id, t, n) : y.resizeTo(U.current, e.id, t, n);
-		return J(i, {
+	}, ae = (e) => e instanceof Element ? e.closest("[data-widget-id]") : null, X = (e, t, n, r) => {
+		let i = e.kind === "move" ? x.moveTo(W.current, e.id, t, n) : x.resizeTo(W.current, e.id, t, n);
+		return Y(i, {
 			reason: e.kind,
 			event: r
 		}), i;
-	}, X = n((t, n, r, i) => {
-		let a = y.itemOf(U.current, n), o = ie(t.currentTarget);
-		!C || t.button !== 0 || t.defaultPrevented || !a || a.fixed || !o || (t.preventDefault(), t.currentTarget.setPointerCapture?.(t.pointerId), t.currentTarget.focus(), I({
+	}, Z = n((t, n, r, i) => {
+		let a = x.itemOf(W.current, n), o = ae(t.currentTarget);
+		!T || t.button !== 0 || t.defaultPrevented || !a || a.fixed || !o || (t.preventDefault(), t.currentTarget.setPointerCapture?.(t.pointerId), t.currentTarget.focus(), L({
 			id: n,
 			kind: i,
 			name: r,
 			origin: a,
-			before: U.current,
+			before: W.current,
 			pointer: {
 				id: t.pointerId,
 				x: t.clientX,
 				y: t.clientY,
-				step: re(o, a),
+				step: ie(o, a),
 				rtl: e(o)
 			}
 		}));
-	}), Z = n((e, t) => {
-		if (!F?.pointer || F.id !== t) return;
-		let { x: n, y: r, step: i, rtl: a } = F.pointer, o = {
+	}), oe = n((e, t) => {
+		if (!I?.pointer || I.id !== t) return;
+		let { x: n, y: r, step: i, rtl: a } = I.pointer, o = {
 			x: e.clientX - n,
 			y: e.clientY - r
-		}, s = y.cellsMoved(a ? -o.x : o.x, o.y, i), c = F.origin, l = F.kind === "move" ? Y(F, c.x + s.columns, c.y + s.rows, e) : Y(F, c.w + s.columns, c.h + s.rows, e), u = y.itemOf(l, t);
-		if (F.kind !== "move" || !u) return;
+		}, s = x.cellsMoved(a ? -o.x : o.x, o.y, i), c = I.origin, l = I.kind === "move" ? X(I, c.x + s.columns, c.y + s.rows, e) : X(I, c.w + s.columns, c.h + s.rows, e), u = x.itemOf(l, t);
+		if (I.kind !== "move" || !u) return;
 		let d = {
 			x: (u.x - c.x) * i.x * (a ? -1 : 1),
 			y: (u.y - c.y) * i.y
 		};
-		R({ translate: `${Math.round(o.x - d.x)}px ${Math.round(o.y - d.y)}px` });
+		z({ translate: `${Math.round(o.x - d.x)}px ${Math.round(o.y - d.y)}px` });
 	}), Q = n((e, t) => {
-		if (!F?.pointer || F.id !== t) return;
-		let n = y.itemOf(U.current, t);
-		e.currentTarget.releasePointerCapture?.(F.pointer.id), I(null), R(null), W(U.current, {
-			reason: F.kind,
+		if (!I?.pointer || I.id !== t) return;
+		let n = x.itemOf(W.current, t);
+		e.currentTarget.releasePointerCapture?.(I.pointer.id), L(null), z(null), G(W.current, {
+			reason: I.kind,
 			event: e
-		}), n && z(F.kind === "move" ? `${F.name} moved to ${O(n)}.` : `${F.name} resized to ${k(n)}.`);
-	}), ae = n((e, t) => {
-		J(e.before, {
+		}), n && B(I.kind === "move" ? `${I.name} moved to ${k(n)}.` : `${I.name} resized to ${A(n)}.`);
+	}), se = o("dashboard"), ce = n((e, t) => {
+		se("grabCancel", e.id, {
+			reason: t.type === "blur" ? "blur" : "escape",
+			event: t
+		}), Y(e.before, {
 			reason: e.kind,
 			event: t
-		}), I(null), z(`${e.name} put back at ${O(e.origin)}.`);
-	}), oe = n((t, n, r, i) => {
-		if (!C || t.defaultPrevented) return;
-		let a = F && F.id === n && F.kind === i && !F.pointer ? F : void 0, o = y.itemOf(U.current, n);
+		}), L(null), B(`${e.name} put back at ${k(e.origin)}.`);
+	}), le = n((t, n, r, i) => {
+		if (!T || t.defaultPrevented) return;
+		let a = I && I.id === n && I.kind === i && !I.pointer ? I : void 0, o = x.itemOf(W.current, n);
 		if (!o) return;
 		if (!a) {
 			if (t.key !== "Enter" && t.key !== " " || o.fixed) return;
-			t.preventDefault(), I({
+			t.preventDefault(), L({
 				id: n,
 				kind: i,
 				name: r,
 				origin: o,
-				before: U.current
-			}), z(i === "move" ? `${r} picked up at ${O(o)}. Use the arrow keys to move it.` : `${r} held for resizing at ${k(o)}. Use the arrow keys to resize it.`);
+				before: W.current
+			}), se("grab", n, {
+				reason: i,
+				event: t
+			}), B(i === "move" ? `${r} picked up at ${k(o)}. Use the arrow keys to move it.` : `${r} held for resizing at ${A(o)}. Use the arrow keys to resize it.`);
 			return;
 		}
 		if (t.key === "Escape") {
-			t.preventDefault(), ae(a, t);
+			t.preventDefault(), ce(a, t);
 			return;
 		}
 		if (t.key === "Enter" || t.key === " ") {
-			t.preventDefault(), I(null), W(U.current, {
+			t.preventDefault(), L(null), G(W.current, {
 				reason: i,
 				event: t
-			}), z(i === "move" ? `${r} dropped at ${O(o)}.` : `${r} resized to ${k(o)}.`);
+			}), B(i === "move" ? `${r} dropped at ${k(o)}.` : `${r} resized to ${A(o)}.`);
 			return;
 		}
-		let s = D(t.key, e(t.currentTarget));
+		let s = ee(t.key, e(t.currentTarget));
 		if (!s) return;
 		t.preventDefault();
-		let c = i === "move" ? Y(a, o.x + s.x, o.y + s.y, t) : Y(a, o.w + s.x, o.h + s.y, t), l = y.itemOf(c, n);
-		l && z(i === "move" ? `${r}, ${O(l)}.` : `${r}, ${k(l)}.`);
-	}), se = n((e, t, n) => {
-		F && F.id === t && F.kind === n && !F.pointer && ae(F, e);
-	}), ce = p(() => ({
-		editable: C,
-		placementOf: (e) => q.get(e),
-		heldOf: (e) => F && F.id === e ? F : void 0,
-		offsetOf: (e) => F && F.id === e && L ? L : void 0,
-		outsideAuthoring: K.size ? { [E(K.size)]: { display: "none" } } : void 0,
-		instructionsId: B,
+		let c = i === "move" ? X(a, o.x + s.x, o.y + s.y, t) : X(a, o.w + s.x, o.h + s.y, t), l = x.itemOf(c, n);
+		l && B(i === "move" ? `${r}, ${k(l)}.` : `${r}, ${A(l)}.`);
+	}), ue = n((e, t, n) => {
+		I && I.id === t && I.kind === n && !I.pointer && ce(I, e);
+	}), de = h(() => ({
+		editable: T,
+		placementOf: (e) => J.get(e),
+		heldOf: (e) => I && I.id === e ? I : void 0,
+		offsetOf: (e) => I && I.id === e && R ? R : void 0,
+		outsideAuthoring: q.size ? { [O(q.size)]: { display: "none" } } : void 0,
+		instructionsId: V,
 		handleProps: (e, t, n) => ({
 			type: "button",
 			"aria-label": n === "move" ? `Move ${t}` : `Resize ${t}`,
-			"aria-pressed": !!(F && F.id === e && F.kind === n),
-			"aria-describedby": B,
-			onPointerDown: (r) => X(r, e, t, n),
-			onPointerMove: (t) => Z(t, e),
+			"aria-pressed": !!(I && I.id === e && I.kind === n),
+			"aria-describedby": V,
+			onPointerDown: (r) => Z(r, e, t, n),
+			onPointerMove: (t) => oe(t, e),
 			onPointerUp: (t) => Q(t, e),
 			onPointerCancel: (t) => Q(t, e),
-			onKeyDown: (r) => oe(r, e, t, n),
-			onBlur: (t) => se(t, e, n)
+			onKeyDown: (r) => le(r, e, t, n),
+			onBlur: (t) => ue(t, e, n)
 		})
 	}), [
-		C,
-		q,
-		F,
-		L,
-		K.size,
-		B,
-		X,
+		T,
+		J,
+		I,
+		R,
+		q.size,
+		V,
 		Z,
-		Q,
 		oe,
-		se
-	]), $ = F ? q.get(F.id) : void 0;
-	return /* @__PURE__ */ _(S.Provider, {
-		value: ce,
+		Q,
+		le,
+		ue
+	]), $ = I ? J.get(I.id) : void 0;
+	return /* @__PURE__ */ y(w.Provider, {
+		value: de,
 		children: [
-			/* @__PURE__ */ _(t, {
-				ref: P,
+			/* @__PURE__ */ y(t, {
+				ref: F,
 				component: "dashboard",
-				...N,
-				variant: [N.variant, { dragging: F !== null }],
-				vars: { "dashboard-row": `${x / 4}rem` },
-				gridTemplateColumns: K.count,
+				...P,
+				variant: [P.variant, { dragging: I !== null }],
+				vars: { "dashboard-row": `${C / 4}rem` },
+				gridTemplateColumns: q.count,
 				props: {
 					role: "list",
-					"aria-label": A,
-					"aria-labelledby": j,
-					...M
+					"aria-label": j,
+					"aria-labelledby": M,
+					...N
 				},
-				children: [o, $ && /* @__PURE__ */ g(t, {
+				children: [c, $ && /* @__PURE__ */ v(t, {
 					component: "dashboard.placeholder",
 					order: $.order,
 					cq: $.query,
@@ -517,31 +524,31 @@ function A(a) {
 					}
 				})]
 			}),
-			/* @__PURE__ */ g(l, {
+			/* @__PURE__ */ v(d, {
 				props: { role: "status" },
-				children: ee
+				children: te
 			}),
-			/* @__PURE__ */ g(l, {
-				id: B,
+			/* @__PURE__ */ v(d, {
+				id: V,
 				children: "Press Enter or Space to pick the widget up, the arrow keys to move or resize it, Enter to drop it and Escape to put it back."
 			})
 		]
 	});
 }
-function j({ kind: e }) {
-	return e === "resize" ? /* @__PURE__ */ g(c, {
+function M({ kind: e }) {
+	return e === "resize" ? /* @__PURE__ */ v(u, {
 		viewBox: "0 0 24 24",
 		width: "1rem",
 		height: "1rem",
 		rtl: { flip: "xAxis" },
 		props: { fill: "none" },
-		children: /* @__PURE__ */ g(s, {
+		children: /* @__PURE__ */ v(l, {
 			d: "M20 10 10 20M20 16l-4 4",
 			stroke: "currentColor",
 			strokeWidth: 2,
 			strokeLinecap: "round"
 		})
-	}) : /* @__PURE__ */ _(c, {
+	}) : /* @__PURE__ */ y(u, {
 		viewBox: "0 0 24 24",
 		width: "1rem",
 		height: "1rem",
@@ -549,7 +556,7 @@ function j({ kind: e }) {
 			8,
 			12,
 			16
-		].map((e) => /* @__PURE__ */ g(o, {
+		].map((e) => /* @__PURE__ */ v(c, {
 			cx: 9,
 			cy: e,
 			r: 1.4,
@@ -558,7 +565,7 @@ function j({ kind: e }) {
 			8,
 			12,
 			16
-		].map((e) => /* @__PURE__ */ g(o, {
+		].map((e) => /* @__PURE__ */ v(c, {
 			cx: 15,
 			cy: e,
 			r: 1.4,
@@ -566,13 +573,13 @@ function j({ kind: e }) {
 		}, e))]
 	});
 }
-function M() {
-	return /* @__PURE__ */ g(c, {
+function N() {
+	return /* @__PURE__ */ v(u, {
 		viewBox: "0 0 24 24",
 		width: "1rem",
 		height: "1rem",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ g(s, {
+		children: /* @__PURE__ */ v(l, {
 			d: "M20 12a8 8 0 1 1-2.6-5.9M20 4v4h-4",
 			stroke: "currentColor",
 			strokeWidth: 2,
@@ -581,110 +588,116 @@ function M() {
 		})
 	});
 }
-function N(e) {
-	let { id: n, children: r, title: i, name: a, description: o, actions: s, level: c = 3, loading: l = !1, error: u, empty: f, onRefresh: p, refreshLabel: m, props: h, ...v } = e, y = d(S), b = n === void 0 ? void 0 : y?.placementOf(n), C = n === void 0 ? void 0 : y?.heldOf(n), w = a ?? (typeof i == "string" ? i : void 0) ?? n ?? "Widget", T = y?.editable === !0 && b !== void 0 && !b.fixed, E = (e) => T && n !== void 0 ? /* @__PURE__ */ g(t, {
+function P(e) {
+	let { id: n, children: r, title: i, name: a, description: o, actions: c, level: l = 3, loading: u = !1, error: d, empty: f, onRefresh: m, refreshLabel: h, props: g, ..._ } = e, b = p(w), x = n === void 0 ? void 0 : b?.placementOf(n), S = n === void 0 ? void 0 : b?.heldOf(n), T = a ?? (typeof i == "string" ? i : void 0) ?? n ?? "Widget", E = b?.editable === !0 && x !== void 0 && !x.fixed, D = s((e, t) => m?.(), "widget", "refresh"), O = (e) => E && n !== void 0 ? /* @__PURE__ */ v(t, {
 		component: "widget.handle",
 		tag: "button",
 		variant: {
 			editable: !0,
-			grabbed: C?.kind === e,
+			grabbed: S?.kind === e,
 			corner: e === "resize"
 		},
-		cq: y?.outsideAuthoring,
-		props: y?.handleProps(n, w, e),
-		children: /* @__PURE__ */ g(j, { kind: e })
-	}) : null, D = () => l ? /* @__PURE__ */ g(t, {
+		cq: b?.outsideAuthoring,
+		props: b?.handleProps(n, T, e),
+		children: /* @__PURE__ */ v(M, { kind: e })
+	}) : null, ee = () => u ? /* @__PURE__ */ v(t, {
 		component: "widget.skeleton",
 		props: { "aria-hidden": !0 },
 		children: [
 			80,
 			100,
 			60
-		].map((e) => /* @__PURE__ */ g(t, {
+		].map((e) => /* @__PURE__ */ v(t, {
 			component: "widget.skeleton.bar",
 			width: `${e}%`
 		}, e))
-	}) : u ? /* @__PURE__ */ _(t, {
+	}) : d ? /* @__PURE__ */ y(t, {
 		component: "widget.message",
 		variant: { error: !0 },
 		props: { role: "status" },
-		children: [u, p && /* @__PURE__ */ g(t, {
+		children: [d, m && /* @__PURE__ */ v(t, {
 			tag: "button",
 			component: "widget.retry",
 			props: {
 				type: "button",
-				onClick: p
+				onClick: (e) => D(n, {
+					reason: "retry",
+					event: e
+				})
 			},
 			children: "Try again"
 		})]
-	}) : f ? /* @__PURE__ */ g(t, {
+	}) : f ? /* @__PURE__ */ v(t, {
 		component: "widget.message",
 		children: f === !0 ? "Nothing to show yet." : f
-	}) : r, O = i !== void 0 || o !== void 0 || s !== void 0 || p !== void 0 || T;
-	return /* @__PURE__ */ _(t, {
+	}) : r, k = i !== void 0 || o !== void 0 || c !== void 0 || m !== void 0 || E;
+	return /* @__PURE__ */ y(t, {
 		component: "widget",
-		...v,
-		variant: [v.variant, {
-			dragging: C?.pointer !== void 0,
-			grabbed: C !== void 0 && C.pointer === void 0
+		..._,
+		variant: [_.variant, {
+			dragging: S?.pointer !== void 0,
+			grabbed: S !== void 0 && S.pointer === void 0
 		}],
-		order: b?.order,
-		cq: b?.query,
-		...b?.placement,
+		order: x?.order,
+		cq: x?.query,
+		...x?.placement,
 		style: {
-			...n === void 0 ? void 0 : y?.offsetOf(n),
-			...v.style
+			...n === void 0 ? void 0 : b?.offsetOf(n),
+			..._.style
 		},
 		props: {
-			role: b ? "listitem" : void 0,
-			"aria-busy": l || void 0,
+			role: x ? "listitem" : void 0,
+			"aria-busy": u || void 0,
 			"data-widget-id": n,
-			...h
+			...g
 		},
 		children: [
-			O && /* @__PURE__ */ _(t, {
+			k && /* @__PURE__ */ y(t, {
 				component: "widget.header",
 				children: [
-					E("move"),
-					/* @__PURE__ */ _(t, {
+					O("move"),
+					/* @__PURE__ */ y(t, {
 						component: "widget.label",
-						children: [i !== void 0 && /* @__PURE__ */ g(t, {
+						children: [i !== void 0 && /* @__PURE__ */ v(t, {
 							component: "widget.title",
-							tag: x[c - 1],
+							tag: C[l - 1],
 							children: i
-						}), o !== void 0 && /* @__PURE__ */ g(t, {
+						}), o !== void 0 && /* @__PURE__ */ v(t, {
 							component: "widget.description",
 							children: o
 						})]
 					}),
-					p && /* @__PURE__ */ g(t, {
+					m && /* @__PURE__ */ v(t, {
 						component: "widget.handle",
 						tag: "button",
 						variant: { editable: !0 },
 						props: {
 							type: "button",
-							"aria-label": m ?? `Refresh ${w}`,
-							onClick: p
+							"aria-label": h ?? `Refresh ${T}`,
+							onClick: (e) => D(n, {
+								reason: "refresh",
+								event: e
+							})
 						},
-						children: /* @__PURE__ */ g(M, {})
+						children: /* @__PURE__ */ v(N, {})
 					}),
-					s !== void 0 && /* @__PURE__ */ g(t, {
+					c !== void 0 && /* @__PURE__ */ v(t, {
 						component: "widget.actions",
-						children: s
+						children: c
 					})
 				]
 			}),
-			/* @__PURE__ */ g(t, {
+			/* @__PURE__ */ v(t, {
 				component: "widget.body",
-				children: D()
+				children: ee()
 			}),
-			E("resize")
+			O("resize")
 		]
 	});
 }
-var P = A;
-P.displayName = "DashboardGrid";
-var F = N;
-F.displayName = "Widget";
+var F = j;
+F.displayName = "DashboardGrid";
+var I = P;
+I.displayName = "Widget";
 //#endregion
-export { y as DashboardUtils, F as Widget, P as default };
+export { x as DashboardUtils, I as Widget, F as default };

package/components/dataGrid/models/columnModel.d.ts

@@ -157,6 +157,7 @@ export default class ColumnModel<TRow> {
     /** Resize to an exact total width — where Home and End on the separator land. Does not notify. */
     resizeWidthTo: (width: number) => void;
     pinColumn: (pin?: PinPositionInput) => void;
+    private setPin;
     toggleGrouping: () => void;
     sortColumn: (sortDirection?: SortDirection) => void;
     setWidth: (width: number) => void;

package/components/dataGrid/models/gridModel.d.ts

@@ -1,4 +1,5 @@
 import { ComponentsAndVariants } from '../../../types';
+import { InteractionType } from '../../../utils/interactions/interactionChannel';
 import { ColumnFilters, DataGridCsvOptions, DataGridProps, DataGridXlsxOptions, ExportConfig, FilterValue, Key, PaginationState, PinPositionInput, SortDirection } from '../contracts/dataGridContract';
 import { default as AggregationModel } from './aggregationModel';
 import { default as ColumnModel } from './columnModel';
@@ -18,6 +19,10 @@ import { default as TreeModel } from './treeModel';
 import { default as ViewportModel } from './viewportModel';
 export { GROUPING_CELL_KEY, ROW_DETAIL_CELL_KEY, ROW_NUMBER_CELL_KEY, ROW_SELECTION_CELL_KEY } from './cellKeys';
 export declare const DEFAULT_ROW_NUMBER_COLUMN_WIDTH = 70;
+/** A change the host hears through `on<Type>` and `Box.onInteraction` hears under the same type. */
+type GridCallback = {
+    [K in keyof DataGridProps<unknown>]-?: K extends `on${infer T}` ? Uncapitalize<T> : never;
+}[keyof DataGridProps<unknown>] & InteractionType<'datagrid'>;
 export default class GridModel<TRow> {
     props: DataGridProps<TRow>;
     constructor(props: DataGridProps<TRow>, onChange?: () => void);
@@ -118,6 +123,19 @@ export default class GridModel<TRow> {
      * Get filtered data (applies external, global, then column filters)
      */
     get filteredData(): TRow[];
+    /** What the grid tells `Box.onInteraction` about a change no host callback carries; `content` names what a person typed. */
+    reportInteraction(type: InteractionType<'datagrid'>, value: unknown, reason?: string, details?: Record<string, unknown>, content?: readonly string[]): void;
+    /**
+     * A host callback and its report in one call, so a callback cannot be added without the event `Box.onInteraction` hears.
+     * `report: false` is a change the person did not make: a reset that a sort or a filter caused, a value that stayed the same.
+     */
+    fire<T extends GridCallback>(type: T, value: Parameters<NonNullable<DataGridProps<TRow>[`on${Capitalize<T>}`]>>[0], reason: string, report?: false | {
+        details?: Record<string, unknown>;
+        content?: readonly string[];
+    }): void;
+    private _batching;
+    /** Run several changes that are one action, so they report once — the caller reports the whole. */
+    quietly(changes: () => void): void;
     private fireServerStateChange;
     /** Both pager callbacks: the one carrying a reason, and the `(page, pageSize)` pair it replaces. */
     private firePaginationChange;

package/components/dataGrid/models/rangeModel.d.ts

@@ -98,7 +98,10 @@ export default class RangeModel<TRow> {
     /** A rectangle as a consumer hears about it. `values` is a call because a range can be very large. */
     rangeOf(bounds: RangeBounds): CellRange;
     private get range();
+    /** The rectangle as `Box.onInteraction` hears it: no `values()`, which would keep the whole grid alive until delivery. */
+    private get block();
     private emit;
+    private reportBlock;
     /**
      * Ctrl+C, through the browser's own copy event rather than through a keystroke: `clipboardData` is
      * writable there with no permission and no promise, and the same press on a page with text selected in