@box-kite/react 2.0.1 → 2.1.0

package/components/agent.mjs

@@ -0,0 +1,405 @@
+"use client";
+import e from "../box.mjs";
+import { a as t, i as n } from "../behavior.mjs";
+import { t as r } from "../identity.mjs";
+import { useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/utils/agent/agentUtils.ts
+var c;
+(function(e) {
+	let t = {
+		pending: "Pending",
+		running: "Running",
+		success: "Done",
+		error: "Failed"
+	};
+	function n(e) {
+		return t[e] ?? t.pending;
+	}
+	e.statusLabel = n;
+	let r = {
+		approved: "Approved",
+		rejected: "Rejected"
+	};
+	function i(e) {
+		return r[e] ?? "";
+	}
+	e.decisionLabel = i;
+	let a = e.VALUE_LIMIT = 2e4;
+	function o(e) {
+		if (typeof e == "string") return e;
+		try {
+			let t = JSON.stringify(e, s, 2);
+			return typeof t == "string" ? t : String(e);
+		} catch {
+			return String(e);
+		}
+	}
+	function s(e, t) {
+		return typeof t == "bigint" ? `${t}` : typeof t == "function" ? "[Function]" : t;
+	}
+	function c(e, t = a) {
+		let n = o(e);
+		return n.length <= t ? {
+			text: n,
+			truncated: 0
+		} : {
+			text: n.slice(0, t),
+			truncated: n.length - t
+		};
+	}
+	e.formatValue = c;
+	function l(e) {
+		return e != null;
+	}
+	e.hasValue = l;
+	function u(e) {
+		return `${Math.trunc(e)}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+	}
+	e.formatCount = u;
+	function d(e) {
+		if (!Number.isFinite(e) || e < 0) return "";
+		if (e < 1e3) return `${Math.round(e)}ms`;
+		let t = e / 1e3;
+		if (t < 60) return `${t < 10 ? Math.round(t * 10) / 10 : Math.round(t)}s`;
+		let n = Math.floor(t / 60);
+		return `${n}m ${Math.round(t - n * 60)}s`;
+	}
+	e.formatDuration = d;
+	let f = e.STREAM_WINDOW = 8;
+	function p(e) {
+		return {
+			settled: e,
+			segments: [],
+			nextKey: 0
+		};
+	}
+	e.initialStream = p;
+	function m(e) {
+		return e.segments.reduce((e, t) => e + t.text, e.settled);
+	}
+	e.streamText = m;
+	function h(e, t, n = f) {
+		let r = m(e);
+		if (t === r) return e;
+		if (!t.startsWith(r)) return {
+			settled: t,
+			segments: [],
+			nextKey: e.nextKey
+		};
+		let i = [...e.segments, {
+			key: e.nextKey,
+			text: t.slice(r.length)
+		}], a = Math.max(0, i.length - Math.max(0, n));
+		return {
+			settled: i.slice(0, a).reduce((e, t) => e + t.text, e.settled),
+			segments: i.slice(a),
+			nextKey: e.nextKey + 1
+		};
+	}
+	e.advanceStream = h;
+})(c ||= {});
+var l = c;
+//#endregion
+//#region src/components/agent.tsx
+function u({ part: t, open: n }) {
+	return /* @__PURE__ */ o(e, {
+		tag: "span",
+		component: t,
+		variant: { open: n },
+		props: { "aria-hidden": !0 }
+	});
+}
+var d = {
+	section: "toolCall.section",
+	label: "toolCall.label",
+	value: "toolCall.value",
+	truncated: "toolCall.truncated"
+}, f = {
+	section: "approval.section",
+	label: "approval.label",
+	value: "approval.value",
+	truncated: "approval.truncated"
+};
+function p({ parts: t, label: n, value: r, limit: i }) {
+	let { text: a, truncated: c } = l.formatValue(r, i);
+	return /* @__PURE__ */ s(e, {
+		component: t.section,
+		children: [
+			/* @__PURE__ */ o(e, {
+				component: t.label,
+				children: n
+			}),
+			/* @__PURE__ */ o(e, {
+				tag: "pre",
+				component: t.value,
+				children: a
+			}),
+			c > 0 && /* @__PURE__ */ o(e, {
+				component: t.truncated,
+				children: `${l.formatCount(c)} more characters, not shown`
+			})
+		]
+	});
+}
+function m(i) {
+	let { name: c, description: f, status: m = "pending", input: h, output: g, error: _, open: v, defaultOpen: y = !1, onOpenChange: b, collapsible: x = !0, inputLabel: S = "Input", outputLabel: C = "Output", errorLabel: w = "Error", valueLimit: T, children: E, props: D, ...O } = i, k = r("toolcall"), A = `${k}-header`, j = `${k}-body`, [M, N] = n({
+		value: v,
+		defaultValue: y,
+		onChange: b
+	}), P = t((e) => N((e) => !e, {
+		reason: "trigger",
+		event: e
+	})), F = [
+		{
+			key: "input",
+			label: S,
+			value: h
+		},
+		{
+			key: "output",
+			label: C,
+			value: g
+		},
+		{
+			key: "error",
+			label: w,
+			value: _
+		}
+	].filter((e) => l.hasValue(e.value)), I = x && (F.length > 0 || E !== void 0), L = I && M, R = /* @__PURE__ */ s(a, { children: [
+		/* @__PURE__ */ s(e, {
+			tag: "span",
+			component: "toolCall.summary",
+			children: [/* @__PURE__ */ o(e, {
+				tag: "span",
+				component: "toolCall.name",
+				children: c
+			}), f !== void 0 && /* @__PURE__ */ o(e, {
+				tag: "span",
+				component: "toolCall.description",
+				children: f
+			})]
+		}),
+		/* @__PURE__ */ s(e, {
+			tag: "span",
+			component: "toolCall.status",
+			variant: m,
+			children: [/* @__PURE__ */ o(e, {
+				tag: "span",
+				component: "toolCall.status.dot",
+				variant: { running: m === "running" },
+				props: { "aria-hidden": !0 }
+			}), l.statusLabel(m)]
+		}),
+		I && /* @__PURE__ */ o(u, {
+			part: "toolCall.arrow",
+			open: L
+		})
+	] });
+	return /* @__PURE__ */ s(e, {
+		component: "toolCall",
+		...O,
+		props: {
+			"aria-busy": m === "running" || void 0,
+			...D
+		},
+		children: [I ? /* @__PURE__ */ o(e, {
+			tag: "button",
+			component: "toolCall.header",
+			variant: { interactive: !0 },
+			id: A,
+			props: {
+				type: "button",
+				"aria-expanded": L,
+				"aria-controls": j,
+				onClick: P
+			},
+			children: R
+		}) : /* @__PURE__ */ o(e, {
+			component: "toolCall.header",
+			id: A,
+			children: R
+		}), I && /* @__PURE__ */ o(e, {
+			component: "toolCall.track",
+			variant: { closed: !L },
+			children: /* @__PURE__ */ o(e, {
+				component: "toolCall.clip",
+				children: /* @__PURE__ */ s(e, {
+					component: "toolCall.body",
+					id: j,
+					children: [F.map((e) => /* @__PURE__ */ o(p, {
+						parts: d,
+						label: e.label,
+						value: e.value,
+						limit: T
+					}, e.key)), E]
+				})
+			})
+		})]
+	});
+}
+var h = m;
+h.displayName = "ToolCallCard";
+function g(t) {
+	let { title: i, description: a, input: c, inputLabel: u = "Request", decision: d, defaultDecision: m = null, onDecisionChange: h, busy: g = !1, approveLabel: _ = "Approve", rejectLabel: v = "Reject", autoFocus: y = !1, valueLimit: b, children: x, props: S, ...C } = t, w = `${r("approval")}-title`, [T, E] = n({
+		value: d,
+		defaultValue: m,
+		onChange: h
+	}), D = (e, t) => (n) => E(e, {
+		reason: t,
+		event: n
+	});
+	return /* @__PURE__ */ s(e, {
+		component: "approval",
+		...C,
+		variant: [C.variant, {
+			approved: T === "approved",
+			rejected: T === "rejected"
+		}],
+		props: {
+			role: "group",
+			"aria-labelledby": w,
+			"aria-busy": g || void 0,
+			...S
+		},
+		children: [
+			/* @__PURE__ */ o(e, {
+				component: "approval.title",
+				id: w,
+				children: i
+			}),
+			a !== void 0 && /* @__PURE__ */ o(e, {
+				component: "approval.description",
+				children: a
+			}),
+			l.hasValue(c) && /* @__PURE__ */ o(p, {
+				parts: f,
+				label: u,
+				value: c,
+				limit: b
+			}),
+			x,
+			/* @__PURE__ */ s(e, {
+				component: "approval.footer",
+				children: [T === null && /* @__PURE__ */ s(e, {
+					component: "approval.actions",
+					children: [/* @__PURE__ */ o(e, {
+						tag: "button",
+						component: "approval.button",
+						variant: { reject: !0 },
+						disabled: g,
+						props: {
+							type: "button",
+							autoFocus: y,
+							onClick: D("rejected", "reject")
+						},
+						children: v
+					}), /* @__PURE__ */ o(e, {
+						tag: "button",
+						component: "approval.button",
+						variant: { approve: !0 },
+						disabled: g,
+						props: {
+							type: "button",
+							onClick: D("approved", "approve")
+						},
+						children: _
+					})]
+				}), /* @__PURE__ */ o(e, {
+					component: "approval.decision",
+					variant: {
+						approved: T === "approved",
+						rejected: T === "rejected"
+					},
+					props: { role: "status" },
+					children: T === null ? null : l.decisionLabel(T)
+				})]
+			})
+		]
+	});
+}
+var _ = g;
+_.displayName = "ApprovalCard";
+function v(i) {
+	let { label: a, children: c, open: d, defaultOpen: f = !1, onOpenChange: p, streaming: m = !1, duration: h, props: g, ..._ } = i, v = r("reasoning"), y = `${v}-trigger`, b = `${v}-body`, [x, S] = n({
+		value: d,
+		defaultValue: f,
+		onChange: p
+	}), C = t((e) => S((e) => !e, {
+		reason: "trigger",
+		event: e
+	})), w = h === void 0 ? "" : l.formatDuration(h);
+	return /* @__PURE__ */ s(e, {
+		component: "reasoning",
+		..._,
+		props: {
+			"aria-busy": m || void 0,
+			...g
+		},
+		children: [/* @__PURE__ */ s(e, {
+			tag: "button",
+			component: "reasoning.trigger",
+			variant: { streaming: m },
+			id: y,
+			props: {
+				type: "button",
+				"aria-expanded": x,
+				"aria-controls": b,
+				onClick: C
+			},
+			children: [
+				/* @__PURE__ */ o(u, {
+					part: "reasoning.arrow",
+					open: x
+				}),
+				a ?? (m ? "Thinking…" : "Reasoning"),
+				!m && w !== "" && /* @__PURE__ */ o(e, {
+					tag: "span",
+					component: "reasoning.duration",
+					children: `Thought for ${w}`
+				})
+			]
+		}), /* @__PURE__ */ o(e, {
+			component: "reasoning.track",
+			variant: { closed: !x },
+			children: /* @__PURE__ */ o(e, {
+				component: "reasoning.clip",
+				children: /* @__PURE__ */ o(e, {
+					component: "reasoning.body",
+					id: b,
+					children: c
+				})
+			})
+		})]
+	});
+}
+var y = v;
+y.displayName = "Reasoning";
+function b(t) {
+	let { text: n, streaming: r = !1, window: a = l.STREAM_WINDOW, caret: c = !0, props: u, ...d } = t, [f, p] = i(() => l.initialStream(n)), m = l.advanceStream(f, n, a);
+	return m !== f && p(m), /* @__PURE__ */ s(e, {
+		component: "streamingText",
+		...d,
+		props: {
+			"aria-busy": r || void 0,
+			...u
+		},
+		children: [
+			m.settled,
+			m.segments.map((t) => /* @__PURE__ */ o(e, {
+				tag: "span",
+				component: "streamingText.segment",
+				children: t.text
+			}, t.key)),
+			r && c && /* @__PURE__ */ o(e, {
+				tag: "span",
+				component: "streamingText.caret",
+				props: { "aria-hidden": !0 }
+			})
+		]
+	});
+}
+var x = b;
+x.displayName = "StreamingText";
+//#endregion
+export { l as AgentUtils, _ as ApprovalCard, y as Reasoning, x as StreamingText, h as ToolCallCard };

package/components/chart.d.ts

@@ -15,6 +15,7 @@ import { SvgProps } from './svg';
  * `children` narrowed to SVG content — a chart's children are a label in a ring, never a render prop.
  */
 type ChartProps = Omit<SvgProps, 'viewBox' | 'variant' | 'children'> & {
+    /** What is drawn on top of the shape: the number inside a ring, a gradient in a `<Defs>`. SVG content, not a render prop. */
     children?: React.ReactNode;
 };
 /** A paint value: a colour token, or the `url(#…)`/`var(--…)` a gradient or a theme provides. */

package/components/dashboard.cjs

@@ -0,0 +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;

package/components/dashboard.d.ts

@@ -0,0 +1,121 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { default as DashboardUtils, DashboardItem, DashboardLayout } from '../utils/dashboard/dashboardUtils';
+export type { DashboardItem, DashboardLayout };
+export { DashboardUtils };
+/**
+ * Why a layout changed. The *device* is not a reason here — a drag and an arrow key both move a widget,
+ * and `details.event` says which one did it; what a consumer acts on differently is move against resize.
+ */
+export type DashboardReason = 'move' | 'resize' | 'imperative';
+/** The container sizes columns are declared against — the `cq` scale, since a dashboard queries its own width. */
+export type DashboardSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/** One column count, or one per container size. The largest is the space the layout is written in. */
+export type DashboardColumns = number | Partial<Record<DashboardSize, number>>;
+type DashboardBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'onChange'>;
+export interface DashboardGridProps<TKey extends keyof ComponentsAndVariants = 'dashboard'> extends DashboardBoxProps<TKey> {
+    /** The widgets. Each `<Widget id>` is placed by the layout item of that id; one with no item is left to flow. */
+    children?: ReactNode;
+    /** Controlled layout. Leave it out and the grid owns it. */
+    layout?: DashboardLayout;
+    /** What it starts as. The layout is normalized on the way in, so a generated one need not be tidy. */
+    defaultLayout?: DashboardLayout;
+    /** Fires on every cell a drag crosses and every arrow key, with the whole normalized layout. */
+    onLayoutChange?: ChangeHandler<DashboardLayout, DashboardReason>;
+    /** Fires once when the interaction ends — the place for the write a per-cell callback is too noisy for. */
+    onLayoutCommit?: ChangeHandler<DashboardLayout, DashboardReason>;
+    /**
+     * How many columns, at one width or at several: `12`, or `{ xs: 1, md: 6, xxl: 12 }` — the default —
+     * which is one column until the dashboard is 28rem wide, six from there and twelve from 42rem. Each is
+     * a projection of the one layout, computed rather than measured, so the browser picks between classes;
+     * the smallest count is also what a container narrower than every size named here gets.
+     */
+    columns?: DashboardColumns;
+    /** The height of one row, on the ÷4 spacing scale. Default `24` — 6rem. */
+    rowHeight?: number;
+    /** Whether widgets can be moved and resized. The handles exist only in edit mode, and only where the layout's own columns are being rendered. */
+    editable?: boolean;
+    /** What the set of widgets is called. A list needs a name where a page holds more than one. */
+    label?: string;
+    /** The same, naming an element that already says it. */
+    labelledBy?: string;
+}
+export interface WidgetProps<TKey extends keyof ComponentsAndVariants = 'widget'> extends BoxProps<'div', TKey> {
+    /** Which layout item this widget is. Left out, it is chrome with no place — a card. */
+    id?: string;
+    /** What it shows. */
+    children?: ReactNode;
+    /** The title bar's heading. */
+    title?: ReactNode;
+    /** What the widget is called where a control has to say so — the handles' labels and the announcements. Defaults to a string `title`, then to `id`. */
+    name?: string;
+    /** A line under the title, for the question the widget answers rather than the noun it is named after. */
+    description?: ReactNode;
+    /** The end of the title bar: a menu, a filter, a link out. */
+    actions?: ReactNode;
+    /** The heading level the title renders at. Default `3`, since a dashboard is a section of a page. */
+    level?: 2 | 3 | 4 | 5 | 6;
+    /** Bars where the content will be, and `aria-busy` while they are showing. */
+    loading?: boolean;
+    /** What went wrong, shown in place of the content. With `onRefresh` it comes with a retry. */
+    error?: ReactNode;
+    /** There is nothing to show: `true` for the default line, or the words to use instead. */
+    empty?: boolean | ReactNode;
+    /** Fetch it again. A button in the title bar, and the retry an error state offers. */
+    onRefresh?: () => void;
+    /** The refresh button's accessible name. Default `Refresh <name>`. */
+    refreshLabel?: string;
+}
+interface WidgetType {
+    <TKey extends keyof ComponentsAndVariants = 'widget'>(props: WidgetProps<TKey>): React.ReactNode;
+    displayName?: string;
+}
+/**
+ * A dashboard the people using it can rearrange, and a model can write.
+ *
+ * ```tsx
+ * <DashboardGrid layout={layout} onLayoutChange={setLayout} editable>
+ *   <Widget id="revenue" title="Revenue">…</Widget>
+ *   <Widget id="orders" title="Orders" loading>…</Widget>
+ * </DashboardGrid>
+ * ```
+ *
+ * **The layout is the artifact**, and it is plain JSON: a version, a column count and one `{ id, x, y, w, h }`
+ * per widget, in cells. That is what a model emits under `DashboardUtils.SCHEMA`, what a drag reports back
+ * and what a host stores — persistence is the app's, because only the app knows whether a dashboard belongs
+ * to a user, a team or a URL.
+ *
+ * **Nothing is measured to lay it out.** A widget's place is `grid-column`/`grid-row`, which is a class, so
+ * a layout of any size costs no inline style and no `ResizeObserver`; the narrower arrangements are
+ * *projections* of the same layout, computed at render and chosen between by container queries. The one
+ * inline style in the component is the translate that keeps a dragged widget under the pointer — a value
+ * per frame, which a class would make a rule per frame that is never freed.
+ *
+ * **The layout is compacted upward**, so a widget cannot be parked in mid-air and two dashboards holding
+ * the same widgets in the same places compare equal. A drop below a neighbour rises to meet it.
+ *
+ * **An arrangement can only be edited in the space it is written in.** Where the grid is rendering a
+ * projection the handles are not there at all — hidden by the same container query that chose the
+ * projection — because an edit made in six columns is not a layout in twelve, and writing one back would
+ * quietly replace the other.
+ *
+ * @a11y The grid is a `role="list"` named by `label`, and each placed widget a `role="listitem"` — so a
+ * reader is told how many widgets there are and which one this is, which a set of `region` landmarks
+ * would drown out.
+ * @a11y Moving and resizing are a **grab**: Enter or Space on a handle picks the widget up, the arrows
+ * move it, Enter drops it and Escape puts it back. Every step is announced in a polite live region that
+ * is there before there is anything to say.
+ * @a11y The handles are real buttons with `aria-pressed` for the grabbed state and an `aria-describedby`
+ * naming the instructions, rather than an HTML5 drag, which no screen reader drives.
+ * @keyboard Enter, Space — Picks a widget up from either handle, and drops it again.
+ * @keyboard Arrows — One cell, along the reading axis: in a right-to-left page ArrowLeft moves a widget
+ * to the *right*. On the resize handle they add and remove a column or a row.
+ * @keyboard Escape — Puts the widget back where it was picked up from, and the layout with it.
+ */
+declare function DashboardGridImpl<TKey extends keyof ComponentsAndVariants = 'dashboard'>(props: DashboardGridProps<TKey>): import("react").JSX.Element;
+declare const DashboardGrid: typeof DashboardGridImpl;
+declare const Widget: WidgetType;
+export { Widget };
+export default DashboardGrid;