@synopackageland/ui 0.20.0 → 0.20.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.20.2 (2026-11-04)
+
+- List pages stay white when a detail pane opens, even while another App built with an older release is open in the same DSM session
+- Add `ListDetail`: the list with the selected item's detail beside it in a bordered white pane. Drag the separator or use the arrow, Home and End keys to resize it; double click resets the width. The width is remembered per App and `storageKey`, and the pane moves above the list in narrow windows
+
+## 0.20.1 (2026-11-04)
+
+- List pages stay white when a detail pane opens beside a `DataGrid`: the pane keeps its 1px border with no card shadow, and the selected row shows DSM's light blue.
+- `Callout` spans its container, is one form row high with the icon, text, action button and close button centred, and drops the top gradient band.
+- A closed `Callout` is remembered in browser storage (keyed by App and `dismissKey`, or by page, tone and text) and leaves no empty row; it shows again when its text or state changes. A `danger` callout is hidden for the page load only.
+- Closed callouts are listed under the page's single info button, each with a button to show it again.
+
 ## 0.20.0 (2026-11-04)
 
 - `PageContent height="fill"` gives its height to a `SectionTabs fill` or a `SettingsPage` however deeply the App wraps it: every element between the page body and that component becomes a flex column that takes the room its siblings leave, so an App needs no CSS of its own to pass the height through its page wrappers. A hidden wrapper (`v-show`, `hidden`) stays hidden.

package/README.md

@@ -167,7 +167,7 @@ portal (Dialog, Sheet, Toast, Popover, Select, DropdownMenu, ContextMenu,
 Tooltip) into itself, not `document.body`, where the scoped tokens
 and reset would not reach them. Each `AppRoot` teleports into its own element;
 theme and density tokens on sibling roots reach their own portals. By default
-(`modal-scope="app"`, since 0.6.0) each root owns its Dialog/Sheet and popup
+(`modal-scope="app"`) each root owns its Dialog/Sheet and popup
 layers and never mutates `document.body`, so give it a bounded size such as
 `style="height: 100%"`. A full-page web or Portal app that wants document-wide
 modality passes `modal-scope="document"` (see below).
@@ -388,7 +388,7 @@ Without a listener the existing logo/name markup stays unchanged. The `brand`
 slot replaces the default brand and owns its own interaction; it is never
 wrapped in a button. A DSM window's title bar remains managed by DSM.
 
-`navigation="top"` (0.13.1+) lays the `sidebar` slot out as one bar above the
+`navigation="top"` lays the `sidebar` slot out as one bar above the
 page instead of a left column: the brand, then the `AppSidebar` items in a row
 (a row with children opens them in a menu; the bar scrolls sideways when the
 items run out of room), then `sidebar-footer`. It applies in the DSM-window
@@ -407,7 +407,7 @@ forward it before an app can choose it through that shell.
 For standalone content that owns its layout, use `<PageContent surface="none" height="fill">`.
 It removes the page's horizontal gutters and adds no surface in web, DSM-window
 or phone layouts. The default `surface="auto"` remains unchanged; `flat` keeps
-the dashboard canvas. In 0.12.4+, `auto` already has no outer page card in web
+the dashboard canvas. `auto` has no outer page card in web
 mode. Child components keep their own styling and spacing. The JSON `Page`
 component accepts the same `surface="none"` option. SDK `AppShell` is a separate
 package: if it creates `PageContent` internally, it must expose/forward this
@@ -498,7 +498,7 @@ tones (`--ui-success`, …).
 
 **Theme hooks.** The `data-ui-*` and `data-*` attributes and the layout tokens
 listed in [docs/theme-hooks.md](docs/theme-hooks.md) are public API with
