@box-kite/react 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -96,7 +96,7 @@
     "check:conventions": "node scripts/check-component-conventions.mjs",
     "check:agents": "node scripts/check-agent-files.mjs",
     "docs:agents": "node scripts/check-agent-files.mjs --fix",
-    "check:package": "publint dist && attw --pack dist --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error && publint dist-core && attw --pack dist-core --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error",
+    "check:package": "publint dist && attw --pack dist --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error && publint dist-core && attw --pack dist-core --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error && publint dist-mcp",
     "bench": "node bench/run.mjs",
     "compare": "node dev/compare/report.mjs",
     "compare:tailwind": "node dev/compare/report.mjs tailwind",
@@ -112,27 +112,30 @@
       "path": "dist/box.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "32.63 KB"
+      "limit": "36.28 KB"
     },
     {
       "name": "Box in a Server Component (react-server entry)",
       "path": "dist/rsc.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "31.17 KB"
+      "limit": "34.69 KB"
     },
     {
       "name": "Behavior primitives (a11y entry)",
       "path": "dist/a11y.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
       "limit": "3.2 KB"
@@ -142,7 +145,8 @@
       "path": "dist/anchor.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
       "limit": "2.25 KB"
@@ -152,17 +156,19 @@
       "path": "dist/catalog.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "50.72 KB"
+      "limit": "54.73 KB"
     },
     {
       "name": "Spec renderer (spec entry)",
       "path": "dist/spec.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
       "limit": "4.7 KB"
@@ -172,7 +178,8 @@
       "path": "dist/interop.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
       "limit": "4 KB"
@@ -181,154 +188,172 @@
       "name": "Core engine (@box-kite/core, no React)",
       "path": "dist-core/core.mjs",
       "gzip": true,
-      "limit": "31.96 KB"
+      "limit": "35.73 KB",
+      "ignore": [
+        "./diagnostics-*"
+      ]
     },
     {
       "name": "Dialog",
       "path": "dist/components/dialog.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "34.76 KB"
+      "limit": "38.35 KB"
     },
     {
       "name": "Popover",
       "path": "dist/components/popover.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "36.24 KB"
+      "limit": "39.88 KB"
     },
     {
       "name": "Menu",
       "path": "dist/components/menu.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "38.5 KB"
+      "limit": "42.15 KB"
     },
     {
       "name": "Accordion",
       "path": "dist/components/accordion.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "33.96 KB"
+      "limit": "37.60 KB"
     },
     {
       "name": "Agent",
       "path": "dist/components/agent.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "34.69 KB"
+      "limit": "38.34 KB"
     },
     {
       "name": "Markdown",
       "path": "dist/components/markdown.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "33.24 KB"
+      "limit": "36.84 KB"
     },
     {
       "name": "Skeleton",
       "path": "dist/components/skeleton.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "32.55 KB"
+      "limit": "36.17 KB"
     },
     {
       "name": "Tabs",
       "path": "dist/components/tabs.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "35.2 KB"
+      "limit": "38.80 KB"
     },
     {
       "name": "Slider",
       "path": "dist/components/slider.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "34.34 KB"
+      "limit": "37.95 KB"
     },
     {
       "name": "Progress",
       "path": "dist/components/progress.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "32.51 KB"
+      "limit": "36.15 KB"
     },
     {
       "name": "Toaster",
       "path": "dist/components/toaster.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "36.0 KB"
+      "limit": "39.62 KB"
     },
     {
       "name": "Combobox",
       "path": "dist/components/combobox.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "41.73 KB"
+      "limit": "45.41 KB"
     },
     {
       "name": "Dashboard",
       "path": "dist/components/dashboard.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "38.2 KB"
+      "limit": "41.80 KB"
     },
     {
       "name": "DataGrid",
       "path": "dist/components/dataGrid.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "79.67 KB"
+      "limit": "83.18 KB"
     },
     {
       "name": "DataGrid export, the chunk fetched on the first press",
       "path": "dist/gridExport.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
       "limit": "3.8 KB"
@@ -338,10 +363,11 @@
       "path": "dev/size-full.mjs",
       "ignore": [
         "react",
-        "react-dom"
+        "react-dom",
+        "./diagnostics-*"
       ],
       "gzip": true,
-      "limit": "111.25 KB"
+      "limit": "114.74 KB"
     }
   ],
   "repository": {
@@ -369,13 +395,13 @@
     "url": "https://github.com/box-kite/box-kite/issues"
   },
   "homepage": "https://www.box-kite.dev",
