@synopackageland/ui 0.11.5 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## 0.12.1 (2026-10-19)
+
+- Fix the development/workbench Reka patch loader reading Vite version query strings as part of a filename.
+
+- Fix: an app-local `AppRoot` with `dialog-bounds="viewport"` no longer throws `style is not iterable` where a `CSSStyleDeclaration` has no iterator (jsdom 27 and other older engines): the floating host reads the accent properties by index. Apps on jsdom 27 no longer need a jsdom upgrade to run their tests.
+- `DataGrid` and `DataTable` columns take a `type`: `text` (default), `number`, `date` or `actions`, and the JSON catalog's table column does too. The type sets the alignment the DSM way: every column left, header and cells alike, as File Station, Drive, Resource Monitor and Container Manager do; `number` and `date` cells use tabular digits; an `actions` cell lays out its buttons from the left with one gap, the first icon under the header text. `align` still overrides it, and `align: 'right'` still gives tabular digits. `TableColumnType` and `TableColumnAlign` are exported. Visible change for apps: none until a column sets `type`; an app that right-aligned numbers can switch to `type: 'number'`.
+- Fix: in an app-local `AppRoot` (`modal-scope="app"`), a mouse click on a control, such as a sidebar row, no longer draws the keyboard focus ring. The click now focuses the control without `:focus-visible`; Tab and arrow focus still show the ring. New browser check `pnpm check:sidebar-focus`.
+
+## 0.12.0 (2026-10-18)
+
+- Colours come from five 12-step scales built from DSM 7's colours (`--ui-gray-*`, `--ui-blue-*`, `--ui-green-*`, `--ui-orange-*`, `--ui-red-*`, each with translucent `-a` steps, and `--ui-accent-*`), and every semantic token is now one step of a scale ([colour system](docs/color-system.md)). No token was renamed or removed. A few values changed so every text step reads at AA on its fills: `--ui-text-secondary` 78% → 82%, `--ui-danger-text` `#a81b1b`, the soft tone fills 10% of their tone, `--ui-surface-subtle`, `--ui-control-track` and `--ui-control-divider` one step of the grey scale. `--ui-info-soft` no longer follows `--ui-primary-soft`, and `--ui-info-text` no longer follows `--ui-primary-active` overrides. `--ui-selection` is deprecated (unused; use `--ui-surface-selected`).
+- `AppRoot` takes an `accent` colour: selection, focus and main actions use twelve steps derived from it the way DSM derives its blue, a white label keeps 4.5:1, and the status tones stay DSM's. A floating dialog (`dialog-bounds="viewport"`) carries it too. Without it an app keeps DSM blue. `accentScale()` and `accentStyle()` are exported.
+- Text keeps to DSM's tiers: 12, 13 and 14px, and the new `--ui-font-size-title` (16px) for `PageHeader`, a `WizardStep` headline, the About dialog's app name and the sidebar brand (were 18 and 15px). Select and Combobox group labels, `ScheduleTable` hours, `Ghost` counts and sidebar badges go from 10–11px to 12px.
+- `--ui-hairline`: 1px, one device pixel (0.5px) from 2dppx up. Menu separators, `Separator`, `TypoDivider` and `ListItem` use it.
+- No middle-dot separators: `FilePicker` lists each file limit on its own line, a compact `ConnectionTopology` lane captions each link on its own, and a collapsed `AppSidebarUser` tooltip shows the name over the detail (`Tooltip` keeps line breaks).
+- New browser check `pnpm check:palette`: the colour roles on a Control Panel list and a settings page, in a DSM window and on a narrow screen, with DSM blue and two app accents.
+- Visible changes for apps: slightly darker secondary text and red text, softer status fills, a 16px page title. No code changes needed; an app that overrides `--ui-primary` to rebrand can switch to `accent`.
+
+### Token values and migration / Token 值與遷移
+
+No existing token was renamed or removed. These values change from 0.11.5; scale aliases resolve to the values below with the default DSM accent. / 既有 token 沒有改名或移除；以下列出相較 0.11.5 調整的值，色階別名以預設 DSM accent 的值表示。
+
+| Token | 0.11.5 | 0.12.0 |
+| --- | --- | --- |
+| `--ui-surface-subtle` | `rgba(153, 177, 204, 0.1)` | `--ui-gray-a2`: `rgba(198, 212, 224, 0.18)` |
+| `--ui-text-secondary` | `rgba(65, 75, 85, 0.78)` | `--ui-gray-a11`: `rgba(65, 75, 85, 0.82)` |
+| `--ui-neutral-soft` | `#eef2f5` | `--ui-gray-a3`: `rgba(198, 212, 224, 0.4)` |
+| `--ui-neutral-text` | `#56606a` | `--ui-gray-11`: `#636b74` |
+| `--ui-success-soft` | `#eaf5ed` | `--ui-green-a3`: `rgba(0, 158, 5, 0.1)` |
+| `--ui-warning-soft` | `#fdf2e1` | `--ui-orange-a3`: `rgba(245, 132, 20, 0.1)` |
+| `--ui-danger-soft` | `#fceced` | `--ui-red-a3`: `rgba(230, 64, 64, 0.1)` |
+| `--ui-danger-text` | `#b42f2f` | `--ui-red-11`: `#a81b1b` |
+| `--ui-control-divider` | `rgba(124, 138, 152, 0.45)` | `--ui-gray-a7`: `rgba(124, 138, 152, 0.4)` |
+| `--ui-control-track` | `#cbd3dc` | `--ui-gray-7`: `#cbd0d6` |
+| `--ui-info-soft` | `var(--ui-primary-soft)` | `--ui-blue-a3`: `rgba(5, 127, 235, 0.1)` |
+| `--ui-info-text` | `var(--ui-primary-active)` | `--ui-blue-11`: `#0062b8` |
+
+`--ui-info-soft` and `--ui-info-text` keep their default blue values but no longer inherit primary overrides. Apps that used `--ui-primary-soft` / `--ui-primary-active` to style info badges must override `--ui-info-soft` / `--ui-info-text` explicitly. For branding, prefer `<AppRoot accent="#7a5af8">` to overriding individual primary tokens: it also supplies hover, selection and focus colours; status tones remain DSM's. Replace reads of deprecated `--ui-selection` with `--ui-surface-selected`. See the [colour system migration guide](docs/color-system.md#migrating-from-011).
+
+`--ui-info-soft`／`--ui-info-text` 的預設藍色值不變，但不再繼承 primary 覆寫。原本透過 `--ui-primary-soft`／`--ui-primary-active` 調整 info badge 的 App，須明確覆寫 `--ui-info-soft`／`--ui-info-text`。品牌色建議改用 `<AppRoot accent="#7a5af8">`，一併提供 hover、選取與焦點色，狀態色仍維持 DSM 色。讀取已 deprecated 的 `--ui-selection` 請改用 `--ui-surface-selected`。詳見[色彩系統遷移說明](docs/color-system.md#migrating-from-011)。
+
+繁中摘要：色彩改由五組以 DSM 7 色彩推導的 12 階色階（gray／blue／green／orange／red，各含半透明 `-a` 階，另有 `--ui-accent-*`）提供，所有語意 token 都對應到某一階（見 [colour system](docs/color-system.md)）。沒有 token 改名或移除；為了讓文字在各底色上達 AA，少數值有調整：`--ui-text-secondary` 由 78% 改 82%、`--ui-danger-text` 改 `#a81b1b`、狀態淺底改為該色 10%、`--ui-surface-subtle`、`--ui-control-track`、`--ui-control-divider` 改為灰階的一階；`--ui-info-soft` 不再跟著 `--ui-primary-soft`、`--ui-info-text` 不再跟著 `--ui-primary-active` 的覆寫；`--ui-selection` 標為 deprecated（未使用，請改用 `--ui-surface-selected`）。`AppRoot` 新增 `accent`：選取、焦點與主要動作改用由該色推導的 12 階（推導方式同 DSM 藍，白字維持 4.5:1），狀態色維持 DSM 色；`dialog-bounds="viewport"` 的浮動對話框同樣套用；不設定則維持 DSM 藍；並匯出 `accentScale()`、`accentStyle()`。字級收斂到 DSM 層級 12／13／14px，新增 `--ui-font-size-title`（16px）給 `PageHeader`、`WizardStep` 標題、About 對話框 App 名稱與側欄品牌（原 18／15px）；Select／Combobox 群組標籤、`ScheduleTable` 時數、`Ghost` 計數與側欄 badge 由 10–11px 改 12px。新增 `--ui-hairline`（1px，2dppx 以上為 0.5px，即一個裝置像素），選單分隔線、`Separator`、`TypoDivider`、`ListItem` 使用。移除「·」分隔：`FilePicker` 每項限制各自一行、compact `ConnectionTopology` 每段連線各自標示、收合的 `AppSidebarUser` tooltip 名稱與說明分兩行（`Tooltip` 保留換行）。新增瀏覽器檢查 `pnpm check:palette`。App 程式不必改；以覆寫 `--ui-primary` 換品牌色的 App 可改用 `accent`。
+
 ## 0.11.5 (2026-10-18)
 
 - **Behavior change:** `AboutDialog` no longer defaults to Synology legal URLs. Apps must supply `tosUrl` and/or `privacyUrl`; an omitted or empty URL hides that individual link. The close action remains available. To retain legal links after upgrading, pass the application's intended URLs explicitly.
@@ -148,8 +191,8 @@
 
 ## 0.9.7 (2026-10-14)
 
-Fixes from the t-0496 re-verification on DSM. **Behavior change:** a `Space` row packs its items at the start instead of centring them.
-修正 t-0496 DSM 複驗發現的問題。**行為變更：** `Space` 列的項目改為靠起點排列，不再置中。
+Fixes from the re-verification on DSM. **Behavior change:** a `Space` row packs its items at the start instead of centring them.
+修正 DSM 複驗發現的問題。**行為變更：** `Space` 列的項目改為靠起點排列，不再置中。
 
 - A `Space` row packs its items at the start of the line (`justify-content: flex-start`); before, it centred them, and every app had to add `justify-content="start"`. Pass `justify-content="center"` for the old layout.
 - `Space` 列的項目靠行首排列（`justify-content: flex-start`）；先前預設置中，每個 App 都得加上 `justify-content="start"`。需要舊版排列時傳入 `justify-content="center"`。

package/README.md

@@ -385,12 +385,24 @@ faint grey block with no border of its own, at 12px × 16px padding.
 
 ## Theme override
 
-Components use semantic CSS tokens. Import your override stylesheet after the library stylesheet to customize branding:
+Components use semantic CSS tokens, each a step of a 12-step scale built from
+DSM 7's colours ([colour system](docs/color-system.md)). Without an override an
+app looks like DSM's own apps: DSM blue for selection, focus and main actions.
+
+An app with a colour of its own sets it on its root. The theme derives the
+hover, pressed, selected and focus colours from it, keeps a white label
+readable on it, and leaves the status tones DSM's:
+
+```vue
+<AppRoot accent="#7a5af8">
+  <App />
+</AppRoot>
+```
+
+Other tokens are overridden in a stylesheet imported after the library's:
 
 ```css
 :root {
-  --ui-primary: #0086e5;
-  --ui-primary-hover: #0077cf;
   --ui-radius-md: 6px;
   --ui-page-padding-x: 24px;
   --ui-section-gap: 16px;
@@ -400,15 +412,7 @@ 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 */
-}
-```
+tones (`--ui-success`, …).
 
 Density can be switched per application subtree:
 
@@ -533,9 +537,9 @@ phone; use `DataGrid` for anything a user searches or arranges.
 <DataGrid
   :columns="[
     { key: 'name', label: '名稱', sortable: true, flex: 2, minWidth: 200, hideable: false },
-    { key: 'size', label: '大小', sortable: true, width: 90, align: 'right' },
+    { key: 'size', label: '大小', sortable: true, width: 90, type: 'number' },
     { key: 'location', label: '存放位置', minWidth: 120 },
-    { key: 'started', label: '開始時間', sortable: true, width: 140, defaultHidden: true },
+    { key: 'started', label: '開始時間', sortable: true, width: 140, type: 'date', defaultHidden: true },
   ]"
   :rows="rows"
   :filter="filter"
