@zeyos/zx 4.4.0 → 5.2.0

package/src/zeyos/view.js

@@ -1,8 +1,6 @@
-import { buildListQuery } from './query.js';
 import { connect } from './connect.js';
-import { normalizeZeyosListResult } from './select.js';
 import { createSavedViewRegistry } from './saved-views.js';
-import { buildZeyosTableConfig } from './table.js';
+import { buildZeyosTableConfig, createServerPager } from './table.js';
 
 /** @typedef {import('../components/view/record-view.js').ViewField} ViewField */
 /** @typedef {import('../components/view/record-view.js').ViewSort} ViewSort */
@@ -26,9 +24,14 @@ import { buildZeyosTableConfig } from './table.js';
  * @property {string[]} [fields] Curated ordered schema field allow-list.
  * @property {string[]} [exclude] Schema fields to omit.
  * @property {Record<string, string>} [labels] Per-field label overrides.
+ * @property {Record<string, string>} [formats] Per-field semantic format overrides, such as
+ * `{ duedate: 'date' }` for a Unix-second field that holds a calendar day.
+ * @property {string} [timeZone] IANA time zone of the ZeyOS instance; date-only fields show the
+ * calendar day their stored midnight names in it. Defaults to the runtime's own zone.
  * @property {Record<string, Partial<ViewField>>} [fieldOverrides] View descriptor overrides.
  * @property {string|((record:Record<string,unknown>)=>unknown)} [recordId='ID'] Record id accessor.
- * @property {number} [pageSize=50] Server page size.
+ * @property {number} [pageSize=50] Server page size, a positive integer — the same default and
+ * validation as `zeyosTable()`, because both bindings page through one shared loader.
  * @property {ViewSort|null} [sort=null] Initial server sort.
  * @property {Record<string, unknown>} [filters] Initial ZeyOS predicates.
  * @property {string} [search=''] Initial full-text query.
@@ -58,7 +61,10 @@ import { buildZeyosTableConfig } from './table.js';
  * @typedef {Object} ZeyosViewLoadOptions
  * @property {string} [search] Replacement full-text query.
  * @property {Record<string, unknown>} [filters] Replacement predicates.
