@synopackageland/ui 0.25.10 → 0.25.12

package/docs/adaptive-layout.md

@@ -141,6 +141,18 @@ state keys are copied through). The Android back button or the iOS edge swipe
 calls `close` for the top surface only; closing by code removes the entry.
 Pass `enabled: false` where the surface is a popover or inside a DSM window.
 
+Inside the Package Land phone app, a root page also gets Back to the App list.
+The app's bridge (`window.SynoPkgNative`, protocol 1) lists `close` in its
+`features`; AppLayout then leads the phone bar with the shared back arrow, and
+a tap posts `{ v: 1, type: 'close' }`, which the app honors only right after a
+tap. A browser, a sub-page (which has its own Back) and anything wider than a
+phone never show it. When the page hides the bar (`phone-bar-title="none"`
+without a menu), the first `PageToolbar` or `SectionTabs` row on the page holds
+the button at its start, so it costs no row; with no such row the bar is drawn
+for it. The arrow is `app-layout/back-arrow.json`, a byte copy of the phone
+app's drawing; `tests/ShellBack.test.ts` pins its SHA-256, as the phone app
+does, so change both copies together.
+
 `node scripts/check-keyboard.mjs [out-dir]` (after `pnpm build`) checks all of
 this in Chromium at 390 and 768 with touch, with Android emulated by a
 viewport resize and iOS by a stand-in visual viewport. A real-device pass on

package/docs/button-policy.md

@@ -24,7 +24,7 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
 | Form or window footer | `FormActions`, `AppActionBar`, `Footbar`, `Panel` `#fbar` | capsule | Reset `secondary`, then Apply `primary` |
 | Notification | `Notification` `confirm` / `cancel` | capsule | Cancel `secondary`, then the action `primary` |
 | Toolbar | `AppToolbar`, a row above a list | tool | `secondary`; `SplitButton` for Create and its variants |
-| Page header | `PageHeader` `#actions` | tool | one refresh `IconButton` per page |
+| Page header | `PageHeader` `#actions`, the SDK `AppShell`'s `#actions` | tool | `secondary`, only the page's own actions (Add); no refresh |
 | Tab row | `SectionTabs` `#actions` | tool | `secondary`, for the shown section (Export, Check again) |
 | Section or card | `SettingsSection` / `Card` body, `#actions`, `#footer` | tool | `secondary`; a Save / Cancel row there goes in `FormActions` |
 | Beside a field | `InputGroup` | tool | `secondary` (Open, Copy, Test) |

package/docs/layout-rules.md

@@ -19,7 +19,7 @@ These rules keep pages built from `@synopackageland/ui` consistent. The componen
 - Buttons that belong together sit in one row with an 8px gap: `FormActions` in a form, the `#footer` slot in a section or card.
 - Only the bar that closes a dialog or form draws capsule `action` buttons, without a `kind`: `FormActions`, `Footbar`, `AppActionBar`, a `Notification`'s actions, and the footers of `Dialog`, `Wizard`, `Sheet` and `Panel` (`#fbar`), with the main action last. `kind="tool"` opts one button out. A `SettingsSection` or `Card` footer, header actions and content stay `tool` buttons; put a section's Save / Cancel in `FormActions`.
 - A settings tab's Reset / Apply go in `SettingsPage`'s `#footer`: it stays at the bottom over a divider while only the sections scroll. Do not write your own sticky footer.
-- Each page has one refresh, with the page's other buttons: in the bar above the page (the SDK `AppShell`'s `#actions`), or in `PageHeader` where a page draws one. Panels expose `refresh()` for it instead of their own button.
+- A page's header actions (the SDK `AppShell`'s `#actions`, or `PageHeader` `#actions` where a page draws one) hold only the page's own actions, such as Add. There is no page-wide refresh: a page reads its data again on `ctx.reopen` and whenever it is shown, and a failed read puts Retry next to its error. The SDK `AppShell` draws no bar above the page while its `#actions` is empty.
 - A disabled primary button keeps readable text. Put the reason next to it, such as "Enter the password to confirm."
 - Danger actions sit apart from the rest: the explanation comes first, then the button, or a confirm dialog.
 - Return the promise from a `Button` or `IconButton` click handler (`@click="save"` with an `async save`): the button shows a spinner, keeps its width and ignores further clicks until the promise settles. Use the `loading` prop only for work the button did not start.

package/docs/mobile-native.md

@@ -42,7 +42,7 @@ the commit footer behave as before.
 | `--ui-radius-md` / `-lg` (and the 0.23.9 roles on them) | 4 / 6 | 12 / 14: md rounds the control, container and popover roles (fields, tool buttons, inset blocks, menus), lg the panel and nav roles |
 | `--ui-radius-dialog` / `-window` / `-sheet` | 8 / 8 / 12 | 24 |
 | Primary, danger and secondary buttons | capsule (action) or 4px (tool) | capsule; a primary's fill is accent step 10 (`#0075db`, 4.6:1 with white) |
