@zeyos/zx 2.1.0 → 2.2.0

package/src/zeyos/table.js

@@ -0,0 +1,272 @@
+import { Table } from '../index.js';
+import { connect } from './connect.js';
+import { buildListQuery } from './query.js';
+import { fieldToZxColumn, resolveFields } from './schema.js';
+import { normalizeZeyosListResult } from './select.js';
+
+/**
+ * @typedef {Object} ZeyosTableOptions
+ * @property {string[]} [fields] Curated ordered field allow-list.
+ * @property {Record<string, string>} [labels] Per-field label overrides.
+ * @property {string|((row: Record<string, unknown>) => unknown)} [rowId='ID'] Row id accessor.
+ * @property {number} [pageSize=50] Server page size.
+ * @property {{id: string, dir: 'asc'|'desc'}|null} [sort=null] Initial server sort.
+ * @property {Record<string, unknown>} [filters] Initial ZeyOS predicates.
+ * @property {string} [search=''] Initial full-text query.
+ * @property {false|'single'|'multi'} [selectable=false] Row selection mode.
+ * @property {number|string|null} [height=null] Table scroll-region height.
+ * @property {(row: Record<string, unknown>, event: CustomEvent<Record<string, unknown>>) => void} [onRowClick] Row activation callback.
+ */
+
+/**
+ * @typedef {Object} ZeyosTableConfig
+ * @property {Record<string, any>[]} fieldMeta Ordered normalized schema metadata.
+ * @property {Record<string, any>[]} columns Generated Zx columns.
+ * @property {Record<string, string>} projection API projection including row ids/entity labels.
+ * @property {Record<string, any>} tableOptions Plain Zx Table options.
+ */
+
+/**
+ * @typedef {Object} ZeyosTableLoadOptions
+ * @property {string} [search] Replacement full-text query.
+ * @property {Record<string, unknown>} [filters] Replacement ZeyOS predicates.
+ * @property {number} [page=0] Zero-based page; pages above zero append rows.
+ */
+
+/**
+ * @typedef {Object} ZeyosTableLoadResult
+ * @property {Record<string, unknown>[]} data Loaded page rows.
+ * @property {number|null} count Server count when supplied.
+ * @property {number} page Loaded zero-based page.
+ * @property {boolean} hasMore Whether another page is available.
+ * @property {Record<string, unknown>} query Request passed to the list operation.
+ */
+
+/**
+ * @typedef {Object} ZeyosTableBinding
+ * @property {Table} table Generated Zx table.
+ * @property {(options?: ZeyosTableLoadOptions) => Promise<ZeyosTableLoadResult>} load Loads/reloads a server page.
+ * @property {(search: string) => Promise<ZeyosTableLoadResult>} setSearch Replaces search and reloads page zero.
+ * @property {(filters: Record<string, unknown>) => Promise<ZeyosTableLoadResult>} setFilters Replaces predicates and reloads page zero.
+ * @property {() => Promise<ZeyosTableLoadResult>} loadMore Appends the next page when available.
+ * @property {number|null} count Current server count.
+ * @property {number} page Current zero-based page.
+ * @property {boolean} hasMore Whether another page is available.
+ * @property {() => void} destroy Destroys the generated table.
+ */
+
+/**
+ * Builds the DOM-free schema-derived columns and Table options used by {@link zeyosTable}. Entity
+ * projections include an `<field>_label` alias from a real label field on the referenced resource.
+ * Amount fields use each row's real `currency` value for display while retaining the WP14 typed
+ * column strategy and right alignment.
+ * @param {Record<string, any>} client Injected ZeyOS client instance.
+ * @param {string} resource Resource name such as `transactions`.
+ * @param {ZeyosTableOptions} [opts={}] Schema, table, and initial query options.
+ * @returns {ZeyosTableConfig} Plain columns, projection, and Table options.
+ */
+export function buildZeyosTableConfig(client, resource, opts = {}) {
+  const fieldMeta = resolveFields(client, resource, {
+    fields: opts.fields,
+    labels: opts.labels
+  });
+  const projection = {};
+  const columns = fieldMeta.map((sourceMeta) => {
+    const meta = { ...sourceMeta };
+    const referencedResource = referencedResourceFor(meta);
+    if (referencedResource) {
+      const labelKey = inferLabelKey(client, referencedResource);
+      meta.labelField = `${meta.id}_label`;
+      projection[meta.labelField] = `${meta.id}.${labelKey}`;
+    }
+    projection[meta.id] = meta.id;
+
+    const monetary = isMonetaryField(meta);
+    const column = fieldToZxColumn(monetary ? { ...meta, format: 'money' } : meta);
+    if (monetary) {
+      column.render = (row) => formatCurrency(row?.[meta.id], row?.currency);
+      if (schemaHasField(client, resource, 'currency')) projection.currency = 'currency';
+    }
+    return column;
+  });
+
+  const rowId = opts.rowId ?? 'ID';
+  if (typeof rowId === 'string' && !Object.prototype.hasOwnProperty.call(projection, rowId)) {
+    projection[rowId] = rowId;
+  }
+  return {
+    fieldMeta,
+    columns,
+    projection,
+    tableOptions: {
+      columns,
+      data: [],
+      rowId,
+      sort: opts.sort ?? null,
+      sortMode: 'server',
+      selectable: opts.selectable ?? false,
+      height: opts.height ?? null,
+      onrowclick: typeof opts.onRowClick === 'function'
+        ? (event) => opts.onRowClick(event.detail.row, event)
+        : undefined
+    }
+  };
+}
+
+/**
+ * Generates a server-backed Zx Table. Sorting automatically reloads page zero. `load({page: 0})`
+ * replaces data, higher pages append it, and `loadMore()` uses `limit`/`offset` plus the returned
+ * count. DataFilter callers can map state with `dataFilterStateToFilters` before `setFilters()`.
+ * @param {Record<string, any>} client Injected ZeyOS client instance.
+ * @param {string} resource Resource name such as `transactions`.
+ * @param {ZeyosTableOptions} [opts={}] Schema, table, and initial query options.
+ * @returns {ZeyosTableBinding} Generated table and server-state methods/getters.
+ */
+export function zeyosTable(client, resource, opts = {}) {
+  const config = buildZeyosTableConfig(client, resource, opts);
+  const facade = connect(client);
+  const table = new Table(null, config.tableOptions);
+  const pageSize = normalizePageSize(opts.pageSize);
+  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;
+
+  const load = async (options = {}) => {
+    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,
+      limit: pageSize,
+      offset: page * pageSize,
+      count: true
+    });
+    const sequence = ++requestSequence;
+    table.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 (sequence === requestSequence) {
+        currentPage = page;
+        totalCount = count;
+        more = hasMore;
+        if (page === 0) table.setData(normalized.data);
+        else table.addData(normalized.data);
+      }
+      return { data: normalized.data, count, page, hasMore, query };
+    } finally {
+      if (sequence === requestSequence) table.setLoading(false);
+    }
+  };
+
+  const binding = {
+    table,
+    load,
+    setSearch: (search) => load({ search, page: 0 }),
+    setFilters: (filters) => load({ filters, page: 0 }),
+    loadMore: () => more ? load({ page: currentPage + 1 }) : Promise.resolve({
+      data: [],
+      count: totalCount,
+      page: currentPage,
+      hasMore: false,
+      query: buildListQuery({
+        fields: config.projection,
+        sort: currentSort,
+        filters: currentFilters,
+        search: currentSearch,
+        limit: pageSize,
+        offset: currentPage * pageSize,
+        count: true
+      })
+    }),
+    get count() { return totalCount; },
+    get page() { return currentPage; },
+    get hasMore() { return more; },
+    destroy: () => table.destroy()
+  };
+
+  table.on('sort', (event) => {
+    currentSort = { id: String(event.detail.id), dir: event.detail.dir === 'desc' ? 'desc' : 'asc' };
+    void load({ page: 0 }).catch(() => { /* The connection facade already reported the failure. */ });
+  });
+  return binding;
+}
+
+/** @param {Record<string, any>} meta @returns {string|null} */
+function referencedResourceFor(meta) {
+  for (const value of [meta.entity, meta.fk, meta.relation, meta.reference, meta.references]) {
+    if (typeof value === 'string' && value) return value;
+    if (value && typeof value === 'object') {
+      const resource = value.resource ?? value.target ?? value.table ?? value.entity;
+      if (typeof resource === 'string' && resource) return resource;
+    }
+  }
+  return null;
+}
+
+/** @param {Record<string, any>} client @param {string} resource @returns {string} */
+function inferLabelKey(client, resource) {
+  const fields = client?.schema?.fields?.(resource);
+  const names = Array.isArray(fields) ? fields.map(String) : Object.keys(fields ?? {});
+  for (const candidate of ['name', 'lastname', 'customernum', 'transactionnum', 'number', 'title', 'ID']) {
+    if (names.includes(candidate)) return candidate;
+  }
+  return names[0] ?? 'ID';
+}
+
+/** @param {Record<string, any>} meta @returns {boolean} */
+function isMonetaryField(meta) {
+  const format = String(meta.format ?? '').toLowerCase();
+  return /money|currency|price/.test(format) || /(?:amount|price)$/.test(String(meta.id).toLowerCase());
+}
+
+/** @param {unknown} value @param {unknown} currency @returns {string} */
+function formatCurrency(value, currency) {
+  if (value == null || value === '') return '';
+  const number = Number(value);
+  if (!Number.isFinite(number)) return '';
+  const code = typeof currency === 'string' && /^[A-Z]{3}$/.test(currency) ? currency : null;
+  try {
+    return new Intl.NumberFormat(undefined, code ? { style: 'currency', currency: code } : {}).format(number);
+  } catch {
+    return new Intl.NumberFormat().format(number);
+  }
+}
+
+/** @param {Record<string, any>} client @param {string} resource @param {string} id @returns {boolean} */
+function schemaHasField(client, resource, id) {
+  const fields = client?.schema?.fields?.(resource);
+  if (Array.isArray(fields)) return fields.includes(id);
+  return Boolean(fields && typeof fields === 'object' && Object.prototype.hasOwnProperty.call(fields, id));
+}
+
+/** @param {unknown} value @returns {number} */
+function normalizePageSize(value) {
+  const number = Number(value ?? 50);
+  return Number.isInteger(number) && number > 0 ? number : 50;
+}
+
+/** @param {unknown} value @returns {number} */
+function normalizePage(value) {
+  const number = Number(value);
+  if (!Number.isInteger(number) || number < 0) throw new RangeError('ZeyOS table page must be a non-negative integer');
+  return number;
+}
+
+/** @param {Record<string, unknown>} filters @returns {Record<string, unknown>} */
+function copyFilters(filters) {
+  if (!filters || typeof filters !== 'object' || Array.isArray(filters)) {
+    throw new TypeError('ZeyOS table filters must be an object');
+  }
+  return { ...filters };
+}