@@ -550,6 +554,7 @@ phone; use `DataGrid` for anything a user searches or arranges.
 ```
 
 - **Column widths.** A column with `width` (px, or a percentage of the grid) keeps it; a column without one is flexible and shares the rest by `flex` (default 1), never below its `minWidth` (default 80px for a flexible column, 40px for a fixed one). A long text cannot widen its column, and a header never wraps. When the minimums do not fit (a phone), the grid scrolls sideways instead of squeezing.
+- **Alignment.** Give a column a `type` instead of aligning it: `text` (the default), `number` (a size, a percentage, a speed, a count, a duration), `date`, or `actions` (a row of icon buttons). As in DSM's own grids (File Station, Drive, Resource Monitor, Container Manager), every column sits left, its header with it; `number` and `date` give their digits one width so they line up down the column, and `actions` lays its buttons out from the left with one gap, the first icon under the header's text (put the `IconButton`s straight in the `#cell-<key>` slot). The selection checkbox is centred. A `—` placeholder sits where the column's values do. `align` still overrides the type. `DataTable` takes the same `type`.
 - **Long text.** A plain cell is cut to one line with an ellipsis and shows its full text on hover (`title`); `wrap: true` wraps a column instead. A `#cell-<key>` slot renders its own content: `CellText` cuts and titles it the same way. Every body cell, a slot's included, carries `data-column="<key>"`.
 - **Row height.** Rows are one height (28px, 24px compact). `CellStatus` with a running `progress` fits it (a 4px bar under the label); its `detail` adds a line, so put speed or a reason in its own column. Dates: `formatDateTime(value, { locale, style: 'compact' })` in the cell (this year: `10/17 14:32`, `Oct 17, 2:32 PM`; another year: the date with its year, `2025/3/2`, `Mar 2, 2025`) and the full `formatDateTime(value, { locale })` as its `title`; it fits a 140px column in every built-in locale.
 - **Folders and status reasons.** Show a folder in a cell with `PathDisplay display="name"`: the folder icon and the last segment of the path on one unframed line (`/volume1/downloads/` reads `downloads`), cut at its end, the whole path as its `title` and read to a screen reader ("Path: …", nine locales); the copy button still copies the whole path. The default `display="path"` is the framed full path for forms. Give `CellStatus` a `description` to explain a status (why it failed, how to resume): the label opens it in a `Tooltip` on hover or keyboard focus (it becomes a Tab stop with a focus ring) and drops its own `title`, so two tooltips never stack; without one the cell is unchanged.

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