-| Segmented control | accent pill on a framed track, equal columns | a pill in the primary button's fill (accent step 10, `#0075db`, with the accent's contrast colour, white: 4.6:1, light and dark) on a frameless mist track; 6px sides; up to three segments stay equal columns but one whose label is wider than its share grows to it, so a label is not cut (four ellipsize as before) (`check:phone-layout` checks it) |
+| Segmented control | accent pill on a framed track, equal columns | a pill in the primary button's fill (accent step 10, `#0075db`, with the accent's contrast colour, white: 4.6:1, light and dark) on a frameless mist track; 6px sides; up to four segments stay equal columns but one whose label is wider than its share grows to it, so a label is not cut; labels too wide together scroll the track sideways (`check:phone-layout` checks it) |
 | Phone bar | white with a hairline | the page's colour, no hairline, 17px bold title, round pressed tint |
 | Tab bar | full-width white row with a top rule | a floating white pill inset 16px, 8px above the bottom (`--ui-tab-bar-float`); the current tab's icon is white on a round pad in the primary's fill (accent step 10); a tab with a label and no icon takes accent step 10 on its label over the mist pad |
 | `--ui-text-muted` | 40% grey (2:1) | 80% (4.8:1 on the mist; dark 62%) |
@@ -68,6 +68,18 @@ Numeric preset rows are at least 44px tall on touch. The rich text toolbar
 counts its 44px touch buttons when deciding which tools fit; the rest move
 into the existing More menu.
 
+On a touch phone (`pointer: coarse`) the UI draws no `::-webkit-scrollbar`:
+Chromium, Android included, turns any styled webkit bar into a classic one
+that takes its width from the scroller, which left the right margin 10px
+short of the left. Scrollers keep the browser's overlay bar, and a Select or
+Combobox list a thin one. A natural-height page chain (`flex: 0 0 auto`)
+keeps the full width of a flex row such as `ListDetail` (`inline-size:
+stretch`), so a list is never shrunk to its content. A `SearchField`
+(`data-ui-search-field`), alone or in a wrapper holding only it, grows to its
+row and drops a fixed basis or `max-width`. A DataGrid group row's
+`#group-title` wraps instead of running over the row's links. A page's
+toolbar and header actions wrap within the page.
+
 `pnpm check:mobile` checks the gallery at both phone and tablet sizes. It is
 a blocking step of `gates:full`; the basic gate selection stays the same.
 Any remaining audit exceptions are bounded in
@@ -396,6 +408,12 @@ context menu for now; it becomes a phone sheet once pickers move to sheets.
 The keyboard depends on each field's type, so these are component defaults,
 not tokens.
 
+A press on a text field (an `input` that takes text, a `textarea`, editable
+content) is left to the browser's own focus. Android hides the soft keyboard
+it just raised when script focuses the field during the press, so the app
+root's focus handling focuses only buttons, links and other controls on
+pointerdown.
+
 ### Keyboard hints by type
 
 `Input` sets these from its `type`, and `SearchField` from `search`. An
@@ -752,6 +770,11 @@ change: the same slot moves.
   name too long for the screen ends in an ellipsis inside the pill.
 - Rare or destructive items belong in `headerActions` ("…" in the bar), not
   in the page actions.
