@zeyos/zx 2.1.0 → 2.2.0

package/src/compat/map/data.js

@@ -0,0 +1,232 @@
+import {
+  Checklist as ZxChecklist,
+  DataFilter as ZxDataFilter,
+  Http,
+  Permission as ZxPermission,
+  Table as ZxTable
+} from '../../index.js';
+import { GxWrapper } from '../base.js';
+import { LEGACY_EVENT_ARGS, translateChecklistOptions, translateTableOptions } from './options.js';
+
+/** Shared Checklist wrapper. */
+class ChecklistBase extends GxWrapper {
+  static legacyName = 'gx.zeyos.Checklist';
+
+  /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
+  constructor(display, options = {}) {
+    super(options, { data: [], listValue: 'ID', listFormat: 'name', listActive: 'on' });
+    const translated = translateChecklistOptions(options);
+    translated.items = Array.isArray(options.data) ? options.data : (Array.isArray(options.items) ? options.items : []);
+    translated.load = options.url ? () => this._load(options.url, options.requestData) : null;
+    const component = new ZxChecklist(display, translated);
+    this._http = null;
+    this._attach(component, {
+      events: {
+        complete: { type: 'loaded', args: (detail) => [detail.items] },
+        change: { type: 'change', args: (detail) => [detail.values] }
+      },
+      ui: { frame: 'root', table: 'list', tbody: 'list', search: 'search' },
+      setters: { data: 'setData' }
+    });
+  }
+
+  /** @returns {unknown[]} */
+  getValues(key) {
+    const values = this._zx.getValues();
+    return key == null ? values : values.map((value) => value?.[key]).filter((value) => value != null);
+  }
+  /** @param {unknown[]} values @returns {unknown[]} */
+  setValues(values) { this._zx.setValues(values ?? []); return values; }
+  /** @returns {this} */
+  reset() { this._zx.uncheckAll(); return this; }
+  /** @param {string} query @returns {this} */
+  search(query) { this._zx.search(query); return this; }
+  /** @param {unknown[]} rows @returns {this} */
+  setData(rows) { this._zx.setItems(Array.isArray(rows) ? rows : []); return this; }
+  /** @param {string} [url] @param {Record<string, unknown>} [data] @returns {Promise<this>} */
+  async load(url = this.options.url, data = this.options.requestData) {
+    const rows = await this._load(url, data);
+    this._zx.setItems(rows);
+    this.fireEvent('complete', [rows]);
+    return this;
+  }
+  /** Bootstrap alias. @param {string} [url] @param {Record<string, unknown>} [data] @param {Function} [callback] @returns {Promise<this>} */
+  async loadFromURL(url, data, callback) { const result = await this.load(url, data); callback?.(this); return result; }
+
+  /** @param {string} url @param {Record<string, unknown>} data @returns {Promise<unknown[]>} */
+  async _load(url, data) {
+    this._http ??= new Http({ headers: this.options.requestHeader ?? {} });
+    try {
+      const method = String(this.options.method ?? 'GET').toUpperCase();
+      let result = await this._http.request(String(url ?? ''), method === 'GET'
+        ? { method, query: data ?? {} }
+        : { method, data: data ?? {} });
+      if (typeof this.options.decodeResponse === 'function') result = this.options.decodeResponse(result);
+      return Array.isArray(result) ? result : [];
+    } catch (error) {
+      this.fireEvent('failure', [error]);
+      throw error;
+    }
+  }
+}
+
+/** Legacy ZeyOS checklist. */
+export class Checklist extends ChecklistBase { static legacyName = 'gx.zeyos.Checklist'; }
+/** Legacy bootstrap checklist. */
+export class BootstrapChecklist extends ChecklistBase { static legacyName = 'gx.bootstrap.Checklist'; }
+
+/** Legacy permission selector. */
+export class Permission extends GxWrapper {
+  static legacyName = 'gx.zeyos.Permission';
+
+  /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
+  constructor(display, options = {}) {
+    super(options, { value: true, groups: [] });
+    const component = new ZxPermission(display, {
+      value: options.value ?? true,
+      groups: options.groups ?? options.data ?? [],
+      groupsValueKey: options.groupsValueKey ?? options.elementIndex ?? 'ID',
+      groupsLabelKey: options.groupsLabelKey ?? options.elementLabel ?? 'name'
+    });
+    this._attach(component, { events: { change: { type: 'change', args: (detail) => [detail.value] } }, setters: { value: 'set' } });
+  }
+  /** @returns {unknown} */ get() { return this._zx.get(); }
+  /** @param {unknown} value @param {boolean} [silent=false] @returns {this} */ set(value, silent = false) { this._zx.set(value, { silent }); return this; }
+}
+
+/** Shared full Table wrapper. */
+class TableBase extends GxWrapper {
+  static legacyName = 'gx.zeyos.Table';
+
+  /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
+  constructor(display, options = {}) {
+    super(options, { cols: [], data: [] });
+    const source = { ...options };
+    if (typeof options.structure === 'function') source.structure = (row, index) => options.structure(row, index, this);
+    const translated = translateTableOptions(source, adaptCell);
+    const component = new ZxTable(display, translated);
+    this._cols = Array.isArray(options.cols) ? options.cols.map((column) => ({ ...column })) : [];
+    this._filter = translated.sort ? this._legacyColumn(translated.sort.id) : null;
+    if (this._filter) this._filter.mode = translated.sort.dir;
+    this._attach(component, {
+      events: {
+        click: { type: 'rowclick', args: (detail) => LEGACY_EVENT_ARGS.tableClick(detail) },
+        dblclick: { type: 'rowdblclick', args: (detail) => LEGACY_EVENT_ARGS.tableClick(detail) },
+        filter: { type: 'sort', args: (detail) => {
+          const column = this._legacyColumn(detail.id); column.mode = detail.dir; this._filter = column;
+          return [column, detail.dir];
+        } },
+        complete: { type: 'datachange', args: (detail) => [detail.rows] }
+      },
+      ui: { table: () => component._table, tbody: () => component._tbody, thead: () => component._thead, tableDiv: () => component._scroll },
+      setters: { data: 'setData', height: 'setHeight' }
+    });
+  }
+
+  /** @param {unknown[]} data @returns {this} */ setData(data) { this._zx.setData(Array.isArray(data) ? data : []); return this; }
+  /** @param {unknown[]|unknown} data @returns {this} */ addData(data) { this._zx.addData(Array.isArray(data) ? data : [data]); return this; }
+  /** @returns {this} */ empty() { this._zx.empty(); return this; }
+  /** @param {Record<string, any>|string} column @param {'asc'|'desc'} [mode] @param {boolean} [noEvent=false] @returns {this} */
+  setSort(column, mode, noEvent = false) {
+    const id = typeof column === 'object' ? String(column.id) : String(column);
+    this._zx.setSort(id, mode, { silent: Boolean(noEvent) });
+    this._filter = this._legacyColumn(id); this._filter.mode = this._zx._sort?.dir ?? mode ?? 'asc';
+    return this;
+  }
+  /** @returns {Record<string, any>|false} */ getFilter() { return this._filter ?? false; }
+  /** @returns {unknown[]} */ getData() { return this._zx.getData(); }
+  /** @param {unknown} height @returns {this} */ setHeight(height) { const value = typeof height === 'number' ? `${height}px` : String(height); this._zx._scroll.style.blockSize = value; return this; }
+  /** @param {string} id @returns {Record<string, any>} */ _legacyColumn(id) { return this._cols.find((column) => String(column.id) === String(id)) ?? { id }; }
+}
+
+/** Legacy ZeyOS table. */
+export class Table extends TableBase { static legacyName = 'gx.zeyos.Table'; }
+/** Legacy bootstrap table. */
+export class BootstrapTable extends TableBase { static legacyName = 'gx.bootstrap.Table'; }
+
+/** Legacy SimpleTable data facade. */
+export class SimpleTable extends GxWrapper {
+  static legacyName = 'gx.ui.SimpleTable';
+
+  /** @param {Element|string|Record<string, any>|null} display @param {Record<string, any>} [options={}] */
+  constructor(display, options = {}) {
+    if (display && typeof display === 'object' && !display.nodeType && !Array.isArray(display)) {
+      options = display; display = null;
+    }
+    super(options, { cols: [], data: [] });
+    const source = { ...options, rowId: (row) => row };
+    if (typeof options.structure === 'function') source.structure = (row, index) => options.structure(row, index, this);
+    const component = new ZxTable(/** @type {Element|string|null} */ (display), translateTableOptions(source, adaptCell));
+    this._attach(component, {
+      events: { click: { type: 'rowclick', args: (detail) => [detail.row, detail.index] } },
+      ui: { table: () => component._table, tbody: () => component._tbody, thead: () => component._thead }
+    });
+  }
+
+  /** @param {unknown[]} data @returns {this} */ setData(data) { this._zx.setData(Array.isArray(data) ? data : []); return this; }
+  /** @param {unknown[]} data @returns {this} */ addData(data) { this._zx.addData(Array.isArray(data) ? data : [data]); return this; }
+  /** @param {unknown} row @param {number} [index] @returns {HTMLTableRowElement|null} */
+  createRow(row, index = this._zx.getData().length) {
+    const data = this._zx.getData(); data.splice(Math.max(0, index), 0, row); this._zx.setData(data);
+    return this.display('tbody')?.querySelectorAll?.('tr[data-row]')?.[index] ?? null;
+  }
+  /** @param {unknown} row @param {number} [index] @returns {HTMLTableRowElement|null} */ addRow(row, index) { return this.createRow(row, index); }
+  /** @param {unknown} row @param {number} index @returns {HTMLTableRowElement|null} */
+  updateRow(row, index) { const data = this._zx.getData(); if (index >= 0 && index < data.length) data[index] = row; this._zx.setData(data); return this.display('tbody')?.querySelectorAll?.('tr[data-row]')?.[index] ?? null; }
+  /** @param {number} index @returns {this} */ removeRow(index) { const data = this._zx.getData(); data.splice(index, 1); this._zx.setData(data); return this; }
+  /** @returns {unknown[]} */ getRows() { return this._zx.getData(); }
+  /** @returns {this} */ empty() { this._zx.empty(); return this; }
+}
+
+/** Legacy bootstrap client-side filter bar. */
+export class DataFilter extends GxWrapper {
+  static legacyName = 'gx.bootstrap.DataFilter';
+
+  /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
+  constructor(display, options = {}) {
+    super(options);
+    const component = new ZxDataFilter(display, { data: [], filters: [], autoApply: true });
+    this.origin = [];
+    this.filtered = [];
+    this.filter = [];
+    this._attach(component, {
+      events: { filtered: { type: 'filter', args: (detail) => { this.filtered = detail.rows; return [detail.rows]; } } },
+      ui: { clear: () => component._controls, clearBtn: () => component._clearButton }
+    });
+  }
+  /** @param {string} identifier @param {string} label @param {string|string[]|Function} fields @param {unknown} [_width] @param {Function} [method] @returns {this} */
+  addSelectFilter(identifier, label, fields, _width, method) {
+    const definition = { type: 'select', id: String(identifier), label: String(label), fields: Array.isArray(fields) ? fields : [fields] };
+    this.filter.push({ identifier, fields: definition.fields, method: method ?? this.selectFilter, type: 'Select' });
+    this._zx.addFilter(definition); return this;
+  }
+  /** @param {string} identifier @param {string|string[]|Function} fields @param {string} label @param {unknown} [_width] @param {Function} [method] @returns {this} */
+  addFulltextFilter(identifier, fields, label, _width, method) {
+    const definition = { type: 'text', id: String(identifier), label: String(label ?? ''), placeholder: String(label ?? ''), fields: Array.isArray(fields) ? fields : [fields] };
+    this.filter.push({ identifier, fields: definition.fields, method: method ?? this.fulltextFilter, type: 'Fulltext' });
+    this._zx.addFilter(definition); return this;
+  }
+  /** @param {Element} element @returns {this} */ addCustomElement(element) { this.toElement().insertBefore(element, this._zx._controls); return this; }
+  /** @param {unknown[]} data @returns {this} */ initData(data) { this.origin = Array.isArray(data) ? data : []; this._zx.setData(this.origin); return this; }
+  /** @returns {unknown[]} */ doFilter() { this.filtered = this._zx.apply(); return this.filtered; }
+  /** @returns {this} */ clearFilter() { this._zx.clear(); return this; }
+  /** @param {string} identifier @returns {Record<string, any>|null} */ getFilter(identifier) { return this.filter.find((entry) => entry.identifier == identifier) ?? null; }
+  /** @param {unknown} filterValue @param {unknown} fieldValue @returns {boolean} */ fulltextFilter(filterValue, fieldValue) { return new RegExp(String(filterValue), 'i').test(String(fieldValue ?? '')); }
+  /** @param {unknown} filterValue @param {unknown} fieldValue @returns {boolean} */ selectFilter(filterValue, fieldValue) { return filterValue == fieldValue; }
+}
+
+/** @param {unknown} cell @returns {unknown} */
+function adaptCell(cell) {
+  if (cell?.nodeType) return cell;
+  if (!cell || typeof cell !== 'object' || Array.isArray(cell)) return cell;
+  const element = document.createElement('span');
+  const label = cell.label;
+  if (label?.nodeType) element.append(label);
+  else if (label != null) element.append(document.createTextNode(String(label)));
+  if (cell.className) element.classList.add(...String(cell.className).split(/\s+/).filter(Boolean));
+  for (const [name, value] of Object.entries(cell)) {
+    if (['label', 'className', 'styles'].includes(name) || /^on/i.test(name) || value == null) continue;
+    if (['title', 'colspan', 'rowspan'].includes(name.toLowerCase())) element.setAttribute(name, String(value));
+  }
+  return element;
+}

