@synopackageland/ui 0.25.4 → 0.25.6

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.25.6 (2026-11-10)
+
+### Grid
+
+- **A scrolling grid ends with room for its scrollbar.** Scrolled to the end, the last row and the last column lay under an overlay scrollbar (macOS): the scroller's content was exactly the rows' and columns' size. An axis that scrolls now ends `SCROLL_END_GAP` (20 px) past its last row or column, and rows that end under the horizontal bar get it too. Columns that fit get none, so a grid sized to its width never scrolls sideways for it. No API change
+
+## 0.25.5 (2026-11-10)
+
+Opening or closing the phone's navigation drawer, the aside sheet or the FAB speed dial no longer restyles the whole page. AppLayout made the page column `inert` while one was open, and Chrome restyles every element under an element whose `inert` changes. Pages look the same: a computed-style comparison of every element and property in each state, and the screenshots, differ only in Chrome's `interactivity` (the `inert` itself). No API change.
+
+Measured with `pnpm trace:restyle --phone` (a 1,173-element settings page on a 390px touch phone, Chrome at 4× CPU slowdown, median of 7; development build): opening the drawer restyles 68 elements instead of 860 (style 28 ms instead of 206 ms; next paint 90 ms instead of 298 ms), the aside sheet 88 instead of 879, the FAB speed dial 43 instead of 834. Closing each restyles 32–43 elements instead of 822–834. The DSM window theme (`--phone --window`) gives about the same: 29–86 elements instead of 819–877.
+
+### Phone layout
+
+- **The page behind an overlay is `aria-hidden`, not `inert`.** The drawer and the aside sheet keep it out of reach as an app-local dialog does: the mask takes presses, wheel and touch, Tab loops in the overlay, focus that reaches the page goes back, and Escape closes. An expanded aside, which leaves the page no width, still makes the page `inert`
+- **The FAB speed dial traps focus in an app-local AppRoot.** In `modal-scope="app"` its trap came only from the page's `inert`. Tab and Shift+Tab now loop in the dial, and focus that reaches the page goes back to it, as in document mode
+
+### Development
+
+- **Every dev server runs the patched Reka.** Vite's dependency optimizer pre-bundled reka-ui without `build/rekaPatch.ts`, so in Histoire, the gallery and the `tests/dsm-host` pages a Dialog locked the document body (`pointer-events: none`, `overflow: hidden`). The Reka patch plugin now keeps reka-ui out of `optimizeDeps` in any config that uses it, and the browser-check scripts serve through `vitest.config.ts`. `tests/dev-server-reka.test.ts` fails when a dev config or a script's dev server goes without it. The published package was not affected: its build already applied the patch
+- `pnpm trace:restyle --phone [--window]` measures the drawer, the aside sheet and the FAB speed dial (`tests/dsm-host/restyle-phone.html`)
+
+### Migration notes
+
+- A test that checked `[data-ui-layout-main]` for `inert` while the phone drawer, the aside sheet or the FAB speed dial is open should check `aria-hidden="true"` instead. With an expanded aside the page is still `inert`
+
 ## 0.25.4 (2026-11-10)
 
 A local change no longer restyles the whole App. Adding a row, showing a notice or opening a dialog used to make Chrome restyle every element of the App (100–500 ms per click on a busy machine); now only what the change reaches is restyled. Pages look the same: a computed-style comparison of every element and property over the component gallery and the visual pages found no difference. No API change.

package/dist/grid/host/controller.d.ts

@@ -8,6 +8,11 @@ import { IGridTheme } from '../../grid-core/theme';
 import { IColumnResizeState, IDragState, IGridColumn, IMouseState, IPosition, IRowControlItem, IScrollState } from '../../grid-core/types';
 import { GridCell, GridColumn, GridDraggable, GridEditTrigger, GridRange, GridRect, GridRowControl, GridSelectable, GridSelectionState, GridVisibleRange } from '../contracts';
 import { GridFillRequest } from '../range/fill';
+/**
+ * Blank space after the last row and column of a scrolling grid: wider than an
+ * overlay scrollbar at its widest (about 15 px when hovered) plus a little air.
+ */
+export declare const SCROLL_END_GAP = 20;
 export interface GridHostConfig {
     columns: readonly GridColumn[];
     /** Data rows to lay out (skeleton rows while the first page loads). */
@@ -122,7 +127,14 @@ export declare class GridHostController {
         width: number;
         height: number;
     };
-    /** Scrollable content size for the scroller's spacer. */
+    /**
+     * Scrollable content size for the scroller's spacer. An axis that scrolls ends
+     * `SCROLL_END_GAP` past its last row or column, so an overlay scrollbar (macOS)
+     * lies over blank space at the end instead of over the last row or column.
+     * Rows that end under the horizontal bar get the gap too. Columns that fit get
+     * none, so a grid sized to its width never scrolls sideways for it; its host
+     * keeps room for a vertical overlay bar beside them.
+     */
     get contentSize(): {
         width: number;
         height: number;