@box-kite/react 2.3.1 → 2.4.1

package/docs/index.md

@@ -11,4 +11,4 @@ The markdown `@box-kite/react` ships for whatever is reading its source tree. No
 - [`interop.md`](interop.md) — the agentic runtimes (`@box-kite/react/interop`): AI SDK, assistant-ui, CopilotKit, A2UI and AG-UI, each verified against its own package
 - [`mcp.md`](mcp.md) — the MCP server (`npx @box-kite/mcp`), whose `check_styles` tool is the only way to be sure a value works
 
-The rest sits at the package root: `BOX_KITE_AI_CONTEXT.md`, the long-form reference (prop tables, the DataGrid API, debugging); `.claude/skills/box-kite/`, the same rules as an installable skill with four references beside it; and `.cursor/rules/box-kite.mdc`, which is that skill as a Cursor rule — copy either into the project rather than reading it from here, so it is loaded without anyone asking.
+The rest sits at the package root: `BOX_KITE_AI_CONTEXT.md`, the long-form reference (prop tables, the DataGrid API, debugging); `.claude/skills/box-kite/`, the same rules as an installable skill with five references beside it; and `.cursor/rules/box-kite.mdc`, which is that skill as a Cursor rule — copy either into the project rather than reading it from here, so it is loaded without anyone asking.

package/docs/props.md

@@ -666,7 +666,7 @@ The flex-direction CSS property sets how flex items are placed in the flex conta
 
 ### `display`
 
-The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.
+The `display` CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. Every Box is `block` until told otherwise, so margin and padding always apply, except an inline phrasing element (`a`, `span`, `label`, `time`, `mark`, `code`…), which is `inline-block` so it stays in its sentence. A prose link that must wrap with its sentence sets `display="inline"`.
 
 - Writes: `display`
 - Values: `none` · `block` · `inline` · `inline-block` · `flex` · `inline-flex` · `grid` · `inline-grid` · `contents` · `list-item` · `table` · `table-header-group` · `table-row-group` · `table-row` · `table-cell`

package/effects.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs"),t=require("./platform.cjs");let n=require("react");n=e.t(n,1);var r=t.i(),i=r?n.useLayoutEffect:n.useEffect,a=r?n.default.useInsertionEffect??n.useLayoutEffect:n.useEffect;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
+const e=require("./platform.cjs");let t=require("react");var n=e.i(),r=n?t.useLayoutEffect:t.useEffect,i=n?t.useInsertionEffect:t.useEffect;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/effects.mjs

@@ -1,6 +1,6 @@
 import { i as e } from "./platform.mjs";
-import t, { useEffect as n, useLayoutEffect as r } from "react";
+import { useEffect as t, useInsertionEffect as n, useLayoutEffect as r } from "react";
 //#region src/react/effects.ts
-var i = e(), a = i ? r : n, o = i ? t.useInsertionEffect ?? r : n;
+var i = e(), a = i ? r : t, o = i ? n : t;
 //#endregion
 export { a as n, o as t };

package/identity.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs");let t=require("react");t=e.t(t,1);var n=t.default.useId??(()=>void 0),r=0;function i(e){return e.replace(/[^\w-]/g,``)}function a(e=`box`){let a=n(),[o]=(0,t.useState)(()=>`${++r}`);return`${e}-${a?i(a):o}`}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
+let e=require("react");function t(e){return e.replace(/[^\w-]/g,``)}function n(n=`box`){return`${n}-${t((0,e.useId)())}`}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});

package/identity.mjs

@@ -1,12 +1,10 @@
-import e, { useState as t } from "react";
+import { useId as e } from "react";
 //#region src/react/identity/useIdentifier.ts