- * @property {number} [page=0] Zero-based page; pages above zero append.
+ * @property {number} [page=0] Zero-based page, a non-negative integer; pages above zero append
+ * unless `replace` is set.
+ * @property {boolean} [replace] Replace the records with this page instead of appending it.
+ * @property {number} [pageSize] New page size for this and every later load.
  */
 
 /**
@@ -102,6 +108,7 @@ import { buildZeyosTableConfig } from './table.js';
  * @property {()=>Promise<ZeyosViewLoadResult>} loadMore Loads the next page when available.
  * @property {number|null} count Current server count.
  * @property {number} page Current zero-based page.
+ * @property {number} pageSize Current server page size.
  * @property {boolean} hasMore Whether another page is available.
  * @property {Record<string,any>|null} savedViews Saved-view registry when configured.
  * @property {Promise<SavedViewApplyResult|null>} ready Default restoration completed before loads.
@@ -134,6 +141,8 @@ export function buildZeyosViewConfig(client, resource, opts = {}) {
   const table = buildZeyosTableConfig(client, resource, {
     fields: requested,
     labels: opts.labels,
+    formats: opts.formats,
+    timeZone: opts.timeZone,
     rowId: opts.recordId ?? 'ID',
     sort: opts.sort ?? null
   });
@@ -192,7 +201,17 @@ export function zeyosView(client, resource, View, opts = {}) {
     }
   }
   const facade = connect(client);
-  const pageSize = normalizePageSize(opts.pageSize);
+  let pager;
+  try {
+    pager = createServerPager({
+      client, facade, resource, projection: config.projection, target: view,
+      pageSize: opts.pageSize, sort: opts.sort ?? null, filters: opts.filters ?? {}, search: opts.search,
+      searchFields: opts.searchFields, label: 'ZeyOS view'
+    });
+  } catch (error) {
+    view.destroy();
+    throw error;
+  }
   let saved;
   try {
     saved = resolveSavedViews(opts.savedViews, View, resource);
@@ -211,50 +230,8 @@ export function zeyosView(client, resource, View, opts = {}) {
       }
     }
   }
-  let currentSort = opts.sort ?? null;
-  let currentFilters = copyFilters(opts.filters ?? {});
-  let currentSearch = String(opts.search ?? '');
-  let currentPage = 0;
-  let totalCount = null;
-  let more = false;
-  let requestSequence = 0;
   let destroyed = false;
-
-  const performLoad = async (options = {}) => {
-    if (destroyed) throw new Error('ZeyOS view binding has been destroyed');
-    if (Object.prototype.hasOwnProperty.call(options, 'search')) currentSearch = String(options.search ?? '');
-    if (Object.prototype.hasOwnProperty.call(options, 'filters')) currentFilters = copyFilters(options.filters ?? {});
-    const page = normalizePage(options.page ?? 0);
-    const query = buildListQuery({
-      fields: config.projection,
-      sort: currentSort,
-      filters: currentFilters,
-      search: currentSearch,
-      searchFields: opts.searchFields,
-      limit: pageSize,
-      offset: page * pageSize,
-      count: true
-    });
-    const sequence = ++requestSequence;
-    view.setLoading(true);
-    try {
-      const normalized = normalizeZeyosListResult(client, await facade.list(resource, query));
-      const count = normalized.count ?? null;
-      const hasMore = count == null
-        ? normalized.data.length === pageSize
-        : page * pageSize + normalized.data.length < count;
-      if (!destroyed && sequence === requestSequence) {
-        currentPage = page;
-        totalCount = count;
-        more = hasMore;
-        if (page === 0) view.setData(normalized.data);
-        else view.addData(normalized.data);
-      }
-      return { data: normalized.data, count, page, hasMore, query };
-    } finally {
-      if (!destroyed && sequence === requestSequence) view.setLoading(false);
-    }
-  };
+  const performLoad = pager.load;
 
   /** @param {string} idOrName @param {{load?:boolean}} [options={}] @returns {Promise<SavedViewApplyResult>} */
   const applySaved = async (idOrName, options = {}) => {
@@ -264,15 +241,12 @@ export function zeyosView(client, resource, View, opts = {}) {
       type: presentation,
       onQuery: async ({ filters, search }) => {
         if (destroyed) return;
-        currentFilters = copyFilters(filters ?? {});
-        currentSearch = String(search ?? '');
+        pager.setQuery({ filters: savedFilters(filters), search });
       }
     });
     if (!result.applied || destroyed) return result;
-    currentSort = appliedViewSort(view, result.entry);
-    currentPage = 0;
-    totalCount = null;
-    more = false;
+    pager.setSort(appliedViewSort(view, result.entry));
+    pager.reset();
     if (options.load !== false) await performLoad({ page: 0 });
     return result;
   };
@@ -326,6 +300,8 @@ export function zeyosView(client, resource, View, opts = {}) {
   };
 
   const load = async (options = {}) => {
+    // Rejected before saved-view initialization runs, so an invalid call has no side effect.
+    pager.check(options);
     await ensureInitialized({ load: false });
     return performLoad(options);
   };
@@ -340,8 +316,8 @@ export function zeyosView(client, resource, View, opts = {}) {
       name: String(source.name ?? ''),
       type: presentation,
       state: view.getViewState(),
-      filters: copyFilters(currentFilters),
-      search: currentSearch
+      filters: pager.filters,
+      search: pager.search
     };
   };
 
@@ -371,8 +347,9 @@ export function zeyosView(client, resource, View, opts = {}) {
   };
 
   const sortHandler = (event) => {
+    if (destroyed) return;
     const id = event.detail?.id;
-    currentSort = id == null ? null : { id: String(id), dir: event.detail.dir === 'desc' ? 'desc' : 'asc' };
+    pager.setSort(id == null ? null : { id: String(id), dir: event.detail.dir === 'desc' ? 'desc' : 'asc' });
     void load({ page: 0 }).catch(() => { /* connect() already reported the API failure. */ });
   };
 
