@synopackageland/ui 0.19.11 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 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.
+- In such a page, a `SectionTabs fill` tab that is not a `SettingsPage` scrolls under the fixed strip instead of running past the page's bottom; a `SettingsPage` tab still scrolls only its own body over its footer.
+- [Layout rules](docs/layout-rules.md) describe the current page layout: no page title under a sidebar that names the page, the page's buttons in a bar above it, and only the content scrolling. A migration section lists the CSS an App can drop.
+- Fix long `Select` and `Combobox` lists showing no scrollbar, so a list that scrolls no longer looked cut off. Reka hides the native bar inside its list viewports; the DSM scrollbar is drawn there again, in light and dark, while `ScrollArea` keeps hiding its own bar.
+
 ## 0.19.11 (2026-11-03)
 
 - `Progress` draws its track as a faint tint of its own tone (`--ui-primary-soft`, `--ui-success-soft`, `--ui-warning-soft`, `--ui-danger-soft`) instead of the grey border colour, so a bar never sits on a grey track.

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
@@ -437,6 +437,12 @@ under its sticky header, with the pager always in view. Pages that are not
 `fill` in the same layout scroll as before. In the SDK's `AppShell`, the same
 is a page's `fill: true`.
 
+A settings page fills the same way: `PageContent height="fill"` gives the
+height to a `SectionTabs fill` or a `SettingsPage` through the App's own
+wrapper elements, with no CSS of their own. The tab strip and the footer stay,
+only the sections scroll, and a tab that is not a `SettingsPage` scrolls under
+the strip. The SDK's `AppShell` fills such a page by itself.
+
 ```vue
 <AppLayout height="fill" min-height="0">
   <template #sidebar>…</template>
@@ -492,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`,
@@ -964,8 +970,8 @@ Use the pnpm version specified in `package.json`.
 ```bash
 pnpm story       # component workbench
 pnpm dev         # rebuild dist when library source changes
-pnpm check       # production build, then lint, typecheck and tests in parallel, then the package audit
-pnpm check:fast  # as check, but only the tests the changes since origin/master reach (vitest --changed)
+npm run gates   # basic build, lint, typecheck, unit tests, notices and package audit
+npm run gates:full # optional browser/workbench/registry integrations, only when requested
 pnpm story:build # build the component workbench
 pnpm check:host  # after pnpm build: DSM host simulation screenshots (Chrome)
 pnpm check:date-picker # after pnpm build: app-local calendars, Dialog Escape and full-bleed pages (ego-browser)
@@ -973,8 +979,9 @@ pnpm check:switch # after pnpm build: Switch knob geometry and click toggling (C
 pnpm check:topology # after pnpm build: ConnectionTopology motion, keyboard and narrow layout (Chrome)
 ```
 
-Use `pnpm check:fast` while developing (`SYNOPKGLAND_GATE_BASE` sets the base),
-and `pnpm check` once before a release: the full run is the release gate.
+Use `npm run gates` for development and release. Extended checks require an
+explicit `npm run gates:full`; full is optional. `pnpm check` and `check:fast`
+are basic aliases. See [release checks](docs/release-checks.md).
 `check` prints one line per passing task and a failing task's whole log.
 
 With `SYNOPKGLAND_DOCKER_SSH=<ssh host>`, `pnpm check`, `check:fast` and
@@ -1044,12 +1051,11 @@ See the [documentation](https://www.varvis.me/docs/) for usage.
 
 ### CI and tag releases
 
-GitHub Actions runs on Ubuntu for pushes to `master` and `ci/**`, pull requests,
-and manual dispatch. Both workflows share `.github/actions/verify`: a frozen
-pnpm install from npmjs, `pnpm check` (build, lint, typecheck, unit tests and the
-package-content audit), `notices:check`, responsive/host/switch/layout/motion
-browser checks, and the Histoire workbench build. pnpm and Playwright Chromium
-are cached. Browser screenshots and measurements are retained for seven days.
+Automatic CI runs basic checks. The disabled CI/release workflow templates
+share `.github/actions/verify`: frozen dependency installation and
+`npm run gates` (build, lint, typecheck, unit tests, notices and package audit).
+Browser integrations, workbench builds and registry consumer smoke require
+`npm run gates:full` only when explicitly requested.
 
 To release the package:
 
@@ -1066,8 +1072,8 @@ To release the package:
    ```
 
 The release workflow checks the exact tag/version, default-branch ancestry,
-nonempty changelog section and npm version availability. It runs the same full
-CI gates, stages the package into an empty directory, packs it, and audits
+nonempty changelog section and npm version availability. It runs the same basic
+checks, stages the package into an empty directory, packs it, and audits
 the actual tarball (every exported dist file, MIT license, notices, bundled Reka,
 package name and no `publishConfig`). A separate job rechecks the artifact and
 registry before publishing with `NPM_TOKEN`, then creates a GitHub Release from
@@ -1077,7 +1083,7 @@ If npm publication succeeds but GitHub Release creation fails, create the Releas
 from the changelog separately; rerunning publishing intentionally refuses the
 already published version.
 
-On branches and PRs, the release workflow performs the full pipeline through
+On branches and PRs, the release workflow performs basic validation through
 `npm publish <tgz> --dry-run --access public --ignore-scripts`, without npm
 credentials or creating a GitHub Release. An existing npm version is allowed only
 in dry-run mode and is reported explicitly; npm 11 also rejects duplicate versions
@@ -1121,7 +1127,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.
@@ -1204,7 +1210,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/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";