@synopackageland/ui 0.25.7 → 0.25.8

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.25.8 (2026-11-11)
+
+On a phone (640px or narrower) a list is no longer a short inner scroller under the page's other content. Found in an App whose Explore page put a map above a DataGrid in a vertical SplitPane: at 360px the grid scrolled in a 385px box with a drag handle, and a pager count was cut to "38 ite…". The fix is in the SDK; Apps need no change and there is no new prop.
+
+### Phone layout
+
+- **Lists take their rows' height and the page scrolls as one.** `DataGrid`, `DataTable`, `SplitPane`, `VirtualList`, `VirtualCardGrid`, `DataView` and `Panel` mark themselves `data-ui-natural-height` in the phone presentation. The content area becomes the page's one scroller, and every element between it and the list takes its content's height, also an App's own `min-h-0 flex-1 overflow-hidden` and `h-full` wrappers. `fill` does nothing on a phone: the list bar sticks under the bar (`--ui-sticky-top-offset`), the selection bar sticks to the bottom above the phone bars, and the footer (count, pager) follows the last row instead of being pinned. A long list keeps its pages, and clips sideways only, so a row action's tap area never widens the page
+- **An App's `maxHeight` keeps at least 60% of the screen.** A DataGrid's `maxHeight` stays on a phone as `max(<maxHeight>, 60dvh)` (`PHONE_MIN_CAP`)
+- **SplitPane stacks.** On a phone both orientations stack start above end with no separator (`data-stacked`). A start pane with no height of its own keeps `min(size, 45%)` of the screen, at least `minStart`
+- **Virtual lists virtualize against the page's scroll.** VirtualList and VirtualCardGrid read their visible range from the content area's scroll position (`usePageWindow`, TanStack `scrollMargin`), so they still render only a window of rows (19 of 2,000 at 390px)
+- **A pushed page opens at its top, and Back returns to the scroll position.** ListDetail's pushed detail and a SectionTabs push pane take their content's height instead of clipping
+- **A flush Dialog (a bottom sheet) scrolls a list in its body.** The sheet's body is its one scroller instead of clipping the list at 92% of the screen
+- **A phone pager never cuts the count.** In a narrow card `‹ Page 1 of N ›` moves to its own line under "38 items" instead of cutting it
+- **KeyValueRow caps an App's `labelWidth` at 40% of the row on a phone**, as the theme's default label column does
+- **AdvancePanelGrid shows its row action on touch.** Under a coarse pointer the `row-hover-action` slot shows at the end of the last cell, beside the text. Before, it was invisible but still took taps, over the text
+
+### Development
+
+- `node scripts/check-phone-fill.mjs` (`tests/dsm-host/phone-fill.html`) checks ten fill layouts at 360, 390 and 1280 px: one scroller, the first row not cut, the list bar sticking, no splitter handle, the footer and pager whole, virtual windows, a flush sheet, labels and row actions. Before this change it had 49 failures
+
+### Migration notes
+
+- A test or an App style that relied on a phone DataGrid with `fill` scrolling inside its own box should scroll the content area instead (`[data-ui-layout-scroll='page'] > [data-ui-layout-main] > main`)
+
 ## 0.25.7 (2026-11-11)
 
 ### Grid

package/dist/components/advanced-panel/AdvancePanelGrid.vue.d.ts

@@ -9,12 +9,18 @@ type __VLS_Props = {
 declare function deactivateRow(): void;
 declare var __VLS_2: `header-${string}`, __VLS_3: {
     column: AdvancePanelGridColumn;
-}, __VLS_36: {}, __VLS_39: string, __VLS_40: {
+}, __VLS_36: {}, __VLS_38: {
+    item: AdvancePanelGridRow;
+    column: AdvancePanelGridColumn;
+    index: number;
+    activate: () => void;
+    deactivate: typeof deactivateRow;
+}, __VLS_41: string, __VLS_42: {
     cell: AdvancePanelGridCell;
     item: AdvancePanelGridRow;
     column: AdvancePanelGridColumn;
     index: number;
-}, __VLS_42: {
+}, __VLS_44: {
     item: AdvancePanelGridRow;
     column: AdvancePanelGridColumn;
     index: number;
@@ -24,11 +30,13 @@ declare var __VLS_2: `header-${string}`, __VLS_3: {
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
 } & {
-    [K in NonNullable<typeof __VLS_39>]?: (props: typeof __VLS_40) => any;
+    [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
 } & {
     'empty-body'?: (props: typeof __VLS_36) => any;
 } & {
-    'row-hover-action'?: (props: typeof __VLS_42) => any;
+    'row-hover-action'?: (props: typeof __VLS_38) => any;
+} & {
+    'row-hover-action'?: (props: typeof __VLS_44) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:sort": (sort: AdvancePanelGridSort) => any;

package/dist/components/containers/split-pane/SplitPane.vue.d.ts

@@ -17,11 +17,15 @@ type __VLS_Props = {
     label?: string;
 };
 declare function reset(): void;
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     start?: (props: typeof __VLS_1) => any;
 } & {
     end?: (props: typeof __VLS_3) => any;
+} & {
+    start?: (props: typeof __VLS_5) => any;
+} & {
+    end?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     reset: typeof reset;

package/dist/components/primitives/sheet/phone.d.ts

@@ -5,3 +5,8 @@ import { ComputedRef } from 'vue';
  * viewport width decides instead. Call it in a component's setup.
  */
 export declare function usePhonePresentation(): ComputedRef<boolean>;
+/**
+ * The least an App's own height cap leaves a list or a pane on a phone, where
+ * the page scrolls as one: a cap lower than this made a short inner scroller.
+ */
+export declare const PHONE_MIN_CAP = "60dvh";

package/dist/composables/pageWindow.d.ts

@@ -0,0 +1,24 @@
+import { Ref } from 'vue';
+/** The content area of an AppLayout whose page scrolls as one (a phone). */
+export declare const PAGE_SCROLL_MAIN = "[data-ui-layout-scroll='page'] > [data-ui-layout-main] > main";
+/**
+ * A virtual list on a phone page that scrolls as one. On a desktop a virtual
+ * list is its own fixed-height scroller; on a phone that is a short inner
+ * scroller under the page's other content. There the list takes its full
+ * height (it marks itself `data-ui-natural-height`, see adaptive.css), the
+ * page's scroller moves it, and the visible range is read from that scroller:
+ * `top` is how far the list's top has scrolled above the scroller's top edge
+ * (0 while the list starts below it) and `height` the scroller's visible
+ * height. Outside such a page `active` stays false and the list scrolls
+ * itself as before.
+ */
+export declare function usePageWindow(target: Ref<HTMLElement | null | undefined>): {
+    natural: import('vue').ComputedRef<boolean>;
+    active: import('vue').ComputedRef<boolean>;
+    scroller: import('vue').ShallowRef<HTMLElement | null, HTMLElement | null>;
+    top: Ref<number, number>;
+    height: Ref<number, number>;
+    read: () => void;
+    scrollTo: (offset: number, behavior?: ScrollBehavior) => void;
+    margin: () => number;
+};