@box-kite/react 2.2.1 → 2.2.3

package/.claude/rules/box-kite-rules.md

@@ -80,7 +80,7 @@ globs: '**/*.{ts,tsx,jsx}'
 
 46. **A scroll-driven animation is a timeline prop, and it costs no JavaScript at all.** `animationTimeline="scroll()"` runs an animation off the nearest scrollport's progress and `"view()"` off this element's own pass across it — no listener, no rAF, no state, and the browser drives it on the compositor. Where the scroller is not an ancestor, name one: `scrollTimeline="page block"` on the scroller (or `viewTimeline="card block"` on the subject), `animationTimeline="page"` on the animated element, and `timelineScope="page"` on their common ancestor when the two are not nested — the `--` on a name is optional and added for you, the axis is `block`/`inline`/`x`/`y` (logical, so it mirrors), and the longhands `scrollTimelineName`/`Axis` and `viewTimelineName`/`Axis` exist to override half a shorthand. **`animationRange` is which part of the pass the animation occupies**: `cover`, `contain`, `entry`, `exit`, `entry-crossing`, `exit-crossing`, each taking an offset — `animationRange="entry 0% entry 50%"`, or the `animationRangeStart`/`animationRangeEnd` pair — and `viewTimelineInset` shrinks the scrollport the pass is measured against, which is how a reveal fires before the element really reaches the edge. **Three traps.** The CSS `animation` shorthand **resets `animation-timeline`**, so a timeline declared before it is silently undone; the registry's order settles that for the props, but not for an `animation` written inside `css`. A scroll-driven animation has **no duration**, so `--transitionTime` cannot zero it and it is the one motion here that does _not_ stop itself under `prefers-reduced-motion` — `motionReduce={{ animation: 'none' }}` is the opt-in, and it is not optional. And where the browser has none (Safari, and Firefox behind a flag) the declaration is dropped rather than the animation: it runs on the **document timeline** over whatever duration it was given, so make the end state the resting state and a missing timeline degrades to "already arrived" instead of a loop.
 
-47. **A view transition is two props and one call.** `Box.viewTransition(() => applyChange())` runs a DOM change inside `document.startViewTransition` where the browser has one and plainly where it has not — the same `ready`/`finished`/`updateCallbackDone` promises and `skip()` either way, so a caller has one code path rather than two — and `viewTransitionName="header"` is what makes an element animate _from where it was to where it is_ instead of being cross-faded along with the page. `viewTransitionClass="card"` groups several names, so `::view-transition-group(.card)` styles them at once. **In React the update has to be flushed**: the browser screenshots the page the moment the callback returns and a `setState` has not rendered by then, so a hand-rolled version captures the old state twice and nothing appears to move — write `Box.viewTransition(() => flushSync(() => setTheme('dark')))`, or use **`<Box.Theme viewTransition>`**, which is that call for the one change every app has. **A name has to be unique in the document while the transition runs**, so a list wants a name per item — and a class per item is a rule this library would never free, which is why that one goes in `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition`'s anchor name and a `Slider` thumb already take. Reduced motion **skips** the transition by default and keeps the update, a whole-page cross-fade being exactly the motion the preference is about; `{ reducedMotion: 'play' }` is the opt-out, and `{ types: ['forward'] }` is what `:active-view-transition-type()` selects on.
+47. **A view transition is two props and one call.** `Box.viewTransition(() => applyChange())` runs a DOM change inside `document.startViewTransition` where the browser has one and plainly where it has not — the same `ready`/`finished`/`updateCallbackDone` promises and `skip()` either way, so a caller has one code path rather than two — and `viewTransitionName="header"` is what makes an element animate _from where it was to where it is_ instead of being cross-faded along with the page. `viewTransitionClass="card"` groups several names, so `::view-transition-group(.card)` styles them at once. **In React the update has to be flushed**: the browser screenshots the page the moment the callback returns and a `setState` has not rendered by then, so a hand-rolled version captures the old state twice and nothing appears to move — write `Box.viewTransition(() => flushSync(() => setTheme('dark')))`, or use **`<Box.Theme viewTransition>`**, which is that call for the one change every app has — `viewTransition="reveal"` grows the new theme out of the control that was pressed as a circle instead of cross-fading. **A theme change pauses every CSS transition** until it has painted (and until the view transition has finished), because `color` is inherited and the base class transitions `all`, so each element would otherwise start one of its own; the view transition is the animation, and it costs the same on any size of page. **A name has to be unique in the document while the transition runs**, so a list wants a name per item — and a class per item is a rule this library would never free, which is why that one goes in `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition`'s anchor name and a `Slider` thumb already take. Reduced motion **skips** the transition by default and keeps the update, a whole-page cross-fade being exactly the motion the preference is about; `{ reducedMotion: 'play' }` is the opt-out, and `{ types: ['forward'] }` is what `:active-view-transition-type()` selects on.
 
 48. **In development the console is part of the answer: read it.** Three mistakes write nothing, or the wrong thing, and say so in one `[box-kite]` warning that names what rendered and the line to write instead. **A value a prop does not take** — `bgColor="bleu-500"` → `wrote no CSS … Did you mean "blue-500"?`, `opacity={50}` → `It takes one of 0, 0.1, …`. **An HTML attribute at the top level** — `href`, `onClick`, `data-*`, `aria-*` → `write props={{ href: ... }}`. **A number in a unit it almost certainly did not mean**, which is valid CSS and so the one mistake nothing else catches: `fontSize={4}` is 4px text (`For 16px write fontSize={16}`), `lineHeight={1.5}` a 1.5px line, `transitionDuration={0.3}` 0.3ms, `brightness={1.1}` 1.1%. Each prints once per value, in any environment whose `NODE_ENV` is not `production` — a test run included, which is the cheapest place to see them — and never in a production build, where a rejected value is still dropped with nothing said. `Box.configure({ warnings: false })` turns them off; `check_styles` in `@box-kite/mcp` gives the same three verdicts before anything renders.
 

package/.claude/skills/box-kite/SKILL.md

@@ -153,7 +153,7 @@ Detect the package manager from the lock file rather than asking:
 
 46. **A scroll-driven animation is a timeline prop, and it costs no JavaScript at all.** `animationTimeline="scroll()"` runs an animation off the nearest scrollport's progress and `"view()"` off this element's own pass across it — no listener, no rAF, no state, and the browser drives it on the compositor. Where the scroller is not an ancestor, name one: `scrollTimeline="page block"` on the scroller (or `viewTimeline="card block"` on the subject), `animationTimeline="page"` on the animated element, and `timelineScope="page"` on their common ancestor when the two are not nested — the `--` on a name is optional and added for you, the axis is `block`/`inline`/`x`/`y` (logical, so it mirrors), and the longhands `scrollTimelineName`/`Axis` and `viewTimelineName`/`Axis` exist to override half a shorthand. **`animationRange` is which part of the pass the animation occupies**: `cover`, `contain`, `entry`, `exit`, `entry-crossing`, `exit-crossing`, each taking an offset — `animationRange="entry 0% entry 50%"`, or the `animationRangeStart`/`animationRangeEnd` pair — and `viewTimelineInset` shrinks the scrollport the pass is measured against, which is how a reveal fires before the element really reaches the edge. **Three traps.** The CSS `animation` shorthand **resets `animation-timeline`**, so a timeline declared before it is silently undone; the registry's order settles that for the props, but not for an `animation` written inside `css`. A scroll-driven animation has **no duration**, so `--transitionTime` cannot zero it and it is the one motion here that does _not_ stop itself under `prefers-reduced-motion` — `motionReduce={{ animation: 'none' }}` is the opt-in, and it is not optional. And where the browser has none (Safari, and Firefox behind a flag) the declaration is dropped rather than the animation: it runs on the **document timeline** over whatever duration it was given, so make the end state the resting state and a missing timeline degrades to "already arrived" instead of a loop.
 
