@box-kite/react 2.2.6 → 2.2.8

package/analytics.mjs

@@ -0,0 +1,121 @@
+import { r as e } from "./platform.mjs";
+import { i as t, n } from "./interactions.mjs";
+//#region src/utils/analytics/analyticsIdentity.ts
+var r = 18e5;
+function i() {
+	if (typeof crypto.randomUUID == "function") return crypto.randomUUID();
+	let e = Array.from(crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(16)), (e) => e.toString(16).padStart(2, "0")).join("");
+	return `${e.slice(0, 8)}-${e.slice(8, 12)}-4${e.slice(13, 16)}-${"89ab"[parseInt(e[16], 16) % 4]}${e.slice(17, 20)}-${e.slice(20, 32)}`;
+}
+function a(e, t) {
+	try {
+		return e().getItem(t);
+	} catch {
+		return null;
+	}
+}
+function o(e, t, n) {
+	try {
+		n === null ? e().removeItem(t) : e().setItem(t, n);
+	} catch {}
+}
+var s = () => sessionStorage, c = () => localStorage;
+function l(e, t) {
+	let n = `${e}.session`, r = `${e}.visitor`, l, u;
+	return {
+		sessionAt(e) {
+			if (!l) try {
+				l = JSON.parse(a(s, n) ?? "null") ?? void 0;
+			} catch {
+				l = void 0;
+			}
+			return !l || e - l.last > t ? l = {
+				id: i(),
+				last: e
+			} : l.last = Math.max(l.last, e), o(s, n, JSON.stringify(l)), l.id;
+		},
+		visitor() {
+			return u ??= a(c, r) ?? i(), o(c, r, u), u;
+		},
+		forget() {
+			l = void 0, u = void 0, o(s, n, null), o(c, r, null);
+		}
+	};
+}
+//#endregion
+//#region src/utils/analytics/analytics.ts
+var u = 200, d = 64, f = "button,a[href],[role=tab],[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio],summary";
+function p(e, t) {
+	if (!e || !t && !e.matches(f)) return;
+	let n = e.getAttribute("aria-label") ?? e.textContent?.trim().replace(/\s+/g, " ");
+	return n ? n.length > d ? `${n.slice(0, 63)}…` : n : void 0;
+}
+function m(a) {
+	let { send: o, visitor: s = !1, content: c = !1, sessionTimeout: d = r, filter: f, storageKey: m = "box-kite" } = a, h = a.batch?.size ?? 20, g = a.batch?.wait ?? 5e3, _ = Array.isArray(o) ? o : [o];
+	if (!e()) return {
+		consent: () => {},
+		flush: () => {},
+		stop: () => {}
+	};
+	let v = l(m, d), y = a.consent ?? "granted", b = [], x, S = () => {
+		if (clearTimeout(x), x = void 0, y !== "granted" || b.length === 0) return;
+		let e = s ? v.visitor() : void 0, t = b.map(({ at: t, ...n }) => ({
+			...n,
+			time: new Date(t).toISOString(),
+			sessionId: v.sessionAt(t),
+			...e && { visitorId: e }
+		}));
+		b = [];
+		for (let e = 0; e < t.length; e += h) {
+			let n = t.slice(e, e + h);
+			_.forEach((e) => e(n));
+		}
+	}, C = t((e) => {
+		if (y === "denied" || f && !f(e)) return;
+		let t = {
+			id: i(),
+			name: `${e.component}.${e.type}`,
+			kind: e.kind,
+			component: e.component,
+			type: e.type,
+			reason: e.reason,
+			value: e.value,
+			details: e.details,
+			source: e.source,
+			trigger: e.event?.type,
+			label: p(e.target, c),
+			url: e.url,
+			at: e.time
+		};
+		b.push(t), y === "pending" ? b.length > u && b.shift() : b.length >= h ? S() : x ??= setTimeout(S, g);
+	}, { content: c }), w = () => {
+		document.visibilityState === "hidden" && (n(), S());
+	}, T = () => {
+		n(), S();
+	};
+	return document.addEventListener("visibilitychange", w), addEventListener("pagehide", T), {
+		consent(e) {
+			y = e, e === "denied" ? (b = [], v.forget()) : S();
+		},
+		flush: T,
+		stop() {
+			T(), C(), document.removeEventListener("visibilitychange", w), removeEventListener("pagehide", T);
+		}
+	};
+}
+function h(e) {
+	return (t) => {
+		let n = JSON.stringify({ events: t });
+		navigator.sendBeacon?.(e, new Blob([n], { type: "text/plain;charset=UTF-8" })) || fetch(e, {
+			method: "POST",
+			body: n,
+			keepalive: !0,
+			headers: { "content-type": "text/plain;charset=UTF-8" }
+		}).catch(() => {});
+	};
+}
+function g(e = "[interaction]") {
+	return (t) => t.forEach((t) => console.info(e, t));
+}
+//#endregion
+export { h as beacon, g as consoleLog, m as createAnalytics };

