@synopackageland/ui 0.25.2 → 0.25.4

package/CHANGELOG.md

@@ -1,6 +1,36 @@
 # Changelog
 
-## Unreleased
+## 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.
+
+Measured with `pnpm trace:restyle` (a 1,200-element settings page in a DSM window, Chrome at 4× CPU slowdown, median of 7; development build, so script time is high): opening a dialog restyles 36 elements instead of 816 (style 16 ms instead of 160 ms; first paint about 125 ms instead of 270 ms); a notice at the top of a settings page restyles 5 elements instead of 1,269 (style 3 ms instead of 185 ms); a row at the top of a form group restyles 19 elements instead of 80.
+
+### Theme
+
+- **Form groups and the rich text editor** space every child after the first with `:not(:first-child)` instead of `* + *` (same elements, same zero specificity). Adding a row to a `FormGroup` restyled the subtrees of all the rows after it
+- **Settings pages** space each visible block after the first visible one with `:nth-child(n + 2 of :not([hidden]))` instead of a `~` rule. Showing a notice at the top of a `SettingsPage` restyled the whole page
+- **The phone's aside button** hides under an open record sheet by asking the App root (`[data-ui-app]:has(…)`), not the document root
+- **The DSM window theme** (`themes/dsm7-embedded.css`) scopes each rule to the App as `:where([data-ui-app])X, :where([data-ui-app]) X` instead of `:where([data-ui-app], [data-ui-app] *)X` (same elements, same specificity). A full restyle of an App about 25 levels deep takes about a third less time. The file is larger (57 KB instead of 47 KB gzipped)
+
+### Dialogs and sheets (app-local modal)
+
+- **Opening a dialog no longer makes the App's background `inert`.** Chrome restyles every element under an element whose `inert` changes, which made a dialog's first frame wait for a restyle of the whole App. The background is `aria-hidden`; the mask still takes presses, wheel and touch, Tab still loops in the dialog, focus that reaches the background goes back to the dialog, and Escape closes it. Focus left on the background when a dialog skips autofocus is released, as `inert` would. A nested dialog still makes the one under it inert
+
+### Card grid
+
+- **Two cards across on a tablet.** `VirtualCardGrid` gained its second column at a 640px container, so a gallery beside a sidebar on a portrait iPad (about 470px) showed one card per row. `GALLERY_BREAKPOINTS` is now `[440, 720, 1024, 1280, 1536]`: two columns from 440px, three from 720px, the wider steps unchanged. A phone (390px) keeps one. No API change
+
+### Migration notes
+
+- A test that checked `[data-ui-background]` for `inert` while a dialog is open should check `aria-hidden="true"` instead
+- An App that rewrote these selectors in its own build can drop that rewrite
+
+## 0.25.3 (2026-11-09)
+
+### Grid
+
+- **Cell text follows a short pan.** The canvas grid (`@synopackageland/ui/grid`) redrew its cached cell text only when the visible rows or columns changed, while backgrounds, lines and column headers followed every frame. A pan that stayed within the same columns (a finger on a tablet, a short trackpad move) left the text behind its column, so headers and cells no longer lined up. Any change of the scroll offset now redraws the cell text. No API change
 
 ## 0.25.2 (2026-11-09)
 

package/dist/grid-core/renderer/layout.d.ts

@@ -118,7 +118,13 @@ export declare const drawRowDraggingRegion: (ctx: CanvasRenderingContext2D, p: I
 export declare const drawColumnFreezeHandler: (ctx: CanvasRenderingContext2D, p: IResolvedProps) => void;
 /** Line after the frozen columns; a soft shadow once the body scrolls under it. */
 export declare const drawFreezeRegionDivider: (ctx: CanvasRenderingContext2D, p: IResolvedProps) => void;
-/** Whether cached cell content must be redrawn. */
+/**
+ * Whether cached cell content must be redrawn. Any scroll offset counts, not
+ * only a change of the visible cell range: the cache holds the text at the
+ * offset it was drawn at, while backgrounds, lines and headers follow every
+ * frame, so a pan that stays within the same columns (a finger on a tablet)
+ * left the text behind its column.
+ */
 export declare const computeShouldRerender: (current: IGridRenderProps, last?: IGridRenderProps) => boolean;
 /**
  * Paints one frame. `mainCanvas` is the visible canvas; `cacheCanvas` is an

package/dist/grid.js

@@ -680,7 +680,7 @@ const ro = (e, t) => t ? Math.max(t - (e.iconSizeMD - e.iconSizeXS) / 2, 0) : 0,
     return;
   }
   e.save(), e.beginPath(), e.shadowColor = r, e.shadowBlur = 5, e.shadowOffsetX = 3, e.strokeStyle = r, e.moveTo(a + 0.5, 0), e.lineTo(a + 0.5, s), e.stroke(), e.restore();
-}, ta = (e, t) => t == null ? !0 : !(e.theme === t.theme && e.columns === t.columns && e.getLinearRow === t.getLinearRow && e.real2RowIndex === t.real2RowIndex && e.drawCell === t.drawCell && e.coordInstance === t.coordInstance && e.visibleRegion === t.visibleRegion && e.forceRenderFlag === t.forceRenderFlag), na = (e, t) => {
+}, ta = (e, t) => t == null ? !0 : !(e.scrollState.scrollLeft === t.scrollState.scrollLeft && e.scrollState.scrollTop === t.scrollState.scrollTop && e.theme === t.theme && e.columns === t.columns && e.getLinearRow === t.getLinearRow && e.real2RowIndex === t.real2RowIndex && e.drawCell === t.drawCell && e.coordInstance === t.coordInstance && e.visibleRegion === t.visibleRegion && e.forceRenderFlag === t.forceRenderFlag), na = (e, t) => {
   const { containerWidth: n, containerHeight: o, pixelRatio: i, shouldRerender: a, draw: s } = t, r = Math.ceil(n * i), c = Math.ceil(o * i);
   (e.width !== r || e.height !== c) && (e.width = r, e.height = c);
   const l = e.getContext("2d");

package/dist/index.js

@@ -3795,10 +3795,18 @@ class Lw {
       a.has(o) || (i(), this.hidden.delete(o));
     for (const o of a) {
       if (this.hidden.has(o)) continue;
-      const i = Uc(o, "inert", ""), l = Uc(o, "aria-hidden", "true");
-      this.hidden.set(o, () => {
-        i(), l();
-      });
+      const i = Uc(o, "aria-hidden", "true");
+      if (o === t)
+        this.hidden.set(o, i), Fe(() => {
+          const l = o.ownerDocument.activeElement;
+          this.hidden.has(o) && l && o.contains(l) && l.blur();
+        });
+      else {
+        const l = Uc(o, "inert", "");
+        this.hidden.set(o, () => {
+          l(), i();
+        });
+      }
     }
   }
   keydown = (n) => {
@@ -40215,7 +40223,7 @@ const bG = F3, V3 = ["aria-label", "data-ui-alignment", "data-ui-phone"], N3 = [
       _: 3
     }, 8, ["data-layout", "aria-busy"]));
   }
-}), G3 = [640, 768, 1024, 1280, 1536];
+}), G3 = [440, 720, 1024, 1280, 1536];
 function Pp(e) {
   return e > 0 ? 1 + G3.filter((n) => e >= n).length : 0;
 }