-47. **A view transition is two props and one call.** `Box.viewTransition(() => applyChange())` runs a DOM change inside `document.startViewTransition` where the browser has one and plainly where it has not — the same `ready`/`finished`/`updateCallbackDone` promises and `skip()` either way, so a caller has one code path rather than two — and `viewTransitionName="header"` is what makes an element animate _from where it was to where it is_ instead of being cross-faded along with the page. `viewTransitionClass="card"` groups several names, so `::view-transition-group(.card)` styles them at once. **In React the update has to be flushed**: the browser screenshots the page the moment the callback returns and a `setState` has not rendered by then, so a hand-rolled version captures the old state twice and nothing appears to move — write `Box.viewTransition(() => flushSync(() => setTheme('dark')))`, or use **`<Box.Theme viewTransition>`**, which is that call for the one change every app has. **A name has to be unique in the document while the transition runs**, so a list wants a name per item — and a class per item is a rule this library would never free, which is why that one goes in `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition`'s anchor name and a `Slider` thumb already take. Reduced motion **skips** the transition by default and keeps the update, a whole-page cross-fade being exactly the motion the preference is about; `{ reducedMotion: 'play' }` is the opt-out, and `{ types: ['forward'] }` is what `:active-view-transition-type()` selects on.
+47. **A view transition is two props and one call.** `Box.viewTransition(() => applyChange())` runs a DOM change inside `document.startViewTransition` where the browser has one and plainly where it has not — the same `ready`/`finished`/`updateCallbackDone` promises and `skip()` either way, so a caller has one code path rather than two — and `viewTransitionName="header"` is what makes an element animate _from where it was to where it is_ instead of being cross-faded along with the page. `viewTransitionClass="card"` groups several names, so `::view-transition-group(.card)` styles them at once. **In React the update has to be flushed**: the browser screenshots the page the moment the callback returns and a `setState` has not rendered by then, so a hand-rolled version captures the old state twice and nothing appears to move — write `Box.viewTransition(() => flushSync(() => setTheme('dark')))`, or use **`<Box.Theme viewTransition>`**, which is that call for the one change every app has — `viewTransition="reveal"` grows the new theme out of the control that was pressed as a circle instead of cross-fading. **A theme change pauses every CSS transition** until it has painted (and until the view transition has finished), because `color` is inherited and the base class transitions `all`, so each element would otherwise start one of its own; the view transition is the animation, and it costs the same on any size of page. **A name has to be unique in the document while the transition runs**, so a list wants a name per item — and a class per item is a rule this library would never free, which is why that one goes in `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition`'s anchor name and a `Slider` thumb already take. Reduced motion **skips** the transition by default and keeps the update, a whole-page cross-fade being exactly the motion the preference is about; `{ reducedMotion: 'play' }` is the opt-out, and `{ types: ['forward'] }` is what `:active-view-transition-type()` selects on.
 
 48. **In development the console is part of the answer: read it.** Three mistakes write nothing, or the wrong thing, and say so in one `[box-kite]` warning that names what rendered and the line to write instead. **A value a prop does not take** — `bgColor="bleu-500"` → `wrote no CSS … Did you mean "blue-500"?`, `opacity={50}` → `It takes one of 0, 0.1, …`. **An HTML attribute at the top level** — `href`, `onClick`, `data-*`, `aria-*` → `write props={{ href: ... }}`. **A number in a unit it almost certainly did not mean**, which is valid CSS and so the one mistake nothing else catches: `fontSize={4}` is 4px text (`For 16px write fontSize={16}`), `lineHeight={1.5}` a 1.5px line, `transitionDuration={0.3}` 0.3ms, `brightness={1.1}` 1.1%. Each prints once per value, in any environment whose `NODE_ENV` is not `production` — a test run included, which is the cheapest place to see them — and never in a production build, where a rejected value is still dropped with nothing said. `Box.configure({ warnings: false })` turns them off; `check_styles` in `@box-kite/mcp` gives the same three verdicts before anything renders.
 

package/.claude/skills/box-kite/references/components.md

@@ -237,4 +237,4 @@ import DataGrid from '@box-kite/react/components/dataGrid';
 
 **Accessibility (A7, A10)**: the APG grid pattern, over a virtualized body — supplied whole, so add no roles and no `tabIndex`. The scrolling element is `role="grid"` (header and body are `rowgroup`s, rows `role="row"`, cells `role="gridcell"`/`columnheader`, scroll spacers `presentation`). `aria-rowcount`/`-colcount` describe the _whole_ grid and `aria-rowindex`/`-colindex` place each rendered cell in it, header rows first. Also `aria-sort` on sortable headers, `aria-selected` on rows only with `rowSelection`, `aria-busy` while `loading`, `aria-expanded` on group and expanded rows, and a live region announcing the selection count. Keyboard: one cell in the tab order; arrows move it, Home/End along the row, Ctrl+Home/End to the corners (scrolling to unrendered rows), PageUp/Down by a screenful, Enter/Space sorts a header or steps into the cell’s control, F2 always steps in, Escape steps back out. Down/Up keep the _column_ rather than the cell ordinal, so they land under where they started even through a grouped header. The column resizer is APG's window splitter — `role="separator"` with `aria-valuenow`/`-valuemin`/`-valuemax` in pixels; Tab or F2 reaches it, the arrows move it 16px, Home/End go to the narrowest the grid allows and to the grid's own width. Space on any cell selects its row, and on the header cell the select-all box sits in it toggles every row the filters leave on screen. Every cell carries the **current-cell mark**, which survives the grid losing focus so `Ctrl+C` has something to act on; with `def.rangeSelection` the cells of a marked block carry `aria-selected` and the grid is `aria-multiselectable`, while a lone current cell carries neither. Every control the grid draws names itself after what it acts on ("Select row 4", "Column options for Age"); the column menu is the APG menu button. **Give it `def.title`** — a grid is not named by its rows. Every widget a cell holds is out of the page tab sequence, so the grid is one tab stop: Enter or F2 steps in, Tab walks the widgets **within that cell** and wraps, and Escape is the way out.
 
-**Style tree**: `datagrid` > `content`, `topBar` > (`globalFilter` > `stats`, `columnGroups` > `icon`|`separator`|`item` > `icon`, `columnVisibility` > `badge`), `filter` > `cell` > `input`, `header` > `cell` > (`contextMenu` > `icon`|`tooltip` > `item` > `icon`|`separator`, `resizer`), `body` > (`cell` > `text`|`rowDetail`, `row`, `groupRow` > `expandButton`, `detailRow`, `empty`), `emptyColumns`, `bottomBar` > (`info`, `clearFilters`, `pagination` > `button`|`info`).
+**Style tree**: `datagrid` > `content`, `topBar` > (`globalFilter` > `stats`, `columnGroups` > `icon`|`separator`|`item` > `icon`, `columnVisibility` > `badge`|`panel`|`search`|`searchIcon`|`searchInput`|`toolbar`|`count`|`action`|`list`|`section`|`group`|`item`|`empty`), `filter` > `cell` > `input`, `header` > `cell` > (`contextMenu` > `icon`|`tooltip` > `item` > `icon`|`separator`, `resizer`), `body` > (`cell` > `text`|`rowDetail`, `row`, `groupRow` > `expandButton`, `detailRow`, `empty`), `emptyColumns`, `bottomBar` > (`info`, `clearFilters`, `pagination` > `button`|`info`).