-  "description": "One React component with 221 typed CSS props that generates atomic CSS at runtime — no CSS files, no build step, renders in a Server Component.",
+  "description": "One React component with 235 typed CSS props that generates atomic CSS at runtime — no CSS files, no build step, renders in a Server Component.",
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@box-kite/core": "2.1.0",
+    "@box-kite/core": "2.2.0",
     "csstype": "^3.2.3",
     "use-sync-external-store": "^1.6.0"
   },
@@ -390,6 +416,7 @@
     "@iconify/react": "^6.0.2",
     "@json-render/core": "^0.20.0",
     "@json-render/react": "^0.20.0",
+    "@lezer/javascript": "^1.5.5",
     "@modelcontextprotocol/sdk": "^1.30.0",
     "@mui/material": "^9.4.0",
     "@mui/x-data-grid": "^9.14.0",
@@ -403,7 +430,6 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.6",
     "@types/node": "^26.1.2",
-    "@types/prismjs": "^1.26.6",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@types/use-sync-external-store": "^1.5.0",
@@ -424,13 +450,13 @@
     "lucide-react": "^1.28.0",
     "marked": "^18.0.11",
     "prettier": "^3.9.6",
-    "prismjs": "^1.30.0",
     "publint": "^0.3.24",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-router-dom": "^7.18.2",
     "recharts": "^3.10.1",
     "size-limit": "^13.0.3",
+    "sucrase": "^3.35.1",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.66.0",
     "unplugin-icons": "^23.0.1",

package/react/boxComponent.d.ts

@@ -0,0 +1,10 @@
+import { default as React, Ref } from 'react';
+type Render = (props: any, ref: any) => React.ReactNode;
+/**
+ * A component that is a Box: memoized, which skips a leaf whose props are all primitives, and one fiber on
+ * React 19. React 18 needs a `forwardRef` under the `memo`, which makes it two.
+ */
+export default function boxComponent(render: Render, displayName: string): React.MemoExoticComponent<((props: {
+    ref?: Ref<unknown>;
+}) => React.ReactNode) | React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>>;
+export {};

package/react/popover/useTopLayer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Whether a floating layer goes in the top layer or in a portal — and, which is the point of reading it
+ * through a store, *when* that is decided. Asking the browser directly during a server render answers
+ * false (there is no `HTMLElement`), so the portal branch is taken and renders nothing, while the client
+ * renders the layer: one React #418 per load for any layer that is open in server-rendered HTML (bug
+ * #197). The server snapshot is therefore the top-layer shape.
+ *
+ * React reads that snapshot only while hydrating, so the two paths — which are different *positions* in
+ * the React tree, and so a remount — cost one correction on exactly one path: a browser with no Popover
+ * API adopting HTML that already holds the layer, where nothing can have been focused inside it yet. A
+ * layer a browser mounts (a dropdown opening) reads the real answer on its first render and never moves,
+ * which is what B2 stage 2 fixed and what a `useState(true)` corrected in an effect gives up.
+ *
+ * The consequence for a caller: while hydrating, this says `true` in a browser that has no `showPopover`
+ * to call, so an effect that calls one asks `supportsPopover()` rather than trusting this.
+ */
+export default function useTopLayer(): boolean;

package/react/theme/theme.d.ts

@@ -12,6 +12,16 @@ interface ThemeProps {
      * `globalStyles={{ scrollbarColor: ['violet-500', 'transparent'], theme: { dark: { scrollbarColor: [...] } } }}`.
      */
     globalStyles?: BoxStyleProps;
+    /**
+     * Cross-fade the page when the theme changes, where the browser has view transitions. Off by default,
+     * because a transition is a decision about the app rather than about theming.
+     *
+     * It exists as a prop rather than a recipe because the recipe has a trap in it: `startViewTransition`
+     * screenshots the page the moment its callback returns, and a `setState` has not rendered by then — so
+     * a hand-rolled version captures the old theme twice and nothing appears to change. This flushes the
+     * update inside the callback. Reduced motion skips the transition and keeps the theme change.
+     */
+    viewTransition?: boolean;
 }
 /**
  * The React binding for the theme system. Everything that actually touches the platform — reading

package/react/useStyles.d.ts

@@ -15,6 +15,8 @@ export declare namespace StylesContext {
     function clear(): void;
     /** The CSS emitted so far, as text. Flushes first — see `StyleEngine.getStyles`. */
     function getStyles(): string;