-var n = e.useId ?? (() => void 0), r = 0;
-function i(e) {
+function t(e) {
 	return e.replace(/[^\w-]/g, "");
 }
-function a(e = "box") {
-	let a = n(), [o] = t(() => `${++r}`);
-	return `${e}-${a ? i(a) : o}`;
+function n(n = "box") {
+	return `${n}-${t(e())}`;
 }
 //#endregion
-export { a as t };
+export { n as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -95,7 +95,7 @@
     "test:watch": "vitest",
     "test:a11y": "vitest run a11y",
     "lint": "eslint .",
-    "check:boundaries": "node scripts/check-core-boundary.mjs && node scripts/check-rsc-boundary.mjs",
+    "check:boundaries": "node scripts/check-core-boundary.mjs && node scripts/check-rsc-boundary.mjs && node scripts/check-dependencies.mjs",
     "check:brand": "node scripts/check-brand.mjs",
     "check:docs": "node scripts/check-docs-snippets.mjs",
     "check:props": "node scripts/check-props-api.mjs",
@@ -104,6 +104,8 @@
     "docs:components": "node scripts/check-components-api.mjs --fix",
     "check:catalog": "node scripts/check-catalog-api.mjs",
     "docs:catalog": "node scripts/check-catalog-api.mjs --fix",
+    "check:csstype": "node scripts/check-csstype.mjs",
+    "docs:csstype": "node scripts/check-csstype.mjs --fix",
     "check:create": "node scripts/check-create-templates.mjs",
     "docs:create": "node scripts/check-create-templates.mjs --fix",
     "check:conventions": "node scripts/check-component-conventions.mjs",
@@ -132,7 +134,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "43.33 kB"
+      "limit": "45.51 kB"
     },
     {
       "name": "Box in a Server Component (react-server entry)",
@@ -145,7 +147,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "40.72 kB"
+      "limit": "42.88 kB"
     },
     {
       "name": "Behavior primitives (a11y entry)",
@@ -184,7 +186,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "64.50 kB"
+      "limit": "67.01 kB"
     },
     {
       "name": "Spec renderer (spec entry)",
@@ -242,7 +244,7 @@
       "name": "Core engine (@box-kite/core, no React)",
       "path": "dist-core/core.mjs",
       "gzip": true,
-      "limit": "41.95 kB",
+      "limit": "44.09 kB",
       "ignore": [
         "./diagnostics-*",
         "./themeReveal-*",
@@ -260,7 +262,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "46.14 kB"
+      "limit": "48.21 kB"
     },
     {
       "name": "Popover",
@@ -273,7 +275,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "47.67 kB"
+      "limit": "49.89 kB"
     },
     {
       "name": "Menu",
@@ -286,7 +288,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "49.98 kB"
+      "limit": "51.99 kB"
     },
     {
       "name": "Accordion",
@@ -299,7 +301,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "44.92 kB"
+      "limit": "47.03 kB"
     },
     {
       "name": "Agent",
@@ -312,7 +314,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "45.62 kB"
+      "limit": "47.78 kB"
     },
     {
       "name": "Markdown",
@@ -325,7 +327,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "43.93 kB"
+      "limit": "46.07 kB"
     },
     {
       "name": "List",
@@ -338,7 +340,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "45.25 kB"
+      "limit": "47.38 kB"
     },
     {
       "name": "SwipeItem",
@@ -351,7 +353,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "48.54 kB"
+      "limit": "50.66 kB"
     },
     {
       "name": "SortableList",
@@ -364,7 +366,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "48.86 kB"
+      "limit": "50.98 kB"
     },
     {
       "name": "VirtualList",
@@ -377,7 +379,20 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "47.49 kB"
+      "limit": "49.58 kB"
+    },
+    {
+      "name": "FlowContainer",
+      "path": "dist/components/flow.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*",
+        "./interactionListening.mjs"
+      ],
+      "gzip": true,
+      "limit": "45.86 kB"
     },
     {
       "name": "Skeleton",
@@ -390,7 +405,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "43.24 kB"
+      "limit": "45.42 kB"
     },
     {
       "name": "Tabs",
@@ -403,7 +418,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "46.11 kB"
+      "limit": "48.28 kB"
     },
     {
       "name": "Slider",
@@ -416,7 +431,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "45.24 kB"
+      "limit": "47.40 kB"
     },
     {
       "name": "Progress",
@@ -429,7 +444,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "43.20 kB"
+      "limit": "45.36 kB"
     },
     {
       "name": "Toaster",
@@ -455,7 +470,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "52.11 kB"
+      "limit": "54.21 kB"
     },
     {
       "name": "Calendar",
@@ -468,7 +483,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "51.53 kB"
+      "limit": "53.66 kB"
     },
     {
       "name": "DatePicker",
@@ -481,7 +496,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "65.70 kB"
+      "limit": "67.73 kB"
     },
     {
       "name": "DateTime",
@@ -494,7 +509,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "46.78 kB"
+      "limit": "48.95 kB"
     },
     {
       "name": "TimeZoneSelect",
@@ -507,7 +522,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "54.68 kB"
+      "limit": "56.75 kB"
     },
     {
       "name": "Combobox",
@@ -520,7 +535,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "52.66 kB"
+      "limit": "54.72 kB"
     },
     {
       "name": "Dashboard",
@@ -533,7 +548,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "49.20 kB"
+      "limit": "51.32 kB"
     },
     {
       "name": "DataGrid",
@@ -614,7 +629,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "170.45 kB"
+      "limit": "173.38 kB"
     }
   ],
   "repository": {
@@ -650,13 +665,8 @@
   "homepage": "https://www.box-kite.dev",
   "description": "One React component that takes CSS properties as typed props and 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.3.1",
-    "csstype": "^3.2.3",
-    "use-sync-external-store": "^1.6.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
@@ -686,13 +696,14 @@
     "@types/node": "^26.1.2",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
-    "@types/use-sync-external-store": "^1.5.0",
     "@vitejs/plugin-react": "^6.0.5",
     "@vitest/coverage-v8": "^4.1.11",
+    "@xyflow/react": "^12.12.1",
     "ag-grid-community": "^36.2.0",
     "ag-grid-react": "^36.2.0",
     "axe-core": "^4.13.0",
     "create-vite": "^9.3.0",
+    "csstype": "^3.2.3",
     "eslint": "^10.8.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import-x": "^4.17.1",
@@ -719,5 +730,8 @@
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
     "zod": "^4.6.5"
+  },
+  "dependencies": {
+    "@box-kite/core": "2.4.1"
   }
 }

