@zeyos/zx 4.3.4 → 5.0.0

package/src/zeyos/schema.js

@@ -1,4 +1,4 @@
-import { dateToUnixSeconds, unixSecondsToDate } from './query.js';
+import { calendarZone, dateToUnixSeconds, normalizeTimeZone, unixSecondsToDate } from './query.js';
 
 /** @typedef {Record<string, unknown>} FieldMeta */
 /**
@@ -11,6 +11,13 @@ import { dateToUnixSeconds, unixSecondsToDate } from './query.js';
  * @property {string[]} [fields] Curated allow-list; its order becomes the output order.
  * @property {string[]} [exclude] Field ids to omit.
  * @property {Record<string, string>} [labels] Per-field label overrides.
+ * @property {Record<string, string>} [formats] Per-field semantic format overrides (`date`,
+ * `datetime`, `money`, or any registered key). The schema types a timestamp only by its storage,
+ * so this is how a Unix-second field the built-in rules misread is declared a calendar day
+ * (`date`) or an instant (`datetime`).
+ * @property {string} [timeZone] IANA time zone of the ZeyOS instance, such as `Europe/Vienna`.
+ * Date-only fields store midnight of a calendar day in this zone; it is copied onto every field's
+ * metadata as `timeZone`. Defaults to the runtime's own zone.
  */
 
 /**
@@ -22,6 +29,49 @@ import { dateToUnixSeconds, unixSecondsToDate } from './query.js';
  */
 export const TYPE_MAP = Object.create(null);
 
+/**
+ * Unix-second fields ZeyOS stores as calendar days (midnight in the instance's zone) rather than
+ * instants: document and due dates, validity ranges, birthdays. `date` counts only when indexed —
+ * the unindexed ones (`imports`, `couponcodes`) record when something happened.
+ */
+const DATE_ONLY_FIELDS = new Set(['date', 'duedate', 'birthdate', 'datefrom', 'dateto', 'datecancel', 'lastbilling']);
+
+/**
+ * Fields with a date-only name that hold instants on their resource: appointment and event times,
+ * and when a stream record, comment, or document version was written.
+ */
+const INSTANT_FIELDS = new Set([
+  'appointments.datefrom', 'appointments.dateto', 'events.datefrom', 'events.dateto',
+  'comments.date', 'documentversions.date', 'records.date'
+]);
+
+/** Readable words for the ZeyOS enum constants that run several words together. */
+const ENUM_WORDS = Object.freeze({
+  AWAITINGACCEPTANCE: 'awaiting acceptance',
+  AWAITINGAPPROVAL: 'awaiting approval',
+  BILLINGONLY: 'billing only',
+  CUSTOMERANDSUPPLIER: 'customer and supplier',
+  FEEDBACKREQUIRED: 'feedback required',
+  INEVALUATION: 'in evaluation',
+  INNEGOTIATION: 'in negotiation',
+  INREVISION: 'in revision',
+  NOSTOCK: 'no stock',
+  NOTSTARTED: 'not started',
+  PARTLYDELIVERED: 'partly delivered',
+  PARTLYINVOICED: 'partly invoiced',
+  PARTLYORDERED: 'partly ordered',
+  PARTLYPAID: 'partly paid',
+  PROCUREMENTONLY: 'procurement only',
+  REMOTECALL: 'remote call',
+  SERIALSANDCHARGES: 'serials and charges'
+});
+
+/** Labels for a priority field whose schema carries no enum. */
+const PRIORITY_LABELS = Object.freeze({ 0: 'Lowest', 1: 'Low', 2: 'Medium', 3: 'High', 4: 'Highest' });
+
+/** An enum name in the constant style ZeyOS uses for stored values (`INVOICED`, `BILLING_QUOTE`). */
+const ENUM_CONSTANT = /^[A-Z][A-Z\d]*(?:_[A-Z\d]+)*$/;
+
 const warnedUnknownTypes = new Set();
 
 /**
@@ -74,7 +124,8 @@ export function fieldToZxField(meta) {
 /**
  * Converts normalized ZeyOS field metadata to a Zx Table column configuration. Renderers return
  * strings only (never DOM): references/enums show labels, numeric columns are right-aligned,
- * booleans show a check, and Unix seconds are formatted as dates.
+ * booleans show a check, and Unix seconds are formatted as dates — a date-only field as the
+ * calendar day it names in `meta.timeZone`, with no time; a date-time field with its time.
  * @param {FieldMeta} meta Normalized metadata containing at least `id` or `name`.
  * @returns {Record<string, unknown>} Plain Zx Table column descriptor.
  */
