@zeyos/zx 4.4.0 → 5.2.0

package/docs/llms.md

@@ -2,7 +2,7 @@
 
 > Xenon is a dependency-free design system for browser applications; Zx is its product-agnostic
 > vanilla-JavaScript implementation. ES2022 modules, WAI-ARIA-accessible native controls, semantic `--zx-*` design
-> tokens (light/dark + cozy/compact), and lifecycle-safe components. Zero runtime dependencies.
+> tokens (light/dark, one token-driven geometry), and lifecycle-safe components. Zero runtime dependencies.
 > This file is the single, complete reference a coding agent needs to build UI with Zx; each
 > component below is wrapped in `<!-- doc:<name> -->` markers so tools can extract a single
 > component's section (`website/docs.html` renders them as each component's Reference tab).
@@ -49,13 +49,26 @@ const t = new Table(target, options);
 
 ## Theming
 
-Load `zx.css`, then set theme/density on any ancestor (usually `<html>`):
+Load `zx.css`, then set the theme on any ancestor (usually `<html>`):
 
 ```html
-<html data-zx-theme="dark" data-zx-density="compact">
+<html data-zx-theme="dark">
 ```
 
-Themes: `light` | `dark` | `auto` (follows OS). Density: `cozy` | `compact`.
+Themes: `light` | `dark` | `auto` (follows OS).
+
+**One geometry.** Spacing steps are multiples of one unit
+(`--zx-space-unit`, 4px: `--zx-space-1…8` = 4/8/12/16/20/24/32/40px), radius steps are fractions of
+one base (`--zx-radius`, 4px: `-sm/-md/-lg/-xl` = 2/3/4/6px; `-full` only for shapes whose roundness
+is the meaning — badges, avatars, toggles), and controls are `--zx-control-height` (30px) tall.
+To tighten or loosen an application, override those tokens on `:root` or on any region. The
+geometry and material tokens (control size, radius, spacing, blur and glass filters, durations,
+easings, the type scale) are declared on `:root` only, never on a `[data-zx-theme]` block, so an
+override on `:root` reaches nested light and dark regions alike; theme blocks carry colours only:
+
+```css
+:root { --zx-space-unit: 3.5px; --zx-control-height: 28px; }
+```
 
 **Accent presets.** A second, orthogonal attribute picks the accent ramp:
 `data-zx-preset="zx" | "zeyos" | "ocean" | "violet" | "rose" | "slate"` (`zx` is the default and
@@ -76,7 +89,7 @@ Keep the 600 stop at 4.5:1 or better against white and the 400 stop at 4.5:1 aga
 — that is what makes `--zx-color-on-accent` legible without being restated per theme.
 
 The theme studio treats those stable IDs as complete recipes: selecting a preset also changes its
-density, neutral tint, radius, control height, base text size, font stack, and material strength.
+spacing unit, neutral tint, radius, control height, base text size, font stack, and material strength.
 Its **Material** control is CSS-first (`Flat`, `Glass`, or `Deep glass`). Aurora is the independent
 ambient canvas layer; material controls how surfaces respond to that light. The shared recipe
 applies to AppIcons, ordinary controls, persistent chrome, raised cards, and every transient overlay: Dropdown, ContextMenu,
@@ -92,14 +105,26 @@ Top-layer components remain DOM children of their nearest Zx theme scope, so a t
 set on an application region continues to inherit through its menus, dialogs, tooltips, and toasts.
 
 Define a product theme by overriding **semantic** tokens under a `[data-zx-theme="name"]` selector:
-`--zx-color-bg-page/surface/raised/control/hover/selected`, `--zx-color-glass-chrome/surface`,
+`--zx-color-bg-page/surface/raised/control/muted/hover/selected`, `--zx-color-bg-current` (the
+neutral "you are here" fill of the current nav item, row, tab, or pressed toggle — never the
+accent), `--zx-color-bg-chrome` (navigation and inspector columns, one tone off the canvas),
+`--zx-color-glass-chrome/surface`,
 `--zx-color-overlay-surface/panel/backdrop/border/hover/selected/divider/scrim`,
-`--zx-overlay-surface-image/toast-image/panel-image`, `--zx-color-border(-strong/-control)`,
-`--zx-color-text(-muted/-placeholder)`, `--zx-color-accent(-hover)/on-accent`,
-`--zx-color-danger/warning/success/info(+ -bg)`, `--zx-focus-ring`, `--zx-control-height/-radius`,
-`--zx-space-*`, `--zx-radius-*`, `--zx-text-*`. Never use tier-1 palette tokens (`--zx-gray-*`,
-`--zx-green-*`) or raw color literals in application/component CSS. Prefer the least-specific
-override that works (global token → then, if needed, a component style).
+`--zx-overlay-surface-image/toast-image/panel-image`,
+`--zx-color-border(-subtle/-strong/-control)` (subtle for row and grid dividers),
+`--zx-color-text(-muted/-subtle/-placeholder)` (subtle for icons and non-essential meta),
+`--zx-color-accent(-hover/-subtle)/on-accent`, `--zx-color-accent-solid(-hover/-active)` with
+`--zx-color-on-accent-solid` (the one filled primary button per screen),
+`--zx-color-danger/warning/success/info(+ -bg)`, the categorical tone palette
+`--zx-color-tone-{blue,teal,green,amber,orange,red,pink,violet,slate}-bg/-fg` (tags, chips, icon
+tiles, avatars — neither the accent nor a status) and `-solid` (a solid identity fill, such as a
+module tile, that the white icon glyph reads on at 3:1 in both themes), the chart series
+`--zx-color-chart-1…8`,
+`--zx-focus-ring`, `--zx-control-height/-radius`, `--zx-space-*`, `--zx-radius-*`, `--zx-text-*`
+(`-3xl` for document titles), `--zx-weight-medium/-semibold`, `--zx-tracking-tight/-title`. Never
+use tier-1 palette tokens (`--zx-gray-*`, `--zx-green-*`, `--zx-emerald-*`, `--zx-tone-*`) or raw
+color literals in application/component CSS. Prefer the least-specific override that works (global
+token → then, if needed, a component style).
 
 **Print.** `zx.css` imports `styles/print.css` last. It releases sticky headers and scroll
 containers, drops fills, shadows, zebra striping and focus rings, hides overlays and navigation
@@ -108,6 +133,20 @@ URLs in prose but never inside a table cell or on a button. Status badges keep t
 because there it carries meaning beside the word. An application that pins `data-zx-theme="dark"`
 still prints the dark token set; `auto` resolves to light under `@media print` and is unaffected.
 
+**Motion.** Motion is a setting, beside the theme: put `data-zx-motion="reduced"` on `<html>` (or
+on any region) to stop movement inside it. There, every `--zx-dur-*` token is `0ms` and a base rule
+collapses CSS animations and transitions to their end state — menus still open, toasts still leave,
+a spinner stops turning. The operating system's reduced-motion preference does the same for the
+whole page. There is no value that turns motion back on: someone who asked their system for less
+motion gets less, whatever an application or region says. Apply the attribute before first paint
+(the documentation site stores it with the theme). Code that animates in script asks
+`prefersReducedMotion(element?)` — true under the system preference or inside a reduced region,
+across shadow roots — and subscribes with `watchMotion(element, (reduced) => …, {signal, immediate})`,
+which returns a disposer; Chart already does. Name motion with the curves rather than inventing
+them: `--zx-ease` for state changes, `--zx-ease-spring` (a small overshoot) for things that pop in,
+`--zx-ease-drawer` (a decisive ease-out) for panels that slide, as Sheet does; and lift an item
+being dragged with `--zx-drag-shadow`, as KanbanView's drag preview and keyboard-grabbed card do.
+
 ## Talking to ZeyOS — use `@zeyos/client`
 
 For ZeyOS business data use the **dedicated client library** `@zeyos/client`
@@ -182,18 +221,34 @@ await records.saveView({ name: 'My open invoices', setDefault: true });
   operation receives a query built by `buildListQuery`.
 - `zeyosForm(client, resource, opts)` returns
   `{form, ready, load(id), save(), getForm(), destroy()}`. `fields` is an ordered allow-list;
-  `exclude`, `labels`, `title`, `columns`, `value|id`, and `onSaved` curate behavior. `load` maps
-  stored timestamps to `Date`; `save` validates and creates/updates, maps back to Unix seconds,
-  calls `onSaved`, and shows a success toast.
+  `exclude`, `labels`, `formats`, `timeZone`, `title`, `columns`, `value|id`, and `onSaved` curate
+  behavior. `load` maps stored timestamps to `Date`; `save` validates and creates/updates, maps back
+  to Unix seconds, calls `onSaved`, and shows a success toast. Its toasts (that confirmation and a
+  failed request's report) appear in the theme scope of `scope` — default: the form's own element,
+  so a form in a scoped dialog toasts inside that scope, and the confirmation stays there when
+  `onSaved` closes and destroys the dialog; `notify: false` raises none, leaving the
+  promise's result or rejection to the caller.
 - `zeyosTable(client, resource, opts)` returns
-  `{table, load(), setSearch(), setFilters(), loadMore(), count, page, hasMore, destroy()}`. Columns
-  come from schema metadata, sorting uses `sortMode:'server'`, and page zero replaces rows while
-  later pages append them using server `limit`/`offset` and `count`.
+  `{table, load(), setSearch(), setFilters(), loadMore(), count, page, pageSize, hasMore, destroy()}`.
+  Columns come from schema metadata, sorting uses `sortMode:'server'`, and paging is zero-based with
+  `pageSize: 50` by default: page zero replaces rows while later pages append them using server
+  `limit`/`offset` and `count`; `load({page, pageSize, replace: true})` replaces at any page. A
+  one-based `Pagination` maps onto it as `load({page: detail.page - 1, pageSize: detail.pageSize,
+  replace: true})` (offset `(page - 1) * pageSize`), feeding `result.count` back through
+  `setTotal()`. A response that resolves after `destroy()` is ignored and later loads reject; page
+  must be a non-negative integer and page size a positive integer (`RangeError`), filters an object
+  (`TypeError`), and every argument is checked before any is applied, so a rejected call changes
+  nothing. Table presentation options and
+  listeners pass through — `variant`, `zebra`, `stickyHeader`, `responsive`, `growing`, `emptyText`,
+  `rowClass`, `rowKind(s)`, `columnVisibility`, `columnReorder`, `hiddenColumns`, `on<event>`;
+  `onrowclick` runs beside `onRowClick`. The binding owns `columns`, `data`, and `sortMode`, and
+  leaves out editing, `rowReorder`, and `hierarchy`, which change rows it never persists.
 - `buildZeyosViewConfig(client, resource, opts)` resolves one schema to shared `ViewField[]`, a
   complete projection, and view options. `zeyosView(client, resource, CardView|TableView|KanbanView,
   opts)` returns `{view, load(), setSearch(), setFilters(), loadMore(), count, page, hasMore,
   savedViews, ready, restoreDefault(), captureView(), saveView(), applyView(), destroy()}` with
-  paging and server sort. Title, preview, group, column, and swim-lane fields stay in the projection
+  paging and server sort. Paging is the same loader as `zeyosTable()` — same `pageSize: 50` default,
+  validation, `replace`/`pageSize` load options, and destroy guard. Title, preview, group, column, and swim-lane fields stay in the projection
   even when hidden. Without `savedViews`, the host may persist `view.getViewState()` directly.
 - `createSavedViewRegistry(transport, {userId,workspaceId,resource})` coordinates private named
   Table/Card/Kanban configurations as one versioned, atomically replaced document. Entries capture
@@ -206,7 +261,11 @@ await records.saveView({ name: 'My open invoices', setDefault: true });
   scope's `userId` is intentionally not sent to the endpoint; the server session remains authority.
 
 Field mapping is schema-driven: entity/FK → async `zxselect`; enum/list → `optionlist` or native
-`select`; indexed `date` bigint → `date`; other date/time bigints → `datetime`; money/price/numeric
+`select` with readable labels (a schema `{value, label}` as given, a stored constant in sentence
+case — `INVOICED` → "Invoiced", `PARTLYPAID` → "Partly paid"); date-only bigints (indexed `date`,
+`duedate`, `birthdate`, `datefrom`/`dateto` outside appointments and events, `datecancel`,
+`lastbilling`) → `date`; other date/time bigints and `lastmodified` → `datetime`;
+`formats: { field: 'date' }` overrides the guess; money/price/numeric
 → right-aligned `float`/number columns (amount columns use the row currency); boolean/checked →
 `toggle` and a check column; percent/progress → numeric percent; email/tel/url → typed text; arrays
 → `valuelist`; long text/JSON → `textarea`; short scalar text → `text`.
@@ -214,8 +273,15 @@ Field mapping is schema-driven: entity/FK → async `zxselect`; enum/list → `o
 ZeyOS queries always use `filters` (plural), not `filter`. Full-text input becomes `query`; sort is
 sent as signed server fields (`+field`/`-field`); projection supports aliases and dot joins; and
 search/filter/sort/pagination remain server-side. ZeyOS timestamps are integer Unix seconds, so
-forms convert them to/from `Date`. Use `dataFilterStateToFilters(state, defs)` before
-`tableBinding.setFilters(...)` when wiring a `DataFilter`.
+forms convert them to/from `Date`. A date-only field stores midnight of a calendar day in the
+instance's zone — a day, not an instant: tables show it with no time, and forms edit it as that day,
+so neither the viewer's zone nor daylight saving moves it. Pass the instance's IANA zone as
+`timeZone` (table, form, view; default: the runtime's own); `unixSecondsToCalendarDay(seconds, tz)`
+and `calendarDayToUnixSeconds(date, tz)` do the same conversion for application code. Use
+`dataFilterStateToFilters(state, defs, {timeZone})` before `tableBinding.setFilters(...)` when wiring
+a `DataFilter`: with `timeZone`, a `format: 'date'` value (`Date` or `YYYY-MM-DD`) becomes that
+day's midnight in the zone, as forms store it, while `datetime` values stay instants; without it,
+dates convert as exact instants. `FilterPanel` takes the same `timeZone` option.
 
 ### Module icons and colours
 
@@ -253,6 +319,41 @@ registerModules({ tickets: '#f04639', 'my-fork': { label: 'My Fork', icon: 'zeyo
   throw.
 - `registerModules(map)` adds forks and weblets or overrides shipped entries (a bare string sets
   the colour only). Runtime ZeyOS menu data is authoritative: feed its colours in at startup.
+
+### Module bar from the ZeyOS menu
+
+The module bar and the module-layout sidebar read the same shell state the launcher does, plus
+each module's menu and its counts:
+
+```js
+import { buildZeyosAppSidebarConfig, buildZeyosModuleBarConfig } from '/assets/zx-zeyos.esm.js';
+import { AppSidebar, ModuleBar } from '/assets/zx.esm.js';
+
+const state = {
+  modules: ['messages', 'tasks', 'billing', 'contacts', 'calendar', 'tickets'],
+  pinned: ['messages', 'tasks', 'billing', 'tickets'],     // the rest are under "All modules"
+  activeIdentifier: 'tickets',
+  active: 'tickets-mine',                                     // a menu entry, when more precise
+  canUseModule: (module) => permissions.has(module),
+  menus: { tickets: [{ id: 'tickets-mine', label: 'My tickets' }, ['tickets-all', 'All tickets', '#tickets']] },
+  badges: { messages: 7, 'tickets-mine': 3 },
+  resolveApplication: (app) => ({ href: routeFor(app) })
+};
+new AppSidebar(nav, buildZeyosAppSidebarConfig(state, { onselect: route }));
+new ModuleBar(header, buildZeyosModuleBarConfig(state, { orientation: 'horizontal', side: 'top' }));
+```
+
+- `zeyosModuleItems(state, {standardIcons})` → `ModuleItem[]`: every permitted module, fork, and
+  weblet, with its kit icon (or `renderApplicationIcon(app, normalized)`), its colour — the
+  payload's, else the registry's, so `registerModules()` reaches the bar — its menu from
+  `menus[identifier]` (objects or `[id, label, href]` arrays, sections, nesting; unsafe hrefs are
+  disabled), its badge from `badges`, `pinned` from the pinned order, and forks and weblets in
+  their own catalogue group (`labels.forks`, `labels.weblets`). A module with a menu is a panel
+  module; one without is a destination.
+- `buildZeyosModuleBarConfig(state, options)` → ModuleBar options; `buildZeyosAppSidebarConfig()`
+  → AppSidebar options in `layout: 'modules'`. Both draw the classic ZeyOS identity tiles
+  (`appearance: 'solid'`) unless told otherwise. `zeyosModuleBar(target, state, options)` creates
+  the bar directly.
 <!-- /doc -->
 
 ## Custom elements
@@ -282,19 +383,36 @@ accept.
   `aria-keyshortcuts`. The host binds the action and owns editing/modality/permission guards;
   a hint never installs a global handler. Dialog and Sheet footer descriptors accept it too.
 - **`buttonGroup([button(…), …])`** → a container that joins the buttons into one control.
+- **Appearance** — `primary` is the screen's one solid accent and reads the
+  `--zx-color-accent-solid*` roles, so in dark it keeps the deep stop with white ink rather than a
+  bright slab. A `ghost` button's icon is drawn in `--zx-color-text-subtle` until hovered. A button
+  with `aria-pressed="true"` (a Toolbar item with `active`, a view toggle) is a mode, not a pick:
+  it takes the neutral `--zx-color-bg-current` fill and the text colour, never the accent.
 <!-- /doc -->
 
 <!-- doc:badge -->
 ### Badge — `badge(options)` / `badgeGroup(badges)`
 
 Factories (not classes) returning a status pill: a small, non-interactive `<span>` carrying a
-semantic colour, used for stages, counts, tags, and record-header metadata. A badge with no label
-but a `title` is named for assistive technology through `role="img"`; everything else is plain text
-and needs no ARIA.
+semantic colour — or, with `tone`, a categorical one — used for stages, counts, tags, and
+record-header metadata. A badge with no label but a `title` is named for assistive technology
+through `role="img"`; everything else is plain text and needs no ARIA.
 
 - **Options** — `label`, `icon` (an icon name, rendered before the label), `kind:
-  'neutral'|'accent'|'success'|'warning'|'danger'|'info'`, `variant: 'soft'|'solid'|'outline'`,
-  `size: 'md'|'sm'`, `dot` (a leading status dot instead of an icon), `title`.
+  'neutral'|'accent'|'success'|'warning'|'danger'|'info'`, `tone:
+  'blue'|'teal'|'green'|'amber'|'orange'|'red'|'pink'|'violet'|'slate'|null`, `variant:
+  'soft'|'solid'|'outline'`, `size: 'md'|'sm'`, `dot` (a leading status dot instead of an icon),
+  `title`.
+- **`kind` vs `tone`** — `kind` says how something is doing (status); `tone` says what it is (a
+  project, a label, a module) and draws from the `--zx-color-tone-*` palette, which is neither the
+  accent nor the status set, so a project tagged red never reads as an error. When `tone` is set it
+  decides the colour and `kind` is ignored for it; every `variant` still applies (soft: tinted,
+  borderless; solid: filled with the tone's ink; outline). The badge carries `data-tone`. Badges
+  are medium weight and sentence case.
+- **Neutral and small** — the neutral soft fill is a wash of the text colour, not an opaque surface
+  step, so it stays visible on raised surfaces in the dark theme. `size: 'sm'` fits table cells
+  and board cards; a small badge with `dot` keeps the 12px text and a full spacing step between
+  dot and label.
 - **Methods** — none. `badge(options)` → `HTMLSpanElement`, `badgeGroup([badge(…), …])` → a wrapping
   inline row with its own spacing; you own both elements.
 - **Events** — none; a badge is not interactive.
@@ -317,8 +435,12 @@ a `MenuButton`, where choosing one activates the original control.
   `setActive(name, active?)`, `destroy()`.
 - **Events** — `action {name, item}`, emitted for descriptor-built items in addition to their own
   `onclick`, from the row and from the overflow menu alike.
-- **Keyboard** — Tab reaches the toolbar once; ArrowLeft/ArrowRight move between controls and wrap;
-  Home/End jump to the first and last control.
+- **Keyboard** — Tab reaches the toolbar once; ArrowLeft/ArrowRight move between controls and wrap,
+  in visual order under `dir="rtl"`; Home/End jump to the first and last control. A text field, select,
+  or contenteditable item keeps its own keys: Home/End and the arrows move its caret, and an arrow
+  moves on to the neighbouring control only once the caret is at that edge of the text.
+- **Pressed items** — an item with `active` renders `aria-pressed="true"` and takes the neutral
+  `--zx-color-bg-current` fill, never the accent.
 <!-- /doc -->
 
 <!-- doc:empty-state -->
@@ -413,7 +535,8 @@ shape is genuinely known. All three are factories returning elements.
 
 Two-state pressed button on a native `<button aria-pressed>`. The check indicator has a glyph in
 both states — an empty box when off, a check when on — so an unpressed or disabled button still
-reads as a two-state control.
+reads as a two-state control. Pressed, the button goes neutral (the `--zx-color-bg-current` fill,
+a stronger border, the text colour); only the check glyph, the mark, keeps the accent.
 
 - **Options** — `label: '' | [onLabel, offLabel]`, `checked: false`, `icon: true`,
   `disabled: false`.
@@ -428,6 +551,8 @@ reads as a two-state control.
 Switch (`role="switch"`, `aria-checked`).
 
 - **Options** — `checked: false`, `value: true`, `label: null`, `disabled: false`.
+- **Label** — start-aligned and wrapping like text within the available width, the track level
+  with its first line.
 - **Methods** — `get()`, `set(checked, {silent})`, `toggle()`, `getValue()` (returns
   `options.value` when on, `false` when off), `enable()`/`disable()`.
 - **Events** — `change {checked, value}`.
@@ -452,21 +577,40 @@ Zx owns ranking, focus, request cancellation, and presentation; ZeyOS owns the c
 permissions, recent-history/cache policy, and the route or command ultimately invoked.
 
 - **Constructor** — `new Launcher(null, options)` owns a top-layer dialog in the opener's nearest
-  Zx theme scope;
+  Zx theme scope — never inside another open dialog, which it stacks above in the top layer. Open,
+  it is a modal on the shared overlay stack: Esc and presses inside it reach no popup left open
+  behind it, and toasts move into it while it is open;
   `new Launcher(existingDialog, options)` enhances and later restores an existing `<dialog>`.
 - **Options** — `items`, abortable `sources: [{id, label?, minQuery?, when?, order?, load(query, {signal})}]`,
   `query`, `debounce: 250`, `minQuery: 0`, `maxResults: 100`, `placeholder`, `label`, `emptyText`,
-  `loadingText`, `shortcut: 'mod+k'|false`, visible `hints` labels (or `false`), and `scope` to
-  explicitly select an element whose nearest Zx theme scope owns the launcher.
-- **Items** — `{id, label, description?, keywords?, group?, icon?, badge?, value?, href?, target?,
-  invoke?, pinned?, disabled?, kind?, current?, when?, groupOrder?, itemOrder?}`. `icon` accepts a
-  bundled icon name, Node, or factory. Links stay native so modified and middle clicks work;
+  `loadingText`, `shortcut: 'mod+k'|false`, visible `hints` labels `{move, open, back, close}` (or
+  `false`), and `scope` to explicitly select an element whose nearest Zx theme scope owns the launcher.
+- **Items** — `{id, label, description?, keywords?, group?, icon?, badge?, hint?, shortcut?, keys?,
+  value?, href?, target?, invoke?, pinned?, disabled?, kind?, current?, when?, groupOrder?,
+  itemOrder?, items?, placeholder?, order?}`. `icon` accepts a bundled icon name, Node, or
+  factory. Links stay native so modified and middle clicks work;
   non-link commands may provide an application-owned `invoke` callback. Malformed and executable
-  URL schemes are stripped; a descriptor with no safe link or callback is disabled.
-- **Methods** — `open()`, `close()`, `toggle()`, `isOpen()`, `focus()`, `setQuery()`, `getQuery()`,
-  `setItems()`, `setCurrent()`, `setSources()`, `destroy()`.
-- **Events** — cancelable `select {item, value, source, query}`, `query {query}`, `open`, `close`,
-  and `error {source, error}`. Preventing `select` suppresses the supplied link or callback.
+  URL schemes are stripped; a descriptor with no safe link or callback is disabled. `hint` is muted
+  text at the end of the row (a current value, a project); `shortcut: ['⌘', 'K']` (or Button's
+  `{label, keys}`) draws key caps for display only, and `keys: 'Meta+K'` adds `aria-keyshortcuts`.
+- **Pages** — an item with `items` opens a page instead of being selected: an array, or a loader
+  `(query, {signal}) => items | Promise<items>` that runs when the page opens and, debounced, as
+  its query changes (the loading and empty states show meanwhile; `order: 'source'` keeps the
+  loader's order instead of ranking it). Opening a page clears the query, shows a scope chip with
+  the item's label before the input — part of the combobox's name, `Search <label>` — and adds
+  "⌫ Back" to the footer; `placeholder` sets the page's placeholder. Page rows show a chevron.
+  Backspace on an empty query, ArrowLeft on an empty query, or the chip's × goes back one page,
+  restoring the query and highlighted row beneath; Escape closes from any page, and the next
+  opening starts on the root. Pages nest. `open({page})` opens straight into a page — a local page
+  id (at any depth of array pages, the path becoming the back stack) or a page item. A polite
+  status line announces each change ("Agents, 7 results").
+- **Methods** — `open({page}?)`, `close()`, `toggle()`, `isOpen()`, `focus()`, `setQuery()`,
+  `getQuery()`, `back()`, `getPage()`, `setItems()` (the root's items), `setCurrent()`,
+  `setSources()`, `destroy()`.
+- **Events** — cancelable `select {item, value, source, query, page}`, `query {query}`,
+  `page {page, path}` (after every page change; `page` is null on the root), `open`, `close`, and
+  `error {source, error, page}` (a failing page loader reports as source `page:<id>`). Preventing
+  `select` suppresses the supplied link or callback.
 - **Ranking** — local results are case/diacritic-insensitive and deterministic: exact label,
   label prefix, word prefix, label substring, identifier substring, then acronym prefix. Pinned
   items retain an explicit order ahead of otherwise equal results. A new async query aborts and
@@ -474,13 +618,18 @@ permissions, recent-history/cache policy, and the route or command ultimately in
 - **Keyboard** — Cmd+K on macOS or Ctrl+K elsewhere opens by default; the shortcut is ignored in
   editable controls, composition, and modal contexts. Application tiles use spatial arrow-key
   movement; Up/Down may continue into record groups. Home/End, Page Up/Down, and Enter operate the
-  single listbox selection model; Escape closes and restores focus. `aria-current` marks the
-  active destination independently from the keyboard's `aria-selected` option.
+  single listbox selection model; Escape closes and restores focus. Enter, or ArrowRight with the
+  caret at the end of the query, opens a page row; Backspace or ArrowLeft on an empty query goes
+  back. `aria-current` marks the active destination independently from the keyboard's
+  `aria-selected` option.
 - **Optional ZeyOS adapter** — import `zeyosLauncher()` or `buildZeyosLauncherConfig()` from
   `@zeyos/zx/zeyos`. The adapter receives the permitted module/menu catalogue, pins, current
   identifier, recent loader or cache, abortable search, destination resolvers, and application/
   record icon renderers explicitly. It maps the complete shell payload without reading globals or
   taking over application routing.
+- **Appearance** — group labels are sentence-case captions. The application you are in
+  (`aria-current="page"`) takes the neutral `--zx-color-bg-current` fill and a semibold label; the
+  highlighted row is the lighter hover step. Neither uses the accent.
 <!-- /doc -->
 
 <!-- doc:app-icon -->
@@ -490,7 +639,9 @@ A fixed-size, product-agnostic application identity. It keeps glyph geometry sta
 sidebars, entity results, and recent-item rows while identity colour and material remain explicit
 options rather than application globals.
 
-- **Options** — `icon` (bundled name, Node, or lazy renderer), `color`, `size: 36`,
+- **Options** — `icon` (bundled name, Node, or lazy renderer), `color` (any CSS colour) or `tone`
+  (one of the nine categorical tones, drawn with its `--zx-color-tone-<tone>-solid` fill; `color`
+  wins when both are given), `size: 36`,
   `iconSize: '52%'`, `label`, `badge`, `selected: false`, `shape: 'tile'|'circle'`,
   `glass: false|'subtle'|'strong'`, and
   additional `class` names.
@@ -519,13 +670,20 @@ options rather than application globals.
 <!-- doc:avatar -->
 ### Avatar
 
-A fixed-geometry user image with deterministic initials fallback. Image loading or failure never
-changes layout, and the component is decorative by default so adjacent identity text is not
-announced twice.
-
-- **Options** — `src`, `name`, `initials`, `label`, `size: 'sm'|'md'|'lg'|<pixels>`,
-  `shape: 'circle'|'rounded'|'square'`, `status: 'online'|'away'|'busy'|'offline'|null`, and
-  `statusLabel`.
+A fixed-geometry user image with a deterministic fallback: initials on a tint from the categorical
+tone palette, picked by a stable hash of the name. Image loading or failure never changes layout,
+and the component is decorative by default so adjacent identity text is not announced twice.
+
+- **Options** — `src`, `name`, `initials`, `label`, `size: 'sm'|'md'|'lg'|<pixels>` (24 / 32 /
+  40px at the default spacing unit), `shape: 'circle'|'rounded'|'square'`, `tone:
+  'blue'|'teal'|'green'|'amber'|'orange'|'red'|'pink'|'violet'|'slate'|null`, `status:
+  'online'|'away'|'busy'|'offline'|null`, and `statusLabel`.
+- **Fallback** — no ring; the `--zx-color-tone-*-bg` fill with its `-fg` ink, initials at 0.4× the
+  size (never under 10px), weight 600, one initial below 24px. `tone: null` derives the tone with
+  `avatarTone(name)` (exported from the module): FNV-1a over the trimmed, NFC-normalised,
+  lower-cased name, mapped onto the eight chromatic tones, so a person keeps their colour on every
+  screen. `slate`, the neutral, is reserved for an avatar with no name and can be set explicitly.
+  The root carries `data-tone`. `avatarInitials(name, limit = 2)` returns the initials.
 - **Methods** — `set(values)`, `setStatus(status, label?)`, `hasImage()`, `destroy()`.
 - **Accessibility** — set `label` only when the avatar stands alone. Presence is supplementary
   status, not the account's accessible name; supply `statusLabel` when it conveys information.
@@ -563,10 +721,11 @@ A durable or transient file row composed from `EntityRef`, MIME/byte-size metada
 status, and accessible progress. It never starts a transfer, decides authorization, resolves a
 preview, or persists a file.
 
-- **Options** — `id`, `name`, `size` (bytes), `mime`, `subtitle`, `icon: 'file'`, additional
+- **Options** — `id`, `name`, `size` (bytes), `mime`, `typeLabel: null`, `subtitle`,
+  `icon: 'file'`, additional
   `metadata`, safe native `link`, `actions`, status (`ready` | `temporary` | `waiting` |
   `uploading` | `processing` | `success` | `error`), `statusLabel`, `progress` (0–100), `indeterminate`,
-  `density: 'sm'|'md'|'lg'`, `wrap`, `actionsLabel`, and `locale`.
+  `identitySize: 'sm'|'md'|'lg'`, `wrap`, `actionsLabel`, and `locale`.
 - **Methods** — `set(values)`, `setStatus(status,label?)`,
   `setProgress(percent|null,{indeterminate?})`, `getFile()`, `focus()`, and `destroy()`.
 - **Events** — cancelable `activate {id,file,href,event}` and
@@ -574,6 +733,11 @@ preview, or persists a file.
   suppresses callbacks and navigation rather than merely observing them.
 - **Progress** — determinate work exposes min/max/now and percentage text. Indeterminate work
   omits `aria-valuenow`; status changes are announced separately.
+- **Type** — the MIME type is shown as a readable type ("PDF", "CSV", "Image", "Spreadsheet"),
+  falling back to the name's extension ("EXE") when it is unfamiliar and never to the raw string;
+  `typeLabel` overrides it and `''` hides it. The default `icon: 'file'` gives way to a glyph for
+  the MIME type (`file-pdf`, `file-image`, …) when the active icon set has one — Font Awesome, or
+  a glyph added with `registerIcons()`; any other `icon` is used as given.
 <!-- /doc -->
 
 <!-- doc:file-list -->
@@ -590,6 +754,11 @@ Explicit duplicate file IDs are rejected; source order is preserved.
 - **Events** — cancelable `activate {id,index,file,href,event}` and
   `action {id,fileId,index,action,file,event}`, plus `datachange {items}` after a collection
   mutation. Returned items are defensive snapshots.
+- **Updates in place** — mutations are reconciled by file `id`: unchanged rows are left alone and a
+  changed one is updated through `FileItem.set()`, so upload progress can tick through
+  `updateItem(id, {progress})` while focus (say, on that file's Cancel action) and the scroll
+  position stay put. Removing the focused file moves focus to the file that takes its place. Files
+  without an `id` are rebuilt on every mutation.
 <!-- /doc -->
 
 <!-- doc:activity-item -->
@@ -620,13 +789,20 @@ incremental host-controlled mutation. It deliberately preserves source order ins
 whether a feed is newest- or oldest-first.
 
 - **Options** — `items`, `groupBy` (property, resolver, or null), `groupLabel`,
-  `label: 'Activity'`, `loading`, `loadingCount: 3`, `loadingText`, `emptyText`,
-  `groupHeadingLevel`, and `itemHeadingLevel`.
+  `label: 'Activity'`, `variant: 'default'|'compact'`, `loading`, `loadingCount: 3`,
+  `loadingText`, `emptyText`, `groupHeadingLevel`, and `itemHeadingLevel`.
+- **Compact** — `variant: 'compact'` (reflected as `data-variant`) keeps every entry on one line at
+  any width, for a summary card narrower than 30rem: actor and title read as one sentence that
+  wraps as text, the time keeps the trailing end instead of stacking under the title, an avatar
+  descriptor without a `size` is small, and metadata follows as a muted second line.
 - **Methods** — `setItems(items,{silent?})`, `getItems()`, `getItem(id)`,
   `appendItems(items,{silent?})`, `prependItems(items,{silent?})`,
   `updateItem(id,values,{silent?})`, `removeItem(id,{silent?})`, `setLoading()`, and `destroy()`.
 - **Events** — `datachange {items}` after mutation. Each child's cancelable `zx-action` bubbles
   naturally through the list for delegated application handling.
+- **Focus** — entries are regrouped on every mutation; focus on an entry's control returns to the
+  same control of the same activity (matched by `id`, else position), so a feed prepending live
+  entries does not drop the reader to `<body>`.
 - **Grouping** — groups keep first-seen group order and item source order. The exported pure
   `groupActivityItems()` and `normalizeActivityItems()` helpers do not mutate caller arrays.
 <!-- /doc -->
@@ -640,13 +816,59 @@ out, or mutates the session.
 
 - **Options** — `account: {name, secondary, src?, initials?, status?, statusLabel?}`, `items`,
   `compact: false`, `label`, and any top/bottom/left/right `placement`.
-- **Methods** — `open()`, `close()`, `toggle()`, `isOpen()`, `setAccount()`, `setItems()`, `focus()`,
+- **Methods** — `open()`, `close()`, `toggle()`, `isOpen()`, `setAccount()`, `setItems()`,
+  `setCompact(compact)` (the avatar alone, or with the name and secondary line — for a navigation
+  column that narrows and widens), `focus()`,
   `getPanel()`, `destroy()`.
 - **Events** — cancelable `select {value, item}`, `open`, and `close`. A canceled selection does
   not run the item's callback and leaves the menu open, so an application can reject or confirm an
   action without rebuilding the account surface.
 - **Accessibility** — compact mode is visually avatar-only but keeps the full account-menu name on
   its single native trigger; MenuButton retains focus return, typeahead, and arrow-key behavior.
+- **Appearance** — the trigger is a flat row (avatar, name, secondary line, chevron) with the hover
+  fill, not a button: it takes back the border, glass fill, blur and shadow MenuButton's `.zx-btn`
+  would give it, whatever order the stylesheets load in.
+<!-- /doc -->
+
+<!-- doc:workspace-switcher -->
+### WorkspaceSwitcher
+
+Composes `AppIcon` and `MenuButton` into the workspace switcher at the head of a navigation column:
+a trigger with the current workspace's tile, name and secondary line, opening an APG menu of the
+workspaces with the current one checked, then the application's own actions. Zx never decides
+which workspaces a user may see, loads another workspace, or changes the session — switching is a
+cancelable event the application acts on.
+
+- **Options** — `workspaces: [{id, label, secondary?, icon?, tone?, color?, src?, initials?, badge?,
+  disabled?}]` (the tile is the image, else the icon, else the initial, on the tone — derived from
+  the label when neither `tone` nor `color` is given), `active` (defaults to the first enabled
+  workspace, which also replaces an id that is not listed or is disabled), `items` (actions after
+  the workspaces; the separator between them is added for you), `compact: false`, `heading` (null
+  resolves message `workspaceSwitcher.heading`, "Workspaces"; `''` leaves it out), `label` (`%1` is
+  the active workspace's name, filled in again after every switch; null resolves
+  `workspaceSwitcher.label`, "Switch workspace: %1", or `workspaceSwitcher.labelEmpty`, "Switch
+  workspace", while no workspace is active), and any `placement` (default `bottom-start`).
+- **Messages** — `workspaceSwitcher.heading`, `workspaceSwitcher.label` (`%1` the workspace name),
+  `workspaceSwitcher.labelEmpty`; override them per instance through `msg`, or for every instance
+  through `setTranslator()`.
+- **Methods** — `getActive()`, `setActive(id, {silent = true})` (`silent: false` emits `select`
+  first), `setWorkspaces(list)` (keeps the active workspace while it is still listed and enabled,
+  else the first enabled one becomes active), `setItems()`,
+  `setCompact(compact)`, `open()`, `close()`, `toggle()`, `isOpen()`, `focus()`, `getPanel()`,
+  `destroy()`.
+- **Events** — cancelable `select {workspace, id, previous}`: a canceled switch keeps the previous
+  workspace active and the menu open. Cancelable `action {value, item}` for the extra items: a
+  canceled action does not run the item's callback. Both honour `preventDefault()` on the component
+  event and on the bubbling `zx-select` / `zx-action` DOM event alike. `open` and `close`. Choosing the current
+  workspace again only closes the menu.
+- **Semantics** — one native `<button aria-haspopup="menu" aria-expanded>` trigger, named "Switch
+  workspace: <name>" (or the custom `label`) in both states; compact mode shows the tile alone and adds the name as its
+  `title`. Workspaces are `menuitemradio` rows with `aria-checked` under a presentational heading;
+  MenuButton keeps focus return, typeahead and the arrow-key map.
+- **Appearance** — the trigger is a flat full-width row (tile, name, secondary line, chevron) with
+  the hover fill, at least a control and a space-2 tall; its tile is the module bar's tile size, so
+  as an `AppSidebar` `railHeader` it lines up with the module tiles under it. Keep it in step with a
+  modules sidebar by calling `setCompact(presentation !== 'expanded')` on `presentationchange`.
 <!-- /doc -->
 
 <!-- doc:select -->
@@ -661,8 +883,9 @@ Unifies single-select, local filtering, and async loading.
   `clearable: false`, `filter: false | 'local' | async (query)=>items`, `searchKeys`,
   `minQuery: 0`, `debounce: 200`, `listHeight: 280`, `groupKey`.
 - **Getters** — `.value`, `.selected`.
-- **Methods** — `set(id, {silent})`, `setItems()`, `setFixedItems()`, `setActions()`, `reset()`,
-  `open()`/`close()`, `enable()`/`disable()`, `focus()`.
+- **Methods** — `get()` (the same as `.value`), `set(id, {silent})`, `setItems()`,
+  `setFixedItems()`, `setActions()`, `reset()`, `open()`/`close()`, `enable()`/`disable()`,
+  `focus()`.
 - **Events** — `change {value, item}` (`item` is null on clear), preventable
   `action {id, action, query, select}`, `open`, `close`, `query {query}`, `loaded {items}`.
 - **Fixed choices** — `fixedItems` pins entries to the top of the list, separated by a rule (the
@@ -671,13 +894,33 @@ Unifies single-select, local filtering, and async loading.
   entries are narrowed locally against the same query and stay resolvable by `set()`. They survive
   `setItems()` and are shown below `minQuery`. Use them for choices with no row in the source —
   "Unassigned", "Everyone", "Private".
-- **Presets** — `Select.priority(target, opts)` renders the five-level, five-square ZeyOS priority
-  scale; `Select.status(target, opts)` supplies shape- and semantic-color-distinct workflow states
-  and accepts replacement `items`; `Select.permission(target, {groups, value})` pins Private and
+- **Presets** — `Select.priority(target, opts)` renders the five-level ZeyOS priority scale (values
+  0–4) as grey signal bars filled to the level; only the highest is coloured, a danger square with
+  "!". A "No priority" row (value null, message `priority.none`) heads the list and is the empty
+  control's placeholder; `clearable: false` removes it, as does a `required` `zxselect` field with
+  `preset: 'priority'`. `Select.status(target, opts)` supplies shape- and semantic-color-distinct workflow states
+  and accepts replacement `items` (each `{ID, name, indicator, tone, description?, shortcut?}`);
+  `Select.permission(target, {groups, value})` pins Private and
   Public above record-access groups. Its value is the tri-state ZeyOS stores (`false` private,
   `true` public, or a group ID), and `groups` takes an array or loader `(query)=>items`.
+- **Glyphs** — `statusIcon(status, {tone?, indicator?, label?})` and `priorityIcon(level, {label?})`
+  return the exact glyphs the two presets draw (`.zx-status-icon`, `.zx-priority-icon`; inside a
+  Select they also carry `.zx-select__status-indicator` / `.zx-select__priority-icon`), for list
+  rows, board columns, filter chips, and headings. Status ids: `backlog` (dotted ring), `todo`
+  (empty ring), `in-progress` (ring with a centre dot), `in-review` or `review` (half filled),
+  `ready` (a third filled), `waiting` (two thirds filled), `done` (filled, check), `canceled` or
+  `cancelled` (filled, cross), `duplicate` (ring with a slash); a `Select.status` item object is
+  accepted too, and an unknown id draws a muted empty ring. Indicators: `dotted`, `ring`,
+  `progress`, `review`, `ready`, `waiting`, `done`, `canceled`, `duplicate`; tones: `muted`,
+  `neutral`, `warning`, `info`, `accent`, `success`, `danger`. Priority levels: `null` (no
+  priority, dashes), `0` lowest … `3` high (signal bars filled to the level), `4` highest (danger
+  square with "!"). Both are decorative (`aria-hidden`) — always pair them with the status or
+  priority as text, or a tooltip on the control holding them; `label` instead makes a standalone
+  glyph `role="img"` with that name.
 - **Entity preset** — `Select.entity(target, options)` renders icon/color, label, and secondary
-  text using `iconKey`, `colorKey`, and `subtitleKey` (or `renderIcon`). `recent` pins a deduplicated
+  text using `iconKey`, `colorKey`, and `subtitleKey` (or `renderIcon`). `colorKey` takes a CSS
+  colour or a token reference (`var(--zx-color-tone-blue-fg)`); without one the glyph is a neutral
+  tile in muted ink. `recent` pins a deduplicated
   **Recent** section above ordinary/local/async results; `create: true|actionDescriptor` appends an
   application-owned command at the bottom without changing the selected ID. `recentLabel` and the
   ordinary Select options remain overridable. For schema-driven ZeyOS loading,
@@ -686,6 +929,13 @@ Unifies single-select, local filtering, and async loading.
 - **Keyboard** (APG combobox) — ArrowDown/Alt+ArrowDown open; arrows navigate and wrap; Home/End;
   Enter selects; Esc closes; Tab closes; printable characters filter (editable) or run a typeahead
   (readonly). `aria-activedescendant` tracks the active option.
+- **Appearance** — the highlighted option is a neutral step; a chosen option is a pick and keeps
+  the accent tint and its check mark. Group labels are sentence-case captions. The focus ring
+  follows keyboard focus: a click on a read-only input (no `filter`) does not draw it
+  (`data-focus-origin="pointer"` on the root until the next key). Disabled, the whole control fades
+  as a disabled Field does, and not a second time inside one.
+- **Quiet fields** — inside `[data-zx-fields="quiet"]` the value reads as text: no border, fill,
+  chevron or clear button until hover; full field chrome while focused or open.
 <!-- /doc -->
 
 <!-- doc:sort-control -->
@@ -713,7 +963,10 @@ from `Select`, with its themed popover and keyboard behavior.
 Searchable multi-check list with optional async loading.
 
 - **Options** — `items`, `valueKey: 'ID'`, `labelKey: 'name'`, `checkedKey: 'on'`, `search: true`,
-  `height: 280`, `defaultChecked: false`, `load: async ()=>items`.
+  `height: 280`, `defaultChecked: false`, `hideLabel: false` (leaves out the heading; the group
+  keeps its text as `aria-label`), `load: async ()=>items`.
+- **In a Field** — field type `checklist` draws no heading of its own: the field's label names the
+  group (`aria-labelledby`).
 - **Methods** — `setItems()`, `getValues()`, `setValues(ids)`, `checkAll()`/`uncheckAll()`,
   `search(query)`, `reload()`.
 - **Events** — `change {values}`, `loaded`.
@@ -739,6 +992,11 @@ Field type: `number`.
   set (otherwise they keep their caret meaning), Enter commits, wheel steps while focused.
 - **Also exported** — `parseNumber(raw)` (accepts `.` and `,` as the decimal separator, ignores
   grouping, returns null for junk) and `snapNumber(value, {min, max, step, precision})`.
+- **In a Field** — field type `number` fills the control column like a text input and takes the
+  field key as its `name`.
+- **Quiet fields** — inside `[data-zx-fields="quiet"]` the number reads as text: no border, no
+  fill, the value start-aligned with the quiet values around it, both steppers at the trailing end
+  and hidden (kept in the layout so nothing moves) until hover or focus; full chrome on focus.
 <!-- /doc -->
 
 <!-- doc:rating -->
@@ -770,7 +1028,9 @@ from; everything Zx adds is chrome around it. Field type: `slider`.
   `showValue: true`, `showBounds: false` (draws `min` and `max` either side of the track),
   `showInput: false` (adds a number box for entering a value precisely instead of aiming at it),
   `unit: ''`, `marks: null` (numbers, or `{value, label}` objects), `disabled: false`,
-  `readonly: false`, `size: 'md'|'sm'`, `formatValue: (value) => string`.
+  `readonly: false`, `size: 'md'|'sm'`, `formatValue: (value) => string`. Each mark sits under
+  the thumb's centre at its value; the outermost labels end flush with the track instead of
+  spilling out of the component.
 - **Methods** — `get()`, `set(value, {silent})`, `setRange(min, max, step?)`, `setLabel()`,
   `setReadonly()`, `focus()`, `enable()`/`disable()`. `value` is also a getter/setter.
 - **Events** — `input {value}` continuously while dragging, `change {value}` once the value is
@@ -805,7 +1065,8 @@ to a hidden textarea when the async Clipboard API is unavailable or denied.
   that did not happen.
 - **Accessibility** — on success the glyph becomes a tick and a visually hidden `role="status"`
   speaks the confirmation, then both revert. The icon-only form carries the `title` as its
-  accessible name.
+  accessible name. The status line is positioned inside the button, so it never adds scrollable
+  overflow to the page or to a scrolling pane.
 
 #### CopyInput
 
@@ -856,10 +1117,16 @@ Text date input with a calendar popover. `DateTimeBox(target, opts)` is a Datebo
 tokens are the date-utility ones: `%d %m %Y %H %M`.
 
 - **Options** — `value: Date | number(unix) | string`, `format: '%d.%m.%Y'`, `time: false`, `min`,
-  `max`, `placeholder`, `clearable: true`, `disabled`.
+  `max`, `placeholder`, `clearable: true` (the clear button shows while there is a value and the
+  box is enabled; without `clearable` the input keeps no room for it), `disabled`.
+- **In a Field** — field types `date`/`datetime` (and `daterange`) fill the control column like a
+  text input and give way in a narrow two-column row; standalone, the box keeps its own width.
 - **Methods** — `get(unit='date')` (`'seconds'` → unix), `set(value, {silent})` (accepts a Date;
   pass Date objects, not display strings), `open()`/`close()`, `enable()`/`disable()`, `focus()`.
 - **Events** — `change {date}`, `invalid {text}`, `open`, `close`.
+- **Quiet fields** — inside `[data-zx-fields="quiet"]` the date reads as text: no border, no fill,
+  the calendar button hidden until hover; full chrome on focus. An invalid value keeps its danger
+  border. DateRangeBox behaves the same way.
 <!-- /doc -->
 
 <!-- doc:date-range -->
@@ -877,7 +1144,7 @@ An inline two-month calendar for picking a start and an end day, plus the form-u
 
 #### DateRangeBox
 
-- **Options** — everything DateRangePicker takes, plus `format: '%d.%m.%Y'`, `separator: ' – '`, `placeholder: null` (derived from the format when null), `clearable: true`. Typed text is parsed as `"<start><separator><end>"`; a lone date reads as a one-day range and a trailing separator keeps the range half open.
+- **Options** — everything DateRangePicker takes, plus `format: '%d.%m.%Y'`, `separator: ' – '`, `placeholder: null` (derived from the format when null), `clearable: true` (no clear button while disabled, and no room kept for one without it). Typed text is parsed as `"<start><separator><end>"`; a lone date reads as a one-day range and a trailing separator keeps the range half open.
 - **Methods** — `get(unit = 'date')` (`'seconds'` returns `{start, end}` as Unix seconds), `set(range, {silent})` accepting `{start, end}` of Dates, Unix-seconds numbers, or formatted strings, `clear({silent})`, `open()`, `close()`, `enable()`, `disable()`, `focus()`, `destroy()`.
 - **Events** — `change {start, end}`, `invalid {text}` when the typed value cannot be parsed (the text stays editable and the field takes `data-state="invalid"` plus `aria-invalid`), `open`, `close`.
 <!-- /doc -->
@@ -893,6 +1160,8 @@ use `TimePicker` or `DateTimeBox`.
 - **Methods** — `get(unit)`, `set(value, unit?, {silent})`, `enable()`/`disable()`.
 - **Events** — `change {value}`, in `options.unit`.
 - **Also exported** — the pure helpers `splitTime` and `joinTime`.
+- **Quiet fields** — inside `[data-zx-fields="quiet"]` the segments (native inputs) and the sign
+  button drop their border and fill until hover or focus; the sign keeps its colour.
 <!-- /doc -->
 
 <!-- doc:message -->
@@ -908,8 +1177,27 @@ messages rather than the page, and uses the translucent glass surface tokens wit
   `Message.progress(text, {scope?})` → `{ update(pct, text?), done(), fail(text?) }`. `scope` is
   an element or selector whose nearest Zx theme scope owns that floating region; without it the
   focused opener supplies the scope.
+- **Region lifecycle** — a floating region is created on the first toast for its scope and removed
+  when its last toast closes. One whose host was emptied or left the document is replaced on the
+  next toast rather than reused, and a scope that is itself detached falls back to the focused
+  element's scope. `Message.disposeRegion(scope)` → boolean removes a scope's region at once,
+  toasts and all, for a host torn down while toasts are still showing. While a modal Dialog or
+  Sheet is open the region moves into the topmost one, so toasts and their actions stay visible
+  and clickable above it, and moves back when it closes. A press on a toast dismisses no open menu
+  or drawer.
 - **Per-message options** — `kind: 'info'`, `timeout`, `closable: true`, `maxVisible: 5` (extras
   queue, and hovering pauses dismissal).
+- **Action** — `action: { label, onclick?, kind? }` renders one small button (`.zx-btn`,
+  `data-size="sm"`, secondary unless `kind` is `primary`/`danger`/`ghost`) in a toast or an inline
+  message; activating it runs `onclick(event)` and closes the message. A message with an action
+  stays at least 8000ms (`timeout: 0` still persists). Every message holds its timer while the
+  pointer is over it or focus is inside it (WCAG 2.2.1) and resumes once neither is; the region is
+  not modal, so Tab moves between the action and the close button, and closing a message that holds
+  focus returns focus to where it came from. The live region still announces the text.
+- **Leading** — `leading: Node | component` (an Avatar, say) replaces the kind icon. It is
+  decorative; the text must name what it shows.
+- **Handle** — every `show()` (static or inline) and `info/success/warning/error()` return
+  `{ close() }`; closing twice, or a queued message, is safe.
 <!-- /doc -->
 
 <!-- doc:modal -->
@@ -919,7 +1207,9 @@ Thin overlay on the native `<dialog>` element. The surface uses the shared, read
 panel material; the backdrop uses `--zx-color-overlay-backdrop`, and focus returns to the opener on close.
 
 - **Options** — `content`, `width: 'auto'`, `closable: true`, `lightDismiss: false`,
-  `destroyOnClose: false`, `scope: null` (the opener's nearest Zx theme scope by default).
+  `destroyOnClose: false`, `scope: null` (the opener's nearest Zx theme scope by default). The
+  scope is resolved again on every `open()`; a `scope` element not yet in the document leaves the
+  dialog detached until then, rather than parking it on `<body>` outside the theme.
 - **Methods** — `open()`, `close(result?)`, `setContent()`, `isOpen()`.
 - **Events** — `open`, `close {result}`, `cancel` (Esc; preventable with `event.preventDefault()`).
 <!-- /doc -->
@@ -933,9 +1223,17 @@ Structured modal: a header with title and close button, a body, and footer butto
   `buttons: [{ label, kind, action: 'close'|'cancel'|fn(dialog), autofocus, shortcut }]`, `closable: true`.
 - **Methods** — `setTitle()`, `setContent()`, `setButtons()`,
   `addView(key, { content, buttons? })`, `showView(key)`.
-- **Statics returning Promises** — `Dialog.alert({ title, message })`,
-  `Dialog.confirm({ title, message, danger })` → boolean,
-  `Dialog.prompt({ title, message, value })` → string|null.
+- **Statics returning Promises** — `Dialog.alert({ title, message, okLabel })`,
+  `Dialog.confirm({ title, message, okLabel, cancelLabel, danger })` → boolean,
+  `Dialog.prompt({ title, message, value, placeholder, okLabel, cancelLabel })` → string|null.
+  The labels default to the translated "OK" and "Cancel"; name the action instead where you can
+  ("Delete", "Rename").
+- **Type to confirm** — `Dialog.confirm({ ..., confirmText: 'Website Redesign' })` adds an input
+  labelled "Type **Website Redesign** to confirm" (a real `<label>`; message
+  `dialog.typeToConfirm`, `'Type %1 to confirm'`). Focus starts in the input; the confirm button
+  stays disabled, and Enter does nothing, until the value matches exactly (case-sensitive, ignoring
+  surrounding spaces). Escape, the close button, and Cancel resolve `false` as before. Use it for
+  deletes that cannot be undone, with `danger: true` and an `okLabel` that names the action.
 <!-- /doc -->
 
 <!-- doc:sheet -->
@@ -968,7 +1266,16 @@ When a Dock adopts it, the Sheet becomes an opaque layout surface instead.
   the browser through `showModal()`. Floating `'trap-focus'` and `false` sheets use a manual
   Popover top layer, so they stay viewport-anchored even inside a transformed or clipped theme
   scope while the page keeps scrolling and stays interactive. Escape and outside-click are
-  re-implemented, and `'trap-focus'` adds `focusTrap()` on top. Their top-layer backdrop is
+  re-implemented through the overlay stack, and `'trap-focus'` adds `focusTrap()` on top: Esc
+  closes the sheet when focus is in it (or in a popup it opened) and no popup above it takes the
+  key first, an Esc already handled inside (`defaultPrevented`) is ignored, and a press inside a
+  menu or dropdown anchored in the sheet counts as inside the sheet. Closing the sheet closes the
+  popups it opened. Light dismiss stops at the first layer that contains the press: a press inside
+  the upper of two light-dismiss sheets (or inside any overlay above this one) closes neither the
+  lower sheet nor anything beneath it; a press outside every layer closes each one that
+  light-dismisses. A floating non-modal sheet opened from inside a modal Dialog is hosted by that
+  dialog while open, so it stays usable above it, closes when the dialog closes, and goes back to
+  its theme scope when it closes. Their top-layer backdrop is
   explicitly transparent and non-filtering; `backdrop` is meaningful only when `modal` is `true`.
   A docked Sheet remains a native non-modal dialog in its Dock's flow.
 - **Resizing and detents** — `resizable` makes the inner edge draggable between `min` and `max`.
@@ -987,12 +1294,14 @@ When a Dock adopts it, the Sheet becomes an opaque layout surface instead.
   `aria-valuenow`/`aria-valuemin`/`aria-valuemax`: arrow keys along the axis step it by 16px, Shift
   by 64px. A docked sheet hides its handle — the dock's own divider resizes it there.
 - **Custom properties** — `--zx-sheet-size` (written by `size`; the per-side default otherwise)
-  and `--zx-sheet-radius` (inner corners of a top/bottom sheet, default `--zx-radius-xl`) are
+  and `--zx-sheet-radius` (inner corners of a top/bottom sheet, default `--zx-radius-lg`) are
   internal geometry, not published styling hooks — prefer the options. `--zx-overlay-blur` is a
   tier-2 semantic token and is public: it sets the `'blur'` backdrop's radius, default `8px`.
 - **Motion** — entry and exit both animate, via `@starting-style` and
   `transition-behavior: allow-discrete` on `display`/`overlay`; without them the sheet appears and
-  disappears instantly. All of it sits inside `prefers-reduced-motion: no-preference`.
+  disappears instantly. The slide (and a docked track's collapse, and a stack's shift) runs on
+  `--zx-ease-drawer`; the fade keeps `--zx-ease`. All of it sits inside
+  `prefers-reduced-motion: no-preference`, and stops inside a `data-zx-motion="reduced"` region.
 - **Keyboard and screen readers** — identical to Dialog: the native `<dialog>` supplies the role
   and `aria-labelledby` points at the title. Escape closes when `closable`, focus moves to the
   `[autofocus]` control or the first focusable descendant on open, and returns to the opener on
@@ -1049,6 +1358,28 @@ DOM child of the anchor's nearest Zx theme scope while the browser lifts it into
   `left*` and `right*` placements, `offset: 4`,
   `matchWidth: false`, `openOn: 'click'|'manual'`, `closeOnSelect: false`, `scope: null` (the
   anchor's nearest Zx theme scope by default).
+- **Hosting** — the host is resolved again on every `open()`. A dropdown created before its anchor
+  is in the document keeps its panel detached until the first open instead of parking it on
+  `<body>`, so an anchor inserted into a `[data-zx-theme]` region or a `.zx-scope` afterwards still
+  gets its theme. Tooltip, MenuButton, and ContextMenu panels follow the same rule. While open, a
+  panel whose anchor sits in an open `<dialog>` (a modal Dialog or Sheet, a focus-trapping or
+  non-modal Sheet) is hosted by that dialog instead, so `showModal()` does not make it inert and a
+  focus trap still reaches it; it returns to the theme scope when it closes.
+- **Overlay stack** — an open panel is one entry on the shared overlay stack
+  (`src/core/overlay-stack.js`). Esc closes only the topmost layer that takes it, and an Esc that
+  something inside already handled (`defaultPrevented`) closes nothing. A press outside the panel
+  and every overlay opened from it closes it; a press on the anchor does not. Light dismiss stops
+  at the first layer that contains the press, so a press inside an overlay above the panel (one
+  not opened from it) leaves the panel open; nothing below an open modal reacts at all. A panel
+  opened from inside another overlay closes with that overlay.
+- **Keyboard** — the panel follows its trigger in the Tab order: Tab on the anchor of an open panel
+  moves to the panel's first Tab stop, or onto the panel itself when it has a `tabindex`; Tab past
+  the last stop continues with whatever follows the anchor; Shift+Tab from the first
+  stop returns to the anchor. A Tab stop is what the browser itself stops at: a `tabindex="-1"` part
+  of a composite (a Select's toggle), a roving toolbar's inactive items, disabled, hidden and inert
+  controls, and all but one radio of a group are not. A panel with no Tab stop is skipped. Esc and `close()` with
+  focus inside return focus to the anchor. Opening moves no focus — give the panel `role` and
+  `aria-*` semantics yourself if it is more than a disclosure.
 - **Methods** — `open()`, `close()`, `toggle()`, `isOpen()`, `setContent()`, `getPanel()`.
 - **Events** — `open`, `close`.
 <!-- /doc -->
@@ -1068,13 +1399,32 @@ A button that opens a `role="menu"`.
     default.
   - `role: 'menuitemcheckbox'|'menuitemradio'` with `checked` exposes an APG checked action. The
     application owns state changes and calls `setItems()` with the new model.
-- **Methods** — `setItems()`, `open()`, `close()`, `setLabel()`, `getTrigger()`, `getPanel()`,
-  `focusFirst()`, `focusLast()`.
+  - `{type: 'choice', label, value, options: [{value, label, icon|glyph}], onselect(value, entry,
+    menu)}` draws a setting chosen in place — a theme, a layout: the label, then a small segmented
+    group of `menuitemradio` options named by it. Choosing an option checks it and calls
+    `onselect`; the menu stays open so the change shows, and `select` does not fire. Left and Right
+    move within the row; Up and Down leave it, landing on another row's checked option.
+    `AccountMenu` takes the same entries; `ContextMenu`, which closes on every activation, leaves
+    them out.
+- **Methods** — `setItems()`, `open({returnFocus})`, `close()`, `toggle()` (opens when closed,
+  closes when open, moves no focus), `isOpen()`, `setLabel()`, `getTrigger()`, `getPanel()`,
+  `focusFirst({returnFocus})`, `focusLast({returnFocus})`.
 - **Events** — `select {value, item}`, `open`, `close`.
+- **Focus return** — choosing an item closes the menu and returns focus to the trigger before the
+  `select` event and the item's `onselect` run, so a dialog they open returns to the trigger when
+  it closes, and focus they move themselves stays where they put it. Escape returns focus the same
+  way. `returnFocus` sets the destination for one opening: `true` (default) is the trigger, an
+  element is that element — the list row a keyboard shortcut opened the menu from — and `false`
+  leaves focus alone.
 - **Cancellation** — `select` is cancelable. Preventing it skips the item's `onselect` callback and
-  leaves the menu open, which is the composition seam used by `AccountMenu` and rail flyouts.
+  leaves the menu open with focus back on the item, which is the composition seam used by
+  `AccountMenu` and rail flyouts.
 - **Keyboard** — ArrowDown/Enter/Space open and focus the first item; ArrowUp opens and focuses the
-  last; arrows cycle; Home/End; typeahead; Enter/Space select; Esc/Tab close.
+  last; arrows cycle; Home/End; typeahead; Enter/Space select; Esc/Tab close. Esc reaches the menu
+  through the overlay stack, so inside a Sheet or Dialog it closes the menu and leaves the sheet
+  open; a menu opened inside a modal Dialog is hosted by it and stays usable.
+- **Appearance** — the highlighted item is a neutral step, a checked item keeps its accent check
+  mark, and section headings are sentence-case captions. ContextMenu shares the same rules.
 <!-- /doc -->
 
 <!-- doc:context-menu -->
@@ -1120,7 +1470,7 @@ A description bubble anchored to another element. The panel is a manual popover
   at all and leaves everything to the methods), `disabled` (false).
 - **Methods** — `show()`, `hide()`, `toggle()`, `isOpen()`, `setContent(content)`, `enable()`, `disable()`, `isDisabled()`, `getAnchor()`, `destroy()`. Convenience factories: `tooltip(anchor, contentOrOptions)` takes either a content value or a full option object, and `describe(anchor, text)` is the one-liner replacement for a `title` attribute. Both return the instance.
 - **Events** — `open`, `close`. Both fire only on a real transition, so a `show()` on an open tooltip is silent.
-- **Keyboard** — Focusing the anchor opens the tooltip at once; moving focus away closes it. `Escape` closes it without moving focus, satisfying WCAG 1.4.13. A `pointerdown` anywhere closes it, and focus that arrives with a click does not re-open it.
+- **Keyboard** — Focusing the anchor opens the tooltip at once; moving focus away closes it. `Escape` closes it without moving focus (WCAG 1.4.13 "dismissible") — and only it, when it is the topmost open overlay, so one press never closes a tooltip and the menu beneath it. A `pointerdown` anywhere closes it, and focus that arrives with a click does not re-open it. A closed tooltip listens to nothing outside its anchor; an open one is an entry on the shared overlay stack.
 <!-- /doc -->
 
 <!-- doc:split-view -->
@@ -1150,19 +1500,72 @@ Sortable, selectable, sticky-header data table. `fr` widths fill the container w
 widths scroll horizontally, and multi-select adds a tri-state header checkbox plus Shift+click
 range select.
 
-- **Options** — `columns: [{ id, label, sortable?, width ('120px'|'2fr'|'auto'), align,
+- **Options** — `columns: [{ id, label, ariaLabel?, sortable?, width ('120px'|'2fr'|'auto'), align,
   type?: 'text'|'number'|'currency'|'percent'|'unit', locale?, decimals?, currency?, unit?,
   render?: (row,i)=>Node|string, sortValue?, headerTitle? }]`, `data`, `rowId: 'ID'`,
   `sort: { id, dir }`, `sortMode: 'local'|'server'`, `selectable: false|'single'|'multi'`,
-  `stickyHeader: true`, `height`, `emptyText`, `rowClass`, `zebra: true`, and
-  `hierarchy: false|{parentId, column?, expanded?}`. Locale, currency, unit, and decimals may be
-  row callbacks; values remain numbers in row data while display formatting is locale-aware.
+  `stickyHeader: true`, `height`, `emptyText`, `rowClass`, `zebra: true`, `variant:
+  'default'|'plain'`, `hierarchy: false|{parentId, column?, expanded?}`, `interactive: false`,
+  and `label`/`labelledBy`. Locale, currency, unit, and decimals may be row callbacks; values
+  remain numbers in row data while display formatting is locale-aware.
+- **Appearance** — the header sits on the table's surface (no band) in the muted text colour at a
+  medium weight, sentence case; the sorted column's label takes the text colour beside its arrow.
+  Rows are divided by `--zx-color-border-subtle`, the header by the ordinary border, and every cell
+  uses tabular figures. Checked rows of a multi-selection keep the accent tint (`--zx-color-bg-selected`);
+  the selected row of a `selectable: 'single'` table is the current record of a master–detail list
+  and takes the neutral `--zx-color-bg-current` fill. Sortable and plain headers set the same type,
+  and the scroll region reserves no scrollbar gutter until the table actually scrolls.
+- **Columns in the DOM** — every header and body cell carries `data-column="<id>"` in every mode,
+  read-only included, so a table can be styled per column. A column with `label: ''` (icons,
+  actions) keeps a blank header named by `ariaLabel`, or by its id; `ariaLabel` also names the
+  column in the chooser and its cell editors.
+- **`variant: 'plain'`** — for a table inside a card or panel that already draws the box: no outer
+  frame, no header band, no zebra, hairline row dividers. Reflected as `data-variant="plain"` on the
+  root; TableView passes it through `table: { variant: 'plain' }`.
 - **Methods** — `setData()`, `addData()`, `updateRow(id,row)`, `removeRow(id)`, `getRow(id)`,
   `getData()`, `empty()`, `setSort(id,dir)`, `getSort()`, `clearSort()`, `getSelection()`, `setSelection(ids)`,
   `clearSelection()`, `setLoading(bool)` (busy/skeleton state — dims rows, shows an indeterminate
   top bar, sets `aria-busy`, and is cleared by the next `setData`).
 - **Events** — `rowclick {row, id, index, event}`, `rowdblclick`, `sort {id, dir}`,
   `selectionchange {rows, ids}`, `datachange {rows}`, and `rowtoggle {row, id, expanded}`.
+  `rowclick` fires for Enter on a focused row as well as for a click; `event` is then the keydown.
+- **Keyboard** — an *interactive* table implements the WAI-ARIA APG **Grid** pattern
+  (`role="grid"`, with `aria-multiselectable` for `selectable: 'multi'`), or the **Treegrid**
+  pattern with `hierarchy`. A table is interactive when it is `selectable`, has `editMode` or
+  `hierarchy`, sets `interactive: true`, or has a `rowclick`/`rowdblclick` listener attached through
+  `on()` or an `onrowclick`/`onrowdblclick` option (attaching one later turns the grid on). A host
+  that listens only for the bubbling `zx-rowclick` DOM event passes `interactive: true`. TableView
+  always bridges `rowclick` to `recordclick`, so its table is always a grid. Any other table keeps
+  plain `<table>` semantics, no grid role, no name unless `label` is given, and no row Tab stop.
+  In a grid the rows are one Tab stop with a roving `tabindex`; the row checkboxes and disclosure
+  buttons leave the Tab order because the row keys cover them (links and buttons a host renders
+  in cells keep theirs). Focus is on rows by default and on cells when `editMode` is set —
+  reflected as `data-focus="row"|"cell"` on the root. ArrowUp/ArrowDown move a row,
+  ArrowLeft/ArrowRight a cell (cell focus), Home/End go to the first/last row (cell focus:
+  first/last cell of the row) and Ctrl+Home/End to the first/last row's corner cell,
+  PageUp/PageDown move by the rows visible in the scroll region (10 when the table does not scroll
+  itself). Enter activates exactly like a click (`rowclick`; selects in `single`), Enter/F2 on an
+  editable cell opens its editor, Space toggles the row's selection when `selectable` (activates
+  otherwise), Shift+ArrowUp/Down extends a `multi` selection from its anchor, and Ctrl/Cmd+A
+  selects the rows in the DOM — like the header checkbox, not the rows `growing` holds back nor the
+  children of collapsed branches. A sort, new data, or a change in expansion starts the anchor
+  over. Treegrid: ArrowRight expands a collapsed row, then moves into its first child; ArrowLeft
+  collapses an expanded row, then moves to its parent. With cell focus, ArrowLeft from the first
+  cell lands on the row and ArrowRight from the row goes back to its first cell. The focused row
+  (and column) is kept by id across `setData`, sorting, expansion, growing, and `updateRow`; when
+  a collapsed ancestor hides it, the ancestor takes focus, and when it is gone, its neighbour does.
+  Focus is only restored when the body had it, and without scrolling, so a polling refresh never
+  pulls the page back to the table. An emptied table keeps focus on its frame until rows return.
+  Column headers keep their sort buttons in the Tab order rather than joining arrow navigation —
+  the one deliberate departure from the APG grid, which puts the header row inside it. Rows and
+  cells show an inset `--zx-focus-ring` with a transparent outline that forced colours paint.
+- **Naming** — `label` or `labelledBy` (an element id) names the table; a grid without either is
+  named by the `table.label` message (English "Table"), so pass a real name. Row controls are named
+  after the row's first cell with text through `table.selectRow` (`Select %1`), `table.expandRow`,
+  `table.collapseRow`, and `table.moveRow`; `table.row` (`row %1`) stands in for a row without
+  text, and `table.selectAll` names the header checkbox. Sort buttons and selection checkboxes are
+  at least 24×24 px targets; the checkbox is drawn so the glyph stays `--zx-space-4` while a
+  transparent border makes up the target.
 - **Hierarchy** — flat parent references are projected as an ARIA `treegrid`; `getData()` and all
   editing/mutation APIs stay flat and ID-based. Orphans become roots, cycles render once, local
   sort reorders siblings without mixing levels, and growing counts visible rows. Use
@@ -1174,6 +1577,8 @@ range select.
   `'cell'` edits one cell, `'row'` opens every editable cell of the row and commits them as a unit.
   Editors are sized into the cell without changing row height, and an editing cell carries
   `data-editing="true"` (`data-invalid="true"` plus an `aria-live` message when a validator rejects).
+  Text, number, and date editors select their content on entry, so typing replaces the value
+  ("6" over "1.00" gives 6); a textarea keeps its caret.
 - **Editable columns** — extra column keys: `editable: false|true|'text'|'number'|'select'|'date'|
   'checkbox'|'textarea'|((row)=>boolean)` (`true` infers `'number'` for number/currency/percent/unit
   columns and `'text'` otherwise; a function is evaluated per row, so individual rows stay
@@ -1252,7 +1657,16 @@ range select.
 `{label, target}` object names the chooser's trigger and mounts the disclosure into a host
 element — a list toolbar, say — instead of the view's own. `label` omitted resolves
 `recordView.fields`. This is what lets a translated application use the chooser at all: the
-trigger used to be the literal `Fields`, with no way to change it or move it.
+trigger used to be the literal `Fields`, with no way to change it or move it. `TableView`,
+`CardView`, and `KanbanView` all honour `target`.
+
+**The chooser is public.** `getFieldControls()` returns the view's field chooser — the shared
+disclosure, or for a `TableView` with `fieldControls: true` its Table's column chooser — and
+`mountFieldControls(target)` moves it into a host element (`null` hands it back). The view keeps
+owning it wherever it sits and removes it on `destroy()`; `ListToolbar.bind()` uses exactly this.
+In the shared chooser the move buttons keep focus on the field they moved (or its other button once
+one end disables), a polite live region announces "Name moved to position 2 of 5"
+(`recordView.fieldMoved`), and Escape closes the disclosure and returns focus to its trigger.
 
 `TableView` is the record-oriented entry point above the lower-level `Table`. It extends
 `RecordView` and composes one complete `Table`, so editing, hierarchy, growing, row movement,
@@ -1266,7 +1680,8 @@ responsive stacking, loading, and advanced table events remain available through
   `fieldControls: true`, and `emptyText`. At least one field remains visible.
 - **Shared methods** — `setData()`, `addData()`, `updateRecord()`, `removeRecord()`, `getRecord()`,
   `getData()`, field getters/order/visibility methods, `setSort()`/`getSort()`, selection methods,
-  `setLoading()`, `getViewState()`, and `setViewState()`.
+  `setLoading()`, `getViewState()`, `setViewState()`, `getFieldControls()`, and
+  `mountFieldControls(target)`.
 - **Portable state** — `{version:1,fieldOrder,hiddenFields,sort}` is JSON-safe configuration only.
   Records, selection, DOM nodes, rendered values, and callbacks are never serialized. A state from
   one record view may seed another; unknown fields are ignored and new fields append.
@@ -1285,7 +1700,15 @@ portable state as TableView and KanbanView.
 
 - **Options** — the shared RecordView options plus `titleField`, `subtitleField`, `preview`,
   `previewAlt`, `link`, `actions`, `groupBy`, `groupOrder`, `minCardWidth`, `maxColumns`,
-  `variant: 'outlined'|'raised'|'filled'`, `loadingCount`, `headingLevel`, and `label`.
+  `variant: 'outlined'|'raised'|'filled'`, `loadingCount`, `headingLevel`, and `label` (null
+  resolves message `cardView.label`, "Card view").
+- **Messages** — `cardView.label`, `cardView.sort`, `cardView.sortCards`, `cardView.unsorted`,
+  `cardView.sortAscending`/`cardView.sortDescending` (`%1` the field), `cardView.ungrouped`
+  ("Ungrouped"), `cardView.groupEmpty` ("No records in this group."), `table.empty` for the empty
+  collection ("No records", shared with Table), and the card's own `recordCard.select`,
+  `recordCard.actions` (`%1` the title), `recordCard.untitled`, `recordCard.selected`,
+  `recordCard.notSelected`. English comes from the default catalogue; override per instance
+  through `msg`, or for every instance through `setTranslator()`.
 - **Selection trigger** — `selectionTrigger:'checkbox'` preserves existing selection behavior.
   With `'card'`, selectable backgrounds toggle on click, Enter or Space, Shift+click selects a range,
   and the checkbox is omitted. Links, actions and text selection keep their native behavior. Selection
@@ -1309,6 +1732,8 @@ portable state as TableView and KanbanView.
   `selectionTrigger:'card'`, Enter also toggles selection. Links, actions,
   selection controls, and selected text do not also activate the card. `recordaction` adds the
   resolved action to the shared event set.
+- **Appearance** — a selected card is a pick and keeps the accent: the `--zx-color-bg-selected`
+  tint inside an accent outline. Metadata pairs are borderless tinted chips, not boxes in a box.
 <!-- /doc -->
 
 <!-- doc:kanban-view -->
@@ -1334,6 +1759,9 @@ cards, advisory work-in-progress limits, and equivalent pointer/programmatic/key
   `eyebrow-start`, `eyebrow-end`, and `title-prefix`. Unslotted metadata stays as quiet inline
   facts. Titles clamp visually to two lines while retaining their complete accessible text. Move
   and action controls reveal on hover/focus/selection/grab, and remain visible on touch devices.
+- **Assignees** — `assignees` faces (a name, names, or `{name, src?, initials?, tone?}`) are drawn
+  like a small Avatar: initials on the tint `avatarTone(name)` picks, so a person has the same
+  colour on the board as in every Avatar; a descriptor's own `tone` wins.
 - **Movement boundary** — `recordmove {record,id,from,to,column,swimlane,limitExceeded}` is
   cancelable and fires before a commit/request; either the component event or bubbling
   `zx-recordmove` mirror may veto it. `accept` is a hard eligibility gate; WIP is visual advice.
@@ -1344,7 +1772,8 @@ cards, advisory work-in-progress limits, and equivalent pointer/programmatic/key
   chooses a column, Up/Down chooses a bucket-relative position, and Alt+Up/Down chooses a swim
   lane. A polite live region announces every target, result, and reached/exceeded WIP limit.
   Collapse keeps focus on its control, including when a programmatic collapse hides the focused
-  card. Native drag is an enhancement.
+  card. Native drag is an enhancement. The pointer-drag preview and a keyboard-grabbed card lift
+  on `--zx-drag-shadow`.
 <!-- /doc -->
 
 <!-- doc:grid -->
@@ -1384,13 +1813,16 @@ code, so future adapters do not change the public `Chart` API.
   `setError()`, `clearError()`, `resize()`, `refreshTheme()`, `getInstance()`, `destroy()`.
 - **Events** — `ready {instance}`, `update {data, type}`, `select {datasetIndex, index, dataset,
   label, value, nativeEvent}`, and `error {error}`.
-- **Adapter contract** — `adapter.create(canvas, {type, data, options, onSelect})` returns
-  `{update(spec), resize(), destroy(), instance?}`. Implementations must destroy engine resources
-  and must not retain the component after teardown.
+- **Adapter contract** — `adapter.create(canvas, {type, data, options, reducedMotion, onSelect})`
+  returns `{update(spec), resize(), destroy(), instance?}`. Implementations must destroy engine
+  resources and must not retain the component after teardown. `reducedMotion` is true under the
+  system preference or inside a `data-zx-motion="reduced"` region, and an adapter must then turn its
+  engine's animation off; Chart watches for the answer changing and updates the mounted engine.
 - **`ChartJsAdapter`** — construct it with a Chart.js constructor or namespace:
   `new ChartJsAdapter(window.Chart)`. The documentation pins Chart.js 4.5.1 as a development-only
   asset; `package.json` has no runtime dependencies and application builds explicitly choose how
-  the engine is loaded.
+  the engine is loaded. Under reduced motion it sets `animation: false`, over any animation the
+  application configured.
 - **Accessibility** — the canvas always has a name and optional description, while synchronized
   labels and dataset values live in a semantic table. `summary: 'hidden'` keeps it visually hidden
   for assistive technology; `'visible'` makes exact values part of the interface.
@@ -1409,7 +1841,18 @@ windowed loader.
   `locale`, `weekStart: 1`, `weekNumbers: true`, `workweek: false`, `agendaDays: 14`,
   `slotDuration: 30`, `slotMinTime: 0`, `slotMaxTime: 1440`, `scrollTime: 480`, `eventLimit: 3`,
   `selectable: false`, `editable: false`, `eventStartEditable`, `eventDurationEditable`,
-  `optimistic: true`, `nowIndicator: true`, `now`, `disabled`, and `renderEvent(event)`.
+  `optimistic: true`, `nowIndicator: true`, `now`, `disabled`, `msg`, and `renderEvent(event)`.
+- **Messages** — every key is namespaced `calendar.*`: `calendar.today`, `calendar.previous`,
+  `calendar.next`, `calendar.new`, `calendar.agenda`/`day`/`week`/`month`/`year` (the view
+  switch), `calendar.viewSwitch`, `calendar.label` (the root's name), `calendar.loading`,
+  `calendar.noEvents`, `calendar.allDay`, `calendar.more` and `calendar.weekNumber` (`%1`),
+  `calendar.dayEvent`/`calendar.dayEvents`, `calendar.resize`, `calendar.moveStarted`,
+  `calendar.resizeStarted`, `calendar.editPreview` (`%1` title, `%2`–`%3` the times),
+  `calendar.editCancelled`, `calendar.editCommitted`. Until 6.0 the bare keys of earlier versions
+  (`today`, `next`, `loading`, …, and `calendar` for `calendar.label`) are still honoured, read
+  right after the namespaced key in the `msg` option and in the host translator; rename them.
+  The built-in English now lives in the default catalogue rather than in `Calendar.defaults.msg`,
+  so a host translator reaches every calendar string.
 - **Event input** — generic records default to `{id,title,start,end,allDay,color,location,editable,
   durationEditable}`. Every field has a string-or-function reader (`eventId`, `eventTitle`,
   `eventStart`, …); numeric dates use `dateUnit: 'milliseconds'|'seconds'`. Inputs are normalized
@@ -1431,6 +1874,9 @@ windowed loader.
 - **View layout** — agenda days keep every event in one vertically stacked content column. Month
   uses a continuous seven-day grid with full-height day boundaries and event lanes overlaid below
   the date labels; today is indicated with accent text instead of a decorative edge highlight.
+- **Appearance** — the view switch is one framed control with the current view on the neutral
+  `--zx-color-bg-current` fill; weekday headings are sentence case; inner grid lines use
+  `--zx-color-border-subtle`; the New button is the solid primary (`--zx-color-accent-solid`).
 - **Pointer editing** — a timed move preserves the point where the event was grabbed and snaps the
   resulting start to `slotDuration`. The lower grip stretches the event in its original day column,
   while pointer capture keeps either interaction active if the pointer leaves the event surface.
@@ -1453,6 +1899,8 @@ Declarative client-side filter bar producing a filtered array, commonly wired to
 
 - **Options** — `filters: [{ type: 'select'|'text'|'custom', id, label, field(s)|get, options?,
   predicate?, emptyLabel?, placeholder? }]`, `data`, `autoApply: true`, `clearLabel`.
+- **Messages** — `dataFilter.clear` ("Clear", unless `clearLabel` is given) and `dataFilter.all`
+  ("All", a select filter's empty option unless it sets `emptyLabel`).
 - **Methods** — `setData()`, `apply()` → rows, `clear()`, `getState()`, `setState()`,
   `addFilter()`.
 - **Events** — `filter {rows, state}`.
@@ -1470,7 +1918,7 @@ form renders, with no per-application translation layer in between.
 - **Options** — `fields: Record<string, {type, label?, options?, min?, max?, step?, search?}>`,
   `order` (display order; omitted uses object order), `value` (the applied filters, drafted
   from), `mode: 'draft'|'live'`, `serialize: 'seconds'|'ms'|'iso'|(date, edge) => unknown`,
-  `emptyText`, `msg`.
+  `timeZone` (IANA zone the days are counted in; null = the runtime's own), `emptyText`, `msg`.
 - **Types** — `text`, `select`, `date`, `date:range`, `int`, `float`, `number`, and
   `int:range` / `float:range` / `number:range`. An unrecognised type renders a visible,
   labelled placeholder naming it and is excluded from the value — never dropped silently.
@@ -1495,7 +1943,10 @@ Five behaviours are deliberate rather than incidental:
 
 `serialize` decides how a date leaves the component, because the answer is a wire-format
 decision rather than an application one. A range's upper bound takes the **end** of its day, or
-a one-day range matches nothing.
+a one-day range matches nothing. `timeZone` decides *which* day: with the ZeyOS instance's zone
+(`'Europe/Vienna'`), 15 January serializes from 23:00 UTC on the 14th wherever the browser is, and
+an incoming Unix timestamp shows as the day it falls on there — the rule `zeyosForm()` and
+`zeyosTable()` apply to date-only fields. An unknown zone throws a `RangeError`.
 <!-- /doc -->
 
 <!-- doc:filter -->
@@ -1512,6 +1963,11 @@ adapter to compile into its own backend query language.
   debounce?}`. Built-in types cover text, number/money, date/datetime, boolean, enum/status/
   priority/country/currency/unit/entity, and tags. Compatible operators and their arity come from
   the exported `filterOperators` matrix; applications may explicitly override/add operator IDs.
+- **Relative dates** — `withinLast` and `withinNext` take a span, not two dates: the editor is a
+  whole-number amount and a unit select, and the value is the pair `[amount, unit]` with `unit` one
+  of `RELATIVE_DATE_UNITS` (`'days'|'weeks'|'months'`), e.g. `[7, 'days']`. `validate()` requires a
+  positive whole amount and a known unit; `relativeDateValueError(value)` is the same check for an
+  adapter. A value that is not such a pair (two dates) shows as an empty amount.
 - **Options** — `fields`, `value`, `operators`, `allowGroups: true`, `maxDepth: 3`,
   `maxConditions: 50`, `autoApply: false`, `readonly`, `disabled`, `applyLabel`, `clearLabel`,
   `searchable: false`, `layout: 'standard'|'compact'`, `rootLogic: null|'and'|'or'`,
@@ -1559,7 +2015,12 @@ mutate the caller's data.
   double-click), `check {ids, node}`.
 - **Keyboard** — ↑/↓ move, → expands then descends, ← collapses then ascends, Home/End, Enter
   activates, Space selects or toggles the checkbox, `*` expands every sibling, typing jumps to the
-  next match.
+  next match. A typed character's default action is prevented, so find-as-you-type and page
+  shortcuts do not act on it too; typing into a control inside a row is left to that control.
+- **Appearance** — the selected node of a single-selection tree is where you are: the neutral
+  `--zx-color-bg-current` fill, the text colour, a semibold label. A `selection: 'multi'` tree is a
+  set of picks and keeps the accent tint. Icons, folders included, are drawn in
+  `--zx-color-text-subtle`; badges are plain muted counts.
 <!-- /doc -->
 
 <!-- doc:finder -->
@@ -1580,6 +2041,9 @@ breadcrumb.
 - **Keyboard** — ↑/↓ move within the active column, → steps into the selected branch and lands on
   its first row, ← returns to the parent column and truncates the path, Home/End, Enter opens a
   leaf, typing jumps to the next match.
+- **Appearance** — the selected row of each column is the path you are on: the neutral
+  `--zx-color-bg-current` fill, the text colour and a semibold label, with subtle icons and
+  column dividers.
 <!-- /doc -->
 
 <!-- doc:form -->
@@ -1587,7 +2051,8 @@ breadcrumb.
 
 #### Form
 
-- **Options** — `fieldsets: []`, `actions: [button descriptors]`, `novalidate: true`.
+- **Options** — `fieldsets: []`, `actions: [button descriptors]`, `novalidate: true`,
+  `idPrefix: null` (handed to the fieldsets it builds; a fieldset's own wins).
 - **Methods** (proxied across the fieldsets) — `getValues()`, `setValues()`, `getField()`,
   `setValue()`, `getValue()`, `reset()`, `setHighlights()`, `clearHighlights()`, `addFieldset()`,
   `setActions()`, `submit()`.
@@ -1596,21 +2061,68 @@ breadcrumb.
 
 #### Fieldset
 
-- **Options** — `title`, `columns: 1|2|3`, `fields: { id: Field-options }`.
-- **Methods** — `addField(id, opts)`, `getField`/`hasField`/`getFields`,
+- **Options** — `title` (the legend: a quiet sentence-case caption, small, medium weight, muted —
+  the fields are the content), `columns: 1|2|3`, `fields: { id: Field-options }`,
+  `idPrefix: null`.
+- **Keys and ids** — a field key names the value, not an element: it is the field's `name` (and
+  a native control's `name`) and its `data-field-id`, never a DOM id by itself. Control ids are
+  `<idPrefix>-<key>`, with a prefix generated per instance unless `idPrefix` is given, so a form
+  mounted twice repeats no id and a field `stage` never collides with a `#stage` elsewhere; the
+  label, description, and message ids derive from it (`<id>-label`). Radio groups are named after
+  the control id. An `id` in the field options that differs from the key is used as given.
+- **Methods** — `addField(id, opts|Field|element|component)`, `getField`/`hasField`/`getFields`,
   `getValues`/`setValues`/`getValue`/`setValue`, `reset`, `clear`, `focus(id)`,
   `setHighlights`/`clearHighlights`.
+- **Adopting a component** — `addField(id, component)` wraps any component (or element) that is
+  not a registered field type and drives it through its own API. Values: `getValue`/`setValue`,
+  `get`/`set`, `getValues`/`setValues`, `isChecked`/`setChecked`, or a `value` property, tried in
+  that order (a Toggle reads its on-value, as the `toggle` type does); an element is read through
+  `value`, or `checked` for a checkbox or radio. Disabled: `setDisabled(bool)`, then
+  `enable()`/`disable()`, then a `disabled` property; a plain wrapper gets `aria-disabled` and its
+  form controls disabled. Read-only: `setReadonly`/`setReadOnly` or the element's `readOnly`. The
+  component's own `change` becomes the field's `change`, once per edit. Writes keep the caller's
+  `silent`: `setValues(values)` lets the component emit its own `change` to its own listeners and
+  the field emit one `change`; `setValues(values, {silent: true})` and `reset()` stay quiet.
+  Removing the field puts the component back, unsubscribes from it, and undoes the disabled and
+  read-only state the field set.
 
 #### Field
 
-- **Options** — `id`, `type: 'text'`, `label`, `description`, `value`, `placeholder`, `required`,
-  `disabled`, `options`, `layout: 'stack'|'inline'`, `props: {}`.
+- **Options** — `id` (the control's DOM id; generated when omitted), `name` (the field name and
+  native control `name`; defaults to `id` on a standalone field), `type: 'text'`, `label`,
+  `description`, `value`, `placeholder`, `required`, `disabled`, `readonly` (shown and focusable,
+  not editable; ignored by types whose control has no read-only state, such as `checkbox`,
+  `select`, `zxselect`, `date`, `time`), `options`, `layout: 'stack'|'inline'`, `props: {}`.
+- **Properties** — `controlId` (the control's DOM id), `name`.
 - **Built-in types** — `text`, `password`, `textarea`, `checkbox`, `int`, `float`, `select`,
-  `optionlist`, `hidden`, `html`.
-- **Methods** — `getValue`/`setValue`, `focus`, `reset`, `setDisabled`,
+  `optionlist`, `hidden`, `html` (display content as text: no input frame, a control's height,
+  inset like the values around it in a quiet form).
+- **Methods** — `getValue`/`setValue`, `focus`, `reset`, `setDisabled`, `setReadonly`,
   `setHighlight(msg, kind)`, `clearHighlight`, `getInput`, `own(child)`, plus the statics
   `Field.register(type, adapter)` and `Field.has(type)`.
-- **Events** — `change {value}`, `invalid {message}`.
+- **Events** — `change {value}`, once per committed edit whatever the type (a typed value on
+  leaving the input, a slider on release, `code` when the editor loses focus after an edit);
+  `input {value}` for every keystroke or drag step from the types that tell the two apart
+  (`code`, `slider`); `invalid {message}`.
+- **Adapters** — `Field.register(type, (field, options) => ({el, get, set, focus, setDisabled,
+  setReadonly?, destroy?, labelTarget?}))`. An adapter whose widget reports its own commits
+  forwards them with `field.emit('change', {value})` and stops the native `change` its inner
+  control bubbles (`field.listen(widget.el, 'change', (e) => e.stopImmediatePropagation())`), so
+  the Field does not report the same edit twice.
+- **Labels** — small, medium weight, in the muted text colour: quieter than the values they name.
+  With `layout: 'inline'` the label lines up with the control's first line.
+
+#### Quiet fields
+
+Inside any element with `data-zx-fields="quiet"` — an inspector, a property list, an inline record
+— fields read as values rather than a wall of boxes. Native inputs, selects and textareas, and the
+composite controls (`Select`, `TagPicker`, `NumberField`, `Datebox`, `DateRangeBox`, `Timebox`)
+show no border, fill, chevron, stepper or calendar button until hovered (the hover fill and the
+affordances come back) and their full field chrome and focus ring while focused or open. A
+NumberField's value starts where a quiet text input's text starts, and `html` display content is
+inset to match. Disabled
+and read-only controls never light up; an invalid Datebox keeps its danger border. It is a context
+attribute, not an option: set it on the container.
 <!-- /doc -->
 
 <!-- doc:form-widgets -->
@@ -1643,8 +2155,10 @@ stays a separate policy decision.
 - **Events** — `input {value}`, `change {value}`.
 
 Tab indents rather than moving focus, which is what a code surface has to do and what makes it a
-keyboard trap if nothing else is arranged — Escape then Tab leaves the field. A `code` Form field
-adapter is registered by `registerFieldAdapters()`.
+keyboard trap if nothing else is arranged — so Escape releases the capture until the next
+keystroke in the editor: Escape then Tab (or Shift+Tab) leaves the field, and any other key,
+or leaving the editor, restores indentation. A `code` Form field adapter is registered by
+`registerFieldAdapters()`.
 <!-- /doc -->
 
 <!-- doc:questionnaire -->
@@ -1768,12 +2282,18 @@ shows a fixed set, and `ValueList` takes free text with no catalogue. Unknown ID
 yet. Field type: `tagpicker`.
 
 - **Options** — `items`, `values: []`, `valueKey: 'ID'`, `labelKey: 'name'`, `iconKey: 'icon'`,
-  `colorKey: 'color'`, `searchKeys`,
+  `colorKey: 'color'`, `toneKey: 'tone'`, `searchKeys`,
   `filter: 'local'|(query)=>Promise<items>`, `minQuery: 0`, `debounce: 200`, `allowCreate: false`,
   `max` (maximum tags; further options become `aria-disabled`), `closeOnSelect: false`,
   `placeholder`, `listHeight: 260`, `disabled`, `readonly`, `renderItem`, `renderTag`.
-- **Tag identity** — icon values accept a bundled icon name or Node; colors are scoped to the tag
-  and its option through `--zx-tag-color`. Custom `renderItem`/`renderTag` remain authoritative.
+- **Tag identity** — icon values accept a bundled icon name or Node; colors (a CSS colour or a token
+  reference such as `var(--zx-color-tone-blue-fg)`) are scoped to the tag and its option through
+  `--zx-tag-color`. `toneKey` names a categorical tone from the Badge palette (`blue`, `teal`,
+  `green`, `amber`, `orange`, `red`, `pink`, `violet`, `slate`): the tag takes its fill and ink as a
+  toned Badge does (`data-tone`), and a tone wins over a colour. Custom `renderItem`/`renderTag`
+  remain authoritative.
+- **Read-only** — `readonly` (or `setReadonly(true)`) shows only the tags: no input, chevron, or
+  remove buttons, so a full row of tags never wraps onto an empty line.
 - **Methods** — `getValues()`, `getItems()`, `setValues(values, {silent})`, `addValue()`,
   `removeValue()`, `clear()`, `reset()`, `setItems()`, `isFull()`, `open()`/`close()`, `focus()`,
   `setReadonly()`, `enable()`/`disable()`.
@@ -1782,6 +2302,8 @@ yet. Field type: `tagpicker`.
 - **Keyboard** — ↓ opens and moves, ↑ moves, Enter toggles the active option (or creates one from
   the query), Escape closes, Backspace on an empty input removes the last tag, Home/End jump
   within the list.
+- **Quiet fields** — inside `[data-zx-fields="quiet"]` the tags read as the value: no border, fill
+  or chevron until hover; full field chrome while focused or open.
 <!-- /doc -->
 
 <!-- doc:groupbox -->
@@ -1827,15 +2349,22 @@ component count. `statTile()` is the convenience form of `new StatTile(null, opt
 returns the component, the way `tooltip()` does; call `.toElement()` for the node to place.
 
 - **Options** — `label`, `value`, `format: 'number'|'currency'|'percent'|'fileSize'|null|fn`,
-  `currency`, `locale`, `delta`, `deltaKind: 'positive'|'negative'|'neutral'`, `deltaFormat`,
-  `deltaLabel`, `trend: number[]`, `icon`, `kind`, `href`, `clickable`, `loading`, `msg`.
+  `currency`, `locale`, `caption`, `delta`, `deltaKind: 'positive'|'negative'|'neutral'`,
+  `deltaFormat`, `deltaLabel`, `trend: number[]`, `icon`, `kind`, `href`, `clickable`, `loading`,
+  `msg`.
+- **Appearance** — the label is a sentence-case muted line (13px, medium); the value is the loud
+  part (24px, weight 650, tabular figures); `caption` is one muted context line under it ("of
+  13,184"). `icon` is a muted glyph beside the label, never a coloured chip; `kind` tints only the
+  sparkline. The tile is a column with the sparkline at its foot, so tiles in a row are the same
+  height and line up whether or not each has a caption, a delta or a trend.
 - **Methods** — `update(options)`, `getAccessibleName()`.
 - **Events** — `click {event}`.
 
 - **A delta is never colour alone.** It carries its sign and a direction glyph, and `deltaKind`
   decides the colour rather than the sign — rising ticket counts are not a success, and a
   component that assumes "up is good" is wrong for half the metrics in any business.
-- **The accessible name is label + value + spoken delta** ("up 2 vs. last week"). The visible
+- **The accessible name is label + value (with its caption) + spoken delta** ("Active items,
+  2,184 of 13,184, up 2 vs. last week"). The visible
   `+2` row and the sparkline are `aria-hidden`, because a sparkline nobody can read is
   decoration and saying the delta twice is worse than saying it once.
 - **The element follows the behaviour** — `href` renders an `<a>`, `onclick` without `href` a
@@ -1990,10 +2519,12 @@ detail side of a master–detail screen. Give the root a size of its own (a grid
 
 Four appearances, all square-cornered. `divided` (the default) sets flat blocks on a muted track,
 split by hairline dividers, above a bordered panel, with the active block lifted onto the panel
-surface under an accent rule. `bracket` outlines folder tabs that fuse into that same panel, the
-active tab bridging the seam. `line` underlines the active tab across a full-width rule, for page-
-and section-level navigation. `segmented` renders a compact group on a muted fill with the active
-tab raised onto a control surface, so the row reads as one control inside a toolbar or card header.
+surface. `bracket` outlines folder tabs that fuse into that same panel, the active tab bridging
+the seam. `line` underlines the active tab in the text colour across a full-width rule, for page-
+and section-level navigation. `segmented` renders a compact framed group with the active tab on
+the neutral `--zx-color-bg-current` fill, so the row reads as one control inside a toolbar or card
+header. The active tab is where you are, not a pick: every variant gives it the text colour and a
+semibold label, and none uses the accent. Tab badges are neutral counts, not accent bubbles.
 
 `divided` and `bracket` draw the panel box themselves; `line` and `segmented` leave the panel bare
 for the surrounding layout to frame. The boxed variants read `--zx-tabbox-radius` (default `0px`)
@@ -2001,7 +2532,8 @@ from the component root, so `el.style.setProperty('--zx-tabbox-radius', 'var(--z
 restores rounded corners without forking the stylesheet.
 
 - **Options** — `tabs: [{ name, title, content, icon?, closable?, disabled? }]`, `active`,
-  `variant: 'divided'|'bracket'|'line'|'segmented'`, `keepAlive: true`.
+  `variant: 'divided'|'bracket'|'line'|'segmented'`, `keepAlive: true`, `label` (the tab list's
+  accessible name — give one whenever a page has more than one tab list).
 - **Methods** — `addTab()`, `removeTab()`, `openTab(name)`, `getActive()`, `setTitle()`,
   `setBadge(name, text|null)`, `enableTab()`/`disableTab()`.
 - **Events** — `change {name, previous}` (preventable), `close {name}`.
@@ -2065,7 +2597,7 @@ columns, in what shape. The parts have always existed (`Search`, `SortControl`,
 forgetting the same thing.
 
 - **Options** — `search: {placeholder?, value?, debounce?, clearable?}|false`, `count`,
-  `countText`, `views: Array<string|{id, label?, icon?}>` (string presets `auto|cards|table|list`),
+  `countText`, `views: Array<string|{id, label?, icon?}>` (string presets `auto|table|list|cards|gallery|board`),
   `view`, `tools: [{id, label?, icon?, badge?, badgeKind?, pressed?, disabled?, onclick?}]`,
   `label`, `msg`.
 - **Methods** — `setCount()`, `setBadge()`, `setPressed()`, `setToolDisabled()`, `setTools()`,
@@ -2080,20 +2612,95 @@ Three properties are the reason to use this rather than assemble your own:
   rows out of twenty with nothing on screen saying why, and the badge is what prevents that.
 - **The count line is a live region**, and `setCount(null)` clears it. The previous number
   describes the previous filters; a stale count during a load is worse than none.
-- **Tool buttons meet the 44 px target** in both densities.
-
-`bind(view)` is optional sugar for a `TableView` or `CardView`: it feature-detects rather than
-importing them, adopts the view's shape, and mounts a field chooser built with
-`fieldControls: {target}` into the toolbar. The toolbar is fully functional without it.
+- **Tool buttons meet the 44 px target** at any spacing.
+
+The current view and a pressed tool take the neutral `--zx-color-bg-current` fill — a mode the
+list is in, not a pick — never the accent tint.
+
+`bind(view)` is optional sugar for a `TableView`, `CardView`, or `KanbanView`: it feature-detects
+rather than importing them, adopts the view's shape, and mounts the view's field chooser into the
+tools slot through the view's public `mountFieldControls()` — for a default `TableView` that is its
+Table's column chooser. `unbind()` hands it back to the view, and a view destroyed first takes it
+with it. A chooser already mounted here with `fieldControls: {target: toolbar.getToolsElement()}`
+is left where it is. The toolbar is fully functional without `bind()`.
+<!-- /doc -->
+
+<!-- doc:view-settings -->
+### ViewSettings — the content of a view-settings drawer
+
+Which fields a record view shows and in what order, which hidden field to bring back, what the
+records are grouped by, and which fields a board uses for columns and swim lanes. It is content,
+not a container: put it in a `Sheet`, a `Dropdown`, or a settings page.
+
+- **Options** — `fields: ViewSettingsField[]` (a `ViewField` plus `type`, `groupable`, `locked`),
+  `fieldOrder`, `hiddenFields`, `groupBy`, `grouping: boolean|{fields?}`,
+  `board: {columnBy, swimlaneBy, showEmptyColumns?, fields?}|false` (`fields` restricts the
+  Columns and Swim lanes choices; default: the Group by fields), `sections` (order and presence of
+  `'fields'|'grouping'|'board'`), `types: Record<type, {icon?, label?}>`, `searchThreshold` (8),
+  `headingLevel` (3), `label`, `msg`.
+- **Methods** — `getState()`, `setState(partial, {silent})`, `setFields()`, `getFields()`,
+  `showField()`, `hideField()`, `moveField(id, index)`, `bind(view, {board?})`, `unbind()`,
+  `focus()`, `destroy()`.
+- **Events** — `change {state, reason: 'order'|'visibility'|'group'|'board'}`,
+  `fieldorderchange {order}`, `fieldvisibilitychange {visible, hidden}`, `groupchange {field}`,
+  `boardchange {board}`.
+- **State** — `{fieldOrder, hiddenFields, groupBy, board}`: JSON-safe, ready to persist.
+
+The shown fields are listed in order, each with a drag handle, its type glyph, and a hide button;
+the hidden ones follow with an explicit **Add** button, which puts the field at the end of the
+shown list. Above `searchThreshold` fields a search narrows the hidden list (label, id, and type
+name, ignoring case and accents) and Enter adds the first match. A `locked` field — the record
+title — has neither handle nor hide button and keeps its place while the others move around it.
+`locked` governs only what the panel offers: a bound view has no such notion, so a locked field the
+view hides itself appears under Hidden with Add like any other. The last shown field cannot be
+hidden.
+
+Rows reorder by pointer (mouse, touch, and pen share one path: drag the handle, an insertion line
+shows where it lands, Escape cancels; near the top or bottom edge of the nearest scroll container,
+the container scrolls) and by keyboard on the focused handle: ArrowUp/ArrowDown
+move one step, Home/End to the ends, Space or Enter picks the row up and drops it, Escape returns
+it. Every move is announced in a polite live region ("Owner moved to position 3 of 6"). A redraw
+from outside — `setState()`, `setFields()`, a bound view's change — cancels a pick-up or drag in
+progress (announced) and keeps focus on the same field's control.
+
+The type glyph comes from a built-in map that `types` extends: text, number (int, float,
+percent), money, date, datetime, time, boolean, select (enum), status, priority, entity, tags,
+url, email, image, file, rating. The type name is the glyph's `title` and visually hidden text,
+so it is seen and heard. Grouping and the board offer fields with `groupable !== false` and a
+discrete type (text, select, status, priority, boolean, entity), or `groupable: true`;
+`grouping.fields` restricts the Group by choices.
+
+`bind(view)` connects a `TableView`, `CardView`, or `KanbanView`: it reads the view's fields and
+state, pushes order and visibility through `setFieldOrder()`/`setFieldVisible()`, and follows the
+view's own `statechange`; `unbind()` releases the view. A panel given its own `fields` lists
+those and no others (the title a card draws is not a column to offer); given none, it lists every
+field the view has. The view's labels and types win over the panel's descriptors, which add only
+`locked`, `groupable`, and a type where the view has just the `'text'` default. While bound the view owns the field list: call the view's `setFields()` — the
+panel's own `setFields()` is not pushed and lasts until the view's next change. Grouping and board
+changes are only emitted — the host applies them.
 <!-- /doc -->
 
 <!-- doc:pagination -->
 ### Pagination
 
-The pager for a server-backed list, shaped to drop straight onto `Table` with
-`sortMode: 'server'` or onto the `zeyosTable` binding — `getState()` hands back the `offset` and
-`pageSize` a query needs. `page` is 1-based and always clamped into `[1, pages]`; a `total` of 0 is
-treated as one empty page rather than zero pages.
+The pager for a server-backed list. It owns no data: `getState()` and every `change` hand back
+the `page`, `pageSize`, and zero-based `offset = (page - 1) * pageSize` a query needs. `page` is
+1-based and always clamped into `[1, pages]`; a `total` of 0 is treated as one empty page rather
+than zero pages.
+
+The ZeyOS bindings page differently — zero-based, `pageSize: 50`, appending pages above zero — so
+driving `zeyosTable()` (or `zeyosView()`) takes one mapping in the `change` listener:
+
+```js
+const binding = zeyosTable(client, 'contacts', { pageSize: 25 });
+const pager = new Pagination(host, { pageSize: binding.pageSize });
+pager.on('change', async ({ detail }) => {
+  const result = await binding.load({ page: detail.page - 1, pageSize: detail.pageSize, replace: true });
+  pager.setTotal(result.count ?? 0); // silent, so it cannot loop
+});
+```
+
+In `mode: 'loadmore'` each `change` is one `binding.loadMore()`, which appends.
 
 - **Options** — `page: 1`, `pageSize: 25`, `total: 0`, `pageSizes: [25, 50, 100]`, `siblings: 1`,
   `boundaries: 1`, `showPageSize: true`, `showSummary: true` (renders "26–50 of 312"),
@@ -2108,6 +2715,9 @@ treated as one empty page rather than zero pages.
 - **Semantics** — `<nav aria-label="Pagination">`; the current page carries `aria-current="page"`;
   previous/next are labelled icon buttons that go `disabled` at the ends; the ellipses are
   `aria-hidden` spans, not buttons.
+- **Appearance** — the summary and the page-size select sit together at the start of the bar,
+  the pager alone at the end; the current page is the neutral `--zx-color-bg-current` fill with a
+  semibold figure: where you are, not a call to action.
 <!-- /doc -->
 
 <!-- doc:navigation-bar -->
@@ -2126,6 +2736,9 @@ bar and wrong for a phone bottom bar, where the navigation is the point. `overfl
 every item at every width; `overflowBelow` moves the threshold; `minVisible: n` pins the first `n`
 items and overflows the rest. At the default the collapse is a container query with no observer
 installed; any other threshold installs a `ResizeObserver`, which is the cost of asking for one.
+
+The current item is the neutral `--zx-color-bg-current` fill with the text colour and a semibold
+label; item badges are neutral counts. Only the brand mark keeps the accent.
 <!-- /doc -->
 
 <!-- doc:app-sidebar -->
@@ -2136,36 +2749,149 @@ vertical rail, and horizontal rail layouts. It mounts exactly one presentation a
 preserving active and expanded branch state. Only the expanded vertical state reveals descendants
 inline; every rail state opens descendants toward the workspace in anchored flyouts.
 
-- **Options** — `items`, `active`, `expanded`, `collapsed`, `collapsible`,
-  `orientation: 'vertical'|'horizontal'`, `side: 'left'|'right'|'top'|'bottom'`, `label`,
+- **Options** — `items`, `active`, `expanded`, `collapsed`, `collapsible` (`false` removes the
+  minimise and expand buttons), `orientation: 'vertical'|'horizontal'`,
+  `side: 'left'|'right'|'top'|'bottom'`, `layout: 'tree'|'modules'`, `module`, `moduleBar`
+  (`{appearance, labels: 'auto'|'beside'|'below'|'hidden', allModules, label}` for the module
+  strip), `label`,
   `header`, `footer`, `railHeader`, `railFooter`, `openDelay: 80`, `closeDelay: 160`, and
   `renderIcon(item, context)`. Icon values may also be names, nodes, components, or factories.
-- **Methods** — `setItems()`, `getItems()`, `setActive()`, `setExpanded()`, `getExpanded()`,
-  `toggleBranch()`, `expand()`, `collapse()`, `setCollapsed()`, `isCollapsed()`,
+- **Sections** — an item with `section: true` is a quiet heading over its `children`, which stay
+  at its own level: never indented, collapsed, focused, or selected, and it needs no `id`.
+  `actions` (a node) adds trailing controls such as an add button. Sections replace stacking
+  several sidebars: one `<nav>`, one keyboard sequence, one rail. On a rail a section becomes a
+  rule; in a flyout, a caption.
+- **Modules layout** — `layout: 'modules'` reads the top level as modules (`ModuleItem`s: `tone`
+  or `color`, `badge`, `pinned`, `group`) and draws them as a `ModuleBar` strip beside a panel
+  with one module's menu. A module with `children`, `header` (a node above its menu, such as its
+  primary action), or `content` (a node below it, such as a tree or a history) is a panel module:
+  choosing its tile shows its panel and fires a cancelable `modulechange`; any other module is a
+  destination and fires `select`. The panel starts on `module`, else the module holding `active`,
+  and follows `setActive()` into another module. A `section` at the top level heads its modules on
+  the strip.
+- **Presentations** — the modules layout shows `'expanded'` (both menus: the strip names its
+  modules beside their tiles, and the side menu shows), `'compact'` (the module menu collapsed to
+  icons beside the side menu), or `'collapsed'` (the icon strip alone; every module's menu opens as
+  a flyout beside its tile). A small three-way switch at the foot of the strip, above
+  `railFooter`, chooses between them: an APG radio group ("Navigation layout") of one pictogram per
+  presentation, in a row while the modules are named and a column on the icon strip; arrow keys
+  move and choose, Home and End jump. `presentationSwitch: false` leaves it out when the choice
+  lives in a menu instead: `presentationChoice({label})` returns the same choice as a menu
+  `choice` entry (`account.setItems([sidebar.presentationChoice(), …])`; rebuild it after
+  `presentationchange`), and `presentationGlyph(name)` is its pictogram. `presentations` (default all three) decides which it offers;
+  `presentation` sets the first one; `getPresentation()`, `setPresentation()`, and
+  `togglePresentation()` (the next one, wrapping — Mod+B in an application) drive it, and
+  `presentationchange {presentation, previous}` reports it. `moduleBar.labels: 'hidden'` never
+  names the modules. `railHeader`/`railFooter` are the strip's head and foot in every
+  presentation. The arrow toward the panel moves from a tile into its menu, and Left Arrow on a
+  top-level row of the menu returns to the tile.
+- **Methods** — `setItems()`, `getItems()`, `setActive()`, `setBadge(id, badge)`, `setExpanded()`,
+  `getExpanded()`, `toggleBranch()`, `expand()`, `collapse()`, `setCollapsed()`, `isCollapsed()`,
+  `setModule(id, {silent})`, `getModule()`, `setModuleLabels(labels)`, `getPresentation()`,
+  `setPresentation(presentation, {silent})`, `togglePresentation()`, `presentationChoice({label})`,
   `setLayout({orientation, side})`, `openFlyout(id, {focus})`, `closeFlyout()`,
-  `closeAllFlyouts()`, `isFlyoutOpen()`, `focus()`, `destroy()`.
+  `closeAllFlyouts()`, `isFlyoutOpen()`, `focus()`, `destroy()`. `getItems()` returns copies of
+  the normalized tree; a leaf carries no `children` property.
 - **Events** — cancelable `select {item, id, value, href, event}`,
-  `branchchange {item, id, expanded, ids}`, `collapsechange {collapsed}`, and
-  `flyoutchange {item, id, open}`.
+  `branchchange {item, id, expanded, ids}`, `collapsechange {collapsed}`,
+  `flyoutchange {item, id, open}`, cancelable `modulechange {item, id, previous}`, and
+  `presentationchange {presentation, previous}`.
 - **Presentation state** — horizontal navigation is always effectively minimized and never exposes
   an expand control. Switching layouts does not erase the saved vertical collapsed preference or
-  expanded branch IDs. `AppSidebar` is the single public application-navigation component; use
-  `collapsed: true` or `orientation: 'horizontal'` for its rail presentations.
+  expanded branch IDs. `AppSidebar` is the one component that owns an application's navigation
+  tree; use `collapsed: true` or `orientation: 'horizontal'` for its rail presentations, and
+  `layout: 'modules'` for the module strip it composes from `ModuleBar`.
+- **Current state** — the current page is neutral: the `--zx-color-bg-current` fill, the full
+  text colour and a semibold label, in the tree, the rail and every flyout; hover is a lighter
+  step of the same overlay. A closed branch (or a rail item) over the active route takes the
+  semibold label or the text colour, never the accent. Nothing is docked to an edge.
 - **Pointer and focus** — hover or focus reveals rail descendants without stealing focus. Click,
   Enter, Space, and the arrow toward the workspace also open a flyout; Escape, outside activation,
   or selection closes it. Expanded navigation supports arrows plus Home/End across visible rows.
 - **Semantics** — persistent navigation uses `<nav>` and nested lists with native links and
-  disclosure buttons, not menu or menubar roles. Icon-only destinations retain an accessible name
+  disclosure buttons, not menu or menubar roles. The `<nav>` is the only landmark: a root the
+  sidebar creates is a plain `<div>`, and a caller's own root keeps its element and attributes.
+  Icon-only destinations retain an accessible name
   and Tooltip. A parent with children is disclosure-only; add an Overview child when it also needs
   a destination. Malformed and executable URL schemes are stripped; an item with no remaining
   link or callback is disabled in every presentation.
 <!-- /doc -->
 
+<!-- doc:module-bar -->
+### ModuleBar — the module level of an application
+
+One colour-coded tile per module, in a vertical strip or a horizontal bar: the level above an
+application's menus. Use it on its own — the classic module bar in an application header, beside
+a tree-layout `AppSidebar` — or through `AppSidebar`'s `layout: 'modules'`, which composes it.
+
+```js
+import { ModuleBar } from '/assets/zx.esm.js';
+
+const bar = new ModuleBar(null, {
+  items: [
+    { id: 'mail', label: 'Mail', icon: 'envelope', tone: 'blue', badge: 7, children: [
+      { id: 'inbox', label: 'Inbox', href: '#inbox' }, { id: 'sent', label: 'Sent', href: '#sent' }
+    ] },
+    { id: 'billing', label: 'Billing', icon: 'file-invoice', color: '#535494', href: '#billing' }
+  ],
+  active: 'inbox',
+  onselect: (event) => { event.preventDefault(); route(event.detail.id); }
+});
+bar.setBadge('mail', 8);
+```
+
+- **Items** (`ModuleItem`) — the `AppNavItem` shape plus `tone` (a categorical tone that follows
+  the theme) or `color` (any CSS colour; it wins), `pinned: true|number` (when any module is
+  pinned, unpinned ones are under "All modules" only), `group` (the catalogue heading), and
+  `description`. Children are the module's menu. A `section` at the top level heads its modules:
+  a caption over them while names are printed beside the tiles, a short rule between groups on an
+  icon strip or bar, and their group in the catalogue.
+- **Options** — `items`, `active` (a module or anything in a module's menu),
+  `orientation: 'vertical'|'horizontal'`, `side`, `appearance: 'tint'|'solid'|'plain'` (the glyph
+  on a tint of the module colour; the solid identity tile; monochrome glyphs),
+  `labels: 'hidden'|'below'|'beside'` (names under the tiles of a vertical strip, or beside them —
+  a navigation column of its own, a row per module with its count at the end),
+  `menus: 'flyout'|'none'`, `expanded`, `controls`, `allModules: 'auto'|'always'|'never'`,
+  `header`, `footer`, `label` (default "Modules"), `openDelay`, `closeDelay`, `renderIcon`.
+- **Menus** — with `menus: 'flyout'` a module's children open beside its tile on hover, focus,
+  click, or the arrow toward the workspace, exactly like a rail. With `menus: 'none'` an adjacent
+  panel the application owns shows them: every module then fires `select`, `setExpanded(id)`
+  names the module the panel shows, and each tile with a menu reports `aria-expanded` and
+  `aria-controls` the `controls` id.
+- **Overflow** — modules that do not fit move behind the "All modules" button; the current module
+  (and the expanded one) always stays. The catalogue lists every module as a labelled tile,
+  grouped by `group`, with a filter field past twelve modules. `partitionModules(items, capacity,
+  keep, reserve)` is the pure function deciding what shows; `reserve` keeps the button's slot for
+  `allModules: 'always'`.
+- **Methods** — `setItems()`, `getItems()`, `setActive()`, `setBadge(id, badge)` (in place, on the
+  tile, in its menu, and in the catalogue), `setExpanded(id)`, `setLabels(labels)` (how a column
+  expands to names and collapses to icons), `setLayout({orientation, side})`,
+  `openFlyout()`, `closeFlyout()`, `closeAllFlyouts()`, `isFlyoutOpen()`, `openAllModules()`,
+  `closeAllModules()`, `isAllModulesOpen()`, `focus()`, `destroy()`.
+- **Events** — cancelable `select {item, id, value, href, event}`, `flyoutchange {item, id, open}`,
+  `overflowchange {visible, overflow}`, and `allmodules {open}`.
+- **Keyboard** — the bar is one Tab stop, on the current module. Arrow keys along the bar move
+  between tiles and wrap; Home and End go to the first and last control; typing jumps to the next
+  module whose name starts with the letters typed; the arrow toward the workspace opens a menu and
+  moves into it; Escape, or the arrow back toward the strip, closes a menu onto its tile; Escape
+  closes the catalogue onto its button, and so does tabbing out of it. In the catalogue, arrows
+  move across the grid, typing goes to the filter field (past twelve modules), and Enter chooses.
+- **Semantics** — a `<nav>` of native links and buttons, never a menu or menubar. The module that
+  is or holds the current page carries `aria-current` (`page` or `true`); an icon-only tile's
+  accessible name is its label, with its count ("Mail (7)"), and it has a tooltip. Current is
+  the neutral `--zx-color-bg-current` fill behind the tile, never the accent or an edge bar.
+- **Geometry** — a target is one control plus a space step, a tile one control less one, so
+  `--zx-control-height` resizes the bar; a coarse pointer keeps a 40px target.
+<!-- /doc -->
+
 <!-- doc:kernel -->
 ### Core helpers
 
 - **Component** — the base class: `on`/`off`/`once`/`emit`, `listen`, `toElement`, `msg`,
-  `destroy`, and the static `Component.from(el)`.
+  `destroy`, and the static `Component.from(el)`. `msg(key, ...args)` always returns text: the
+  instance's `msg` option (a `{[lang]: {…}}` table for the active language, then flat keys), else
+  the host translator, else the class's built-in `msg` defaults, else the default English
+  catalogue, and only then the key itself; `%1`, `%2`, … are filled from `args`.
 - **DOM** — `h(tag, props, ...children)`, `h.raw(html)`, `htmlEscape`, `resolveElement`.
   `__(tag#id.class, properties, content)` is Zx's compact DOM builder and public alias for
   `compactElement()`. It preserves `D*` data, `S*` style, boolean/built-in property, attribute,
@@ -2182,11 +2908,16 @@ inline; every rail state opens descendants toward the workspace in anchored flyo
   `{update, destroy}`. It anchors a manual popover with CSS anchor positioning where the browser
   supports it and a scroll/resize-tracked fallback where it does not. Options are resolved once,
   so changing a placement means `destroy()` and a fresh `position()` call.
-- **i18n** — `setTranslator`, `setLanguage`, `getLanguage`, `translate`, `printf`.
+- **i18n** — `setTranslator`, `setLanguage`, `getLanguage`, `translate`, `printf`, and
+  `defaultMessages`, the frozen English catalogue of every component key (`table.empty` → "No
+  records") that a host copies as the starting point for a locale.
 - **Dates** — `formatDate(d, fmt)`, `parseDate(s, fmt)` (tokens
   `%d %m %Y %y %H %M %S %a %A %b %B %s`), `clampDate`, `isSameDay`, `addDays`, `addMonths`,
   `getWeekStart`.
 - **Keyboard** — `focusTrap`, `rovingTabindex`, `typeahead`.
+- **Motion** — `prefersReducedMotion(element?)` → boolean, and
+  `watchMotion(element, fn, {signal?, immediate?})` → disposer, for code that animates in script;
+  see Theming.
 - **Utils** — `debounce`, `uid`, `deepMerge`, `isElement`, `clamp`, `toArray`.
 <!-- /doc -->
 
@@ -2203,7 +2934,8 @@ import { loadFontAwesome, useFontAwesome, registerIcons } from '/assets/zx.esm.j
 
 await loadFontAwesome({ kit: 'ae8320b210', style: 'duotone' });  // injects the kit, switches over
 useFontAwesome();                          // page already carries Font Awesome; no network
-registerIcons({ rocket: ['0 0 512 512', 'M…'] });   // extend the bundled inline set
+registerIcons({ rocket: ['0 0 512 512', 'M…'] });            // a filled glyph (Font Awesome paths)
+registerIcons({ anchor: ['0 0 24 24', 'M12 6v16…', 'stroke'] });  // an outline glyph (Lucide paths)
 ```
 
 - `loadFontAwesome(kit | {kit, style, family, fixedWidth, activate})` — injects the kit script once
@@ -2212,7 +2944,20 @@ registerIcons({ rocket: ['0 0 512 512', 'M…'] });   // extend the bundled inli
   domains configured in the Font Awesome account.
 - `useFontAwesome(opts)` / `useBuiltinIcons()` / `configureIcons(opts)` / `getIconConfig()` —
   switch or read the renderer without touching the network.
-- `iconNames()` lists every inline glyph; `registerIcons(map)` adds `[viewBox, path]` entries.
+- `iconNames()` lists every inline glyph, bundled and registered; `icons` is the bundled table.
+- `registerIcons(map)` adds or replaces inline glyphs. `[viewBox, path]` is a filled shape — the
+  form Font Awesome path data comes in. `[viewBox, path, 'stroke']` is an outline drawn with the
+  bundled pen; its stroke scales with the view box, so a 24-unit outline set such as Lucide renders
+  exactly like the bundled glyphs. Anything else throws `TypeError`.
+
+**The bundled set is outline.** The inline glyphs are Lucide icons (https://lucide.dev, ISC licence;
+the notice is in `src/core/icons.js`) on a 24-unit grid: `fill="none"`, `stroke="currentColor"`,
+round caps and joins, a stroke of 1.75 units — about 1.2px at the default 16px, the weight of
+13–14px interface text — and never thinner than one pixel, so 11–13px glyphs stay legible. The
+names are Zx's own (`gear`, `dots`, `warning`, `success`, `drag`, …), not Lucide's. Colour follows
+`currentColor`; muting an icon is the caller's choice. The paint sits on the `<svg>` as attributes,
+so CSS on `.zx-icon` overrides it — `fill: currentColor` turns an outline into its solid form, which
+is how a state such as a set star or a liked heart is shown without a second glyph.
 
 **Names decide their own renderer.** A bare name (`'check'`) follows the active provider, and the
 built-in names are translated to their Font Awesome counterparts (`x` → `fa-xmark`, `search` →
@@ -2229,7 +2974,8 @@ itself once per distinct name through `console.warn`. Pass `icon(name, { strict:
 old `RangeError`, at a call site that can afford to fail: a test, or a build-time check.
 
 Font Awesome elements are sized with `font-size` and occupy 1em; bundled SVGs use width/height
-attributes. Both honour `label` (`null` ⇒ `aria-hidden`, otherwise `role="img"` + `aria-label`).
+attributes (default 16). Both honour `label` (`null` ⇒ `aria-hidden`, otherwise `role="img"` +
+`aria-label`).
 <!-- /doc -->
 
 <!-- doc:helpers -->
@@ -2287,12 +3033,20 @@ entry point as the components. See also the Kernel section for `Component`, `h`,
   `copyToClipboard(text)` → `Promise<boolean>` uses the async Clipboard API and falls back to a
   hidden textarea, never rejecting.
 - **Translation** — `setTranslator(fn)`, `setLanguage(lang)`, `getLanguage()`,
-  `translate(key, args)`, `printf(str, args)` (`%s` placeholders). Every component routes its
-  built-in strings through `translate()`, so one translator covers the library, and
-  `setLanguage()` also drives locale-dependent behaviour such as the first day of the week.
+  `translate(key, args)`, `printf(str, args)` (`%1`, `%2`, … placeholders), `defaultMessages`.
+  Every component resolves its built-in strings through `msg()`, so one translator covers the
+  library: per-instance `msg` option → `setTranslator()` function → the component's built-in
+  defaults → the default English catalogue → the key. The translator answers one key at a time;
+  null, undefined, or the key itself means "not translated" and English shows, so an application
+  without a translator never sees a raw key. `defaultMessages` is that catalogue — copy it to
+  start a locale (`setTranslator((key) => de[key])`). `setLanguage()` also selects the language
+  table of a `msg` option and drives locale-dependent behaviour such as the first day of the week.
 - **Keyboard** — `focusTrap(container)` → `{activate, release}` confines Tab to a container;
-  `rovingTabindex(container, itemSelector, {orientation, wrap})` → `{focusFirst, focusLast,
-  destroy}` keeps one tab stop in a group; `typeahead(getItems, onMatch)` →
+  `rovingTabindex(container, itemSelector, {orientation, wrap, rtl: 'auto'})` → `{focusFirst,
+  focusLast, destroy}` keeps one tab stop in a group — horizontal arrows follow `dir="rtl"`, and a
+  text field, select, or contenteditable item keeps Home/End and its arrows (an arrow leaves a text
+  field only from the edge of its text); toggling a `<fieldset disabled>` around items inside the
+  container moves the tab stop off them; `typeahead(getItems, onMatch)` →
   `(event|string) => void` resolves buffered printable keystrokes to an item (500 ms buffer,
   repeated-letter cycling).
 <!-- /doc -->
@@ -2333,15 +3087,54 @@ Registered elements: `<zx-toggle>`, `<zx-check-button>`, `<zx-select items='[…
 <!-- doc:tokens -->
 ### Design tokens
 
-Two tiers of CSS custom properties. Dark mode and density are pure token/attribute swaps
-(`[data-zx-theme="dark"]`, `[data-zx-density="compact"]`), and `tests/lint-tokens.js` forbids raw
-colour literals and tier-1 references in component CSS.
-
-- **Tier 1** — the global palette in `styles/tokens/global.css`, never referenced by components:
-  `--zx-gray-0…950`, `--zx-green-*`, `--zx-red/amber/blue-*`, `--zx-space-1…8`,
-  `--zx-radius-sm/md/lg/full`, the type scale, shadows, and motion.
+Two tiers of CSS custom properties. Dark mode is a pure token/attribute swap
+(`[data-zx-theme="dark"]`), there is one geometry derived from `--zx-space-unit` and
+`--zx-radius`, and `tests/lint-tokens.js` forbids raw colour literals and tier-1 colour references
+in component CSS.
+
+- **Tier 1** — the global palette and primitives in `styles/tokens/global.css`: `--zx-gray-0…950`,
+  `--zx-emerald-*` (the brand ramp the default accent reads), the status ramps
+  `--zx-green/red/amber/blue-*` (green is a yellow-green, deliberately apart from the brand), the
+  tone ramps `--zx-tone-<hue>-300/500/700` — none of them referenced by components — plus the
+  spacing scale (`--zx-space-unit`, `--zx-space-1…8`), the radius scale (`--zx-radius`,
+  `--zx-radius-sm/md/lg/xl/full`), the type scale (`--zx-text-xs…3xl`, 12–30px), weights
+  (`--zx-weight-medium` 500, `--zx-weight-semibold` 600), tracking (`--zx-tracking-tight`
+  -0.01em, set on `.zx-scope`; `--zx-tracking-title` -0.015em), shadows, and motion
+  (`--zx-dur-fast` 120ms, `--zx-dur-base` 180ms — both 0ms in a reduced-motion region — and the
+  curves `--zx-ease`, `--zx-ease-spring`, `--zx-ease-drawer`).
 - **Tier 2** — the semantic set, the only tokens components may use: `--zx-color-*`,
-  `--zx-control-*`, `--zx-focus-ring`, `--zx-overlay-shadow`.
+  `--zx-control-*`, `--zx-focus-ring`, `--zx-surface-shadow` (the contact shadow of a resting
+  surface: a panel, an outlined card in a lane, a slider thumb), `--zx-overlay-shadow`,
+  `--zx-drag-shadow` (an item being dragged; its own value in dark, with a faint light rim). The
+  lint also rejects the accent ramp `--zx-accent-*`, the module palette `--zx-module-*`, and the
+  raw `--zx-shadow-*` steps in component and layout CSS, and any `outline: 0`/`outline: none`:
+  forced-colors mode drops the box-shadow focus ring, so components make the outline transparent
+  and `styles/base.css` repaints it in a system colour there. The roles that carry the visual
+  language:
+  - **Columns.** `--zx-color-bg-surface` is the working canvas; `--zx-color-bg-chrome` is the
+    navigation and inspector tone beside it (one step below the canvas in light, between page and
+    canvas in dark), so tone rather than a line separates them. Dividers inside a column use
+    `--zx-color-border-subtle`; `--zx-color-border` is for frames.
+  - **Current vs selected.** Where you *are* — the active navigation item, the current row, the
+    open node, the active view — is neutral: `--zx-color-bg-current` (translucent text, about 8%,
+    so it works on any column), text colour, weight 600. Hover is `--zx-color-bg-hover`, about half
+    as strong. What you have *picked* keeps the accent tint `--zx-color-bg-selected`.
+  - **Text.** `--zx-color-text`, `--zx-color-text-muted` (secondary text, 4.5:1 on every column and
+    on a current row), `--zx-color-text-subtle` (icons and non-essential meta, 3:1),
+    `--zx-color-text-placeholder`.
+  - **Solid accent.** `--zx-color-accent-solid` (`-hover`, `-active`) with
+    `--zx-color-on-accent-solid` is the one primary action per screen: the 600 stop with white ink in
+    both themes. `--zx-color-accent` is the accent as text, marks, and focus (600 in light, 400 in
+    dark) and pairs with `--zx-color-on-accent` when something is filled with it.
+  - **Status.** `--zx-color-success/warning/danger/info` and their `-bg` fills mean state and
+    nothing else; they ship with an icon or a word.
+  - **Tones.** `--zx-color-tone-{blue,teal,green,amber,orange,red,pink,violet,slate}-bg` and `-fg`:
+    categorical colour for tags, chips, icon tiles, and avatars — neither the accent nor a status. A
+    soft fill (13% of the tone over the surface in light, 20% in dark) with ink at 4.5:1 or better.
+  - **Chart series.** `--zx-color-chart-1…8`, assigned in order, never cycled: blue, orange, teal,
+    amber, pink, green, violet, red. Neighbours stay apart under red-green colour-vision deficiency
+    and every series clears 3:1 as a mark on the light and the dark surface; the list does not open
+    on the accent.
 - **Component styling hooks** — a short, deliberately small set of component-level custom
   properties for restyling one component without touching its internals. Each falls back to the
   semantic token it replaces, so setting none of them changes nothing:
@@ -2350,4 +3143,13 @@ colour literals and tier-1 references in component CSS.
   Reach for the least specific override that works: a global semantic token first, one of these
   second, an internal selector never. Component CSS declares many other `--zx-<component>-*`
   properties — those are internal geometry, not API, and will change without notice.
+
+**Base typography.** `.zx-scope` sets Inter with `--zx-tracking-tight` and the `cv11` feature (the
+single-storey a, chosen because it reads rounder and calmer at 13–14px; fonts without it ignore it).
+
+**Quiet fields.** Put `data-zx-fields="quiet"` on a property panel, an inspector, or an inline
+record: native inputs, selects, and textareas inside it drop their border and fill until hover
+(`--zx-color-bg-hover`) or focus (the normal border, the control fill, and the focus ring), so values
+read as text rather than as a wall of boxes. Read-only and disabled fields stay quiet. The rules have
+zero specificity, so a component's own input styling still wins.
 <!-- /doc -->