@@ -383,26 +360,12 @@ export function zeyosView(client, resource, View, opts = {}) {
     setFilters: (filters) => load({ filters, page: 0 }),
     loadMore: async () => {
       await ensureInitialized({ load: false });
-      return more ? performLoad({ page: currentPage + 1 }) : {
-        data: [],
-        count: totalCount,
-        page: currentPage,
-        hasMore: false,
-        query: buildListQuery({
-          fields: config.projection,
-          sort: currentSort,
-          filters: currentFilters,
-          search: currentSearch,
-          searchFields: opts.searchFields,
-          limit: pageSize,
-          offset: currentPage * pageSize,
-          count: true
-        })
-      };
+      return pager.loadMore();
     },
-    get count() { return totalCount; },
-    get page() { return currentPage; },
-    get hasMore() { return more; },
+    get count() { return pager.count; },
+    get page() { return pager.page; },
+    get pageSize() { return pager.pageSize; },
+    get hasMore() { return pager.hasMore; },
     savedViews,
     ready,
     restoreDefault,
@@ -412,7 +375,7 @@ export function zeyosView(client, resource, View, opts = {}) {
     destroy: () => {
       if (destroyed) return;
       destroyed = true;
-      requestSequence += 1;
+      pager.destroy();
       if (typeof view.off === 'function') view.off('sortchange', sortHandler);
       else view.removeEventListener?.('sortchange', sortHandler);
       if (saved?.owned) savedViews?.destroy?.();
@@ -450,21 +413,14 @@ function supplementalFieldIds(opts) {
   return [...new Set(ids)];
 }
 
-/** @param {unknown} value @returns {number} */
-function normalizePageSize(value) {
-  const number = Number(value ?? 50);
-  return Number.isFinite(number) ? Math.max(1, Math.floor(number)) : 50;
-}
-
-/** @param {unknown} value @returns {number} */
-function normalizePage(value) {
-  const number = Number(value);
-  return Number.isFinite(number) ? Math.max(0, Math.floor(number)) : 0;
-}
-
-/** @param {unknown} value @returns {Record<string, unknown>} */
-function copyFilters(value) {
-  return value && typeof value === 'object' && !Array.isArray(value) ? { ...value } : {};
+/**
+ * Filters restored from a saved view are persisted data, not a caller's argument: a malformed
+ * entry reads as no filters rather than failing the restore.
+ * @param {unknown} value Stored filters.
+ * @returns {Record<string, unknown>}
+ */
+function savedFilters(value) {
+  return value && typeof value === 'object' && !Array.isArray(value) ? { .../** @type {Record<string, unknown>} */ (value) } : {};
 }
 
 /**

package/styles/base.css

@@ -12,6 +12,11 @@
   color: var(--zx-color-text);
   font-family: var(--zx-font-sans);
   font-size: var(--zx-text-md);
+  /* Inter at 13–14px reads better a touch tight. `cv11` is Inter's single-storey a: at interface
+     sizes it is rounder and calmer than the double-storey form, and it tells a from o and e
+     apart at least as well. Fonts without the feature ignore it. */
+  font-feature-settings: "cv11";
+  letter-spacing: var(--zx-tracking-tight);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   scrollbar-gutter: stable;
@@ -27,6 +32,20 @@
   box-shadow: var(--zx-focus-ring);
 }
 
+/* Forced colours (Windows high contrast) drop every box-shadow, so the accent ring disappears and
+   the outline is the only focus indicator left. Components therefore never set `outline: 0` or
+   `outline: none` on a focusable element — they make it transparent (`outline-color:
+   transparent`, plus `outline-offset: -2px` where the ring is inset) and this rule paints it in a
+   system colour. `tests/lint-tokens.js` rejects outline suppression outside a marked exception.
+   `!important` because a component's own, more specific `outline-color: transparent` would
+   otherwise survive on an element that opts out with `forced-color-adjust: none` (a current item
+   filled with Highlight). Offsets are left to the component, so inset rings stay inset. */
+@media (forced-colors: active) {
+  .zx-scope :focus-visible {
+    outline: 2px solid Highlight !important;
+  }
+}
+
 .zx-scope ::selection {
   background: var(--zx-color-accent);
   color: var(--zx-color-on-accent);
@@ -67,6 +86,41 @@
   background: var(--zx-color-bg-hover);
 }
 
+/* Quiet fields. Inside `[data-zx-fields="quiet"]` — a property panel, an inspector, an inline
+   record — native text inputs, selects, and textareas drop their border and fill so the values
+   read as text, and show that they are editable on hover (the hover fill) and on focus (the
+   normal border, the control fill, and the focus ring). Read-only and disabled fields never
+   light up. Zero specificity, like the defaults above: a component that styles its own inner
+   input keeps doing so. Composite controls opt in through their own stylesheets. */
+:where(.zx-scope[data-zx-fields="quiet"], .zx-scope [data-zx-fields="quiet"]) :where(
+  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
+    [type="button"], [type="submit"], [type="reset"], [type="image"]),
+  select,
+  textarea
+) {
+  border-color: transparent;
+  background: transparent;
+}
+
+:where(.zx-scope[data-zx-fields="quiet"], .zx-scope [data-zx-fields="quiet"]) :where(
+  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
+    [type="button"], [type="submit"], [type="reset"], [type="image"]),
+  select,
+  textarea
+):where(:hover:not(:focus, :disabled, [readonly])) {
+  background: var(--zx-color-bg-hover);
+}
+
+:where(.zx-scope[data-zx-fields="quiet"], .zx-scope [data-zx-fields="quiet"]) :where(
+  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
+    [type="button"], [type="submit"], [type="reset"], [type="image"]),
+  select,
+  textarea
+):where(:focus:not([readonly])) {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+
 /* Ghost icon button: a borderless, transparent hit target for small glyph actions
    (notification close, closable tab ×, field clear). Square, no chrome until hovered. */
 .zx-scope .zx-icon-btn {
@@ -89,7 +143,8 @@
 }
 
 .zx-scope .zx-icon-btn:focus-visible {
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
@@ -122,3 +177,19 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Motion as a setting: the same stop inside any `data-zx-motion="reduced"` region, whatever the
+   operating system says (`tokens/global.css` zeroes the duration tokens there too). Only movement
+   stops — every transition and animation still runs to its end state, at once, and still fires its
+   end event, so a menu still opens and a toast still leaves; a spinner stops turning. There is no
+   value that re-enables motion inside a reduced region. */
+[data-zx-motion="reduced"],
+[data-zx-motion="reduced"] *,
+[data-zx-motion="reduced"] *::before,
+[data-zx-motion="reduced"] *::after,
+[data-zx-motion="reduced"] *::backdrop {
+  scroll-behavior: auto !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}

package/styles/icons.css

@@ -1,7 +1,14 @@
 /* Icons.
    Every icon `icon()` builds carries `.zx-icon`, whether it is one of the bundled inline SVG
    glyphs or a Font Awesome element, so the rules below (and component rules) style both. Font
-   Awesome icons are sized by font-size and occupy exactly one em. */
+   Awesome icons are sized by font-size and occupy exactly one em.
+
+   The bundled glyphs are outlines: the `<svg>` carries `fill="none"`, `stroke="currentColor"`,
+   round caps and joins, and a stroke width in view-box units (1.75 of 24, never under one CSS
+   pixel), and the path inherits all of it. The width therefore scales with the box an icon is
+   drawn in and needs no `vector-effect`. Glyphs registered as `[viewBox, path]` pairs stay filled.
+   Paint is presentation attributes, so plain CSS on `.zx-icon` overrides it: `fill: currentColor`
+   turns an outline into its solid form (a set star, a liked heart). */
 
 .zx-icon {
   flex: none;
@@ -17,6 +24,9 @@ i.zx-icon {
 
 svg.zx-icon {
   vertical-align: middle;
+  /* A stroke centred on a path near the view-box edge reaches past it; small icons thicken the
+     line to stay at one pixel, so let it draw instead of clipping the outer half. */
+  overflow: visible;
 }
 
 /* ZeyOS identity hook. `moduleChip()` now delegates vessel geometry and material entirely to

package/styles/print.css

@@ -115,7 +115,7 @@
 
   .zx-scope :focus,
   .zx-scope :focus-visible {
-    outline: none;
+    outline: none; /* lint: outline-ok — printed pages have no focus to show */
     box-shadow: none;
   }
 

package/styles/tokens/dark.css

@@ -1,49 +1,95 @@
 /*
- * Tier-2 semantic tokens — dark theme: a near-black page, raised neutral surfaces, muted fills,
- * translucent white borders (10%) and inputs (15%), and restrained secondary text.
+ * Tier-2 semantic tokens — dark theme: a charcoal page lifted off black, a chrome tone and four
+ * surface steps above it, translucent white borders (9%) and inputs (14%), text softened to about
+ * 90% white, and restrained secondary text.
  *
- * The accent roles take the light end of the `--zx-accent-*` ramp (300/400/500) where the light
- * theme takes the dark end, so a preset that repoints the ramp lands correctly in both.
+ * The accent roles take the light end of the `--zx-accent-*` ramp (300/400/500) for text, marks,
+ * and the focus ring, where the light theme takes the dark end, so a preset that repoints the ramp
+ * lands correctly in both. The solid accent is the exception: the primary button keeps the 600 stop
+ * with white ink in both themes rather than turning into a bright 400 slab.
+ *
+ * Every role that mixes another theme-dependent role (hover and current mix the text colour, tones
+ * and status fills mix the surface) is restated here, because a custom property resolves where it
+ * is declared: inherited from the light block, it would carry light values into a dark region.
  *
  * The `[data-zx-theme="auto"]` block below repeats these assignments under a
  * `prefers-color-scheme` query; CSS has no way to share a declaration block across a media
- * boundary, so the two lists must be kept in sync.
+ * boundary, so the two lists must be kept in sync — `tests/unit/tokens.test.js` fails if they drift.
  */
 [data-zx-theme="dark"] {
   color-scheme: dark;
-  --zx-color-bg-page: var(--zx-gray-950);
-  --zx-color-bg-surface: var(--zx-gray-900);
-  --zx-color-bg-raised: var(--zx-gray-800);
+  /* The ramp is lifted off black: page, chrome, surface, raised, and the overlay base ascend in
+     that order, each mixed from two Zinc stops so a tinted neutral ramp carries through. */
+  --zx-color-bg-page: color-mix(in srgb, var(--zx-gray-900) 80%, var(--zx-gray-800));
+  /* Chrome sits just above the page and below the canvas: as in light, the working area is the
+     brightest column and the navigation and inspector recede. */
+  --zx-color-bg-chrome: color-mix(in srgb, var(--zx-color-bg-page) 75%, var(--zx-color-bg-surface));
+  --zx-color-bg-surface: color-mix(in srgb, var(--zx-gray-900) 40%, var(--zx-gray-800));
+  --zx-color-bg-raised: color-mix(in srgb, var(--zx-gray-800) 90%, var(--zx-gray-700));
   --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
-  --zx-color-bg-muted: var(--zx-gray-800);
-  --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
-  --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
+  --zx-color-bg-muted: var(--zx-color-bg-raised);
+  --zx-color-bg-hover: color-mix(in srgb, var(--zx-color-text) 5%, transparent);
+  --zx-color-bg-current: color-mix(in srgb, var(--zx-color-text) 9%, transparent);
+  /* Picked, not current: a tint light enough that muted text on it keeps 4.5:1 under every preset. */
+  --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 13%, var(--zx-color-bg-surface));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
-  --zx-color-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+  --zx-color-overlay-base: color-mix(in srgb, var(--zx-gray-800) 60%, var(--zx-gray-700));
   --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, transparent);
-  --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
-  --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
-  --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);
-  --zx-color-text: var(--zx-gray-50);
+  --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 9%, transparent);
+  --zx-color-border-subtle: color-mix(in srgb, var(--zx-gray-0) 6%, transparent);
+  --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
+  --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 14%, transparent);
+  /* Text is softened off pure white (about 90%), secondary text sits near 63%. */
+  --zx-color-text: var(--zx-gray-200);
   --zx-color-text-muted: var(--zx-gray-400);
