@box-kite/react 2.0.0 → 2.1.0

package/client.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react/jsx-runtime");function c(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.l(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var l=r.t;function u(e,n){let{classNames:r,signature:i,styleElements:a}=t.l(e,n);return l(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:a}}function d(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return l(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var f;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=i;function a(e){(0,o.getDefaultEngine)().configure(e)}e.configure=a})(f||={});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 m(e){if(typeof e.createContext!=`function`)throw Error(p)}m(a.default);var h=a.default.createContext({theme:``,setTheme:()=>{}});function g(e){let{children:t,theme:n,use:r=`local`,storageKey:c,globalStyles:l}=e,u=d(r===`global`?l:void 0,`html`),[f,p]=(0,a.useState)(n??o.defaultThemeName),[m,g]=(0,a.useState)(n!==void 0),_=(0,a.useRef)(null),v=(0,a.useCallback)(e=>{e===null?(c&&(0,o.clearStoredTheme)(c),g(!1)):(c&&(0,o.writeStoredTheme)(c,e),p(e),g(!0))},[c]),[y,b]=(0,a.useState)(n);return n!==y&&(b(n),n===void 0?g(!1):(p(n),g(!0))),(0,a.useLayoutEffect)(()=>{if(m)return;let e=c?(0,o.readStoredTheme)(c):null;if(e){p(e),g(!0);return}return p((0,o.getSystemTheme)()),(0,o.watchSystemTheme)(p)},[m,c]),(0,a.useLayoutEffect)(()=>{if(r===`local`)return;let e=(0,o.documentRoot)();if(e)return(0,o.applyThemeToElement)(e,f)},[f,r]),(0,a.useLayoutEffect)(()=>{r!==`local`||!_.current||(0,o.setThemeAttribute)(_.current,f)},[f,r]),r===`local`?(0,s.jsxs)(h.Provider,{value:{theme:f,setTheme:v},children:[u,(0,s.jsx)(i.default,{ref:_,className:f,children:t})]}):(0,s.jsxs)(h.Provider,{value:{theme:f,setTheme:v},children:[u,t]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(h);return[e,t]}e.useTheme=t})(g||={});var _=g,v=new WeakMap;function y(e){let t=v.get(e);return t||(t=new Map,v.set(e,t)),t}function b(e=!0){let[t]=_.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;let r=`box-kite-portal`,i=t.getElementById(r);return i||(i=document.createElement(`div`),i.id=r,document.body.appendChild(i)),i},[e]);return(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=y(r),n=e.get(t)??0;return e.set(t,n+1),n===0&&r.classList.add(t),()=>{let n=(e.get(t)??1)-1;n<=0?(e.delete(t),r.classList.remove(t)):e.set(t,n)}},[r,t]),r}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return b}});
+const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react/jsx-runtime");function c(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.l(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var l=r.t;function u(e,n){let{classNames:r,signature:i,styleElements:a}=t.l(e,n);return l(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:a}}function d(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return l(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var f;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=i;function a(e){(0,o.getDefaultEngine)().configure(e)}e.configure=a})(f||={});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 m(e){if(typeof e.createContext!=`function`)throw Error(p)}m(a.default);var h=a.default.createContext({theme:``,setTheme:()=>{}});function g(e){let{children:t,theme:n,use:r=`local`,storageKey:c,globalStyles:l}=e,u=d(r===`global`?l:void 0,`html`),[f,p]=(0,a.useState)(n??o.defaultThemeName),[m,g]=(0,a.useState)(n!==void 0),_=(0,a.useCallback)(e=>{e===null?(c&&(0,o.clearStoredTheme)(c),g(!1)):(c&&(0,o.writeStoredTheme)(c,e),p(e),g(!0))},[c]),[v,y]=(0,a.useState)(n);return n!==v&&(y(n),n===void 0?g(!1):(p(n),g(!0))),(0,a.useLayoutEffect)(()=>{if(m)return;let e=c?(0,o.readStoredTheme)(c):null;if(e){p(e),g(!0);return}return p((0,o.getSystemTheme)()),(0,o.watchSystemTheme)(p)},[m,c]),(0,a.useLayoutEffect)(()=>{if(r===`local`)return;let e=(0,o.documentRoot)();if(e)return(0,o.applyThemeToElement)(e,f)},[f,r]),r===`local`?(0,s.jsxs)(h.Provider,{value:{theme:f,setTheme:_},children:[u,(0,s.jsx)(i.default,{className:f,props:{"data-theme":f},children:t})]}):(0,s.jsxs)(h.Provider,{value:{theme:f,setTheme:_},children:[u,t]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(h);return[e,t]}e.useTheme=t})(g||={});var _=g,v=new WeakMap;function y(e){let t=v.get(e);return t||(t=new Map,v.set(e,t)),t}function b(e=!0){let[t]=_.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;let r=`box-kite-portal`,i=t.getElementById(r);return i||(i=document.createElement(`div`),i.id=r,document.body.appendChild(i)),i},[e]);return(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=y(r),n=e.get(t)??0;return e.set(t,n+1),n===0&&r.classList.add(t),()=>{let n=(e.get(t)??1)-1;n<=0?(e.delete(t),r.classList.remove(t)):e.set(t,n)}},[r,t]),r}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return b}});

