@synopackageland/ui 0.20.7 → 0.20.9

package/docs/adaptive-layout.md

@@ -65,6 +65,41 @@ for a viewport change. `ensureDeviceViewport()` therefore fires one `resize`
 on the next frame after it changes the viewport (and after it restores it), so
 the window narrows to the phone's width.
 
+### Full-page type scale
+
+A full page reads at a web console's sizes, one step above a DSM window. The
+tokens are set on the web layout (`data-ui-layout-mode="web"`) and on an app
+root that holds one or is a `full-page` root, so dialogs teleported into the
+root follow. A DSM window keeps DSM's sizes and a phone its own scale
+([mobile-native.md](mobile-native.md)).
+
+| Token | DSM window | Full page |
+|---|---|---|
+| `--ui-font-size` (body, navigation, buttons, fields) | 13px | 14px |
+| `--ui-font-size-control` (checkbox, select, form and settings labels) | 13px | 14px |
+| `--ui-font-size-sm` (secondary text, group labels) | 12px | 13px |
+| `--ui-font-size-lg` (a main label) | 14px | 15px |
+| `--ui-font-size-tab` / `--ui-font-size-section` | 12px / 15px | 13px / 16px |
+| `--ui-font-size-h1` / `-h2` / `-h3` | 20 / 16 / 14px | 22 / 18 / 16px |
+| `--ui-grid-font-size` | 13px | 14px |
+| `--ui-control-sm` / `-md` / `-lg` | 24 / 28 / 34px | 28 / 32 / 36px |
+| `--ui-grid-row-height` / `--ui-grid-header-height` | 28px | 32px |
+| `--ui-list-row-height` | 32px | 36px |
+| `--ui-nav-row-height-default` | 42px | 36px |
+| `--ui-label-offset` (a label beside a field) | 4px | 6px |
+
+The web page header's title is `--ui-font-size-title` (16px) over a
+`--ui-font-size-sm` description. The smallest text (`--ui-font-size-xs`) stays
+12px and a dialog's title 16px. Control and grid sizes apply under a mouse
+only: a touch tablet keeps its touch sizes, and an explicit `data-ui-density`
+keeps what the app chose.
+
+A page without a `PageHeader` that starts with a `PageToolbar` starts on the
+page padding: its toolbar is a control-height row, not a 48px chrome row, so
+there is no empty band over it. Under a header, and inside a card or pane, a
+toolbar stays one chrome row. An App that adds its own top padding to an
+untitled page doubles the page padding the shell already gives it.
+
 ## Viewport, keyboard and Back on a phone
 
 A full-page `AppRoot` is the page: it is `100dvh` tall, `html` and `body`

package/docs/theme-hooks.md

@@ -32,7 +32,7 @@ here stay implementation details and can change in any release.
 | `data-ui-app` | `AppRoot`'s root and its floating hosts (portals) | present |
 | `data-ui-theme`, `data-ui-density`, `data-ui-accent` | the app root (mirrored on floating hosts) | theme name, `compact`/`comfortable`, present |
 | `data-ui-color-scheme` | the app root (AppRoot `color-scheme`, mirrored on floating hosts) or `<html>` | `dark` |
-| `data-ui-presentation` | `AppRoot` root | `mobile`, `window`, `web` |
+| `data-ui-presentation` | `AppRoot` root | `mobile` (640px or narrower), else `web` for a `full-page` root or one holding an `AppLayout` with `wide-layout="web"` from 960px, else `window` (a DSM window at any width) |
 | `data-ui-floating` | a floating host (dialog, menu, popover) | present |
 | `data-ui-layout-mode` | `AppLayout` root | `mobile`, `window`, `web` |
 | `data-ui-navigation` | `AppLayout` root, and `AppSidebar`'s `<nav>`, while the navigation is a top bar | `top` (absent for the sidebar and on a phone) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.20.7",
+  "version": "0.20.9",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,6 +60,59 @@
     "./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: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: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",
+    "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"
+  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -79,9 +132,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",