-stability rules (0.13.1+): `--ui-icon-size`, `--ui-heading-weight`,
+stability rules: `--ui-icon-size`, `--ui-heading-weight`,
 `--ui-card-padding`, the top bar's `--ui-top-nav-*` and the phone bar's
 `--ui-mobile-bar-*`, `Button`'s `data-variant`, the layout regions
 (`data-ui-layout-sidebar`, `data-ui-layout-main`, `data-ui-mobile-navigation`,
@@ -546,6 +546,7 @@ DSM-style application building blocks:
 - TimelineRow (one event in a list) / NewItemsPill (a floating "N new" pill) / SectionSkeleton `variant="lines" | "figures" | "rows"`
 - FacetPanel (filter groups with counts; a bottom sheet on a phone) / TagEditor (tags edited in place, saved optimistically)
 - SplitPane / StorageMeter / StackedBar (see [docs/size-and-split.md](docs/size-and-split.md))
+- ListDetail (a list with the selected item's detail beside it, the pane's width set by dragging and remembered; see [docs/list-detail.md](docs/list-detail.md))
 
 `Tabs` and `SectionTabs` move a raised selection notch in 120ms. Selected labels
 are blue; main labels are bold 14px and section labels bold 13px. `Tabs` fades its
@@ -1127,7 +1128,7 @@ Linux motion 使用 `MOTION_BROWSER=playwright`，本機預設 ego-browser 保
 本機只送工作樹並等待；未設時照舊在本機跑。`check:local-browser` 仍在本機用 ego-browser。
 
 
-## Form controls and compact settings (0.5.7)
+## Form controls and compact settings
 
 `Form` and standalone `FormItem` default to `direction="auto"`. They use the
 container's width, including a DSM package window, and stack labels below 520px.
@@ -1210,7 +1211,7 @@ DatePicker's calendar inherits Provider locale unless its own Intl `locale` is
 supplied. Caller-owned option labels, content, URLs, rules' custom messages and
 business terminology stay caller-owned. Validation fallbacks use the locale at
 validation time; imperative message-box default titles use the locale at opening.
-See [the complete default-text and container audit](docs/component-defaults-0.5.7.md).
+See [the complete default-text and container audit](docs/component-defaults.md).
 
 `KeyValueRow` renders a `dl` with `dt`/`dd`; its default slot accepts rich values,
 including Link. The `Wizard` step list shows the registered steps and does not

package/dist/components/app/app-toolbar/AppToolbar.vue.d.ts

@@ -1,13 +1,13 @@
 type __VLS_Props = {
     height?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_8) => any;
 } & {
-    actions?: (props: typeof __VLS_5) => any;
+    actions?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     height: string;

package/dist/components/app/page-content/PageContent.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
      * `--ui-page-readable-width`; any other value is a CSS maximum width.
      */
     width?: 'fill' | 'readable' | (string & {});
-    /** card uses the white content area; flat uses the page grey; auto is white unless the page holds a card, then grey like flat. none adds no surface or horizontal gutters, for content that owns its layout at every width. */
+    /** card uses the white content area; flat uses the page grey; auto is white unless the page holds a card, then grey like flat; a list page (a DataGrid on the page, outside any card) stays white when a pane opens beside it. none adds no surface or horizontal gutters, for content that owns its layout at every width. */
     surface?: 'auto' | 'flat' | 'card' | 'none';
     /**
      * `'fill'` takes the container's height and does not scroll: the header,

package/dist/components/app/page-header/PageHeader.vue.d.ts

@@ -3,11 +3,11 @@ type __VLS_Props = {
     description?: string;
     sticky?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    meta?: (props: typeof __VLS_1) => any;
+    meta?: (props: typeof __VLS_6) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     sticky: boolean;

package/dist/components/composite/callout/Callout.vue.d.ts

@@ -8,17 +8,22 @@ type __VLS_Props = {
     variant?: 'soft' | 'inline' | 'hint';
     title?: string;
     /**
-     * Shows a close button (default). Closing hides the callout until its
-     * tone, title or text (or `dismissKey`) changes. Turn it off only for a
-     * state that must stay in view, such as a blocking setup requirement.
+     * Shows a close button (default). Closing hides the callout, also after a
+     * reload, until its tone, title or text changes; a `danger` callout is
+     * hidden for this page load only. The page's info button lists it to show
+     * again. Turn it off only for a state that must stay in view, such as a
+     * blocking setup requirement.
      */
     dismissible?: boolean;
-    /** What a dismissal is remembered by, instead of the tone and the rendered text. */
+    /**
+     * A stable id for the callout within the App (e.g. `'recycle-bin-dsm-hint'`), under which
+     * its dismissal is stored. Without it the id is drawn from the page path, the tone and the text.
+     */
     dismissKey?: string;
     closeLabel?: string;
     /** A machine code (e.g. `login_wait_timeout`), shown after the message in a quieter style. */
     code?: string;
-    /** Span the container instead of stopping at `--ui-callout-max-width` (720px). */
+    /** @deprecated A Callout spans its container by default; `--ui-callout-max-width` caps it. */
     fill?: boolean;
     /** The toggle for the `details` slot. */
     moreLabel?: string;

package/dist/components/composite/callout/CalloutRecall.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/callout/CalloutRecallList.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/callout/calloutDismissal.d.ts

@@ -0,0 +1,37 @@
+import { Component } from 'vue';
+/** FNV-1a, 32 bits, as 8 hex digits: a short, stable name for a text. */
+export declare function hashText(text: string): string;
+/** The App a dismissal belongs to: the DSM package, else the page's host and directory. */
+export declare function appScope(): string;
+/** The storage key of a callout: the App's id for it, or one drawn from the page, the tone and the text. */
+export declare function dismissalKey(dismissKey: string | undefined, tone: string, text: string): string;
+export declare function isDismissed(key: string, signature: string): boolean;
+export declare function rememberDismissal(key: string, signature: string, persist: boolean): void;
+export declare function forgetDismissal(key: string): void;
+/** A closed callout that is still on the page, as the info button lists it. */
+export interface HiddenCallout {
+    tone: 'info' | 'success' | 'warning' | 'danger';
+    icon: Component;
+    label: string;
+    restore: () => void;
+}
+export declare const hiddenCallouts: import('vue').ShallowReactive<Map<number, HiddenCallout>>;
+export declare function registerHiddenCallout(entry: HiddenCallout): () => void;
+type Host = {
+    kind: 'info' | 'chrome';
+    id: symbol;
+};
+export declare function registerRecallHost(kind: Host['kind']): {
+    id: symbol;
+    unregister: () => void;
+};
+export declare const activeRecallHost: import('vue').ComputedRef<symbol | null>;
+/**
+ * For a toolbar or a page header: whether it shows its own info button for the
+ * closed callouts (CalloutRecall). Only the first one mounted does, and only
+ * while no info button already there (a page's notes) lists them.
+ */
+export declare function useCalloutRecallHost(): import('vue').ComputedRef<boolean>;
+/** Tests only: forget this page load's dismissals, as a reload does. */
+export declare function resetSessionDismissals(): void;
+export {};

package/dist/components/containers/list-detail/ListDetail.vue.d.ts

@@ -0,0 +1,52 @@
+type __VLS_Props = {
+    /** Shows the pane; by default it shows while the `detail` slot is given. */
+    open?: boolean;
+    /** The pane's heading; with it the pane has a header with a Close button. */
+    title?: string;
+    /** Shows the Close button in the header. */
+    closable?: boolean;
+    /** The pane's width before the user sets one: a share of the room (0–1) or px. A share is kept between 400px and 640px. */
+    defaultWidth?: number;
+    /** The pane's minimum width in px. */
+    minWidth?: number;
+    /** The list's minimum width in px; the pane never grows into it. */
+    listMinWidth?: number;
+    /** Names this pane among the App's panes for the remembered width (with the App it runs in). */
+    storageKey?: string;
+    /** The separator's accessible name. */
+    label?: string;
+};
+/** Goes back to the default width and forgets the remembered one. */
+declare function reset(): void;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    header?: (props: typeof __VLS_3) => any;
+} & {
+    detail?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    reset: typeof reset;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    label: string;
+    title: string;
+    open: boolean;
+    minWidth: number;
+    closable: boolean;
+    storageKey: string;
+    defaultWidth: number;
+    listMinWidth: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/i18n/text.d.ts

@@ -52,6 +52,8 @@ export declare const englishUiText: {
     readonly "Opens in a new tab": "Opens in a new tab";
     readonly Download: "Download";
     readonly Close: "Close";
+    readonly "Hidden notices": "Hidden notices";
+    readonly "Show again": "Show again";
     readonly Cancel: "Cancel";
     readonly Confirm: "Confirm";
     readonly OK: "OK";

package/dist/index.d.ts

@@ -231,6 +231,7 @@ export { default as AppActionBar } from './components/app/app-action-bar/AppActi
 export { default as PageHeader } from './components/app/page-header/PageHeader.vue';
 export { default as PageToolbar } from './components/app/page-toolbar/PageToolbar.vue';
 export { default as SplitPane } from './components/containers/split-pane/SplitPane.vue';
+export { default as ListDetail } from './components/containers/list-detail/ListDetail.vue';
 export { default as StorageMeter } from './components/composite/storage-meter/StorageMeter.vue';
 export type { StorageMeterLabels } from './components/composite/storage-meter/StorageMeter.vue';
 export { default as StackedBar } from './components/composite/stacked-bar/StackedBar.vue';