package/styles/base.css

@@ -0,0 +1,124 @@
+.zx-scope,
+.zx-scope *,
+.zx-scope *::before,
+.zx-scope *::after {
+  box-sizing: border-box;
+}
+
+.zx-scope {
+  min-block-size: 100%;
+  margin: 0;
+  background: var(--zx-color-bg-page);
+  color: var(--zx-color-text);
+  font-family: var(--zx-font-sans);
+  font-size: var(--zx-text-md);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  scrollbar-gutter: stable;
+}
+
+/* One focus ring only — ours. Without this the browser keeps painting its own ring (a blue
+   outline in Chrome/Safari) at the border edge, so a focused control showed a blue border inside
+   our accent glow. The replacement outline is transparent rather than removed: forced-colors mode
+   drops box-shadows but forces outline-color to a system colour, so focus stays visible there. */
+.zx-scope :focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-scope ::selection {
+  background: var(--zx-color-accent);
+  color: var(--zx-color-on-accent);
+}
+
+/* Native-control defaults are wrapped in :where() so they contribute ZERO specificity:
+   any component class (.zx-tabbox__tab, .zx-message__close, …) overrides them without a
+   specificity fight. This is the default chrome for otherwise-unstyled controls. */
+:where(.zx-scope button:not(.zx-icon-btn)),
+:where(.zx-scope input, .zx-scope select, .zx-scope textarea) {
+  min-block-size: var(--zx-control-height);
+  border: 1px solid var(--zx-color-border-control);
+  border-radius: var(--zx-control-radius);
+  background: var(--zx-color-bg-control);
+  color: var(--zx-color-text);
+  font: inherit;
+  font-size: var(--zx-control-font-size);
+  transition: color var(--zx-dur-fast) var(--zx-ease),
+    background-color var(--zx-dur-fast) var(--zx-ease),
+    border-color var(--zx-dur-fast) var(--zx-ease),
+    box-shadow var(--zx-dur-fast) var(--zx-ease);
+}
+
+:where(.zx-scope button:not(.zx-icon-btn)) {
+  font-weight: var(--zx-control-font-weight);
+}
+
+:where(.zx-scope button:not(.zx-icon-btn), .zx-scope select, .zx-scope textarea),
+:where(.zx-scope input:not([type="checkbox"]):not([type="radio"])) {
+  padding-inline: var(--zx-control-pad-x);
+}
+
+:where(.zx-scope button) {
+  cursor: pointer;
+}
+
+:where(.zx-scope button:not(.zx-icon-btn)):hover {
+  background: var(--zx-color-bg-hover);
+}
+
+/* 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 {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  inline-size: var(--zx-control-height);
+  block-size: var(--zx-control-height);
+  padding: 0;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: none;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+
+.zx-scope .zx-icon-btn:hover {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+
+.zx-scope .zx-icon-btn:focus-visible {
+  outline: 0;
+  box-shadow: inset var(--zx-focus-ring);
+}
+
+.zx-scope .zx-icon-btn:disabled {
+  color: var(--zx-color-text-placeholder);
+  cursor: not-allowed;
+}
+
+/* Search-term highlight produced by highlightMatch(). No padding and no border, so marking a run
+   of text never shifts the line it sits in. */
+.zx-scope .zx-mark {
+  padding: 0;
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-accent-subtle);
+  color: var(--zx-color-text);
+}
+
+.zx-scope input::placeholder,
+.zx-scope textarea::placeholder {
+  color: var(--zx-color-text-placeholder);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zx-scope *,
+  .zx-scope *::before,
+  .zx-scope *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/styles/icons.css

@@ -0,0 +1,34 @@
+/* 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. */
+
+.zx-icon {
+  flex: none;
+}
+
+i.zx-icon {
+  display: inline-block;
+  inline-size: 1em;
+  block-size: 1em;
+  line-height: 1;
+  text-align: center;
+}
+
+svg.zx-icon {
+  vertical-align: middle;
+}
+
+/* ZeyOS module icon chip: the module glyph on its identity colour. `moduleChip()` sets the three
+   custom properties per module; the glyph is whichever ZeyOS foreground contrasts better. */
+.zx-module-icon {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: var(--zx-module-icon-size, 1.5rem);
+  block-size: var(--zx-module-icon-size, 1.5rem);
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-module-color, var(--zx-module-default));
+  color: var(--zx-module-glyph, var(--zx-module-fg-light));
+  font-size: calc(var(--zx-module-icon-size, 1.5rem) * 0.6);
+}

