@synopackageland/ui 0.20.8 → 0.20.10

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`
@@ -251,9 +286,10 @@ import {
 - `PageContent surface="auto"` puts the page straight on the content area: flush
   beside the sidebar and under the toolbar, at the DSM window's page padding,
   with no card, border or outer margin around it. The area is white, unless the
-  page holds a card (`Card`, `Surface`): then it is the page grey
-  (`--ui-bg`, the web canvas) and the cards lift off it with a 1px frame and
-  `--ui-shadow-card`, as on DSM's own card pages. A list page stays white: a
+  page holds a card (`Card`, `Surface`): then it is the card-page canvas
+  (`--ui-page-canvas`, a near-white tint) and the cards lift off it with a 1px
+  frame and `--ui-shadow-card`, as on DSM's own card pages. A web app can set
+  `--ui-app-web-canvas` to pick its own canvas. A list page stays white: a
   page with a `DataGrid` on it (not inside a card) keeps the white area when a
   `Surface` opens beside the list, such as a detail pane for the selected row;
   the pane keeps its 1px border and takes no shadow, so selecting a row never
@@ -261,7 +297,7 @@ import {
   release shares the DSM document and its stylesheet still has the earlier
   rules. Draw the pane with [`ListDetail`](list-detail.md), which is not a
   `Surface` and adds a resizable separator. `surface="card"` always stays
-  white. `surface="flat"` always takes the grey canvas, for multi-card
+  white. `surface="flat"` always takes the canvas, for multi-card
   dashboards. All three behave the same in the web, DSM-window and mobile
   presentations.
   `surface="none"` adds no page surface and removes the horizontal page gutters
@@ -350,11 +386,14 @@ Applications can adjust tokens per mode without CSS leaks into the DSM host:
 ```
 
 The web colour tokens are read with fallbacks, so a theme can also set them on
-any ancestor. Light defaults and the dark values the workbench uses:
+any ancestor. `--ui-app-web-canvas` defaults to the theme's card-page canvas
+(`--ui-page-canvas`), which is set on the theme (see
+[colour system](color-system.md)) and is the same in the web, DSM-window and
+phone presentations. Light defaults and the dark values the workbench uses:
 
 | Token | Light (default) | Dark |
 | --- | --- | --- |
-| `--ui-app-web-canvas` | `var(--ui-bg)` (`#f4f6f3`) | `var(--ui-bg)` (`#11161c`) |
+| `--ui-app-web-canvas` | `var(--ui-page-canvas)` (`#fafbf9`) | `var(--ui-bg)` (`#121513`) |
 | `--ui-app-web-surface` | `var(--ui-surface)` | `var(--ui-surface)` (`#1f2832`) |
 | `--ui-app-web-border` | `var(--ui-border)` | `#34404d` |
 | `--ui-app-web-shadow` | `var(--ui-shadow-card)` | `var(--ui-shadow-card)` |

package/docs/color-system.md

@@ -39,7 +39,8 @@ at 7:1 or more (`tests/css/palette.test.ts`).
 
 | Role | Step | DSM 7 |
 | --- | --- | --- |
-| `--ui-bg` | `#f4f6f3` | the page behind cards: a pale sage mist, light enough that cards read by their frame and shadow rather than a dark page |
+| `--ui-bg` | `#f4f6f3` | the app's page: a pale sage mist, light enough that cards read by their frame and shadow rather than a dark page |
+| `--ui-page-canvas` | `#fafbf9` | the canvas behind a page of cards: a near-white tint, a step lighter than the app page, so a card page sits beside a white one; the card's 1px frame and shadow do the separating |
 | `--ui-surface`, `--ui-surface-raised` | `gray-1` | white window, cards and panels; menus and dialogs add a shadow |
 | `--ui-surface-subtle`, `--ui-surface-inset` | `mist-a2` | faint block, 12% of `#bec8c0` |
 | `--ui-surface-hover` | `accent-a2` | list row hover, 4% blue |
@@ -121,6 +122,7 @@ The same roles, with the light page's sage carried into the greys:
 | Role | Dark | |
 | --- | --- | --- |
 | `--ui-bg` | `#121513` | the page |
+| `--ui-page-canvas` | the page | a card is the lighter layer, so a page of cards needs no extra tint |
 | `--ui-surface` | `#1b1f1c` | a card or panel |
 | `--ui-surface-raised` | `#242925` | a menu or dialog |
 | `--ui-text` | `#e3e8e4` | 13.4:1 on a card |

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.8",
+  "version": "0.20.10",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,59 +60,6 @@
     "./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"
   },
@@ -132,44 +79,9 @@
     "@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",