package/.claude/skills/box-kite/references/styling.md

@@ -107,7 +107,8 @@ while the transition runs) and `viewTransitionClass` (a shared name, so `::view-
 `Box.viewTransition(update, { reducedMotion, types })` around the change itself: it feature-detects, hands back the same
 `ready`/`finished`/`updateCallbackDone`/`skip()` handle whether or not a transition ran, and **skips under reduced motion while still
 applying the update**. In React the update must be flushed inside the callback — `Box.viewTransition(() => flushSync(() => setTab(next)))` —
-or the screenshot catches the old state twice; `<Box.Theme viewTransition>` is that already done for a theme switch. A name _per list item_
+or the screenshot catches the old state twice; `<Box.Theme viewTransition>` is that already done for a theme switch (`viewTransition="reveal"`
+grows the new theme out of the pressed control instead), and a theme switch pauses every CSS transition while it is applied. A name _per list item_
 is a rule per item that is never freed, so that one belongs in `props={{ style: { viewTransitionName: id } }}`.
 
 **Gradients**: `bgGradient` — a gradient as a _value_, written as a record, so its stops are palette tokens and it is

package/.cursor/rules/box-kite.mdc

@@ -88,7 +88,7 @@ This library is not in your training data: it was renamed at 1.0.0 (September 20
 
 46. **A scroll-driven animation is a timeline prop, and it costs no JavaScript at all.** `animationTimeline="scroll()"` runs an animation off the nearest scrollport's progress and `"view()"` off this element's own pass across it — no listener, no rAF, no state, and the browser drives it on the compositor. Where the scroller is not an ancestor, name one: `scrollTimeline="page block"` on the scroller (or `viewTimeline="card block"` on the subject), `animationTimeline="page"` on the animated element, and `timelineScope="page"` on their common ancestor when the two are not nested — the `--` on a name is optional and added for you, the axis is `block`/`inline`/`x`/`y` (logical, so it mirrors), and the longhands `scrollTimelineName`/`Axis` and `viewTimelineName`/`Axis` exist to override half a shorthand. **`animationRange` is which part of the pass the animation occupies**: `cover`, `contain`, `entry`, `exit`, `entry-crossing`, `exit-crossing`, each taking an offset — `animationRange="entry 0% entry 50%"`, or the `animationRangeStart`/`animationRangeEnd` pair — and `viewTimelineInset` shrinks the scrollport the pass is measured against, which is how a reveal fires before the element really reaches the edge. **Three traps.** The CSS `animation` shorthand **resets `animation-timeline`**, so a timeline declared before it is silently undone; the registry's order settles that for the props, but not for an `animation` written inside `css`. A scroll-driven animation has **no duration**, so `--transitionTime` cannot zero it and it is the one motion here that does _not_ stop itself under `prefers-reduced-motion` — `motionReduce={{ animation: 'none' }}` is the opt-in, and it is not optional. And where the browser has none (Safari, and Firefox behind a flag) the declaration is dropped rather than the animation: it runs on the **document timeline** over whatever duration it was given, so make the end state the resting state and a missing timeline degrades to "already arrived" instead of a loop.
 
-47. **A view transition is two props and one call.** `Box.viewTransition(() => applyChange())` runs a DOM change inside `document.startViewTransition` where the browser has one and plainly where it has not — the same `ready`/`finished`/`updateCallbackDone` promises and `skip()` either way, so a caller has one code path rather than two — and `viewTransitionName="header"` is what makes an element animate _from where it was to where it is_ instead of being cross-faded along with the page. `viewTransitionClass="card"` groups several names, so `::view-transition-group(.card)` styles them at once. **In React the update has to be flushed**: the browser screenshots the page the moment the callback returns and a `setState` has not rendered by then, so a hand-rolled version captures the old state twice and nothing appears to move — write `Box.viewTransition(() => flushSync(() => setTheme('dark')))`, or use **`<Box.Theme viewTransition>`**, which is that call for the one change every app has. **A name has to be unique in the document while the transition runs**, so a list wants a name per item — and a class per item is a rule this library would never free, which is why that one goes in `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition`'s anchor name and a `Slider` thumb already take. Reduced motion **skips** the transition by default and keeps the update, a whole-page cross-fade being exactly the motion the preference is about; `{ reducedMotion: 'play' }` is the opt-out, and `{ types: ['forward'] }` is what `:active-view-transition-type()` selects on.
+47. **A view transition is two props and one call.** `Box.viewTransition(() => applyChange())` runs a DOM change inside `document.startViewTransition` where the browser has one and plainly where it has not — the same `ready`/`finished`/`updateCallbackDone` promises and `skip()` either way, so a caller has one code path rather than two — and `viewTransitionName="header"` is what makes an element animate _from where it was to where it is_ instead of being cross-faded along with the page. `viewTransitionClass="card"` groups several names, so `::view-transition-group(.card)` styles them at once. **In React the update has to be flushed**: the browser screenshots the page the moment the callback returns and a `setState` has not rendered by then, so a hand-rolled version captures the old state twice and nothing appears to move — write `Box.viewTransition(() => flushSync(() => setTheme('dark')))`, or use **`<Box.Theme viewTransition>`**, which is that call for the one change every app has — `viewTransition="reveal"` grows the new theme out of the control that was pressed as a circle instead of cross-fading. **A theme change pauses every CSS transition** until it has painted (and until the view transition has finished), because `color` is inherited and the base class transitions `all`, so each element would otherwise start one of its own; the view transition is the animation, and it costs the same on any size of page. **A name has to be unique in the document while the transition runs**, so a list wants a name per item — and a class per item is a rule this library would never free, which is why that one goes in `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition`'s anchor name and a `Slider` thumb already take. Reduced motion **skips** the transition by default and keeps the update, a whole-page cross-fade being exactly the motion the preference is about; `{ reducedMotion: 'play' }` is the opt-out, and `{ types: ['forward'] }` is what `:active-view-transition-type()` selects on.
 
 48. **In development the console is part of the answer: read it.** Three mistakes write nothing, or the wrong thing, and say so in one `[box-kite]` warning that names what rendered and the line to write instead. **A value a prop does not take** — `bgColor="bleu-500"` → `wrote no CSS … Did you mean "blue-500"?`, `opacity={50}` → `It takes one of 0, 0.1, …`. **An HTML attribute at the top level** — `href`, `onClick`, `data-*`, `aria-*` → `write props={{ href: ... }}`. **A number in a unit it almost certainly did not mean**, which is valid CSS and so the one mistake nothing else catches: `fontSize={4}` is 4px text (`For 16px write fontSize={16}`), `lineHeight={1.5}` a 1.5px line, `transitionDuration={0.3}` 0.3ms, `brightness={1.1}` 1.1%. Each prints once per value, in any environment whose `NODE_ENV` is not `production` — a test run included, which is the cheapest place to see them — and never in a production build, where a rejected value is still dropped with nothing said. `Box.configure({ warnings: false })` turns them off; `check_styles` in `@box-kite/mcp` gives the same three verdicts before anything renders.
 

package/AGENTS.md

@@ -120,7 +120,7 @@ Every value there is a prop, and every prop value becomes one class the engine i
 
 46. **A scroll-driven animation is a timeline prop, and it costs no JavaScript at all.** `animationTimeline="scroll()"` runs an animation off the nearest scrollport's progress and `"view()"` off this element's own pass across it — no listener, no rAF, no state, and the browser drives it on the compositor. Where the scroller is not an ancestor, name one: `scrollTimeline="page block"` on the scroller (or `viewTimeline="card block"` on the subject), `animationTimeline="page"` on the animated element, and `timelineScope="page"` on their common ancestor when the two are not nested — the `--` on a name is optional and added for you, the axis is `block`/`inline`/`x`/`y` (logical, so it mirrors), and the longhands `scrollTimelineName`/`Axis` and `viewTimelineName`/`Axis` exist to override half a shorthand. **`animationRange` is which part of the pass the animation occupies**: `cover`, `contain`, `entry`, `exit`, `entry-crossing`, `exit-crossing`, each taking an offset — `animationRange="entry 0% entry 50%"`, or the `animationRangeStart`/`animationRangeEnd` pair — and `viewTimelineInset` shrinks the scrollport the pass is measured against, which is how a reveal fires before the element really reaches the edge. **Three traps.** The CSS `animation` shorthand **resets `animation-timeline`**, so a timeline declared before it is silently undone; the registry's order settles that for the props, but not for an `animation` written inside `css`. A scroll-driven animation has **no duration**, so `--transitionTime` cannot zero it and it is the one motion here that does _not_ stop itself under `prefers-reduced-motion` — `motionReduce={{ animation: 'none' }}` is the opt-in, and it is not optional. And where the browser has none (Safari, and Firefox behind a flag) the declaration is dropped rather than the animation: it runs on the **document timeline** over whatever duration it was given, so make the end state the resting state and a missing timeline degrades to "already arrived" instead of a loop.
 
-47. **A view transition is two props and one call.** `Box.viewTransition(() => applyChange())` runs a DOM change inside `document.startViewTransition` where the browser has one and plainly where it has not — the same `ready`/`finished`/`updateCallbackDone` promises and `skip()` either way, so a caller has one code path rather than two — and `viewTransitionName="header"` is what makes an element animate _from where it was to where it is_ instead of being cross-faded along with the page. `viewTransitionClass="card"` groups several names, so `::view-transition-group(.card)` styles them at once. **In React the update has to be flushed**: the browser screenshots the page the moment the callback returns and a `setState` has not rendered by then, so a hand-rolled version captures the old state twice and nothing appears to move — write `Box.viewTransition(() => flushSync(() => setTheme('dark')))`, or use **`<Box.Theme viewTransition>`**, which is that call for the one change every app has. **A name has to be unique in the document while the transition runs**, so a list wants a name per item — and a class per item is a rule this library would never free, which is why that one goes in `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition`'s anchor name and a `Slider` thumb already take. Reduced motion **skips** the transition by default and keeps the update, a whole-page cross-fade being exactly the motion the preference is about; `{ reducedMotion: 'play' }` is the opt-out, and `{ types: ['forward'] }` is what `:active-view-transition-type()` selects on.
+47. **A view transition is two props and one call.** `Box.viewTransition(() => applyChange())` runs a DOM change inside `document.startViewTransition` where the browser has one and plainly where it has not — the same `ready`/`finished`/`updateCallbackDone` promises and `skip()` either way, so a caller has one code path rather than two — and `viewTransitionName="header"` is what makes an element animate _from where it was to where it is_ instead of being cross-faded along with the page. `viewTransitionClass="card"` groups several names, so `::view-transition-group(.card)` styles them at once. **In React the update has to be flushed**: the browser screenshots the page the moment the callback returns and a `setState` has not rendered by then, so a hand-rolled version captures the old state twice and nothing appears to move — write `Box.viewTransition(() => flushSync(() => setTheme('dark')))`, or use **`<Box.Theme viewTransition>`**, which is that call for the one change every app has — `viewTransition="reveal"` grows the new theme out of the control that was pressed as a circle instead of cross-fading. **A theme change pauses every CSS transition** until it has painted (and until the view transition has finished), because `color` is inherited and the base class transitions `all`, so each element would otherwise start one of its own; the view transition is the animation, and it costs the same on any size of page. **A name has to be unique in the document while the transition runs**, so a list wants a name per item — and a class per item is a rule this library would never free, which is why that one goes in `props={{ style: { viewTransitionName: id } }}`, the exception `useAnchorPosition`'s anchor name and a `Slider` thumb already take. Reduced motion **skips** the transition by default and keeps the update, a whole-page cross-fade being exactly the motion the preference is about; `{ reducedMotion: 'play' }` is the opt-out, and `{ types: ['forward'] }` is what `:active-view-transition-type()` selects on.
 
 48. **In development the console is part of the answer: read it.** Three mistakes write nothing, or the wrong thing, and say so in one `[box-kite]` warning that names what rendered and the line to write instead. **A value a prop does not take** — `bgColor="bleu-500"` → `wrote no CSS … Did you mean "blue-500"?`, `opacity={50}` → `It takes one of 0, 0.1, …`. **An HTML attribute at the top level** — `href`, `onClick`, `data-*`, `aria-*` → `write props={{ href: ... }}`. **A number in a unit it almost certainly did not mean**, which is valid CSS and so the one mistake nothing else catches: `fontSize={4}` is 4px text (`For 16px write fontSize={16}`), `lineHeight={1.5}` a 1.5px line, `transitionDuration={0.3}` 0.3ms, `brightness={1.1}` 1.1%. Each prints once per value, in any environment whose `NODE_ENV` is not `production` — a test run included, which is the cheapest place to see them — and never in a production build, where a rejected value is still dropped with nothing said. `Box.configure({ warnings: false })` turns them off; `check_styles` in `@box-kite/mcp` gives the same three verdicts before anything renders.
 

package/BOX_AI_CONTEXT.md

@@ -726,7 +726,7 @@ so a change that was a jump becomes a transition with nothing animated by hand.
 | `viewTransitionName`                  | Names this element, so it animates _from where it was to where it is_ instead of being cross-faded with the page. A `<custom-ident>`, **not** dashed |
 | `viewTransitionClass`                 | A name shared by several elements, so `::view-transition-group(.card)` styles them together. Space-separated for more than one                       |
 | `Box.viewTransition(update, options)` | Runs `update` inside `document.startViewTransition` where the browser has one, and plainly where it has not                                          |
-| `<Box.Theme viewTransition>`          | That call around a theme change, `flushSync` included                                                                                                |
+| `<Box.Theme viewTransition>`          | That call around a theme change, `flushSync` included. `viewTransition="reveal"` grows the new theme out of the pressed control as a circle          |
 
 ```tsx
 const handle = Box.viewTransition(() => flushSync(() => setTab(next)), { types: ['forward'] });
@@ -756,7 +756,9 @@ interface ViewTransitionHandle {
 - **In React the update has to be flushed.** The browser takes its second screenshot the moment the
   callback returns, and a `setState` has not rendered by then — so a hand-rolled version captures the old
   state twice and nothing appears to move. `flushSync` inside the callback is the fix, and
-  `<Box.Theme viewTransition>` is it already done for the one change every app has.
+  `<Box.Theme viewTransition>` is it already done for the one change every app has. A theme change also
+  pauses every CSS transition until the new theme has painted (and the view transition has finished) — `color` is inherited and every Box transitions
+  `all`, so each element would start one of its own — which leaves the view transition as the only animation.
 - **A name has to be unique in the document while the transition runs.** Two elements sharing one is how a
   transition silently does nothing. The prop is for the handful of names a layout has (`header`, `main`);
   a name **per list item** is a rule per item that is never freed, so that one goes in
@@ -2801,8 +2803,20 @@ stops, as they were before A7.
 | `datagrid.topBar.columnGroups.separator`                  | Separator between groups                                  | —                                                                                                                                                                                                                      |
 | `datagrid.topBar.columnGroups.item`                       | Column group chip                                         | —                                                                                                                                                                                                                      |
 | `datagrid.topBar.columnGroups.item.icon`                  | Remove icon on chip                                       | —                                                                                                                                                                                                                      |
-| `datagrid.topBar.columnVisibility`                        | Column visibility dropdown                                | —                                                                                                                                                                                                                      |
-| `datagrid.topBar.columnVisibility.badge`                  | Hidden columns count badge                                | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility`                        | Columns button (opens the columns panel)                  | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.badge`                  | Shown/total count, only while columns are hidden          | `empty`                                                                                                                                                                                                                |
+| `datagrid.topBar.columnVisibility.panel`                  | Columns panel body                                        | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.search`                 | Search row (past six columns)                             | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.searchIcon`             | Magnifier inside the search field                         | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.searchInput`            | Search field                                              | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.toolbar`                | Count + Show all / Hide all row                           | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.count`                  | "6 of 8 shown"                                            | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.action`                 | Show all / Hide all buttons                               | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.list`                   | Scrolling list of switches                                | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.section`                | A run of columns under one header group                   | `divided`                                                                                                                                                                                                              |
+| `datagrid.topBar.columnVisibility.group`                  | Header group name above its columns                       | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.item`                   | One column: label + switch (the `<label>`)                | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.empty`                  | No-match message                                          | —                                                                                                                                                                                                                      |
 | `datagrid.filter.cell`                                    | Filter row cell                                           | `isPinned`, `isFirstLeftPinned`, `isLastLeftPinned`, `isFirstRightPinned`, `isLastRightPinned`                                                                                                                         |
 | `datagrid.filter.cell.input`                              | Filter input container (text/number/multiselect)          | —                                                                                                                                                                                                                      |
 | `datagrid.header`                                         | Header grid container (sticky)                            | —                                                                                                                                                                                                                      |

package/BOX_KITE_AI_CONTEXT.md

@@ -726,7 +726,7 @@ so a change that was a jump becomes a transition with nothing animated by hand.
 | `viewTransitionName`                  | Names this element, so it animates _from where it was to where it is_ instead of being cross-faded with the page. A `<custom-ident>`, **not** dashed |
 | `viewTransitionClass`                 | A name shared by several elements, so `::view-transition-group(.card)` styles them together. Space-separated for more than one                       |
 | `Box.viewTransition(update, options)` | Runs `update` inside `document.startViewTransition` where the browser has one, and plainly where it has not                                          |
-| `<Box.Theme viewTransition>`          | That call around a theme change, `flushSync` included                                                                                                |
+| `<Box.Theme viewTransition>`          | That call around a theme change, `flushSync` included. `viewTransition="reveal"` grows the new theme out of the pressed control as a circle          |
 
 ```tsx
 const handle = Box.viewTransition(() => flushSync(() => setTab(next)), { types: ['forward'] });
@@ -756,7 +756,9 @@ interface ViewTransitionHandle {
 - **In React the update has to be flushed.** The browser takes its second screenshot the moment the
   callback returns, and a `setState` has not rendered by then — so a hand-rolled version captures the old
   state twice and nothing appears to move. `flushSync` inside the callback is the fix, and
-  `<Box.Theme viewTransition>` is it already done for the one change every app has.
+  `<Box.Theme viewTransition>` is it already done for the one change every app has. A theme change also
+  pauses every CSS transition until the new theme has painted (and the view transition has finished) — `color` is inherited and every Box transitions
+  `all`, so each element would start one of its own — which leaves the view transition as the only animation.
 - **A name has to be unique in the document while the transition runs.** Two elements sharing one is how a
   transition silently does nothing. The prop is for the handful of names a layout has (`header`, `main`);
   a name **per list item** is a rule per item that is never freed, so that one goes in
@@ -2801,8 +2803,20 @@ stops, as they were before A7.
 | `datagrid.topBar.columnGroups.separator`                  | Separator between groups                                  | —                                                                                                                                                                                                                      |
 | `datagrid.topBar.columnGroups.item`                       | Column group chip                                         | —                                                                                                                                                                                                                      |
 | `datagrid.topBar.columnGroups.item.icon`                  | Remove icon on chip                                       | —                                                                                                                                                                                                                      |
-| `datagrid.topBar.columnVisibility`                        | Column visibility dropdown                                | —                                                                                                                                                                                                                      |
-| `datagrid.topBar.columnVisibility.badge`                  | Hidden columns count badge                                | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility`                        | Columns button (opens the columns panel)                  | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.badge`                  | Shown/total count, only while columns are hidden          | `empty`                                                                                                                                                                                                                |
+| `datagrid.topBar.columnVisibility.panel`                  | Columns panel body                                        | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.search`                 | Search row (past six columns)                             | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.searchIcon`             | Magnifier inside the search field                         | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.searchInput`            | Search field                                              | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.toolbar`                | Count + Show all / Hide all row                           | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.count`                  | "6 of 8 shown"                                            | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.action`                 | Show all / Hide all buttons                               | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.list`                   | Scrolling list of switches                                | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.section`                | A run of columns under one header group                   | `divided`                                                                                                                                                                                                              |
+| `datagrid.topBar.columnVisibility.group`                  | Header group name above its columns                       | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.item`                   | One column: label + switch (the `<label>`)                | —                                                                                                                                                                                                                      |
+| `datagrid.topBar.columnVisibility.empty`                  | No-match message                                          | —                                                                                                                                                                                                                      |
 | `datagrid.filter.cell`                                    | Filter row cell                                           | `isPinned`, `isFirstLeftPinned`, `isLastLeftPinned`, `isFirstRightPinned`, `isLastRightPinned`                                                                                                                         |
 | `datagrid.filter.cell.input`                              | Filter input container (text/number/multiselect)          | —                                                                                                                                                                                                                      |
 | `datagrid.header`                                         | Header grid container (sticky)                            | —                                                                                                                                                                                                                      |

package/README.md

@@ -20,9 +20,6 @@ version behind what it is writing against: [Built for AI](https://www.box-kite.d
 [`npx @box-kite/mcp`](https://www.npmjs.com/package/@box-kite/mcp) ·
 [generative UI](https://www.box-kite.dev/generative-ui/)
 
-> **Renamed at 1.0.0.** This was `@cronocode/react-box`. The API is unchanged — the move is one
-> find-and-replace, and `@cronocode/react-box@3.4.0` re-exports this package.
-
 ## Getting Started
 
 1. Installation

package/client.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react-dom"),c=require("react/jsx-runtime");function l(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.l(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var u=r.t;function d(e,n){let{classNames:r,signature:i,styleElements:a}=t.l(e,n);return u(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:a}}function f(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return u(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var p;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().getStyleTag()}e.getStyleTag=i;function a(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=a;function s(e){(0,o.getDefaultEngine)().configure(e)}e.configure=s})(p||={});var m=`[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19`;function h(e){if(typeof e.createContext!=`function`)throw Error(m)}h(a.default);var g=a.default.createContext({theme:``,setTheme:()=>{}});function _(e){let{children:t,theme:n,use:r=`local`,storageKey:l,globalStyles:u,viewTransition:d}=e,p=f(r===`global`?u:void 0,`html`),[m,h]=(0,a.useState)(n??o.defaultThemeName),[_,v]=(0,a.useState)(n!==void 0),y=(0,a.useRef)(null),b=(0,a.useRef)(m),x=(0,a.useCallback)(e=>{let t=()=>{e===null?(l&&(0,o.clearStoredTheme)(l),v(!1)):(l&&(0,o.writeStoredTheme)(l,e),h(e),v(!0))};d?(0,o.startViewTransition)(()=>(0,s.flushSync)(t)):t()},[l,d]),[S,C]=(0,a.useState)(n);return n!==S&&(C(n),n===void 0?v(!1):(h(n),v(!0))),(0,a.useLayoutEffect)(()=>{if(_)return;let e=l?(0,o.readStoredTheme)(l):null,t=e??(0,o.getSystemTheme)();if(t!==b.current&&(y.current=t),h(t),e){v(!0);return}return(0,o.watchSystemTheme)(h)},[_,l]),(0,a.useLayoutEffect)(()=>{if(b.current=m,y.current!==null&&y.current!==m||(y.current=null,r===`local`))return;let e=(0,o.documentRoot)();if(e)return(0,o.applyThemeToElement)(e,m)},[m,r]),r===`local`?(0,c.jsxs)(g.Provider,{value:{theme:m,setTheme:x},children:[p,(0,c.jsx)(i.default,{className:m,props:{"data-theme":m},children:t})]}):(0,c.jsxs)(g.Provider,{value:{theme:m,setTheme:x},children:[p,t]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(g);return[e,t]}e.useTheme=t})(_||={});var v=_,y=new WeakMap;function b(e){let t=y.get(e);return t||(t=new Map,y.set(e,t)),t}function x(e=!0){let[t]=v.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;let r=`box-kite-portal`,i=t.getElementById(r);return i||(i=document.createElement(`div`),i.id=r,document.body.appendChild(i)),i},[e]);return(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=b(r),n=e.get(t)??0;return e.set(t,n+1),n===0&&r.classList.add(t),()=>{let n=(e.get(t)??1)-1;n<=0?(e.delete(t),r.classList.remove(t)):e.set(t,n)}},[r,t]),r}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return x}});
+const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs"),n=require("./platform.cjs"),r=require("./effects.cjs"),i=require("./box.cjs");let a=require("react");a=e.t(a,1);let o=require("@box-kite/core"),s=require("react-dom"),c=require("react/jsx-runtime");function l(e){let{node:t=null,event:r=`click`,hideOnScroll:i=!1,hideOnResize:o=!1,hideOnEscape:s=!0}=e??{},[c,l]=(0,a.useState)(!1),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{function e(e){let r=t??u.current;r&&!n.l(e,[r])&&l(!1)}function a(){l(!1)}function d(e){e.key===`Escape`&&l(!1)}let f=new AbortController;return c&&(window.addEventListener(r,e,f),s&&window.addEventListener(`keydown`,d,f),o&&window.addEventListener(`resize`,a,f),i&&window.addEventListener(`scroll`,e,{signal:f.signal,capture:!0})),()=>{f.abort()}},[t,c,r,s,o,i]),[c,l,u]}var u=r.t;function d(e,n){let{classNames:r,signature:i,styleElements:a}=t.l(e,n);return u(()=>{(0,o.getDefaultEngine)().flushSync()},[i??e]),{classNames:r,styleElements:a}}function f(e,n){let r=e?(0,o.getDefaultEngine)().addGlobalStyles(e,n):void 0;return u(()=>{(0,o.getDefaultEngine)().flushSync()},[e,n]),t.u(r)}var p;(function(e){function t(){(0,o.getDefaultEngine)().flushSync()}e.flushSync=t;function n(){(0,o.getDefaultEngine)().clear()}e.clear=n;function r(){return(0,o.getDefaultEngine)().getStyles()}e.getStyles=r;function i(){return(0,o.getDefaultEngine)().getStyleTag()}e.getStyleTag=i;function a(){return(0,o.getDefaultEngine)().styleElementId}e.styleElementId=a;function s(e){(0,o.getDefaultEngine)().configure(e)}e.configure=s})(p||={});var m=`[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19`;function h(e){if(typeof e.createContext!=`function`)throw Error(m)}h(a.default);var g=a.default.createContext({theme:``,setTheme:()=>{}});function _(e){let{children:t,theme:n,use:l=`local`,storageKey:u,globalStyles:d,viewTransition:p}=e,m=f(l===`global`?d:void 0,`html`),[h,_]=(0,a.useState)(n??o.defaultThemeName),[v,y]=(0,a.useState)(n!==void 0),b=(0,a.useRef)(null),x=(0,a.useRef)(h),S=(0,a.useRef)(null),C=(0,a.useRef)(void 0),w=(0,a.useCallback)(e=>{let t=()=>{e===null?(u&&(0,o.clearStoredTheme)(u),y(!1)):(u&&(0,o.writeStoredTheme)(u,e),_(e),y(!0))};if(p){let e=(0,o.transitionTheme)(()=>(0,s.flushSync)(t),p===`reveal`?`reveal`:`fade`);C.current=e.finished,e.finished.then(()=>C.current=void 0,()=>C.current=void 0)}else t()},[u,p]),T=p===`reveal`;(0,a.useEffect)(()=>T?(0,o.prepareReveal)():void 0,[T]);let[E,D]=(0,a.useState)(n);return n!==E&&(D(n),n===void 0?y(!1):(_(n),y(!0))),(0,a.useLayoutEffect)(()=>{if(v)return;let e=u?(0,o.readStoredTheme)(u):null,t=e??(0,o.getSystemTheme)();if(t!==x.current&&(b.current=t),_(t),e){y(!0);return}return(0,o.watchSystemTheme)(_)},[v,u]),r.t(()=>{h!==x.current&&(S.current??=(0,o.pauseTransitions)())},[h]),(0,a.useLayoutEffect)(()=>{if(x.current=h,b.current!==null&&b.current!==h)return;b.current=null;let e=S.current;S.current=null;let t=l===`global`?(0,o.documentRoot)():null,n=t?(0,o.applyThemeToElement)(t,h):void 0;return e?.(C.current),n},[h,l]),l===`local`?(0,c.jsxs)(g.Provider,{value:{theme:h,setTheme:w},children:[m,(0,c.jsx)(i.default,{className:h,props:{"data-theme":h},children:t})]}):(0,c.jsxs)(g.Provider,{value:{theme:h,setTheme:w},children:[m,t]})}(function(e){function t(){let{theme:e,setTheme:t}=(0,a.useContext)(g);return[e,t]}e.useTheme=t})(_||={});var v=_,y=new WeakMap;function b(e){let t=y.get(e);return t||(t=new Map,y.set(e,t)),t}function x(e=!0){let[t]=v.useTheme(),r=(0,a.useMemo)(()=>{if(!e)return null;let t=n.t();if(!t)return null;let r=`box-kite-portal`,i=t.getElementById(r);return i||(i=document.createElement(`div`),i.id=r,document.body.appendChild(i)),i},[e]);return(0,a.useLayoutEffect)(()=>{if(!t||!r)return;let e=b(r),n=e.get(t)??0;return e.set(t,n+1),n===0&&r.classList.add(t),()=>{let n=(e.get(t)??1)-1;n<=0?(e.delete(t),r.classList.remove(t)):e.set(t,n)}},[r,t]),r}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return x}});

package/client.mjs

@@ -3,11 +3,11 @@ import { l as n, t as r } from "./platform.mjs";
 import { t as i } from "./effects.mjs";
 import a from "./box.mjs";
 import o, { useCallback as s, useContext as c, useEffect as l, useLayoutEffect as u, useMemo as d, useRef as f, useState as p } from "react";
-import { applyThemeToElement as m, clearStoredTheme as h, defaultThemeName as g, documentRoot as _, getDefaultEngine as v, getSystemTheme as y, readStoredTheme as b, startViewTransition as x, watchSystemTheme as S, writeStoredTheme as C } from "@box-kite/core";
-import { flushSync as w } from "react-dom";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { applyThemeToElement as m, clearStoredTheme as h, defaultThemeName as g, documentRoot as _, getDefaultEngine as v, getSystemTheme as y, pauseTransitions as b, prepareReveal as x, readStoredTheme as S, transitionTheme as C, watchSystemTheme as w, writeStoredTheme as T } from "@box-kite/core";
+import { flushSync as E } from "react-dom";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
 //#region src/react/hooks/useVisibility.ts
-function D(e) {
+function k(e) {
 	let { node: t = null, event: r = "click", hideOnScroll: i = !1, hideOnResize: a = !1, hideOnEscape: o = !0 } = e ?? {}, [s, c] = p(!1), u = f(null);
 	return l(() => {
 		function e(e) {
@@ -42,23 +42,23 @@ function D(e) {
 }
 //#endregion
 //#region src/react/useStyles.ts
-var O = i;
-function k(t, n) {
+var A = i;
+function j(t, n) {
 	let { classNames: r, signature: i, styleElements: a } = e(t, n);
-	return O(() => {
+	return A(() => {
 		v().flushSync();
 	}, [i ?? t]), {
 		classNames: r,
 		styleElements: a
 	};
 }
-function A(e, n) {
+function M(e, n) {
 	let r = e ? v().addGlobalStyles(e, n) : void 0;
-	return O(() => {
+	return A(() => {
 		v().flushSync();
 	}, [e, n]), t(r);
 }
-var j;
+var N;
 (function(e) {
 	function t() {
 		v().flushSync();
@@ -84,73 +84,83 @@ var j;
 		v().configure(e);
 	}
 	e.configure = o;
-})(j ||= {});
+})(N ||= {});
 //#endregion
 //#region src/react/clientRuntime.ts
-var M = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
-function N(e) {
-	if (typeof e.createContext != "function") throw Error(M);
+var P = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
+function F(e) {
+	if (typeof e.createContext != "function") throw Error(P);
 }
 //#endregion
 //#region src/react/theme/themeContext.ts
-N(o);
-var P = o.createContext({
+F(o);
+var I = o.createContext({
 	theme: "",
 	setTheme: () => {}
 });
 //#endregion
 //#region src/react/theme/theme.tsx
-function F(e) {
-	let { children: t, theme: n, use: r = "local", storageKey: i, globalStyles: o, viewTransition: c } = e, l = A(r === "global" ? o : void 0, "html"), [d, v] = p(n ?? g), [D, O] = p(n !== void 0), k = f(null), j = f(d), M = s((e) => {
+function L(e) {
+	let { children: t, theme: n, use: r = "local", storageKey: o, globalStyles: c, viewTransition: d } = e, v = M(r === "global" ? c : void 0, "html"), [k, A] = p(n ?? g), [j, N] = p(n !== void 0), P = f(null), F = f(k), L = f(null), R = f(void 0), z = s((e) => {
 		let t = () => {
-			e === null ? (i && h(i), O(!1)) : (i && C(i, e), v(e), O(!0));
+			e === null ? (o && h(o), N(!1)) : (o && T(o, e), A(e), N(!0));
 		};
-		c ? x(() => w(t)) : t();
-	}, [i, c]), [N, F] = p(n);
-	return n !== N && (F(n), n === void 0 ? O(!1) : (v(n), O(!0))), u(() => {
-		if (D) return;
-		let e = i ? b(i) : null, t = e ?? y();
-		if (t !== j.current && (k.current = t), v(t), e) {
-			O(!0);
+		if (d) {
+			let e = C(() => E(t), d === "reveal" ? "reveal" : "fade");
+			R.current = e.finished, e.finished.then(() => R.current = void 0, () => R.current = void 0);
+		} else t();
+	}, [o, d]), B = d === "reveal";
+	l(() => B ? x() : void 0, [B]);
+	let [V, H] = p(n);
+	return n !== V && (H(n), n === void 0 ? N(!1) : (A(n), N(!0))), u(() => {
+		if (j) return;
+		let e = o ? S(o) : null, t = e ?? y();
+		if (t !== F.current && (P.current = t), A(t), e) {
+			N(!0);
 			return;
 		}
-		return S(v);
-	}, [D, i]), u(() => {
-		if (j.current = d, k.current !== null && k.current !== d || (k.current = null, r === "local")) return;
-		let e = _();
-		if (e) return m(e, d);
-	}, [d, r]), r === "local" ? /* @__PURE__ */ E(P.Provider, {
+		return w(A);
+	}, [j, o]), i(() => {
+		k !== F.current && (L.current ??= b());
+	}, [k]), u(() => {
+		if (F.current = k, P.current !== null && P.current !== k) return;
+		P.current = null;
+		let e = L.current;
+		L.current = null;
+		let t = r === "global" ? _() : null, n = t ? m(t, k) : void 0;
+		return e?.(R.current), n;
+	}, [k, r]), r === "local" ? /* @__PURE__ */ O(I.Provider, {
 		value: {
-			theme: d,
-			setTheme: M
+			theme: k,
+			setTheme: z
 		},
-		children: [l, /* @__PURE__ */ T(a, {
-			className: d,
-			props: { "data-theme": d },
+		children: [v, /* @__PURE__ */ D(a, {
+			className: k,
+			props: { "data-theme": k },
 			children: t
 		})]
-	}) : /* @__PURE__ */ E(P.Provider, {
+	}) : /* @__PURE__ */ O(I.Provider, {
 		value: {
-			theme: d,
-			setTheme: M
+			theme: k,
+			setTheme: z
 		},
-		children: [l, t]
+		children: [v, t]
 	});
 }
 (function(e) {
 	function t() {
-		let { theme: e, setTheme: t } = c(P);
+		let { theme: e, setTheme: t } = c(I);
 		return [e, t];
 	}
 	e.useTheme = t;
-})(F ||= {});
-var I = F, L = /* @__PURE__ */ new WeakMap();
-function R(e) {
-	let t = L.get(e);
-	return t || (t = /* @__PURE__ */ new Map(), L.set(e, t)), t;
+})(L ||= {});
+var R = L, z = /* @__PURE__ */ new WeakMap();
+function B(e) {
+	let t = z.get(e);
+	return t || (t = /* @__PURE__ */ new Map(), z.set(e, t)), t;
 }
-function z(e = !0) {
-	let [t] = I.useTheme(), n = d(() => {
+function V(e = !0) {
+	let [t] = R.useTheme(), n = d(() => {
 		if (!e) return null;
 		let t = r();
 		if (!t) return null;
@@ -159,7 +169,7 @@ function z(e = !0) {
 	}, [e]);
 	return u(() => {
 		if (!t || !n) return;
-		let e = R(n), r = e.get(t) ?? 0;
+		let e = B(n), r = e.get(t) ?? 0;
 		return e.set(t, r + 1), r === 0 && n.classList.add(t), () => {
 			let r = (e.get(t) ?? 1) - 1;
 			r <= 0 ? (e.delete(t), n.classList.remove(t)) : e.set(t, r);
@@ -167,4 +177,4 @@ function z(e = !0) {
 	}, [n, t]), n;
 }
 //#endregion
-export { D as a, k as i, I as n, j as r, z as t };
+export { k as a, j as i, R as n, N as r, V as t };

package/components/dataGrid/components/dataGridColumnsPanel.d.ts

@@ -0,0 +1,10 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The columns button and its panel: a non-modal dialog with a search field, the count and the two bulk
+ * actions, and one switch per column under its header group's name.
+ */
+export default function DataGridColumnsPanel<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/models/columnModel.d.ts

@@ -52,6 +52,8 @@ export default class ColumnModel<TRow> {
     get isLastLeaf(): boolean;
     get key(): Key;
     get header(): string | undefined;
+    /** The header group this column sits under, if any. A pinned half of a group is a copy with the same header. */
+    get group(): ColumnModel<TRow> | undefined;
     get align(): "center" | "left" | "right" | "start" | "end" | undefined;
     /** End-aligned either way it is spelled — `right` is the physical name of `end` in a left-to-right grid. */
     get isEndAligned(): boolean;

package/components/dataGrid/models/columnVisibilityModel.d.ts

@@ -3,12 +3,19 @@ import { default as GridModel } from './gridModel';
 export interface ColumnVisibilityEntry<TRow> {
     id: string;
     label: string;
+    /** The header group's text, when the column sits under one. */
+    group?: string;
     column: ColumnModel<TRow>;
     visible: boolean;
 }
+/** A run of entries under one header group, in column order. `group` is absent for ungrouped columns. */
+export interface ColumnVisibilitySection<TRow> {
+    group?: string;
+    entries: ColumnVisibilityEntry<TRow>[];
+}
 /**
- * Backs the top-bar column-visibility menu: the toggleable (user data) columns, which
- * are currently shown, and a diff-based bulk setter.
+ * Backs the top-bar columns panel: the toggleable (user data) columns, which are currently shown, the
+ * search over them, and a diff-based bulk setter.
  */
 export default class ColumnVisibilityModel<TRow> {
     readonly grid: GridModel<TRow>;
@@ -17,8 +24,15 @@ export default class ColumnVisibilityModel<TRow> {
     get entries(): ColumnVisibilityEntry<TRow>[];
     get selectedIds(): string[];
     get total(): number;
+    get visibleCount(): number;
     get hiddenCount(): number;
     get hasHidden(): boolean;
+    /** The entries whose label or group contains `query`, ignoring case and surrounding space. */
+    search(query: string): ColumnVisibilityEntry<TRow>[];
+    /** `entries` cut into consecutive runs that share a group, which is what the panel draws a heading over. */
+    sections(entries: ColumnVisibilityEntry<TRow>[]): ColumnVisibilitySection<TRow>[];
     /** Make exactly the columns in `ids` visible, toggling only those whose state must change. */
     setVisibility: (ids: string[]) => void;
+    /** Show or hide every column in `entries` (all of them by default), leaving the rest as they are. */
+    setAll: (visible: boolean, entries?: ColumnVisibilityEntry<TRow>[]) => void;
 }

package/components/dataGrid/models/gridModel.d.ts

@@ -179,6 +179,11 @@ export default class GridModel<TRow> {
     private _sizingElement;
     get sizingElement(): HTMLElement | null;
     setSizingElement: (el: HTMLElement | null) => void;
+    /**
+     * Writes the width variables straight onto the sizing element, ahead of the render that will agree with
+     * them: a resize drag repaints without re-rendering every row, and a new scroller width lands before paint.
+     */
+    paintSizes: () => void;
     /**
      * Which way the grid reads, resolved off the element the widths are written to. A model with no
      * element yet — a server render, a headless host — reads as left to right, the initial value.

package/components/dataGrid/models/groupRowModel.d.ts

@@ -31,14 +31,14 @@ export default class GroupRowModel<TRow> {
     aggregateValue(_column: ColumnModel<TRow>): AggregateValue | undefined;
     get key(): Key;
     parentRow?: GroupRowModel<TRow>;
-    private readonly _cells;
+    private _cells?;
     get cells(): GroupRowCellModel<TRow>[];
+    private cellCache;
     /**
      * The cells this row actually renders, each with the column it starts at. A `hidden` cell is a
      * data column the grouping cell has absorbed into its span: no element, and nothing to navigate
      * to — which is why a group row's cell positions and its `aria-colindex` values differ.
      */
-    private readonly _renderedCells;
     get renderedCells(): {
         cell: GroupRowCellModel<TRow>;
         columnIndex: number;

package/components/dataGrid/models/headerCellModel.d.ts

@@ -35,6 +35,11 @@ export default class HeaderCellModel<TRow> {
     get ariaSort(): 'ascending' | 'descending' | 'none' | undefined;
     /** What the resizer names itself. A separator carries no text, so it has nothing else to go on. */
     get resizerLabel(): string;
+    /**
+     * Whether this header ends where the grid does. A resizer straddling that edge overhangs the scroller,
+     * which made every grid whose columns exactly fit scroll sideways by 3px.
+     */
+    get isAtGridEnd(): boolean;
     /** `aria-valuenow`: how wide the column is right now, in px. */
     get width(): number;
     /** `aria-valuemin`: every leaf the header covers at the narrowest the grid allows. */

package/components/dataGrid/models/localeText.d.ts

@@ -6,11 +6,17 @@
 export interface DataGridLocaleText {
     /** The global search box's placeholder. */
     searchPlaceholder: string;
-    /** The column chooser's accessible name. */
+    /** The columns button's text and the panel's accessible name. */
     columnsMenu: string;
+    /** The button's accessible name while some columns are hidden — it has to start with `columnsMenu`. */
+    columnsMenuLabel: (shown: number, total: number) => string;
     columnsMenuSearchPlaceholder: string;
     columnsMenuShowAll: string;
     columnsMenuHideAll: string;
+    /** The count above the list: "6 of 8 shown". */
+    columnsMenuShown: (shown: number, total: number) => string;
+    /** What the list says when the search matches no column. */
+    columnsMenuNoMatch: (query: string) => string;
     /** The ✕ on a grouped column's chip. */
     stopGrouping: (column: string) => string;
     /** The export buttons' visible text, and their accessible names. */

package/components/dataGrid/models/rowModel.d.ts

@@ -29,7 +29,7 @@ export default class RowModel<TRow> {
     /** Whether clicking the row toggles its detail panel. */
     get expandOnRowClick(): boolean;
     toggleDetail: () => void;
-    private readonly _cells;
+    private _cells?;
     get cells(): CellModel<TRow>[];
     /** One cell per visible column — the width the grid navigation sees for this row. */
     get cellCount(): number;