@synopackageland/ui 0.9.0 → 0.9.2

package/CHANGELOG.md

@@ -1,6 +1,38 @@
 # Changelog
 
-## Unreleased
+## 0.9.2 (2026-10-12)
+
+One behavior change: while a Dialog floats outside its window (`dialog-bounds="viewport"`), focus that lands on the owning DSM window returns to the top Dialog, so Escape closes that Dialog instead of the window. Everything else is additive: Badge looks the same in the DSM 7 theme.
+一項行為變化：Dialog 浮出視窗外（`dialog-bounds="viewport"`）期間，落到所屬 DSM 視窗的焦點會回到最上層 Dialog，Esc 因此只關該 Dialog，不再關掉視窗。其餘皆為新增；DSM 7 主題下 Badge 外觀不變。
+
+- `ConnectionTopology` draws paths from several sources, each through an optional relay, to one shared target, with no product wording built in. Each link is one of `active`, `pending`, `attention`, `error`, `idle` or `unknown`, shown with colour, a glyph and a word: working links flow dots toward the target, changing ones move slow dashes with a pulsing dot. Lanes are buttons that emit `select-lane` (Enter/Space; arrow keys, Home and End move between lanes); `lane-footer-<id>` and `node-<id>` slots add content. Below 600px of container width, or with `compact`, lanes stack with their own target. `pnpm check:topology` checks it in Chrome.
+- 新增 `ConnectionTopology`：畫出多個來源各自經過（可省略的）中繼、連到同一個目標的路徑，元件本身不含產品用語。每段連線是 `active`、`pending`、`attention`、`error`、`idle`、`unknown` 之一，以顏色、圖示與文字表示：運作中的連線有點點流向目標，變化中的連線是慢速虛線加脈動圓點。每條 lane 是按鈕，發出 `select-lane`（Enter／Space；方向鍵、Home、End 在 lane 間移動）；`lane-footer-<id>`、`node-<id>` slot 可加內容。容器寬度小於 600px 或設 `compact` 時改為直向堆疊、每條 lane 各帶目標。`pnpm check:topology` 在 Chrome 中檢查。
+- `StatusDot` is a tone dot; `pulse` ripples a ring out of it. `StepList` is a static numbered list of instructions or checklist items, each with an optional status (`done`, `current`, `pending`, `error`, `warning`) and `#description`/`#action` slots.
+- 新增 `StatusDot`（色調圓點，`pulse` 會向外擴散光圈）與 `StepList`（靜態編號步驟清單，可作操作說明或檢查清單；每項可帶狀態 `done`、`current`、`pending`、`error`、`warning`，並有 `#description`／`#action` slot）。
+- Theme tokens `--ui-{neutral,info,success,warning,danger}-soft` and `-text` give each status tone a soft fill and the text that reads on it; `Badge` now uses them (same colours in the DSM 7 theme), so a theme recolours every tone. New keyframes `ui-flow` and `ui-pulse`; both stop under `prefers-reduced-motion`.
+- 新增主題 token `--ui-{neutral,info,success,warning,danger}-soft` 與 `-text`，為每個狀態色提供淡底色與其上的文字色；`Badge` 改用它們（DSM 7 主題下顏色不變），主題可一次改掉所有色調。新增 keyframe `ui-flow`、`ui-pulse`，在 `prefers-reduced-motion` 下皆停止。
+- **Behavior change.** Fix: with `dialog-bounds="viewport"`, Escape after pressing a floating Dialog no longer closes the whole DSM window. The `activate` handler's `toFront()` moved focus to the window's own anchor, so Escape skipped the Dialog and reached the window's keymap. Focus that lands on the owning window while a Dialog floats now returns to the top Dialog, so Escape closes only that Dialog. Apps need no change.
+- **行為變化。** 修正：`dialog-bounds="viewport"` 下，按過浮出的 Dialog 後再按 Esc，不再關掉整個 DSM 視窗。`activate` 處理中的 `toFront()` 會把焦點移到視窗自己的錨點，Esc 因此繞過 Dialog、由視窗 keymap 處理。現在 Dialog 浮出期間，落到所屬視窗的焦點會回到最上層 Dialog，Esc 只關該 Dialog。App 不需修改。
+
+## 0.9.1 (2026-10-12)
+
+Two behavior changes: a Dialog without `width` is 520px wide inside `AppRoot`, and Breadcrumb's last level no longer emits `click-item`.
+兩項行為變化：`AppRoot` 內未指定 `width` 的 Dialog 寬 520px；Breadcrumb 最後一段不再發出 `click-item`。
+
+- **Behavior change.** Fix: Dialog's `width` applies again inside `AppRoot`. Since app-local modality, `max-width: calc(100% - 24px) !important` overrode it, so 480px or 800px dialogs stretched to almost the window width. A panel now narrows only when the app (or viewport) is narrower than `width`. Dialogs without `width` now take the 520px default instead of the window width; pass a larger `width` where a wide panel is wanted.
+- **行為變化。** 修正：`AppRoot` 內 Dialog 的 `width` 重新生效。自 app-local modal 起，`max-width: calc(100% - 24px) !important` 蓋掉它，480px／800px 的 Dialog 都被撐到接近視窗寬；現在只在 app（或 viewport）比 `width` 窄時才夾到可用寬度。未指定 `width` 的 Dialog 改用預設 520px，不再是視窗寬；需要寬面板請傳較大的 `width`。
+- Dialog takes `height` and `min-height`, so one row of content no longer leaves a flat panel. Both are capped to the available height, the body fills the panel and the footer stays at the bottom.
+- Dialog 新增 `height` 與 `min-height`，內容只有一列時不再變成扁平面板；兩者都夾到可用高度，內容區撐滿、footer 固定在底部。
+- `AppRoot` takes `dialog-bounds="viewport"` (app mode, default `app`): as in DSM, the mask covers only the owning window, while the Dialog panel can be dragged by its title bar (or moved with the arrow keys on its title) anywhere inside the browser viewport. It stacks with its window, hides with it, follows its moves, and becomes a bottom sheet below 600px or with a coarse pointer. Pressing it emits `activate` so the DSM host can bring the window forward. See `docs/app-local-modal.md`.
+- `AppRoot` 新增 `dialog-bounds="viewport"`（app 模式，預設 `app`）：與 DSM 原生一致，遮罩只蓋擁有它的視窗，Dialog 本體可用標題列拖移（或聚焦標題後用方向鍵）到瀏覽器 viewport 內任何位置；它隨視窗疊放與隱藏、跟著視窗移動，600px 以下或粗指標時改為底部 sheet。按下面板會發出 `activate`，讓 DSM host 把視窗帶到前面。詳見 `docs/app-local-modal.md`。
+- **Behavior change:** Breadcrumb's current (last) level is plain text with `aria-current="page"`, no longer a button that emits `click-item`. With an action menu it stays the menu trigger.
+- **行為變化：** Breadcrumb 的目前（最後）一段改為帶 `aria-current="page"` 的文字，不再是會發出 `click-item` 的按鈕；有 action menu 時仍是選單觸發鈕。
+- TreeView takes `selection-style="background"`: a selected row only gets the selected background, and its icon and text keep their colors, as in DSM File Station. The default `accent` is unchanged.
+- TreeView 新增 `selection-style="background"`：選中列只換背景，圖示與文字維持原色（DSM File Station 樣式）；預設 `accent` 不變。
+- DataGrid takes `single-select`: no checkbox column, a click selects one row, the rows are in the tab order (the selected row, else the first), the arrow keys move the selection and Enter emits `rowActivate`.
+- DataGrid 新增 `single-select`：無勾選框欄，點列單選；列可用鍵盤聚焦（選中列，否則第一列），方向鍵移動選取，Enter 觸發 `rowActivate`。
+- `FileTypeIcon` draws a folder (`kind="folder"`, `open`) or a file whose extension picks the icon (image, video, audio, archive, text, code, else a plain file). Its colours are the theme tokens `--ui-file-folder` (DSM 7 File Station yellow) and `--ui-file-icon`, so a theme recolours every file list; `fileTypeIcon(name)` returns the icon alone.
+- 新增 `FileTypeIcon`：畫資料夾（`kind="folder"`、`open`）或依副檔名選圖示的檔案（圖片、影片、音訊、壓縮檔、文字、程式碼，其餘為一般檔案）。顏色來自主題 token `--ui-file-folder`（DSM 7 File Station 黃色）與 `--ui-file-icon`，主題可一次改掉所有檔案列表的顏色；`fileTypeIcon(name)` 只回傳圖示元件。
 
 ## 0.9.0 (2026-10-11)
 

