@synopackageland/ui 0.9.1 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 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`.

package/README.md

@@ -328,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
@@ -344,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
@@ -356,7 +369,8 @@ DSM-style application building blocks:
 
 - SearchField
 - SettingsRow / SettingsSection
-- Callout / EmptyState
+- Callout / EmptyState / StepList
+- ConnectionTopology
 - DataTable / DataGrid
 - TreeView
 - FilePicker
@@ -385,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
@@ -443,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
@@ -457,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/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

@@ -229,10 +229,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     draggable: boolean | DataGridDraggable;
     page: number;
     pageSize: number;
+    selectable: boolean;
     rowKey: string;
     defaultSort: DataGridSort | null;
     selectedKeys: string[];
-    selectable: boolean;
     selectOnRowClick: boolean;
     singleSelect: boolean;
     localSort: boolean;

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/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/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';
@@ -103,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';