package/styles/tokens/dark.css

@@ -0,0 +1,84 @@
+/*
+ * Tier-2 semantic tokens — dark theme, from the shadcn/ui preset `b2BVl11e4` (Zinc):
+ * Zinc-950 page, Zinc-900 cards and popovers, Zinc-800 muted fills, translucent white borders
+ * (10%) and inputs (15%), Zinc-400 muted text.
+ *
+ * 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.
+ */
+[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);
+  --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-green-400) 18%, var(--zx-gray-900));
+  --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, 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-text-muted: 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-green-400);
+  --zx-color-accent-hover: var(--zx-green-300);
+  --zx-color-accent-active: var(--zx-green-500);
+  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+  --zx-color-on-accent: var(--zx-gray-950);
+  --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-warning: var(--zx-amber-400);
+  --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-gray-900));
+  --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-info: var(--zx-blue-400);
+  --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-gray-900));
+  --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-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
+  --zx-header-bg: var(--zx-gray-900);
+  --zx-header-text: var(--zx-gray-50);
+}
+
+@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);
+    --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-green-400) 18%, var(--zx-gray-900));
+    --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, 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-text-muted: 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-green-400);
+    --zx-color-accent-hover: var(--zx-green-300);
+    --zx-color-accent-active: var(--zx-green-500);
+    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+    --zx-color-on-accent: var(--zx-gray-950);
+    --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-warning: var(--zx-amber-400);
+    --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-gray-900));
+    --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-info: var(--zx-blue-400);
+    --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-gray-900));
+    --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-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
+    --zx-header-bg: var(--zx-gray-900);
+    --zx-header-text: var(--zx-gray-50);
+  }
+}

