@synopackageland/ui 0.9.6 → 0.9.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 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` 列的項目改為靠起點排列，不再置中。
+
+- 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"`。
+- A stuck `PageHeader` on a full-page (web) card page is opaque from the top edge of its scroller. When `PageContent` itself scrolled (as the SDK's `AppShell` does), the header stuck inside the page's 28px top padding and the content scrolled visibly above it; the space around the card is now a margin and the first header covers the card's top padding.
+- 全頁（web）卡片頁面中，黏住的 `PageHeader` 從捲動區頂端起就是不透明的。先前 `PageContent` 本身是捲動區時（SDK 的 `AppShell` 即是如此），頁首黏在頁面 28px 上內距之內，捲動內容會從頁首上方透出；現在卡片外的間距改為 margin，第一個頁首涵蓋卡片的上內距。
+- A narrow `ConnectionTopology` (below 600px) breaks node labels between words, never inside one: a node is at least as wide as its longest word and the links give up the room (down to 16px). At 300–360px "Cloudflare" was split into "Cloudflar / e".
+- 窄的 `ConnectionTopology`（600px 以下）節點標籤只在詞與詞之間換行，不在詞中斷開：節點至少與最長的詞同寬，由連線讓出空間（最窄 16px）。先前在 300–360px 時「Cloudflare」被斷成「Cloudflar / e」。
+- A `DataGrid` or `DataTable` wider than its box shades the side it continues on (`[data-ui-scroll-edges]`, `data-overflow-start` / `data-overflow-end`; colour `--ui-scroll-edge-shade`). In a 720px full page the last columns were cut off with no sign that the table scrolls, as macOS hides scrollbars until scrolling.
+- 比外框寬的 `DataGrid` 或 `DataTable` 會在還有內容的一側顯示陰影（`[data-ui-scroll-edges]`、`data-overflow-start`／`data-overflow-end`；顏色 `--ui-scroll-edge-shade`）。先前在 720px 全頁時最後幾欄被切掉，且 macOS 在捲動前隱藏捲軸，看不出表格可以捲動。
+- A `CardGrid` (`fit="stretch"`, `minItemWidth` in px or rem) does not leave one card alone on a row: a card may shrink to 90% of `minItemWidth` to join the row, and the columns spread evenly over the rows (3 cards → 3, 4 → 2 + 2, 5 → 3 + 2). Three 360px cards in a 1033px grid were laid out 2 + 1.
+- `CardGrid`（`fit="stretch"`，`minItemWidth` 為 px 或 rem）不會讓一張卡片獨佔一列：卡片可縮到 `minItemWidth` 的 90% 以併入同列，欄數平均分配到各列（3 張 → 3；4 張 → 2 + 2；5 張 → 3 + 2）。先前三張 360px 卡片在 1033px 寬的格線中排成 2 + 1。
+
 ## 0.9.6 (2026-10-14)
 
 Fixes from the 0.10.3 acceptance run, plus `InputGroup`, `CellText openLabel` and `Space wrap`. **Behavior change:** a floating `Dialog` keeps a 12px margin from the browser viewport and the DSM taskbar, so it can be up to 24px shorter; narrow label columns shrink to 40% of the row.

package/README.md

@@ -517,6 +517,25 @@ Use `pnpm check:fast` while developing (`SYNOPKGLAND_GATE_BASE` sets the base),
 and `pnpm check` once before a release: the full run is the release gate.
 `check` prints one line per passing task and a failing task's whole log.
 
+With `SYNOPKGLAND_DOCKER_SSH=<ssh host>`, `pnpm check`, `check:fast` and
+`check:polish` run on that host in Docker instead,
+so a busy machine cannot time out their tests; this machine only sends the
+working tree (untracked files included, `node_modules` and `dist` left out)
+and waits. `scripts/docker-check.sh` runs them there in one of the host's two
+gate slots, in the image `synopkgland-gate-frontend:<tag>` that
+`scripts/gate.Dockerfile` describes (Node.js 24.20.0, pnpm 10.33.2, Debian's
+Chromium and the Noto CJK fonts), after `pnpm install` from the shared
+`synopkgland-cache-npm` volume. `check:polish` builds first and brings its
+screenshots back to `.polish-shots`, even when it fails. Set
+`SYNOPKGLAND_DOCKER_NPM_REGISTRY` when the host cannot reach
+registry.npmjs.org (the lockfile's integrity still holds). Without
+`SYNOPKGLAND_DOCKER_SSH` every check runs here, as before.
+`check:local-browser` stays here with ego-browser: run there, with
+Playwright's Chromium (`LOCAL_BROWSER=playwright`), as
+`bash scripts/docker-check.sh --build --out .dsm-host-shots/local 'node scripts/app-local-browser.mjs'`,
+its two default-modal checks "programmatic focus in A survives with B open"
+fail, because Playwright keeps its page focused and ego-browser does not.
+
 `pnpm check:host` serves `tests/dsm-host` and screenshots each overlay scene in
 English and Traditional Chinese with headless Chrome (set `CHROME` to its path
 if it is not in `/Applications`), with and without `host-simulation.css`, a
@@ -637,6 +656,9 @@ Release；既有版號只在 dry-run 放行。npm 11 在演練也會拒絕重複
 手動 `dry_run: false` 會拒絕；正式發佈只能由推 tag 觸發。
 Linux motion 使用 `MOTION_BROWSER=playwright`，本機預設 ego-browser 保留。
 `check:local-browser` 需使用者的互動 ego-browser space，保留為本機驗收項。
+設了 `SYNOPKGLAND_DOCKER_SSH` 時，`pnpm check`、`check:fast`、`check:polish`
+改在該主機的 Docker（`synopkgland-gate-frontend` image、gate slot）跑，
+本機只送工作樹並等待；未設時照舊在本機跑。`check:local-browser` 仍在本機用 ego-browser。
 
 
 ## Form controls and compact settings (0.5.7)

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

@@ -17,7 +17,7 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
     row: Record<string, unknown>;
     value: unknown;
     column: DataTableColumn;
-}, __VLS_6: `cell-${string}`, __VLS_7: {
+}, __VLS_12: `cell-${string}`, __VLS_13: {
     row: Record<string, unknown>;
     value: unknown;
     column: DataTableColumn;
@@ -25,7 +25,7 @@ declare var __VLS_2: `cell-${string}`, __VLS_3: {
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
 } & {
-    [K in NonNullable<typeof __VLS_6>]?: (props: typeof __VLS_7) => any;
+    [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => 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/components/composite/scroll-edges/ScrollEdges.vue.d.ts

@@ -0,0 +1,18 @@
+import { StyleValue } from 'vue';
+type __VLS_Props = {
+    viewportClass?: string;
+    viewportStyle?: StyleValue;
+};
+declare var __VLS_1: {};
+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/containers/card-grid/CardGrid.vue.d.ts

@@ -3,7 +3,8 @@ type __VLS_Props = {
     minItemWidth?: string;
     gap?: string;
     /**
-     * `'stretch'` (auto-fit) grows the cards to use the whole row; `'fill'`
+     * `'stretch'` (auto-fit) grows the cards to use the whole row and, once
+     * measured, balances the rows so none holds a lone card; `'fill'`
      * (auto-fill) keeps empty tracks, so a few cards stay at column width.
      */
     fit?: 'stretch' | 'fill';

package/dist/components/containers/card-grid/cardGrid.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Columns for `count` cards in a `width`-wide grid, all in px: as many as fit
+ * at the minimum width, or one more if every card keeps 90% of it, then spread
+ * evenly over the rows it takes, so no row is left with a lone card
+ * (3 → 3, 4 → 2 + 2, 5 → 3 + 2). Unknown without a width or cards.
+ */
+export declare function cardGridColumns({ width, count, minItemWidth, gap }: {
+    width: number;
+    count: number;
+    minItemWidth: number;
+    gap: number;
+}): number | undefined;

package/dist/components/primitives/space/space.d.ts

@@ -7,4 +7,5 @@ export type JustifyContentCss = AlignItemsCss | 'space-between' | 'space-around'
 export declare function spaceGap(spacing: SpaceSpacing | number): string;
 /** A row centres its items; a column stretches them, as SVC v11 does. */
 export declare function spaceAlignItems(direction: SpaceDirection, alignItems: SpaceAlign | undefined): AlignItemsCss;
+/** Items pack at the start of the line unless asked otherwise. */
 export declare function spaceJustifyContent(justifyContent: SpaceJustify | undefined): JustifyContentCss;

package/dist/composables/scrollEdges.d.ts

@@ -0,0 +1,8 @@
+import { ShallowRef } from 'vue';
+/** Whether a horizontal scroller has more content before (`start`) or after
+ * (`end`) what it shows. Follows scrolling and size changes of the scroller
+ * and of its content. */
+export declare function useScrollEdges(viewport: Readonly<ShallowRef<HTMLElement | null>>): {
+    start: import('vue').Ref<boolean, boolean>;
+    end: import('vue').Ref<boolean, boolean>;
+};