+    /** The CSS as a `<style>` element the browser can adopt — see `StyleEngine.getStyleTag`. */
+    function getStyleTag(): string;
     /** 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. */

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={selected:`aria-selected`},a;(function(e){function t(e,t,n){e!==void 0&&e!=null&&(n[i[t]??t]=Array.isArray(e)?e[0]:e)}e.assignBooleanProp=t})(a||={});var o=a;function s(e,t){let r=e,{props:i,className:a,disabled:s,required:c,checked:l,selected:u}=r,d={...i,className:(0,n.classNames)(t,a).join(` `)};return o.assignBooleanProp(s,`disabled`,d),o.assignBooleanProp(c,`required`,d),o.assignBooleanProp(l,`checked`,d),o.assignBooleanProp(u,`selected`,d),`style`in r&&(d.style=r.style),`id`in r&&(d.id=r.id),d}var c=parseInt(t.default.version,10)>=19,l=!1;function u(e){if(e?.length)return!c&&!l&&(l=!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.`)),e.map(({href:e,css:n,precedence:r})=>t.default.createElement(`style`,{key:e,href:e,precedence:r,dangerouslySetInnerHTML:{__html:n}}))}function d(e,t){let{classNames:r,signature:i,styleElements:a}=(0,n.getDefaultEngine)().resolveClassNames(e,t);return{classNames:r,signature:i,styleElements:u(a)}}var f=`__boxAttributesInProps`;function p(e){return e[f]=!0,e}function m(e){return typeof e==`function`||typeof e==`object`&&e?e[f]===!0:!1}var h=[`role`,`aria-label`,`aria-labelledby`,`aria-hidden`];function g(e,t){if(e!==void 0)return{role:`img`,"aria-label":e};if(!(t&&h.some(e=>e in t)))return{"aria-hidden":!0}}var _;(function(e){function t(e){return e.charAt(0).toUpperCase()+e.slice(1)}e.capitalize=t})(_||={});var v=_,y;(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})(y||={});var b=y,x=[`sky-500`,`emerald-500`,`amber-500`,`violet-500`,`rose-500`,`cyan-500`],S=[`sky-400`,`emerald-400`,`amber-400`,`violet-400`,`rose-400`,`cyan-400`];function C(e){return e.reduce((e,t,n)=>(e[`chart-${n+1}`]=t,e),{})}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return u}});
+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?t=>e(t,t.ref??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;function f(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.`)),e.map(({href:e,css:n,precedence:r})=>t.default.createElement(`style`,{key:e,href:e,precedence:r,dangerouslySetInnerHTML:{__html:n}}))}function p(e,t){let{classNames:r,signature:i,styleElements:a}=(0,n.getDefaultEngine)().resolveClassNames(e,t);return{classNames:r,signature:i,styleElements:f(a)}}var m=`__boxAttributesInProps`;function h(e){return e[m]=!0,e}function g(e){return typeof e==`function`||typeof e==`object`&&e?e[m]===!0:!1}var _=[`role`,`aria-label`,`aria-labelledby`,`aria-hidden`];function v(e,t){if(e!==void 0)return{role:`img`,"aria-label":e};if(!(t&&_.some(e=>e in t)))return{"aria-hidden":!0}}var y;(function(e){function t(e){return e.charAt(0).toUpperCase()+e.slice(1)}e.capitalize=t})(y||={});var b=y,x;(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})(x||={});var S=x,C=[`sky-500`,`emerald-500`,`amber-500`,`violet-500`,`rose-500`,`cyan-500`],w=[`sky-400`,`emerald-400`,`amber-400`,`violet-400`,`rose-400`,`cyan-400`];function T(e){return e.reduce((e,t,n)=>(e[`chart-${n+1}`]=t,e),{})}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return h}}),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 S}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return f}});

package/react-shared.mjs

@@ -1,36 +1,43 @@
-import e from "react";
-import { classNames as t, getDefaultEngine as n } from "@box-kite/core";
+import e, { forwardRef as t, memo as n } from "react";
+import { classNames as r, getDefaultEngine as i } from "@box-kite/core";
 //#region src/react/boxClassNames.ts