package/behavior.cjs

@@ -1 +1 @@
-const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./keyboard.cjs");let r=require("react");function i(e){let n=(0,r.useRef)(e);return t.n(()=>{n.current=e}),n}function a(e){let t=i(e);return(0,r.useCallback)((...e)=>t.current?.(...e),[t])}function o(e){let{value:t,defaultValue:n,onChange:o}=e,s=t!==void 0,[c,l]=(0,r.useState)(n),u=s?t:c,d=i(u),f=a(o);return[u,(0,r.useCallback)((e,t)=>{let n=typeof e==`function`?e(d.current):e;Object.is(n,d.current)||(l(n),f(n,t))},[f,d])]}var s=[];function c(e,t){let n=t.elements();return e.elements().some(e=>n.some(t=>e!==t&&e.contains(t)))}function l(){let e=s.filter(e=>!s.some(t=>t!==e&&c(e,t)));return e[e.length-1]}function u(n){let{enabled:r=!0,onDismiss:o,inside:c,escapeKey:u=!0,outsidePointer:d=!0}=n,f=i(c),p=a(o);t.n(()=>{if(!r)return;let t={elements:()=>(f.current??[]).map(t=>e.c(t)).filter(e=>e!==null)};s.push(t);let n=new AbortController,i=(e,t)=>document.addEventListener(e,t,{signal:n.signal});return u&&i(`keydown`,e=>{e.key!==`Escape`||e.defaultPrevented||l()===t&&p(`escape`,e)}),d&&i(`pointerdown`,t=>{e.u(t,f.current??[])||p(`outside-pointer`,t)}),()=>{n.abort();let e=s.indexOf(t);e!==-1&&s.splice(e,1)}},[r,u,d,p,f])}function d(){let t=e.t()?.activeElement;return t&&t!==document.body?t:null}function f(t={}){let{enabled:n=!0,returnTo:i,preventScroll:o}=t,[s,c]=(0,r.useState)(null),[l,u]=(0,r.useState)(!1);n!==l&&(u(n),n&&c(d()));let f=a(()=>{(e.l(i)??s)?.focus({preventScroll:o})});return(0,r.useEffect)(()=>{if(n)return()=>{let e=document.activeElement;(!e||e===document.body||!document.contains(e))&&f()}},[n,f]),{returnFocus:f}}var p=10;function m(e,t){return t<0?-1:Math.max(0,Math.min(e,t))}function h(e,t,n,r,i){if(n===0)return-1;let a=e;for(let e=0;e<n;e++){if(a+=t,a<0||a>=n){if(!r)return-1;a=(a%n+n)%n}if(!i?.(a))return a}return-1}function g(e,t,n){return h(e===1?-1:t,e,t,!1,n)}function _(t){let{count:a,columns:s,columnIndexOf:c,pageSize:l=p,defaultActiveColumn:u=0,onActiveCellChange:d,orientation:f=`vertical`,loop:_=!0,activeIndex:v,defaultActiveIndex:y=0,onActiveIndexChange:b,isDisabled:x,textOf:S,focusItems:C=!0,onSelect:w}=t,[T,E]=o({value:v,defaultValue:y,onChange:b}),D=Math.min(T,a-1),O=s!==void 0,k=(0,r.useCallback)(e=>typeof s==`function`?s(e):s??0,[s]),A=(0,r.useCallback)((e,t)=>{let n=k(e);if(!c)return m(t,n-1);if(n<=0)return-1;let r=0;for(;r+1<n&&c(e,r+1)<=t;)r++;return r},[c,k]),[j,M]=(0,r.useState)(u),N=O&&D>=0?A(D,j):-1,P=(0,r.useRef)([]),F=(0,r.useRef)(new Map),I=(0,r.useRef)(new Map),L=(0,r.useRef)(new Map),R=(0,r.useRef)({query:``,at:0}),z=(0,r.useCallback)(e=>{P.current[e]?.focus()},[]),B=(0,r.useRef)(!1),V=(0,r.useCallback)((e,t)=>{B.current=!0,I.current.get(`${e}:${t}`)?.focus(),B.current=!1},[]),H=(0,r.useCallback)(()=>O?I.current.get(`${D}:${N}`)??null:P.current[D]??null,[N,D,O]),U=i({row:D,column:N}),W=i(j),G=i(d),K=i(k),q=i(A),J=i(c),Y=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=Math.max(0,t),o=r<0?-1:q.current(r,i),s=U.current;return r===s.row&&o===s.column?s:(E(r,n),M(i),G.current?.({row:r,column:o},n),{row:r,column:o})},[U,q,G,a,E]),X=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=r<0?-1:m(Math.max(0,t),K.current(r)-1);return Y(r,i<0?0:J.current?.(r,i)??i,n)},[J,a,Y,K]),Z=(0,r.useCallback)((e,t)=>{let n=`${e}:${t}`;return L.current.has(n)||L.current.set(n,e=>{e?I.current.set(n,e):(I.current.delete(n),L.current.delete(n))}),{ref:L.current.get(n),tabIndex:e===D&&t===N?0:-1,onFocus:()=>{B.current||X(e,t,{reason:`focus`})}}},[N,D,X]),Q=(0,r.useCallback)(e=>(F.current.has(e)||F.current.set(e,t=>{P.current[e]=t}),{ref:F.current.get(e),tabIndex:C?e===D?0:-1:void 0,onFocus:C?()=>E(e,{reason:`focus`}):void 0}),[D,C,E]),$=(0,r.useCallback)(t=>{let{row:n,column:r}=U.current,i=(e,n)=>{t.preventDefault();let r=X(e,n,{reason:`keyboard`,event:t});C&&V(r.row,r.column)},o=e=>{t.preventDefault();let n=Y(e,W.current,{reason:`keyboard`,event:t});C&&V(n.row,n.column)},s=2**53-1,c=()=>e.d(t.currentTarget)?-1:1;switch(t.key){case`ArrowRight`:return i(n,r+c());case`ArrowLeft`:return i(n,r-c());case`ArrowDown`:return o(n+1);case`ArrowUp`:return o(n-1);case`Home`:return t.ctrlKey||t.metaKey?i(0,0):i(n,0);case`End`:return t.ctrlKey||t.metaKey?i(a-1,s):i(n,s);case`PageDown`:return o(n+l);case`PageUp`:return o(n-l)}},[U,a,W,V,C,l,Y,X]);return{activeIndex:D,activeColumn:N,setActiveIndex:E,setActiveCell:X,onKeyDown:(0,r.useCallback)(t=>{if(t.defaultPrevented)return;if(O){$(t);return}let r=f!==`horizontal`,i=f!==`vertical`,o=R.current,s=n.t.isOpen(o,t.timeStamp),c=(e,n)=>{e!==-1&&e!==D&&(t.preventDefault(),E(e,{reason:n,event:t}),C&&z(e))};if(i&&(t.key===`ArrowRight`||t.key===`ArrowLeft`)){let n=t.key===`ArrowRight`!==e.d(t.currentTarget);c(h(D,n?1:-1,a,_,x),`keyboard`);return}if(t.key===`ArrowDown`&&r){c(h(D,1,a,_,x),`keyboard`);return}if(t.key===`ArrowUp`&&r){c(h(D,-1,a,_,x),`keyboard`);return}if(t.key===`Home`){c(g(1,a,x),`keyboard`);return}if(t.key===`End`){c(g(-1,a,x),`keyboard`);return}if(t.key===`Enter`||t.key===` `&&!(s&&S)){if(!w||D===-1)return;t.preventDefault(),w(D,t);return}if(S&&n.t.isPrintable(t)){let e=n.t.push(o,t.key,t.timeStamp);c(n.t.target(e,D,a,S,x),`typeahead`)}},[D,a,z,C,x,O,_,$,w,f,E,S]),itemProps:Q,cellProps:Z,activeItem:H}}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}});
+const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./keyboard.cjs");let r=require("react");function i(e){let n=(0,r.useRef)(e);return t.n(()=>{n.current=e}),n}function a(e){let t=i(e);return(0,r.useCallback)((...e)=>t.current?.(...e),[t])}function o(e){let{value:t,defaultValue:n,onChange:o}=e,s=t!==void 0,[c,l]=(0,r.useState)(n),u=s?t:c,d=i(u),f=a(o);return[u,(0,r.useCallback)((e,t)=>{let n=typeof e==`function`?e(d.current):e;Object.is(n,d.current)||(s||(d.current=n),l(n),f(n,t))},[f,d,s])]}var s=[];function c(e,t){let n=t.elements();return e.elements().some(e=>n.some(t=>e!==t&&e.contains(t)))}function l(){let e=s.filter(e=>!s.some(t=>t!==e&&c(e,t)));return e[e.length-1]}function u(n){let{enabled:r=!0,onDismiss:o,inside:c,escapeKey:u=!0,outsidePointer:d=!0}=n,f=i(c),p=a(o);t.n(()=>{if(!r)return;let t={elements:()=>(f.current??[]).map(t=>e.u(t)).filter(e=>e!==null)};s.push(t);let n=new AbortController,i=(e,t)=>document.addEventListener(e,t,{signal:n.signal});return u&&i(`keydown`,e=>{e.key!==`Escape`||e.defaultPrevented||l()===t&&p(`escape`,e)}),d&&i(`pointerdown`,t=>{e.f(t,f.current??[])||p(`outside-pointer`,t)}),()=>{n.abort();let e=s.indexOf(t);e!==-1&&s.splice(e,1)}},[r,u,d,p,f])}function d(){let t=e.t()?.activeElement;return t&&t!==document.body?t:null}function f(t={}){let{enabled:n=!0,returnTo:i,preventScroll:o}=t,[s,c]=(0,r.useState)(null),[l,u]=(0,r.useState)(!1);n!==l&&(u(n),n&&c(d()));let f=a(()=>{(e.d(i)??s)?.focus({preventScroll:o})});return(0,r.useEffect)(()=>{if(n)return()=>{let e=document.activeElement;(!e||e===document.body||!document.contains(e))&&f()}},[n,f]),{returnFocus:f}}var p=10;function m(e,t){return t<0?-1:Math.max(0,Math.min(e,t))}function h(e,t,n,r,i){if(n===0)return-1;let a=e;for(let e=0;e<n;e++){if(a+=t,a<0||a>=n){if(!r)return-1;a=(a%n+n)%n}if(!i?.(a))return a}return-1}function g(e,t,n){return h(e===1?-1:t,e,t,!1,n)}function _(t){let{count:a,columns:s,columnIndexOf:c,pageSize:l=p,defaultActiveColumn:u=0,onActiveCellChange:d,orientation:f=`vertical`,loop:_=!0,activeIndex:v,defaultActiveIndex:y=0,onActiveIndexChange:b,isDisabled:x,textOf:S,focusItems:C=!0,onSelect:w}=t,[T,E]=o({value:v,defaultValue:y,onChange:b}),D=Math.min(T,a-1),O=s!==void 0,k=(0,r.useCallback)(e=>typeof s==`function`?s(e):s??0,[s]),A=(0,r.useCallback)((e,t)=>{let n=k(e);if(!c)return m(t,n-1);if(n<=0)return-1;let r=0;for(;r+1<n&&c(e,r+1)<=t;)r++;return r},[c,k]),[j,M]=(0,r.useState)(u),N=O&&D>=0?A(D,j):-1,P=(0,r.useRef)([]),F=(0,r.useRef)(new Map),I=(0,r.useRef)(new Map),L=(0,r.useRef)(new Map),R=(0,r.useRef)({query:``,at:0}),z=(0,r.useCallback)(e=>{P.current[e]?.focus()},[]),B=(0,r.useRef)(!1),V=(0,r.useCallback)((e,t)=>{B.current=!0,I.current.get(`${e}:${t}`)?.focus(),B.current=!1},[]),H=(0,r.useCallback)(()=>O?I.current.get(`${D}:${N}`)??null:P.current[D]??null,[N,D,O]),U=i({row:D,column:N}),W=i(j),G=i(d),K=i(k),q=i(A),J=i(c),Y=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=Math.max(0,t),o=r<0?-1:q.current(r,i),s=U.current;return r===s.row&&o===s.column?s:(E(r,n),M(i),G.current?.({row:r,column:o},n),{row:r,column:o})},[U,q,G,a,E]),X=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=r<0?-1:m(Math.max(0,t),K.current(r)-1);return Y(r,i<0?0:J.current?.(r,i)??i,n)},[J,a,Y,K]),Z=(0,r.useCallback)((e,t)=>{let n=`${e}:${t}`;return L.current.has(n)||L.current.set(n,e=>{e?I.current.set(n,e):(I.current.delete(n),L.current.delete(n))}),{ref:L.current.get(n),tabIndex:e===D&&t===N?0:-1,onFocus:()=>{B.current||X(e,t,{reason:`focus`})}}},[N,D,X]),Q=(0,r.useCallback)(e=>(F.current.has(e)||F.current.set(e,t=>{P.current[e]=t}),{ref:F.current.get(e),tabIndex:C?e===D?0:-1:void 0,onFocus:C?()=>E(e,{reason:`focus`}):void 0}),[D,C,E]),$=(0,r.useCallback)(t=>{let{row:n,column:r}=U.current,i=(e,n)=>{t.preventDefault();let r=X(e,n,{reason:`keyboard`,event:t});C&&V(r.row,r.column)},o=e=>{t.preventDefault();let n=Y(e,W.current,{reason:`keyboard`,event:t});C&&V(n.row,n.column)},s=2**53-1,c=()=>e.p(t.currentTarget)?-1:1;switch(t.key){case`ArrowRight`:return i(n,r+c());case`ArrowLeft`:return i(n,r-c());case`ArrowDown`:return o(n+1);case`ArrowUp`:return o(n-1);case`Home`:return t.ctrlKey||t.metaKey?i(0,0):i(n,0);case`End`:return t.ctrlKey||t.metaKey?i(a-1,s):i(n,s);case`PageDown`:return o(n+l);case`PageUp`:return o(n-l)}},[U,a,W,V,C,l,Y,X]);return{activeIndex:D,activeColumn:N,setActiveIndex:E,setActiveCell:X,onKeyDown:(0,r.useCallback)(t=>{if(t.defaultPrevented)return;if(O){$(t);return}let r=f!==`horizontal`,i=f!==`vertical`,o=R.current,s=n.t.isOpen(o,t.timeStamp),c=(e,n)=>{e!==-1&&e!==D&&(t.preventDefault(),E(e,{reason:n,event:t}),C&&z(e))};if(i&&(t.key===`ArrowRight`||t.key===`ArrowLeft`)){let n=t.key===`ArrowRight`!==e.p(t.currentTarget);c(h(D,n?1:-1,a,_,x),`keyboard`);return}if(t.key===`ArrowDown`&&r){c(h(D,1,a,_,x),`keyboard`);return}if(t.key===`ArrowUp`&&r){c(h(D,-1,a,_,x),`keyboard`);return}if(t.key===`Home`){c(g(1,a,x),`keyboard`);return}if(t.key===`End`){c(g(-1,a,x),`keyboard`);return}if(t.key===`Enter`||t.key===` `&&!(s&&S)){if(!w||D===-1)return;t.preventDefault(),w(D,t);return}if(S&&n.t.isPrintable(t)){let e=n.t.push(o,t.key,t.timeStamp);c(n.t.target(e,D,a,S,x),`typeahead`)}},[D,a,z,C,x,O,_,$,w,f,E,S]),itemProps:Q,cellProps:Z,activeItem:H}}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}});

