@synopackageland/ui 0.25.8 → 0.25.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # 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.

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/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/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)