@box-kite/react 2.2.3 → 2.2.5

package/docs/components.md

@@ -14,6 +14,7 @@ No hook, no effect, no DOM: a React Server Component can render these directly.
 | `@box-kite/react/components/flex` | `Flex` (default) |  |
 | `@box-kite/react/components/grid` | `Grid` (default) |  |
 | `@box-kite/react/components/icon` | `Icon` (default) |  |
+| `@box-kite/react/components/list` | `List` (default), `i`, `n`, `r`, `t` |  |
 | `@box-kite/react/components/markdown` | `markdown` (default), `markdownComponents` |  |
 | `@box-kite/react/components/progress` | `Progress` (default) |  |
 | `@box-kite/react/components/radioButton` | `RadioButton` (default) |  |
@@ -35,7 +36,7 @@ These hold state, measure the DOM or portal into it. A Server Component may impo
 | `@box-kite/react/components/checkbox` | `Checkbox` (default) |  |
 | `@box-kite/react/components/combobox` | `Combobox` (default), `ComboboxUtils` |  |
 | `@box-kite/react/components/dashboard` | `DashboardGrid` (default), `DashboardUtils`, `Widget` |  |
-| `@box-kite/react/components/dataGrid` | `dataGrid` (default), `DATA_GRID_LOCALE_TEXT` |  |
+| `@box-kite/react/components/dataGrid` | `dataGrid` (default), `DATA_GRID_LOCALE_TEXT`, `a`, `c`, `d`, `i`, `l`, `n`, `o`, `r`, `s`, `t`, `u` |  |
 | `@box-kite/react/components/dialog` | `Dialog` (default), `AlertDialog` |  |
 | `@box-kite/react/components/dropdown` | `Dropdown` (default) | **deprecated** |
 | `@box-kite/react/components/form` | `Form` (default) |  |
@@ -46,7 +47,10 @@ These hold state, measure the DOM or portal into it. A Server Component may impo
 | `@box-kite/react/components/radioGroup` | `RadioGroup` (default) | **deprecated** |
 | `@box-kite/react/components/select` | `Select` (default) | **deprecated** |
 | `@box-kite/react/components/slider` | `Slider` (default) |  |
+| `@box-kite/react/components/sortableList` | `SortableList` (default), `SortableUtils` |  |
+| `@box-kite/react/components/swipeItem` | `SwipeItem` (default), `SwipeUtils` |  |
 | `@box-kite/react/components/switch` | `Switch` (default) |  |
 | `@box-kite/react/components/tabs` | `Tabs` (default) |  |
 | `@box-kite/react/components/toaster` | `Toaster` (default), `createToastStore`, `defaultToastStore`, `toast` |  |
 | `@box-kite/react/components/tooltip` | `Tooltip` (default) |  |
+| `@box-kite/react/components/virtualList` | `VirtualList` (default) |  |

package/icons/closeIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../components/svg';
+export default function CloseIcon(props: SvgProps): import("react").JSX.Element;

package/icons/filterIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../components/svg';
+export default function FilterIcon(props: SvgProps): import("react").JSX.Element;

package/layer.cjs