+  --zx-color-text-subtle: color-mix(in srgb, var(--zx-gray-500) 50%, var(--zx-gray-400));
   --zx-color-text-placeholder: var(--zx-gray-500);
   --zx-color-text-invert: var(--zx-gray-950);
   --zx-color-accent: var(--zx-accent-400);
   --zx-color-accent-hover: var(--zx-accent-300);
   --zx-color-accent-active: var(--zx-accent-500);
-  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
+  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-color-bg-surface));
   --zx-color-on-accent: var(--zx-gray-950);
+  /* The primary button does not glow: it keeps the 600 stop and white ink, as in light. */
+  --zx-color-accent-solid: var(--zx-accent-600);
+  --zx-color-accent-solid-hover: var(--zx-accent-700);
+  --zx-color-accent-solid-active: color-mix(in srgb, var(--zx-accent-700) 82%, var(--zx-gray-950));
+  --zx-color-on-accent-solid: var(--zx-gray-0);
+  /* Danger's tint is a little lighter than the other statuses' so its ink keeps 4.5:1 on it. */
   --zx-color-danger: var(--zx-red-400);
-  --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));
+  --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 13%, var(--zx-color-bg-surface));
   --zx-color-warning: var(--zx-amber-400);
-  --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-gray-900));
+  --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-color-bg-surface));
   --zx-color-success: var(--zx-green-400);