package/README.md

@@ -253,6 +253,12 @@ const open = ref(false)
 </template>
 ```
 
+`width` (default `520px`) is the panel's maximum width. `height` or
+`min-height` (for example `min-height="420px"`) keeps a panel with little
+content from collapsing. In a DSM window, `<AppRoot dialog-bounds="viewport">`
+lets dialogs be dragged out of the window, within the browser viewport. See
+[docs/app-local-modal.md](docs/app-local-modal.md#floating-dialogs-in-a-dsm-window).
+
 ### Toast notifications
 
 Wrap your page with `ToastProvider` in `App.vue`:
@@ -322,6 +328,19 @@ Components use semantic CSS tokens. Import your override stylesheet after the li
 }
 ```
 
+Status tones come in pairs, a soft fill and the text that reads on it:
+`--ui-{neutral,info,success,warning,danger}-soft` and `-text`. `Badge`,
+`StatusDot`, `StepList` and `ConnectionTopology` use only these and the base
+tones (`--ui-success`, …), so a dark theme overrides the pairs once:
+
+```css
+[data-ui-theme='dark'] {
+  --ui-success-soft: #173222;
+  --ui-success-text: #6fdc8a;
+  /* … the other tones, and the surface and text tokens */
+}
+```
+
 Density can be switched per application subtree:
 
 ```html
@@ -338,7 +357,7 @@ Primitives:
 - Input / Textarea
 - Checkbox / RadioGroup / Switch
 - Select
-- Badge / Separator / Spinner / LoadingMask / LoadingArea / Progress / Skeleton / Surface
+- Badge / StatusDot / Separator / Spinner / LoadingMask / LoadingArea / Progress / Skeleton / Surface
 - SplitButton
 - Tooltip / Popover / DropdownMenu / ContextMenu / Dialog
 - Sheet / Drawer
@@ -350,7 +369,8 @@ DSM-style application building blocks:
 
 - SearchField
 - SettingsRow / SettingsSection
-- Callout / EmptyState
+- Callout / EmptyState / StepList
+- ConnectionTopology
 - DataTable / DataGrid
 - TreeView
 - FilePicker
@@ -379,6 +399,54 @@ by the caller, add `class="ui-tab-panel"` to a panel keyed by the selected value
 to use the same short fade. These effects and the loading ring respect the
 system's reduced-motion preference.
 
+### Status: StatusDot, StepList, ConnectionTopology
+
+`StatusDot` is an 8px tone dot; `pulse` ripples a ring out of it for a state
+that is still changing. It is decorative unless it has a `label`.
+
+`StepList` is a static numbered list (`items: { title, description?, status? }[]`)
+for instructions or a checklist. `status` (`done`, `current`, `pending`, `error`,
+`warning`) recolours the marker and is read out to assistive technology;
+`#description` and `#action` scoped slots add content per step. It does not
+navigate; use `Wizard` for that.
+
+`ConnectionTopology` draws paths from several sources, each through an optional
+relay, to one shared target. It knows nothing about any product: the caller
+maps its own states to six link states.
+
+```vue
+<ConnectionTopology
+  aria-label="Connections"
+  :target="{ id: 'server', label: 'Server', caption: 'office-01', icon: Server }"
+  :lanes="[{
+    id: 'relay',
+    source: { id: 'browser', label: 'Any browser', icon: Globe },
+    via: { id: 'relay', label: 'Edge relay', icon: Cloud },
+    links: [{ state: 'active', label: 'Reachable' }, { state: 'active', label: 'Running' }],
+  }]"
+  @select-lane="open"
+>
+  <template #lane-footer-relay>https://office.example.com</template>
+</ConnectionTopology>
+```
+
+- **States.** `active` (green, dots flow toward the target), `pending` (amber,
+  slow dashes and a pulsing dot), `attention` (amber, waits for the user),
+  `error` (red), `idle` (grey dashes), `unknown` (grey dots). Every state but
+  `idle` has a glyph and every link a word, so colour is never the only cue;
+  `link.icon` replaces the glyph (a key for a sign-in, say). A missing `label`
+  shows the localized state word (`text` overrides them); `label: ''` hides it.
+- **Keyboard and screen readers.** Each lane is a button named after its nodes
+  and link states; Enter or Space emits `select-lane`, the arrow keys, Home and
+  End move between lanes. `selectable: false` renders plain rows.
+  `lane-footer-<id>` content sits below the lane button, so it may hold its own
+  buttons and links; `node-<id>` replaces a node's content.
+- **Layout.** Below 600px of container width (or with `compact`), each lane
+  stacks with its own copy of the target and the link words move to a caption
+  line. With no lanes, one idle line shows `empty-label`.
+- **Motion.** The keyframes `ui-flow` and `ui-pulse` stop under
+  `prefers-reduced-motion`; a working link then turns solid with an arrow.
+
 `FilePicker` owns file selection/validation/drop-zone UI only; applications remain responsible for upload transport.
 
 ### DataGrid