@@ -1 +1 @@
-const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./behavior.cjs"),r=require("./identity.cjs");let i=require("react");var a=()=>()=>{},o=()=>!0;function s(){return(0,i.useSyncExternalStore)(a,e.a,o)}function c(a){let{haspopup:o,id:c,idPrefix:l,open:u,defaultOpen:d=!1,onOpenChange:f,onOpened:p,onClosing:m,inside:h}=a,g=r.t(l),_=c??g,[v,y]=n.i({value:u,defaultValue:d,onChange:f}),[b,x]=(0,i.useState)(null),[S,C]=(0,i.useState)(null),w=s(),[T,E]=(0,i.useState)(!1),[D,O]=(0,i.useState)(),k=(0,i.useRef)(`imperative`),A=(0,i.useRef)(!1),j=n.a(p),M=n.a(m),N=n.a(e=>{let t=e.newState===`open`,n=e.currentTarget;if(t&&u===!1){e.preventDefault(),setTimeout(()=>y(!0,{reason:`trigger`,event:e}));return}t||(A.current=n.contains(document.activeElement),M(A.current,b)),E(t);let r=t?`trigger`:k.current;k.current=`imperative`,y(t,{reason:r,event:e})}),P=n.a(e=>{let t=e.currentTarget;e.newState===`open`&&j(t)});t.n(()=>{if(!w||!S)return;let e=new AbortController;return S.addEventListener(`beforetoggle`,N,{signal:e.signal}),S.addEventListener(`toggle`,P,{signal:e.signal}),()=>e.abort()},[w,S,N,P]),t.n(()=>{!w||!e.a()||!S||v===T||(v?S.showPopover():S.hidePopover())},[v,T,S,w]),t.n(()=>{if(!w||!v)return;let t=new AbortController,n=(e,n)=>document.addEventListener(e,n,{signal:t.signal,capture:!0});return n(`keydown`,e=>{e.key===`Escape`&&(k.current=`escape`)}),n(`pointerdown`,t=>{let n=!!b&&e.l(t,[b]);k.current=n?`trigger`:`outside-pointer`}),()=>t.abort()},[w,v,b]),t.n(()=>{b&&(b.id||b.setAttribute(`id`,`${_}-trigger`),O(b.id))},[b,_]),t.n(()=>{if(!(!w||!b))return b.setAttribute(`popovertarget`,_),()=>b.removeAttribute(`popovertarget`)},[w,b,_]),t.n(()=>{w||!v||!S||j(S)},[w,v,S,j]),n.r({enabled:!w&&v,inside:[S,b,...h??[]],onDismiss:(e,t)=>y(!1,{reason:e,event:t})}),n.n({enabled:!w&&v,returnTo:b});let F=n.a(e=>{y(e=>!e,{reason:`trigger`,event:e})});return{platform:w,isOpen:v,setOpen:y,id:_,trigger:(0,i.useMemo)(()=>({ref:x,props:{"aria-expanded":v,"aria-haspopup":o,"aria-controls":v?_:void 0,...w?{}:{onClick:F}}}),[F,o,v,_,w]),triggerElement:b,triggerId:D,setPanel:C,panelElement:S}}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});
+const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./behavior.cjs"),r=require("./identity.cjs");let i=require("react");var a=()=>()=>{},o=()=>!0;function s(){return(0,i.useSyncExternalStore)(a,e.o,o)}function c(a){let{haspopup:o,id:c,idPrefix:l,open:u,defaultOpen:d=!1,onOpenChange:f,onOpened:p,onClosing:m,inside:h}=a,g=r.t(l),_=c??g,[v,y]=n.i({value:u,defaultValue:d,onChange:f}),[b,x]=(0,i.useState)(null),[S,C]=(0,i.useState)(null),w=s(),[T,E]=(0,i.useState)(!1),[D,O]=(0,i.useState)(),k=(0,i.useRef)(`imperative`),A=(0,i.useRef)(!1),j=n.a(p),M=n.a(m),N=n.a(e=>{let t=e.newState===`open`,n=e.currentTarget;if(t&&u===!1){e.preventDefault(),setTimeout(()=>y(!0,{reason:`trigger`,event:e}));return}t||(A.current=n.contains(document.activeElement),M(A.current,b)),E(t);let r=t?`trigger`:k.current;k.current=`imperative`,y(t,{reason:r,event:e})}),P=n.a(e=>{let t=e.currentTarget;e.newState===`open`&&j(t)});t.n(()=>{if(!w||!S)return;let e=new AbortController;return S.addEventListener(`beforetoggle`,N,{signal:e.signal}),S.addEventListener(`toggle`,P,{signal:e.signal}),()=>e.abort()},[w,S,N,P]),t.n(()=>{!w||!e.o()||!S||v===T||(v?S.showPopover():S.hidePopover())},[v,T,S,w]),t.n(()=>{if(!w||!v)return;let t=new AbortController,n=(e,n)=>document.addEventListener(e,n,{signal:t.signal,capture:!0});return n(`keydown`,e=>{e.key===`Escape`&&(k.current=`escape`)}),n(`pointerdown`,t=>{let n=!!b&&e.u(t,[b]);k.current=n?`trigger`:`outside-pointer`}),()=>t.abort()},[w,v,b]),t.n(()=>{b&&(b.id||b.setAttribute(`id`,`${_}-trigger`),O(b.id))},[b,_]),t.n(()=>{if(!(!w||!b))return b.setAttribute(`popovertarget`,_),()=>b.removeAttribute(`popovertarget`)},[w,b,_]),t.n(()=>{w||!v||!S||j(S)},[w,v,S,j]),n.r({enabled:!w&&v,inside:[S,b,...h??[]],onDismiss:(e,t)=>y(!1,{reason:e,event:t})}),n.n({enabled:!w&&v,returnTo:b});let F=n.a(e=>{y(e=>!e,{reason:`trigger`,event:e})});return{platform:w,isOpen:v,setOpen:y,id:_,trigger:(0,i.useMemo)(()=>({ref:x,props:{"aria-expanded":v,"aria-haspopup":o,"aria-controls":v?_:void 0,...w?{}:{onClick:F}}}),[F,o,v,_,w]),triggerElement:b,triggerId:D,setPanel:C,panelElement:S}}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});