@@ -6,6 +6,12 @@ type __VLS_Props = {
      * anywhere in the viewport. Set it only inside a DSM window.
      */
     dialogBounds?: 'app' | 'viewport';
+    /**
+     * The app's own accent (`#rrggbb` or `rgb()`), drawn on selection, focus and
+     * main actions in place of DSM blue. Leave it unset to look like DSM's own
+     * apps; set it only for a colour that belongs to the app.
+     */
+    accent?: string;
 };
 declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {

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

@@ -1,4 +1,5 @@
 import { DataGridLabels } from './labels';
+import { TableColumnAlign, TableColumnType } from './columnType';
 export type DataGridSort = {
     key: string;
     direction: 'asc' | 'desc';
@@ -28,7 +29,10 @@ export type DataGridColumn = {
     searchable?: boolean;
     /** The text the quick filter searches for a row; defaults to the cell value. */
     searchText?: (row: Record<string, unknown>) => string;
-    align?: 'left' | 'center' | 'right';
+    /** What the column holds; sets its alignment (see TableColumnType). Defaults to `text`. */
+    type?: TableColumnType;
+    /** Overrides the alignment the type sets. */
+    align?: TableColumnAlign;
     sortable?: boolean;
     /** Overrides the grid's `resizable` for this column. */
     resizable?: boolean;

package/dist/components/composite/data-grid/columnType.d.ts

@@ -0,0 +1,19 @@
+/**
+ * What a table column holds; it sets the column's alignment, so an App does
+ * not tune each column. As in DSM's own grids (File Station, Drive, Resource
+ * Monitor, Container Manager) every column sits left, numbers and dates too:
+ * `number` (a size, a percentage, a speed, a count, a duration) and `date`
+ * give their digits one width so they line up down the column; `actions`
+ * lays out its buttons in a row from the left edge, under the header's text.
+ */
+export type TableColumnType = 'text' | 'number' | 'date' | 'actions';
+export type TableColumnAlign = 'left' | 'center' | 'right';
+type TypedColumn = {
+    type?: TableColumnType;
+    align?: TableColumnAlign;
+};
+/** `align` overrides the type, for a column DSM itself aligns otherwise. */
+export declare function columnAlignClass(column: TypedColumn): "text-right" | "text-center" | "text-left";
+export declare function columnHasTabularDigits(column: TypedColumn): boolean;
+export declare const ACTIONS_CELL_CLASS = "-ml-1 flex items-center justify-start gap-1";
+export {};

package/dist/components/composite/data-table/DataTable.vue.d.ts

@@ -1,8 +1,12 @@
+import { TableColumnAlign, TableColumnType } from '../data-grid/columnType';
 export type DataTableColumn = {
     key: string;
     label: string;
     width?: string;
-    align?: 'left' | 'center' | 'right';
+    /** What the column holds; sets its alignment (see TableColumnType). Defaults to `text`. */
+    type?: TableColumnType;
+    /** Overrides the alignment the type sets. */
+    align?: TableColumnAlign;
 };
 type __VLS_Props = {
     columns: DataTableColumn[];
@@ -21,11 +25,17 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
     row: Record<string, unknown>;
     value: unknown;
     column: DataTableColumn;
+}, __VLS_16: `cell-${string}`, __VLS_17: {
+    row: Record<string, unknown>;
+    value: unknown;
+    column: DataTableColumn;
 };
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
 } & {
     [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
+} & {
+    [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     compact: boolean;

package/dist/index.d.ts

@@ -127,6 +127,7 @@ export { default as Statistic } from './components/composite/statistic/Statistic
 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';
+export type { TableColumnType, TableColumnAlign } from './components/composite/data-grid/columnType';
 export { loadGridState, saveGridState, type DataGridViewState } from './components/composite/data-grid/viewState';
 export { default as TreeView } from './components/composite/tree-view/TreeView.vue';
 export type { TreeNode, TreeViewCheckPayload, TreeViewDraggableConfig, TreeViewPosition, TreeViewReorder } from './components/composite/tree-view/TreeView.vue';
@@ -176,6 +177,8 @@ export { default as AboutDialog } from './components/composite/about-dialog/Abou
 export type { AboutCheckState, AboutVersionInfo } from './components/composite/about-dialog/types';
 export { default as AppRoot } from './components/app/app-root/AppRoot.vue';
 export { APP_ROOT_ATTRIBUTE, APP_ROOT_SELECTOR } from './lib/appRoot';
+export { accentScale, accentStyle } from './lib/accent';
+export type { AccentScale } from './lib/accent';
 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';