@synopackageland/ui 0.25.7 → 0.25.9

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## Unreleased
+
+## 0.25.9 (2026-11-12)
+
+### Dialog
+
+- **A dialog opened from a floating dialog masks only the app window.** With `<AppRoot dialog-bounds="viewport">` (an app in a DSM window), a Dialog opened from a floating panel, such as WizardDialog's "Discard changes?" confirm, put its mask in the viewport-wide floating host, so it tinted the whole DSM desktop: icons, taskbar, widgets and notifications. The mask now goes in the app root's own portal host, inside the window, as the outer dialog's does. The floating parent sits above the window, so it draws the same mask over itself (`data-ui-dialog-cover`) while the child is open, as DSM masks a modal window under the message box it opens. Apps need no change. On a phone, where panels are not floating, and without `dialog-bounds="viewport"`, nothing changes. A Sheet opened from a floating Dialog still masks the viewport (docs/app-local-modal.md)
+
+### Grid
+
+- **An empty GridHost only header-tall no longer draws "No data" over its header.** The empty layer under the header is clipped (`overflow: hidden`), so with no room it shows nothing. Found in Studio Office, whose empty tables are header-tall with their own empty state under the grid
+
+### Development
+
+- `node scripts/check-wizard-confirm.mjs` (`tests/dsm-host/wizard-desktop.html`) opens a WizardDialog's confirm in an app window on a DSM-like desktop at 1280x800 and on a 390x844 touch phone: the desktop stays unmasked, the mask stays in the window, the wizard is masked and takes no presses, and Keep editing and Discard work. Before this change it had 4 failures
+
+## 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/dialog/dialogCover.d.ts

@@ -0,0 +1,10 @@
+export type DialogScrim = 'dim' | 'light' | 'none';
+/**
+ * A dialog floating over the DSM desktop sits above its app window, so a
+ * dialog it opens masks the app window but not it. As DSM masks the window
+ * that owns a modal, the parent panel then draws the child's mask over
+ * itself: this returns the scrim to draw, or null.
+ */
+export declare function provideDialogCover(): import('vue').ComputedRef<DialogScrim | null>;
+/** Asks the enclosing dialog for a mask while `active` holds. */
+export declare function useParentDialogCover(active: () => boolean, scrim: () => DialogScrim): void;

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/floatingHost.d.ts

@@ -1,4 +1,4 @@
-import { Ref, ShallowRef } from 'vue';
+import { InjectionKey, Ref, ShallowRef } from 'vue';
 import { Box } from '../lib/floatingDialog';
 export declare const FLOATING_HOST_KEY = "@synopkgland/floating-host";
 export declare const FLOATING_HOST_ATTRIBUTE = "data-ui-floating";
@@ -13,6 +13,13 @@ export type FloatingHost = {
     /** False on a narrow viewport or with a coarse pointer: panels become viewport sheets. */
     draggable: Ref<boolean>;
 };
+/**
+ * The app root's own portal host (inside the app window). A Dialog opened from
+ * a floating panel puts its mask there, so the mask covers the app window and
+ * not the viewport-wide floating host.
+ */
+export declare const APP_PORTAL_KEY: InjectionKey<Readonly<Ref<HTMLElement | null>>>;
+export declare function injectAppPortal(): Readonly<Ref<HTMLElement | null, HTMLElement | null>> | null;
 export declare function injectFloatingHost(): FloatingHost | null;
 /**
  * A viewport-sized layer for dialogs that may leave the app window, as DSM's

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;
+};

package/dist/grid.js

@@ -3407,7 +3407,7 @@ const Ps = () => {
       N.value ? (pe(), Ce("div", {
         key: 0,
         "data-ui-grid-empty": "",
-        style: Be([{ top: `${P.value}px` }, { position: "absolute", left: "0", right: "0", bottom: "0", display: "flex", "align-items": "center", "justify-content": "center", color: "var(--ui-text-muted)", "font-size": "var(--ui-font-size)", "pointer-events": "none", "z-index": "1" }])
+        style: Be([{ top: `${P.value}px` }, { position: "absolute", left: "0", right: "0", bottom: "0", display: "flex", "align-items": "center", "justify-content": "center", overflow: "hidden", color: "var(--ui-text-muted)", "font-size": "var(--ui-font-size)", "pointer-events": "none", "z-index": "1" }])
       }, [
         hn(d.$slots, "empty", {}, () => [
           ti(we(J(a)("No data")), 1)