package/behavior.mjs

@@ -1,4 +1,4 @@
-import { c as e, d as t, l as n, t as r, u as i } from "./platform.mjs";
+import { d as e, f as t, p as n, t as r, u as i } from "./platform.mjs";
 import { n as a } from "./effects.mjs";
 import { t as o } from "./keyboard.mjs";
 import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
@@ -19,8 +19,12 @@ function p(e) {
 	let { value: t, defaultValue: n, onChange: r } = e, i = t !== void 0, [a, o] = u(n), c = i ? t : a, l = d(c), p = f(r);
 	return [c, s((e, t) => {
 		let n = typeof e == "function" ? e(l.current) : e;
-		Object.is(n, l.current) || (o(n), p(n, t));
-	}, [p, l])];
+		Object.is(n, l.current) || (i || (l.current = n), o(n), p(n, t));
+	}, [
+		p,
+		l,
+		i
+	])];
 }
 //#endregion
 //#region src/react/a11y/useDismiss.ts
@@ -33,21 +37,21 @@ function g() {
 	let e = m.filter((e) => !m.some((t) => t !== e && h(e, t)));
 	return e[e.length - 1];
 }
-function _(t) {
-	let { enabled: n = !0, onDismiss: r, inside: o, escapeKey: s = !0, outsidePointer: c = !0 } = t, l = d(o), u = f(r);
+function _(e) {
+	let { enabled: n = !0, onDismiss: r, inside: o, escapeKey: s = !0, outsidePointer: c = !0 } = e, l = d(o), u = f(r);
 	a(() => {
 		if (!n) return;
-		let t = { elements: () => (l.current ?? []).map((t) => e(t)).filter((e) => e !== null) };
-		m.push(t);
+		let e = { elements: () => (l.current ?? []).map((e) => i(e)).filter((e) => e !== null) };
+		m.push(e);
 		let r = new AbortController(), a = (e, t) => document.addEventListener(e, t, { signal: r.signal });
-		return s && a("keydown", (e) => {
-			e.key !== "Escape" || e.defaultPrevented || g() === t && u("escape", e);
+		return s && a("keydown", (t) => {
+			t.key !== "Escape" || t.defaultPrevented || g() === e && u("escape", t);
 		}), c && a("pointerdown", (e) => {
-			i(e, l.current ?? []) || u("outside-pointer", e);
+			t(e, l.current ?? []) || u("outside-pointer", e);
 		}), () => {
 			r.abort();
-			let e = m.indexOf(t);
-			e !== -1 && m.splice(e, 1);
+			let t = m.indexOf(e);
+			t !== -1 && m.splice(t, 1);
 		};
 	}, [
 		n,
@@ -63,18 +67,18 @@ function v() {
 	let e = r()?.activeElement;
 	return e && e !== document.body ? e : null;
 }
-function y(e = {}) {
-	let { enabled: t = !0, returnTo: r, preventScroll: i } = e, [a, o] = u(null), [s, l] = u(!1);
-	t !== s && (l(t), t && o(v()));
+function y(t = {}) {
+	let { enabled: n = !0, returnTo: r, preventScroll: i } = t, [a, o] = u(null), [s, l] = u(!1);
+	n !== s && (l(n), n && o(v()));
 	let d = f(() => {
-		(n(r) ?? a)?.focus({ preventScroll: i });
+		(e(r) ?? a)?.focus({ preventScroll: i });
 	});
 	return c(() => {
-		if (t) return () => {
+		if (n) return () => {
 			let e = document.activeElement;
 			(!e || e === document.body || !document.contains(e)) && d();
 		};
-	}, [t, d]), { returnFocus: d };
+	}, [n, d]), { returnFocus: d };
 }
 //#endregion
 //#region src/react/a11y/useRovingFocus.ts
@@ -98,11 +102,11 @@ function C(e, t, n) {
 	return S(e === 1 ? -1 : t, e, t, !1, n);
 }
 function w(e) {
-	let { count: n, columns: r, columnIndexOf: i, pageSize: a = b, defaultActiveColumn: c = 0, onActiveCellChange: f, orientation: m = "vertical", loop: h = !0, activeIndex: g, defaultActiveIndex: _ = 0, onActiveIndexChange: v, isDisabled: y, textOf: w, focusItems: T = !0, onSelect: E } = e, [D, O] = p({
+	let { count: t, columns: r, columnIndexOf: i, pageSize: a = b, defaultActiveColumn: c = 0, onActiveCellChange: f, orientation: m = "vertical", loop: h = !0, activeIndex: g, defaultActiveIndex: _ = 0, onActiveIndexChange: v, isDisabled: y, textOf: w, focusItems: T = !0, onSelect: E } = e, [D, O] = p({
 		value: g,
 		defaultValue: _,
 		onChange: v
-	}), k = Math.min(D, n - 1), A = r !== void 0, j = s((e) => typeof r == "function" ? r(e) : r ?? 0, [r]), M = s((e, t) => {
+	}), k = Math.min(D, t - 1), A = r !== void 0, j = s((e) => typeof r == "function" ? r(e) : r ?? 0, [r]), M = s((e, t) => {
 		let n = j(e);
 		if (!i) return x(t, n - 1);
 		if (n <= 0) return -1;
@@ -123,8 +127,8 @@ function w(e) {
 	]), G = d({
 		row: k,
 		column: F
-	}), K = d(N), q = d(f), J = d(j), Y = d(M), X = d(i), Z = s((e, t, r) => {
-		let i = x(e, n - 1), a = Math.max(0, t), o = i < 0 ? -1 : Y.current(i, a), s = G.current;
+	}), K = d(N), q = d(f), J = d(j), Y = d(M), X = d(i), Z = s((e, n, r) => {
+		let i = x(e, t - 1), a = Math.max(0, n), o = i < 0 ? -1 : Y.current(i, a), s = G.current;
 		return i === s.row && o === s.column ? s : (O(i, r), P(a), q.current?.({
 			row: i,
 			column: o
@@ -136,14 +140,14 @@ function w(e) {
 		G,
 		Y,
 		q,
-		n,
+		t,
 		O
-	]), Q = s((e, t, r) => {
-		let i = x(e, n - 1), a = i < 0 ? -1 : x(Math.max(0, t), J.current(i) - 1);
+	]), Q = s((e, n, r) => {
+		let i = x(e, t - 1), a = i < 0 ? -1 : x(Math.max(0, n), J.current(i) - 1);
 		return Z(i, a < 0 ? 0 : X.current?.(i, a) ?? a, r);
 	}, [
 		X,
-		n,
+		t,
 		Z,
 		J
 	]), ee = s((e, t) => {
@@ -186,20 +190,20 @@ function w(e) {
 				event: e
 			});
 			T && U(n.row, n.column);
-		}, c = 2 ** 53 - 1, l = () => t(e.currentTarget) ? -1 : 1;
+		}, c = 2 ** 53 - 1, l = () => n(e.currentTarget) ? -1 : 1;
 		switch (e.key) {
 			case "ArrowRight": return o(r, i + l());
 			case "ArrowLeft": return o(r, i - l());
 			case "ArrowDown": return s(r + 1);
 			case "ArrowUp": return s(r - 1);
 			case "Home": return e.ctrlKey || e.metaKey ? o(0, 0) : o(r, 0);
-			case "End": return e.ctrlKey || e.metaKey ? o(n - 1, c) : o(r, c);
+			case "End": return e.ctrlKey || e.metaKey ? o(t - 1, c) : o(r, c);
 			case "PageDown": return s(r + a);
 			case "PageUp": return s(r - a);
 		}
 	}, [
 		G,
-		n,
+		t,
 		K,
 		U,
 		T,
@@ -225,24 +229,24 @@ function w(e) {
 				}), T && V(t));
 			};
 			if (i && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
-				let r = e.key === "ArrowRight" !== t(e.currentTarget);
-				c(S(k, r ? 1 : -1, n, h, y), "keyboard");
+				let r = e.key === "ArrowRight" !== n(e.currentTarget);
+				c(S(k, r ? 1 : -1, t, h, y), "keyboard");
 				return;
 			}
 			if (e.key === "ArrowDown" && r) {
-				c(S(k, 1, n, h, y), "keyboard");
+				c(S(k, 1, t, h, y), "keyboard");
 				return;
 			}
 			if (e.key === "ArrowUp" && r) {
-				c(S(k, -1, n, h, y), "keyboard");
+				c(S(k, -1, t, h, y), "keyboard");
 				return;
 			}
 			if (e.key === "Home") {
-				c(C(1, n, y), "keyboard");
+				c(C(1, t, y), "keyboard");
 				return;
 			}
 			if (e.key === "End") {
-				c(C(-1, n, y), "keyboard");
+				c(C(-1, t, y), "keyboard");
 				return;
 			}
 			if (e.key === "Enter" || e.key === " " && !(s && w)) {
@@ -251,12 +255,12 @@ function w(e) {
 				return;
 			}
 			if (w && o.isPrintable(e)) {
-				let t = o.push(a, e.key, e.timeStamp);
-				c(o.target(t, k, n, w, y), "typeahead");
+				let n = o.push(a, e.key, e.timeStamp);
+				c(o.target(n, k, t, w, y), "typeahead");
 			}
 		}, [
 			k,
-			n,
+			t,
 			V,
 			T,
 			y,

package/box.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./client.cjs");let r=require("react");r=e.t(r,1);let i=require("@box-kite/core");function a({tag:e,tagProps:t,render:n}){let[i,a]=(0,r.useState)(!1);return r.default.createElement(e,{...t,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1)},n({isHover:i}))}function o(e,i){let{tag:o=`div`,children:s}=e,{classNames:c,styleElements:l}=n.i(e,o===`svg`),u=t.d(e,c);i&&(u.ref=i);let d=typeof s==`function`?r.default.createElement(a,{tag:o,tagProps:u,render:s}):r.default.createElement(o,u,s);return l?r.default.createElement(r.default.Fragment,null,l,d):d}var s=t.f(o,`Box`);s.extend=i.BoxExtends.extend,s.components=i.BoxExtends.components,s.createComponents=i.BoxExtends.createComponents,s.Components=n.o,s.keyframes=i.BoxExtends.keyframes,s.spring=i.Springs.spring,s.Theme=n.n,s.useTheme=n.n.useTheme,s.getVariableValue=e=>(0,i.getDefaultEngine)().getVariableValue(e),s.configure=n.r.configure,s.viewTransition=i.startViewTransition;function c(e,r){return t.p(n.i(e,r?.svg===!0),e.className)}exports.default=s,exports.useBoxElement=o,exports.useClassNames=c,exports.useVisibility=n.a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./client.cjs"),r=require("./interactions.cjs");let i=require("react");i=e.t(i,1);let a=require("@box-kite/core");function o({tag:e,tagProps:t,render:n}){let[r,a]=(0,i.useState)(!1);return i.default.createElement(e,{...t,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1)},n({isHover:r}))}function s(e,r){let{tag:a=`div`,children:s}=e,{classNames:c,styleElements:l}=n.i(e,a===`svg`),u=t.d(e,c);r&&(u.ref=r);let d=typeof s==`function`?i.default.createElement(o,{tag:a,tagProps:u,render:s}):i.default.createElement(a,u,s);return l?i.default.createElement(i.default.Fragment,null,l,d):d}var c=t.f(s,`Box`);c.extend=a.BoxExtends.extend,c.components=a.BoxExtends.components,c.palette=a.BoxExtends.palette,c.createComponents=a.BoxExtends.createComponents,c.Components=n.o,c.keyframes=a.BoxExtends.keyframes,c.spring=a.Springs.spring,c.Theme=n.n,c.useTheme=n.n.useTheme,c.useDesign=n.n.useDesign,c.getVariableValue=e=>(0,a.getDefaultEngine)().getVariableValue(e),c.configure=n.r.configure,c.viewTransition=a.startViewTransition,c.onInteraction=r.i,c.reportInteraction=r.r,c.flushInteractions=r.n;function l(e,r){return t.p(n.i(e,r?.svg===!0),e.className)}exports.default=c,exports.useBoxElement=s,exports.useClassNames=l,exports.useVisibility=n.a;

package/box.d.ts

@@ -8,6 +8,7 @@ import { ExtractElementFromTag } from './react/reactTypes';
 import { default as Theme } from './react/theme/theme';
 import { StylesContext } from './react/useStyles';
 import { ComponentsAndVariants } from '@box-kite/core/types';
+import { flushInteractions, reportInteraction, subscribeInteractions } from './utils/interactions/interactionChannel';
 /**
  * Box's render as a hook, for a component that is a Box with defaults: called from its own `forwardRef`, it
  * makes that component one fiber rather than a wrapper around a second one. `Flex`, `H1` and `Button` are this.
@@ -21,6 +22,8 @@ interface BoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never>(props: BoxCoreProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
     extend: typeof BoxExtends.extend;
     components: typeof BoxExtends.components;
+    /** The `vars` record that points the components' `accent` and `base` families at others, for an element and its subtree. */
+    palette: typeof BoxExtends.palette;
     /** A design for one subtree, registered nowhere: hand it to `<Box.Components value>` or `<Box.Theme components>`. */
     createComponents: typeof BoxExtends.createComponents;
     /** Every Box below resolves its `component` against this registry instead of the app's `Box.components()`. */
@@ -30,11 +33,19 @@ interface BoxType {
     spring: typeof Springs.spring;
     Theme: typeof Theme;
     useTheme: typeof Theme.useTheme;
+    /** Read the design the nearest `<Box.Theme>` draws in, and set it — `data-design` on its root. */
+    useDesign: typeof Theme.useDesign;
     getVariableValue: (name: string) => string;
     /** Explicit engine configuration (class-name hashing, style sink). Call once, before the first render. */
     configure: typeof StylesContext.configure;
     /** Run a DOM change inside a view transition where the browser has one, and plainly where it has not. */
     viewTransition: typeof startViewTransition;
+    /** Hear every interaction (a component's change, a press on anything it styled, the app's own) until the returned function is called. `{ content: true }` adds what people typed. */
+    onInteraction: typeof subscribeInteractions;
+    /** Report a moment of the app's own — a page view, a hover, a wizard step — to the same listeners, fire and forget. */
+    reportInteraction: typeof reportInteraction;
+    /** Deliver what is queued now: what an analytics sender calls before its last batch, and a test before it asserts. */
+    flushInteractions: typeof flushInteractions;
 }
 declare const Box: BoxType;
 export default Box;
@@ -60,3 +71,6 @@ export declare function useClassNames<TKey extends keyof ComponentsAndVariants =
 }): BoxClassNames;
 export { useVisibility };
 export type { BoxClassNames, BoxClassNameProps };
+export type { ComponentInteraction, ComponentInteractions, CustomInteraction, DomInteraction, InteractionEvent, InteractionJson, InteractionListener, InteractionOptions, InteractionReport, } from './utils/interactions/interactionChannel';
+export type { BoxConfiguration } from './react/useStyles';
+export type { BoxComponentStyles, BoxStyleProps } from '@box-kite/core/types';

package/box.mjs

@@ -1,30 +1,31 @@
 import { d as e, f as t, p as n } from "./react-shared.mjs";
 import { a as r, i, n as a, o, r as s } from "./client.mjs";
-import c, { useState as l } from "react";
-import { BoxExtends as u, Springs as d, getDefaultEngine as f, startViewTransition as p } from "@box-kite/core";
+import { i as c, n as l, r as u } from "./interactions.mjs";
+import d, { useState as f } from "react";
+import { BoxExtends as p, Springs as m, getDefaultEngine as h, startViewTransition as g } from "@box-kite/core";
 //#region src/box.ts
-function m({ tag: e, tagProps: t, render: n }) {
-	let [r, i] = l(!1);
-	return c.createElement(e, {
+function _({ tag: e, tagProps: t, render: n }) {
+	let [r, i] = f(!1);
+	return d.createElement(e, {
 		...t,
 		onMouseEnter: () => i(!0),
 		onMouseLeave: () => i(!1)
 	}, n({ isHover: r }));
 }
-function h(t, n) {
-	let { tag: r = "div", children: a } = t, { classNames: o, styleElements: s } = i(t, r === "svg"), l = e(t, o);
-	n && (l.ref = n);
-	let u = typeof a == "function" ? c.createElement(m, {
+function v(t, n) {
+	let { tag: r = "div", children: a } = t, { classNames: o, styleElements: s } = i(t, r === "svg"), c = e(t, o);
+	n && (c.ref = n);
+	let l = typeof a == "function" ? d.createElement(_, {
 		tag: r,
-		tagProps: l,
+		tagProps: c,
 		render: a
-	}) : c.createElement(r, l, a);
-	return s ? c.createElement(c.Fragment, null, s, u) : u;
+	}) : d.createElement(r, c, a);
+	return s ? d.createElement(d.Fragment, null, s, l) : l;
 }
-var g = t(h, "Box");
-g.extend = u.extend, g.components = u.components, g.createComponents = u.createComponents, g.Components = o, g.keyframes = u.keyframes, g.spring = d.spring, g.Theme = a, g.useTheme = a.useTheme, g.getVariableValue = (e) => f().getVariableValue(e), g.configure = s.configure, g.viewTransition = p;
-function _(e, t) {
+var y = t(v, "Box");
+y.extend = p.extend, y.components = p.components, y.palette = p.palette, y.createComponents = p.createComponents, y.Components = o, y.keyframes = p.keyframes, y.spring = m.spring, y.Theme = a, y.useTheme = a.useTheme, y.useDesign = a.useDesign, y.getVariableValue = (e) => h().getVariableValue(e), y.configure = s.configure, y.viewTransition = g, y.onInteraction = c, y.reportInteraction = u, y.flushInteractions = l;
+function b(e, t) {
 	return n(i(e, t?.svg === !0), e.className);
 }
 //#endregion
-export { g as default, h as useBoxElement, _ as useClassNames, r as useVisibility };
+export { y as default, v as useBoxElement, b as useClassNames, r as useVisibility };