package/layer.mjs

@@ -1,4 +1,4 @@
-import { a as e, l as t } from "./platform.mjs";
+import { o as e, u as t } from "./platform.mjs";
 import { n } from "./effects.mjs";
 import { a as r, i, n as a, r as o } from "./behavior.mjs";
 import { t as s } from "./identity.mjs";

package/mcp/src/data.d.ts

@@ -75,6 +75,8 @@ export declare const rules: readonly RuleRecord[];
 export declare const priorFacts: readonly string[];
 export declare const blocks: readonly RegistryItem[];
 export declare const blockInstall: (name: string) => string;
+/** The page a registry item is shown on — running in light and dark, with every file — if it has one. */
+export declare const blockPage: (name: string) => string | undefined;
 /**
  * A fresh engine with readable class names, no DOM and no console: what `check_styles` judges a value with. One
  * per call rather than one for the process, so a caller's `vars` or `css` cannot leak into the next

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -71,6 +71,7 @@
     "smoke:next-app": "npm --prefix examples/next-app run smoke",
     "build:pages": "vite build ./pages --config ./pages.vite.config.ts --outDir ../dist-pages --mode production && npm run prerender:pages",
     "prerender:pages": "node scripts/prerender-pages.mjs",
+    "snapshot:templates": "node scripts/snapshot-templates.mjs",
     "preview": "vite preview ./pages --config ./pages.vite.config.ts --outDir ../dist-pages",
     "build": "npm run build:core && vite build",
     "build:core": "vite build --config vite.core.config.ts && node scripts/postbuild-core.mjs",
@@ -116,7 +117,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "37.54 KB"
+      "limit": "39.07 KB"
     },
     {
       "name": "Box in a Server Component (react-server entry)",
@@ -128,7 +129,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "35.63 KB"
+      "limit": "37.10 KB"
     },
     {
       "name": "Behavior primitives (a11y entry)",
@@ -164,7 +165,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "55.64 KB"
+      "limit": "58.71 KB"
     },
     {
       "name": "Spec renderer (spec entry)",
@@ -194,7 +195,7 @@
       "name": "Core engine (@box-kite/core, no React)",
       "path": "dist-core/core.mjs",
       "gzip": true,
-      "limit": "36.90 KB",
+      "limit": "38.31 KB",
       "ignore": [
         "./diagnostics-*",
         "./themeReveal-*"
@@ -210,7 +211,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "39.61 KB"
+      "limit": "41.14 KB"
     },
     {
       "name": "Popover",
@@ -222,7 +223,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "41.15 KB"
+      "limit": "42.68 KB"
     },
     {
       "name": "Menu",
@@ -234,7 +235,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "43.41 KB"
+      "limit": "44.94 KB"
     },
     {
       "name": "Accordion",
@@ -246,7 +247,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "38.88 KB"
+      "limit": "40.41 KB"
     },
     {
       "name": "Agent",
@@ -258,7 +259,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "39.63 KB"
+      "limit": "41.19 KB"
     },
     {
       "name": "Markdown",
@@ -270,7 +271,55 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "38.10 KB"
+      "limit": "39.66 KB"
+    },
+    {
+      "name": "List",
+      "path": "dist/components/list.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "40.98 KB"
+    },
+    {
+      "name": "SwipeItem",
+      "path": "dist/components/swipeItem.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "44.06 KB"
+    },
+    {
+      "name": "SortableList",
+      "path": "dist/components/sortableList.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "44.33 KB"
+    },
+    {
+      "name": "VirtualList",
+      "path": "dist/components/virtualList.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "43.16 KB"
     },
     {
       "name": "Skeleton",
@@ -282,7 +331,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "37.44 KB"
+      "limit": "38.98 KB"
     },
     {
       "name": "Tabs",
@@ -294,7 +343,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "40.06 KB"
+      "limit": "41.62 KB"
     },
     {
       "name": "Slider",
@@ -306,7 +355,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "39.22 KB"
+      "limit": "40.77 KB"
     },
     {
       "name": "Progress",
@@ -318,7 +367,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "37.41 KB"
+      "limit": "38.96 KB"
     },
     {
       "name": "Toaster",
@@ -330,7 +379,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "40.84 KB"
+      "limit": "42.40 KB"
     },
     {
       "name": "Combobox",
@@ -342,7 +391,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "46.65 KB"
+      "limit": "48.21 KB"
     },
     {
       "name": "Dashboard",
@@ -354,7 +403,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "43.06 KB"
+      "limit": "44.62 KB"
     },
     {
       "name": "DataGrid",
@@ -363,10 +412,11 @@
         "react",
         "react-dom",
         "./diagnostics-*",
-        "./themeReveal-*"
+        "./themeReveal-*",
+        "../dataGridList.mjs"
       ],
       "gzip": true,
-      "limit": "89.79 KB"
+      "limit": "93.23 KB"
     },
     {
       "name": "DataGrid export, the chunk fetched on the first press",
@@ -380,6 +430,20 @@
       "gzip": true,
       "limit": "3.8 KB"
     },
+    {
+      "name": "DataGrid list layout, the chunk a narrow grid fetches on top of the grid",
+      "path": "dist/dataGridList.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*",
+        "./box.mjs",
+        "./components/*"
+      ],
+      "gzip": true,
+      "limit": "7.83 KB"
+    },
     {
       "name": "Full library (Box + ssg + every component)",
       "path": "dev/size-full.mjs",
@@ -390,7 +454,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "120.52 KB"
+      "limit": "140.38 KB"
     }
   ],
   "repository": {
@@ -430,7 +494,7 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@box-kite/core": "2.2.3",
+    "@box-kite/core": "2.2.5",
     "csstype": "^3.2.3",
     "use-sync-external-store": "^1.6.0"
   },

package/placement.cjs

@@ -1 +1 @@
-const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./identity.cjs");let r=require("react");var i={top:`bottom`,bottom:`top`,start:`end`,end:`start`};function a(e){return e===`top`||e===`bottom`}function o(e,t){let n=a(e),r=n?e===`top`?`block-start`:`block-end`:e===`start`?`inline-start`:`inline-end`,i=t===`center`?`span-all`:`span-${n?`inline`:`block`}-${t===`start`?`end`:`start`}`;return n?`${r} ${i}`:`${i} ${r}`}function s(e){let[t,n]=e.trim().split(` `);return n===void 0?t===`block-start`?`top`:t===`block-end`?`bottom`:t===`inline-start`?`start`:t===`inline-end`?`end`:null:t===`start`?`top`:t===`end`?`bottom`:n===`start`?`start`:n===`end`?`end`:null}function c(e){return a(e)?`flip-block, flip-inline, flip-block flip-inline`:`flip-inline, flip-block, flip-inline flip-block`}function l(e,t,n,r){let i=u(t,r);return i===`top`?e.top-n.top:i===`bottom`?n.top+n.height-(e.top+e.height):i===`left`?e.left-n.left:n.left+n.width-(e.left+e.width)}function u(e,t){return e===`top`||e===`bottom`?e:e===`start`===t?`right`:`left`}function d(e,t,n,r){return Math.max(n,Math.min(e,n+r-t))}function f(e,t,n,r){let{align:o,offset:s,flip:c,rtl:f}=r,p=(a(r.side)?t.height:t.width)+s,m=c&&l(e,r.side,n,f)<p&&l(e,i[r.side],n,f)>=p?i[r.side]:r.side,h=u(m,f),g={top:e.top-t.height-s,bottom:e.top+e.height+s,left:e.left-t.width-s,right:e.left+e.width+s}[h],_=a(m),v=_?e.left:e.top,y=_?e.width:e.height,b=_?t.width:t.height,x=o===`center`?v+y/2-b/2:o===`start`===(_&&f)?v+y-b:v,S=_?d(x,t.width,n.left,n.width):d(x,t.height,n.top,n.height);return _?{top:g,left:S,side:m}:{top:S,left:g,side:m}}var p=4,m=16,h={top:`mb`,bottom:`mt`,start:`me`,end:`ms`};function g(){return typeof CSS<`u`&&typeof CSS.supports==`function`&&CSS.supports(`anchor-name: --a`)}function _(){let e=typeof document>`u`?null:document.documentElement,t=e?parseFloat(getComputedStyle(e).fontSize):NaN;return Number.isFinite(t)&&t>0?t:m}function v(e){let{top:t,left:n,width:r,height:i}=e.getBoundingClientRect();return{top:t,left:n,width:r,height:i}}function y(e,t){return e!==null&&e.top===t.top&&e.left===t.left&&e.side===t.side&&e.anchorWidth===t.anchorWidth}function b(i={}){let{side:a=`bottom`,align:l=`center`,offset:u=0,flip:d=!0,matchWidth:m=!1,name:b,anchor:x,trackSide:S=!1}=i,C=n.t(`anchor`),w=`--${(b??C).replace(/^--/,``)}`,[T,E]=(0,r.useState)(!0),[D,O]=(0,r.useState)(null),[k,A]=(0,r.useState)(null),[j,M]=(0,r.useState)(null),[N,P]=(0,r.useState)(null);t.n(()=>{g()||E(!1)},[]),t.n(()=>{let t=e.c(x);if(t)return t.style.setProperty(`anchor-name`,w),()=>{t.style.removeProperty(`anchor-name`)}},[x,w]),t.n(()=>{!T||!S||!k||P(s(getComputedStyle(k).getPropertyValue(`position-area`)))},[T,S,k,a,l,d]),t.n(()=>{let t=e.c(x)??D;if(T||!t||!k)return;let n=()=>{let n=v(t),r=v(k),i={top:0,left:0,width:window.innerWidth,height:window.innerHeight},o=m?Math.max(r.width,n.width):r.width,s={...f(n,{...r,width:o},i,{side:a,align:l,offset:u/p*_(),flip:d,rtl:e.u(t)}),anchorWidth:n.width};M(e=>y(e,s)?e:s)};n();let r=new AbortController;return document.addEventListener(`scroll`,n,{signal:r.signal,capture:!0,passive:!0}),window.addEventListener(`resize`,n,{signal:r.signal,passive:!0}),()=>r.abort()},[T,x,D,k,a,l,u,d,m]);let F=(0,r.useCallback)(e=>O(e),[]),I=(0,r.useCallback)(e=>A(e),[]),L={ref:T?void 0:F,style:{anchorName:w}};return T?{css:T,side:N??a,anchorProps:L,layerProps:{...S?{ref:I}:{},position:`fixed`,positionArea:o(a,l),...d?{positionTryFallbacks:c(a)}:{},...m?{minWidth:`anchor-size(width)`}:{},...u?{[h[a]]:u}:{},style:{positionAnchor:w}}}:{css:T,side:j?.side??a,anchorProps:L,layerProps:{ref:I,position:`fixed`,style:j?{top:`${j.top}px`,left:`${j.left}px`,...m?{minWidth:`${j.anchorWidth}px`}:{}}:{top:0,left:0,visibility:`hidden`}}}}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return b}});
+const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./identity.cjs");let r=require("react");var i={top:`bottom`,bottom:`top`,start:`end`,end:`start`};function a(e){return e===`top`||e===`bottom`}function o(e,t){let n=a(e),r=n?e===`top`?`block-start`:`block-end`:e===`start`?`inline-start`:`inline-end`,i=t===`center`?`span-all`:`span-${n?`inline`:`block`}-${t===`start`?`end`:`start`}`;return n?`${r} ${i}`:`${i} ${r}`}function s(e){let[t,n]=e.trim().split(` `);return n===void 0?t===`block-start`?`top`:t===`block-end`?`bottom`:t===`inline-start`?`start`:t===`inline-end`?`end`:null:t===`start`?`top`:t===`end`?`bottom`:n===`start`?`start`:n===`end`?`end`:null}function c(e){return a(e)?`flip-block, flip-inline, flip-block flip-inline`:`flip-inline, flip-block, flip-inline flip-block`}function l(e,t,n,r){let i=u(t,r);return i===`top`?e.top-n.top:i===`bottom`?n.top+n.height-(e.top+e.height):i===`left`?e.left-n.left:n.left+n.width-(e.left+e.width)}function u(e,t){return e===`top`||e===`bottom`?e:e===`start`===t?`right`:`left`}function d(e,t,n,r){return Math.max(n,Math.min(e,n+r-t))}function f(e,t,n,r){let{align:o,offset:s,flip:c,rtl:f}=r,p=(a(r.side)?t.height:t.width)+s,m=c&&l(e,r.side,n,f)<p&&l(e,i[r.side],n,f)>=p?i[r.side]:r.side,h=u(m,f),g={top:e.top-t.height-s,bottom:e.top+e.height+s,left:e.left-t.width-s,right:e.left+e.width+s}[h],_=a(m),v=_?e.left:e.top,y=_?e.width:e.height,b=_?t.width:t.height,x=o===`center`?v+y/2-b/2:o===`start`===(_&&f)?v+y-b:v,S=_?d(x,t.width,n.left,n.width):d(x,t.height,n.top,n.height);return _?{top:g,left:S,side:m}:{top:S,left:g,side:m}}var p=4,m=16,h={top:`mb`,bottom:`mt`,start:`me`,end:`ms`};function g(){return typeof CSS<`u`&&typeof CSS.supports==`function`&&CSS.supports(`anchor-name: --a`)}function _(){let e=typeof document>`u`?null:document.documentElement,t=e?parseFloat(getComputedStyle(e).fontSize):NaN;return Number.isFinite(t)&&t>0?t:m}function v(e){let{top:t,left:n,width:r,height:i}=e.getBoundingClientRect();return{top:t,left:n,width:r,height:i}}function y(e,t){return e!==null&&e.top===t.top&&e.left===t.left&&e.side===t.side&&e.anchorWidth===t.anchorWidth}function b(i={}){let{side:a=`bottom`,align:l=`center`,offset:u=0,flip:d=!0,matchWidth:m=!1,name:b,anchor:x,trackSide:S=!1}=i,C=n.t(`anchor`),w=`--${(b??C).replace(/^--/,``)}`,[T,E]=(0,r.useState)(!0),[D,O]=(0,r.useState)(null),[k,A]=(0,r.useState)(null),[j,M]=(0,r.useState)(null),[N,P]=(0,r.useState)(null);t.n(()=>{g()||E(!1)},[]),t.n(()=>{let t=e.l(x);if(t)return t.style.setProperty(`anchor-name`,w),()=>{t.style.removeProperty(`anchor-name`)}},[x,w]),t.n(()=>{!T||!S||!k||P(s(getComputedStyle(k).getPropertyValue(`position-area`)))},[T,S,k,a,l,d]),t.n(()=>{let t=e.l(x)??D;if(T||!t||!k)return;let n=()=>{let n=v(t),r=v(k),i={top:0,left:0,width:window.innerWidth,height:window.innerHeight},o=m?Math.max(r.width,n.width):r.width,s={...f(n,{...r,width:o},i,{side:a,align:l,offset:u/p*_(),flip:d,rtl:e.d(t)}),anchorWidth:n.width};M(e=>y(e,s)?e:s)};n();let r=new AbortController;return document.addEventListener(`scroll`,n,{signal:r.signal,capture:!0,passive:!0}),window.addEventListener(`resize`,n,{signal:r.signal,passive:!0}),()=>r.abort()},[T,x,D,k,a,l,u,d,m]);let F=(0,r.useCallback)(e=>O(e),[]),I=(0,r.useCallback)(e=>A(e),[]),L={ref:T?void 0:F,style:{anchorName:w}};return T?{css:T,side:N??a,anchorProps:L,layerProps:{...S?{ref:I}:{},position:`fixed`,positionArea:o(a,l),...d?{positionTryFallbacks:c(a)}:{},...m?{minWidth:`anchor-size(width)`}:{},...u?{[h[a]]:u}:{},style:{positionAnchor:w}}}:{css:T,side:j?.side??a,anchorProps:L,layerProps:{ref:I,position:`fixed`,style:j?{top:`${j.top}px`,left:`${j.left}px`,...m?{minWidth:`${j.anchorWidth}px`}:{}}:{top:0,left:0,visibility:`hidden`}}}}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return b}});

package/placement.mjs

@@ -1,4 +1,4 @@
-import { c as e, u as t } from "./platform.mjs";
+import { d as e, l as t } from "./platform.mjs";
 import { n } from "./effects.mjs";
 import { t as r } from "./identity.mjs";
 import { useCallback as i, useState as a } from "react";
@@ -82,9 +82,9 @@ function S(o = {}) {
 	n(() => {
 		v() || O(!1);
 	}, []), n(() => {
-		let t = e(C);
-		if (t) return t.style.setProperty("anchor-name", E), () => {
-			t.style.removeProperty("anchor-name");
+		let e = t(C);
+		if (e) return e.style.setProperty("anchor-name", E), () => {
+			e.style.removeProperty("anchor-name");
 		};
 	}, [C, E]), n(() => {
 		!D || !w || !j || I(l(getComputedStyle(j).getPropertyValue("position-area")));
@@ -96,16 +96,16 @@ function S(o = {}) {
 		d,
 		p
 	]), n(() => {
-		let n = e(C) ?? k;
+		let n = t(C) ?? k;
 		if (D || !n || !j) return;
 		let r = () => {
-			let e = b(n), r = b(j), i = {
+			let t = b(n), r = b(j), i = {
 				top: 0,
 				left: 0,
 				width: window.innerWidth,
 				height: window.innerHeight
-			}, a = g ? Math.max(r.width, e.width) : r.width, o = {
-				...m(e, {
+			}, a = g ? Math.max(r.width, t.width) : r.width, o = {
+				...m(t, {
 					...r,
 					width: a
 				}, i, {
@@ -113,9 +113,9 @@ function S(o = {}) {
 					align: d,
 					offset: f / h * y(),
 					flip: p,
-					rtl: t(n)
+					rtl: e(n)
 				}),
-				anchorWidth: e.width
+				anchorWidth: t.width
 			};
 			P((e) => x(e, o) ? e : o);
 		};

package/platform.cjs

@@ -1 +1 @@
-function e(e){return e?`current`in e?e.current:e:null}function t(t){let n=e(t);return n instanceof HTMLElement?n: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 r(t){let n=e(t),r=n?.ownerDocument?.defaultView;return!!n&&!!r&&r.getComputedStyle(n).direction===`rtl`}function i(t){let n=e(t)?.ownerDocument?.defaultView?.getSelection();n&&!n.isCollapsed&&n.removeAllRanges()}function a(){return typeof window<`u`&&window.document!==void 0}function o(){return typeof document<`u`}function s(){return o()?document:null}function c(){return s()?.documentElement??null}function l(){return typeof HTMLElement<`u`&&typeof HTMLElement.prototype.showPopover==`function`}function u(){return typeof HTMLDialogElement<`u`&&`closedBy`in HTMLDialogElement.prototype}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return r}});
+function e(e){return e?`current`in e?e.current:e:null}function t(t){let n=e(t);return n instanceof HTMLElement?n: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 r(t){let n=e(t),r=n?.ownerDocument?.defaultView;return!!n&&!!r&&r.getComputedStyle(n).direction===`rtl`}function i(t){let n=e(t)?.ownerDocument?.defaultView?.getSelection();n&&!n.isCollapsed&&n.removeAllRanges()}function a(){return typeof window<`u`&&window.document!==void 0}function o(){return typeof document<`u`}function s(){return o()?document:null}function c(){return s()?.documentElement??null}function l(){return typeof HTMLElement<`u`&&typeof HTMLElement.prototype.showPopover==`function`}function u(){return typeof HTMLDialogElement<`u`&&`closedBy`in HTMLDialogElement.prototype}function d(e){return typeof window>`u`||typeof window.matchMedia!=`function`?null:window.matchMedia(e)}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return n}});

package/platform.mjs

@@ -41,5 +41,8 @@ function l() {
 function u() {
 	return typeof HTMLDialogElement < "u" && "closedBy" in HTMLDialogElement.prototype;
 }
+function d(e) {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(e);
+}
 //#endregion
-export { l as a, t as c, u as i, n as l, c as n, i as o, a as r, e as s, s as t, r as u };
+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 };

package/react/a11y/useControllableState.d.ts

@@ -8,7 +8,8 @@ export interface ChangeDetails<TReason extends string = string> {
     /** The DOM or React event behind the change, when there was one. */
     event?: Event | React.SyntheticEvent;
 }
