@zeyos/zx 5.0.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 */
@@ -32,7 +30,8 @@ import { buildZeyosTableConfig } from './table.js';
  * 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.
@@ -62,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.
  */
 
 /**
@@ -106,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.
@@ -198,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);
@@ -217,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 = {}) => {
@@ -270,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;
   };
@@ -332,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);
   };
@@ -346,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
     };
   };
 
@@ -377,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. */ });
   };
 
@@ -389,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,
@@ -418,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?.();
@@ -456,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

@@ -32,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);
@@ -129,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);
 }
 

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

@@ -84,6 +84,9 @@
   --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%);
@@ -158,6 +161,7 @@
     --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);

package/styles/tokens/semantic.css

@@ -12,6 +12,44 @@
  * `tokens/themes.css` retheme them. Status colours keep their own ramps on purpose — see the note
  * in that file.
  */
+/*
+ * Geometry and material settings — every token here is theme-independent, so it is declared on
+ * :root ONLY and never restated on a `[data-zx-theme]` block. A custom property declared on a
+ * theme element shadows the inherited one, so a nested `[data-zx-theme="light"]` region would
+ * otherwise reset an application's own `:root { --zx-control-height: 40px }` back to the default
+ * while a dark region kept it. There is one geometry; the theme blocks below carry colours only,
+ * and `tests/unit/geometry-tokens.test.js` fails if a non-colour token moves back into one.
+ */
+:root {
+  --zx-control-height: 30px;
+  --zx-control-pad-x: 10px;
+  --zx-control-radius: var(--zx-radius-lg);
+  --zx-control-font-size: var(--zx-text-md);
+  --zx-control-font-weight: 500;
+  /* Blur applied behind a backdrop that asked for it. */
+  --zx-overlay-blur: 8px;
+  /* AppIcon is a dark chromatic lens: colour lives in its rim and low bloom, not a glossy fill.
+     Its strengths remain inherited, while each AppIcon mixes them with its own module colour. */
+  --zx-app-icon-core-strength: 52%;
+  --zx-app-icon-rim-strength: 58%;
+  --zx-app-icon-bloom-strength: 64%;
+  --zx-app-icon-specular-strength: 72%;
+  --zx-app-icon-halo-size: 14px;
+  --zx-app-icon-halo-strength: 22%;
+  --zx-overlay-specular-strength: 48%;
+  --zx-glass-blur: 8px;
+  --zx-glass-saturation: 130%;
+  --zx-glass-color-strength: 82%;
+  /* Material filters are roles, not component recipes. Aurora remains a separate canvas layer. */
+  --zx-glass-filter-icon: blur(4px) saturate(118%);
+  --zx-glass-filter-control: blur(6px) saturate(116%);
+  --zx-glass-filter-raised: blur(8px) saturate(120%);
+  --zx-glass-filter-chrome: blur(10px) saturate(122%);
+  --zx-glass-filter-overlay: blur(16px) saturate(140%);
+  --zx-glass-filter-panel: blur(14px) saturate(132%);
+}
+
+/* The light theme — colours only. */
 :root,
 [data-zx-theme="light"] {
   color-scheme: light;
@@ -80,41 +118,30 @@
   --zx-color-chart-6: var(--zx-tone-green-500);
   --zx-color-chart-7: var(--zx-tone-violet-500);
   --zx-color-chart-8: var(--zx-tone-red-500);
-  --zx-control-height: 30px;
-  --zx-control-pad-x: 10px;
-  --zx-control-radius: var(--zx-radius-lg);
-  --zx-control-font-size: var(--zx-text-md);
-  --zx-control-font-weight: 500;
+  /* Solid identity fills — a module tile, an application icon — carrying the white icon glyph.
+     The 500 stops keep that glyph at 3:1 or better and read as the same tone on either theme,
+     so, like the chart series, the dark theme keeps this list. */
+  --zx-color-tone-blue-solid: var(--zx-tone-blue-500);
+  --zx-color-tone-teal-solid: var(--zx-tone-teal-500);
+  --zx-color-tone-green-solid: var(--zx-tone-green-500);
+  --zx-color-tone-amber-solid: var(--zx-tone-amber-500);
+  --zx-color-tone-orange-solid: var(--zx-tone-orange-500);
+  --zx-color-tone-red-solid: var(--zx-tone-red-500);
+  --zx-color-tone-pink-solid: var(--zx-tone-pink-500);
+  --zx-color-tone-violet-solid: var(--zx-tone-violet-500);
+  --zx-color-tone-slate-solid: var(--zx-tone-slate-500);
+  /* A resting surface one hair off what it sits on — a panel, an outlined card in a lane, a slider
+     thumb: a contact shadow only, far below an overlay or a dragged item. */
+  --zx-surface-shadow: var(--zx-shadow-1);
   --zx-overlay-shadow: var(--zx-shadow-3);
   /* An item being dragged — a lifted card, a row in flight, a drag preview: a tight contact
      shadow and a wide soft one, clearly higher than a resting card and lower than an overlay. */
   --zx-drag-shadow: 0 2px 4px -1px color-mix(in srgb, var(--zx-gray-950) 10%, transparent),
     0 12px 28px -6px color-mix(in srgb, var(--zx-gray-950) 22%, transparent);
-  /* Blur applied behind a backdrop that asked for it. Theme-independent, so light defines it once. */
-  --zx-overlay-blur: 8px;
   --zx-color-glass-border: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight-strong: color-mix(in srgb, var(--zx-gray-0) 38%, transparent);
-  /* AppIcon is a dark chromatic lens: colour lives in its rim and low bloom, not a glossy fill. */
-  /* Strengths remain inherited, while each AppIcon mixes them with its own module colour. */
-  --zx-app-icon-core-strength: 52%;
-  --zx-app-icon-rim-strength: 58%;
-  --zx-app-icon-bloom-strength: 64%;
-  --zx-app-icon-specular-strength: 72%;
-  --zx-app-icon-halo-size: 14px;
-  --zx-app-icon-halo-strength: 22%;
   --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
-  --zx-overlay-specular-strength: 48%;
-  --zx-glass-blur: 8px;
-  --zx-glass-saturation: 130%;
-  --zx-glass-color-strength: 82%;
-  /* Material filters are roles, not component recipes. Aurora remains a separate canvas layer. */
-  --zx-glass-filter-icon: blur(4px) saturate(118%);
-  --zx-glass-filter-control: blur(6px) saturate(116%);
-  --zx-glass-filter-raised: blur(8px) saturate(120%);
-  --zx-glass-filter-chrome: blur(10px) saturate(122%);
-  --zx-glass-filter-overlay: blur(16px) saturate(140%);
-  --zx-glass-filter-panel: blur(14px) saturate(132%);
   --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
   --zx-glass-chrome-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 16%, transparent), var(--zx-shadow-1);
   --zx-header-bg: var(--zx-gray-900);