@@ -94,6 +145,8 @@ export function fieldToZxColumn(meta) {
  * client returns names from `schema.fields(resource)` and definitions from
  * `schema.describe(resource).fields`; embedded `enum` data is authoritative. A compatible
  * `schema.enums(resource, field)` is used when supplied by another client version/stub.
+ * `formats` overrides a field's semantic `format`, and `timeZone` is validated once and copied
+ * onto every field.
  * @param {Record<string, any>} client Injected `@zeyos/client` instance.
  * @param {string} resource Schema resource name such as `tickets`.
  * @param {ResolveFieldOptions} [opts={}] Curation options.
@@ -119,6 +172,8 @@ export function resolveFields(client, resource, opts = {}) {
   const requested = Array.isArray(opts.fields) ? opts.fields.map(String) : [...available.keys()];
   const excluded = new Set(Array.isArray(opts.exclude) ? opts.exclude.map(String) : []);
   const labels = opts.labels && typeof opts.labels === 'object' ? opts.labels : {};
+  const formats = opts.formats && typeof opts.formats === 'object' ? opts.formats : {};
+  const timeZone = normalizeTimeZone(opts.timeZone);
   const result = [];
 
   for (const id of requested) {
@@ -131,6 +186,8 @@ export function resolveFields(client, resource, opts = {}) {
       if (meta.enum == null) meta.enum = enumValues;
     }
     if (Object.prototype.hasOwnProperty.call(labels, id)) meta.label = String(labels[id]);
+    if (Object.prototype.hasOwnProperty.call(formats, id) && formats[id]) meta.format = String(formats[id]);
+    if (timeZone) meta.timeZone = timeZone;
     result.push(meta);
   }
   return result;
@@ -164,7 +221,7 @@ const enumColumn = {
 };
 const priorityColumn = {
   field: { type: 'zxselect', props: { preset: 'priority' } },
-  column: (meta) => ({ render: enumRenderer(meta, priorityOptions()) })
+  column: (meta) => ({ render: enumRenderer(meta, PRIORITY_LABELS) })
 };
 const percentColumn = {
   field: { type: 'float', props: { min: 0, max: 100 } },
@@ -212,10 +269,13 @@ for (const type of ['email', 'tel', 'url', 'uri']) {
 function dateStrategy(type) {
   return {
     field: { type },
-    column: (meta) => ({
-      render: (row) => formatUnixDate(rowValue(row, meta), type === 'datetime'),
-      sortValue: (row) => unixSortValue(rowValue(row, meta))
-    })
+    column: (meta) => {
+      const format = type === 'datetime' ? instantFormatter() : calendarDayFormatter(meta.timeZone);
+      return {
+        render: (row) => format(rowValue(row, meta)),
+        sortValue: (row) => unixSortValue(rowValue(row, meta))
+      };
+    }
   };
 }
 
@@ -241,9 +301,8 @@ function strategyKey(meta) {
 
   const raw = normalizeType(meta.type);
   if (raw === 'bigint' || raw === 'int64') {
-    const id = String(meta.id).toLowerCase();
-    if (id === 'date' && meta.indexed) return 'date';
-    if (/(?:date|time)$/.test(id)) return 'datetime';
+    const temporal = timestampKind(meta);
+    if (temporal) return temporal;
   }
   if (isLongText(meta, raw)) return 'longtext';
   if (raw && TYPE_MAP[raw]) return raw;
@@ -255,6 +314,22 @@ function strategyKey(meta) {
   return raw || semantic;
 }
 
+/**
+ * Tells a calendar-day timestamp from an instant by the field's name and resource, since the schema
+ * types both as `bigint`.
+ * @param {FieldMeta} meta
+ * @returns {'date'|'datetime'|null}
+ */
+function timestampKind(meta) {
+  const id = String(meta.id).toLowerCase();
+  const resource = String(meta.resource ?? '').toLowerCase();
+  if (DATE_ONLY_FIELDS.has(id) && !INSTANT_FIELDS.has(`${resource}.${id}`)) {
+    if (id !== 'date' || meta.indexed) return 'date';
+  }
+  if (INSTANT_FIELDS.has(`${resource}.${id}`) || /(?:date|time)$|^lastmodified$/.test(id)) return 'datetime';
+  return null;
+}
+
 /** @param {FieldMeta} meta @returns {FieldMeta & {id: string}} */
 function normalizeMeta(meta) {
   if (!meta || typeof meta !== 'object' || Array.isArray(meta)) throw new TypeError('Field metadata must be an object');
@@ -362,31 +437,41 @@ function normalizeEnumOptions(values) {
     return Object.fromEntries(values.map((entry, index) => {
       if (Array.isArray(entry)) {
         const [value = index, label = value] = entry;
-        return [String(value), String(label)];
+        return [String(value), enumLabel(label)];
       }
       if (entry && typeof entry === 'object') {
         const value = entry.value ?? entry.id ?? index;
-        return [String(value), String(entry.label ?? entry.name ?? value)];
+        return [String(value), entry.label != null ? String(entry.label) : enumLabel(entry.name ?? value)];
       }
-      return [String(index), String(entry)];
+      return [String(index), enumLabel(entry)];
     }));
   }
   if (values && typeof values === 'object') {
-    return Object.fromEntries(Object.entries(values).map(([value, label]) => [value, String(label)]));
+    return Object.fromEntries(Object.entries(values).map(([value, label]) => [value, enumLabel(label)]));
   }
   return {};
 }
 
+/**
+ * Turns a stored enum name into its label. A label the schema gives (`{value, label}`) never reaches
+ * this; what does is usually a constant such as `INVOICED` or `PARTLYPAID_CANCELLED`, shown in
+ * sentence case with its words separated ("Invoiced", "Partly paid cancelled"). Anything else is
+ * already a label and is kept as it is.
+ * @param {unknown} name Stored enum name.
+ * @returns {string}
+ */
+function enumLabel(name) {
+  const text = String(name ?? '');
+  if (!ENUM_CONSTANT.test(text)) return text;
+  const words = text.split('_').map((part) => ENUM_WORDS[part] ?? part.toLowerCase()).join(' ');
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+
 /** @param {FieldMeta} meta @returns {'optionlist'|'select'} */
 function enumFieldType(meta) {
   return Object.keys(enumOptions(meta)).length <= 5 ? 'optionlist' : 'select';
 }
 
-/** @returns {Record<string, string>} */
-function priorityOptions() {
-  return { '0': 'LOWEST', '1': 'LOW', '2': 'MEDIUM', '3': 'HIGH', '4': 'HIGHEST' };
-}
-
 /** @param {FieldMeta} meta @param {Record<string, string>} [fallback] @returns {(row: Record<string, unknown>) => string} */
 function enumRenderer(meta, fallback = {}) {
   const labels = { ...fallback, ...enumOptions(meta) };
@@ -426,17 +511,49 @@ function formatPercent(value) {
   return number == null ? '' : `${new Intl.NumberFormat().format(number)}%`;
 }
 
-/** @param {unknown} value @param {boolean} includeTime @returns {string} */
-function formatUnixDate(value, includeTime) {
-  if (value == null || value === '') return '';
+/**
+ * Formats a date-time field: the instant, in the viewer's zone, with its time.
+ * @returns {(value: unknown) => string}
+ */
+function instantFormatter() {
+  const formatter = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+  return (value) => {
+    const date = timestampDate(value);
+    return date ? formatter.format(date) : '';
+  };
+}
+
+/**
+ * Formats a date-only field: the calendar day the stored midnight names in the instance's zone,
+ * with no time, so neither the viewer's zone nor daylight saving can move it.
+ * @param {unknown} timeZone Instance zone from the field metadata; the runtime's own when absent.
+ * @returns {(value: unknown) => string}
+ */
+function calendarDayFormatter(timeZone) {
+  const zone = calendarZone(/** @type {string|undefined} */ (timeZone ?? undefined));
+  // The day is formatted as a UTC date so the formatter cannot shift it a second time.
+  const formatter = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeZone: 'UTC' });
+  return (value) => {
+    const date = timestampDate(value);
+    if (!date) return '';
+    // A Date value is already a local calendar day (a form's own value, say); seconds are stored.
+    const { year, month, day } = value instanceof Date
+      ? { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() }
+      : zone.dayOf(date.getTime());
+    const utc = new Date(0);
+    utc.setUTCFullYear(year, month, day);
+    return formatter.format(utc);
+  };
+}
+
+/** @param {unknown} value Unix seconds or a Date. @returns {Date|null} */
+function timestampDate(value) {
+  if (value == null || value === '') return null;
   try {
     const date = value instanceof Date ? value : unixSecondsToDate(/** @type {number|string} */ (value));
-    if (!date || !Number.isFinite(date.getTime())) return '';
-    return new Intl.DateTimeFormat(undefined, includeTime
-      ? { dateStyle: 'medium', timeStyle: 'short' }
-      : { dateStyle: 'medium' }).format(date);
+    return date && Number.isFinite(date.getTime()) ? date : null;
   } catch {
-    return '';
+    return null;
   }
 }
 

package/src/zeyos/table.js

@@ -4,10 +4,16 @@ import { buildListQuery } from './query.js';
 import { fieldToZxColumn, resolveFields } from './schema.js';
 import { normalizeZeyosListResult } from './select.js';
 
+/** @typedef {import('../components/table/table.js').TableOptions} TableOptions */
+
 /**
  * @typedef {Object} ZeyosTableOptions
  * @property {string[]} [fields] Curated ordered field allow-list.
  * @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 columns show the
+ * calendar day their stored midnight names in this zone; defaults to the runtime's own zone.
  * @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.
@@ -16,8 +22,42 @@ import { normalizeZeyosListResult } from './select.js';
  * @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.
+ * @property {TableOptions['variant']} [variant='default'] Table frame treatment; `'plain'` for a
+ * table inside a pane or card that already draws the box.
+ * @property {boolean} [zebra=true] Whether alternate rows use the zebra background.
+ * @property {boolean} [stickyHeader=true] Whether column headers stick while scrolling.
+ * @property {TableOptions['responsive']} [responsive=false] Width below which rows stack.
+ * @property {TableOptions['growing']} [growing=false] Rows rendered at first from a loaded page.
+ * @property {TableOptions['emptyText']} [emptyText=null] What the table shows with no rows.
+ * @property {TableOptions['rowClass']} [rowClass=null] Additional row class callback.
+ * @property {TableOptions['rowKind']} [rowKind=null] Row property or callback naming each row's kind.
+ * @property {TableOptions['rowKinds']} [rowKinds=null] Presentation per row kind.
+ * @property {boolean} [columnVisibility=false] Whether a column visibility chooser is rendered.
+ * @property {boolean} [columnReorder=false] Whether the column chooser exposes reorder controls.
+ * @property {string[]} [hiddenColumns=[]] Initially hidden column ids.
+ * @property {TableOptions['onrowclick']} [onrowclick] Table `rowclick` listener, beside `onRowClick`.
+ * @property {TableOptions['onrowdblclick']} [onrowdblclick] Table `rowdblclick` listener.
+ * @property {TableOptions['onsort']} [onsort] Table `sort` listener; the binding reloads either way.
+ * @property {TableOptions['onselectionchange']} [onselectionchange] Table `selectionchange` listener.
+ * @property {TableOptions['ondatachange']} [ondatachange] Table `datachange` listener.
+ * @property {TableOptions['onstackedchange']} [onstackedchange] Table `stackedchange` listener.
+ * @property {TableOptions['ongrow']} [ongrow] Table `grow` listener.
+ * @property {TableOptions['oncolumnvisibilitychange']} [oncolumnvisibilitychange] Table `columnvisibilitychange` listener.
+ * @property {TableOptions['oncolumnorderchange']} [oncolumnorderchange] Table `columnorderchange` listener.
  */
 
+/**
+ * Table options a binding passes through unchanged: presentation and listeners. The binding owns
+ * `columns`, `data`, and `sortMode`; editing, row reordering, and `hierarchy` are left out because
+ * they rearrange or change rows the server pages and never persists.
+ */
+const TABLE_OPTION_KEYS = [
+  'variant', 'zebra', 'stickyHeader', 'responsive', 'growing', 'emptyText', 'rowClass', 'rowKind',
+  'rowKinds', 'columnVisibility', 'columnReorder', 'hiddenColumns', 'onrowdblclick', 'onsort',
+  'onselectionchange', 'ondatachange', 'onstackedchange', 'ongrow', 'oncolumnvisibilitychange',
+  'oncolumnorderchange'
+];
+
 /**
  * @typedef {Object} ZeyosTableConfig
  * @property {Record<string, any>[]} fieldMeta Ordered normalized schema metadata.
@@ -59,7 +99,8 @@ import { normalizeZeyosListResult } from './select.js';
  * 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.
+ * column strategy and right alignment. Enum columns show labels, date-only columns calendar days in
+ * `timeZone`, and Table presentation options and listeners pass through to `tableOptions`.
  * @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.
@@ -68,7 +109,9 @@ import { normalizeZeyosListResult } from './select.js';
 export function buildZeyosTableConfig(client, resource, opts = {}) {
   const fieldMeta = resolveFields(client, resource, {
     fields: opts.fields,
-    labels: opts.labels
+    labels: opts.labels,
+    formats: opts.formats,
+    timeZone: opts.timeZone
   });
   const projection = {};
   const columns = fieldMeta.map((sourceMeta) => {
@@ -94,11 +137,16 @@ export function buildZeyosTableConfig(client, resource, opts = {}) {
   if (typeof rowId === 'string' && !Object.prototype.hasOwnProperty.call(projection, rowId)) {
     projection[rowId] = rowId;
   }
+  const passed = {};
+  for (const key of TABLE_OPTION_KEYS) {
+    if (opts[key] !== undefined) passed[key] = opts[key];
+  }
   return {
     fieldMeta,
     columns,
     projection,
     tableOptions: {
+      ...passed,
       columns,
       data: [],
       rowId,
@@ -106,9 +154,7 @@ export function buildZeyosTableConfig(client, resource, opts = {}) {
       sortMode: 'server',
       selectable: opts.selectable ?? false,
       height: opts.height ?? null,
-      onrowclick: typeof opts.onRowClick === 'function'
-        ? (event) => opts.onRowClick(event.detail.row, event)
-        : undefined
+      onrowclick: rowClickListener(opts)
     }
   };
 }
@@ -117,6 +163,8 @@ export function buildZeyosTableConfig(client, resource, opts = {}) {
  * 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()`.
+ * Table presentation options (`variant`, `zebra`, `stickyHeader`, `responsive`, `emptyText`, …) and
+ * listeners are passed through to the generated Table.
  * @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.
@@ -204,6 +252,21 @@ export function zeyosTable(client, resource, opts = {}) {
   return binding;
 }
 
+/**
+ * Combines the Table-style `onrowclick` listener with the binding's row-first `onRowClick`.
+ * @param {ZeyosTableOptions} opts
+ * @returns {((event: CustomEvent<Record<string, any>>) => void)|undefined}
+ */
+function rowClickListener(opts) {
+  const listener = typeof opts.onrowclick === 'function' ? opts.onrowclick : null;
+  const callback = typeof opts.onRowClick === 'function' ? opts.onRowClick : null;
+  if (!listener && !callback) return undefined;
+  return (event) => {
+    listener?.(event);
+    callback?.(event.detail.row, event);
+  };
+}
+
 /** @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]) {

package/src/zeyos/view.js

@@ -26,6 +26,10 @@ 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.
@@ -134,6 +138,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
   });

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;
@@ -67,6 +72,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 {
@@ -122,3 +162,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