@@ -437,6 +505,7 @@ pnpm check       # lint, typecheck, tests, and production build
 pnpm story:build # build the component workbench
 pnpm check:host  # after pnpm build: DSM host simulation screenshots (Chrome)
 pnpm check:switch # after pnpm build: Switch knob geometry and click toggling (Chrome)
+pnpm check:topology # after pnpm build: ConnectionTopology motion, keyboard and narrow layout (Chrome)
 ```
 
 `pnpm check:host` serves `tests/dsm-host` and screenshots each overlay scene in
@@ -451,6 +520,13 @@ embedded theme (also under `host-simulation.css`), checks in headless Chrome tha
 inside and centred in the track and that a real mouse click toggles an enabled switch. Screenshots
 are left in `.switch-shots/`.
 
+`pnpm check:topology` renders every link state wide, on dark tokens, at 360px and
+empty, on the standalone and the embedded theme. In headless Chrome it checks
+that working links flow and changing ones pulse, that reduced motion stills
+them, that the arrow keys and Enter select a lane with a visible focus ring, and
+that the narrow layout stacks without overflow. Screenshots are left in
+`.topology-shots/`.
+
 In the workbench, open `DSM 7 / App Interior` and `DSM 7 / Advanced Components`
 for reference compositions. See [SPEC.md](./SPEC.md) for architecture and
 contribution rules, and [src/index.ts](./src/index.ts) for public exports.

package/dist/components/app/app-root/AppRoot.vue.d.ts

@@ -1,5 +1,11 @@
 type __VLS_Props = {
     modalScope?: 'document' | 'app';
+    /**
+     * `viewport` lets app-local dialogs leave the app window, as DSM's own
+     * dialogs do: the mask still covers only this root, the panel can be dragged
+     * anywhere in the viewport. Set it only inside a DSM window.
+     */
+    dialogBounds?: 'app' | 'viewport';
 };
 declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
@@ -7,8 +13,13 @@ type __VLS_Slots = {} & {
 } & {
     default?: (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<{}>, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    activate: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onActivate?: (() => any) | undefined;
+}>, {
     modalScope: "document" | "app";
+    dialogBounds: "app" | "viewport";
 }, {}, {}, {}, 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/connection-topology/ConnectionTopology.vue.d.ts

@@ -0,0 +1,40 @@
+import { LinkState, TopologyLane, TopologyNode } from './types';
+/**
+ * Paths from several sources, each through an optional relay, to one shared
+ * target. Each link shows its state with colour, a glyph and text; working
+ * links flow toward the target. Every lane is a button that emits
+ * `select-lane`. Below 600px of container width the lanes stack compactly.
+ */
+type __VLS_Props = {
+    target: TopologyNode;
+    lanes: TopologyLane[];
+    ariaLabel?: string;
+    /** Always use the stacked narrow layout. */
+    compact?: boolean;
+    /** Render lanes as buttons that emit `select-lane`. */
+    selectable?: boolean;
+    emptyLabel?: string;
+    /** State words for links without a label. */
+    text?: Partial<Record<LinkState, string>>;
+};
+type __VLS_Slots = Record<`node-${string}`, (props: {
+    node: TopologyNode;
+}) => unknown> & Record<`lane-footer-${string}`, (props: {
+    lane: TopologyLane;
+}) => unknown>;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "select-lane": (id: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onSelect-lane"?: ((id: string) => any) | undefined;
+}>, {
+    compact: boolean;
+    selectable: boolean;
+}, {}, {}, {}, 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/connection-topology/TopologyLink.vue.d.ts

@@ -0,0 +1,8 @@
+import { TopologyLink } from './types';
+type __VLS_Props = {
+    link: TopologyLink;
+    text: 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/composite/connection-topology/TopologyNode.vue.d.ts

@@ -0,0 +1,19 @@
+import { TopologyNode } from './types';
+type __VLS_Props = {
+    node: TopologyNode;
+};
+declare var __VLS_1: {
+    node: TopologyNode;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/connection-topology/types.d.ts

@@ -0,0 +1,30 @@
+import { Component } from 'vue';
+/**
+ * `active` works, `pending` is still changing, `attention` waits for the user,
+ * `error` failed, `idle` is not set up or turned off, `unknown` cannot be told.
+ */
+export type LinkState = 'active' | 'pending' | 'attention' | 'error' | 'idle' | 'unknown';
+export interface TopologyNode {
+    id: string;
+    label: string;
+    caption?: string;
+    icon?: Component;
+}
+export interface TopologyLink {
+    state: LinkState;
+    /** Short visible text; the state word stands in when it is missing, and an
+     * empty string shows none (the lane's accessible name keeps the state word). */
+    label?: string;
+    /** Replaces the state's glyph, e.g. a key for a sign-in. */
+    icon?: Component;
+}
+export interface TopologyLane {
+    id: string;
+    /** The far end, e.g. the people or devices that connect. */
+    source: TopologyNode;
+    /** The relay in between; without it the lane is a direct path. */
+    via?: TopologyNode;
+    /** Source to relay, then relay to the shared target. */
+    links: [TopologyLink, TopologyLink];
+    disabled?: boolean;
+}

package/dist/components/composite/data-grid/DataGrid.vue.d.ts

@@ -103,6 +103,8 @@ type __VLS_Props = {
     selectable?: boolean;
     /** With `selectable`: a row click selects that row; Ctrl/Cmd-click toggles it. */
     selectOnRowClick?: boolean;
+    /** One selected row at a time, picked by clicking the row; no checkbox column. */
+    singleSelect?: boolean;
     page?: number;
     pageSize?: number;
     totalRows?: number;
@@ -172,6 +174,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     }) => any;
     rowClick: (row: Record<string, unknown>) => any;
     rowDblclick: (row: Record<string, unknown>) => any;
+    rowActivate: (row: Record<string, unknown>) => any;
     rowExpand: (key: string) => any;
     rowCollapse: (key: string) => any;
     groupToggle: (groupKey: string, expanded: boolean) => any;
@@ -201,6 +204,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     }) => any) | undefined;
     onRowClick?: ((row: Record<string, unknown>) => any) | undefined;
     onRowDblclick?: ((row: Record<string, unknown>) => any) | undefined;
+    onRowActivate?: ((row: Record<string, unknown>) => any) | undefined;
     onRowExpand?: ((key: string) => any) | undefined;
     onRowCollapse?: ((key: string) => any) | undefined;
     onGroupToggle?: ((groupKey: string, expanded: boolean) => any) | undefined;
@@ -222,13 +226,15 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     loading: boolean;
     group: DataGridGroup | null;
     loadingText: string;
+    draggable: boolean | DataGridDraggable;
     page: number;
     pageSize: number;
+    selectable: boolean;
     rowKey: string;
     defaultSort: DataGridSort | null;
     selectedKeys: string[];
-    selectable: boolean;
     selectOnRowClick: boolean;
+    singleSelect: boolean;
     localSort: boolean;
     localPagination: boolean;
     loadingRows: number;
@@ -239,7 +245,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     expandable: DataGridExpandable | null;
     expandedKeys: string[];
     defaultExpandedKeys: string[];
-    draggable: boolean | DataGridDraggable;
 }, {}, {}, {}, 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/step-list/StepList.vue.d.ts

@@ -0,0 +1,29 @@
+import { StepListItem, StepStatus } from './types';
+/**
+ * A static, numbered list of steps: instructions to follow or a checklist
+ * whose items each carry a status. It does not navigate; see Wizard for that.
+ */
+type __VLS_Props = {
+    items: StepListItem[];
+    /** Status words read to assistive technology. */
+    text?: Partial<Record<Exclude<StepStatus, 'pending'>, string>>;
+};
+type __VLS_Slots = {
+    description?: (props: {
+        item: StepListItem;
+        index: number;
+    }) => unknown;
+    action?: (props: {
+        item: StepListItem;
+        index: number;
+    }) => unknown;
+};
+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/step-list/types.d.ts

@@ -0,0 +1,7 @@
+export type StepStatus = 'done' | 'current' | 'pending' | 'error' | 'warning';
+export interface StepListItem {
+    title: string;
+    description?: string;
+    /** Defaults to `pending`. */
+    status?: StepStatus;
+}

package/dist/components/composite/tree-view/TreeView.vue.d.ts

@@ -16,6 +16,8 @@ type __VLS_Props = {
     loadChildren?: (node: TreeNode) => Promise<TreeNode[] | undefined>;
     /** Localise the expand/collapse control. */
     expandLabel?: (node: TreeNode, expanded: boolean) => string;
+    /** `accent` also colors the selected icon and text; `background` only shades the row, as DSM File Station does. */
+    selectionStyle?: 'accent' | 'background';
 };
 declare function nodeById(id: string): TreeNode | undefined;
 declare function getCheckedNodes(includeHalf?: boolean): TreeNode[];
@@ -84,6 +86,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     checkable: boolean;
     defaultCheckedKeys: string[];
     loadChildren: (node: TreeNode) => Promise<TreeNode[] | undefined>;
+    selectionStyle: "accent" | "background";
 }, {}, {}, {}, 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/containers/expandable-item/ExpandableItem.vue.d.ts

@@ -64,9 +64,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     "onDrag-over"?: ((event: DragEvent) => any) | undefined;
     "onDrag-end"?: ((event: DragEvent) => any) | undefined;
 }>, {
+    draggable: boolean;
     selectable: boolean;
     expandable: boolean;
-    draggable: boolean;
     expanded: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/feedback/notification/Notification.vue.d.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     open: boolean;
     tone: NotificationTone;
     content: string | false;
-    duration: number | false;
     cancel: NotificationAction;
+    duration: number | false;
     confirm: NotificationAction;
     paused: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/primitives/breadcrumb/BreadcrumbCrumb.vue.d.ts

@@ -5,7 +5,11 @@ type __VLS_Props = {
     /** The level owns the action menu, so it shows a dropdown chevron. */
     hasMenu?: boolean;
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
     current: boolean;
     hasMenu: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/primitives/dialog/Dialog.vue.d.ts

@@ -4,17 +4,21 @@ type __VLS_Props = {
     title?: string;
     description?: string;
     width?: string;
+    /** A fixed panel height, capped to the available height. */
+    height?: string;
+    /** Keeps the panel from shrinking with short content, capped to the available height. */
+    minHeight?: string;
     closeLabel?: string;
     /** Hides the header close affordance for fixed-flow dialogs that own their dismiss path. */
     showClose?: boolean;
 };
-declare var __VLS_14: {}, __VLS_62: {}, __VLS_64: {};
+declare var __VLS_14: {}, __VLS_71: {}, __VLS_73: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_62) => any;
+    default?: (props: typeof __VLS_71) => any;
 } & {
-    footer?: (props: typeof __VLS_64) => any;
+    footer?: (props: typeof __VLS_73) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;

package/dist/components/primitives/dialog/FloatingLayer.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    host: HTMLElement | null;
+};
+declare var __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_16) => 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/primitives/icon/FileTypeIcon.vue.d.ts

@@ -0,0 +1,17 @@
+import { IconSize } from './icon';
+type __VLS_Props = {
+    kind?: 'folder' | 'file';
+    /** A file's name; its extension picks the icon. */
+    name?: string;
+    /** Draws an open folder. */
+    open?: boolean;
+    size?: IconSize;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: IconSize;
+    name: string;
+    open: boolean;
+    kind: "folder" | "file";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/primitives/icon/fileType.d.ts

@@ -0,0 +1,3 @@
+import { LucideIcon } from '@lucide/vue';
+/** The icon for a file name, from its last extension; `File` when unknown. */
+export declare function fileTypeIcon(name?: string): LucideIcon;

package/dist/components/primitives/status-dot/StatusDot.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    /** Ripple a ring out of the dot, for a state that is still changing. */
+    pulse?: boolean;
+    /** Names the state for assistive technology; without it the dot is decorative. */
+    label?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tone: "neutral" | "info" | "success" | "warning" | "danger";
+    pulse: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/floatingHost.d.ts

@@ -0,0 +1,21 @@
+import { Ref, ShallowRef } from 'vue';
+import { Box, Size } 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>;
+    /** False on a narrow viewport or with a coarse pointer: panels become viewport sheets. */
+    draggable: Ref<boolean>;
+};
+export declare function injectFloatingHost(): FloatingHost | null;
+/**
+ * A viewport-sized layer for dialogs that may leave the app window, as DSM's
+ * own dialogs do. It sits right after the window that owns the app, at that
+ * window's z-index, so other DSM windows still stack over both, and it hides
+ * with the window. It carries the app root attribute, so the scoped theme
+ * styles it, and it lets presses through except on panels.
+ */
+export declare function useFloatingHost(root: Ref<HTMLElement | null>, enabled: boolean, activate: () => void): FloatingHost | null;

package/dist/composables/floatingPlacement.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+import { Point } from '../lib/floatingDialog';
+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.
+ */
+export declare function useFloatingPlacement(handle: Ref<HTMLElement | null>, host: FloatingHost | null): {
+    position: import('vue').ShallowRef<Point | null, Point | null>;
+    draggable: import('vue').ComputedRef<boolean>;
+    onPointerdown: (event: PointerEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+};

package/dist/i18n/text.d.ts

@@ -43,6 +43,15 @@ export declare const englishUiText: {
     readonly Info: "Info";
     readonly Warning: "Warning";
     readonly Error: "Error";
+    readonly Completed: "Completed";
+    readonly "Current step": "Current step";
+    readonly Connected: "Connected";
+    readonly Connecting: "Connecting";
+    readonly "Needs attention": "Needs attention";
+    readonly Failed: "Failed";
+    readonly "Not set up": "Not set up";
+    readonly Unknown: "Unknown";
+    readonly "No connections": "No connections";
     readonly Reset: "Reset";
     readonly Custom: "Custom";
     readonly Color: "Color";

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { default as MultipleSelect } from './components/primitives/multiple-sele
 export { default as SuperboxSelect } from './components/primitives/superbox-select/SuperboxSelect.vue';
 export type { SelectAllowCreate, SelectCreateOptions, SelectOptionGroup, SelectOptions, SelectOptionsRecord, SelectSearch, } from './components/primitives/select/internal/types';
 export { default as Badge } from './components/primitives/badge/Badge.vue';
+export { default as StatusDot } from './components/primitives/status-dot/StatusDot.vue';
 export { default as Separator } from './components/primitives/separator/Separator.vue';
 export { default as Spinner } from './components/primitives/spinner/Spinner.vue';
 export { default as LoadingMask } from './components/primitives/loading/LoadingMask.vue';
@@ -48,6 +49,8 @@ export type { TabItem } from './components/primitives/tabs/Tabs.vue';
 export { default as Accordion } from './components/primitives/accordion/Accordion.vue';
 export type { AccordionEntry } from './components/primitives/accordion/Accordion.vue';
 export { default as Icon } from './components/primitives/icon/Icon.vue';
+export { default as FileTypeIcon } from './components/primitives/icon/FileTypeIcon.vue';
+export { fileTypeIcon } from './components/primitives/icon/fileType';
 export { useIconButton } from './components/primitives/icon/useIconButton';
 export type { IconButtonOptions } from './components/primitives/icon/useIconButton';
 export { clearIconRegistry, getRegisteredIcon, registerIcons } from './components/primitives/icon/iconRegistry';
@@ -101,6 +104,10 @@ export { default as SettingsSection } from './components/composite/settings-sect
 export { default as Footbar } from './components/composite/footbar/Footbar.vue';
 export type { FootbarButton, FootbarButtonRegion, FootbarButtonSize, FootbarButtonVariant, } from './components/composite/footbar/types';
 export { default as Callout } from './components/composite/callout/Callout.vue';
+export { default as StepList } from './components/composite/step-list/StepList.vue';
+export type { StepListItem, StepStatus } from './components/composite/step-list/types';
+export { default as ConnectionTopology } from './components/composite/connection-topology/ConnectionTopology.vue';
+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 type { DataTableColumn } from './components/composite/data-table/DataTable.vue';