@zeyos/zx 4.0.0 → 4.1.0

package/src/components/tag-picker/tag-picker.css

@@ -47,6 +47,22 @@
   line-height: 1.5;
 }
 
+.zx-tag-picker__tag[data-colored="true"] {
+  border-color: color-mix(in srgb, var(--zx-tag-color) 48%, var(--zx-color-border));
+  background: color-mix(in srgb, var(--zx-tag-color) 14%, var(--zx-color-bg-muted));
+}
+
+.zx-tag-picker__visual {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: 18px;
+  block-size: 18px;
+  border-radius: var(--zx-radius-sm);
+  background: color-mix(in srgb, var(--zx-tag-color, var(--zx-color-accent)) 16%, transparent);
+  color: var(--zx-tag-color, var(--zx-color-accent));
+}
+
 .zx-tag-picker__tag:not(:has(.zx-tag-picker__remove)) {
   padding-inline-end: var(--zx-space-2);
 }
@@ -152,6 +168,9 @@
 }
 
 .zx-tag-picker__option-label {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/components/tag-picker/tag-picker.js

@@ -2,7 +2,7 @@ import { Component } from '../../core/component.js';
 import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
 import { position } from '../../core/position.js';
-import { uid } from '../../core/util.js';
+import { isCssColor, uid } from '../../core/util.js';
 import { matchItems } from '../select/filter.js';
 
 /** @typedef {Record<string, any>|string|number} TagItem */
@@ -14,6 +14,8 @@ import { matchItems } from '../select/filter.js';
  * @property {unknown[]} [values=[]] Initially selected IDs.
  * @property {TagValueReader} [valueKey='ID'] Item ID property or reader.
  * @property {TagLabelReader} [labelKey='name'] Item label property or reader.
+ * @property {TagValueReader} [iconKey='icon'] Optional item icon property or reader.
+ * @property {TagValueReader} [colorKey='color'] Optional item colour property or reader.
  * @property {Array<TagValueReader>|null} [searchKeys=null] Fields searched by local filtering.
  * @property {'local'|((query: string) => Promise<TagItem[]>|TagItem[])} [filter='local'] Filtering mode.
  * @property {number} [minQuery=0] Minimum async query length.
@@ -65,6 +67,8 @@ export class TagPicker extends Component {
     values: [],
     valueKey: 'ID',
     labelKey: 'name',
+    iconKey: 'icon',
+    colorKey: 'color',
     searchKeys: null,
     filter: 'local',
     minQuery: 0,
@@ -411,9 +415,14 @@ export class TagPicker extends Component {
   _renderTags() {
     const tags = this._selected.map((item) => {
       const label = this._labelOf(item);
-      const content = this.options.renderTag ? this.options.renderTag(item) : label;
-      const tag = h('span', { class: 'zx-tag-picker__tag' },
-        h('span', { class: 'zx-tag-picker__tag-label' }, content));
+      const color = this._colorOf(item);
+      const content = this.options.renderTag ? this.options.renderTag(item)
+        : [this._iconOf(item), h('span', { class: 'zx-tag-picker__tag-label' }, label)];
+      const tag = h('span', {
+        class: 'zx-tag-picker__tag',
+        dataset: { colored: String(Boolean(color)) },
+        style: color ? { '--zx-tag-color': color } : null
+      }, content);
       if (!this._readonly && !this._disabled) {
         tag.append(h('button', {
           class: 'zx-icon-btn zx-tag-picker__remove',
@@ -446,7 +455,8 @@ export class TagPicker extends Component {
       h('span', { class: 'zx-tag-picker__check', ariaHidden: 'true' },
         selected ? icon('check', { size: 13 }) : null),
       h('span', { class: 'zx-tag-picker__option-label' },
-        this.options.renderItem ? this.options.renderItem(item) : this._labelOf(item)));
+        this.options.renderItem ? this.options.renderItem(item)
+          : [this._iconOf(item), h('span', {}, this._labelOf(item))]));
       if (!selected && this.isFull()) option.setAttribute('aria-disabled', 'true');
       this._entries.push({ item, element: option, create: false });
       nodes.push(option);
@@ -773,6 +783,33 @@ export class TagPicker extends Component {
     return String(item ?? '');
   }
 
+  /** @param {unknown} item @returns {Node|null} */
+  _iconOf(item) {
+    const value = this._readItem(item, this.options.iconKey);
+    const visual = value && typeof value === 'object' && typeof value.nodeType === 'number'
+      ? /** @type {Node} */ (value).cloneNode(true)
+      : typeof value === 'string' && value.trim() ? icon(value, { size: 12 }) : null;
+    if (!visual) return null;
+    return h('span', {
+      class: 'zx-tag-picker__visual',
+      style: this._colorOf(item) ? { '--zx-tag-color': this._colorOf(item) } : null,
+      ariaHidden: 'true'
+    }, visual);
+  }
+
+  /** @param {unknown} item @returns {string|null} */
+  _colorOf(item) {
+    const value = this._readItem(item, this.options.colorKey);
+    return isCssColor(value) ? value : null;
+  }
+
+  /** @param {unknown} item @param {unknown} reader @returns {unknown} */
+  _readItem(item, reader) {
+    if (typeof reader === 'function') return reader(/** @type {TagItem} */ (item));
+    if (item !== null && typeof item === 'object' && typeof reader === 'string') return item[reader];
+    return null;
+  }
+
   /** @returns {void} */
   _emitChange() {
     this.emit('change', { values: this.getValues(), items: this.getItems() });

package/src/core/dom.js

@@ -92,7 +92,7 @@ export function compactElement(compact, properties = null, content = null) {
   return element;
 }
 
-/** Exact migration-facing alias retained for existing ZeyOS builder calls. */
+/** Public compact-builder alias for concise application DOM construction. */
 export const __ = compactElement;
 
 /**

package/src/core/util.js

@@ -122,6 +122,26 @@ export function isElement(value) {
     && /** @type {{nodeType?: unknown}} */ (value).nodeType === 1);
 }
 
+/**
+ * Accepts concrete CSS colours while rejecting image/function values that could make a colour
+ * descriptor trigger a network request when it is later consumed through a custom property.
+ * `CSS.supports()` provides the authoritative browser check; the conservative fallback covers
+ * ordinary named, hexadecimal, and functional colours in non-browser test environments.
+ * @param {unknown} value Candidate colour.
+ * @returns {value is string}
+ */
+export function isCssColor(value) {
+  if (typeof value !== 'string') return false;
+  const text = value.trim();
+  if (!text || text.length > 256 || /[;{}\u0000-\u001f\u007f]/.test(text)
+    || /(?:url|image|image-set|cross-fade|element|var)\s*\(/i.test(text)) return false;
+  const supports = globalThis.CSS?.supports;
+  if (typeof supports === 'function') {
+    try { return supports.call(globalThis.CSS, 'color', text); } catch { return false; }
+  }
+  return /^(?:#[\da-f]{3,8}|[a-z]+|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\([^;{}]+\))$/i.test(text);
+}
+
 /**
  * Restricts a number to an inclusive range.
  * @param {number} n Value to restrict.

package/src/index.js

@@ -101,6 +101,7 @@ export { Stepper } from './components/stepper/stepper.js';
 export { Breadcrumb } from './components/breadcrumb/breadcrumb.js';
 export { Pagination, paginationRange } from './components/pagination/pagination.js';
 export { Search } from './components/search/search.js';
+export { AppIcon, appIcon } from './components/app-icon/app-icon.js';
 export { Launcher, rankLauncherItems } from './components/launcher/launcher.js';
 export { Avatar, avatarInitials } from './components/avatar/avatar.js';
 export { AccountMenu } from './components/account-menu/account-menu.js';
@@ -132,7 +133,7 @@ export {
   DateRangeBox, formatRangeText, parseRangeText
 } from './components/datebox/date-range-box.js';
 export { Timebox, splitTime, joinTime } from './components/timebox/timebox.js';
-export { Table } from './components/table/table.js';
+export { Table, reorderTableRows } from './components/table/table.js';
 export { Grid, billingColumns, isBillingLine } from './components/grid/grid.js';
 export {
   Chart, ChartJsAdapter, chartSummaryTable, cloneChartValue, isEmptyChartData
@@ -140,6 +141,11 @@ export {
 export { TreeView } from './components/tree/tree.js';
 export { Finder } from './components/finder/finder.js';
 export { DataFilter } from './components/data-filter/data-filter.js';
+export { Filter } from './components/filter/filter.js';
+export {
+  filterOperators, emptyFilterAst, filterCondition, filterGroup,
+  parseFilterAst, cloneFilterAst, stringifyFilterAst, validateFilterAst
+} from './components/filter/filter-model.js';
 export { Field } from './components/field/field.js';
 export { Fieldset } from './components/fieldset/fieldset.js';
 export { Form } from './components/form/form.js';

package/src/zeyos/icons.js

@@ -4,7 +4,9 @@
  * @module zx/zeyos/icons
  */
 
-import { h, icon, loadFontAwesome } from '../index.js';
+import { icon, loadFontAwesome } from '../index.js';
+import { appIcon } from '../components/app-icon/app-icon.js';
+import { isCssColor } from '../core/util.js';
 import { moduleGlyphColor, moduleInfo, normalizeModuleName } from './modules.js';
 
 /**
@@ -51,11 +53,13 @@ export function moduleIcon(name, options = {}) {
 /**
  * @typedef {Object} ModuleChipOptions
  * @property {number|string} [size=24] Chip edge length.
- * @property {number|string} [iconSize='1em'] Glyph size; `1em` is 60% of the chip edge.
+ * @property {number|string} [iconSize='52%'] Glyph size relative to the tile edge.
  * @property {string|null} [label=null] Accessible label; null marks the chip decorative.
  * @property {boolean} [title=false] Adds the module's display name as a `title` tooltip.
  * @property {boolean} [standard=false] Use the stock Font Awesome fallback glyph.
+ * @property {string|Node|(()=>string|Node)|null} [icon] Explicit glyph override, useful for an offline fallback.
  * @property {string} [color] Override the module colour for a server-defined fork or weblet.
+ * @property {false|'subtle'|'strong'} [glass='subtle'] AppIcon material treatment.
  * @property {string|string[]} [class] Extra class names.
  */
 
@@ -69,29 +73,38 @@ export function moduleIcon(name, options = {}) {
  */
 export function moduleChip(name, options = {}) {
   const {
-    size = 24, iconSize = '1em', label = null, title = false, standard = false,
+    size = 24, iconSize = '52%', label = null, title = false, standard = false,
     color = null
   } = options;
   const key = normalizeModuleName(name);
   const info = moduleInfo(name);
-  const background = color || info.color;
+  const background = isCssColor(color) ? color : info.color;
 
-  const chip = h('span', {
-    class: ['zx-module-icon', options.class].flat().filter(Boolean),
-    dataset: { module: key },
-    style: {
-      '--zx-module-color': background,
-      '--zx-module-glyph': moduleGlyphColor(background),
-      '--zx-module-icon-size': typeof size === 'number' ? `${size}px` : String(size)
-    },
-    title: title ? info.label : null
-  }, moduleIcon(name, { size: iconSize, standard }));
-
-  if (label === null) {
-    chip.setAttribute('aria-hidden', 'true');
-  } else {
-    chip.setAttribute('role', 'img');
-    chip.setAttribute('aria-label', label);
-  }
+  const chip = appIcon({
+    // AppIcon owns glyph sizing. Keep the provider glyph at 1em so the percentage is not applied
+    // once to the wrapper and a second time to a Font Awesome <i>.
+    icon: options.icon ?? moduleIcon(name, { size: '1em', standard }),
+    size,
+    iconSize,
+    color: background,
+    label,
+    glass: options.glass ?? 'subtle',
+    class: ['zx-module-icon', options.class].flat().filter(Boolean)
+  });
+  chip.dataset.module = key;
+  chip.style.setProperty('--zx-module-color', background);
+  chip.style.setProperty('--zx-module-glyph', moduleGlyphColor(background));
+  chip.style.setProperty('--zx-app-icon-glyph', moduleGlyphColor(background));
+  if (title) chip.title = info.label;
   return chip;
 }
+
+/**
+ * Creates the public ZeyOS AppIcon preset for any module, entity, fork, or weblet identity.
+ * @param {string} name Module/entity identifier.
+ * @param {ModuleChipOptions} [options={}] AppIcon options.
+ * @returns {HTMLElement}
+ */
+export function zeyosAppIcon(name, options = {}) {
+  return moduleChip(name, options);
+}

package/src/zeyos/index.js

@@ -15,7 +15,7 @@ export {
   zeyosModules, moduleAliases, moduleInfo, moduleColor, moduleIconName, moduleKeys,
   moduleGlyphColor, normalizeModuleName, registerModules
 } from './modules.js';
-export { ZEYOS_ICON_KIT, useZeyosIcons, moduleIcon, moduleChip } from './icons.js';
+export { ZEYOS_ICON_KIT, useZeyosIcons, moduleIcon, moduleChip, zeyosAppIcon } from './icons.js';
 export {
   ZEYOS_LAUNCHER_APPLICATIONS, buildZeyosLauncherConfig, zeyosLauncher,
   normalizeZeyosLauncherApplications, normalizeZeyosLauncherRecords, zeyosActiveIdentifier

package/src/zeyos/select.js

@@ -1,4 +1,4 @@
-import { Select, h, icon } from '../index.js';
+import { Select, h } from '../index.js';
 import { connect } from './connect.js';
 import { moduleChip } from './icons.js';
 import { buildListQuery } from './query.js';
@@ -104,6 +104,7 @@ export function zeyosSelect(client, resource, opts = {}) {
  *   subtitleKey?: string|((item: Record<string, unknown>) => unknown)|null,
  *   moduleKey?: string|((item: Record<string, unknown>) => unknown),
  *   none?: boolean|string,
+ *   recent?: Record<string, unknown>[],
  *   create?: boolean|{id?: string|number, label?: string, group?: string, icon?: string|Node, oninvoke?: Function},
  *   renderIcon?: ((item: Record<string, unknown>, context: Record<string, unknown>) => Node|null)|null
  * }} [opts={}] Entity presentation, query, and Select options.
@@ -119,6 +120,7 @@ export function buildZeyosEntitySelectConfig(client, resource, opts = {}) {
     moduleKey = () => resource,
     groupKey = null,
     none = true,
+    recent = [],
     create = false,
     renderIcon = defaultEntityIcon,
     renderItem,
@@ -138,6 +140,7 @@ export function buildZeyosEntitySelectConfig(client, resource, opts = {}) {
     groupKey,
     clearable: none === false ? Boolean(rest.clearable) : true
   });
+  base.recent = Array.isArray(recent) ? recent : [];
   const renderModuleIcon = (item, selected = false) => {
     if (renderIcon === null) return null;
     const module = readRecord(item, moduleKey) ?? resource;
@@ -188,7 +191,7 @@ export function buildZeyosEntitySelectConfig(client, resource, opts = {}) {
 export function zeyosEntitySelect(client, resource, opts = {}) {
   const config = buildZeyosEntitySelectConfig(client, resource, opts);
   const requestedValue = opts.value ?? null;
-  const select = /** @type {Select & {ready: Promise<Select>}} */ (new Select(null, config));
+  const select = /** @type {Select & {ready: Promise<Select>}} */ (Select.entity(null, config));
   select.ready = hydrateInitialValue(select, client, resource, requestedValue);
   return select;
 }
@@ -248,9 +251,7 @@ function readRecord(item, reader) {
 
 /** Dependency-free module-color example; exact product glyphs remain host-injectable. @param {Record<string, unknown>} _item @param {{module?: unknown}} context @returns {Node} */
 function defaultEntityIcon(_item, context) {
-  const chip = moduleChip(String(context.module ?? 'default'), { size: 20 });
-  chip.replaceChildren(icon('square', { size: 10 }));
-  return chip;
+  return moduleChip(String(context.module ?? 'default'), { size: 20 });
 }
 
 /** @param {unknown} valueKey @param {unknown} labelKey @param {string[]} searchFields @returns {string[]|undefined} */

package/styles/tokens/semantic.css

@@ -50,6 +50,15 @@
   --zx-overlay-shadow: var(--zx-shadow-3);
   /* 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);
+  --zx-color-glass-surface: color-mix(in srgb, var(--zx-color-bg-raised) 78%, transparent);
+  --zx-glass-blur: 8px;
+  --zx-glass-saturation: 130%;
+  --zx-glass-color-strength: 82%;
+  --zx-app-icon-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 28%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 16%, transparent), 0 5px 14px color-mix(in srgb, var(--zx-app-icon-color) 28%, transparent);
+  --zx-glass-glyph-shadow: 0 1px 1px color-mix(in srgb, var(--zx-gray-950) 22%, transparent);
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }

package/styles/tokens/themes.css

@@ -17,7 +17,7 @@
  * against the dark page, which is what keeps `--zx-color-on-accent` correct in both polarities.
  */
 
-/* Zx — the ZeyOS brand green on Xenon's emerald ramp. The default. */
+/* ZeyOS — the ZeyOS brand green on Xenon's emerald ramp. The default. */
 [data-zx-preset="zx"] {
   --zx-accent-300: #5ee9b5;
   --zx-accent-400: #21cc75;
@@ -26,7 +26,7 @@
   --zx-accent-700: #006045;
 }
 
-/* ZeyOS — the gold of the ZeyOS product marque, anchored at 400. */
+/* Marque Gold — the gold of the ZeyOS product marque, anchored at 400. */
 [data-zx-preset="zeyos"] {
   --zx-accent-300: #ffd9a8;
   --zx-accent-400: #f7bc60;

package/styles/zx.css

@@ -27,6 +27,7 @@
 @import url("../src/components/tabbox/tabbox.css");
 @import url("../src/components/navigation-bar/navigation-bar.css");
 @import url("../src/components/search/search.css");
+@import url("../src/components/app-icon/app-icon.css");
 @import url("../src/components/launcher/launcher.css");
 @import url("../src/components/avatar/avatar.css");
 @import url("../src/components/account-menu/account-menu.css");
@@ -60,6 +61,7 @@
 @import url("../src/components/tree/tree.css");
 @import url("../src/components/finder/finder.css");
 @import url("../src/components/data-filter/data-filter.css");
+@import url("../src/components/filter/filter.css");
 @import url("../src/components/pagination/pagination.css");
 @import url("../src/components/stepper/stepper.css");
 @import url("../src/components/breadcrumb/breadcrumb.css");