@synopackageland/ui 0.21.1 → 0.23.0

package/docs/button-policy.md

@@ -29,6 +29,8 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
 | 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) |
 | Row of a list or grid | `ListItem` `#actions`, an `actions` column | tool | `IconButton` with a `label` |
+| Short action inside a line of text | after the text it changes ("Source: Built-in microphone  Change ›") | text | `text`, with `chevron` when it opens another view |
+| A whole row that opens a page or picker | `DisclosureRow` | row | not a button variant: the row is the button |
 | Navigation, help, external page | `Link` | text link | not a button |
 
 ## Rules
@@ -48,18 +50,33 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
    such as Sign in in a callout; at most one per section.
 6. Keep the default size. `sm` and `lg` exist for dense rows and touch layouts;
    neighbouring buttons share one size. On a phone every size is drawn one
-   step smaller than the field beside it (md 36, sm 28, lg 44px;
+   step smaller than the field beside it (md 36, sm 28, lg 40px;
    `--ui-button-*`), with the same 44px tap box; an IconButton keeps its size.
 7. A disabled button keeps its shape and place. Say why next to it.
 8. An icon-only action is an `IconButton` with a `label`; it shows as its
    tooltip and names the button for screen readers.
-9. Labels are verbs, without a closing period: Apply, Disable this connection.
+9. Labels are verbs, without a closing period or "..." (an action that opens
+   a dialog, a sheet or a picker says so with its title, not with dots):
+   Apply, Disable this connection, Change.
 10. A label is plain text, with at most an icon before or after it:
     `<Button><Mic :size="16" />Record</Button>`. The Button counts only an `svg`
     or an element marked `data-icon` (`Icon` and `StatusDot` are) as the icon:
     it gets the 8px gap and sits on the label's centre line. Do not wrap the
     text in a `<span>`; a span is read as text, so it gets no gap of its own.
 
+11. An inline action (a short verb that changes the value it follows: Change,
+    Edit, Retry) is `variant="text"`: primary-coloured text with no border or
+    background, a pressed state (it dims while held), grey while disabled, and
+    the 44px tap box without growing the line. Add `chevron` for a trailing ›
+    when it opens another view. Use it in a sentence or beside a value, never
+    in a footer or toolbar.
+12. A row the whole of which is clickable (a setting that opens its own page
+    or picker: label, current value, ›) is a `DisclosureRow`, not a row with a
+    text button at its end. It is one button (or a link with `href`), at
+    least 44px high on a phone, with hover, pressed and focus states, and
+    Enter or Space opens it. Use a text button when only a word in a line acts;
+    use a DisclosureRow when the row is the action.
+
 ## What the components do
 
 - A Button takes its shape from the closest footer: inside `Dialog`, `Sheet`

package/docs/mobile-native.md

@@ -55,31 +55,47 @@ control and grid sizes; it does not change the 16px field rule.
 
 | Token | Desktop | Touch tablet | Phone | Used for |
 |---|---|---|---|---|
-| `--ui-font-size` | 13 | 13 | **15** | primary text: list and record titles, field values, body copy, menu items |
-| `--ui-font-size-sm` | 12 | 12 | **13** | secondary text: labels, meta, captions, helper text, badges |
+| `--ui-font-size` | 13 | 13 | **14** | primary text: list and record titles, field values, body copy, menu items |
+| `--ui-font-size-sm` | 12 | 12 | **12** | secondary text: labels, meta, captions, helper text, badges |
 | `--ui-font-size-xs` (new) | 12 | 12 | 12 | the smallest text anywhere |
-| `--ui-line-height` | 20 | 20 | **22** | body line |
-| `--ui-font-size-title` | 16 | 16 | **17** | header and dialog titles |
+| `--ui-line-height` | 20 | 20 | **20** | body line |
+| `--ui-font-size-lg` | 14 | 14 | **15** | card and section titles |
+| `--ui-font-size-title` | 16 | 16 | **16** | header and dialog titles |
 | `--ui-grid-font-size` (new) | 13 | 13 | **14** | grid cell text (not yet read by the canvas grid; see below) |
 | `--ui-font-size-field` (new) | 16 | 16 | 16 | every field on a coarse pointer, to stop iOS focus zoom |
 | `--ui-control-md` | 28 | **44** | **44** | fields, selects, form and sheet buttons |
-| `--ui-control-sm` | 24 | **32** | **36** | inline and toolbar buttons (the tap box comes from `--ui-hit-min`) |
-| `--ui-button-md` / `-sm` / `-lg` (new) | `--ui-control-*` | `--ui-control-*` | **36 / 28 / 44** | a Button and a SplitButton, one size smaller than the field beside it; the tap box stays 44. An IconButton keeps `--ui-control-*` |
+| `--ui-control-sm` | 24 | **32** | **32** | inline and toolbar buttons (the tap box comes from `--ui-hit-min`) |
+| `--ui-button-md` / `-sm` / `-lg` (new) | `--ui-control-*` | `--ui-control-*` | **36 / 28 / 40** | a Button and a SplitButton, one size smaller than the field beside it; the tap box stays 44. An IconButton keeps `--ui-control-*` |
 | `--ui-hit-min` (new) | 0 | **44** | **44** | smallest tap box |
 | `--ui-tap-gap` (new) | 0 | **8** | **8** | room between tap targets; `--ui-icon-button-gap` reads it on touch |
 | `--ui-grid-row-height` / `-header-height` | 28 | **36** | **32** | canvas grid rows (docs/ux-grid.md) |
-| `--ui-list-row-height` (new) | 32 | **44** | **48** | list rows |
-| `--ui-menu-row-height` | 32 | **44** | **48** | menu, select and sheet list rows |
-| `--ui-page-padding-x` / `-y` | 16 (narrow layout 12) | 16 | **16** | page gutter |
-| `--ui-section-gap` | 12 | 12 | **20** | space between sections |
-| `--ui-card-padding` | 20 (Card default) | 20 | **16** | card inset |
-| `--ui-chrome-height` | 44 (web 48, narrow layout 44) | – | **48** | the phone header |
+| `--ui-list-row-height` | 32 | **44** | **44** | list rows, a DisclosureRow |
+| `--ui-menu-row-height` | 32 | **44** | **44** | menu, select and sheet list rows |
+| `--ui-page-padding-x` / `-y` | 16 (narrow layout 12) | 16 | **12** | page gutter |
+| `--ui-section-gap` | 12 | 12 | **12** | space between sections |
+| `--ui-card-padding` | 20 (Card default) | 20 | **12** | card inset |
+| `--ui-chrome-height` | 44 (web 48, narrow layout 44) | – | **44** | the phone bar (plus its 1px rule) |
+| `--ui-tab-bar-height` | – | – | **48** | the tab bar's row, above `--ui-safe-bottom` |
+| `--ui-section-tab-height` | 44 | 44 | **40** | the drawn height of a phone's tabs strip (its tap box stays 44) |
+| `--ui-sticky-top-offset` | 0 | 0 | measured | what sticks at the top of a PageContent (see below) |
+| `--ui-page-end-space` | 24 | 24 | 24, the safe area while the bars are hidden on a fill page | room after a page's last row |
 | `--ui-radius-sheet` (new) | 12 | 12 | 12 | top corners of a bottom sheet |
 | `--ui-safe-top/right/bottom/left` (new) | `env(safe-area-inset-*, 0px)` | same | same | notch and home indicator; non-zero only once the viewport meta has `viewport-fit=cover` |
 | `--ui-pressed` (new) | 8% of the text colour | same | same | the pressed tint |
 
-Density comes from spacing, not smaller text: phone rows are 44–48px, and
-components add no padding beyond the tokens.
+Phone density follows native apps: 14px body text, 12px insets and gaps,
+44px rows and a 36px button (40 for `size="lg"`) inside a 44px tap box.
+Components add no padding beyond the tokens, and the containers follow them
+on a touch phone:
+
+- A Card's header is one 44px row and its body `--ui-card-padding` on every
+  side, with no extra gap under the title.
+- A `ListItem` row is 10px top and bottom; a description is 12px on a 16px
+  line, so a two-line row is 56px.
+- A surface inside a card's body (a Card in a Card, a Surface) draws no
+  frame, shadow or inset of its own: cards never nest their padding.
+- Fields stay 44px (the 16px field rule), and a desktop or DSM window keeps
+  its sizes.
 
 Phone motion tokens (all read 0ms under reduced motion or `data-ui-motion="off"`):
 
@@ -208,7 +224,7 @@ alone on its line still needs 44px.
 
 - **Hardcoded font sizes:** components that write a literal size, such as
   `text-[13px]` in Checkbox, Switch, Radio, Input and the menu rows, don't
-  pick up the 15px phone text until they read `--ui-font-size`. Their owners
+  pick up the 14px phone text until they read `--ui-font-size`. Their owners
   (later changes) switch them over. Fields are already 16px on touch.
 - **Canvas grid:** the grid draws text at fixed sizes from
   `src/grid-core/theme.ts`. Reading `--ui-grid-font-size` needs a change in
@@ -312,7 +328,7 @@ attribute of the same name on the component overrides each one.
 Use `integer` or `decimal` for numbers typed on a phone. They open the number
 keyboard and skip the native number field's spinner and value parsing.
 `type="number"` stays the native field. `Input` and `SearchField` read
-`--ui-font-size` (15px on a phone), and every field is 16px on a coarse
+`--ui-font-size` (14px on a phone), and every field is 16px on a coarse
 pointer (see Tokens and base guards). The clear button (`data-ui-hit`) and the password toggle get the
 44px tap box.
 
@@ -414,7 +430,7 @@ Where it is used:
 |---|---|---|
 | `ListDetail` | the list fills the room; the detail is pushed over it, with Back in place of Close | the split view, unchanged |
 | `SectionTabs`, five or more sections or `fill` (a settings page) | a grouped list (`group` on each item sets the blocks, 48px rows with a chevron) that pushes the tapped section; `v-model:pushed` | the strip |
-| `SectionTabs`, four or fewer sections | the scrolling underline strip on a touch phone (0.21.0); a full-width SegmentControl with equal segments in a narrow window used with a mouse, or with `phone="segment"` | the strip |
+| `SectionTabs`, four or fewer sections | the scrolling underline strip on a touch phone; a full-width SegmentControl with equal segments in a narrow window used with a mouse, or with `phone="segment"` | the strip |
 | `SectionTabs` with `phone="strip"` | the scrolling strip, for tabs inside a pushed page or a sheet | the strip |
 
 `phone` (`auto`, `list`, `segment`, `strip`) overrides the choice. A phone
@@ -450,23 +466,33 @@ Back, keyboard inset, scrim and motion. Neither has swipe code of its own.
 ## Phone shell
 
 On a phone (`AppLayout` 640px or narrower) the layout draws one bar above
-the page, `--ui-chrome-height` tall (48px on a phone, 44px in a narrow window
-driven by a mouse):
+the page, `--ui-chrome-height` tall (44px, plus a 1px rule):
 
 - **Leading:** the menu button, or a Back button when `back` is set (it
   emits `back`; the app pops its own route). While an `AppTabBar` More tab
   opens the drawer, the menu button steps aside.
 - **Title:** the `title` prop, else the title of the page's `PageHeader`
-  (the last one mounted in the layout's content column), else the brand. 17px
+  (the last one mounted in the layout's content column), else the brand. 16px
   semibold, one line, cut with an ellipsis; centred while nothing follows it,
   start-aligned beside actions. A `PageHeader` whose title moves into the bar
   keeps its heading for screen readers only, and takes no room when it has
   nothing else to show (no description, meta or actions). There is no large
   collapsing title.
 - **Actions:** first the page's own actions, then `headerActions`
-  (DropdownMenu entries). The first plain `headerActions` entry is one 44px
-  button, its icon (the label is its accessible name) or else its label; the
-  rest open from "…". A pick emits `headerAction` with the key.
+  (DropdownMenu entries). A pick emits `headerAction` with the key.
+- **One "…".** The bar never shows two overflow buttons. While the page's own
+  menu is in the bar (a `DropdownMenu` among the page actions, a sub-page's
+  "…"), the `headerActions` (an App shell's account entry too) join the end
+  of that menu after a separator; a pick of one still emits `headerAction`,
+  and the page's own entries still reach the page. Only without such a menu
+  do `headerActions` open from a "…" of their own. The same holds in a DSM
+  portal and on a sub-page.
+- **No promoted button unless asked.** A `headerActions` entry is a 44px bar
+  button of its own (its icon, its label as the accessible name, or else its
+  label) only when it is marked `primary: true`, or when it is the only entry
+  and has an icon (an App shell's account), and only while the page puts no
+  actions or menu in the bar. An App that moves its menu into `headerActions`
+  keeps every entry in "…".
 
 Every bar button is a 44px target.
 
@@ -503,18 +529,31 @@ them at the bottom of the screen). The root carries
 `data-ui-layout-scroll="page"`. A DataGrid or another page that scrolls
 itself keeps its layout.
 
-### Native phone shell (0.21.0)
+### Native phone shell
 
 A *touch phone* is an `AppLayout` 640px or narrower under a coarse pointer
 (the root carries `data-ui-phone`). A narrow DSM window driven by a mouse is
 the phone layout without these additions, and wider layouts are unchanged.
 
-**Bar.** One 48px row: Back on a sub-page, else the menu button, else the
-App's icon (`brand-icon`) on a root page; the title, start-aligned beside
-anything else; at most two trailing icons, the rest in "…". There is no brand
-row. Tabs for the page (`SectionTabs` with four or fewer sections) are the
-scrolling underline strip right under the bar; `phone="segment"` keeps the
-SegmentControl. `AppTabBar` labels are 12px under 24px icons.
+**Bar.** One thin 44px row (plus its 1px rule), like X or iOS: Back on a
+sub-page, else the menu button, else the App's 24px icon (`brand-icon`) on a
+root page; the 16px title, start-aligned beside anything else; at most two
+trailing icons, the rest in "…". There is no brand row. Tabs for the page
+(`SectionTabs` with four or fewer sections) are the scrolling underline strip
+right under the bar, drawn 40px (`--ui-section-tab-height`) with a 44px tap
+box; on a page that scrolls as one it sticks under the bar, and to the top
+of the screen while the bars are hidden. `phone="segment"` keeps the
+SegmentControl.
+
+**Tab bar.** `AppTabBar` is icon only, like X: a 48px row
+(`--ui-tab-bar-height`) plus the safe area, a 1px rule on top and no shadow.
+Each tab is the bar's height and an equal share of its width (at least 44px
+square) around a 24px icon. The current tab is the primary colour with a
+heavier stroke. The label is the tab's accessible name; it shows in a bubble
+above the tab on a long press (450ms; the tap that ends it does not switch
+tabs) and on hover after 500ms. A count or a dot sits on the icon's corner,
+and screen readers hear it after the label. A tab without an icon shows its
+label instead.
 
 **Page actions on a FAB.** By default (`AppLayout` `phone-actions="fab"`)
 the page's actions (PageHeader `#actions`, a pushed page's
@@ -538,15 +577,22 @@ change: the same slot moves.
 - Rare or destructive items belong in `headerActions` ("…" in the bar), not
   in the page actions.
 - `phone-actions` on `AppLayout`, and on a `PageHeader`, `AppToolbar` or
-  `PushTransition` for one page: `fab` (default), `bar` (icons in the bar, as
-  in 0.20.20) or `inline` (the page's own header row).
+  `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>`
   inside the page's actions. On a touch phone its content is the FAB and the
   page's other actions go to the bar; elsewhere it renders in place.
 - A page whose primary action is in a footer bar (a `SettingsPage` footer, a
   sticky `FormActions`) keeps its actions in the bar: the bottom already has a
   primary. Content gets `--ui-fab-room` (88px) of bottom padding so the last
-  row is never under the FAB.
+  row is never under the FAB; there is no room while no FAB is drawn.
+- A fill page (its content scrolls itself: `PageContent height="fill"`, or an
+  App shell that keeps the PageContent from scrolling; PageContent marks it
+  `data-ui-page-fills`) keeps that room only while the FAB is in view. While
+  the FAB is hidden on scroll or by the keyboard, the content's own scroller
+  takes the room down to the bars' edge, together with the room the hidden
+  bars give back, so no blank band is left under it. A page that scrolls as a
+  whole keeps the room at its end, so its length never changes under the
+  finger.
 - A toast sits 8px above the FAB while the FAB is shown, and back at its own
   place while the FAB is hidden on scroll or by the keyboard, and steps aside
   (fades out) while the speed dial is open; it moves with the bars (`--ui-motion-bars`, at once with reduced motion). A page without a FAB,
@@ -573,6 +619,117 @@ than the bars' room never hides them.
   footer stays at rest: it slides away only with the bars, so Reset / Apply
   never appear or vanish under the finger while the user edits.
 
+**Bottom accessory.** `AppLayout`'s `#accessory` slot is a bar across the
+bottom of the page for something the App is running (a recording bar, a mini
+player). Put the bar's content in it, with `v-if` while nothing runs (an
+empty slot draws nothing):
+
+```vue
+<AppLayout>
+  …
+  <template #accessory><RecordingBar v-if="recording" /></template>
+  <template #tabbar><AppTabBar v-model="tab" :items="tabs" /></template>
+</AppLayout>
+```
+
+- On a phone it docks right above the tab bar (the bottom-most bar without
+  one, over the home indicator's strip), with a 1px rule on top and the bar's
+  colour.
+- It stays while the bars hide on scroll: it slides down into the tab bar's
+  place, in `--ui-motion-bars`, and comes back up with it. It hides while the
+  keyboard is up on a touch phone, as the tab bar does.
+- The layout measures it (`--ui-bottom-accessory-height`, also on the App's
+  root) and lifts what must stay clear of it: the FAB sits 16px above it, a
+  toast above the FAB (or above the accessory without one), an AsidePanel's
+  phone button above it, and the page's end clears it. An App sets none of `--ui-tab-bar-height`, `--ui-fab-tab-bar` or
+  toast offsets for it.
+- Elsewhere (a DSM window, a desktop) it is the column's bottom row, sticking
+  to the bottom while the document scrolls.
+
+**Sticky rows in a padded page scroller.** An App shell that makes the
+PageContent its page's scroller and pads its top (a page without a header)
+would leave a stuck row (a group heading, a DataGrid's header row) that
+padding below the scroller's top, with the rows scrolling under it showing
+in the strip above. PageContent covers that strip
+(`[data-ui-page-scroll-cover]`, in the page header's colour; the padding is
+`--ui-page-scroll-pad`), so a stuck row reads as flush with the bar above it.
+The content starts where it did, and a `position: sticky; top: 0` row needs
+no offset of its own.
+
+**What sticks at the top: `--ui-sticky-top-offset`.** PageContent sets
+`--ui-sticky-top-offset` on its root: the height of what sticks at the top
+of its scroller (the covered padding, a sticky `PageHeader` that keeps a row
+of its own, and the phone's tabs strip). Every element in the page body gets
+it as `scroll-margin-top`, so `scrollIntoView`, a `#hash` link and focus
+land below the stuck rows. A row an App makes sticky under them uses
+`top: var(--ui-sticky-top-offset)` instead of a hardcoded 44 or 96px.
+
+**The end of a page: `--ui-page-end-space`.** The room after a page's last
+row, 24px. While the bars are hidden on a fill page (`data-ui-page-fills`)
+it is only `--ui-safe-bottom`, so the content's scroller runs to the bottom
+of the screen. An App shell that pads its page end reads it:
+`padding-bottom: var(--ui-page-end-space, var(--ui-space-6, 24px))`.
+
+**Scroll helpers.** A phone page scrolls in a different element than a
+desktop or DSM window. `nearestScroller(el)` returns the element that
+scrolls `el` (an ancestor with `overflow-y` auto, scroll or overlay that has
+room to scroll, else the document's scroller). `scrollIntoViewWithinScroller(el,
+{ block, behavior, offset })` scrolls only that element (`block`: `nearest`,
+the default, or `start`), honours `scroll-margin-top` / `-bottom` (so the
+sticky offset above applies) and moves at once under reduced motion.
+`scrollToStart(el)` is the `block: 'start'` case.
+
+```ts
+import { scrollToStart, scrollIntoViewWithinScroller } from '@synopackageland/ui'
+scrollToStart(sectionHeading)
+scrollIntoViewWithinScroller(invalidField, { offset: 8 })
+```
+
+**Rows and inline actions.** A whole clickable row (a setting that opens its
+own page or picker: label, current value, ›) is a `DisclosureRow`; a short
+action inside a line of text ("Change" after the current source) is a
+`Button variant="text"`, with `chevron` when it opens another view. See
+docs/button-policy.md.
+
+```vue
+<DisclosureRow label="Language" value="English" @click="open('language')" />
+<p>Source: Built-in microphone <Button variant="text" chevron @click="pick">Change</Button></p>
+```
+
+**Zoom, large text and tap areas.** Density never costs reach or reading:
+
+- Text sizes are the semantic tokens (`--ui-font-size`, `-sm`, `-xs`, `-lg`,
+  `-title`); components carry no literal sizes. Canvas and chart text reads
+  them too: the grid draws cells at `--ui-grid-font-size`, and an App's own
+  canvas or chart uses `readTypeScale(el)` (and `canvasFont(scale, 'small')`)
+  on the element that draws, again on a theme or layout change.
+- Rows, footers, bars and the tab bar have a minimum height, never a fixed or
+  maximum one: two lines or larger text make them taller. A short action in a
+  row (a text button) keeps its label and never shrinks; the text beside it
+  wraps instead.
+- Pinch zoom is never locked (no `maximum-scale`, no `user-scalable=no`). At
+  200% zoom (a 390px phone lays out at 195px) every page reflows: nothing
+  scrolls sideways and no text is cut.
+- The drawn size may be small; the tap area is not. Every bar button, tab,
+  text button, DisclosureRow and icon button owns a 44px square around its
+  centre (`--ui-hit-min`), and the square stops at a neighbour instead of
+  covering it. A box held inside its component's end edge
+  (`--ui-hit-end-room`, a field's reveal button) grows towards its start.
+- `pnpm check:text-zoom` checks the phone scenes at 390x844 and at 200% zoom
+  for all three: sideways overflow, cut text, and each tap square.
+
+**Bar and tab sizes are tokens.** Set once on the App's root to adjust every
+page; there is no per-platform style:
+
+| Token | Phone | Sets |
+|---|---|---|
+| `--ui-chrome-height` | 44 | the top bar's row |
+| `--ui-font-size-title` | 16 | the bar's title |
+| `--ui-tab-bar-height` | 48 | the tab bar's row, above the safe area |
+| `--ui-tab-bar-icon-size` | 24 | a tab's icon |
+| `--ui-section-tab-height` | 40 | the drawn tabs strip under the bar |
+| `--ui-hit-min` | 44 | the smallest tap area |
+
 **Footer hints.** In any footer bar (`data-ui-footer-bar`: SettingsPage,
 Dialog, Sheet, BottomSheet, Card, Panel, Wizard, AppActionBar) a hint or
 status beside the buttons ("Enter a Custom ASR API key") takes a full-width
@@ -641,7 +798,7 @@ without sizes shows the label as plain text. An endless pager shows
 unchanged.
 
 **DataGrid and DataTable.** `mobile-view="auto"` (the default) shows a list
-instead of the table. Each row is at least `--ui-list-row-height` (48px on a
+instead of the table. Each row is at least `--ui-list-row-height` (44px on a
 phone): the title column on the first line, up to two columns on the second
 with a small gap between them, and trailing columns at the end. Columns place themselves with
 `list`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.21.1",
+  "version": "0.23.0",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,6 +60,63 @@
     "./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:short-viewport": "node scripts/check-short-viewport.mjs",
+    "check:phone-layout": "node scripts/check-phone-layout.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",
+    "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"
   },
@@ -110,6 +167,13 @@
   "engines": {
     "node": ">=20"
   },
+  "packageManager": "pnpm@10.33.2",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "vue-demi"
+    ]
+  },
   "config": {
     "bundledRuntime": {
       "@tanstack/vue-virtual": "3.13.39",
@@ -117,61 +181,5 @@
       "reka-ui": "2.11.0"
     }
   },
-  "homepage": "https://www.varvis.me/docs/",
-  "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:short-viewport": "node scripts/check-short-viewport.mjs",
-    "check:phone-layout": "node scripts/check-phone-layout.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",
-    "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"
-  }
-}
+  "homepage": "https://www.varvis.me/docs/"
+}