-export type ChangeHandler<T, TReason extends string = string> = (value: T, details: ChangeDetails<TReason>) => void;
+/** `TDetails` is for a change that says more than its reason — which item moved, and from where. */
+export type ChangeHandler<T, TReason extends string = string, TDetails extends ChangeDetails<TReason> = ChangeDetails<TReason>> = (value: T, details: TDetails) => void;
 export interface ControllableStateOptions<T, TReason extends string = string> {
     /** Present (not `undefined`) means the consumer owns the value: state here is ignored. */
     value?: T;

package/react/componentsContext.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ComponentsRegistry } from '@box-kite/core';
+declare const ComponentsContext: React.Context<ComponentsRegistry<import('../core/extends/boxComponents').Components> | undefined>;
+export default ComponentsContext;

package/react/componentsProvider.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { ComponentsRegistry } from '@box-kite/core';
+interface ComponentsProps {
+    /** A registry from `Box.createComponents()`. Create it at module scope, or memoise it: its identity is the context value. */
+    value: ComponentsRegistry | undefined;
+    children: React.ReactNode;
+}
+/** Every Box below resolves its `component` against `value` instead of the app's `Box.components()`. Renders no element. */
+export default function Components({ value, children }: ComponentsProps): React.JSX.Element;
+export {};

