@synopackageland/ui 0.9.3 → 0.9.5

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # Changelog
 
+## 0.9.5 (2026-10-14)
+
+Settings rows, buttons, callouts and status colours are restyled; dialogs, menus and lists stay inside the DSM window and below its taskbar. **Behavior change:** a `Button` or `IconButton` whose click handler returns a promise is busy and disabled until it settles and drops a second click. The rest is additive.
+設定列、按鈕、Callout 與狀態色改為新樣式；對話框、選單與清單留在 DSM 視窗內並避開工作列。**行為變更：** click handler 回傳 promise 的 `Button` 或 `IconButton` 在完成前維持忙碌、停用，並忽略第二次點擊。其餘為新增功能。
+
+- Fix: copy buttons work in a DSM app window and over plain HTTP. `CopyCutField` and `PathDisplay` fall back to `document.execCommand('copy')` when the Clipboard API is missing or refuses (a frame without `clipboard-write`).
+- 修正：複製按鈕在 DSM App 視窗與純 HTTP 下可用。Clipboard API 不存在或被拒（frame 未允許 `clipboard-write`）時，`CopyCutField` 與 `PathDisplay` 改用 `document.execCommand('copy')`。
+- `CopyCutField` shows the outcome of a copy: the button turns into a check labelled "Copied" for 1.5 s, and a failure says so under the field (`data-copy-feedback`, `role="status"`) and selects the value to copy by hand. `actionSuccess` and `actionFailed` are emitted as before.
+- `CopyCutField` 顯示複製結果：成功時按鈕變成勾號、標示「已複製」1.5 秒；失敗時在欄位下方說明（`data-copy-feedback`、`role="status"`）並選取內容讓使用者手動複製。`actionSuccess`、`actionFailed` 照舊發出。
+- A floating `Dialog` in a DSM window opens centred over where the window is now. It used the window's box from when the app mounted or last saw a window style change, so after DSM finished opening or laying out the window the dialog could open off-centre.
+- DSM 視窗中的浮動 `Dialog` 以視窗目前位置置中開啟。先前沿用 App 掛載時或最後一次視窗樣式變更時量到的位置，DSM 開啟動畫或版面調整之後，對話框可能偏離中央。
+- A floating `Dialog` in a DSM window stays inside the browser viewport when its content grows after it opened, such as a dialog that opens on a loading state. It is centred again over the window until the user moves it, and a moved dialog is pushed back inside the viewport. Before, it kept the top of the short panel and its footer could end up below the viewport, out of reach of the mouse.
+- DSM 視窗中的浮動 `Dialog` 開啟後內容變多（例如先顯示載入中）時，仍留在瀏覽器視窗內：使用者還沒移動過就重新置中於視窗；移動過的則推回可見範圍。先前會沿用短面板的頂端位置，底部按鈕可能落到畫面外、滑鼠按不到。
+- A long `Select` list is at most 20rem tall and scrolls inside itself. It flips above the field or shrinks to stay inside the app window it opens from (inside the viewport from a dialog floating over the DSM desktop), instead of running past the window's bottom edge.
+- 選項很多的 `Select` 清單最高 20rem，在清單內捲動；空間不足時往上展開或縮短，留在所在的 App 視窗內（從浮在 DSM 桌面上的對話框開啟時則留在瀏覽器視窗內），不再超出視窗底部。
+- `DropdownMenu` (and its submenus), `Combobox`, `MultipleSelect`, `SuperboxSelect` and `Popover` stay inside the app window they open from, as `Select` does: they flip to the other side or shrink when there is no room, and scroll inside themselves. A menu is at most 20rem tall; a combobox list keeps its 184px cap. From a dialog floating over the DSM desktop they stay inside the browser viewport.
+- `DropdownMenu`（含子選單）、`Combobox`、`MultipleSelect`、`SuperboxSelect` 與 `Popover` 和 `Select` 一樣留在所在的 App 視窗內：空間不足時往另一側展開或縮短，並在內部捲動。選單最高 20rem；下拉清單維持 184px 上限。從浮在 DSM 桌面上的對話框開啟時則留在瀏覽器視窗內。
+- A `Popover` in an app root is no longer as tall as the app-local dialog cap allowed (`max-height: 100% !important` applied to every `role="dialog"`, popovers included): it keeps its own bound and scrolls. Popover panels carry `data-ui-popover`.
+- App root 內的 `Popover` 不再套用 app 內對話框的高度上限（原本 `max-height: 100% !important` 套到所有 `role="dialog"`，包含 Popover），改用自己的邊界並在內部捲動。Popover 面板帶有 `data-ui-popover`。
+- A floating `Dialog` in a DSM window stays below the DSM taskbar: it opens, drags and is pushed back only below it, and it is at most as tall as the room below it. A dialog taller than that scrolls its body and keeps its header and footer, with the confirm buttons, on screen. Before, a tall dialog could slide under the taskbar.
+- DSM 視窗中的浮動 `Dialog` 會避開 DSM 工作列：開啟、拖曳與推回時都在工作列下方，高度最多到工作列下方的可用空間。比這更高的對話框改為內容區捲動，標題列與含確認按鈕的底部列保持在畫面內。先前過高的對話框可能被工作列蓋住。
+- A `Dialog` with no content, only a title and footer buttons, draws no empty body between them, and its footer drops its top rule so the header's rule separates the two. Content that renders nothing (all `v-if`-ed away) counts as none.
+- 沒有內容、只有標題與底部按鈕的 `Dialog` 不再畫出空白內容區，底部列也不再有上框線，由標題列的分隔線區隔兩者。內容全部被 `v-if` 隱藏時也視為沒有內容。
+- `AppSidebar` (and the SDK's `AppShell` built on it) wraps a long item label onto more lines instead of cutting it off with an ellipsis, such as German "Speichern im Hintergrund". A one-line label keeps the row height; a wrapped one grows the row.
+- `AppSidebar`（以及以它為基礎的 SDK `AppShell`）的長標籤改為換行，不再以省略號截斷，例如德文「Speichern im Hintergrund」。單行標籤維持原本列高，換行時列高隨之增加。
+- `PageHeader` has a `meta` slot on the title line, after the title, for a small chip such as when the page's data was read. The JSON catalog lists it too. Without the slot the header is unchanged.
+- `PageHeader` 新增 `meta` slot，放在標題同一行、標題之後，用來放資料讀取時間之類的小 chip；JSON catalog 也已列出。未使用時標題列不變。
+- `Button` and `IconButton` show a spinner while a click handler's promise runs: a handler that returns a promise keeps the button busy (`aria-busy`, `data-loading`, disabled) until it settles, a second click is dropped, and the label stays in place but hidden so the width does not jump. A rejection still reaches the app's error handler. `loading` works as before.
+- `Button` 與 `IconButton` 在 click handler 回傳的 promise 執行期間顯示轉圈：回傳 promise 的 handler 會讓按鈕維持忙碌（`aria-busy`、`data-loading`、停用）直到完成或失敗，期間再點會被忽略；文字保留但隱藏，寬度不跳動。失敗仍交給 App 的 error handler。`loading` 用法不變。
+- Buttons: secondary is a white control with a hairline border and a 1px shadow instead of a flat grey fill; every variant darkens on hover and press, and focus is a 2px ring with a white gap (`--ui-shadow-focus`, ring at 50%). Under reduced motion the spinner rests as a three-quarter arc instead of turning.
+- 按鈕：次要按鈕改為白底、細框與 1px 陰影，不再是平面灰底；各種按鈕滑過與按下時加深，焦點為帶白色間隙的 2px 外框（`--ui-shadow-focus`，外框 50% 不透明度）。減少動態效果時，轉圈改為靜止的四分之三圓弧。
+- `Callout` has a soft 5% tone fill, a tone border and a 3px accent bar on the left; the title is semibold over body-colour text. A new `code` prop shows an error code in mono, secondary colour, after the message. Stacked callouts keep an even gap.
+- `Callout` 改為 5% 色調淡底、色調細框與左側 3px 色條；標題半粗體，內文用內文色。新增 `code` prop，在訊息後以等寬、次要色顯示錯誤代碼。多個 Callout 疊放時間距一致。
+- Status colours are retuned so every tone's text reads at 4.5:1 on its soft fill (success `#17723a`, warning `#8f5600`, danger `#b42f2f`, neutral `#56606a`); `--ui-text-secondary` is darker (78%). `Badge` uses regular weight and a small dot in non-neutral tones; `Tag` tones use a tinted border. `PathDisplay` has a lighter frame, a yellow folder and a quieter copy button.
+- 狀態色重新調整，各色調文字在自己的淡底上都達 4.5:1（success `#17723a`、warning `#8f5600`、danger `#b42f2f`、neutral `#56606a`）；`--ui-text-secondary` 加深為 78%。`Badge` 改一般字重，非中性色調前加小圓點；`Tag` 色調改用帶色細框。`PathDisplay` 外框變淡、資料夾改黃色、複製按鈕更低調。
+- Settings pages share one label column: `FormItem` (horizontal), `SettingsRow` and `KeyValueRow` use `--ui-label-width` (180px) and `--ui-label-gap` (12px), labels sit left in body colour, so SDK panels and app rows line up. `FormActions inset` starts its buttons on the value edge. A `SettingsRow` with a `description` aligns its label with the control.
+- 設定頁共用同一個標籤欄：`FormItem`（水平）、`SettingsRow` 與 `KeyValueRow` 使用 `--ui-label-width`（180px）與 `--ui-label-gap`（12px），標籤靠左、用內文色，SDK 面板與 App 自己的列會對齊。`FormActions inset` 讓按鈕從值的左緣開始。有 `description` 的 `SettingsRow` 標籤與控制項對齊。
+- `SettingsSection` rhythm: a nested section steps its title down to body size and keeps a section gap from content above it, a nested collapsible section drops its divider so it reads as a disclosure row, consecutive paragraphs in a body get a gap, and a section with only footer buttons starts them at the content edge. A fixed section with `title=""` drops its header, for a panel on a page whose header already names it.
+- `SettingsSection` 節奏：巢狀區塊標題降為內文大小，並與上方內容保持區塊間距；巢狀可收合區塊去掉分隔線，看起來是展開列而非第二層標題；區塊內連續段落有段距；只有底部按鈕的區塊，按鈕從內容起點開始。固定區塊設 `title=""` 時不畫標題列，用於頁面標題已說明的面板。
+- New `CellText` (main text plus smaller, greyer secondary text, stacked or inline with a fixed gap, truncated with a tooltip) and `CellStatus` (status dot and label, a progress bar only while running, `detail` for speed or a reason) for table cells, and `ListItem` for one entry in a list (title, `#meta`, description, `#actions`), with a divider between items. See `docs/layout-rules.md`.
+- 新增表格儲存格元件 `CellText`（主文字加較小、較淡的次要文字，可上下排或同行並保持固定間距，過長截斷並附 tooltip）與 `CellStatus`（狀態點與文字，只在進行中顯示進度條，`detail` 放速度或原因）；新增 `ListItem` 表示清單中的一個項目（標題、`#meta`、描述、`#actions`），項目之間有分隔線。用法見 `docs/layout-rules.md`。
+- Text fields and selects darken their border on hover and turn grey with disabled text when off (a select used to tint its fill and fade to 50%). Descriptions and help in `Dialog`, `Sheet`, `Checkbox`, `RadioGroup`, `FormItem`, `PageHeader` and `EmptyState`, and the empty message of `DataTable` and `DataGrid`, use the secondary text colour (4.5:1) instead of muted (about 2.4:1).
+- 文字欄位與下拉選單滑過時加深外框，停用時灰底、文字變淡（下拉選單原本滑過換底色、停用時半透明）。`Dialog`、`Sheet`、`Checkbox`、`RadioGroup`、`FormItem`、`PageHeader`、`EmptyState` 的描述與說明文字，以及 `DataTable`、`DataGrid` 的空資料訊息，改用次要文字色（4.5:1），不再是淡色（約 2.4:1）。
+- New formatters next to `formatFileSize`: `formatSpeed` (`1.5 MB/s`), `formatPercent` (a ratio, one decimal), `formatDuration` (`3:05` under an hour, then hours and minutes in the locale) and `formatRelativeTime` (`5 minutes ago`). Each takes `locale` and shows `—`, or the `unknown` text you pass, for a value that is not known; `formatFileSize` does the same for `null`, `undefined` and `NaN` instead of printing `null B`.
+- 新增與 `formatFileSize` 並列的格式化函式：`formatSpeed`（`1.5 MB/s`）、`formatPercent`（比例，最多一位小數）、`formatDuration`（一小時內為 `3:05`，之後依語系顯示小時與分鐘）與 `formatRelativeTime`（`5 分鐘前`）。皆接受 `locale`，值未知時顯示 `—` 或傳入的 `unknown` 文字；`formatFileSize` 對 `null`、`undefined`、`NaN` 也一樣，不再印出 `null B`。
+- `Progress` has a `tone` (`primary`, `success`, `warning`, `danger`) for a bar that carries a meaning, such as a volume's used space turning `warning` when it is nearly full. The bar carries `data-tone`; the JSON catalog lists the prop. Without `tone` it is unchanged.
+- `Progress` 新增 `tone`（`primary`、`success`、`warning`、`danger`），用於帶有意義的長條，例如磁碟區快滿時以 `warning` 顯示已用空間。長條帶有 `data-tone`；JSON catalog 也已列出。未設定時外觀不變。
+- New `Statistic`: a small label over a large figure and an optional note, for the numbers a dashboard or result page leads with (space freed, files moved). `size="lg"` uses the new `--ui-font-size-display` token (28px); the default uses `--ui-font-size-h1`. The figure uses tabular digits.
+- 新增 `Statistic`：小標籤、大數字與選用的附註，用於儀表板或結果頁的主要數字（釋放空間、移動檔案數）。`size="lg"` 使用新 token `--ui-font-size-display`（28px），預設使用 `--ui-font-size-h1`。數字使用等寬數字。
+- `Callout` wraps a long unbroken message, such as a URL or a path in an error, inside its box instead of running past the edge. Apps can drop their own `overflow-wrap` rule for alerts.
+- `Callout` 會在框內換行過長、不含空白的訊息（例如錯誤中的網址或路徑），不再超出邊界。App 可移除自己為警示加的 `overflow-wrap` 規則。
+- `FormActions sticky` keeps the buttons in view at the bottom of a long scrolling form, on the surface colour over a hairline divider (`data-sticky`). Without it the actions are unchanged.
+- `FormActions sticky` 讓按鈕在長表單捲動時固定在底部，使用表面色並以細分隔線隔開（`data-sticky`）。未設定時不變。
+- `Checkbox`, `Switch` and `RadioGroup` draw keyboard focus with the shared `--ui-shadow-focus`, as buttons do: a 1px surface gap, then the ring. On a checked, switched-on or selected control the ring used to sit straight against the blue fill and blend into it.
+- `Checkbox`、`Switch` 與 `RadioGroup` 的鍵盤焦點改用與按鈕相同的 `--ui-shadow-focus`：先留 1px 底色間隙再畫外框。先前勾選、開啟或選取時，外框直接貼在藍色填色上，幾乎看不出來。
+- A `Switch` whose label wraps keeps its track beside the first line, as `Checkbox` does, instead of centring it on the whole label. A one-line switch is unchanged.
+- 標籤換行的 `Switch` 開關改為對齊第一行（與 `Checkbox` 相同），不再置中於整段文字。單行時外觀不變。
+- Figures that change in place or stack in a column use `tabular-nums`: the value beside a `Progress` bar (now `data-ui-progress-value`), `Badge`, the `CellStatus` detail line, and right-aligned `DataGrid` and `DataTable` cells. Verdana's digits are already one width, so the DSM look is unchanged; a host or fallback font with proportional digits no longer shifts a percentage or a speed sideways as it updates.
+- 會原地變動或在欄中上下對齊的數字改用 `tabular-nums`：`Progress` 旁的數值（新增 `data-ui-progress-value`）、`Badge`、`CellStatus` 的 detail 行，以及靠右對齊的 `DataGrid`、`DataTable` 儲存格。Verdana 的數字本來就等寬，DSM 外觀不變；換成數字不等寬的宿主或備援字型時，百分比與速度更新時不再左右跳動。
+- A long path, URL or file name with no break points wraps inside a `Tooltip`, a `Dialog` title and the `CellStatus` detail line. A tooltip used to run its white text past the dark bubble onto the page, and a dialog title past the dialog's right edge. Tooltip bubbles carry `data-ui-tooltip`.
+- 沒有斷點的長路徑、網址或檔名，在 `Tooltip`、`Dialog` 標題與 `CellStatus` 的 detail 行內換行。先前 tooltip 的白字會超出深色泡泡、落在頁面上看不見，對話框標題會超出右緣被裁掉。Tooltip 泡泡帶有 `data-ui-tooltip`。
+- `Tooltip` fades in over `--ui-motion-fast` (120ms) with the shared ease-out curve instead of appearing in one frame. Reduced motion turns the fade off, as for every other animation.
+- `Tooltip` 以 `--ui-motion-fast`（120ms）與共用的 ease-out 曲線淡入，不再一格就出現。減少動態效果時與其他動畫一樣不淡入。
+
+## 0.9.4 (2026-10-13)
+
+Additive; DSM-window and mobile presentations render as before.
+新增功能；DSM 視窗與 mobile 呈現與先前相同。
+
+- The `web` presentation (full-page Portal, `wide-layout="web"`, 1200px+) reads as a modern SaaS console: heavier dividers, Card/Panel surfaces and the page card lifted with a soft shadow, bolder page titles and selected nav row. New tokens `--ui-app-web-shadow` and `--ui-web-sidebar-collapsed-width`; dark values in `docs/adaptive-layout.md`.
+- `web` 呈現（整頁 Portal、`wide-layout="web"`、1200px 以上）改為現代 SaaS 風格：較重分隔線、Card／Panel 與頁面卡片加柔和陰影、頁面標題與選取中的導覽列加粗。新增 token `--ui-app-web-shadow`、`--ui-web-sidebar-collapsed-width`；dark 值見 `docs/adaptive-layout.md`。
+- In `web`, the AppLayout sidebar collapses to an icon rail with tooltips and resizes between 200 and 360px by drag or keyboard (`role="separator"`). `sidebar-storage-key` remembers both per app in `localStorage`.
+- `web` 呈現下 AppLayout 側欄可收合成圖示列（附 tooltip），並可拖拉或用鍵盤在 200–360px 間調整寬度（`role="separator"`）；`sidebar-storage-key` 以各 App 的 key 將狀態記在 `localStorage`。
+- Full-page shells show the app's logo and name (`brand-name`, `brand-icon`; default: page title and icon; `#brand` slot) at the top of the web sidebar and in the phone bar and drawer, not in a DSM window. A `#sidebar-footer` slot and the new `AppSidebarUser` show the signed-in account. Sidebar group labels become section titles in web.
+- 整頁版面顯示 App 的 logo 與名稱（`brand-name`、`brand-icon`；預設取頁面標題與圖示；可用 `#brand` slot）：web 側欄頂端、手機頂部列與滑出選單頂端；DSM 視窗不顯示。新增 `#sidebar-footer` slot 與 `AppSidebarUser` 顯示目前帳號。web 呈現下側欄分組標題改為區段標題樣式。
+- `ensureDeviceViewport()` adds a device-width viewport to a full-page host. DSM's page declares none, so on a phone a Portal app was laid out ~980px wide and never reached mobile mode.
+- 新增 `ensureDeviceViewport()`：為整頁宿主加上 device-width viewport。DSM 頁面沒有宣告，手機上的 Portal App 因此以約 980px 排版，進不了 mobile 模式。
+
 ## 0.9.3 (2026-10-13)
 
 Behavior changes: `Checkbox` renders its root as a `span` with a `label` for its text, `Input type="password"` adds a show/hide button, number inputs are 128px wide, `PageHeader` is sticky by default, and disabled primary and danger buttons are tinted instead of faded. Layout rules are in `docs/layout-rules.md`.

package/dist/components/app/app-layout/AppBrand.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name?: string;
+    icon?: string;
+    collapsed?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/app/app-layout/AppLayout.vue.d.ts

@@ -6,22 +6,29 @@ type __VLS_Props = {
     responsive?: boolean;
     /** `web` opts a full-page Portal into the spacious layout at 1200px or wider; DSM windows keep `window`. */
     wideLayout?: WideLayout;
+    /** Remembers the web sidebar's width and collapse under `${key}:app-sidebar`; use an app-unique key. */
+    sidebarStorageKey?: string;
+    /** Heads the web sidebar and the phone bar; defaults to the page title. A DSM window shows it in its title bar instead. */
+    brandName?: string;
+    /** Logo URL beside the brand name; defaults to the page icon. */
+    brandIcon?: string;
 };
-declare var __VLS_6: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
-type __VLS_Slots = {} & {
-    sidebar?: (props: typeof __VLS_6) => any;
-} & {
-    toolbar?: (props: typeof __VLS_13) => any;
-} & {
-    default?: (props: typeof __VLS_15) => any;
-} & {
-    footer?: (props: typeof __VLS_17) => any;
+type __VLS_Slots = {
+    sidebar?: () => unknown;
+    'sidebar-footer'?: () => unknown;
+    brand?: () => unknown;
+    toolbar?: () => unknown;
+    default?: () => unknown;
+    footer?: () => unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     minHeight: string;
     sidebarWidth: string;
     responsive: boolean;
     wideLayout: WideLayout;
+    sidebarStorageKey: string;
+    brandName: string;
+    brandIcon: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/app/app-sidebar/AppSidebarItems.vue.d.ts

@@ -5,6 +5,8 @@ type __VLS_Props = {
     expandedKeys: string[];
     depth: number;
     searching?: boolean;
+    /** Icons only: each row keeps its label as the accessible name and tooltip. */
+    collapsed?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (item: AppSidebarItem) => any;

package/dist/components/app/app-sidebar/AppSidebarTip.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    label: string;
+    enabled: boolean;
+};
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (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<{}>, {}, {}, {}, {}, 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/components/app/app-sidebar/AppSidebarUser.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name: string;
+    /** A second line such as the role or the NAS name. */
+    detail?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -3,9 +3,11 @@ type __VLS_Props = {
     description?: string;
     sticky?: boolean;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    actions?: (props: typeof __VLS_1) => any;
+    meta?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_3) => 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

@@ -3,6 +3,8 @@ type __VLS_Props = {
     title?: string;
     closable?: boolean;
     closeLabel?: string;
+    /** A machine code (e.g. `login_wait_timeout`), shown after the message in a quieter style. */
+    code?: string;
 };
 declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {

package/dist/components/composite/form-actions/FormActions.vue.d.ts

@@ -2,6 +2,10 @@ type __VLS_Props = {
     align?: 'start' | 'end';
     /** Indents the actions past a horizontal form's label column, so they line up with the fields. */
     labelWidth?: string;
+    /** Indents the actions past the shared label column (`--ui-label-width`). */
+    inset?: boolean;
+    /** Keeps the actions in view at the bottom of a long scrolling form, over a divider. */
+    sticky?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -9,6 +13,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     align: "start" | "end";
+    sticky: boolean;
+    inset: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/list-item/ListItem.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    meta?: (props: typeof __VLS_3) => any;
+} & {
+    description?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    actions?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/components/composite/settings-row/SettingsRow.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     label: string;
     description?: string;
     required?: boolean;
+    /** Defaults to `'start'` when a description sits under the control, so the label stays level with it. */
     align?: 'start' | 'center';
     /** Maximum control width: `'xs'`–`'lg'`, `'full'` or a CSS length. */
     fieldWidth?: FieldWidth;

package/dist/components/composite/settings-section/SettingsSection.vue.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    /** Leave empty on a fixed section when the page header already names it. */
     title: string;
     /** One paragraph under the title; its width is capped for reading. */
     description?: string;

package/dist/components/composite/statistic/Statistic.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    label: string;
+    value?: string;
+    note?: string;
+    /** `lg` is for the one number a page leads with. */
+    size?: 'md' | 'lg';
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    note?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "md" | "lg";
+}, {}, {}, {}, 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/components/composite/table-cell/CellStatus.vue.d.ts

@@ -0,0 +1,24 @@
+type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+type __VLS_Props = {
+    label: string;
+    tone?: Tone;
+    /** 0–100 while running; leave unset when there is nothing to measure. */
+    progress?: number;
+    detail?: string;
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    detail?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    progress: number;
+    tone: Tone;
+}, {}, {}, {}, 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/components/composite/table-cell/CellText.vue.d.ts

@@ -0,0 +1,26 @@
+import { Component } from 'vue';
+type __VLS_Props = {
+    text?: string;
+    secondary?: string;
+    /** `stacked` puts the secondary text on its own line; `inline` keeps it after the text. */
+    layout?: 'stacked' | 'inline';
+    /** A leading icon, e.g. a file type. */
+    icon?: Component;
+};
+declare var __VLS_6: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+} & {
+    secondary?: (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<{}>, {
+    layout: "stacked" | "inline";
+}, {}, {}, {}, 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/components/feedback/notification/NotificationProvider.vue.d.ts

@@ -19,8 +19,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, NotificationController, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     duration: number;
-    stackSize: number | false;
     alignment: NotificationAlignment;
+    stackSize: number | false;
     gap: number;
     stackGap: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/primitives/button/Button.vue.d.ts

@@ -1,3 +1,4 @@
+import { ClickHandlers } from '../../../composables/pendingClick';
 type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg';
 type __VLS_Props = {
@@ -6,6 +7,8 @@ type __VLS_Props = {
     loading?: boolean;
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset';
+    /** A listener that returns a promise shows the loading state until it settles. */
+    onClick?: ClickHandlers;
 };
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

package/dist/components/primitives/button/IconButton.vue.d.ts

@@ -1,3 +1,4 @@
+import { ClickHandlers } from '../../../composables/pendingClick';
 type IconButtonVariant = 'secondary' | 'ghost' | 'primary';
 type IconButtonSize = 'sm' | 'md' | 'lg';
 type __VLS_Props = {
@@ -5,10 +6,12 @@ type __VLS_Props = {
     variant?: IconButtonVariant;
     size?: IconButtonSize;
     disabled?: boolean;
+    /** A listener that returns a promise shows a spinner in place of the icon until it settles. */
+    onClick?: ClickHandlers;
 };
-declare var __VLS_1: {};
+declare var __VLS_6: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: IconButtonSize;

package/dist/components/primitives/dropdown-menu/DropdownMenu.vue.d.ts

@@ -10,9 +10,9 @@ type __VLS_Props = {
     /** Controlled values of named radio groups, keyed by `group`. */
     radioValues?: Record<string, string>;
 };
-declare var __VLS_14: {};
+declare var __VLS_16: {};
 type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_14) => any;
+    trigger?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (key: string) => any;

package/dist/components/primitives/dropdown-menu/DropdownMenuItems.vue.d.ts

@@ -3,6 +3,8 @@ type __VLS_Props = {
     items: DropdownMenuEntry[];
     checkedKeys?: string[];
     radioValues?: Record<string, string>;
+    /** Where submenus must stay; see useCollisionBoundary. */
+    collisionBoundary?: HTMLElement | HTMLElement[];
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (key: string) => any;
@@ -13,6 +15,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     onRadio?: ((value: string, key: string, group: string) => any) | undefined;
     onToggle?: ((key: string, checked: boolean) => any) | undefined;
 }>, {
+    collisionBoundary: HTMLElement | HTMLElement[];
     checkedKeys: string[];
     radioValues: Record<string, string>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/primitives/popover/Popover.vue.d.ts

@@ -3,11 +3,11 @@ type __VLS_Props = {
     align?: 'start' | 'center' | 'end';
     width?: string;
 };
-declare var __VLS_14: {}, __VLS_28: {};
+declare var __VLS_16: {}, __VLS_30: {};
 type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_14) => any;
+    trigger?: (props: typeof __VLS_16) => any;
 } & {
-    default?: (props: typeof __VLS_28) => any;
+    default?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     width: string;

package/dist/components/primitives/progress/Progress.vue.d.ts

@@ -4,10 +4,13 @@ type __VLS_Props = {
     label?: string;
     /** Overrides the trailing percentage text, e.g. an explicit `"60%"` from a caller. */
     valueLabel?: string;
+    /** Colours the bar by meaning, such as `warning` for a volume that is nearly full. */
+    tone?: 'primary' | 'success' | 'warning' | 'danger';
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     value: number;
     max: number;
+    tone: "primary" | "success" | "warning" | "danger";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/composables/collisionBoundary.d.ts

@@ -0,0 +1,4 @@
+/** Where a popup opened from `anchor` must stay: the app window it opens from,
+ * or the whole viewport from a dialog floating over the DSM desktop. Reka flips
+ * and shrinks the popup to fit this boundary while it is open. */
+export declare function useCollisionBoundary(anchor: () => HTMLElement | undefined, open: () => boolean): import('vue').ComputedRef<HTMLElement | HTMLElement[]>;

package/dist/composables/floatingHost.d.ts

@@ -1,12 +1,15 @@
 import { Ref, ShallowRef } from 'vue';
-import { Box, Size } from '../lib/floatingDialog';
+import { Box } from '../lib/floatingDialog';
 export declare const FLOATING_HOST_KEY = "@synopkgland/floating-host";
 export declare const FLOATING_HOST_ATTRIBUTE = "data-ui-floating";
 export type FloatingHost = {
     element: ShallowRef<HTMLElement | null>;
     /** The app root's box, or null while its window is hidden. */
     owner: ShallowRef<Box | null>;
-    viewport: ShallowRef<Size>;
+    /** Measures the app root's box and the area now, and returns the box as `owner` holds it. */
+    locate: () => Box | null;
+    /** The part of the browser viewport floating panels may use. */
+    area: ShallowRef<Box>;
     /** False on a narrow viewport or with a coarse pointer: panels become viewport sheets. */
     draggable: Ref<boolean>;
 };

package/dist/composables/floatingPlacement.d.ts

@@ -4,7 +4,7 @@ import { FloatingHost } from './floatingHost';
 /**
  * Places a floating dialog panel: centered over its app window when it opens,
  * then moved by its title bar (pointer) or title (arrow keys), always kept
- * inside the viewport and moved along with the app window.
+ * inside the host's area and moved along with the app window.
  */
 export declare function useFloatingPlacement(handle: Ref<HTMLElement | null>, host: FloatingHost | null): {
     position: import('vue').ShallowRef<Point | null, Point | null>;

package/dist/composables/pendingClick.d.ts

@@ -0,0 +1,12 @@
+export type ClickHandler = (event: MouseEvent) => unknown;
+export type ClickHandlers = ClickHandler | ClickHandler[] | undefined;
+/**
+ * Runs a button's click listeners itself, so a listener that returns a promise
+ * keeps the button pending until it settles. A second click while pending is
+ * dropped. A rejection is rethrown, so Vue still reports it through the app's
+ * error handler as it would for a native listener.
+ */
+export declare function usePendingClick(handlers: () => ClickHandlers): {
+    pending: import('vue').Ref<boolean, boolean>;
+    onClick: (event: MouseEvent) => Promise<void>;
+};

package/dist/composables/sidebarPreference.d.ts

@@ -0,0 +1,6 @@
+export declare const clampSidebarWidth: (width: number) => number;
+/** Width and collapse of the web-presentation sidebar, remembered under `${storageKey}:app-sidebar`. */
+export declare function useSidebarPreference(storageKey: string | undefined): {
+    width: import('vue').Ref<number, number>;
+    collapsed: import('vue').Ref<boolean, boolean>;
+};

package/dist/i18n/text.d.ts

@@ -32,6 +32,9 @@ export declare const englishUiText: {
     readonly Notifications: "Notifications";
     readonly "Press F6 to access notifications": "Press F6 to access notifications";
     readonly "Application navigation": "Application navigation";
+    readonly "Collapse navigation": "Collapse navigation";
+    readonly "Expand navigation": "Expand navigation";
+    readonly "Resize navigation": "Resize navigation";
     readonly Sections: "Sections";
     readonly Slider: "Slider";
     readonly "Increase value": "Increase value";
@@ -142,6 +145,7 @@ export declare const englishUiText: {
     readonly "Hide password": "Hide password";
     readonly "Copy path": "Copy path";
     readonly Copied: "Copied";
+    readonly "Couldn't copy. Select the text and copy it manually.": "Couldn't copy. Select the text and copy it manually.";
 };
 export type UiTextKey = keyof typeof englishUiText;
 export type UiTranslator = (key: UiTextKey, values?: Record<string, string | number>) => string;

package/dist/index.d.ts

@@ -98,7 +98,10 @@ export { default as FormActions } from './components/composite/form-actions/Form
 export { default as RepeatRows } from './components/composite/repeat-rows/RepeatRows.vue';
 export { default as RepeatRow } from './components/composite/repeat-rows/RepeatRow.vue';
 export { default as FieldCell } from './components/composite/repeat-rows/FieldCell.vue';
-export { formatFileSize } from './lib/fileSize';
+export { formatFileSize, formatSpeed } from './lib/fileSize';
+export type { UnknownOption } from './lib/fileSize';
+export { formatDuration, formatPercent, formatRelativeTime } from './lib/format';
+export type { FormatOptions } from './lib/format';
 export { resolveFieldWidth } from './lib/fieldWidth';
 export type { FieldWidth } from './lib/fieldWidth';
 export { default as SettingsSection } from './components/composite/settings-section/SettingsSection.vue';
@@ -111,6 +114,10 @@ export { default as ConnectionTopology } from './components/composite/connection
 export type { LinkState, TopologyLane, TopologyLink, TopologyNode } from './components/composite/connection-topology/types';
 export { default as EmptyState } from './components/composite/empty-state/EmptyState.vue';
 export { default as DataTable } from './components/composite/data-table/DataTable.vue';
+export { default as CellText } from './components/composite/table-cell/CellText.vue';
+export { default as CellStatus } from './components/composite/table-cell/CellStatus.vue';
+export { default as ListItem } from './components/composite/list-item/ListItem.vue';
+export { default as Statistic } from './components/composite/statistic/Statistic.vue';
 export type { DataTableColumn } from './components/composite/data-table/DataTable.vue';
 export { default as DataGrid } from './components/composite/data-grid/DataGrid.vue';
 export type { DataGridColumn, DataGridColumnWidths, DataGridLabels, ResolvedDataGridLabels, DataGridSort, DataGridGroup, DataGridExpandable, DataGridDraggable, DataGridReorder, DataGridCellUpdate, DataGridAdapter, DataGridCellSlotProps } from './components/composite/data-grid/DataGrid.vue';
@@ -166,7 +173,9 @@ export { default as AppLayout } from './components/app/app-layout/AppLayout.vue'
 export { default as ResponsiveView } from './components/app/responsive-view/ResponsiveView.vue';
 export { appPresentationForWidth, MOBILE_LAYOUT_MAX, WEB_LAYOUT_MIN } from './lib/adaptiveLayout';
 export type { AppPresentation, WideLayout } from './lib/adaptiveLayout';
+export { ensureDeviceViewport } from './lib/deviceViewport';
 export { default as AppSidebar } from './components/app/app-sidebar/AppSidebar.vue';
+export { default as AppSidebarUser } from './components/app/app-sidebar/AppSidebarUser.vue';
 export type { AppSidebarGroup, AppSidebarItem } from './components/app/app-sidebar/AppSidebar.vue';
 export { default as AppToolbar } from './components/app/app-toolbar/AppToolbar.vue';
 export { default as AppActionBar } from './components/app/app-action-bar/AppActionBar.vue';