-  --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+  --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-color-bg-surface));
   --zx-color-info: var(--zx-blue-400);
-  --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-gray-900));
+  --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-color-bg-surface));
+  --zx-color-tone-blue-bg: color-mix(in srgb, var(--zx-tone-blue-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-blue-fg: var(--zx-tone-blue-300);
+  --zx-color-tone-teal-bg: color-mix(in srgb, var(--zx-tone-teal-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-teal-fg: var(--zx-tone-teal-300);
+  --zx-color-tone-green-bg: color-mix(in srgb, var(--zx-tone-green-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-green-fg: var(--zx-tone-green-300);
+  --zx-color-tone-amber-bg: color-mix(in srgb, var(--zx-tone-amber-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-amber-fg: var(--zx-tone-amber-300);
+  --zx-color-tone-orange-bg: color-mix(in srgb, var(--zx-tone-orange-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-orange-fg: var(--zx-tone-orange-300);
+  --zx-color-tone-red-bg: color-mix(in srgb, var(--zx-tone-red-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-red-fg: var(--zx-tone-red-300);
+  --zx-color-tone-pink-bg: color-mix(in srgb, var(--zx-tone-pink-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-pink-fg: var(--zx-tone-pink-300);
+  --zx-color-tone-violet-bg: color-mix(in srgb, var(--zx-tone-violet-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-violet-fg: var(--zx-tone-violet-300);
+  --zx-color-tone-slate-bg: color-mix(in srgb, var(--zx-tone-slate-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-slate-fg: var(--zx-tone-slate-300);
   --zx-color-ring: var(--zx-color-accent);
   --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
+  /* The surface contact shadow keeps the light value: on a dark canvas the border, not the shadow,
+     separates a resting surface, and a heavier shadow would read as a lifted one. */
+  --zx-surface-shadow: var(--zx-shadow-1);
   --zx-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
+  /* A shadow alone barely reads on a dark canvas, so the lifted item also gets a faint light rim. */
+  --zx-drag-shadow: 0 0 0 1px color-mix(in srgb, var(--zx-gray-0) 7%, transparent), 0 2px 6px -1px rgb(0 0 0 / 40%), 0 14px 32px -6px rgb(0 0 0 / 60%);
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }
@@ -51,39 +97,73 @@
 @media (prefers-color-scheme: dark) {
   [data-zx-theme="auto"] {
     color-scheme: dark;
-    --zx-color-bg-page: var(--zx-gray-950);
-    --zx-color-bg-surface: var(--zx-gray-900);
-    --zx-color-bg-raised: var(--zx-gray-800);
+    /* The ramp is lifted off black: page, chrome, surface, raised, and the overlay base ascend in
+       that order, each mixed from two Zinc stops so a tinted neutral ramp carries through. */
+    --zx-color-bg-page: color-mix(in srgb, var(--zx-gray-900) 80%, var(--zx-gray-800));
+    /* Chrome sits just above the page and below the canvas: as in light, the working area is the
+       brightest column and the navigation and inspector recede. */
+    --zx-color-bg-chrome: color-mix(in srgb, var(--zx-color-bg-page) 75%, var(--zx-color-bg-surface));
+    --zx-color-bg-surface: color-mix(in srgb, var(--zx-gray-900) 40%, var(--zx-gray-800));
+    --zx-color-bg-raised: color-mix(in srgb, var(--zx-gray-800) 90%, var(--zx-gray-700));
     --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
-    --zx-color-bg-muted: var(--zx-gray-800);
-    --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
-    --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
+    --zx-color-bg-muted: var(--zx-color-bg-raised);
+    --zx-color-bg-hover: color-mix(in srgb, var(--zx-color-text) 5%, transparent);
+    --zx-color-bg-current: color-mix(in srgb, var(--zx-color-text) 9%, transparent);
+    --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 13%, var(--zx-color-bg-surface));
     --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
-    --zx-color-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+    --zx-color-overlay-base: color-mix(in srgb, var(--zx-gray-800) 60%, var(--zx-gray-700));
     --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, transparent);
-    --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
-    --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
-    --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);
-    --zx-color-text: var(--zx-gray-50);
+    --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 9%, transparent);
+    --zx-color-border-subtle: color-mix(in srgb, var(--zx-gray-0) 6%, transparent);
+    --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
+    --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 14%, transparent);
+    /* Text is softened off pure white (about 90%), secondary text sits near 63%. */
+    --zx-color-text: var(--zx-gray-200);
     --zx-color-text-muted: var(--zx-gray-400);
+    --zx-color-text-subtle: color-mix(in srgb, var(--zx-gray-500) 50%, var(--zx-gray-400));
     --zx-color-text-placeholder: var(--zx-gray-500);
     --zx-color-text-invert: var(--zx-gray-950);
     --zx-color-accent: var(--zx-accent-400);
     --zx-color-accent-hover: var(--zx-accent-300);
     --zx-color-accent-active: var(--zx-accent-500);
-    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
+    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-color-bg-surface));
     --zx-color-on-accent: var(--zx-gray-950);
+    /* The primary button does not glow: it keeps the 600 stop and white ink, as in light. */
+    --zx-color-accent-solid: var(--zx-accent-600);
+    --zx-color-accent-solid-hover: var(--zx-accent-700);
+    --zx-color-accent-solid-active: color-mix(in srgb, var(--zx-accent-700) 82%, var(--zx-gray-950));
+    --zx-color-on-accent-solid: var(--zx-gray-0);
     --zx-color-danger: var(--zx-red-400);
-    --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));
+    --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 13%, var(--zx-color-bg-surface));
     --zx-color-warning: var(--zx-amber-400);
-    --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-gray-900));
+    --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-color-bg-surface));
     --zx-color-success: var(--zx-green-400);
-    --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+    --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-color-bg-surface));
     --zx-color-info: var(--zx-blue-400);
-    --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-gray-900));
+    --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-color-bg-surface));
+    --zx-color-tone-blue-bg: color-mix(in srgb, var(--zx-tone-blue-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-blue-fg: var(--zx-tone-blue-300);
+    --zx-color-tone-teal-bg: color-mix(in srgb, var(--zx-tone-teal-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-teal-fg: var(--zx-tone-teal-300);
+    --zx-color-tone-green-bg: color-mix(in srgb, var(--zx-tone-green-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-green-fg: var(--zx-tone-green-300);
+    --zx-color-tone-amber-bg: color-mix(in srgb, var(--zx-tone-amber-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-amber-fg: var(--zx-tone-amber-300);
+    --zx-color-tone-orange-bg: color-mix(in srgb, var(--zx-tone-orange-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-orange-fg: var(--zx-tone-orange-300);
+    --zx-color-tone-red-bg: color-mix(in srgb, var(--zx-tone-red-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-red-fg: var(--zx-tone-red-300);
+    --zx-color-tone-pink-bg: color-mix(in srgb, var(--zx-tone-pink-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-pink-fg: var(--zx-tone-pink-300);
+    --zx-color-tone-violet-bg: color-mix(in srgb, var(--zx-tone-violet-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-violet-fg: var(--zx-tone-violet-300);
+    --zx-color-tone-slate-bg: color-mix(in srgb, var(--zx-tone-slate-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-slate-fg: var(--zx-tone-slate-300);
     --zx-color-ring: var(--zx-color-accent);
     --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
+    --zx-surface-shadow: var(--zx-shadow-1);
     --zx-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
+    --zx-drag-shadow: 0 0 0 1px color-mix(in srgb, var(--zx-gray-0) 7%, transparent), 0 2px 6px -1px rgb(0 0 0 / 40%), 0 14px 32px -6px rgb(0 0 0 / 60%);
     --zx-header-bg: var(--zx-gray-900);
     --zx-header-text: var(--zx-gray-50);
   }