@box-kite/react 2.2.4 → 2.2.5

package/client.mjs

@@ -1,27 +1,45 @@
 import { l as e, u as t } from "./react-shared.mjs";
-import { l as n, t as r } from "./platform.mjs";
-import { t as i } from "./effects.mjs";
-import a from "./box.mjs";
-import o, { useCallback as s, useContext as c, useEffect as l, useLayoutEffect as u, useMemo as d, useRef as f, useState as p } from "react";
-import { applyThemeToElement as m, clearStoredTheme as h, defaultThemeName as g, documentRoot as _, getDefaultEngine as v, getSystemTheme as y, pauseTransitions as b, prepareReveal as x, readStoredTheme as S, transitionTheme as C, watchSystemTheme as w, writeStoredTheme as T } from "@box-kite/core";
-import { flushSync as E } from "react-dom";
-import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { n, t as r, u as i } from "./platform.mjs";
+import { n as a, t as o } from "./effects.mjs";
+import s from "./box.mjs";
+import c, { useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { applyThemeToElement as g, clearStoredTheme as _, defaultThemeName as v, documentRoot as y, getDefaultEngine as b, getSystemTheme as x, pauseTransitions as S, prepareReveal as C, readStoredTheme as w, transitionTheme as T, watchSystemTheme as E, writeStoredTheme as D } from "@box-kite/core";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { flushSync as A } from "react-dom";
+//#region src/react/clientRuntime.ts
+var j = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
+function M(e) {
+	if (typeof e.createContext != "function") throw Error(j);
+}
+//#endregion
+//#region src/react/componentsContext.ts
+M(c);
+var N = c.createContext(void 0);
+//#endregion
+//#region src/react/componentsProvider.tsx
+function P({ value: e, children: t }) {
+	return /* @__PURE__ */ O(N.Provider, {
+		value: e,
+		children: t
+	});
+}
+//#endregion
 //#region src/react/hooks/useVisibility.ts
-function k(e) {
-	let { node: t = null, event: r = "click", hideOnScroll: i = !1, hideOnResize: a = !1, hideOnEscape: o = !0 } = e ?? {}, [s, c] = p(!1), u = f(null);
-	return l(() => {
+function F(e) {
+	let { node: t = null, event: n = "click", hideOnScroll: r = !1, hideOnResize: a = !1, hideOnEscape: o = !0 } = e ?? {}, [s, c] = h(!1), l = m(null);
+	return d(() => {
 		function e(e) {
-			let r = t ?? u.current;
-			r && !n(e, [r]) && c(!1);
+			let n = t ?? l.current;
+			n && !i(e, [n]) && c(!1);
 		}
-		function l() {
+		function u() {
 			c(!1);
 		}
 		function d(e) {
 			e.key === "Escape" && c(!1);
 		}
 		let f = new AbortController();
-		return s && (window.addEventListener(r, e, f), o && window.addEventListener("keydown", d, f), a && window.addEventListener("resize", l, f), i && window.addEventListener("scroll", e, {
+		return s && (window.addEventListener(n, e, f), o && window.addEventListener("keydown", d, f), a && window.addEventListener("resize", u, f), r && window.addEventListener("scroll", e, {
 			signal: f.signal,
 			capture: !0
 		})), () => {
@@ -30,146 +48,142 @@ function k(e) {
 	}, [
 		t,
 		s,
-		r,
+		n,
 		o,
 		a,
-		i
+		r
 	]), [
 		s,
 		c,
-		u
+		l
 	];
 }
 //#endregion
 //#region src/react/useStyles.ts
-var A = i;
-function j(t, n) {
-	let { classNames: r, signature: i, styleElements: a } = e(t, n);
-	return A(() => {
-		v().flushSync();
+var I = o;
+function L(t, n) {
+	let { classNames: r, signature: i, styleElements: a } = e(t, n, u(N));
+	return I(() => {
+		b().flushSync();
 	}, [i ?? t]), {
 		classNames: r,
 		styleElements: a
 	};
 }
-function M(e, n) {
-	let r = e ? v().addGlobalStyles(e, n) : void 0;
-	return A(() => {
-		v().flushSync();
+function R(e, n) {
+	let r = e ? b().addGlobalStyles(e, n) : void 0;
+	return I(() => {
+		b().flushSync();
 	}, [e, n]), t(r);
 }
-var N;
+var z;
+//#endregion
+//#region src/react/theme/themeContext.ts
 (function(e) {
 	function t() {
-		v().flushSync();
+		b().flushSync();
 	}
 	e.flushSync = t;
 	function n() {
-		v().clear();
+		b().clear();
 	}
 	e.clear = n;
 	function r() {
-		return v().getStyles();
+		return b().getStyles();
 	}
 	e.getStyles = r;
 	function i() {
-		return v().getStyleTag();
+		return b().getStyleTag();
 	}
 	e.getStyleTag = i;
 	function a() {
-		return v().styleElementId;
+		return b().styleElementId;
 	}
 	e.styleElementId = a;
 	function o(e) {
-		v().configure(e);
+		b().configure(e);
 	}
 	e.configure = o;
-})(N ||= {});
-//#endregion
-//#region src/react/clientRuntime.ts
-var P = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
-function F(e) {
-	if (typeof e.createContext != "function") throw Error(P);
-}
-//#endregion
-//#region src/react/theme/themeContext.ts
-F(o);
-var I = o.createContext({
+})(z ||= {}), M(c);
+var B = c.createContext({
 	theme: "",
 	setTheme: () => {}
 });
 //#endregion
 //#region src/react/theme/theme.tsx
-function L(e) {
-	let { children: t, theme: n, use: r = "local", storageKey: o, globalStyles: c, viewTransition: d } = e, v = M(r === "global" ? c : void 0, "html"), [k, A] = p(n ?? g), [j, N] = p(n !== void 0), P = f(null), F = f(k), L = f(null), R = f(void 0), z = s((e) => {
+function V(e) {
+	let { theme: t, use: n = "local", storageKey: r, globalStyles: i, viewTransition: a, components: c } = e, u = c ? /* @__PURE__ */ O(P, {
+		value: c,
+		children: e.children
+	}) : e.children, p = R(n === "global" ? i : void 0, "html"), [b, j] = h(t ?? v), [M, N] = h(t !== void 0), F = m(null), I = m(b), L = m(null), z = m(void 0), V = l((e) => {
 		let t = () => {
-			e === null ? (o && h(o), N(!1)) : (o && T(o, e), A(e), N(!0));
+			e === null ? (r && _(r), N(!1)) : (r && D(r, e), j(e), N(!0));
 		};
-		if (d) {
-			let e = C(() => E(t), d === "reveal" ? "reveal" : "fade");
-			R.current = e.finished, e.finished.then(() => R.current = void 0, () => R.current = void 0);
+		if (a) {
+			let e = T(() => A(t), a === "reveal" ? "reveal" : "fade");
+			z.current = e.finished, e.finished.then(() => z.current = void 0, () => z.current = void 0);
 		} else t();
-	}, [o, d]), B = d === "reveal";
-	l(() => B ? x() : void 0, [B]);
-	let [V, H] = p(n);
-	return n !== V && (H(n), n === void 0 ? N(!1) : (A(n), N(!0))), u(() => {
-		if (j) return;
-		let e = o ? S(o) : null, t = e ?? y();
-		if (t !== F.current && (P.current = t), A(t), e) {
+	}, [r, a]), H = a === "reveal";
+	d(() => H ? C() : void 0, [H]);
+	let [U, W] = h(t);
+	return t !== U && (W(t), t === void 0 ? N(!1) : (j(t), N(!0))), f(() => {
+		if (M) return;
+		let e = r ? w(r) : null, t = e ?? x();
+		if (t !== I.current && (F.current = t), j(t), e) {
 			N(!0);
 			return;
 		}
-		return w(A);
-	}, [j, o]), i(() => {
-		k !== F.current && (L.current ??= b());
-	}, [k]), u(() => {
-		if (F.current = k, P.current !== null && P.current !== k) return;
-		P.current = null;
+		return E(j);
+	}, [M, r]), o(() => {
+		b !== I.current && (L.current ??= S());
+	}, [b]), f(() => {
+		if (I.current = b, F.current !== null && F.current !== b) return;
+		F.current = null;
 		let e = L.current;
 		L.current = null;
-		let t = r === "global" ? _() : null, n = t ? m(t, k) : void 0;
-		return e?.(R.current), n;
-	}, [k, r]), r === "local" ? /* @__PURE__ */ O(I.Provider, {
+		let t = n === "global" ? y() : null, r = t ? g(t, b) : void 0;
+		return e?.(z.current), r;
+	}, [b, n]), n === "local" ? /* @__PURE__ */ k(B.Provider, {
 		value: {
-			theme: k,
-			setTheme: z
+			theme: b,
+			setTheme: V
 		},
-		children: [v, /* @__PURE__ */ D(a, {
-			className: k,
-			props: { "data-theme": k },
-			children: t
+		children: [p, /* @__PURE__ */ O(s, {
+			className: b,
+			props: { "data-theme": b },
+			children: u
 		})]
-	}) : /* @__PURE__ */ O(I.Provider, {
+	}) : /* @__PURE__ */ k(B.Provider, {
 		value: {
-			theme: k,
-			setTheme: z
+			theme: b,
+			setTheme: V
 		},
-		children: [v, t]
+		children: [p, u]
 	});
 }
 (function(e) {
 	function t() {
-		let { theme: e, setTheme: t } = c(I);
+		let { theme: e, setTheme: t } = u(B);
 		return [e, t];
 	}
 	e.useTheme = t;
-})(L ||= {});
-var R = L, z = /* @__PURE__ */ new WeakMap();
-function B(e) {
-	let t = z.get(e);
-	return t || (t = /* @__PURE__ */ new Map(), z.set(e, t)), t;
+})(V ||= {});
+var H = V, U = /* @__PURE__ */ new WeakMap();
+function W(e) {
+	let t = U.get(e);
+	return t || (t = /* @__PURE__ */ new Map(), U.set(e, t)), t;
 }
-function V(e = !0) {
-	let [t] = R.useTheme(), n = d(() => {
+function G(e = !0) {
+	let [t] = H.useTheme(), n = p(() => {
 		if (!e) return null;
 		let t = r();
 		if (!t) return null;
 		let n = "box-kite-portal", i = t.getElementById(n);
 		return i || (i = document.createElement("div"), i.id = n, document.body.appendChild(i)), i;
 	}, [e]);
-	return u(() => {
+	return f(() => {
 		if (!t || !n) return;
-		let e = B(n), r = e.get(t) ?? 0;
+		let e = W(n), r = e.get(t) ?? 0;
 		return e.set(t, r + 1), r === 0 && n.classList.add(t), () => {
 			let r = (e.get(t) ?? 1) - 1;
 			r <= 0 ? (e.delete(t), n.classList.remove(t)) : e.set(t, r);
@@ -177,4 +191,16 @@ function V(e = !0) {
 	}, [n, t]), n;
 }
 //#endregion
-export { k as a, j as i, R as n, N as r, V as t };
+//#region src/react/dialog/useScrollLock.ts
+var K = 0;
+function q(e) {
+	let { classNames: t, styleElements: r } = L({ overflow: "hidden" }, !1), i = t.slice(1).join(" ");
+	return a(() => {
+		let t = n();
+		if (!(!e || !t || !i)) return K += 1, t.classList.add(i), () => {
+			--K, K === 0 && t.classList.remove(i);
+		};
+	}, [e, i]), r;
+}
+//#endregion
+export { L as a, z as i, G as n, F as o, H as r, P as s, q as t };

package/components/dashboard.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../dashboardSchema.cjs"),i=require("./svg.cjs"),a=require("./visuallyHidden.cjs");let o=require("react"),s=require("react/jsx-runtime");var c;(function(e){let t=e.VERSION=1,n=e.MIN_COLUMNS=1,i=e.MAX_COLUMNS=24;function a(e,t,n){return Math.min(Math.max(e,t),n)}function o(e,t){return typeof e==`number`&&Number.isFinite(e)?Math.round(e):t}function s(e,t){return e.x<t.x+t.w&&e.x+e.w>t.x&&e.y<t.y+t.h&&e.y+e.h>t.y}e.overlaps=s;function c(e,t){return e.find(e=>e.id!==t.id&&s(e,t))}function l(e,t){let n=Math.min(e.maxW??t,t),r=a(o(e.w,1),Math.max(1,Math.min(e.minW??1,n)),Math.max(1,n)),i=a(o(e.h,1),Math.max(1,e.minH??1),Math.max(1,e.maxH??2**53-1));return{...e,w:r,h:i,x:a(o(e.x,0),0,t-r),y:Math.max(o(e.y,0),0)}}function u(e,t){return e.y-t.y||e.x-t.x}function d(e,t){let r=a(o(t,12),n,i),s=e.map(e=>l(e,r)),d=e=>+!e.fixed,f=[...s].sort((e,t)=>d(e)-d(t)||u(e,t)),p=[];for(let e of f){if(e.fixed){p.push(e);continue}let t={...e};for(;t.y>0&&!c(p,{...t,y:t.y-1});)t.y--;let n=c(p,t);for(;n;)t.y=n.y+n.h,n=c(p,t);p.push(t)}return p.sort(u)}e.resolve=d;function f(e){let r=a(o(e.columns,12),n,i);return{version:t,columns:r,items:d(e.items,r)}}e.normalize=f;function p(e,t){return e.items.find(e=>e.id===t)}e.itemOf=p;function m(e){return new Map(e.items.map((e,t)=>[e.id,t]))}e.ranks=m;function h(e,t){let n=n=>!s(t,n)&&!e.some(e=>e.id!==n.id&&e.id!==t.id&&s(e,n));return e.map(e=>{if(e.id===t.id)return t;if(e.fixed===!0||!s(e,t))return e;let r={...e,y:Math.max(t.y-e.h,0)};return n(r)?r:{...e,y:t.y+t.h}})}function g(e,t,r,s){let c=p(e,t);if(!c||c.fixed)return e;let u=l({...c,x:r,y:s},a(o(e.columns,12),n,i));return f({...e,items:h(e.items,u)})}e.moveTo=g;function _(e,t,n,r){let i=p(e,t);if(!i||i.fixed)return e;let a=e.items.map(e=>e.id===t?{...e,w:n,h:r}:e);return f({...e,items:a})}e.resizeTo=_;function v(e,t){let n=e.items.reduce((e,t)=>Math.max(e,t.y+t.h),0);return f({...e,items:[...e.items,{x:0,y:n,...t}]})}e.add=v;function y(e,t){return f({...e,items:e.items.filter(e=>e.id!==t)})}e.remove=y;function b(e,r){let s=a(o(r,12),n,i);if(s===e.columns)return f(e);let c=s/e.columns,l=e=>e===void 0?void 0:a(Math.max(1,Math.round(e*c)),1,s),u=e.items.map(e=>{let t=a(Math.max(1,Math.round(e.w*c)),1,s);return{...e,w:t,x:a(Math.floor(e.x*c),0,s-t),minW:l(e.minW),maxW:l(e.maxW)}});return f({version:t,columns:s,items:u})}e.project=b;function x(e,t){return e===t?!0:e.columns!==t.columns||e.items.length!==t.items.length?!1:e.items.every((e,n)=>{let r=t.items[n];return e.id===r.id&&e.x===r.x&&e.y===r.y&&e.w===r.w&&e.h===r.h})}e.same=x;function S(e,t,n){return{columns:n.x>0?Math.round(e/n.x):0,rows:n.y>0?Math.round(t/n.y):0}}e.cellsMoved=S;function C(e){return typeof e==`string`&&e.length>0}function w(e){return typeof e==`number`&&Number.isFinite(e)}function T(e,t,n){if(typeof e!=`object`||!e||Array.isArray(e)){n.push({code:`invalid-item`,path:t,message:`A layout item has to be an object.`});return}let r=e;if(!C(r.id)){n.push({code:`invalid-item`,path:`${t}.id`,message:`A layout item needs an id naming the widget it places.`});return}if(!w(r.x)||!w(r.y)||!w(r.w)||!w(r.h)){n.push({code:`invalid-item`,path:t,message:`Item "${r.id}" needs numeric x, y, w and h.`});return}let i=[`minW`,`minH`,`maxW`,`maxH`].reduce((e,t)=>(w(r[t])&&(e[t]=Math.round(r[t])),e),{});return{id:r.id,x:Math.round(r.x),y:Math.round(r.y),w:Math.round(r.w),h:Math.round(r.h),...i,...r.fixed===!0?{fixed:!0}:{}}}function E(e,r=12){let o=[],s={version:t,columns:r,items:[]};if(typeof e!=`object`||!e||Array.isArray(e))return o.push({code:`not-an-object`,path:``,message:`A layout has to be an object.`}),{layout:f(s),issues:o};let c=e;c.version!==t&&o.push({code:`version`,path:`version`,message:`Layout version ${String(c.version)} was read as version ${t}.`});let l=w(c.columns)?a(Math.round(c.columns),n,i):r;if(w(c.columns)||o.push({code:`columns`,path:`columns`,message:`No column count, so the layout was read in ${r}.`}),!Array.isArray(c.items))return o.push({code:`items`,path:`items`,message:`A layout needs an items array.`}),{layout:f({...s,columns:l}),issues:o};let u=new Set,d=c.items.reduce((e,t,n)=>{let r=T(t,`items.${n}`,o);return r?u.has(r.id)?(o.push({code:`duplicate-id`,path:`items.${n}.id`,message:`Two items are called "${r.id}"; the second was dropped.`}),e):(u.add(r.id),e.push(r),e):e},[]);return{layout:f({version:t,columns:l,items:d}),issues:o}}e.parse=E,e.SCHEMA=r.t})(c||={});var l=c,u=[`xs`,`sm`,`md`,`lg`,`xl`,`xxl`],d=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],f=(0,o.createContext)(null);function p(e,t,n){return Math.min(Math.max(e,t),n)}function m(e){if(typeof e==`number`)return[{count:p(Math.round(e),l.MIN_COLUMNS,l.MAX_COLUMNS)}];let t=u.filter(t=>typeof e[t]==`number`).map(t=>({size:t,count:p(Math.round(e[t]),l.MIN_COLUMNS,l.MAX_COLUMNS)}));return t.length>0?t:[{count:12}]}function h(e){return{gridColumnStart:e.x+1,gridColumnEnd:e.x+1+e.w,gridRowStart:e.y+1,gridRowEnd:e.y+1+e.h}}function g(e){return`max${e[0].toUpperCase()}${e.slice(1)}`}function _(e,t){let n=t?-1:1;if(e===`ArrowLeft`)return{x:-n,y:0};if(e===`ArrowRight`)return{x:n,y:0};if(e===`ArrowUp`)return{x:0,y:-1};if(e===`ArrowDown`)return{x:0,y:1}}function v(e){return`column ${e.x+1}, row ${e.y+1}`}function y(e){return`${e.w} ${e.w===1?`column`:`columns`} by ${e.h} ${e.h===1?`row`:`rows`}`}function b(r){let{children:i,layout:c,defaultLayout:d,onLayoutChange:p,onLayoutCommit:b,columns:x={xs:1,md:6,xxl:12},rowHeight:S=24,editable:C=!1,label:w,labelledBy:T,props:E,...D}=r,O=(0,o.useRef)(null),[k,A]=(0,o.useState)(null),[j,M]=(0,o.useState)(null),[N,P]=(0,o.useState)(``),F=`${(0,o.useId)()}-dashboard`,[I,L]=n.i({value:c,defaultValue:d??{version:l.VERSION,columns:12,items:[]},onChange:p}),R=(0,o.useMemo)(()=>l.normalize(I),[I]),z=n.o(R),B=n.a(b),V=typeof x==`number`?String(x):u.map(e=>x[e]??``).join(),H=(0,o.useMemo)(()=>m(x),[V]),U=H[H.length-1],W=(0,o.useMemo)(()=>{let e=l.ranks(R),t=new Map;for(let n of H){let r=n.count===U.count?R:l.project(R,n.count),i=U.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=h({...a,x:Math.round(a.x*i),w:Math.round((a.x+a.w)*i)-Math.round(a.x*i)});n===H[0]?r.placement=o:r.query={...r.query,[n.size]:o},t.set(a.id,r)}}return t},[R,H,U.count]),G=n.a((e,t)=>{l.same(e,z.current)||L(e,t)}),ee=(e,t)=>{let n=e.getBoundingClientRect(),r=O.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}},te=e=>e instanceof Element?e.closest(`[data-widget-id]`):null,K=(e,t,n,r)=>{let i=e.kind===`move`?l.moveTo(z.current,e.id,t,n):l.resizeTo(z.current,e.id,t,n);return G(i,{reason:e.kind,event:r}),i},q=n.a((t,n,r,i)=>{let a=l.itemOf(z.current,n),o=te(t.currentTarget);!C||t.button!==0||t.defaultPrevented||!a||a.fixed||!o||(t.preventDefault(),t.currentTarget.setPointerCapture?.(t.pointerId),t.currentTarget.focus(),A({id:n,kind:i,name:r,origin:a,before:z.current,pointer:{id:t.pointerId,x:t.clientX,y:t.clientY,step:ee(o,a),rtl:e.u(o)}}))}),J=n.a((e,t)=>{if(!k?.pointer||k.id!==t)return;let{x:n,y:r,step:i,rtl:a}=k.pointer,o={x:e.clientX-n,y:e.clientY-r},s=l.cellsMoved(a?-o.x:o.x,o.y,i),c=k.origin,u=k.kind===`move`?K(k,c.x+s.columns,c.y+s.rows,e):K(k,c.w+s.columns,c.h+s.rows,e),d=l.itemOf(u,t);if(k.kind!==`move`||!d)return;let f={x:(d.x-c.x)*i.x*(a?-1:1),y:(d.y-c.y)*i.y};M({translate:`${Math.round(o.x-f.x)}px ${Math.round(o.y-f.y)}px`})}),Y=n.a((e,t)=>{if(!k?.pointer||k.id!==t)return;let n=l.itemOf(z.current,t);e.currentTarget.releasePointerCapture?.(k.pointer.id),A(null),M(null),B(z.current,{reason:k.kind,event:e}),n&&P(k.kind===`move`?`${k.name} moved to ${v(n)}.`:`${k.name} resized to ${y(n)}.`)}),X=n.a((e,t)=>{G(e.before,{reason:e.kind,event:t}),A(null),P(`${e.name} put back at ${v(e.origin)}.`)}),Z=n.a((t,n,r,i)=>{if(!C||t.defaultPrevented)return;let a=k&&k.id===n&&k.kind===i&&!k.pointer?k:void 0,o=l.itemOf(z.current,n);if(!o)return;if(!a){if(t.key!==`Enter`&&t.key!==` `||o.fixed)return;t.preventDefault(),A({id:n,kind:i,name:r,origin:o,before:z.current}),P(i===`move`?`${r} picked up at ${v(o)}. Use the arrow keys to move it.`:`${r} held for resizing at ${y(o)}. Use the arrow keys to resize it.`);return}if(t.key===`Escape`){t.preventDefault(),X(a,t);return}if(t.key===`Enter`||t.key===` `){t.preventDefault(),A(null),B(z.current,{reason:i,event:t}),P(i===`move`?`${r} dropped at ${v(o)}.`:`${r} resized to ${y(o)}.`);return}let s=_(t.key,e.u(t.currentTarget));if(!s)return;t.preventDefault();let c=i===`move`?K(a,o.x+s.x,o.y+s.y,t):K(a,o.w+s.x,o.h+s.y,t),u=l.itemOf(c,n);u&&P(i===`move`?`${r}, ${v(u)}.`:`${r}, ${y(u)}.`)}),Q=n.a((e,t,n)=>{k&&k.id===t&&k.kind===n&&!k.pointer&&X(k,e)}),ne=(0,o.useMemo)(()=>({editable:C,placementOf:e=>W.get(e),heldOf:e=>k&&k.id===e?k:void 0,offsetOf:e=>k&&k.id===e&&j?j:void 0,outsideAuthoring:U.size?{[g(U.size)]:{display:`none`}}:void 0,instructionsId:F,handleProps:(e,t,n)=>({type:`button`,"aria-label":n===`move`?`Move ${t}`:`Resize ${t}`,"aria-pressed":!!(k&&k.id===e&&k.kind===n),"aria-describedby":F,onPointerDown:r=>q(r,e,t,n),onPointerMove:t=>J(t,e),onPointerUp:t=>Y(t,e),onPointerCancel:t=>Y(t,e),onKeyDown:r=>Z(r,e,t,n),onBlur:t=>Q(t,e,n)})}),[C,W,k,j,U.size,F,q,J,Y,Z,Q]),$=k?W.get(k.id):void 0;return(0,s.jsxs)(f.Provider,{value:ne,children:[(0,s.jsxs)(t.default,{ref:O,component:`dashboard`,...D,variant:[D.variant,{dragging:k!==null}],vars:{"dashboard-row":`${S/4}rem`},gridTemplateColumns:U.count,props:{role:`list`,"aria-label":w,"aria-labelledby":T,...E},children:[i,$&&(0,s.jsx)(t.default,{component:`dashboard.placeholder`,order:$.order,cq:$.query,...$.placement,props:{role:`presentation`,"aria-hidden":!0}})]}),(0,s.jsx)(a.default,{props:{role:`status`},children:N}),(0,s.jsx)(a.default,{id:F,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 x({kind:e}){return e===`resize`?(0,s.jsx)(i.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,rtl:{flip:`xAxis`},props:{fill:`none`},children:(0,s.jsx)(i.Path,{d:`M20 10 10 20M20 16l-4 4`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`})}):(0,s.jsxs)(i.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,children:[[8,12,16].map(e=>(0,s.jsx)(i.Circle,{cx:9,cy:e,r:1.4,fill:`currentColor`},e)),[8,12,16].map(e=>(0,s.jsx)(i.Circle,{cx:15,cy:e,r:1.4,fill:`currentColor`},e))]})}function S(){return(0,s.jsx)(i.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,s.jsx)(i.Path,{d:`M20 12a8 8 0 1 1-2.6-5.9M20 4v4h-4`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`})})}function C(e){let{id:n,children:r,title:i,name:a,description:c,actions:l,level:u=3,loading:p=!1,error:m,empty:h,onRefresh:g,refreshLabel:_,props:v,...y}=e,b=(0,o.useContext)(f),C=n===void 0?void 0:b?.placementOf(n),w=n===void 0?void 0:b?.heldOf(n),T=a??(typeof i==`string`?i:void 0)??n??`Widget`,E=b?.editable===!0&&C!==void 0&&!C.fixed,D=e=>E&&n!==void 0?(0,s.jsx)(t.default,{component:`widget.handle`,tag:`button`,variant:{editable:!0,grabbed:w?.kind===e,corner:e===`resize`},cq:b?.outsideAuthoring,props:b?.handleProps(n,T,e),children:(0,s.jsx)(x,{kind:e})}):null,O=()=>p?(0,s.jsx)(t.default,{component:`widget.skeleton`,props:{"aria-hidden":!0},children:[80,100,60].map(e=>(0,s.jsx)(t.default,{component:`widget.skeleton.bar`,width:`${e}%`},e))}):m?(0,s.jsxs)(t.default,{component:`widget.message`,variant:{error:!0},props:{role:`status`},children:[m,g&&(0,s.jsx)(t.default,{tag:`button`,component:`widget.retry`,props:{type:`button`,onClick:g},children:`Try again`})]}):h?(0,s.jsx)(t.default,{component:`widget.message`,children:h===!0?`Nothing to show yet.`:h}):r,k=i!==void 0||c!==void 0||l!==void 0||g!==void 0||E;return(0,s.jsxs)(t.default,{component:`widget`,...y,variant:[y.variant,{dragging:w?.pointer!==void 0,grabbed:w!==void 0&&w.pointer===void 0}],order:C?.order,cq:C?.query,...C?.placement,style:{...n===void 0?void 0:b?.offsetOf(n),...y.style},props:{role:C?`listitem`:void 0,"aria-busy":p||void 0,"data-widget-id":n,...v},children:[k&&(0,s.jsxs)(t.default,{component:`widget.header`,children:[D(`move`),(0,s.jsxs)(t.default,{component:`widget.label`,children:[i!==void 0&&(0,s.jsx)(t.default,{component:`widget.title`,tag:d[u-1],children:i}),c!==void 0&&(0,s.jsx)(t.default,{component:`widget.description`,children:c})]}),g&&(0,s.jsx)(t.default,{component:`widget.handle`,tag:`button`,variant:{editable:!0},props:{type:`button`,"aria-label":_??`Refresh ${T}`,onClick:g},children:(0,s.jsx)(S,{})}),l!==void 0&&(0,s.jsx)(t.default,{component:`widget.actions`,children:l})]}),(0,s.jsx)(t.default,{component:`widget.body`,children:O()}),D(`resize`)]})}var w=b;w.displayName=`DashboardGrid`;var T=C;T.displayName=`Widget`,exports.DashboardUtils=l,exports.Widget=T,exports.default=w;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../dashboardSchema.cjs"),i=require("./svg.cjs"),a=require("./visuallyHidden.cjs");let o=require("react"),s=require("react/jsx-runtime");var c;(function(e){let t=e.VERSION=1,n=e.MIN_COLUMNS=1,i=e.MAX_COLUMNS=24;function a(e,t,n){return Math.min(Math.max(e,t),n)}function o(e,t){return typeof e==`number`&&Number.isFinite(e)?Math.round(e):t}function s(e,t){return e.x<t.x+t.w&&e.x+e.w>t.x&&e.y<t.y+t.h&&e.y+e.h>t.y}e.overlaps=s;function c(e,t){return e.find(e=>e.id!==t.id&&s(e,t))}function l(e,t){let n=Math.min(e.maxW??t,t),r=a(o(e.w,1),Math.max(1,Math.min(e.minW??1,n)),Math.max(1,n)),i=a(o(e.h,1),Math.max(1,e.minH??1),Math.max(1,e.maxH??2**53-1));return{...e,w:r,h:i,x:a(o(e.x,0),0,t-r),y:Math.max(o(e.y,0),0)}}function u(e,t){return e.y-t.y||e.x-t.x}function d(e,t){let r=a(o(t,12),n,i),s=e.map(e=>l(e,r)),d=e=>+!e.fixed,f=[...s].sort((e,t)=>d(e)-d(t)||u(e,t)),p=[];for(let e of f){if(e.fixed){p.push(e);continue}let t={...e};for(;t.y>0&&!c(p,{...t,y:t.y-1});)t.y--;let n=c(p,t);for(;n;)t.y=n.y+n.h,n=c(p,t);p.push(t)}return p.sort(u)}e.resolve=d;function f(e){let r=a(o(e.columns,12),n,i);return{version:t,columns:r,items:d(e.items,r)}}e.normalize=f;function p(e,t){return e.items.find(e=>e.id===t)}e.itemOf=p;function m(e){return new Map(e.items.map((e,t)=>[e.id,t]))}e.ranks=m;function h(e,t){let n=n=>!s(t,n)&&!e.some(e=>e.id!==n.id&&e.id!==t.id&&s(e,n));return e.map(e=>{if(e.id===t.id)return t;if(e.fixed===!0||!s(e,t))return e;let r={...e,y:Math.max(t.y-e.h,0)};return n(r)?r:{...e,y:t.y+t.h}})}function g(e,t,r,s){let c=p(e,t);if(!c||c.fixed)return e;let u=l({...c,x:r,y:s},a(o(e.columns,12),n,i));return f({...e,items:h(e.items,u)})}e.moveTo=g;function _(e,t,n,r){let i=p(e,t);if(!i||i.fixed)return e;let a=e.items.map(e=>e.id===t?{...e,w:n,h:r}:e);return f({...e,items:a})}e.resizeTo=_;function v(e,t){let n=e.items.reduce((e,t)=>Math.max(e,t.y+t.h),0);return f({...e,items:[...e.items,{x:0,y:n,...t}]})}e.add=v;function y(e,t){return f({...e,items:e.items.filter(e=>e.id!==t)})}e.remove=y;function b(e,r){let s=a(o(r,12),n,i);if(s===e.columns)return f(e);let c=s/e.columns,l=e=>e===void 0?void 0:a(Math.max(1,Math.round(e*c)),1,s),u=e.items.map(e=>{let t=a(Math.max(1,Math.round(e.w*c)),1,s);return{...e,w:t,x:a(Math.floor(e.x*c),0,s-t),minW:l(e.minW),maxW:l(e.maxW)}});return f({version:t,columns:s,items:u})}e.project=b;function x(e,t){return e===t?!0:e.columns!==t.columns||e.items.length!==t.items.length?!1:e.items.every((e,n)=>{let r=t.items[n];return e.id===r.id&&e.x===r.x&&e.y===r.y&&e.w===r.w&&e.h===r.h})}e.same=x;function S(e,t,n){return{columns:n.x>0?Math.round(e/n.x):0,rows:n.y>0?Math.round(t/n.y):0}}e.cellsMoved=S;function C(e){return typeof e==`string`&&e.length>0}function w(e){return typeof e==`number`&&Number.isFinite(e)}function T(e,t,n){if(typeof e!=`object`||!e||Array.isArray(e)){n.push({code:`invalid-item`,path:t,message:`A layout item has to be an object.`});return}let r=e;if(!C(r.id)){n.push({code:`invalid-item`,path:`${t}.id`,message:`A layout item needs an id naming the widget it places.`});return}if(!w(r.x)||!w(r.y)||!w(r.w)||!w(r.h)){n.push({code:`invalid-item`,path:t,message:`Item "${r.id}" needs numeric x, y, w and h.`});return}let i=[`minW`,`minH`,`maxW`,`maxH`].reduce((e,t)=>(w(r[t])&&(e[t]=Math.round(r[t])),e),{});return{id:r.id,x:Math.round(r.x),y:Math.round(r.y),w:Math.round(r.w),h:Math.round(r.h),...i,...r.fixed===!0?{fixed:!0}:{}}}function E(e,r=12){let o=[],s={version:t,columns:r,items:[]};if(typeof e!=`object`||!e||Array.isArray(e))return o.push({code:`not-an-object`,path:``,message:`A layout has to be an object.`}),{layout:f(s),issues:o};let c=e;c.version!==t&&o.push({code:`version`,path:`version`,message:`Layout version ${String(c.version)} was read as version ${t}.`});let l=w(c.columns)?a(Math.round(c.columns),n,i):r;if(w(c.columns)||o.push({code:`columns`,path:`columns`,message:`No column count, so the layout was read in ${r}.`}),!Array.isArray(c.items))return o.push({code:`items`,path:`items`,message:`A layout needs an items array.`}),{layout:f({...s,columns:l}),issues:o};let u=new Set,d=c.items.reduce((e,t,n)=>{let r=T(t,`items.${n}`,o);return r?u.has(r.id)?(o.push({code:`duplicate-id`,path:`items.${n}.id`,message:`Two items are called "${r.id}"; the second was dropped.`}),e):(u.add(r.id),e.push(r),e):e},[]);return{layout:f({version:t,columns:l,items:d}),issues:o}}e.parse=E,e.SCHEMA=r.t})(c||={});var l=c,u=[`xs`,`sm`,`md`,`lg`,`xl`,`xxl`],d=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],f=(0,o.createContext)(null);function p(e,t,n){return Math.min(Math.max(e,t),n)}function m(e){if(typeof e==`number`)return[{count:p(Math.round(e),l.MIN_COLUMNS,l.MAX_COLUMNS)}];let t=u.filter(t=>typeof e[t]==`number`).map(t=>({size:t,count:p(Math.round(e[t]),l.MIN_COLUMNS,l.MAX_COLUMNS)}));return t.length>0?t:[{count:12}]}function h(e){return{gridColumnStart:e.x+1,gridColumnEnd:e.x+1+e.w,gridRowStart:e.y+1,gridRowEnd:e.y+1+e.h}}function g(e){return`max${e[0].toUpperCase()}${e.slice(1)}`}function _(e,t){let n=t?-1:1;if(e===`ArrowLeft`)return{x:-n,y:0};if(e===`ArrowRight`)return{x:n,y:0};if(e===`ArrowUp`)return{x:0,y:-1};if(e===`ArrowDown`)return{x:0,y:1}}function v(e){return`column ${e.x+1}, row ${e.y+1}`}function y(e){return`${e.w} ${e.w===1?`column`:`columns`} by ${e.h} ${e.h===1?`row`:`rows`}`}function b(r){let{children:i,layout:c,defaultLayout:d,onLayoutChange:p,onLayoutCommit:b,columns:x={xs:1,md:6,xxl:12},rowHeight:S=24,editable:C=!1,label:w,labelledBy:T,props:E,...D}=r,O=(0,o.useRef)(null),[k,A]=(0,o.useState)(null),[j,M]=(0,o.useState)(null),[N,P]=(0,o.useState)(``),F=`${(0,o.useId)()}-dashboard`,[I,L]=n.i({value:c,defaultValue:d??{version:l.VERSION,columns:12,items:[]},onChange:p}),R=(0,o.useMemo)(()=>l.normalize(I),[I]),z=n.o(R),B=n.a(b),V=typeof x==`number`?String(x):u.map(e=>x[e]??``).join(),H=(0,o.useMemo)(()=>m(x),[V]),U=H[H.length-1],W=(0,o.useMemo)(()=>{let e=l.ranks(R),t=new Map;for(let n of H){let r=n.count===U.count?R:l.project(R,n.count),i=U.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=h({...a,x:Math.round(a.x*i),w:Math.round((a.x+a.w)*i)-Math.round(a.x*i)});n===H[0]?r.placement=o:r.query={...r.query,[n.size]:o},t.set(a.id,r)}}return t},[R,H,U.count]),G=n.a((e,t)=>{l.same(e,z.current)||L(e,t)}),ee=(e,t)=>{let n=e.getBoundingClientRect(),r=O.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}},te=e=>e instanceof Element?e.closest(`[data-widget-id]`):null,K=(e,t,n,r)=>{let i=e.kind===`move`?l.moveTo(z.current,e.id,t,n):l.resizeTo(z.current,e.id,t,n);return G(i,{reason:e.kind,event:r}),i},q=n.a((t,n,r,i)=>{let a=l.itemOf(z.current,n),o=te(t.currentTarget);!C||t.button!==0||t.defaultPrevented||!a||a.fixed||!o||(t.preventDefault(),t.currentTarget.setPointerCapture?.(t.pointerId),t.currentTarget.focus(),A({id:n,kind:i,name:r,origin:a,before:z.current,pointer:{id:t.pointerId,x:t.clientX,y:t.clientY,step:ee(o,a),rtl:e.d(o)}}))}),J=n.a((e,t)=>{if(!k?.pointer||k.id!==t)return;let{x:n,y:r,step:i,rtl:a}=k.pointer,o={x:e.clientX-n,y:e.clientY-r},s=l.cellsMoved(a?-o.x:o.x,o.y,i),c=k.origin,u=k.kind===`move`?K(k,c.x+s.columns,c.y+s.rows,e):K(k,c.w+s.columns,c.h+s.rows,e),d=l.itemOf(u,t);if(k.kind!==`move`||!d)return;let f={x:(d.x-c.x)*i.x*(a?-1:1),y:(d.y-c.y)*i.y};M({translate:`${Math.round(o.x-f.x)}px ${Math.round(o.y-f.y)}px`})}),Y=n.a((e,t)=>{if(!k?.pointer||k.id!==t)return;let n=l.itemOf(z.current,t);e.currentTarget.releasePointerCapture?.(k.pointer.id),A(null),M(null),B(z.current,{reason:k.kind,event:e}),n&&P(k.kind===`move`?`${k.name} moved to ${v(n)}.`:`${k.name} resized to ${y(n)}.`)}),X=n.a((e,t)=>{G(e.before,{reason:e.kind,event:t}),A(null),P(`${e.name} put back at ${v(e.origin)}.`)}),Z=n.a((t,n,r,i)=>{if(!C||t.defaultPrevented)return;let a=k&&k.id===n&&k.kind===i&&!k.pointer?k:void 0,o=l.itemOf(z.current,n);if(!o)return;if(!a){if(t.key!==`Enter`&&t.key!==` `||o.fixed)return;t.preventDefault(),A({id:n,kind:i,name:r,origin:o,before:z.current}),P(i===`move`?`${r} picked up at ${v(o)}. Use the arrow keys to move it.`:`${r} held for resizing at ${y(o)}. Use the arrow keys to resize it.`);return}if(t.key===`Escape`){t.preventDefault(),X(a,t);return}if(t.key===`Enter`||t.key===` `){t.preventDefault(),A(null),B(z.current,{reason:i,event:t}),P(i===`move`?`${r} dropped at ${v(o)}.`:`${r} resized to ${y(o)}.`);return}let s=_(t.key,e.d(t.currentTarget));if(!s)return;t.preventDefault();let c=i===`move`?K(a,o.x+s.x,o.y+s.y,t):K(a,o.w+s.x,o.h+s.y,t),u=l.itemOf(c,n);u&&P(i===`move`?`${r}, ${v(u)}.`:`${r}, ${y(u)}.`)}),Q=n.a((e,t,n)=>{k&&k.id===t&&k.kind===n&&!k.pointer&&X(k,e)}),ne=(0,o.useMemo)(()=>({editable:C,placementOf:e=>W.get(e),heldOf:e=>k&&k.id===e?k:void 0,offsetOf:e=>k&&k.id===e&&j?j:void 0,outsideAuthoring:U.size?{[g(U.size)]:{display:`none`}}:void 0,instructionsId:F,handleProps:(e,t,n)=>({type:`button`,"aria-label":n===`move`?`Move ${t}`:`Resize ${t}`,"aria-pressed":!!(k&&k.id===e&&k.kind===n),"aria-describedby":F,onPointerDown:r=>q(r,e,t,n),onPointerMove:t=>J(t,e),onPointerUp:t=>Y(t,e),onPointerCancel:t=>Y(t,e),onKeyDown:r=>Z(r,e,t,n),onBlur:t=>Q(t,e,n)})}),[C,W,k,j,U.size,F,q,J,Y,Z,Q]),$=k?W.get(k.id):void 0;return(0,s.jsxs)(f.Provider,{value:ne,children:[(0,s.jsxs)(t.default,{ref:O,component:`dashboard`,...D,variant:[D.variant,{dragging:k!==null}],vars:{"dashboard-row":`${S/4}rem`},gridTemplateColumns:U.count,props:{role:`list`,"aria-label":w,"aria-labelledby":T,...E},children:[i,$&&(0,s.jsx)(t.default,{component:`dashboard.placeholder`,order:$.order,cq:$.query,...$.placement,props:{role:`presentation`,"aria-hidden":!0}})]}),(0,s.jsx)(a.default,{props:{role:`status`},children:N}),(0,s.jsx)(a.default,{id:F,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 x({kind:e}){return e===`resize`?(0,s.jsx)(i.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,rtl:{flip:`xAxis`},props:{fill:`none`},children:(0,s.jsx)(i.Path,{d:`M20 10 10 20M20 16l-4 4`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`})}):(0,s.jsxs)(i.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,children:[[8,12,16].map(e=>(0,s.jsx)(i.Circle,{cx:9,cy:e,r:1.4,fill:`currentColor`},e)),[8,12,16].map(e=>(0,s.jsx)(i.Circle,{cx:15,cy:e,r:1.4,fill:`currentColor`},e))]})}function S(){return(0,s.jsx)(i.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,s.jsx)(i.Path,{d:`M20 12a8 8 0 1 1-2.6-5.9M20 4v4h-4`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`})})}function C(e){let{id:n,children:r,title:i,name:a,description:c,actions:l,level:u=3,loading:p=!1,error:m,empty:h,onRefresh:g,refreshLabel:_,props:v,...y}=e,b=(0,o.useContext)(f),C=n===void 0?void 0:b?.placementOf(n),w=n===void 0?void 0:b?.heldOf(n),T=a??(typeof i==`string`?i:void 0)??n??`Widget`,E=b?.editable===!0&&C!==void 0&&!C.fixed,D=e=>E&&n!==void 0?(0,s.jsx)(t.default,{component:`widget.handle`,tag:`button`,variant:{editable:!0,grabbed:w?.kind===e,corner:e===`resize`},cq:b?.outsideAuthoring,props:b?.handleProps(n,T,e),children:(0,s.jsx)(x,{kind:e})}):null,O=()=>p?(0,s.jsx)(t.default,{component:`widget.skeleton`,props:{"aria-hidden":!0},children:[80,100,60].map(e=>(0,s.jsx)(t.default,{component:`widget.skeleton.bar`,width:`${e}%`},e))}):m?(0,s.jsxs)(t.default,{component:`widget.message`,variant:{error:!0},props:{role:`status`},children:[m,g&&(0,s.jsx)(t.default,{tag:`button`,component:`widget.retry`,props:{type:`button`,onClick:g},children:`Try again`})]}):h?(0,s.jsx)(t.default,{component:`widget.message`,children:h===!0?`Nothing to show yet.`:h}):r,k=i!==void 0||c!==void 0||l!==void 0||g!==void 0||E;return(0,s.jsxs)(t.default,{component:`widget`,...y,variant:[y.variant,{dragging:w?.pointer!==void 0,grabbed:w!==void 0&&w.pointer===void 0}],order:C?.order,cq:C?.query,...C?.placement,style:{...n===void 0?void 0:b?.offsetOf(n),...y.style},props:{role:C?`listitem`:void 0,"aria-busy":p||void 0,"data-widget-id":n,...v},children:[k&&(0,s.jsxs)(t.default,{component:`widget.header`,children:[D(`move`),(0,s.jsxs)(t.default,{component:`widget.label`,children:[i!==void 0&&(0,s.jsx)(t.default,{component:`widget.title`,tag:d[u-1],children:i}),c!==void 0&&(0,s.jsx)(t.default,{component:`widget.description`,children:c})]}),g&&(0,s.jsx)(t.default,{component:`widget.handle`,tag:`button`,variant:{editable:!0},props:{type:`button`,"aria-label":_??`Refresh ${T}`,onClick:g},children:(0,s.jsx)(S,{})}),l!==void 0&&(0,s.jsx)(t.default,{component:`widget.actions`,children:l})]}),(0,s.jsx)(t.default,{component:`widget.body`,children:O()}),D(`resize`)]})}var w=b;w.displayName=`DashboardGrid`;var T=C;T.displayName=`Widget`,exports.DashboardUtils=l,exports.Widget=T,exports.default=w;

package/components/dashboard.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { u as e } from "../platform.mjs";
+import { d 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";

package/components/dataGrid/components/dataGridList.d.ts

@@ -0,0 +1,12 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The grid drawn for a phone. A `<ul>` of items rather than a restyled `role="grid"`: a grid promises the
+ * arrow-key movement of a two-dimensional widget, and a list of items with a button in each is a list — so
+ * every value keeps its label in a `<dl>`, and each item says where it is in the whole with
+ * `aria-posinset`/`aria-setsize`.
+ */
+export default function DataGridList<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListAggregate.d.ts

@@ -0,0 +1,7 @@
+import { default as AggregateCellModel } from '../models/aggregateCellModel';
+interface Props<TRow> {
+    cell: AggregateCellModel<TRow>;
+}
+/** An aggregate inside a line of text: the column's `AggregateCell` where it has one, the value otherwise. */
+export default function DataGridListAggregate<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListFilter.d.ts

@@ -0,0 +1,7 @@
+import { default as ColumnModel } from '../models/columnModel';
+interface Props<TRow> {
+    column: ColumnModel<TRow>;
+}
+/** One column's filter, drawn for a finger: a full-width field, a native picker, chips or a checklist. */
+export default function DataGridListFilter<TRow>(props: Props<TRow>): import("react").JSX.Element | null;
+export {};

package/components/dataGrid/components/dataGridListFilterSheet.d.ts

@@ -0,0 +1,11 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The Filters button and the sheet it opens: every filterable column, one section each. A filter applies as
+ * it is set, so the list behind the sheet is already the answer, and the main button says how many rows that
+ * is — "Show 42 rows" tells a reader what closing the sheet will show before they close it.
+ */
+export default function DataGridListFilterSheet<TRow>(props: Props<TRow>): import("react").JSX.Element | null;
+export {};

package/components/dataGrid/components/dataGridListFooter.d.ts

@@ -0,0 +1,13 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+    /** How many rows are drawn — left out where groups or a tree make "of how many" a different question. */
+    shown?: number;
+}
+/**
+ * Under the items: the grand totals as one more summary block, then either the pager — when the host pages —
+ * or "Show more". A button rather than an endless scroll, so the totals and whatever follows the grid on the
+ * page stay reachable (NN/g), and a keyboard is never trapped above content that keeps arriving.
+ */
+export default function DataGridListFooter<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListGroup.d.ts

@@ -0,0 +1,13 @@
+import { default as GroupRowModel } from '../models/groupRowModel';
+interface Props<TRow> {
+    row: GroupRowModel<TRow>;
+    /** The row's version (`GridModel.rowVersion`). Not read: it is what tells the memo the row moved. */
+    version: string;
+}
+/**
+ * A group as a section header: the value, how many rows it holds, and their totals underneath. The toggle is
+ * the item's `List.Action`, so the whole header opens and closes the group.
+ */
+declare function DataGridListGroupImpl<TRow>(props: Props<TRow>): import("react").JSX.Element;
+declare const DataGridListGroup: typeof DataGridListGroupImpl;
+export default DataGridListGroup;

package/components/dataGrid/components/dataGridListItem.d.ts

@@ -0,0 +1,21 @@
+import { default as RowModel } from '../models/rowModel';
+interface Props<TRow> {
+    row: RowModel<TRow>;
+    /** Where the row sits in the grid's rows — what the record view opens at. */
+    index: number;
+    /** `aria-posinset`/`aria-setsize`: where the item is in the whole list, not in the part drawn. */
+    position?: number;
+    setSize?: number;
+    /** The row's version (`GridModel.rowVersion`). Not read: it is what tells the memo the row moved. */
+    version: string;
+}
+/**
+ * One row as a `List.Item`: a kicker, the title with one value opposite it, a subtitle, and a few labelled
+ * fields — the slots `ListModel.layout` hands out. The title is the item's `List.Action`: it opens the record
+ * view, and while the list is selecting it is the label of the row's checkbox, so a press anywhere on the
+ * item ticks it.
+ */
+declare function DataGridListItemImpl<TRow>(props: Props<TRow>): import("react").JSX.Element;
+/** Memoized on its props, so one row's selection or expansion redraws that item and not the list. */
+declare const DataGridListItem: typeof DataGridListItemImpl;
+export default DataGridListItem;

package/components/dataGrid/components/dataGridListLayout.d.ts

@@ -0,0 +1,20 @@
+import { BoxStyles } from '../../../types';
+/**
+ * The list layout's geometry, shared between its parts. The paint — colours, borders, states — is the
+ * `datagrid.list` style tree, which every engine entry carries; this is only ever in the DataGrid's chunk.
+ */
+declare namespace DataGridListLayout {
+    /** A square control a thumb can hit: 44px, the Apple and WCAG target. */
+    const ICON_BUTTON: BoxStyles;
+    /** A pill in the toolbar: Sort, Filters, Select. */
+    const PILL: BoxStyles;
+    /** One line of text that ends in an ellipsis rather than a second line. */
+    const TRUNCATE: BoxStyles;
+    /** A full-width field in a sheet: 44px tall, and 16px type so a phone does not zoom in on focus. */
+    const INPUT: BoxStyles;
+    /** A labelled value: the label small and muted over the value. */
+    const LABEL: BoxStyles;
+    /** The sheet's big buttons, at the bottom where a thumb is. */
+    const SHEET_BUTTON: BoxStyles;
+}
+export default DataGridListLayout;

package/components/dataGrid/components/dataGridListRecord.d.ts

@@ -0,0 +1,11 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * One row at a time: every column of it, a label over each value, in a sheet with a pager — the drill-in a
+ * list item leads to. The pager follows the list's own order and filters, Left/Right and a sideways swipe
+ * step it, and an editable column is edited here, through the same `def.onCellEdit` a table cell goes through.
+ */
+export default function DataGridListRecord<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListSelectionBar.d.ts

@@ -0,0 +1,11 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The selection, pinned to the bottom of the screen while there is one: how many rows are ticked and the two
+ * ways to change that in bulk. At the bottom because that is where a thumb is, and where a phone's own
+ * contextual bars put what a selection is for.
+ */
+export default function DataGridListSelectionBar<TRow>(props: Props<TRow>): import("react").JSX.Element | null;
+export {};

package/components/dataGrid/components/dataGridListSheet.d.ts

@@ -0,0 +1,30 @@
+import { DialogTrigger } from '../../dialog';
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+    open: boolean;
+    /** The trigger was pressed. */
+    onOpen?: () => void;
+    onClose: () => void;
+    title: React.ReactNode;
+    /** The button that opens it, so focus goes back there when it closes. */
+    trigger?: (trigger: DialogTrigger) => React.ReactNode;
+    /** Controls in the header between the title and the close button — the record view's pager. */
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
+    /** The record view: as tall as a long row needs. */
+    tall?: boolean;
+    /** Handlers for the scrolling body — the record view's swipe. */
+    bodyProps?: React.HTMLAttributes<HTMLDivElement>;
+    bodyRef?: React.Ref<HTMLDivElement>;
+    /** Keys anywhere in the sheet — the record view's pager. */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    children: React.ReactNode;
+}
+/**
+ * A bottom sheet: a modal `<dialog>` docked to the bottom edge, which brings the top layer, the backdrop,
+ * Escape, focus containment and focus return with it. The header is a handle — pulled down far enough, the
+ * sheet closes, the way a sheet on a phone does.
+ */
+export default function DataGridListSheet<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListSortSheet.d.ts

@@ -0,0 +1,10 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The Sort button and the sheet it opens. A list has no headers to press, so the sort is a choice of column
+ * and a choice of direction — two radio groups, applied as they are picked, since a sort is one decision.
+ */
+export default function DataGridListSortSheet<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListToolbar.d.ts

@@ -0,0 +1,10 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The list's toolbar: the title and how many rows there are, the search, and a row of pills — Sort, Filters,
+ * Select — followed by one chip per filter in force, each removable on its own.
+ */
+export default function DataGridListToolbar<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListValue.d.ts

@@ -0,0 +1,12 @@
+import { default as ColumnModel } from '../models/columnModel';
+import { default as RowModel } from '../models/rowModel';
+interface Props<TRow> {
+    row: RowModel<TRow>;
+    column: ColumnModel<TRow>;
+}
+/**
+ * One value of a row, drawn the way its column draws it in the table: through the column's own `Cell` where
+ * there is one — a badge, a sparkline, a link — so a list item and a table row never disagree.
+ */
+export default function DataGridListValue<TRow>(props: Props<TRow>): import("react").JSX.Element | null;
+export {};

package/components/dataGrid/contracts/dataGridContract.d.ts

@@ -466,6 +466,25 @@ export interface DataGridHandle {
      */
     clearEdits(): void;
 }
+/**
+ * Where a column goes in a list item, when the grid draws itself as a list. `title` is the item's name,
+ * `kicker` a small line above it (an id, a date), `subtitle` a line under it, `end` the one value opposite
+ * the title (a total, a status), `field` a labelled value, `detail` only the record view, `hidden` nowhere.
+ */
+export type ListRole = 'title' | 'kicker' | 'subtitle' | 'end' | 'field' | 'detail' | 'hidden';
+/** How the grid draws itself: a table, a list, or whichever its own width suits. */
+export type DataGridLayout = 'auto' | 'table' | 'list';
+/** The list layout's settings. */
+export interface ListConfig {
+    /** The grid's own width, in px, below which `layout: 'auto'` draws a list. Default: 576 (36rem). */
+    breakpoint?: number;
+    /** How many `field`s an item shows before the rest wait for the record view. Default: 4. */
+    fields?: number;
+    /** How many items one "Show more" adds. Default: 20. A paginated grid draws its page instead. */
+    batchSize?: number;
+    /** Whether pressing an item opens the record view, every column of one row with a pager. Default: true. */
+    recordView?: boolean;
+}
 export interface ColumnType<TRow> {
     key: Key;
     header?: string;
@@ -522,6 +541,11 @@ export interface ColumnType<TRow> {
     flexible?: boolean;
     /** Control the header context menu. false hides it entirely. Object controls individual sections. Inherits from GridDefinition.contextMenu if undefined. */
     contextMenu?: boolean | ContextMenuConfig;
+    /**
+     * Where this column goes in a list item. Default: the first column is the title, the first end-aligned one
+     * sits opposite it, the next `def.list.fields` are fields and the rest wait for the record view.
+     */
+    list?: ListRole;
 }
 export interface GridDefinition<TRow> {
     rowKey?: KeysMatching<TRow, Key> | ((rowData: TRow) => Key);
@@ -553,6 +577,14 @@ export interface GridDefinition<TRow> {
      */
     rangeSelection?: boolean;
     rowHeight?: number;
+    /**
+     * How the grid draws itself. `'auto'` (default) is a table, and a list once the grid itself is narrower
+     * than `def.list.breakpoint` — its own width rather than the viewport's, so a grid in a narrow column of
+     * a wide page reads as a list too. `'table'` and `'list'` choose one for good.
+     */
+    layout?: DataGridLayout;
+    /** The list layout's settings: the breakpoint, how many fields an item shows, the record view. */
+    list?: ListConfig;
     /** Number of visible rows. Set to 'all' to render all rows without virtualization or vertical scrollbar. */
     visibleRowsCount?: number | 'all';
     topBar?: boolean;