@box-kite/react 2.1.0 → 2.2.0

package/docs/props.md

@@ -1,4 +1,4 @@
-# Every prop (221)
+# Every prop (235)
 
 Generated from the prop registry of `@box-kite/react`. The description is the prop's own doc comment and the example is **measured** — the CSS beside a value is what the engine emits for it, not what a doc claims. Alphabetical; the registry's own order is what decides the cascade and is not this.
 
@@ -14,7 +14,7 @@ The accent-color CSS property tints the parts of a native control the page does
 
 - Writes: `accent-color`
 - Values: 304 named values, anything else the types allow
-- Example: `accentColor="sky-500"` → `accent-color: var(--sky-500)`
+- Example: `accentColor="sky-500"` → `accent-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `ai`
 
@@ -112,6 +112,38 @@ The animation-play-state CSS property sets whether an animation is running or pa
 - Values: `running` · `paused`
 - Example: `animationPlayState="running"` → `animation-play-state: running`
 
+### `animationRange`
+
+The shorthand that sets both ends of the range at once: one value sets the start and leaves the end at `normal`, two set both. `entry` is the whole of the element coming into view, `cover 0% cover 50%` the first half of its pass across the scrollport. Only meaningful beside a view timeline.
+
+- Writes: `animation-range`
+- Values: whatever the types allow
+- Example: `animationRange="entry"` → `animation-range: entry`
+
+### `animationRangeEnd`
+
+Where along the timeline the animation finishes: a named part of the pass (`cover`, `contain`, `entry`, `exit`, `entry-crossing`, `exit-crossing`), an offset into one, or a plain length.
+
+- Writes: `animation-range-end`
+- Values: whatever the types allow
+- Example: `animationRangeEnd="exit"` → `animation-range-end: exit`
+
+### `animationRangeStart`
+
+Where along the timeline the animation starts. Same values as the end, and the pair is what turns "when this element is scrolled past" into "while it is entering, and no longer".
+
+- Writes: `animation-range-start`
+- Values: whatever the types allow
+- Example: `animationRangeStart="entry 25%"` → `animation-range-start: entry 25%`
+
+### `animationTimeline`
+
+What drives the animation — a scroll position rather than a clock, so there is no rAF loop, no scroll listener and no state. `scroll()` is the nearest scrollport's progress (`scroll(root)` the page's), `view()` this element's progress through it; both need nothing declared anywhere else. A name is a timeline `scrollTimeline`/`viewTimeline` declared elsewhere. Two things to know. **It is declared after `animation`**, because the CSS shorthand resets this property to `auto` — the registry's order is what stops `animation="spin"` quietly undoing it. And a scroll-driven animation has **no duration**, so `--transitionTime` cannot reach it and reduced motion needs saying out loud: `motionReduce={{ animation: 'none' }}`.
+
+- Writes: `animation-timeline`
+- Values: `none` · `auto`, anything else the types allow
+- Example: `animationTimeline="scroll()"` → `animation-timeline: scroll()`
+
 ### `animationTimingFunction`
 
 How an animation progresses through each cycle: a keyword, one of the four sampled springs, or a curve of your own — `cubic-bezier()`, `steps()` and `linear()` are values. A spring names its duration too.
@@ -254,7 +286,7 @@ The background-color CSS property sets the background color of an element.
 
 - Writes: `background-color`
 - Values: 304 named values, anything else the types allow
-- Example: `bgColor="sky-500"` → `background-color: var(--sky-500)`
+- Example: `bgColor="sky-500"` → `background-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `bgGradient`
 
