@box-kite/react 2.2.7 → 2.2.8

package/platform.mjs

@@ -1,48 +1,67 @@
+//#region src/utils/interactions/componentAttribute.ts
+var e = globalThis[Symbol.for("box-kite.componentAttribute")] ??= {
+	on: !1,
+	warnings: !0
+}, t = () => e.on, n = () => e.warnings;
+function r(t) {
+	e.on = t;
+}
+function i(t) {
+	e.warnings = t;
+}
+//#endregion
 //#region src/utils/dom/domUtils.ts
-function e(e) {
+function a(e) {
 	return e ? "current" in e ? e.current : e : null;
 }
-function t(t) {
-	let n = e(t);
-	return n instanceof HTMLElement ? n : null;
+function o(e) {
+	let t = a(e);
+	return t instanceof HTMLElement ? t : null;
 }
-function n(t, n) {
-	let r = typeof t.composedPath == "function" ? t.composedPath() : [];
-	return n.some((n) => {
-		let i = e(n);
-		return i ? r.includes(i) || t.target instanceof Node && i.contains(t.target) : !1;
+function s(e, t) {
+	let n = typeof e.composedPath == "function" ? e.composedPath() : [];
+	return t.some((t) => {
+		let r = a(t);
+		return r ? n.includes(r) || e.target instanceof Node && r.contains(e.target) : !1;
 	});
 }
-function r(t) {
-	let n = e(t), r = n?.ownerDocument?.defaultView;
-	return !!n && !!r && r.getComputedStyle(n).direction === "rtl";
+function c(e) {
+	let t = a(e), n = t?.ownerDocument?.defaultView;
+	return !!t && !!n && n.getComputedStyle(t).direction === "rtl";
 }
-function i(t) {
-	let n = e(t)?.ownerDocument?.defaultView?.getSelection();
-	n && !n.isCollapsed && n.removeAllRanges();
+function l(e) {
+	let t = a(e)?.ownerDocument?.defaultView?.getSelection();
+	t && !t.isCollapsed && t.removeAllRanges();
 }
 //#endregion
 //#region src/utils/environment/environmentUtils.ts
-function a() {
+function u() {
 	return typeof window < "u" && window.document !== void 0;
 }
-function o() {
+function d() {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return !1;
+	}
+}
+function f() {
 	return typeof document < "u";
 }
-function s() {
-	return o() ? document : null;
+function p() {
+	return f() ? document : null;
 }
-function c() {
-	return s()?.documentElement ?? null;
+function m() {
+	return p()?.documentElement ?? null;
 }
-function l() {
+function h() {
 	return typeof HTMLElement < "u" && typeof HTMLElement.prototype.showPopover == "function";
 }
-function u() {
+function g() {
 	return typeof HTMLDialogElement < "u" && "closedBy" in HTMLDialogElement.prototype;
 }
-function d(e) {
+function _(e) {
 	return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(e);
 }
 //#endregion
-export { u as a, e as c, r as d, d as i, t as l, c as n, l as o, a as r, i as s, s as t, n as u };
+export { n as _, d as a, h as c, o as d, s as f, r as g, i as h, u as i, l, t as m, m as n, _ as o, c as p, f as r, g as s, p as t, a as u };

package/react/interactions/interactions.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { InteractionComponent, InteractionSource, InteractionType } from '../../utils/interactions/interactionChannel';
+import { ChangeDetails, ControllableStateOptions, SetControllableState } from '../a11y/useControllableState';
+export declare function QuietInteractions({ children }: {
+    children: ReactNode;
+}): import('react').FunctionComponentElement<import('react').ProviderProps<boolean>>;
+/** Where a quiet part renders the app's own content (a `rowDetail`, a column's `Cell`), which reports as usual. */
+export declare function ReportInteractions({ children }: {
+    children: ReactNode;
+}): import('react').FunctionComponentElement<import('react').ProviderProps<boolean>>;
+/**
+ * A callback's details as they stand, or a record of them: `reason`, `event` and `content` are lifted out and the rest is
+ * `details`. `content` names what a person typed or picked as data (`['value', 'oldValue']`), which a listener has to ask for.
+ */
+export type InteractionDetails = (Partial<ChangeDetails> | Record<string, unknown>) & {
+    content?: readonly string[];
+};
+export type ReportInteraction<C extends InteractionComponent> = (type: InteractionType<C>, value?: unknown, details?: InteractionDetails) => void;
+/** `report(type, value, { reason, event, content, ...details })` for one component, silent inside `QuietInteractions`. */
+export declare function useInteractionReporter<C extends InteractionComponent>(component: C | undefined): ReportInteraction<C>;
+/** A stable change handler that `Box.onInteraction` hears as well, under `component` and `type`. */
+export declare function useInteractionCallback<C extends InteractionComponent, T, TDetails extends ChangeDetails>(fn: ((value: T, details: TDetails) => void) | undefined, component: C, type: InteractionType<C>): (value: T, details: TDetails) => void;
+/** Which component a value belongs to and which of its changes it is, plus what of it is content. */
+export type ReportedAs = InteractionSource & {
+    content?: readonly string[];
+};
+/** `useControllableState`, with every change it makes also reaching `Box.onInteraction`. */
+export declare function useReportedState<T, TReason extends string = string>(options: ControllableStateOptions<T, TReason> & {
+    interaction?: ReportedAs;
+}): [T, SetControllableState<T, TReason>];

package/react/popover/usePopoverLayer.d.ts

@@ -1,4 +1,5 @@
 import { ElementLike } from '../../utils/dom/domUtils';
+import { InteractionSource } from '../../utils/interactions/interactionChannel';
 import { ChangeHandler, SetControllableState } from '../a11y/useControllableState';
 /** Why a layer opened or closed — every component built on this reports the same four. */
 export type PopoverReason = 'trigger' | 'escape' | 'outside-pointer' | 'imperative';
@@ -54,6 +55,8 @@ export interface PopoverLayerOptions<THasPopup extends PopoverHasPopup = Popover
      * one. The platform answers that question itself, by the popover nesting rules.
      */
     inside?: readonly ElementLike[];
+    /** Which component the layer is, so its open state also reaches `Box.onInteraction`. */
+    interaction?: InteractionSource;
 }
 export interface PopoverLayer<THasPopup extends PopoverHasPopup = PopoverHasPopup, TReason extends string = never> {
     /** Whether the browser's Popover API is placing the layer in the top layer. `false` is the portal path. */

package/react/useStyles.d.ts

@@ -2,6 +2,13 @@ import { StylesConfiguration } from '@box-kite/core';
 import { BoxStyleProps } from '@box-kite/core/types';
 import { ResolvedBoxStyles } from './resolveStyles';
 export type { StylesConfiguration };
+export interface BoxConfiguration extends StylesConfiguration {
+    /**
+     * Write `data-bk="<component key>"` on every element a component styles, so one delegated listener can
+     * name what was pressed. Set it where the server and the browser both run, or hydration sees two trees.
+     */
+    componentAttribute?: boolean;
+}
 export default function useStyles(props: BoxStyleProps<any>, isSvg: boolean): ResolvedBoxStyles;
 /**
  * Rules that target a root selector (`html`) instead of a class. Returns their style elements in
@@ -20,5 +27,5 @@ export declare namespace StylesContext {
     /** The id of the `<style>` element the default engine writes to. */
     function styleElementId(): string;
     /** Apply explicit engine configuration. Call before the first render — cached class names are dropped when the configuration changes. */
-    function configure(config: StylesConfiguration): void;
+    function configure({ componentAttribute, ...config }: BoxConfiguration): void;
 }

package/react-shared.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs");let t=require("react");t=e.t(t,1);let n=require("@box-kite/core");function r({classNames:e,styleElements:t},r){return{className:(0,n.classNames)(e,r).join(` `),styles:t}}var i=parseInt(t.default.version,10)>=19;function a(e,n){let r=i?({ref:t,...n})=>e(n,t??null):(0,t.forwardRef)(e),a=(0,t.memo)(r);return r.displayName=n,a.displayName=n,a}var o={selected:`aria-selected`},s;(function(e){function t(e,t,n){e!==void 0&&e!=null&&(n[o[t]??t]=Array.isArray(e)?e[0]:e)}e.assignBooleanProp=t})(s||={});var c=s;function l(e,t){let r=e,{props:i,className:a,disabled:o,required:s,checked:l,selected:u}=r,d={...i,className:(0,n.classNames)(t,a).join(` `)};return c.assignBooleanProp(o,`disabled`,d),c.assignBooleanProp(s,`required`,d),c.assignBooleanProp(l,`checked`,d),c.assignBooleanProp(u,`selected`,d),`style`in r&&(d.style=r.style),`id`in r&&(d.id=r.id),d}var u=parseInt(t.default.version,10)>=19,d=!1,f=new WeakMap,p=new WeakMap;function m(e){let n=f.get(e);if(!n){let{href:r,css:i,precedence:a}=e;n=t.default.createElement(`style`,{key:r,href:r,precedence:a,dangerouslySetInnerHTML:{__html:i}}),f.set(e,n)}return n}function h(e){if(!e?.length)return;!u&&!d&&(d=!0,console.warn(`[box-kite] Box.configure({ sink: 'element' }) needs React 19 to hoist and dedupe its <style> elements; React ${t.default.version} will render them inline. Use the default sink instead.`));let n=p.get(e);return n||(n=e.map(m),p.set(e,n)),n}function g(e,t,r){let{classNames:i,signature:a,styleElements:o}=(0,n.getDefaultEngine)().resolveClassNames(e,t,r);return{classNames:i,signature:a,styleElements:h(o)}}var _=`__boxAttributesInProps`;function v(e){return e[_]=!0,e}function y(e){return typeof e==`function`||typeof e==`object`&&e?e[_]===!0:!1}var b=[`role`,`aria-label`,`aria-labelledby`,`aria-hidden`];function x(e,t){if(e!==void 0)return{role:`img`,"aria-label":e};if(!(t&&b.some(e=>e in t)))return{"aria-hidden":!0}}var S;(function(e){function t(e){return e.charAt(0).toUpperCase()+e.slice(1)}e.capitalize=t})(S||={});var C=S,w;(function(e){function t(e,t,n){let r={...e},i=r.props||{};return t.forEach(e=>{e in r&&(i[e]=r[e],delete r[e])}),n&&Object.entries(n).forEach(([e,t])=>{i[e]=t}),r.props=i,r}e.buildProps=t;function n(e){return!!e&&typeof e==`object`}e.isObject=n;function r(e,t){return e in t}e.isKeyOf=r})(w||={});var T=w,E=[`sky-500`,`emerald-500`,`amber-500`,`violet-500`,`rose-500`,`cyan-500`],D=[`sky-400`,`emerald-400`,`amber-400`,`violet-400`,`rose-400`,`cyan-400`];function O(e){return e.reduce((e,t,n)=>(e[`chart-${n+1}`]=t,e),{})}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return h}});
+const e=require("./rolldown-runtime.cjs"),t=require("./platform.cjs");let n=require("react");n=e.t(n,1);let r=require("@box-kite/core");function i({classNames:e,styleElements:t},n){return{className:(0,r.classNames)(e,n).join(` `),styles:t}}var a=parseInt(n.default.version,10)>=19;function o(e,t){let r=a?({ref:t,...n})=>e(n,t??null):(0,n.forwardRef)(e),i=(0,n.memo)(r);return r.displayName=t,i.displayName=t,i}var s={selected:`aria-selected`},c;(function(e){function t(e,t,n){e!==void 0&&e!=null&&(n[s[t]??t]=Array.isArray(e)?e[0]:e)}e.assignBooleanProp=t})(c||={});var l=c;function u(e,n){let i=e,{props:a,className:o,disabled:s,required:c,checked:u,selected:d}=i,f={...a,className:(0,r.classNames)(n,o).join(` `)};return typeof i.component==`string`&&t.m()&&(f[`data-bk`]??=i.component),l.assignBooleanProp(s,`disabled`,f),l.assignBooleanProp(c,`required`,f),l.assignBooleanProp(u,`checked`,f),l.assignBooleanProp(d,`selected`,f),`style`in i&&(f.style=i.style),`id`in i&&(f.id=i.id),f}var d=parseInt(n.default.version,10)>=19,f=!1,p=new WeakMap,m=new WeakMap;function h(e){let t=p.get(e);if(!t){let{href:r,css:i,precedence:a}=e;t=n.default.createElement(`style`,{key:r,href:r,precedence:a,dangerouslySetInnerHTML:{__html:i}}),p.set(e,t)}return t}function g(e){if(!e?.length)return;!d&&!f&&(f=!0,console.warn(`[box-kite] Box.configure({ sink: 'element' }) needs React 19 to hoist and dedupe its <style> elements; React ${n.default.version} will render them inline. Use the default sink instead.`));let t=m.get(e);return t||(t=e.map(h),m.set(e,t)),t}function _(e,t,n){let{classNames:i,signature:a,styleElements:o}=(0,r.getDefaultEngine)().resolveClassNames(e,t,n);return{classNames:i,signature:a,styleElements:g(o)}}var v=`__boxAttributesInProps`;function y(e){return e[v]=!0,e}function b(e){return typeof e==`function`||typeof e==`object`&&e?e[v]===!0:!1}var x=[`role`,`aria-label`,`aria-labelledby`,`aria-hidden`];function S(e,t){if(e!==void 0)return{role:`img`,"aria-label":e};if(!(t&&x.some(e=>e in t)))return{"aria-hidden":!0}}var C;(function(e){function t(e){return e.charAt(0).toUpperCase()+e.slice(1)}e.capitalize=t})(C||={});var w=C,T;(function(e){function t(e,t,n){let r={...e},i=r.props||{};return t.forEach(e=>{e in r&&(i[e]=r[e],delete r[e])}),n&&Object.entries(n).forEach(([e,t])=>{i[e]=t}),r.props=i,r}e.buildProps=t;function n(e){return!!e&&typeof e==`object`}e.isObject=n;function r(e,t){return e in t}e.isKeyOf=r})(T||={});var E=T,D=[`sky-500`,`emerald-500`,`amber-500`,`violet-500`,`rose-500`,`cyan-500`],O=[`sky-400`,`emerald-400`,`amber-400`,`violet-400`,`rose-400`,`cyan-400`];function k(e){return e.reduce((e,t,n)=>(e[`chart-${n+1}`]=t,e),{})}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return g}});

package/react-shared.mjs

@@ -1,104 +1,105 @@
-import e, { forwardRef as t, memo as n } from "react";
-import { classNames as r, getDefaultEngine as i } from "@box-kite/core";
+import { m as e } from "./platform.mjs";
+import t, { forwardRef as n, memo as r } from "react";
+import { classNames as i, getDefaultEngine as a } from "@box-kite/core";
 //#region src/react/boxClassNames.ts
-function a({ classNames: e, styleElements: t }, n) {
+function o({ classNames: e, styleElements: t }, n) {
 	return {
-		className: r(e, n).join(" "),
+		className: i(e, n).join(" "),
 		styles: t
 	};
 }
 //#endregion
 //#region src/react/boxComponent.ts
-var o = parseInt(e.version, 10) >= 19;
-function s(e, r) {
-	let i = o ? ({ ref: t, ...n }) => e(n, t ?? null) : t(e), a = n(i);
-	return i.displayName = r, a.displayName = r, a;
+var s = parseInt(t.version, 10) >= 19;
+function c(e, t) {
+	let i = s ? ({ ref: t, ...n }) => e(n, t ?? null) : n(e), a = r(i);
+	return i.displayName = t, a.displayName = t, a;
 }
 //#endregion
 //#region src/utils/box/boxUtils.ts
-var c = { selected: "aria-selected" }, l;
+var l = { selected: "aria-selected" }, u;
 (function(e) {
 	function t(e, t, n) {
-		e !== void 0 && e != null && (n[c[t] ?? t] = Array.isArray(e) ? e[0] : e);
+		e !== void 0 && e != null && (n[l[t] ?? t] = Array.isArray(e) ? e[0] : e);
 	}
 	e.assignBooleanProp = t;
-})(l ||= {});
-var u = l;
+})(u ||= {});
+var d = u;
 //#endregion
 //#region src/react/boxTagProps.ts
-function d(e, t) {
-	let n = e, { props: i, className: a, disabled: o, required: s, checked: c, selected: l } = n, d = {
-		...i,
-		className: r(t, a).join(" ")
+function f(t, n) {
+	let r = t, { props: a, className: o, disabled: s, required: c, checked: l, selected: u } = r, f = {
+		...a,
+		className: i(n, o).join(" ")
 	};
-	return u.assignBooleanProp(o, "disabled", d), u.assignBooleanProp(s, "required", d), u.assignBooleanProp(c, "checked", d), u.assignBooleanProp(l, "selected", d), "style" in n && (d.style = n.style), "id" in n && (d.id = n.id), d;
+	return typeof r.component == "string" && e() && (f["data-bk"] ??= r.component), d.assignBooleanProp(s, "disabled", f), d.assignBooleanProp(c, "required", f), d.assignBooleanProp(l, "checked", f), d.assignBooleanProp(u, "selected", f), "style" in r && (f.style = r.style), "id" in r && (f.id = r.id), f;
 }
 //#endregion
 //#region src/react/styleElements.ts
-var f = parseInt(e.version, 10) >= 19, p = !1, m = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap();
-function g(t) {
-	let n = m.get(t);
+var p = parseInt(t.version, 10) >= 19, m = !1, h = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap();
+function _(e) {
+	let n = h.get(e);
 	if (!n) {
-		let { href: r, css: i, precedence: a } = t;
-		n = e.createElement("style", {
+		let { href: r, css: i, precedence: a } = e;
+		n = t.createElement("style", {
 			key: r,
 			href: r,
 			precedence: a,
 			dangerouslySetInnerHTML: { __html: i }
-		}), m.set(t, n);
+		}), h.set(e, n);
 	}
 	return n;
 }
-function _(t) {
-	if (!t?.length) return;
-	!f && !p && (p = !0, console.warn(`[box-kite] Box.configure({ sink: 'element' }) needs React 19 to hoist and dedupe its <style> elements; React ${e.version} will render them inline. Use the default sink instead.`));
-	let n = h.get(t);
-	return n || (n = t.map(g), h.set(t, n)), n;
+function v(e) {
+	if (!e?.length) return;
+	!p && !m && (m = !0, console.warn(`[box-kite] Box.configure({ sink: 'element' }) needs React 19 to hoist and dedupe its <style> elements; React ${t.version} will render them inline. Use the default sink instead.`));
+	let n = g.get(e);
+	return n || (n = e.map(_), g.set(e, n)), n;
 }
 //#endregion
 //#region src/react/resolveStyles.ts
-function v(e, t, n) {
-	let { classNames: r, signature: a, styleElements: o } = i().resolveClassNames(e, t, n);
+function y(e, t, n) {
+	let { classNames: r, signature: i, styleElements: o } = a().resolveClassNames(e, t, n);
 	return {
 		classNames: r,
-		signature: a,
-		styleElements: _(o)
+		signature: i,
+		styleElements: v(o)
 	};
 }
 //#endregion
 //#region src/react/svg/attributesInProps.ts
-var y = "__boxAttributesInProps";
-function b(e) {
-	return e[y] = !0, e;
-}
+var b = "__boxAttributesInProps";
 function x(e) {
-	return typeof e == "function" || typeof e == "object" && e ? e[y] === !0 : !1;
+	return e[b] = !0, e;
+}
+function S(e) {
+	return typeof e == "function" || typeof e == "object" && e ? e[b] === !0 : !1;
 }
 //#endregion
 //#region src/react/svg/svgNaming.ts
-var S = [
+var C = [
 	"role",
 	"aria-label",
 	"aria-labelledby",
 	"aria-hidden"
 ];
-function C(e, t) {
+function w(e, t) {
 	if (e !== void 0) return {
 		role: "img",
 		"aria-label": e
 	};
-	if (!(t && S.some((e) => e in t))) return { "aria-hidden": !0 };
+	if (!(t && C.some((e) => e in t))) return { "aria-hidden": !0 };
 }
 //#endregion
 //#region src/utils/string/stringUtils.ts
-var w;
+var T;
 (function(e) {
 	function t(e) {
 		return e.charAt(0).toUpperCase() + e.slice(1);
 	}
 	e.capitalize = t;
-})(w ||= {});
-var T = w, E;
+})(T ||= {});
+var E = T, D;
 (function(e) {
 	function t(e, t, n) {
 		let r = { ...e }, i = r.props || {};
@@ -117,15 +118,15 @@ var T = w, E;
 		return e in t;
 	}
 	e.isKeyOf = r;
-})(E ||= {});
-var D = E, O = [
+})(D ||= {});
+var O = D, k = [
 	"sky-500",
 	"emerald-500",
 	"amber-500",
 	"violet-500",
 	"rose-500",
 	"cyan-500"
-], k = [
+], A = [
 	"sky-400",
 	"emerald-400",
 	"amber-400",
@@ -133,8 +134,8 @@ var D = E, O = [
 	"rose-400",
 	"cyan-400"
 ];
-function A(e) {
+function j(e) {
 	return e.reduce((e, t, n) => (e[`chart-${n + 1}`] = t, e), {});
 }
 //#endregion
-export { T as a, b as c, d, s as f, D as i, v as l, O as n, C as o, a as p, A as r, x as s, k as t, _ as u };
+export { E as a, x as c, f as d, c as f, O as i, y as l, k as n, w as o, o as p, j as r, S as s, A as t, v as u };

package/reporting.cjs

@@ -0,0 +1 @@
+const e=require("./interactions.cjs"),t=require("./behavior.cjs");let n=require("react");var r=(0,n.createContext)(!1);function i({children:e}){return(0,n.createElement)(r.Provider,{value:!0},e)}function a({children:e}){return(0,n.createElement)(r.Provider,{value:!1},e)}function o(t){let i=(0,n.useContext)(r);return(0,n.useCallback)((n,r,a={})=>{if(i||!t)return;let{reason:o,event:s,content:c,...l}=a;e.t({component:t,type:n,reason:o,value:r,details:l,event:s,content:c})},[i,t])}function s(e,r,i){let a=t.o(e),s=o(r);return(0,n.useCallback)((e,t)=>{a.current?.(e,t),s(i,e,t)},[a,s,i])}function c(e){let{interaction:n,onChange:r,...i}=e,a=o(n?.component);return t.i({...i,onChange:(e,t)=>{r?.(e,t),n&&a(n.type,e,{...t,content:n.content})}})}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/reporting.mjs

@@ -0,0 +1,51 @@
+import { t as e } from "./interactions.mjs";
+import { i as t, o as n } from "./behavior.mjs";
+import { createContext as r, createElement as i, useCallback as a, useContext as o } from "react";
+//#region src/react/interactions/interactions.ts
+var s = r(!1);
+function c({ children: e }) {
+	return i(s.Provider, { value: !0 }, e);
+}
+function l({ children: e }) {
+	return i(s.Provider, { value: !1 }, e);
+}
+function u(t) {
+	let n = o(s);
+	return a((r, i, a = {}) => {
+		if (n || !t) return;
+		let { reason: o, event: s, content: c, ...l } = a;
+		e({
+			component: t,
+			type: r,
+			reason: o,
+			value: i,
+			details: l,
+			event: s,
+			content: c
+		});
+	}, [n, t]);
+}
+function d(e, t, r) {
+	let i = n(e), o = u(t);
+	return a((e, t) => {
+		i.current?.(e, t), o(r, e, t);
+	}, [
+		i,
+		o,
+		r
+	]);
+}
+function f(e) {
+	let { interaction: n, onChange: r, ...i } = e, a = u(n?.component);
+	return t({
+		...i,
+		onChange: (e, t) => {
+			r?.(e, t), n && a(n.type, e, {
+				...t,
+				content: n.content
+			});
+		}
+	});
+}
+//#endregion
+export { f as a, u as i, l as n, d as r, c as t };

package/scrolling.cjs

@@ -1 +1 @@
-const e=require("./platform.cjs");function t(e,t,n=e.length){let r=0,i=n-1;if(i<=0)return 0;for(;r<i;){let n=r+i+1>>>1;e[n]<=t?r=n:i=n-1}return r}function n(t){let n=e.c(t),r=n?.ownerDocument?.defaultView;if(!n||!r)return null;let i=n.ownerDocument.scrollingElement??n.ownerDocument.documentElement;for(let e=n.parentElement;e&&e!==i&&e!==n.ownerDocument.body;e=e.parentElement)if(/auto|scroll|overlay/.test(r.getComputedStyle(e).overflowY)&&e.scrollHeight>e.clientHeight)return e;return null}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});
+const e=require("./platform.cjs");function t(e,t,n=e.length){let r=0,i=n-1;if(i<=0)return 0;for(;r<i;){let n=r+i+1>>>1;e[n]<=t?r=n:i=n-1}return r}function n(t){let n=e.u(t),r=n?.ownerDocument?.defaultView;if(!n||!r)return null;let i=n.ownerDocument.scrollingElement??n.ownerDocument.documentElement;for(let e=n.parentElement;e&&e!==i&&e!==n.ownerDocument.body;e=e.parentElement)if(/auto|scroll|overlay/.test(r.getComputedStyle(e).overflowY)&&e.scrollHeight>e.clientHeight)return e;return null}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});

package/scrolling.mjs

@@ -1,4 +1,4 @@
-import { c as e } from "./platform.mjs";
+import { u as e } from "./platform.mjs";
 //#region src/utils/virtual/rowSearch.ts
 function t(e, t, n = e.length) {
 	let r = 0, i = n - 1;

package/supabase/functions/collect/index.d.ts

@@ -0,0 +1,30 @@
+/** What the collector needs from its environment: Supabase injects the first two into every Edge Function. */
+export interface CollectorEnv {
+    SUPABASE_URL: string;
+    /** The legacy `service_role` JWT or a new `sb_secret_…` key; `ANALYTICS_WRITE_KEY` overrides it. */
+    SUPABASE_SERVICE_ROLE_KEY: string;
+    /** Comma-separated origins allowed to post. */
+    ANALYTICS_ORIGINS?: string;
+}
+/** One `analytics_events` row. Anyone can post to a collector, so every field is checked and capped first. */
+export interface EventRow {
+    id: string;
+    occurred_at: string;
+    name: string;
+    page: string;
+    session_id: string;
+    visitor_id: string | null;
+    reason: string | null;
+    label: string | null;
+    referrer: string | null;
+    country: string | null;
+    data: Record<string, unknown>;
+}
+export declare const DEFAULT_ORIGINS = "https://www.box-kite.dev,https://box-kite.dev";
+/** A batch is 20 records; more than this in one request is not the site's beacon. */
+export declare const MAX_EVENTS = 50;
+export declare const MAX_BODY: number;
+/** The `{ events }` body `beacon()` posts, as rows; a record with no id, name or session is dropped. */
+export declare function toRows(body: unknown, country: string, now: number): EventRow[];
+/** The collector `beacon()` posts the site's records to: each one becomes an `analytics_events` row. */
+export declare function collect(request: Request, env: CollectorEnv, send?: typeof fetch): Promise<Response>;

package/supabase/functions/collect/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/analytics/analytics.d.ts

@@ -0,0 +1,72 @@
+import { InteractionEvent, InteractionJson } from '../interactions/interactionChannel';
+/** One interaction as a collector stores it: flat, plain JSON, and nothing that only means something inside this tab. */
+export interface AnalyticsEvent {
+    /** Unique per event, so a collector that is sent a batch twice keeps it once. */
+    id: string;
+    /** `component.type`: `tabs.valueChange`, `button.click`, `router.navigate`. */
+    name: string;
+    kind: InteractionEvent['kind'];
+    component: string;
+    type: string;
+    reason?: string;
+    value?: InteractionJson;
+    details?: {
+        [key: string]: InteractionJson;
+    };
+    source: 'user' | 'app';
+    /** The DOM event's type (`click`, `keydown`) rather than the event, which is a live object. */
+    trigger?: string;
+    /** The control's own words, as the page shows them: a button's, a link's, a tab's. */
+    label?: string;
+    /** ISO 8601. */
+    time: string;
+    url: string;
+    /** One visit: a new one after `sessionTimeout` with nothing happening, and with every new tab. */
+    sessionId: string;
+    /** One browser across visits, with `visitor: true` and consent. */
+    visitorId?: string;
+}
+/** Where a batch goes: `beacon(url)`, `consoleLog()`, or a function that hands it to a vendor's SDK. */
+export type AnalyticsTransport = (events: AnalyticsEvent[]) => void;
+/** `'pending'` holds what happens in memory and stores nothing; `'denied'` drops it and forgets both ids. */
+export type AnalyticsConsent = 'granted' | 'pending' | 'denied';
+export interface AnalyticsOptions {
+    send: AnalyticsTransport | AnalyticsTransport[];
+    /** Default `'granted'`. Start at `'pending'` where a reader in the EU has not answered a consent banner yet. */
+    consent?: AnalyticsConsent;
+    /** A `visitorId` kept in `localStorage`, written only once consent is granted. Default `false`. */
+    visitor?: boolean;
+    /** What people typed, pasted or picked as data, toast text and the URL's query and hash. Default `false`. */
+    content?: boolean;
+    /** Milliseconds with nothing happening before the next event starts a new session. Default 30 minutes. */
+    sessionTimeout?: number;
+    /** Sent once this many are waiting, or `wait` milliseconds after the first of them. Default 20 and 5000. */
+    batch?: {
+        size?: number;
+        wait?: number;
+    };
+    /** Return `false` to leave an interaction out; it is handed over as `Box.onInteraction` hears it, element and all. */
+    filter?: (event: InteractionEvent) => boolean;
+    /** What the ids are stored under. Default `'box-kite'`. */
+    storageKey?: string;
+}
+export interface Analytics {
+    /** What the reader answered: granting sends what was held, denying drops it and forgets both ids. */
+    consent(next: AnalyticsConsent): void;
+    /** Send whatever is waiting, now. */
+    flush(): void;
+    /** Stop listening, after sending whatever is waiting. */
+    stop(): void;
+}
+/**
+ * `Box.onInteraction`, collected: every interaction as a flat JSON record with a session id, batched, held until consent is
+ * granted, and sent as the page is hidden. Framework-free, and inert on a server.
+ */
+export declare function createAnalytics(options: AnalyticsOptions): Analytics;
+/**
+ * A batch posted to `url` as `{ "events": [...] }`, with `sendBeacon` so it survives the page closing. The body is JSON
+ * sent as `text/plain`, which keeps it a simple request with no preflight, so the collector reads the body as JSON whatever the type.
+ */
+export declare function beacon(url: string): AnalyticsTransport;
+/** Every record to the console, one line each: what a developer reads while building. */
+export declare function consoleLog(prefix?: string): AnalyticsTransport;

package/utils/analytics/analyticsIdentity.d.ts

@@ -0,0 +1,13 @@
+/** The two ids an analytics record carries: one visit, and (only when asked for and consented to) one browser across visits. */
+export declare const DEFAULT_SESSION_TIMEOUT: number;
+/** A random id: `crypto.randomUUID` where the page is secure, the same 122 random bits by hand where it is not. */
+export declare function randomId(): string;
+export interface Identity {
+    /** The visit `time` belongs to: a new one after `timeout` with nothing happening, and with every new tab. */
+    sessionAt(time: number): string;
+    /** The browser, across visits; the caller asks only once consent is granted. */
+    visitor(): string;
+    /** Consent withdrawn: both ids are forgotten, here and in storage. */
+    forget(): void;
+}
+export declare function createIdentity(prefix: string, timeout: number): Identity;

package/utils/interactions/componentAttribute.d.ts

@@ -0,0 +1,6 @@
+/** Whether a Box with a `component` writes `data-bk="<key>"` — what lets the channel name a click. */
+export declare const marksComponents: () => boolean;
+/** Whether the channel may say, in development, that it cannot name a click: `Box.configure({ warnings })`. */
+export declare const warnsWithoutAttribute: () => boolean;
+export declare function setComponentAttribute(enabled: boolean): void;
+export declare function setAttributeWarnings(enabled: boolean): void;

package/utils/interactions/interactionChannel.d.ts

@@ -0,0 +1,35 @@
+import { InteractionEvent, InteractionListener, InteractionOptions, InteractionReport } from './interactionTypes';
+export type { ComponentInteraction, ComponentInteractions, CustomInteraction, DomInteraction, InteractionComponent, InteractionEvent, InteractionJson, InteractionListener, InteractionOptions, InteractionReport, InteractionSource, InteractionType, } from './interactionTypes';
+/** What happened, as it stood when it happened; everything else is worked out on delivery. */
+export interface Entry {
+    kind: InteractionEvent['kind'];
+    input: InteractionReport;
+    event?: Event;
+    /** The element a React handler ran on, read now: `currentTarget` is gone once dispatch ends. */
+    handler?: unknown;
+    timeStamp: number;
+    time: number;
+    url: string;
+}
+export interface Channel {
+    listeners: Map<InteractionListener, InteractionOptions>;
+    queue: Entry[];
+    /** The event the browser is dispatching, so a change made inside a handler names it without being told. */
+    dispatching?: Event;
+    /** Both set by the delivery half when it loads; until then, what happens waits in the queue. */
+    schedule?: () => void;
+    flush?: () => void;
+    loading?: boolean;
+    warned?: boolean;
+}
+/**
+ * Hear every interaction from here on, until the returned function is called. Delivery is fire and forget: events arrive in order,
+ * batched, in a background task after the handler that caused them, and a listener that throws is reported rather than rethrown.
+ */
+export declare function subscribeInteractions(listener: InteractionListener, options?: InteractionOptions): () => void;
+/** Deliver whatever is queued, now: what an analytics sender calls on `pagehide` before it sends its batch. */
+export declare const flushInteractions: () => void;
+/** What a component reports, beside the callback it fires for the same change. */
+export declare const emitInteraction: (input: InteractionReport) => void;
+/** A moment of the app's own (a page view, a hover, a wizard step) to the same listeners, fire and forget. */
+export declare const reportInteraction: (input: InteractionReport) => void;

package/utils/interactions/interactionJson.d.ts

@@ -0,0 +1,6 @@
+import { InteractionJson } from './interactionTypes';
+/**
+ * A value as plain JSON, or `undefined` for what has none: a function, a React element, a DOM node, a class instance.
+ * A `Date` is its ISO string, a `Set` an array and a `Map` a record; an object met a second time is left out, which cuts a cycle.
+ */
+export declare function toInteractionJson(value: unknown): InteractionJson | undefined;

package/utils/interactions/interactionListening.d.ts

@@ -0,0 +1,6 @@
+import { Channel } from './interactionChannel';
+/**
+ * The half of the channel fetched with the first subscription: delivery, which event is being dispatched (so a change made
+ * inside a handler names it unasked), and a press on anything a component styled.
+ */
+export default function deliver(channel: Channel): void;