package/client.mjs

@@ -3,10 +3,10 @@ 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, readStoredTheme as b, setThemeAttribute as x, watchSystemTheme as S, writeStoredTheme as C } from "@box-kite/core";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { applyThemeToElement as m, clearStoredTheme as h, defaultThemeName as g, documentRoot as _, getDefaultEngine as v, getSystemTheme as y, readStoredTheme as b, watchSystemTheme as x, writeStoredTheme as S } from "@box-kite/core";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/react/hooks/useVisibility.ts
-function E(e) {
+function T(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 e(e) {
@@ -41,23 +41,23 @@ function E(e) {
 }
 //#endregion
 //#region src/react/useStyles.ts
-var D = i;
-function O(t, n) {
+var E = i;
+function D(t, n) {
 	let { classNames: r, signature: i, styleElements: a } = e(t, n);
-	return D(() => {
+	return E(() => {
 		v().flushSync();
 	}, [i ?? t]), {
 		classNames: r,
 		styleElements: a
 	};
 }
-function k(e, n) {
+function O(e, n) {
 	let r = e ? v().addGlobalStyles(e, n) : void 0;
-	return D(() => {
+	return E(() => {
 		v().flushSync();
 	}, [e, n]), t(r);
 }
-var A;
+var k;
 (function(e) {
 	function t() {
 		v().flushSync();
@@ -79,72 +79,70 @@ var A;
 		v().configure(e);
 	}
 	e.configure = a;
-})(A ||= {});
+})(k ||= {});
 //#endregion
 //#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);
+var A = "[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 j(e) {
+	if (typeof e.createContext != "function") throw Error(A);
 }
 //#endregion
 //#region src/react/theme/themeContext.ts
-M(o);
-var N = o.createContext({
+j(o);
+var M = o.createContext({
 	theme: "",
 	setTheme: () => {}
 });
 //#endregion
 //#region src/react/theme/theme.tsx
-function P(e) {
-	let { children: t, theme: n, use: r = "local", storageKey: i, globalStyles: o } = e, c = k(r === "global" ? o : void 0, "html"), [l, d] = p(n ?? g), [v, E] = p(n !== void 0), D = f(null), O = s((e) => {
-		e === null ? (i && h(i), E(!1)) : (i && C(i, e), d(e), E(!0));
-	}, [i]), [A, j] = p(n);
-	return n !== A && (j(n), n === void 0 ? E(!1) : (d(n), E(!0))), u(() => {
-		if (v) return;
+function N(e) {
+	let { children: t, theme: n, use: r = "local", storageKey: i, globalStyles: o } = e, c = O(r === "global" ? o : void 0, "html"), [l, d] = p(n ?? g), [f, v] = p(n !== void 0), T = s((e) => {
+		e === null ? (i && h(i), v(!1)) : (i && S(i, e), d(e), v(!0));
+	}, [i]), [E, D] = p(n);
+	return n !== E && (D(n), n === void 0 ? v(!1) : (d(n), v(!0))), u(() => {
+		if (f) return;
 		let e = i ? b(i) : null;
 		if (e) {
-			d(e), E(!0);
+			d(e), v(!0);
 			return;
 		}
-		return d(y()), S(d);
-	}, [v, i]), u(() => {
+		return d(y()), x(d);
+	}, [f, i]), u(() => {
 		if (r === "local") return;
 		let e = _();
 		if (e) return m(e, l);
-	}, [l, r]), u(() => {
-		r !== "local" || !D.current || x(D.current, l);
-	}, [l, r]), r === "local" ? /* @__PURE__ */ T(N.Provider, {
+	}, [l, r]), r === "local" ? /* @__PURE__ */ w(M.Provider, {
 		value: {
 			theme: l,
-			setTheme: O
+			setTheme: T
 		},
-		children: [c, /* @__PURE__ */ w(a, {
-			ref: D,
+		children: [c, /* @__PURE__ */ C(a, {
 			className: l,
+			props: { "data-theme": l },
 			children: t
 		})]
-	}) : /* @__PURE__ */ T(N.Provider, {
+	}) : /* @__PURE__ */ w(M.Provider, {
 		value: {
 			theme: l,
-			setTheme: O
+			setTheme: T
 		},
 		children: [c, t]
 	});
 }
 (function(e) {
 	function t() {
-		let { theme: e, setTheme: t } = c(N);
+		let { theme: e, setTheme: t } = c(M);
 		return [e, t];
 	}
 	e.useTheme = t;
-})(P ||= {});
-var F = P, I = /* @__PURE__ */ new WeakMap();
-function L(e) {
-	let t = I.get(e);
-	return t || (t = /* @__PURE__ */ new Map(), I.set(e, t)), t;
+})(N ||= {});
+var P = N, F = /* @__PURE__ */ new WeakMap();
+function I(e) {
+	let t = F.get(e);
+	return t || (t = /* @__PURE__ */ new Map(), F.set(e, t)), t;
 }
-function R(e = !0) {
-	let [t] = F.useTheme(), n = d(() => {
+function L(e = !0) {
+	let [t] = P.useTheme(), n = d(() => {
 		if (!e) return null;
 		let t = r();
 		if (!t) return null;
@@ -153,7 +151,7 @@ function R(e = !0) {
 	}, [e]);
 	return u(() => {
 		if (!t || !n) return;
-		let e = L(n), r = e.get(t) ?? 0;
+		let e = I(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);
@@ -161,4 +159,4 @@ function R(e = !0) {
 	}, [n, t]), n;
 }
 //#endregion
-export { E as a, O as i, F as n, A as r, R as t };
+export { T as a, D as i, P as n, k as r, L as t };

package/components/agent.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../identity.cjs");let r=require("react"),i=require("react/jsx-runtime");var a;(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})(a||={});var o=a;function s({part:t,open:n}){return(0,i.jsx)(e.default,{tag:`span`,component:t,variant:{open:n},props:{"aria-hidden":!0}})}var c={section:`toolCall.section`,label:`toolCall.label`,value:`toolCall.value`,truncated:`toolCall.truncated`},l={section:`approval.section`,label:`approval.label`,value:`approval.value`,truncated:`approval.truncated`};function u({parts:t,label:n,value:r,limit:a}){let{text:s,truncated:c}=o.formatValue(r,a);return(0,i.jsxs)(e.default,{component:t.section,children:[(0,i.jsx)(e.default,{component:t.label,children:n}),(0,i.jsx)(e.default,{tag:`pre`,component:t.value,children:s}),c>0&&(0,i.jsx)(e.default,{component:t.truncated,children:`${o.formatCount(c)} more characters, not shown`})]})}function d(r){let{name:a,description:l,status:d=`pending`,input:f,output:p,error:m,open:h,defaultOpen:g=!1,onOpenChange:_,collapsible:v=!0,inputLabel:y=`Input`,outputLabel:b=`Output`,errorLabel:x=`Error`,valueLimit:S,children:C,props:w,...T}=r,E=n.t(`toolcall`),D=`${E}-header`,O=`${E}-body`,[k,A]=t.i({value:h,defaultValue:g,onChange:_}),j=t.a(e=>A(e=>!e,{reason:`trigger`,event:e})),M=[{key:`input`,label:y,value:f},{key:`output`,label:b,value:p},{key:`error`,label:x,value:m}].filter(e=>o.hasValue(e.value)),N=v&&(M.length>0||C!==void 0),P=N&&k,F=(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.default,{tag:`span`,component:`toolCall.summary`,children:[(0,i.jsx)(e.default,{tag:`span`,component:`toolCall.name`,children:a}),l!==void 0&&(0,i.jsx)(e.default,{tag:`span`,component:`toolCall.description`,children:l})]}),(0,i.jsxs)(e.default,{tag:`span`,component:`toolCall.status`,variant:d,children:[(0,i.jsx)(e.default,{tag:`span`,component:`toolCall.status.dot`,variant:{running:d===`running`},props:{"aria-hidden":!0}}),o.statusLabel(d)]}),N&&(0,i.jsx)(s,{part:`toolCall.arrow`,open:P})]});return(0,i.jsxs)(e.default,{component:`toolCall`,...T,props:{"aria-busy":d===`running`||void 0,...w},children:[N?(0,i.jsx)(e.default,{tag:`button`,component:`toolCall.header`,variant:{interactive:!0},id:D,props:{type:`button`,"aria-expanded":P,"aria-controls":O,onClick:j},children:F}):(0,i.jsx)(e.default,{component:`toolCall.header`,id:D,children:F}),N&&(0,i.jsx)(e.default,{component:`toolCall.track`,variant:{closed:!P},children:(0,i.jsx)(e.default,{component:`toolCall.clip`,children:(0,i.jsxs)(e.default,{component:`toolCall.body`,id:O,children:[M.map(e=>(0,i.jsx)(u,{parts:c,label:e.label,value:e.value,limit:S},e.key)),C]})})})]})}var f=d;f.displayName=`ToolCallCard`;function p(r){let{title:a,description:s,input:c,inputLabel:d=`Request`,decision:f,defaultDecision:p=null,onDecisionChange:m,busy:h=!1,approveLabel:g=`Approve`,rejectLabel:_=`Reject`,autoFocus:v=!1,valueLimit:y,children:b,props:x,...S}=r,C=`${n.t(`approval`)}-title`,[w,T]=t.i({value:f,defaultValue:p,onChange:m}),E=(e,t)=>n=>T(e,{reason:t,event:n});return(0,i.jsxs)(e.default,{component:`approval`,...S,variant:[S.variant,{approved:w===`approved`,rejected:w===`rejected`}],props:{role:`group`,"aria-labelledby":C,"aria-busy":h||void 0,...x},children:[(0,i.jsx)(e.default,{component:`approval.title`,id:C,children:a}),s!==void 0&&(0,i.jsx)(e.default,{component:`approval.description`,children:s}),o.hasValue(c)&&(0,i.jsx)(u,{parts:l,label:d,value:c,limit:y}),b,(0,i.jsxs)(e.default,{component:`approval.footer`,children:[w===null&&(0,i.jsxs)(e.default,{component:`approval.actions`,children:[(0,i.jsx)(e.default,{tag:`button`,component:`approval.button`,variant:{reject:!0},disabled:h,props:{type:`button`,autoFocus:v,onClick:E(`rejected`,`reject`)},children:_}),(0,i.jsx)(e.default,{tag:`button`,component:`approval.button`,variant:{approve:!0},disabled:h,props:{type:`button`,onClick:E(`approved`,`approve`)},children:g})]}),(0,i.jsx)(e.default,{component:`approval.decision`,variant:{approved:w===`approved`,rejected:w===`rejected`},props:{role:`status`},children:w===null?null:o.decisionLabel(w)})]})]})}var m=p;m.displayName=`ApprovalCard`;function h(r){let{label:a,children:c,open:l,defaultOpen:u=!1,onOpenChange:d,streaming:f=!1,duration:p,props:m,...h}=r,g=n.t(`reasoning`),_=`${g}-trigger`,v=`${g}-body`,[y,b]=t.i({value:l,defaultValue:u,onChange:d}),x=t.a(e=>b(e=>!e,{reason:`trigger`,event:e})),S=p===void 0?``:o.formatDuration(p);return(0,i.jsxs)(e.default,{component:`reasoning`,...h,props:{"aria-busy":f||void 0,...m},children:[(0,i.jsxs)(e.default,{tag:`button`,component:`reasoning.trigger`,variant:{streaming:f},id:_,props:{type:`button`,"aria-expanded":y,"aria-controls":v,onClick:x},children:[(0,i.jsx)(s,{part:`reasoning.arrow`,open:y}),a??(f?`Thinking…`:`Reasoning`),!f&&S!==``&&(0,i.jsx)(e.default,{tag:`span`,component:`reasoning.duration`,children:`Thought for ${S}`})]}),(0,i.jsx)(e.default,{component:`reasoning.track`,variant:{closed:!y},children:(0,i.jsx)(e.default,{component:`reasoning.clip`,children:(0,i.jsx)(e.default,{component:`reasoning.body`,id:v,children:c})})})]})}var g=h;g.displayName=`Reasoning`;function _(t){let{text:n,streaming:a=!1,window:s=o.STREAM_WINDOW,caret:c=!0,props:l,...u}=t,[d,f]=(0,r.useState)(()=>o.initialStream(n)),p=o.advanceStream(d,n,s);return p!==d&&f(p),(0,i.jsxs)(e.default,{component:`streamingText`,...u,props:{"aria-busy":a||void 0,...l},children:[p.settled,p.segments.map(t=>(0,i.jsx)(e.default,{tag:`span`,component:`streamingText.segment`,children:t.text},t.key)),a&&c&&(0,i.jsx)(e.default,{tag:`span`,component:`streamingText.caret`,props:{"aria-hidden":!0}})]})}var v=_;v.displayName=`StreamingText`,exports.AgentUtils=o,exports.ApprovalCard=m,exports.Reasoning=g,exports.StreamingText=v,exports.ToolCallCard=f;

package/components/agent.d.ts

@@ -0,0 +1,215 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { default as AgentUtils, ApprovalDecision, ToolCallStatus } from '../utils/agent/agentUtils';
+export { AgentUtils };
+export type { ApprovalDecision, ToolCallStatus };
+/** Why a card opened or closed: a press on its header, which is also what Enter and Space on it produce. */
+export type DisclosureReason = 'trigger';
+/** Which button was pressed. The decision says what it meant; this says what the person did. */
+export type ApprovalReason = 'approve' | 'reject';
+export interface ToolCallCardProps<TKey extends keyof ComponentsAndVariants = 'toolCall'> extends Omit<BoxProps<'div', TKey>, 'open'> {
+    /** The tool's name, as the model called it. It is what the header reads. */
+    name: ReactNode;
+    /** A line under the name: what this call is for, in the app's own words. */
+    description?: ReactNode;
+    /** Where the call is. Default `pending`. */
+    status?: ToolCallStatus;
+    /** The arguments. A string is shown as it stands, anything else as the JSON a reader can check. */
+    input?: unknown;
+    /** What came back, shown the same way. */
+    output?: unknown;
+    /** What went wrong, shown in place of the output. */
+    error?: unknown;
+    /** Controlled: whether the body is open. */
+    open?: boolean;
+    /** Whether it starts open. Default `false` — a transcript of tool calls is a list, not a wall of JSON. */
+    defaultOpen?: boolean;
+    /** Fires when the header is pressed, with the body's new state. */
+    onOpenChange?: ChangeHandler<boolean, DisclosureReason>;
+    /** Whether the body can be opened at all. Default `true`; `false` leaves the header a plain row. */
+    collapsible?: boolean;
+    /** The word above the arguments. Default `Input`. */
+    inputLabel?: ReactNode;
+    /** The word above what came back. Default `Output`. */
+    outputLabel?: ReactNode;
+    /** The word above what went wrong. Default `Error`. */
+    errorLabel?: ReactNode;
+    /** How much of a value is shown before it is cut. Default `AgentUtils.VALUE_LIMIT` (20,000 characters). */
+    valueLimit?: number;
+    /** Anything else that belongs in the body, under the values. */
+    children?: ReactNode;
+}
+/**
+ * One call an agent made: what it ran, where it got to, and — when the header is opened — what went in
+ * and what came back.
+ *
+ * ```tsx
+ * <ToolCallCard name="searchOrders" status="success" input={{ query: 'refunds' }} output={rows} />
+ * ```
+ *
+ * **The status is a word, not a colour.** Every state carries its own label beside the dot, because a
+ * forced-colors mode throws a tint away and a screen reader never had it — the same rule the library's
+ * own state styling follows.
+ *
+ * **A value is whatever the model produced**, so it is formatted rather than trusted: a circular
+ * structure, a `BigInt` and a four-megabyte result all reach the page as text, capped at `valueLimit`
+ * with a line saying how much was left. The judgement is `AgentUtils`, which needs no React.
+ *
+ * The four statuses are the ones every agent runtime reports under its own spelling — AI SDK's
+ * `input-streaming`/`input-available`/`output-available`/`output-error` map onto them one for one.
+ *
+ * @a11y The header is a real `<button>` carrying `aria-expanded` and `aria-controls` when there is a body
+ * to open, and a plain row when there is not — a control that discloses nothing is a control nobody wants
+ * to land on.
+ * @a11y `aria-busy` while the call is running, so a reader is told the card is not finished rather than
+ * reading a half-written result as the answer.
+ * @a11y The card announces nothing itself. The transcript it is rendered into is what does that, and a
+ * live region inserted together with its content is not reliably announced.
+ * @keyboard Tab — Focuses the header, and again leaves it. Nothing inside a closed body is reachable.
+ * @keyboard Enter, Space — Opens the body, or closes it.
+ */
+declare function ToolCallCardImpl<TKey extends keyof ComponentsAndVariants = 'toolCall'>(props: ToolCallCardProps<TKey>): import("react").JSX.Element;
+export declare const ToolCallCard: typeof ToolCallCardImpl;
+export interface ApprovalCardProps<TKey extends keyof ComponentsAndVariants = 'approval'> extends BoxProps<'div', TKey> {
+    /** What is about to happen, in one line. It names the card. */
+    title: ReactNode;
+    /** The consequence, where a title cannot carry it: what this will change, and whether it can be undone. */
+    description?: ReactNode;
+    /** The call itself, shown the way a `ToolCallCard` shows its input. */
+    input?: unknown;
+    /** The word above it. Default `Request`. */
+    inputLabel?: ReactNode;
+    /** Controlled: what has been decided. `null` is "not yet", and is what shows the two buttons. */
+    decision?: ApprovalDecision | null;
+    /** What it starts as. Default `null`. */
+    defaultDecision?: ApprovalDecision | null;
+    /** Fires when a button is pressed, with the decision and which button made it. */
+    onDecisionChange?: ChangeHandler<ApprovalDecision | null, ApprovalReason>;
+    /** The decision is on its way to a server: both buttons are disabled and the card reports `aria-busy`. */
+    busy?: boolean;
+    /** What the approving button says. Default `Approve`. */
+    approveLabel?: ReactNode;
+    /** What the refusing button says. Default `Reject`. */
+    rejectLabel?: ReactNode;
+    /**
+     * Whether to put focus on the card when it mounts. Default `false` — an agent's turn arrives while the
+     * reader is somewhere else, and taking focus from them is how a decision gets pressed by accident. It
+     * lands on the *reject* button, which is APG's rule for a decision: the least destructive action.
+     */
+    autoFocus?: boolean;
+    /** How much of the input is shown before it is cut. Default `AgentUtils.VALUE_LIMIT`. */
+    valueLimit?: number;
+    /** Anything else that belongs above the buttons. */
+    children?: ReactNode;
+}
+/**
+ * The gate in front of something an agent wants to do: what it is, and the two answers.
+ *
+ * ```tsx
+ * <ApprovalCard
+ *   title="Refund order #4182"
+ *   description="6,400 MDL back to the customer. This cannot be undone."
+ *   input={{ orderId: 4182 }}
+ *   onDecisionChange={(decision) => respond(decision === 'approved')}
+ * />
+ * ```
+ *
+ * **One channel, not two.** `onDecisionChange(decision, { reason })` is the whole API: the decision says
+ * what was chosen and the reason says which button chose it, which is the shape every other component in
+ * the library reports through. It maps straight onto AI SDK 6's `needsApproval`, CopilotKit's
+ * `renderAndWaitForResponse` and AG-UI's `INTERRUPT`.
+ *
+ * **The decision's own line is a live region that exists before there is anything in it**, so a reader is
+ * told the card was answered. A region rendered together with its text is not reliably announced — the
+ * rule the toaster's viewport already follows.
+ *
+ * @a11y `role="group"` named by the title, so the two buttons are read as belonging to one decision
+ * rather than as loose controls in a transcript.
+ * @a11y Focus is not taken on mount unless `autoFocus` is set, and then it lands on the least destructive
+ * button. A card that grabs the keyboard is one that gets answered by accident.
+ * @a11y `aria-busy` while `busy`, which is also when both buttons are disabled.
+ * @keyboard Tab — Reaches the two buttons in order; Enter or Space presses one.
+ */
+declare function ApprovalCardImpl<TKey extends keyof ComponentsAndVariants = 'approval'>(props: ApprovalCardProps<TKey>): import("react").JSX.Element;
+export declare const ApprovalCard: typeof ApprovalCardImpl;
+export interface ReasoningProps<TKey extends keyof ComponentsAndVariants = 'reasoning'> extends Omit<BoxProps<'div', TKey>, 'open'> {
+    /** The header's words. Default `Reasoning`, or `Thinking…` while `streaming`. */
+    label?: ReactNode;
+    /** The thought itself. */
+    children?: ReactNode;
+    /** Controlled: whether it is open. */
+    open?: boolean;
+    /** Whether it starts open. Default `false` — a chain of thought is an aside, not the answer. */
+    defaultOpen?: boolean;
+    /** Fires when the header is pressed. */
+    onOpenChange?: ChangeHandler<boolean, DisclosureReason>;
+    /** Still arriving: the header says so and shimmers. Opening it is the app's — pass `open={streaming}`. */
+    streaming?: boolean;
+    /** How long the thought took, in milliseconds. Rendered beside the label as "Thought for 4s". */
+    duration?: number;
+}
+/**
+ * What the model was thinking, folded away.
+ *
+ * ```tsx
+ * <Reasoning duration={4200}>{reasoningText}</Reasoning>
+ * <Reasoning streaming open>{partial}</Reasoning>
+ * ```
+ *
+ * **Closed by default**, because a chain of thought is an aside and a transcript of them is unreadable.
+ * `streaming` changes what the header says and shimmers it; whether it also *opens* is the app's call,
+ * since that is a value somebody may be controlling — `open={streaming}` is the usual answer.
+ *
+ * The same one-row grid `Collapsible` opens in, so nothing is measured and two identical rules share
+ * one class.
+ *
+ * @a11y The header is a `<button>` with `aria-expanded` and `aria-controls`; the thought itself has no
+ * role, because a region wants a name and a disclosure's trigger is not a heading.
+ * @a11y `aria-busy` while it is streaming.
+ * @keyboard Tab — Focuses the header, and again leaves it.
+ * @keyboard Enter, Space — Opens the thought, or closes it.
+ */
+declare function ReasoningImpl<TKey extends keyof ComponentsAndVariants = 'reasoning'>(props: ReasoningProps<TKey>): import("react").JSX.Element;
+export declare const Reasoning: typeof ReasoningImpl;
+export interface StreamingTextProps<TKey extends keyof ComponentsAndVariants = 'streamingText'> extends BoxProps<'div', TKey> {
+    /** The message so far. Append to it — anything else is a different message and settles without fading. */
+    text: string;
+    /** Whether more is still coming. The caret shows while it is true, and the element reports `aria-busy`. */
+    streaming?: boolean;
+    /**
+     * How many of the runs that arrived most recently stay faded in at once; the rest settle. Default
+     * `AgentUtils.STREAM_WINDOW` (8), and `0` turns the entrance off altogether. A run is settled once this
+     * many newer ones have arrived rather than after a time, so a stream fast enough to fill the window
+     * inside one `--transitionTime` cuts the tail of the fade short — raise it if that shows.
+     */
+    window?: number;
+    /** Whether to draw the caret while streaming. Default `true`. */
+    caret?: boolean;
+}
+/**
+ * What the agent is saying, as it arrives.
+ *
+ * ```tsx
+ * <StreamingText text={message} streaming={status === 'streaming'} />
+ * ```
+ *
+ * **Only what arrived fades in.** The text is one settled string plus the last few runs to arrive, so a
+ * message that is already whole — a prerendered page, a transcript being read back — paints at once with
+ * no animation, and one that is still arriving costs the same at the ten-thousandth token as at the
+ * first. The judgement is `AgentUtils.advanceStream`, which needs no React.
+ *
+ * **The entrance is `@starting-style`, not a keyframe**, so it rides `--transitionTime` and disappears
+ * under `prefers-reduced-motion` with nothing declared for it. The caret is the `pulse` preset, which
+ * stops itself for the same reason.
+ *
+ * It takes `text` rather than children, because knowing what is new means comparing the message with the
+ * message a moment ago, and a React tree is not a string.
+ *
+ * @a11y `aria-busy` while `streaming`. The element is **not** a live region: a region announcing every
+ * token would read the message out a word at a time and again when it finished. What announces an
+ * agent's turn is the transcript it lands in.
+ */
+declare function StreamingTextImpl<TKey extends keyof ComponentsAndVariants = 'streamingText'>(props: StreamingTextProps<TKey>): import("react").JSX.Element;
+export declare const StreamingText: typeof StreamingTextImpl;