package/react/boxClassNames.d.ts

@@ -17,9 +17,9 @@ export interface BoxClassNames {
 /**
  * The resolved styles as a class attribute. Hook-free, so the client entry and the Server-Component
  * one give `useClassNames` the same shape — the only difference between them is whether resolving
- * the styles scheduled a flush effect.
+ * the styles scheduled a flush effect. `base: false` drops the reset class, which the engine always puts first.
  */
-export default function boxClassNames({ classNames: styleClasses, styleElements }: ResolvedBoxStyles, userClassName?: ClassNameType): {
+export default function boxClassNames({ classNames: styleClasses, styleElements }: ResolvedBoxStyles, userClassName?: ClassNameType, base?: boolean): {
     className: string;
     styles: import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>[] | undefined;
 };

package/react/effects.d.ts

@@ -1,10 +1,9 @@
-import { default as React, useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect } from 'react';
 /** A layout effect on the browser, a passive one everywhere else. */
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
 /**
- * An insertion effect on the browser, falling back to a layout effect on React 16/17 — React's own
- * recommendation for injecting CSS-in-JS. Insertion effects run during the commit ahead of *every* layout
- * effect, so a component measuring its DOM already sees the styles. Off the browser nothing paints and
- * `getStyles()` flushes for itself, so `useEffect` keeps React quiet.
+ * An insertion effect on the browser — React's own recommendation for injecting CSS-in-JS. It runs during
+ * the commit ahead of *every* layout effect, so a component measuring its DOM already sees the styles. Off
+ * the browser nothing paints and `getStyles()` flushes for itself, so `useEffect` keeps React quiet.
  */
 export declare const useIsomorphicInsertionEffect: typeof useLayoutEffect;

package/react/identity/useIdentifier.d.ts

@@ -10,8 +10,5 @@
  * const id = useIdentifier('select');
  * // `${id}-trigger`, `${id}-listbox`
  * ```
- *
- * On React 16/17 the fallback is a module counter, which cannot match between a server render and
- * the client one — pass ids in explicitly there if the tree is hydrated.
  */
 export default function useIdentifier(prefix?: string): string;

package/react-shared.cjs

@@ -1 +1 @@
-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.v()&&(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}});
+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,i=!0){let a=i?e:e.slice(1);return{className:(0,r.classNames)(a,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.v()&&(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),{})}var A=[`surface`,`panel`,`text`,`border`,`grid`,`edge`,`selection`,`handle`],j={surface:`white`,panel:`white`,text:`base-900`,border:`base-300`,grid:`base-300`,edge:`base-400`,selection:`accent-500`,handle:`base-700`},M={surface:`base-950`,panel:`base-900`,text:`base-100`,border:`base-700`,grid:`base-700`,edge:`base-500`,selection:`accent-400`,handle:`base-300`};function N(e){return`--flow-${e}`}function P(e){let t={};for(let n of A)e[n]!==void 0&&(t[N(n).slice(2)]=e[n]);return t}Object.defineProperty(exports,"_",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return N}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"g",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return P}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"m",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return j}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return A}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"v",{enumerable:!0,get:function(){return i}});

package/react-shared.mjs

@@ -2,9 +2,10 @@ import { v 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 o({ classNames: e, styleElements: t }, n) {
+function o({ classNames: e, styleElements: t }, n, r = !0) {
+	let a = r ? e : e.slice(1);
 	return {
-		className: i(e, n).join(" "),
+		className: i(a, n).join(" "),
 		styles: t
 	};
 }
@@ -138,4 +139,42 @@ function j(e) {
 	return e.reduce((e, t, n) => (e[`chart-${n + 1}`] = t, e), {});
 }
 //#endregion
-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 };
+//#region src/utils/flow/flowPalette.ts
+var M = [
+	"surface",
+	"panel",
+	"text",
+	"border",
+	"grid",
+	"edge",
+	"selection",
+	"handle"
+], N = {
+	surface: "white",
+	panel: "white",
+	text: "base-900",
+	border: "base-300",
+	grid: "base-300",
+	edge: "base-400",
+	selection: "accent-500",
+	handle: "base-700"
+}, P = {
+	surface: "base-950",
+	panel: "base-900",
+	text: "base-100",
+	border: "base-700",
+	grid: "base-700",
+	edge: "base-500",
+	selection: "accent-400",
+	handle: "base-300"
+};
+function F(e) {
+	return `--flow-${e}`;
+}
+function I(e) {
+	let t = {};
+	for (let n of M) e[n] !== void 0 && (t[F(n).slice(2)] = e[n]);
+	return t;
+}
+//#endregion
+export { c as _, F as a, j as c, w as d, S as f, f as g, v as h, I as i, O as l, y as m, N as n, A as o, x as p, M as r, k as s, P as t, E as u, o as v };

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,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.palette=r.BoxExtends.palette,o.sizes=r.BoxExtends.sizes,o.createComponents=r.BoxExtends.createComponents,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;
+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.m(e,i===`svg`);return n.default.createElement(n.default.Fragment,null,s,n.default.createElement(i,t.g(e,o),a))}function a(e){return i(e)}var o=a;o.extend=r.BoxExtends.extend,o.components=r.BoxExtends.components,o.palette=r.BoxExtends.palette,o.sizes=r.BoxExtends.sizes,o.createComponents=r.BoxExtends.createComponents,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.v(t.m(e,n?.svg===!0),e.className,n?.base)}exports.default=o,exports.useBoxElement=i,exports.useClassNames=s;

package/rsc.d.ts

@@ -37,6 +37,7 @@ declare const RscBox: RscBoxType;
  */
 export declare function useClassNames<TKey extends keyof ComponentsAndVariants = never>(props: BoxClassNameProps<TKey>, options?: {
     svg?: boolean;
+    base?: boolean;
 }): BoxClassNames;
 export default RscBox;
 export type { BoxClassNames, BoxClassNameProps };

package/rsc.mjs

@@ -1,4 +1,4 @@
-import { d as e, l as t, p as n } from "./react-shared.mjs";
+import { g as e, m as t, v as n } from "./react-shared.mjs";
 import r from "react";
 import { BoxExtends as i, Springs as a, getDefaultEngine as o, startViewTransition as s } from "@box-kite/core";
 //#region src/rsc.ts
@@ -15,7 +15,7 @@ function l(e) {
 var u = l;
 u.extend = i.extend, u.components = i.components, u.palette = i.palette, u.sizes = i.sizes, u.createComponents = i.createComponents, u.keyframes = i.keyframes, u.spring = a.spring, u.getVariableValue = (e) => o().getVariableValue(e), u.configure = (e) => o().configure(e), u.viewTransition = s;
 function d(e, r) {
-	return n(t(e, r?.svg === !0), e.className);
+	return n(t(e, r?.svg === !0), e.className, r?.base);
 }
 //#endregion
 export { u as default, c as useBoxElement, d as useClassNames };

package/utils/catalog/catalogContracts.d.ts

@@ -1,14 +1,4 @@
 import { CatalogContract } from '@box-kite/core';
-/**
- * The props that are a *shape* rather than a value — a grid's columns, a dashboard's layout — as the JSON
- * Schema a generated spec is judged against. Written here rather than extracted because the manifest maps
- * types, and half of each of these shapes is React: a `Cell` renderer, an `onCellEdit`, a `ReactNode`. A
- * mapping has to drop such a prop whole, which is what left the catalog able to place a dashboard and not
- * to say what was in it — `<DataGrid>` arrived with no `def` at all, and `def` is required.
- *
- * Every key is typed against the interface it mirrors, so a prop renamed in the component is a compile
- * error here rather than a constraint that silently stops matching anything.
- */
 declare namespace CatalogContracts {
     /**
      * Component name → the props of it a manifest entry cannot describe. Merged over the generated entry, so

package/utils/flow/flowPalette.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A canvas's roles, on their own so that `boxComponents.ts` can declare them without dragging the `--xy-*` mapping
+ * into the bundle every Box already pays for. `FlowUtils` re-exports them, so the public names are unchanged.
+ */
+/** What a canvas is painted from. Every `--xy-*` variable the container declares reads one of these. */
+export declare const ROLES: readonly ["surface", "panel", "text", "border", "grid", "edge", "selection", "handle"];
+export type Role = (typeof ROLES)[number];
+/** A role's paint in one theme: a palette token, an alias like `accent-500`, or one with an alpha. */
+export type RoleTokens = Readonly<Record<Role, string>>;
+/** The roles on a light page. `accent`/`base` rather than named families, so `Box.palette()` reaches the canvas. */
+export declare const LIGHT: RoleTokens;
+/** The same roles on a dark page. */
+export declare const DARK: RoleTokens;
+/** A role's own custom property — what an override or a custom node reads. */
+export declare function roleVariable(role: Role): string;
+/** Role tokens as `vars` entries: `{ 'flow-surface': 'white', … }`. */
+export declare function roleEntries(tokens: Partial<Record<Role, string>>): Record<string, string>;

package/utils/flow/flowUtils.d.ts

@@ -0,0 +1,47 @@
+import * as FlowPalette from './flowPalette';
+/**
+ * The model behind `<FlowContainer>`: React Flow's public CSS variables written in terms of eight roles, and the
+ * roles in palette tokens for each theme. No React and no xyflow import — the contract is CSS, so it is data here.
+ */
+declare namespace FlowUtils {
+    const ROLES: readonly ["surface", "panel", "text", "border", "grid", "edge", "selection", "handle"];
+    type Role = FlowPalette.Role;
+    type RoleTokens = FlowPalette.RoleTokens;
+    const LIGHT: Readonly<Record<"text" | "grid" | "border" | "selection" | "surface" | "panel" | "edge" | "handle", string>>;
+    const DARK: Readonly<Record<"text" | "grid" | "border" | "selection" | "surface" | "panel" | "edge" | "handle", string>>;
+    const roleVariable: typeof FlowPalette.roleVariable;
+    /**
+     * Every `--xy-*` variable the container declares, keyed without the `--`. Each one is resolved on the container,
+     * which is an ancestor of `.react-flow`, so it beats xyflow's `-default` in either `colorMode`; the `-props`
+     * twins a component prop sets inline still win, which is right — that is the app speaking.
+     */
+    const VARIABLES: Readonly<Record<string, string>>;
+    /**
+     * The `--xy-*` variables deliberately left to xyflow: widths, a radius, and two strokes that are transparent in
+     * both of its themes. Listed so the mapping test can tell "left alone" from "missed".
+     */
+    const UNMAPPED: readonly ["xy-edge-stroke-width", "xy-connectionline-stroke-width", "xy-node-border-radius", "xy-minimap-mask-stroke-color", "xy-minimap-mask-stroke-width", "xy-minimap-node-stroke-color", "xy-minimap-node-stroke-width"];
+    /** A role override: one token for both themes, or one per theme. */
+    type RoleOverride = string | {
+        readonly light?: string;
+        readonly dark?: string;
+    };
+    type Tokens = Partial<Record<Role, RoleOverride>>;
+    /** The role variables for one theme, with the caller's overrides over the defaults. Unknown keys are dropped. */
+    function roleVariables(theme: 'light' | 'dark', tokens?: Tokens): Record<string, string>;
+    /** Only the roles the caller repaints in one theme — the defaults are the `flowContainer` style node's. */
+    function overrideVariables(theme: 'light' | 'dark', tokens?: Tokens): Record<string, string>;
+    /**
+     * `<ReactFlow colorMode>` from Box Kite's theme, so the canvas's own `.dark` class agrees with the page. A canvas in a
+     * different theme from the page sits in `<Box.Theme use="local">` instead — never `colorMode="light"` under a dark page.
+     */
+    function colorMode(theme: string | undefined): 'light' | 'dark';
+    /**
+     * The base class draws every outline in `--outlineColor`, so declaring it on the container makes a node's focus and
+     * selection outlines the `selection` role with no colour prop — colour props take tokens, not `var()`.
+     */
+    const OUTLINE: Readonly<Record<string, string>>;
+    /** The properties a canvas moves every frame need no transition; `static` zeroes both of Box's transition times. */
+    const STATIC_MOTION: Readonly<Record<string, string>>;
+}
+export default FlowUtils;