@synopackageland/ui 0.23.5 → 0.23.7

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ## Unreleased
 
+## 0.23.7 (2026-11-08)
+
+Phone fixes: the bars stay shown while the page is near its top, so the room above the content is never given up before content lies under it, and a settings commit footer stays put while the page scrolls and is smaller. No App change is required; a DSM window and desktop are unchanged.
+
+- **The bars no longer hide while the page is within the room above its content.** Hide on scroll could hide the bars after a flick or a 48px scroll that ended inside the top zone (scrollTop 10, 44 or 84 at 390x844 under a DSM portal header): the bar's row and a host header's room were given up while no content lay under them yet. (The empty band seen under a DSM portal header at the top of an SDK AppShell page is a different issue, the header's stacking in the SDK's portal chrome, and is fixed in the SDK.) The decision now reads the room above the content area (`main`'s top in the layout's column: the bar's row, a toolbar row, a portal header's room) and keeps the bars shown while `scrollTop` is less than it, whatever the direction or speed, a bounce past the top included; a scroll back into the zone shows them before the room can show empty. Past the room, the 0.23.5 rules are unchanged: transform only, the same velocity thresholds and distances, reduced motion at once
+- **A settings commit footer never hides on scroll.** On a phone a `SettingsPage` footer is out of sight while the form is clean, slides in when it is dirty, invalid or saving, and stays in one place through every scroll and fling (it moved with the bars before: 77 positions over a scroll in an App); Apply, Reset or the form becoming clean slides it out. While it shows, the tab bar stays directly under it (one bottom edge), and the page's end space includes it, so the last field scrolls fully above it. It moves by `transform` only; the scroller is never resized
+- **A compact commit footer on a phone.** 8px above and below 32px buttons with 14px text and 12px side padding, plus only the real safe-area inset: 48px and its 1px divider at 390x844 (was 56px: 36px buttons, 9px/10px padding, 13px side padding). Each button keeps a 44px hit area inside the footer, 6px over the button's top and bottom. A DSM window and desktop keep their footer
+- docs/mobile-native.md: the phone behaviour contract adds the top-zone rule to "Hide on scroll" and a "Commit footers never hide on scroll" row; the Hide on scroll and Settings footer sections describe both
+- New `check:phone-bars` (in the full gate): Playwright Chromium and WebKit, `isMobile` + `hasTouch`, at 320x568, 390x844 and 430x932, on a short page, a Home-like page (cards, a FAB, the tab bar), a long list and a fill page whose scroller is the App's own element, each also under an emulated DSM portal header; it samples every animation frame of flicks that end at 0, 10 and room - 1, a bounce past the top, slow and flung scrolls back up and a jump to the start, and asserts the first content stays within 1px of the visible bar's bottom, the bars show while `scrollTop` is less than the room, and the scroller's `clientHeight` never changes. A settings scene checks the commit footer: out of sight while clean, on screen in one place in every frame of slow scrolls and flings both ways while dirty, the last field above it, gone after Apply. `check:browser-install` installs WebKit too. `check:phone-layout`'s footer scenes follow the new footer rules
+
+## 0.23.6 (2026-11-07)
+
+Phone fixes for a fill page whose scroller is an App's own element: it is no longer cut off above the tab bar in portrait (a 0.23.5 regression), its header's "…" no longer pans it sideways in landscape, and a sticky row in it sticks below its PageHeader. No App change is required; a DSM window and desktop are unchanged.
+
+- **Fixed (regression in 0.23.5): a fill page's nested scroller stopped about 110px above the tab bar in portrait.** PageContent read `--ui-page-end-space` with `parseFloat` when it looked for a fill page's scroller. Under docked bars (0.23.5's `data-ui-bars-overlay`) the property's text is a `calc()` expression (`calc(24px + calc(45px + max(49px, 0px) + 0px))`), which parsed as 0, so an App scroller nested in the page with the end space on a wrapper around it was not found as the page's scroller: the end space (118px at 390x844) stayed under it and the FAB's room (88px) and the bars' room went under the page instead of at the end of its content. PageContent now reads the resolved length from a hidden probe (`display: none`, `margin-top: var(--ui-page-end-space)`). Landscape was not affected (a plain `24px`). The other `parseFloat`/`parseInt` calls in the package read computed lengths or the UI's own pixel tokens; none parses a `calc()` custom property
+- **A PageHeader's last action no longer pans an App's nested scroller sideways.** In a fill page whose scroller is the App's own element holding the PageHeader, the 44px tap box of a trailing "…" IconButton reached 13px past the scroller's edge (590/578 at 825x360, 518/506 at 753x279); 0.23.5's clip covered only a PageContent that is itself the scroller. The last action in a PageHeader's actions now sets `--ui-hit-end-room` to the header's end padding: its box stops at the header's edge and grows towards its start side, still 44px. The scroller is not clipped, so an App scroller that also scrolls a table sideways is unchanged
+- **An Accordion no longer pans an App's own scroller sideways.** Its trigger was 8px wider than the accordion (`-mx-1`, `width: calc(100% + 0.5rem)`) so its pressed wash reached past the text; flush with the edge of a scroller without a PageContent clip (an App's record pane) that scroller scrolled 4px sideways at every width. The trigger is now exactly as wide as the accordion, its text where it was, and the pressed wash reaches 4px past each side by `box-shadow`, which no scroller counts
+- **A sticky row in a nested scroller sticks below a sticky PageHeader in that scroller.** A `data-ui-sticky` row (an audio player) in an App's own scroller stacked from that scroller's top and covered a sticky PageHeader in the same scroller (title, Share, "…") once the page scrolled. A PageHeader now reports its element with its height, and PageContent places each sticky header and tabs strip in the scroller it sticks in: in a nested scroller its height is where the scroller's rows start, it counts in that scroller's `--ui-sticky-top-offset` and sets that scroller's `--ui-page-sticky-top`, and it is left out of the page's offset
+- docs/mobile-native.md: the phone behaviour contract, the hit-area, sticky-row and end-space sections describe the nested scroller cases
+- `check:phone-layout`: `search-nested` and `search-nested-end` (a fill page whose scroller is the App's own pane holding the PageHeader with a trailing "…", the App's end space on a wrapper around it) check that the pane is the page's scroller, reaches the screen's bottom with no end space under it, holds the FAB's and the bars' room, and with the bars kept ends its last row above the FAB (a speed dial's + when the page has two actions); `record-player-nested` checks the player sticks right below the PageHeader in the App's pane, counts in its offset and `scrollToStart` lands below it. The side-pan check runs both at portrait and the two landscape sizes
+
 ## 0.23.5 (2026-11-07)
 
 Phone fixes: a fling keeps its momentum while the bars hide, the page never pans sideways (also from a tap box at its edge), and the FAB is a circle. Gesture decisions share one velocity estimator, and a sticky row in an App's own side pane sticks in that pane. No App change is required; a DSM window and desktop are unchanged.

package/dist/components/app/app-layout/hideOnScroll.d.ts

@@ -20,6 +20,12 @@ export interface HideOnScrollOptions {
     blocked: () => boolean;
     /** The room the bars take: a page that scrolls less than this keeps them, or hiding them would end its scroll. */
     room: () => number;
+    /**
+     * The room above the page's content that hiding gives up (the phone bar's
+     * row, a toolbar row, a host header's room): while the page has scrolled
+     * less than this, the bars show, so the space they leave is never empty.
+     */
+    topRoom?: () => number;
     /** Each change shows the bars again (a new page). */
     reset: WatchSource[];
 }
@@ -38,7 +44,12 @@ export interface HideOnScrollState {
  *   once, a flick up that fast shows them at once;
  * - a slower scroll hides them after `hideDistance` down and shows them after
  *   `showDistance` up, so a slow or wobbly drag does not flicker them;
- * - the top of the page and a scroll that ends at its bottom show them.
+ * - while the page has scrolled less than the room above its content
+ *   (`topRoom`: the bars' own rows and a host header's room), the bars show,
+ *   whatever the direction or speed (a bounce past the top included); they
+ *   hide only once content has scrolled under them, and a scroll back into
+ *   that zone shows them before the room above the content can show empty;
+ * - a scroll that ends at the page's bottom shows them.
  * The bars move by transform only (adaptive.css), so a decision never
  * changes the scroller's size or position and the scroll keeps its momentum.
  * It never hides while a sheet, dialog, the speed dial or the drawer is

package/dist/components/app/page-content/pageSticky.d.ts

@@ -1,5 +1,17 @@
 import { Ref } from 'vue';
-/** For PageContent: the tallest height its sticky headers report, in px. */
-export declare function providePageSticky(): Readonly<Ref<number>>;
+/**
+ * The sticky PageHeaders of a PageContent and the height each takes while it
+ * sticks, so what else sticks in the page (a SectionTabs strip, an App's
+ * `data-ui-sticky` row) sticks below it instead of under it. PageContent
+ * places each header in the scroller it sticks in: one in the page's own
+ * scroller sets `--ui-page-sticky-top`, one inside a scroll container of the
+ * App's own (a fill page's record pane) counts only in that container.
+ */
+export type PageStickyHeader = {
+    element: HTMLElement;
+    height: number;
+};
+/** For PageContent: its sticky headers, in the order they reported. */
+export declare function providePageSticky(): Readonly<Ref<readonly PageStickyHeader[]>>;
 /** For PageHeader: reports its height while it sticks, and nothing once it scrolls with the page. */
 export declare function useStickyHeight(element: Readonly<Ref<HTMLElement | null>>, sticks: () => boolean): void;

package/dist/components/app/settings-page/SettingsPage.vue.d.ts

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     /**
-     * The form has changes not yet applied. With `false` the footer may slide
-     * away with the phone's bars on a scroll down; with `true` it stays. Left
+     * The form has changes not yet applied. On a phone, with `false` the footer
+     * is out of sight below the screen; with `true` it slides in and stays. Left
      * out, the footer reads it: the form is clean while the footer's primary
      * button (every button, when none is primary) is disabled.
      */