@@ -262,7 +294,7 @@ A gradient written as a value: the key names the kind and carries its geometry (
 
 - Writes: `background-image`
 - Values: whatever the types allow
-- Example: `bgGradient={{ linear: 'r', colors: ['blue-500', 'pink-500'] }}` → `background-image: linear-gradient(to right,var(--blue-500),var(--pink-500))`
+- Example: `bgGradient={{ linear: 'r', colors: ['blue-500', 'pink-500'] }}` → `background-image: linear-gradient(to right,var(--blue-500,oklch(62.3% .214 259.8)),var(--pink-500,oklch(65.6% .241 354.3)))`
 
 ### `bgImage`
 
@@ -270,7 +302,7 @@ The background-image CSS property sets one or more background images on an eleme
 
 - Writes: `background-image`
 - Values: `gradient-primary` · `gradient-aurora-light` · `gradient-aurora-dark` · `gradient-accent` · `bg-img-checked` · `bg-img-indeterminate` · `bg-img-radio` · `none`
-- Example: `bgImage="gradient-primary"` → `background-image: var(--gradient-primary)`
+- Example: `bgImage="gradient-primary"` → `background-image: var(--gradient-primary,linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%))`
 
 ### `bl`
 
@@ -302,7 +334,7 @@ The border-color shorthand CSS property sets the color of an element's border.
 
 - Writes: `border-color`
 - Values: 304 named values, anything else the types allow
-- Example: `borderColor="sky-500"` → `border-color: var(--sky-500)`
+- Example: `borderColor="sky-500"` → `border-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `borderRadius`
 
@@ -510,7 +542,7 @@ The caret-color CSS property sets the colour of the insertion caret in a text fi
 
 - Writes: `caret-color`
 - Values: 304 named values, anything else the types allow
-- Example: `caretColor="sky-500"` → `caret-color: var(--sky-500)`
+- Example: `caretColor="sky-500"` → `caret-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `clipPath`
 
@@ -526,7 +558,7 @@ The color CSS property sets the foreground color value of an element's text and
 
 - Writes: `color`
 - Values: 304 named values, anything else the types allow
-- Example: `color="sky-500"` → `color: var(--sky-500)`
+- Example: `color="sky-500"` → `color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `colorScheme`
 
@@ -662,7 +694,7 @@ What colour `dropShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxDropShadowColor`
 - Values: 304 named values, anything else the types allow
-- Example: `dropShadowColor="sky-500"` → `--boxDropShadowColor: var(--sky-500)`
+- Example: `dropShadowColor="sky-500"` → `--boxDropShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `fieldSizing`
 
@@ -678,7 +710,7 @@ The fill CSS property defines how SVG text content and the interior canvas of SV
 
 - Writes: `fill`
 - Values: 304 named values, anything else the types allow
-- Example: `fill="sky-500"` → `fill: var(--sky-500)`
+- Example: `fill="sky-500"` → `fill: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `fillOpacity`
 
@@ -894,7 +926,7 @@ What colour `insetRing` draws in. `currentColor` otherwise.
 
 - Writes: `--boxInsetRingColor`
 - Values: 304 named values, anything else the types allow
-- Example: `insetRingColor="sky-500"` → `--boxInsetRingColor: var(--sky-500)`
+- Example: `insetRingColor="sky-500"` → `--boxInsetRingColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `insetShadow`
 
@@ -910,7 +942,7 @@ What colour `insetShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxInsetShadowColor`
 - Values: 304 named values, anything else the types allow
-- Example: `insetShadowColor="sky-500"` → `--boxInsetShadowColor: var(--sky-500)`
+- Example: `insetShadowColor="sky-500"` → `--boxInsetShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `insetStart`
 
@@ -1022,7 +1054,7 @@ What the element is masked by: the alpha channel of an image decides which of it
 
 - Writes: `mask-image`
 - Values: `none`, anything else the types allow
-- Example: `maskImage={{ linear: 'b', colors: ['black', 'transparent'] }}` → `mask-image: linear-gradient(to bottom,var(--black),var(--transparent))`
+- Example: `maskImage={{ linear: 'b', colors: ['black', 'transparent'] }}` → `mask-image: linear-gradient(to bottom,var(--black,#000),var(--transparent,transparent))`
 
 ### `maxHeight`
 
@@ -1158,7 +1190,7 @@ The outline-color CSS property sets the color of an element's outline.
 
 - Writes: `outline-color`
 - Values: 304 named values, anything else the types allow
-- Example: `outlineColor="sky-500"` → `outline-color: var(--sky-500)`
+- Example: `outlineColor="sky-500"` → `outline-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `outlineOffset`
 
@@ -1390,7 +1422,7 @@ What colour `ring` draws in. `currentColor` otherwise.
 
 - Writes: `--boxRingColor`
 - Values: 304 named values, anything else the types allow
-- Example: `ringColor="sky-500"` → `--boxRingColor: var(--sky-500)`
+- Example: `ringColor="sky-500"` → `--boxRingColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `rotate`
 
@@ -1446,7 +1478,7 @@ The scrollbar-color CSS property sets the color of the scrollbar thumb and track
 
 - Writes: `scrollbar-color`
 - Values: `currentColor,transparent,green,red,blue,gray,black,white,vi,slate-50,slate-100,slate-200,slate-300,slate-400,slate-500,slate-600,slate-700,slate-800,slate-900,slate-950,gray-50,gray-100,gray-200,gray-300,gray-400,gray-500,gray-600,gray-700,gray-800,gray-900,gray-950,zinc-50,zinc-100,zinc-200,zinc-300,zinc-400,zinc-500,zinc-600,zinc-700,zinc-800,zinc-900,zinc-950,neutral-50,neutral-100,neutral-200,neutral-300,neutral-400,neutral-500,neutral-600,neutral-700,neutral-800,neutral-900,neutral-950,stone-50,stone-100,stone-200,stone-300,stone-400,stone-500,stone-600,stone-700,stone-800,stone-900,stone-950,mauve-50,mauve-100,mauve-200,mauve-300,mauve-400,mauve-500,mauve-600,mauve-700,mauve-800,mauve-900,mauve-950,mist-50,mist-100,mist-200,mist-300,mist-400,mist-500,mist-600,mist-700,mist-800,mist-900,mist-950,olive-50,olive-100,olive-200,olive-300,olive-400,olive-500,olive-600,olive-700,olive-800,olive-900,olive-950,taupe-50,taupe-100,taupe-200,taupe-300,taupe-400,taupe-500,taupe-600,taupe-700,taupe-800,taupe-900,taupe-950,red-50,red-100,red-200,red-300,red-400,red-500,red-600,red-700,red-800,red-900,red-950,orange-50,orange-100,orange-200,orange-300,orange-400,orange-500,orange-600,orange-700,orange-800,orange-900,orange-950,amber-50,amber-100,amber-200,amber-300,amber-400,amber-500,amber-600,amber-700,amber-800,amber-900,amber-950,yellow-50,yellow-100,yellow-200,yellow-300,yellow-400,yellow-500,yellow-600,yellow-700,yellow-800,yellow-900,yellow-950,lime-50,lime-100,lime-200,lime-300,lime-400,lime-500,lime-600,lime-700,lime-800,lime-900,lime-950,green-50,green-100,green-200,green-300,green-400,green-500,green-600,green-700,green-800,green-900,green-950,emerald-50,emerald-100,emerald-200,emerald-300,emerald-400,emerald-500,emerald-600,emerald-700,emerald-800,emerald-900,emerald-950,teal-50,teal-100,teal-200,teal-300,teal-400,teal-500,teal-600,teal-700,teal-800,teal-900,teal-950,cyan-50,cyan-100,cyan-200,cyan-300,cyan-400,cyan-500,cyan-600,cyan-700,cyan-800,cyan-900,cyan-950,sky-50,sky-100,sky-200,sky-300,sky-400,sky-500,sky-600,sky-700,sky-800,sky-900,sky-950,blue-50,blue-100,blue-200,blue-300,blue-400,blue-500,blue-600,blue-700,blue-800,blue-900,blue-950,indigo-50,indigo-100,indigo-200,indigo-300,indigo-400,indigo-500,indigo-600,indigo-700,indigo-800,indigo-900,indigo-950,violet-50,violet-100,violet-200,violet-300,violet-400,violet-500,violet-600,violet-700,violet-800,violet-900,violet-950,purple-50,purple-100,purple-200,purple-300,purple-400,purple-500,purple-600,purple-700,purple-800,purple-900,purple-950,fuchsia-50,fuchsia-100,fuchsia-200,fuchsia-300,fuchsia-400,fuchsia-500,fuchsia-600,fuchsia-700,fuchsia-800,fuchsia-900,fuchsia-950,pink-50,pink-100,pink-200,pink-300,pink-400,pink-500,pink-600,pink-700,pink-800,pink-900,pink-950,rose-50,rose-100,rose-200,rose-300,rose-400,rose-500,rose-600,rose-700,rose-800,rose-900,rose-950,none`
-- Example: `scrollbarColor={['gray-400', 'gray-100']}` → `scrollbar-color: var(--gray-400) var(--gray-100)`
+- Example: `scrollbarColor={['gray-400', 'gray-100']}` → `scrollbar-color: var(--gray-400,oklch(70.7% .022 261.3)) var(--gray-100,oklch(96.7% .003 264.5))`
 
 ### `scrollbarGutter`
 
@@ -1464,6 +1496,30 @@ How wide a scrollbar the browser draws. `none` hides it without taking the scrol
 - Values: `auto` · `thin` · `none`
 - Example: `scrollbarWidth="auto"` → `scrollbar-width: auto`
 
+### `scrollTimeline`
+
+Declares a named scroll timeline on this scroller — the shorthand, `<name>` or `<name> <axis>`, and the one to reach for: the longhands exist to override half of it. The name is written with or without the `--`, the way an anchor's is. Anything inside this element can then name it on `animationTimeline`; anything outside needs a `timelineScope` on a common ancestor.
+
+- Writes: `scroll-timeline`
+- Values: `none`, anything else the types allow
+- Example: `scrollTimeline="page block"` → `scroll-timeline: --page block`
+
+### `scrollTimelineAxis`
+
+Which axis of this scroller the named timeline follows. `block`/`inline` are the writing mode's, so a timeline declared on the block axis is the vertical one in English and still correct in Japanese.
+
+- Writes: `scroll-timeline-axis`
+- Values: `block` · `inline` · `x` · `y`
+- Example: `scrollTimelineAxis="block"` → `scroll-timeline-axis: block`
+
+### `scrollTimelineName`
+
+The name half of `scrollTimeline`, on its own.
+
+- Writes: `scroll-timeline-name`
+- Values: `none`, anything else the types allow
+- Example: `scrollTimelineName="page"` → `scroll-timeline-name: --page`
+
 ### `sepia`
 
 How far the element is pushed towards sepia, as a percentage.
@@ -1486,7 +1542,7 @@ What colour `shadow` draws in — the scale's own translucent black otherwise. S
 
 - Writes: `--boxShadowColor`
 - Values: 304 named values, anything else the types allow
-- Example: `shadowColor="sky-500"` → `--boxShadowColor: var(--sky-500)`
+- Example: `shadowColor="sky-500"` → `--boxShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `shapeRendering`
 
@@ -1502,7 +1558,7 @@ The stroke CSS property defines the color or SVG paint server used to draw an el
 
 - Writes: `stroke`
 - Values: 304 named values, anything else the types allow
-- Example: `stroke="sky-500"` → `stroke: var(--sky-500)`
+- Example: `stroke="sky-500"` → `stroke: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `strokeDasharray`
 
@@ -1614,7 +1670,7 @@ What colour `textShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxTextShadowColor`
 - Values: 304 named values, anything else the types allow
-- Example: `textShadowColor="sky-500"` → `--boxTextShadowColor: var(--sky-500)`
+- Example: `textShadowColor="sky-500"` → `--boxTextShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `textTransform`
 
@@ -1632,6 +1688,14 @@ The text-wrap CSS shorthand property controls how text inside an element is wrap
 - Values: `wrap` · `nowrap` · `balance` · `pretty`
 - Example: `textWrap="wrap"` → `text-wrap: wrap`
 
+### `timelineScope`
+
+Makes the named timelines below this element reachable from anywhere else below it. A timeline is otherwise visible only to the declaring element's own descendants, so a progress bar that is not inside the article it tracks needs their common ancestor to declare the scope. Comma-separated.
+
+- Writes: `timeline-scope`
+- Values: `none`, anything else the types allow
+- Example: `timelineScope="page"` → `timeline-scope: --page`
+
 ### `top`
 
 The top CSS property sets the vertical position of a positioned element. This inset property has no effect on non-positioned elements. It also takes `anchor()`, an inset measured to one of the anchor's own edges.
@@ -1710,7 +1774,7 @@ CSS custom properties on this element, inherited by everything inside it: `vars=
 
 - Writes: `--color-revenue`
 - Values: whatever the types allow
-- Example: `vars={{ 'color-revenue': 'sky-500' }}` → `--color-revenue: var(--sky-500)`
+- Example: `vars={{ 'color-revenue': 'sky-500' }}` → `--color-revenue: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `vectorEffect`
 
@@ -1720,6 +1784,54 @@ How an SVG element's stroke reacts to the transforms above it: `non-scaling-stro
 - Values: `none` · `non-scaling-stroke`
 - Example: `vectorEffect="none"` → `vector-effect: none`
 
+### `viewTimeline`
+
+Declares a named view timeline on this element — its own progress across the scrollport, rather than the scroller's progress through its content. Same shorthand shape as `scrollTimeline`, and the same rule about who can see the name.
+
+- Writes: `view-timeline`
+- Values: `none`, anything else the types allow
+- Example: `viewTimeline="card block"` → `view-timeline: --card block`
+
+### `viewTimelineAxis`
+
+Which axis this element's pass across the scrollport is measured on.
+
+- Writes: `view-timeline-axis`
+- Values: `block` · `inline` · `x` · `y`
+- Example: `viewTimelineAxis="block"` → `view-timeline-axis: block`
+
+### `viewTimelineInset`
+
+Shrinks the scrollport the timeline measures against, so the pass starts and ends somewhere other than the viewport edges: one value for both ends, two for the start and the end. A positive inset moves the edge inwards, which is what makes an element count as "in view" before it really is.
+
+- Writes: `view-timeline-inset`
+- Values: whatever the types allow
+- Example: `viewTimelineInset="20%"` → `view-timeline-inset: 20%`
+
+### `viewTimelineName`
+
+The name half of `viewTimeline`, on its own.
+
+- Writes: `view-timeline-name`
+- Values: `none`, anything else the types allow
+- Example: `viewTimelineName="card"` → `view-timeline-name: --card`
+
+### `viewTransitionClass`
+
+A class shared by several named elements, so one rule styles the lot of them: `::view-transition-group(.card)` reaches every element carrying `viewTransitionClass="card"`. Space separated for more than one.
+
+- Writes: `view-transition-class`
+- Values: `none`, anything else the types allow
+- Example: `viewTransitionClass="card"` → `view-transition-class: card`
+
+### `viewTransitionName`
+
+Names this element for a view transition, which is what makes the browser animate it from where it was to where it is rather than cross-fading the whole page over it. A name has to be **unique in the document while the transition runs** — two elements sharing one is how a transition silently does nothing — so a list wants a name per item, and that is a rule per item this library would never free: write those with `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition` already takes. This prop is for the handful of names a layout has (`header`, `main`, `sidebar`).
+
+- Writes: `view-transition-name`
+- Values: `none` · `auto` · `match-element`, anything else the types allow
+- Example: `viewTransitionName="header"` → `view-transition-name: header`
+
 ### `visibility`
 
 The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>.

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

package/layer.mjs

@@ -2,26 +2,28 @@ import { a as e, l 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";
-import { useMemo as c, useRef as l, useState as u } from "react";
+import { useMemo as c, useRef as l, useState as u, useSyncExternalStore as d } from "react";
+//#region src/react/popover/useTopLayer.ts
+var f = () => () => {}, p = () => !0;
+function m() {
+	return d(f, e, p);
+}
+//#endregion
 //#region src/react/popover/usePopoverLayer.ts
-function d(d) {
-	let { haspopup: f, id: p, idPrefix: m, open: h, defaultOpen: g = !1, onOpenChange: _, onOpened: v, onClosing: y, inside: b } = d, x = s(m), S = p ?? x, [C, w] = i({
-		value: h,
-		defaultValue: g,
-		onChange: _
-	}), [T, E] = u(null), [D, O] = u(null), [k, A] = u(!0), [j, M] = u(!1), [N, P] = u(), F = l("imperative"), I = l(!1);
-	n(() => {
-		e() || A(!1);
-	}, []);
-	let L = r(v), R = r(y), z = r((e) => {
+function h(d) {
+	let { haspopup: f, id: p, idPrefix: h, open: g, defaultOpen: _ = !1, onOpenChange: v, onOpened: y, onClosing: b, inside: x } = d, S = s(h), C = p ?? S, [w, T] = i({
+		value: g,
+		defaultValue: _,
+		onChange: v
+	}), [E, D] = u(null), [O, k] = u(null), A = m(), [j, M] = u(!1), [N, P] = u(), F = l("imperative"), I = l(!1), L = r(y), R = r(b), z = r((e) => {
 		let t = e.newState === "open", n = e.currentTarget;
-		if (t && h === !1) {
+		if (t && g === !1) {
 			e.preventDefault();
 			return;
 		}
-		t || (I.current = n.contains(document.activeElement), R(I.current, T)), M(t);
+		t || (I.current = n.contains(document.activeElement), R(I.current, E)), M(t);
 		let r = t ? "trigger" : F.current;
-		F.current = "imperative", w(t, {
+		F.current = "imperative", T(t, {
 			reason: r,
 			event: e
 		});
@@ -30,23 +32,23 @@ function d(d) {
 		e.newState === "open" && L(t);
 	});
 	n(() => {
-		if (!k || !D) return;
+		if (!A || !O) return;
 		let e = new AbortController();
-		return D.addEventListener("beforetoggle", z, { signal: e.signal }), D.addEventListener("toggle", B, { signal: e.signal }), () => e.abort();
+		return O.addEventListener("beforetoggle", z, { signal: e.signal }), O.addEventListener("toggle", B, { signal: e.signal }), () => e.abort();
 	}, [
-		k,
-		D,
+		A,
+		O,
 		z,
 		B
 	]), n(() => {
-		!k || !D || C === j || (C ? D.showPopover() : D.hidePopover());
+		!A || !e() || !O || w === j || (w ? O.showPopover() : O.hidePopover());
 	}, [
-		C,
+		w,
 		j,
-		D,
-		k
+		O,
+		A
 	]), n(() => {
-		if (!k || !C) return;
+		if (!A || !w) return;
 		let e = new AbortController(), n = (t, n) => document.addEventListener(t, n, {
 			signal: e.signal,
 			capture: !0
@@ -54,74 +56,74 @@ function d(d) {
 		return n("keydown", (e) => {
 			e.key === "Escape" && (F.current = "escape");
 		}), n("pointerdown", (e) => {
-			let n = !!T && t(e, [T]);
+			let n = !!E && t(e, [E]);
 			F.current = n ? "trigger" : "outside-pointer";
 		}), () => e.abort();
 	}, [
-		k,
-		C,
-		T
+		A,
+		w,
+		E
 	]), n(() => {
-		T && (T.id || T.setAttribute("id", `${S}-trigger`), P(T.id));
-	}, [T, S]), n(() => {
-		if (!(!k || !T)) return T.setAttribute("popovertarget", S), () => T.removeAttribute("popovertarget");
+		E && (E.id || E.setAttribute("id", `${C}-trigger`), P(E.id));
+	}, [E, C]), n(() => {
+		if (!(!A || !E)) return E.setAttribute("popovertarget", C), () => E.removeAttribute("popovertarget");
 	}, [
-		k,
-		T,
-		S
+		A,
+		E,
+		C
 	]), n(() => {
-		k || !C || !D || L(D);
+		A || !w || !O || L(O);
 	}, [
-		k,
-		C,
-		D,
+		A,
+		w,
+		O,
 		L
 	]), o({
-		enabled: !k && C,
+		enabled: !A && w,
 		inside: [
-			D,
-			T,
-			...b ?? []
+			O,
+			E,
+			...x ?? []
 		],
-		onDismiss: (e, t) => w(!1, {
+		onDismiss: (e, t) => T(!1, {
 			reason: e,
 			event: t
 		})
 	}), a({
-		enabled: !k && C,
-		returnTo: T
+		enabled: !A && w,
+		returnTo: E
 	});
 	let V = r((e) => {
-		w((e) => !e, {
+		T((e) => !e, {
 			reason: "trigger",
 			event: e
 		});
 	});
 	return {
-		platform: k,
-		isOpen: C,
-		setOpen: w,
-		id: S,
+		platform: A,
+		isOpen: w,
+		setOpen: T,
+		id: C,
 		trigger: c(() => ({
-			ref: E,
+			ref: D,
 			props: {
-				"aria-expanded": C,
+				"aria-expanded": w,
 				"aria-haspopup": f,
-				"aria-controls": C ? S : void 0,
-				...k ? {} : { onClick: V }
+				"aria-controls": w ? C : void 0,
+				...A ? {} : { onClick: V }
 			}
 		}), [
 			V,
 			f,
+			w,
 			C,
-			S,
-			k
+			A
 		]),
-		triggerElement: T,
+		triggerElement: E,
 		triggerId: N,
-		setPanel: O,
-		panelElement: D
+		setPanel: k,
+		panelElement: O
 	};
 }
 //#endregion
-export { d as t };
+export { m as n, h as t };

package/mcp/src/data.d.ts

@@ -76,7 +76,7 @@ export declare const priorFacts: readonly string[];
 export declare const blocks: readonly RegistryItem[];
 export declare const blockInstall: (name: string) => string;
 /**
- * A fresh engine with readable class names and no DOM: what `check_styles` judges a value with. One
+ * 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
  * answer through the rule registry.
  */

package/mcp/src/styles.d.ts

@@ -6,11 +6,11 @@
  * Each prop is measured on its own, because one bag would let a rejected value hide behind an
  * accepted one in the same class list.
  */
-export type Verdict = 'ok' | 'rejected-value' | 'unknown-prop' | 'html-attribute' | 'reserved';
+export type Verdict = 'ok' | 'misread' | 'rejected-value' | 'unknown-prop' | 'html-attribute' | 'reserved';
 export interface PropCheck {
     name: string;
     verdict: Verdict;
-    /** The rules this prop wrote, at-rules included. Empty unless `ok`. */
+    /** The rules this prop wrote, at-rules included. Empty unless `ok` or `misread`. */
     css: string;
     /** What to do about it, when the verdict is not `ok`. */
     note?: string;

package/mcp/src/vocabulary.d.ts

@@ -1,5 +1,5 @@
 /**
- * Every key a Box takes that is *not* one of the 221 style props: the nesting keys, and the four
+ * Every key a Box takes that is *not* one of the 235 style props: the nesting keys, and the four
  * reserved names. Imported from the engine's own records rather than listed here, so a key added to
  * the library is in the MCP server the same day — the whole reason this package lives in this repo.
  */