-function r({ classNames: e, styleElements: n }, r) {
+function a({ classNames: e, styleElements: t }, n) {
 	return {
-		className: t(e, r).join(" "),
-		styles: n
+		className: r(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 ? (t) => e(t, t.ref ?? null) : t(e), a = n(i);
+	return i.displayName = r, a.displayName = r, a;
+}
+//#endregion
 //#region src/utils/box/boxUtils.ts
-var i = { selected: "aria-selected" }, a;
+var c = { selected: "aria-selected" }, l;
 (function(e) {
 	function t(e, t, n) {
-		e !== void 0 && e != null && (n[i[t] ?? t] = Array.isArray(e) ? e[0] : e);
+		e !== void 0 && e != null && (n[c[t] ?? t] = Array.isArray(e) ? e[0] : e);
 	}
 	e.assignBooleanProp = t;
-})(a ||= {});
-var o = a;
+})(l ||= {});
+var u = l;
 //#endregion
 //#region src/react/boxTagProps.ts
-function s(e, n) {
-	let r = e, { props: i, className: a, disabled: s, required: c, checked: l, selected: u } = r, d = {
+function d(e, t) {
+	let n = e, { props: i, className: a, disabled: o, required: s, checked: c, selected: l } = n, d = {
 		...i,
-		className: t(n, a).join(" ")
+		className: r(t, a).join(" ")
 	};
-	return o.assignBooleanProp(s, "disabled", d), o.assignBooleanProp(c, "required", d), o.assignBooleanProp(l, "checked", d), o.assignBooleanProp(u, "selected", d), "style" in r && (d.style = r.style), "id" in r && (d.id = r.id), d;
+	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;
 }
 //#endregion
 //#region src/react/styleElements.ts
-var c = parseInt(e.version, 10) >= 19, l = !1;
-function u(t) {
-	if (t?.length) return !c && !l && (l = !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.`)), t.map(({ href: t, css: n, precedence: r }) => e.createElement("style", {
+var f = parseInt(e.version, 10) >= 19, p = !1;
+function m(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.`)), t.map(({ href: t, css: n, precedence: r }) => e.createElement("style", {
 		key: t,
 		href: t,
 		precedence: r,
@@ -39,48 +46,48 @@ function u(t) {
 }
 //#endregion
 //#region src/react/resolveStyles.ts
-function d(e, t) {
-	let { classNames: r, signature: i, styleElements: a } = n().resolveClassNames(e, t);
+function h(e, t) {
+	let { classNames: n, signature: r, styleElements: a } = i().resolveClassNames(e, t);
 	return {
-		classNames: r,
-		signature: i,
-		styleElements: u(a)
+		classNames: n,
+		signature: r,
+		styleElements: m(a)
 	};
 }
 //#endregion
 //#region src/react/svg/attributesInProps.ts
-var f = "__boxAttributesInProps";
-function p(e) {
-	return e[f] = !0, e;
+var g = "__boxAttributesInProps";
+function _(e) {
+	return e[g] = !0, e;
 }
-function m(e) {
-	return typeof e == "function" || typeof e == "object" && e ? e[f] === !0 : !1;
+function v(e) {
+	return typeof e == "function" || typeof e == "object" && e ? e[g] === !0 : !1;
 }
 //#endregion
 //#region src/react/svg/svgNaming.ts
-var h = [
+var y = [
 	"role",
 	"aria-label",
 	"aria-labelledby",
 	"aria-hidden"
 ];
-function g(e, t) {
+function b(e, t) {
 	if (e !== void 0) return {
 		role: "img",
 		"aria-label": e
 	};
-	if (!(t && h.some((e) => e in t))) return { "aria-hidden": !0 };
+	if (!(t && y.some((e) => e in t))) return { "aria-hidden": !0 };
 }
 //#endregion
 //#region src/utils/string/stringUtils.ts
-var _;
+var x;
 (function(e) {
 	function t(e) {
 		return e.charAt(0).toUpperCase() + e.slice(1);
 	}
 	e.capitalize = t;
-})(_ ||= {});
-var v = _, y;
+})(x ||= {});
+var S = x, C;
 (function(e) {
 	function t(e, t, n) {
 		let r = { ...e }, i = r.props || {};
@@ -99,15 +106,15 @@ var v = _, y;
 		return e in t;
 	}
 	e.isKeyOf = r;
-})(y ||= {});
-var b = y, x = [
+})(C ||= {});
+var w = C, T = [
 	"sky-500",
 	"emerald-500",
 	"amber-500",
 	"violet-500",
 	"rose-500",
 	"cyan-500"
-], S = [
+], E = [
 	"sky-400",
 	"emerald-400",
 	"amber-400",
@@ -115,8 +122,8 @@ var b = y, x = [
 	"rose-400",
 	"cyan-400"
 ];
-function C(e) {
+function D(e) {
 	return e.reduce((e, t, n) => (e[`chart-${n + 1}`] = t, e), {});
 }
 //#endregion
-export { v as a, p as c, s as d, r as f, b as i, d as l, x as n, g as o, C as r, m as s, S as t, u };
+export { S as a, _ as c, d, s as f, w as i, h as l, T as n, b as o, a as p, D as r, v as s, E as t, m as u };

package/rsc.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs");let n=require("react");n=e.t(n,1);let r=require("@box-kite/core");(0,r.getDefaultEngine)().configure({sink:`element`});function i(e){let{tag:r=`div`,children:i}=e;if(typeof i==`function`)throw Error(`[box-kite] Box children as a function track hover state, which needs the client Box — render it from a 'use client' module.`);let{classNames:a,styleElements:o}=t.l(e,r===`svg`);return n.default.createElement(n.default.Fragment,null,o,n.default.createElement(r,t.d(e,a),i))}var a=i;a.extend=r.BoxExtends.extend,a.components=r.BoxExtends.components,a.keyframes=r.BoxExtends.keyframes,a.spring=r.Springs.spring,a.getVariableValue=e=>(0,r.getDefaultEngine)().getVariableValue(e),a.configure=e=>(0,r.getDefaultEngine)().configure(e);function o(e,n){return t.f(t.l(e,n?.svg===!0),e.className)}exports.default=a,exports.useClassNames=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs");let n=require("react");n=e.t(n,1);let r=require("@box-kite/core");(0,r.getDefaultEngine)().configure({sink:`element`});function i(e,r){let{tag:i=`div`,children:a}=e;if(typeof a==`function`)throw Error(`[box-kite] Box children as a function track hover state, which needs the client Box — render it from a 'use client' module.`);let{classNames:o,styleElements:s}=t.l(e,i===`svg`);return n.default.createElement(n.default.Fragment,null,s,n.default.createElement(i,t.d(e,o),a))}function a(e){return i(e)}var o=a;o.extend=r.BoxExtends.extend,o.components=r.BoxExtends.components,o.keyframes=r.BoxExtends.keyframes,o.spring=r.Springs.spring,o.getVariableValue=e=>(0,r.getDefaultEngine)().getVariableValue(e),o.configure=e=>(0,r.getDefaultEngine)().configure(e),o.viewTransition=r.startViewTransition;function s(e,n){return t.p(t.l(e,n?.svg===!0),e.className)}exports.default=o,exports.useBoxElement=i,exports.useClassNames=s;

package/rsc.d.ts

@@ -1,8 +1,13 @@
 import { default as React } from 'react';
-import { BoxExtends, Springs, StylesConfiguration } from '@box-kite/core';
+import { BoxExtends, Springs, startViewTransition, StylesConfiguration } from '@box-kite/core';
 import { BoxClassNames } from './react/boxClassNames';
 import { BoxClassNameProps, BoxCoreProps } from './react/boxProps';
 import { ComponentsAndVariants } from '@box-kite/core/types';
+/**
+ * The client entry's `useBoxElement` with no hook in it, so a component built on it renders on a server too —
+ * the export condition picks the half. The `use` prefix stays for the reason `useClassNames` keeps it.
+ */
+export declare function useBoxElement<TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never>(props: BoxCoreProps<TTag, TKey>, _ref?: unknown): React.ReactNode;
 interface RscBoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never>(props: BoxCoreProps<TTag, TKey>): React.ReactNode;
     extend: typeof BoxExtends.extend;
@@ -13,6 +18,11 @@ interface RscBoxType {
     getVariableValue: (name: string) => string;
     /** Explicit engine configuration. Element mode is already on; this is for the rest of it. */
     configure: (config: StylesConfiguration) => void;
+    /**
+     * Run a DOM change inside a view transition. Here for parity with the client entry — with no document
+     * there is no transition, so on a server it is the update and nothing else.
+     */
+    viewTransition: typeof startViewTransition;
 }
 declare const RscBox: RscBoxType;
 /**