+- Only actions float. While the actions hold anything else (a status badge, a
+  count, a date, a field), also content that arrives later through an App's
+  own teleport, they stay in the page's own row, which wraps, and no FAB is
+  drawn, so nothing floats over the page's rows. Put a page's status in the
+  page's meta (the SDK `PageInfo`), not in its actions.
 - `phone-actions` on `AppLayout`, and on a `PageHeader`, `AppToolbar` or
   `PushTransition` for one page: `fab` (default), `bar` (icons in the bar) or `inline` (the page's own header row).
 - `PageFab` picks the FAB explicitly: `<PageFab><Button variant="primary">…</Button></PageFab>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.25.10",
+  "version": "0.25.12",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,6 +60,67 @@
     "./themes/dsm7-embedded-reset.css": "./dist/themes/dsm7-embedded-reset.css",
     "./themes/dsm7-embedded-theme.css": "./dist/themes/dsm7-embedded-theme.css"
   },
+  "scripts": {
+    "check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
+    "dev": "vite build --watch",
+    "build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode grid && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
+    "lint": "eslint .",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:changed": "echo \"test:changed skips the tests the changes since ${SYNOPKGLAND_GATE_BASE:-origin/master} do not reach (vitest --changed); pnpm check runs them all\" && vitest run --changed ${SYNOPKGLAND_GATE_BASE:-origin/master}",
+    "story": "histoire dev",
+    "story:build": "histoire build",
+    "check:host": "node scripts/dsm-host-shots.mjs",
+    "check:switch": "node scripts/check-switch.mjs",
+    "check:tabs": "node scripts/check-tabs.mjs",
+    "check:mobile": "node scripts/check-mobile-overflow.mjs",
+    "check:ui-patch": "node scripts/check-ui-patch.mjs",
+    "check:narrow": "node scripts/check-narrow-controls.mjs",
+    "check:drawer-form": "node scripts/check-drawer-form.mjs",
+    "check:responsive": "node scripts/check-responsive.mjs",
+    "check:adaptive": "node scripts/check-adaptive.mjs",
+    "check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
+    "check:json-render": "node scripts/check-json-render.mjs",
+    "check:motion": "node scripts/check-motion.mjs",
+    "check:topology": "node scripts/check-topology.mjs",
+    "check:wizard": "node scripts/check-wizard.mjs",
+    "check:press": "node scripts/check-press.mjs",
+    "check:edges": "node scripts/check-edges.mjs",
+    "check:data-grid": "node scripts/check-data-grid.mjs",
+    "check:truncation": "node scripts/check-truncation.mjs",
+    "check:link": "node scripts/check-link.mjs",
+    "check:text-select": "node scripts/check-text-select.mjs",
+    "check:date-picker": "node scripts/check-date-picker.mjs",
+    "check:full-page": "node scripts/check-full-page.mjs",
+    "check:short-viewport": "node scripts/check-short-viewport.mjs",
+    "check:phone-layout": "node scripts/check-phone-layout.mjs",
+    "check:phone-bars": "node scripts/check-phone-bars.mjs",
+    "check:phone-fill": "node scripts/check-phone-fill.mjs",
+    "check:text-zoom": "node scripts/check-text-zoom.mjs",
+    "check:focus-restore": "node scripts/check-focus-restore.mjs",
+    "check:detail-surface": "node scripts/check-detail-surface.mjs",
+    "check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
+    "check:npm-metadata": "node scripts/check-npm-metadata.mjs",
+    "check:package": "node scripts/check-package-content.mjs",
+    "trace:restyle": "node scripts/trace-restyle.mjs",
+    "check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
+    "notices:update": "node scripts/third-party-notices.mjs --write",
+    "notices:check": "node scripts/third-party-notices.mjs --check",
+    "check": "bash scripts/docker-check.sh \"npm run gates\"",
+    "check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
+    "check:local-browser": "node scripts/app-local-browser.mjs",
+    "check:infotip": "node scripts/check-infotip.mjs",
+    "release:stage": "node scripts/stage-release.mjs",
+    "check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
+    "check:acceptance": "node scripts/check-acceptance.mjs",
+    "check:palette": "node scripts/check-palette.mjs",
+    "gates": "node scripts/gates.mjs",
+    "gates:full": "node scripts/gates.mjs --full",
+    "check:layout": "node scripts/check-layout.mjs",
+    "release:smoke": "node scripts/release-smoke.mjs",
+    "check:browser-install": "playwright install chromium webkit"
+  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -79,9 +140,44 @@
     "@tiptap/vue-3": "3.32.1",
     "zod": "^4.6.5"
   },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@histoire/plugin-vue": "1.0.0-beta.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@tanstack/vue-virtual": "3.13.39",
+    "@vitejs/plugin-vue": "6.0.9",
+    "@vue/test-utils": "2.5.1",
+    "@vueuse/core": "14.4.0",
+    "eslint": "10.11.0",
+    "eslint-plugin-vue": "10.11.1",
+    "flexsearch": "0.8.212",
+    "globals": "17.12.0",
+    "histoire": "1.0.0-beta.1",
+    "jsdom": "30.1.1",
+    "playwright": "1.58.2",
+    "reka-ui": "2.11.0",
+    "tailwindcss": "4.3.3",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.71.0",
+    "vite": "7.3.6",
+    "vite-plugin-dts": "5.1.1",
+    "vitest": "5.0.2",
+    "vscode-oniguruma": "2.0.1",
+    "vscode-textmate": "9.3.2",
+    "vue": "3.5.43",
+    "vue-eslint-parser": "10.4.1",
+    "vue-tsc": "3.3.11"
+  },
   "engines": {
     "node": ">=20"
   },
+  "packageManager": "pnpm@10.33.2",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "vue-demi"
+    ]
+  },
   "config": {
     "bundledRuntime": {
       "@tanstack/vue-virtual": "3.13.39",