package/react/resolveStyles.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { ComponentsRegistry } from '@box-kite/core';
 import { BoxStyleProps } from '@box-kite/core/types';
 export interface ResolvedBoxStyles {
     classNames: string[];
@@ -13,6 +14,6 @@ export interface ResolvedBoxStyles {
  * what those classes need comes back as elements to render, so there is nothing to flush. Its own module
  * for that reason: the RSC entry must reach this without pulling in `useStyles` and its flush effect.
  */
-export default function resolveStyles(props: BoxStyleProps<any>, isSvg: boolean): ResolvedBoxStyles & {
+export default function resolveStyles(props: BoxStyleProps<any>, isSvg: boolean, components?: ComponentsRegistry): ResolvedBoxStyles & {
     signature: string | null;
 };

package/react/theme/theme.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ThemeTransition } from '@box-kite/core';
+import { ComponentsRegistry, ThemeTransition } from '@box-kite/core';
 import { BoxStyleProps } from '@box-kite/core/types';
 interface ThemeProps {
     children: React.ReactNode;
@@ -24,6 +24,11 @@ interface ThemeProps {
      * update inside the callback. Reduced motion skips the transition and keeps the theme change.
      */
     viewTransition?: boolean | ThemeTransition;
+    /**
+     * A design for this subtree from `Box.createComponents()` — `<Box.Components value>` inside the theme,
+     * since one wrapper holding a design in both light and dark is what a themed section usually is.
+     */
+    components?: ComponentsRegistry;
 }
 /**
  * The React binding for the theme system. Everything that actually touches the platform — reading

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?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}});
+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,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}});

package/react-shared.mjs

@@ -35,59 +35,70 @@ function d(e, t) {
 }
 //#endregion
 //#region src/react/styleElements.ts
-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,
-		dangerouslySetInnerHTML: { __html: n }
-	}));
+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);
+	if (!n) {
+		let { href: r, css: i, precedence: a } = t;
+		n = e.createElement("style", {
+			key: r,
+			href: r,
+			precedence: a,
+			dangerouslySetInnerHTML: { __html: i }
+		}), m.set(t, 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;
 }
 //#endregion
 //#region src/react/resolveStyles.ts
-function h(e, t) {
-	let { classNames: n, signature: r, styleElements: a } = i().resolveClassNames(e, t);
+function v(e, t, n) {
+	let { classNames: r, signature: a, styleElements: o } = i().resolveClassNames(e, t, n);
 	return {
-		classNames: n,
-		signature: r,
-		styleElements: m(a)
+		classNames: r,
+		signature: a,
+		styleElements: _(o)
 	};
 }
 //#endregion
 //#region src/react/svg/attributesInProps.ts
-var g = "__boxAttributesInProps";
-function _(e) {
-	return e[g] = !0, e;
+var y = "__boxAttributesInProps";
+function b(e) {
+	return e[y] = !0, e;
 }
-function v(e) {
-	return typeof e == "function" || typeof e == "object" && e ? e[g] === !0 : !1;
+function x(e) {
+	return typeof e == "function" || typeof e == "object" && e ? e[y] === !0 : !1;
 }
 //#endregion
 //#region src/react/svg/svgNaming.ts
-var y = [
+var S = [
 	"role",
 	"aria-label",
 	"aria-labelledby",
 	"aria-hidden"
 ];
-function b(e, t) {
+function C(e, t) {
 	if (e !== void 0) return {
 		role: "img",
 		"aria-label": e
 	};
-	if (!(t && y.some((e) => e in t))) return { "aria-hidden": !0 };
+	if (!(t && S.some((e) => e in t))) return { "aria-hidden": !0 };
 }
 //#endregion
 //#region src/utils/string/stringUtils.ts
-var x;
+var w;
 (function(e) {
 	function t(e) {
 		return e.charAt(0).toUpperCase() + e.slice(1);
 	}
 	e.capitalize = t;
-})(x ||= {});
-var S = x, C;
+})(w ||= {});
+var T = w, E;
 (function(e) {
 	function t(e, t, n) {
 		let r = { ...e }, i = r.props || {};
@@ -106,15 +117,15 @@ var S = x, C;
 		return e in t;
 	}
 	e.isKeyOf = r;
-})(C ||= {});
-var w = C, T = [
+})(E ||= {});
+var D = E, O = [
 	"sky-500",
 	"emerald-500",
 	"amber-500",
 	"violet-500",
 	"rose-500",
 	"cyan-500"
-], E = [
+], k = [
 	"sky-400",
 	"emerald-400",
 	"amber-400",
@@ -122,8 +133,8 @@ var w = C, T = [
 	"rose-400",
 	"cyan-400"
 ];
-function D(e) {
+function A(e) {
 	return e.reduce((e, t, n) => (e[`chart-${n + 1}`] = t, e), {});
 }
 //#endregion
-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 };
+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 };

package/registry/blocks/dashboard-shell/dashboard-shell.d.ts

@@ -17,6 +17,8 @@ export interface DashboardShellProps {
     /** The heading above the page, and the `id` of the nav item that is marked as current. */
     title: string;
     current?: string;
+    /** The theme to open in. Without it the shell follows the reader's saved choice, then their system. */
+    theme?: string;
     children: ReactNode;
 }
-export default function DashboardShell({ title, current, children }: DashboardShellProps): import("react").JSX.Element;
+export default function DashboardShell({ title, current, theme, children }: DashboardShellProps): import("react").JSX.Element;