@@ -126,8 +153,9 @@
  * tone tints — are restated on every theme element, not only on :root. A custom property is
  * resolved where it is declared and inherited as a finished value, so a dark region on a light
  * page would otherwise inherit light glass and light overlays. The dark theme, which loads later,
- * overrides the ones it derives differently. Geometry and the base palette stay on :root, so an
- * application's own overrides there still reach nested regions.
+ * overrides the ones it derives differently. Geometry and the base palette stay on :root (the block
+ * at the top of this file and tokens/global.css), so an application's own overrides there still
+ * reach nested regions.
  */
 :root,
 [data-zx-theme] {

package/styles/zx.css

@@ -37,7 +37,9 @@
 @import url("../src/components/activity-item/activity-item.css");
 @import url("../src/components/activity-list/activity-list.css");
 @import url("../src/components/account-menu/account-menu.css");
+@import url("../src/components/workspace-switcher/workspace-switcher.css");
 @import url("../src/components/app-rail/app-rail.css");
+@import url("../src/components/module-bar/module-bar.css");
 @import url("../src/components/app-sidebar/app-sidebar.css");
 @import url("../src/components/message/message.css");
 @import url("../src/components/modal/modal.css");
@@ -68,6 +70,7 @@
 @import url("../src/components/stat-tile/stat-tile.css");
 @import url("../src/components/card-view/card-view.css");
 @import url("../src/components/kanban-view/kanban-view.css");
+@import url("../src/components/view-settings/view-settings.css");
 @import url("../src/components/grid/grid.css");
 @import url("../src/components/chart/chart.css");
 @import url("../src/components/tree/tree.css");