package/src/compat/map/date-time.js

@@ -0,0 +1,177 @@
+import {
+  Datebox as ZxDatebox,
+  DatePicker as ZxDatePicker,
+  MonthPicker as ZxMonthPicker,
+  Timebox as ZxTimebox,
+  TimePicker as ZxTimePicker,
+  formatDate
+} from '../../index.js';
+import { GxWrapper } from '../base.js';
+import { translateDateboxFormat } from './options.js';
+
+/** Legacy segmented date box presented through the Zx formatted date input. */
+export class Datebox extends GxWrapper {
+  static legacyName = 'gx.zeyos.Datebox';
+
+  /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
+  constructor(display, options = {}) {
+    super(options, { timestamp: 0, unit: 'milliseconds', format: ['d', '.', 'M', '.', 'y', ' ', 'h', ':', 'i'] });
+    const initial = options.timestamp == null || Number(options.timestamp) === 0
+      ? new Date() : legacyDate(options.timestamp, options.unit ?? 'milliseconds');
+    const format = translateDateboxFormat(options.format);
+    const component = new ZxDatebox(display, {
+      value: initial, format, time: /%[HMS]/.test(format), disabled: Boolean(options.disabled)
+    });
+    this._attach(component, {
+      events: { update: { type: 'change', args: () => [this.get()] } },
+      ui: { input: 'input', fieldset: 'control' },
+      setters: { timestamp: 'set', disabled: (value) => value ? this.disable() : this.enable() }
+    });
+  }
+  /** @param {Date|number|string|null} timestamp @param {'milliseconds'|'seconds'} [unit] @returns {this} */
+  set(timestamp, unit = this.options.unit ?? 'milliseconds') { this._zx.set(legacyDate(timestamp, unit)); return this; }
+  /** @param {'milliseconds'|'seconds'|'date'} [unit] @returns {Date|number|null} */
+  get(unit = this.options.unit ?? 'milliseconds') {
+    const date = this._zx.get('date');
+    if (!date) return null;
+    if (unit === 'date') return date;
+    return unit === 'seconds' ? date.getTime() / 1000 : date.getTime();
+  }
+  /** @returns {this} */ enable() { this._zx.enable(); return this; }
+  /** @returns {this} */ disable() { this._zx.disable(); return this; }
+}
+
+/** Shared inline picker wrapper with legacy date formatting. */
+class PickerBase extends GxWrapper {
+  static legacyName = 'gx.zeyos.DatePicker';
+  /*
+   * A constructor type rather than `typeof ZxDatePicker`: each subclass points this at a different
+   * picker, and inferring the base from its own default would make every subclass's static side
+   * incompatible with it.
+   */
+  /** @type {new (target: Element|string|null, options?: any) => any} */
+  static Picker = ZxDatePicker;
+
+  /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
+  constructor(display, options = {}) {
+    super(options, { date: false, format: '%a %d.%m.%Y %H:%M', return_format: '%s' });
+    const initial = legacyDate(options.date || new Date(), options.unit ?? 'milliseconds');
+    const Picker = this.constructor.Picker;
+    const component = new Picker(display, pickerOptions(initial, options, Picker));
+    this._date = initial;
+    this._attach(component, {
+      events: { select: { type: 'change', args: (detail) => {
+        this._date = detail.date ? new Date(detail.date.getTime()) : this._dateFromTime(detail.time);
+        return [this._date];
+      } } },
+      ui: { input: 'root' },
+      setters: { date: 'set' }
+    });
+  }
+
+  /** @param {Date|number|string|null} value @returns {this} */
+  set(value) {
+    const date = legacyDate(value, 'milliseconds');
+    this._date = date;
+    if (this.constructor.Picker === ZxTimePicker) this._zx.set(date);
+    else this._zx.set(date);
+    return this;
+  }
+  /** @param {string} [format] @returns {Date|number|string|null} */
+  get(format = this.options.return_format) {
+    const date = this._readDate();
+    if (!date) return null;
+    if (format == null) return date;
+    if (format === '%s' || format === 'seconds') return Math.floor(date.getTime() / 1000);
+    if (format === 'date') return date;
+    return formatDate(date, String(format));
+  }
+  /** @returns {number|null} */ getSeconds() { const date = this._readDate(); return date ? date.getTime() / 1000 : null; }
+  /** @param {boolean} readOnly @returns {this} */ setReadOnly(readOnly) { this.toElement().setAttribute('aria-disabled', String(Boolean(readOnly))); return this; }
+  /** @param {string} format @param {boolean} [enableTimePicker] @returns {this} */ setFormat(format, enableTimePicker) { this.options.format = format; this.options.timePicker = enableTimePicker; return this; }
+  /** @returns {Date|null} */
+  _readDate() {
+    if (this.constructor.Picker === ZxTimePicker) {
+      const time = this._zx.get();
+      return time ? this._dateFromTime(time) : this._date;
+    }
+    return this._zx.get();
+  }
+  /** @param {{h?: number, m?: number, s?: number}|null} time @returns {Date} */
+  _dateFromTime(time) {
+    const date = this._date ? new Date(this._date.getTime()) : new Date();
+    if (time) date.setHours(Number(time.h) || 0, Number(time.m) || 0, Number(time.s) || 0, 0);
+    return date;
+  }
+}
+
+/** Legacy date picker. */
+export class DatePicker extends PickerBase { static legacyName = 'gx.zeyos.DatePicker'; static Picker = ZxDatePicker; }
+/** Legacy month picker. */
+export class MonthPicker extends PickerBase { static legacyName = 'gx.zeyos.MonthPicker'; static Picker = ZxMonthPicker; }
+/** Legacy time picker. */
+export class TimePicker extends PickerBase { static legacyName = 'gx.zeyos.TimePicker'; static Picker = ZxTimePicker; }
+
+/** Shared duration Timebox wrapper. */
+class TimeboxBase extends GxWrapper {
+  static legacyName = 'gx.ui.Timebox';
+
+  /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
+  constructor(display, options = {}) {
+    super(options, { time: 0, unit: 'minutes', seconds: true, prefix: false, disabled: false });
+    const component = new ZxTimebox(display, {
+      value: Number(options.time) || 0, unit: normalizeTimeUnit(options.unit),
+      seconds: options.seconds !== false, signed: Boolean(options.prefix),
+      disabled: Boolean(options.disabled || options.readonly)
+    });
+    this._attach(component, {
+      events: { change: { type: 'change', args: (detail) => [detail.value] } },
+      ui: { prefix: 'sign' },
+      setters: { time: 'set', disabled: (value) => value ? this.disable() : this.enable() }
+    });
+  }
+  /** @param {number} time @param {'seconds'|'minutes'|'hours'} [unit] @returns {this} */ set(time, unit = this.options.unit) { this._zx.set(time ?? 0, normalizeTimeUnit(unit)); return this; }
+  /** @param {'seconds'|'minutes'|'hours'} [unit] @param {number} [precision=0] @returns {number} */
+  get(unit = this.options.unit, precision = 0) { const value = this._zx.get(normalizeTimeUnit(unit)); const scale = 10 ** (Number(precision) || 0); return Math.round(value * scale) / scale; }
+  /** @returns {this} */ update() { return this.set(this.get()); }
+  /** @returns {this} */ enable() { this.options.disabled = false; this._zx.enable(); this.fireEvent('disabled', [false]); return this; }
+  /** @returns {this} */ disable() { this.options.disabled = true; this._zx.disable(); this.fireEvent('disabled', [true]); return this; }
+  /** @returns {boolean} */ disabled() { return Boolean(this.options.disabled); }
+  /** @param {boolean} positive @returns {this} */ setPrefix(positive) { const value = Math.abs(this.get()); this.set(positive ? value : -value); return this; }
+}
+
+/** Legacy core Timebox. */
+export class CoreTimebox extends TimeboxBase { static legacyName = 'gx.ui.Timebox'; }
+/** Legacy ZeyOS Timebox. */
+export class Timebox extends TimeboxBase { static legacyName = 'gx.zeyos.Timebox'; }
+/** Legacy bootstrap Timebox. */
+export class BootstrapTimebox extends TimeboxBase { static legacyName = 'gx.bootstrap.Timebox'; }
+
+/** @param {unknown} value @param {unknown} unit @returns {Date|null} */
+function legacyDate(value, unit) {
+  if (value == null) return null;
+  if (value instanceof Date) return new Date(value.getTime());
+  if (typeof value === 'number' || /^-?\d+(?:\.\d+)?$/.test(String(value))) {
+    const number = Number(value);
+    return new Date(unit === 'seconds' ? number * 1000 : number);
+  }
+  const date = new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+/** @param {Date|null} value @param {Record<string, any>} options @param {Function} Picker @returns {Record<string, any>} */
+function pickerOptions(value, options, Picker) {
+  if (Picker === ZxTimePicker) return { value, seconds: /%S/.test(options.format ?? '') };
+  return {
+    value,
+    min: legacyDate(options.min ?? null, 'milliseconds'),
+    max: legacyDate(options.max ?? null, 'milliseconds'),
+    time: Picker === ZxDatePicker && options.timePicker !== false,
+    showWeekNumbers: Boolean(options.weeknumbers)
+  };
+}
+
+/** @param {unknown} unit @returns {'seconds'|'minutes'|'hours'} */
+function normalizeTimeUnit(unit) {
+  return ['seconds', 'minutes', 'hours'].includes(String(unit)) ? String(unit) : 'minutes';
+}

package/src/compat/map/factory.js

@@ -0,0 +1,45 @@
+import { button, buttonGroup, icon, icons } from '../../index.js';
+import { warnFunctionOnce } from './helpers.js';
+
+/** Legacy glyph names accepted by `Factory.Icon()`. */
+const ICON_NAMES = Object.freeze({
+  list: 'list', plus: 'plus', clock: 'clock', range: 'filter', reload: 'reload', clear: 'x',
+  settings: 'gear', eye: 'eye', trash: 'trash', fields: 'list', search: 'search', lock: 'lock',
+  checked: 'check', question: 'info'
+});
+
+/** Legacy ZeyOS DOM factory mapped to Zx button and icon primitives. */
+export const Factory = Object.freeze({
+  /** @param {string} name @returns {SVGSVGElement} */
+  Icon(name) {
+    warnFactory();
+    const mapped = ICON_NAMES[name] ?? (icons[name] ? name : null);
+    if (!mapped) throw new RangeError(`Unsupported legacy icon: ${name}`);
+    return icon(mapped);
+  },
+  /** @param {string} text @param {string} [type=''] @param {string} [iconName] @param {Record<string, any>} [options={}] @returns {HTMLButtonElement} */
+  Button(text, type = '', iconName, options = {}) {
+    warnFactory();
+    const element = button({
+      label: String(text ?? ''), icon: iconName ? ICON_NAMES[iconName] ?? iconName : null,
+      kind: buttonKind(type), disabled: Boolean(options.disabled), title: options.title,
+      onclick: options.onclick ?? options.onClick
+    });
+    for (const name of ['id', 'name', 'value']) if (options[name] != null) element.setAttribute(name, String(options[name]));
+    return element;
+  },
+  /** @param {HTMLButtonElement[]} buttons @returns {HTMLDivElement} */
+  ButtonsGroup(buttons) { warnFactory(); return buttonGroup(Array.isArray(buttons) ? buttons : []); }
+});
+
+/** @returns {void} */
+function warnFactory() { warnFunctionOnce(warnFactory, 'gx.zeyos.Factory', 'button/icon'); }
+
+/** @param {unknown} type @returns {'default'|'primary'|'danger'|'ghost'} */
+function buttonKind(type) {
+  const value = String(type ?? '').toLowerCase();
+  if (value === 'dark' || value === 'em') return 'primary';
+  if (value.includes('danger') || value.includes('error')) return 'danger';
+  if (value.includes('ghost') || value.includes('link')) return 'ghost';
+  return 'default';
+}