package/styles/tokens/density.css

@@ -0,0 +1,9 @@
+[data-zx-density="compact"] {
+  --zx-control-height: 28px;
+  --zx-control-pad-x: var(--zx-space-2);
+  --zx-text-md: 13px;
+  --zx-space-1: 3px;
+  --zx-space-2: 6px;
+  --zx-space-3: 10px;
+  --zx-space-4: 14px;
+}

package/styles/tokens/global.css

@@ -0,0 +1,80 @@
+/*
+ * Tier-1 palette and primitives.
+ *
+ * Derived from the shadcn/ui preset `b2BVl11e4` (style Nova · base colour Zinc · theme Zinc ·
+ * chart colour Emerald · Inter · radius small). The neutral ramp is Tailwind Zinc; the accent
+ * ramp is the preset's Emerald chart ramp, anchored at 400 to the ZeyOS brand green #21cc75.
+ *
+ * Only tier-2 semantic tokens (tokens/semantic.css, tokens/dark.css) may reference these.
+ * Component CSS must never use them directly — tests/lint-tokens.js enforces that.
+ */
+:root {
+  /* Neutrals — Tailwind Zinc */
+  --zx-gray-0: #ffffff;
+  --zx-gray-50: #fafafa;
+  --zx-gray-100: #f4f4f5;
+  --zx-gray-150: #ececee;
+  --zx-gray-200: #e4e4e7;
+  --zx-gray-300: #d4d4d8;
+  --zx-gray-400: #9f9fa9;
+  --zx-gray-500: #71717b;
+  --zx-gray-600: #52525c;
+  --zx-gray-700: #3f3f47;
+  --zx-gray-800: #27272a;
+  --zx-gray-900: #18181b;
+  --zx-gray-950: #09090b;
+
+  /* Accent — the preset's Emerald chart ramp, with the ZeyOS brand green at 400 */
+  --zx-green-300: #5ee9b5;
+  --zx-green-400: #21cc75;
+  --zx-green-500: #009966;
+  --zx-green-600: #007a55;
+  --zx-green-700: #006045;
+
+  /* Status */
+  --zx-red-400: #ff6467;
+  --zx-red-500: #e7000b;
+  --zx-red-600: #c10007;
+  --zx-amber-400: #ffb900;
+  --zx-amber-500: #fe9a00;
+  --zx-amber-600: #bb4d00;
+  --zx-blue-400: #51a2ff;
+  --zx-blue-500: #2b7fff;
+  --zx-blue-600: #155dfc;
+
+  --zx-space-1: 4px;
+  --zx-space-2: 8px;
+  --zx-space-3: 12px;
+  --zx-space-4: 16px;
+  --zx-space-5: 20px;
+  --zx-space-6: 24px;
+  --zx-space-7: 32px;
+  --zx-space-8: 40px;
+
+  /* Radius — the preset's `--radius: 0.45rem`, with shadcn's derived steps */
+  --zx-radius: 0.45rem;
+  --zx-radius-sm: calc(var(--zx-radius) - 4px);
+  --zx-radius-md: calc(var(--zx-radius) - 2px);
+  --zx-radius-lg: var(--zx-radius);
+  --zx-radius-xl: calc(var(--zx-radius) + 4px);
+  --zx-radius-full: 999px;
+
+  --zx-font-sans: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --zx-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
+  --zx-text-xs: 12px;
+  --zx-text-sm: 13px;
+  --zx-text-md: 14px;
+  --zx-text-lg: 16px;
+  --zx-text-xl: 18px;
+  --zx-text-2xl: 24px;
+
+  --zx-shadow-1: 0 1px 2px 0 rgb(9 9 11 / 5%);
+  --zx-shadow-2: 0 1px 3px 0 rgb(9 9 11 / 10%), 0 1px 2px -1px rgb(9 9 11 / 10%);
+  --zx-shadow-3: 0 10px 15px -3px rgb(9 9 11 / 10%), 0 4px 6px -4px rgb(9 9 11 / 10%);
+
+  --zx-dur-fast: 120ms;
+  --zx-dur-base: 180ms;
+  --zx-ease: cubic-bezier(.2, .6, .3, 1);
+}