@zeyos/zx 4.0.0 → 4.1.0

package/dist/zx.esm.js

@@ -73,6 +73,20 @@ function isElement(value) {
   return Boolean(value && typeof value === "object" && /** @type {{nodeType?: unknown}} */
   value.nodeType === 1);
 }
+function isCssColor(value) {
+  if (typeof value !== "string") return false;
+  const text4 = value.trim();
+  if (!text4 || text4.length > 256 || /[;{}\u0000-\u001f\u007f]/.test(text4) || /(?:url|image|image-set|cross-fade|element|var)\s*\(/i.test(text4)) return false;
+  const supports = globalThis.CSS?.supports;
+  if (typeof supports === "function") {
+    try {
+      return supports.call(globalThis.CSS, "color", text4);
+    } catch {
+      return false;
+    }
+  }
+  return /^(?:#[\da-f]{3,8}|[a-z]+|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\([^;{}]+\))$/i.test(text4);
+}
 function clamp(n, min, max) {
   return Math.min(max, Math.max(min, n));
 }
@@ -710,9 +724,9 @@ var Component = class extends EventTarget {
     let rendered;
     try {
       rendered = h.scope(this.refs, () => this.render());
-    } catch (error) {
+    } catch (error2) {
       this.#abort.abort();
-      throw error;
+      throw error2;
     }
     if (this.#created) {
       const root = isElement(rendered) ? rendered : this.el;
@@ -1003,8 +1017,8 @@ var Field = class _Field extends Component {
           /** @type {Readonly<FieldOptions>} */
           this.options
         ));
-      } catch (error) {
-        const message = error instanceof Error ? error.message : String(error);
+      } catch (error2) {
+        const message = error2 instanceof Error ? error2.message : String(error2);
         console.warn(`[zx.Field] Adapter "${type}" failed: ${message}`);
         this.adapter = errorAdapter(message, this.controlId);
       }
@@ -4987,8 +5001,8 @@ var FieldUpload = class extends Component {
       return response;
     } catch (caught) {
       if (runId !== this._runId) return null;
-      const error = caught instanceof Error ? caught : new Error(String(caught));
-      if (error.name === "AbortError") {
+      const error2 = caught instanceof Error ? caught : new Error(String(caught));
+      if (error2.name === "AbortError") {
         this._finishAbort();
         return null;
       }
@@ -4997,8 +5011,8 @@ var FieldUpload = class extends Component {
       this._transportController = null;
       this._abort.hidden = true;
       this._setState("error");
-      this._status.textContent = error.message;
-      this.emit("error", { error });
+      this._status.textContent = error2.message;
+      this.emit("error", { error: error2 });
       return null;
     }
   }
@@ -5146,10 +5160,10 @@ var FieldUpload = class extends Component {
     this.emit("abort", {});
   }
   /** @param {Error} error @returns {void} */
-  _selectionError(error) {
+  _selectionError(error2) {
     this._setState("error");
-    this._status.textContent = error.message;
-    this.emit("error", { error });
+    this._status.textContent = error2.message;
+    this.emit("error", { error: error2 });
   }
   /** @returns {void} */
   _renderPreview() {
@@ -5232,9 +5246,9 @@ function parseResponse(text4) {
 }
 function abortError() {
   if (typeof DOMException === "function") return new DOMException("Upload aborted", "AbortError");
-  const error = new Error("Upload aborted");
-  error.name = "AbortError";
-  return error;
+  const error2 = new Error("Upload aborted");
+  error2.name = "AbortError";
+  return error2;
 }
 
 // src/components/field-upload/field-adapter.js
@@ -6360,8 +6374,8 @@ var Rating = class extends Component {
     const shown = this._preview ?? this._value;
     const symbols = this.refs.symbols.querySelectorAll(".zx-rating__symbol");
     symbols.forEach((symbol, index) => {
-      const filled = Math.min(1, Math.max(0, shown - index));
-      symbol.style.setProperty("--zx-rating-fill", `${filled * 100}%`);
+      const filled2 = Math.min(1, Math.max(0, shown - index));
+      symbol.style.setProperty("--zx-rating-fill", `${filled2 * 100}%`);
       symbol.toggleAttribute("data-preview", this._preview !== null);
     });
     this.el.dataset.value = String(shown);
@@ -6647,6 +6661,7 @@ var Select = class _Select extends Component {
   static defaults = {
     items: [],
     fixedItems: [],
+    fixedLabel: null,
     valueKey: "ID",
     labelKey: "name",
     renderItem: null,
@@ -6684,8 +6699,7 @@ var Select = class _Select extends Component {
     this._position = null;
     this._createdRoot = false;
     this._root = null;
-    this._originalChildren = [];
-    this._originalAttributes = /* @__PURE__ */ new Map();
+    this._snapshot = null;
     this._createdRoot = this.el === null;
     const root = (
       /** @type {HTMLElement} */
@@ -6693,10 +6707,7 @@ var Select = class _Select extends Component {
     );
     this.el = root;
     this._root = root;
-    if (!this._createdRoot) this._originalChildren = Array.from(root.childNodes);
-    this._rememberAttribute(root, "data-state");
-    this._rememberAttribute(root, "data-loading");
-    this._rememberAttribute(root, "aria-disabled");
+    this._snapshot = this._createdRoot ? null : snapshotTarget(root);
     const listId = uid("zx-select-list");
     const input = h("input", {
       ref: "input",
@@ -6999,6 +7010,66 @@ var Select = class _Select extends Component {
     select.set(value, { silent: true });
     return select;
   }
+  /**
+   * Creates a rich entity picker with optional Recent choices and a create command.
+   * @param {Element|string|null} target Component target.
+   * @param {SelectOptions & EntitySelectOptions} [options={}] Entity-preset options.
+   * @returns {Select}
+   */
+  static entity(target, options = {}) {
+    const {
+      recent = [],
+      recentLabel = "Recent",
+      create = false,
+      iconKey = "icon",
+      colorKey = "color",
+      subtitleKey = "description",
+      renderIcon = null,
+      fixedItems = [],
+      actions: actions2 = [],
+      renderItem = null,
+      renderValueAdornment = null,
+      ...rest
+    } = options;
+    const visual = (item, selected = false) => {
+      if (typeof renderIcon === "function") return renderIcon(item, { selected });
+      const value = readSelectItem(item, iconKey);
+      if (value && typeof value === "object" && typeof value.nodeType === "number") return value.cloneNode(true);
+      if (typeof value !== "string" || !value) return null;
+      const color = readSelectItem(item, colorKey);
+      return h("span", {
+        class: "zx-select__entity-glyph",
+        style: isCssColor(color) ? { "--zx-select-entity-color": String(color) } : null,
+        ariaHidden: "true"
+      }, icon(value, { size: 14 }));
+    };
+    const createAction = create ? normalizeEntityCreateAction(create) : null;
+    const select = new _Select(target, {
+      ...rest,
+      fixedItems: [...Array.isArray(recent) ? recent : [], ...Array.isArray(fixedItems) ? fixedItems : []],
+      fixedLabel: Array.isArray(recent) && recent.length ? recentLabel : rest.fixedLabel ?? null,
+      actions: [...Array.isArray(actions2) ? actions2 : [], ...createAction ? [createAction] : []],
+      renderItem: renderItem ?? ((item) => {
+        const decoration = visual(item, false);
+        const subtitle = readSelectItem(item, subtitleKey);
+        const copy = h(
+          "span",
+          { class: "zx-select__entity-copy" },
+          h("span", { class: "zx-select__entity-label" }, String(readSelectItem(item, rest.labelKey ?? "name") ?? "")),
+          subtitle == null || subtitle === "" ? null : h("span", { class: "zx-select__entity-subtitle" }, String(subtitle))
+        );
+        return h(
+          "span",
+          { class: "zx-select__entity" },
+          decoration ? h("span", { class: "zx-select__entity-icon", ariaHidden: "true" }, decoration) : null,
+          copy
+        );
+      }),
+      renderValueAdornment: renderValueAdornment ?? ((item) => visual(item, true))
+    });
+    select.el.dataset.preset = "entity";
+    return select;
+  }
   /**
    * Creates the record-permission picker: the fixed Private and Public choices above the groups a
    * record can be shared with. The value is the tri-state ZeyOS stores — `false` for private,
@@ -7049,13 +7120,7 @@ var Select = class _Select extends Component {
       /** @type {HTMLElement} */
       this.el
     );
-    if (!this._createdRoot && root) {
-      root.replaceChildren(...this._originalChildren);
-      for (const [name, value] of this._originalAttributes) {
-        if (value === null) root.removeAttribute(name);
-        else root.setAttribute(name, value);
-      }
-    }
+    if (!this._createdRoot && root) restoreTarget(root, this._snapshot);
     super.destroy();
   }
   /** @param {KeyboardEvent} event @returns {void} */
@@ -7192,14 +7257,19 @@ var Select = class _Select extends Component {
     list.replaceChildren();
     this._optionEntries = [];
     let lastGroup = /* @__PURE__ */ Symbol("initial-group");
+    const fixed = this._uniqueItems(this._visibleFixed);
+    const items = this._uniqueItems(this._visibleItems, fixed);
     if (this.options.clearable) {
       this._appendOption(null, true, this.options.noneLabel ?? this._message("select.none", "No selection"));
     }
-    for (const item of this._visibleFixed) this._appendOption(item, false);
-    if (this._visibleFixed.length > 0 && this._visibleItems.length > 0 && !this.options.groupKey) {
+    if (fixed.length > 0 && this.options.fixedLabel) {
+      list.append(h("div", { class: "zx-select__group", role: "presentation" }, String(this.options.fixedLabel)));
+    }
+    for (const item of fixed) this._appendOption(item, false);
+    if (fixed.length > 0 && items.length > 0 && !this.options.groupKey) {
       list.append(h("div", { class: "zx-select__separator", role: "presentation" }));
     }
-    for (const item of this._visibleItems) {
+    for (const item of items) {
       if (this.options.groupKey) {
         const group = this._read(item, this.options.groupKey);
         if (!Object.is(group, lastGroup)) {
@@ -7213,7 +7283,7 @@ var Select = class _Select extends Component {
       this._appendOption(item, false);
     }
     if (this._actions.length > 0) {
-      if (this._visibleFixed.length > 0 || this._visibleItems.length > 0 || this.options.clearable) {
+      if (fixed.length > 0 || items.length > 0 || this.options.clearable) {
         list.append(h("div", { class: "zx-select__separator", role: "presentation" }));
       }
       let actionGroup = /* @__PURE__ */ Symbol("initial-action-group");
@@ -7228,7 +7298,7 @@ var Select = class _Select extends Component {
         this._appendAction(action);
       }
     }
-    if (this._visibleItems.length === 0 && this._visibleFixed.length === 0 && this._actions.length === 0 && !this._loading) {
+    if (items.length === 0 && fixed.length === 0 && this._actions.length === 0 && !this._loading) {
       list.append(h("div", {
         class: "zx-select__empty",
         role: "status"
@@ -7429,6 +7499,16 @@ var Select = class _Select extends Component {
   _matchFixed(query) {
     return matchItems(this._fixedItems, query, this._searchKeys());
   }
+  /** De-duplicates choices by public value while preserving caller order. @param {SelectItem[]} items @param {SelectItem[]} [excluded=[]] @returns {SelectItem[]} */
+  _uniqueItems(items, excluded = []) {
+    const values = excluded.map((item) => this._itemValue(item));
+    return items.filter((item) => {
+      const value = this._itemValue(item);
+      if (values.some((candidate) => Object.is(candidate, value))) return false;
+      values.push(value);
+      return true;
+    });
+  }
   /** @returns {number} */
   _selectedEntryIndex() {
     if (this._selected === null) return this.options.clearable ? 0 : -1;
@@ -7440,16 +7520,28 @@ var Select = class _Select extends Component {
   _itemEntryIndex(itemIndex) {
     return itemIndex + (this.options.clearable ? 1 : 0);
   }
-  /** @param {string} name @returns {void} */
-  _rememberAttribute(element, name) {
-    this._originalAttributes.set(name, element.getAttribute(name));
-  }
   /** @param {string} key @param {string} fallback @returns {string} */
   _message(key, fallback) {
     const message = this.msg(key);
     return message === key ? fallback : message;
   }
 };
+function readSelectItem(item, reader) {
+  if (typeof reader === "function") return reader(item);
+  if (item !== null && typeof item === "object" && typeof reader === "string") return item[reader];
+  return null;
+}
+function normalizeEntityCreateAction(value) {
+  const descriptor = value === true ? {} : value;
+  return {
+    id: descriptor.id ?? "create",
+    label: descriptor.label ?? "Create new\u2026",
+    description: descriptor.description,
+    group: descriptor.group ?? "New",
+    icon: descriptor.icon ?? "plus",
+    invoke: descriptor.invoke
+  };
+}
 function normalizeRenderedContent(rendered) {
   return rendered && typeof rendered === "object" && "nodeType" in rendered ? (
     /** @type {Node} */
@@ -7926,6 +8018,8 @@ var TagPicker = class extends Component {
     values: [],
     valueKey: "ID",
     labelKey: "name",
+    iconKey: "icon",
+    colorKey: "color",
     searchKeys: null,
     filter: "local",
     minQuery: 0,
@@ -8266,12 +8360,13 @@ var TagPicker = class 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",
@@ -8309,7 +8404,7 @@ var TagPicker = class extends Component {
         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");
@@ -8534,10 +8629,10 @@ var TagPicker = class extends Component {
       if (sequence !== this._requestSequence) return;
       this._items = Array.isArray(result) ? result.slice() : [];
       this._visible = this._items.slice();
-    } catch (error) {
+    } catch (error2) {
       if (sequence !== this._requestSequence) return;
       this._visible = [];
-      this.emit("error", { error });
+      this.emit("error", { error: error2 });
     } finally {
       if (sequence === this._requestSequence) {
         this._setLoading(false);
@@ -8630,6 +8725,34 @@ var TagPicker = class extends Component {
     if (item !== null && typeof item === "object") return String(item[key] ?? "");
     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() });
@@ -9514,38 +9637,38 @@ var Http = class {
         try {
           json2 = JSON.parse(text4);
         } catch (cause) {
-          const error = (
+          const error2 = (
             /** @type {Error & {response?: Response}} */
             new Error("Invalid JSON response", { cause })
           );
-          error.response = response;
-          throw error;
+          error2.response = response;
+          throw error2;
         }
       }
       if (!response.ok) {
         try {
           parseResult(json2);
-        } catch (error2) {
-          error2.response = response;
-          throw error2;
+        } catch (error3) {
+          error3.response = response;
+          throw error3;
         }
-        const error = (
+        const error2 = (
           /** @type {Error & {response?: Response}} */
           new Error(`HTTP ${response.status} ${response.statusText}`.trim())
         );
-        error.response = response;
-        throw error;
+        error2.response = response;
+        throw error2;
       }
       return parseResult(json2);
     } catch (caught) {
-      const error = caught instanceof Error ? caught : new Error(String(caught));
+      const error2 = caught instanceof Error ? caught : new Error(String(caught));
       if (this.onError) {
         try {
-          this.onError(error, { path, options });
+          this.onError(error2, { path, options });
         } catch {
         }
       }
-      throw error;
+      throw error2;
     } finally {
       if (timeoutId !== null) clearTimeout(timeoutId);
     }
@@ -10262,9 +10385,9 @@ var Modal = class extends Component {
     this.el.returnValue = "";
     try {
       this._show();
-    } catch (error) {
+    } catch (error2) {
       delete this.el.dataset.zxOverlayOrder;
-      throw error;
+      throw error2;
     }
     this.el.dataset.state = "open";
     this.emit("open");
@@ -10747,9 +10870,9 @@ var Groupbox = class extends Component {
     }
     try {
       super(normalizedTarget, options);
-    } catch (error) {
+    } catch (error2) {
       if (adoption) restoreAdoption(adoption);
-      throw error;
+      throw error2;
     }
     this._adoption = adoption;
   }
@@ -11477,7 +11600,11 @@ var Table = class extends Component {
     rowClass: null,
     zebra: true,
     editMode: false,
-    hierarchy: false
+    editTrigger: "double",
+    hierarchy: false,
+    rowReorder: false,
+    columnVisibility: false,
+    hiddenColumns: []
   };
   /**
    * Creates a table around a target or creates a new root when target is null.
@@ -11506,6 +11633,7 @@ var Table = class extends Component {
     this._rowElements = /* @__PURE__ */ new Map();
     this._restored = false;
     this._editMode = normalizeEditMode(this.options.editMode);
+    this._editTrigger = this.options.editTrigger === "single" ? "single" : "double";
     this._edit = null;
     this._editMessage = null;
     this._stacked = false;
@@ -11517,6 +11645,10 @@ var Table = class extends Component {
     this._rovingCell = null;
     this._rovingMatched = false;
     this._hierarchy = normalizeHierarchy(this.options.hierarchy, this._columns);
+    this._hiddenColumns = new Set((Array.isArray(this.options.hiddenColumns) ? this.options.hiddenColumns : []).map(String).filter((id) => this._columns.some((column) => column.id === id)));
+    if (this._hiddenColumns.size >= this._columns.length && this._columns[0]) this._hiddenColumns.delete(this._columns[0].id);
+    this._dragId = null;
+    this._grabbedId = null;
     this._expanded = initialExpanded(this._hierarchy?.expanded);
     if (this._sort && this.options.sortMode === "local") this._sortData();
     if (this._hierarchy?.expanded === true) {
@@ -11538,11 +11670,17 @@ var Table = class extends Component {
         zebra: String(Boolean(this.options.zebra))
       }
     }, this._table);
+    this._rowMoveMessage = this.options.rowReorder ? h("div", {
+      class: "zx-table__reorder-status",
+      role: "status",
+      ariaLive: "polite"
+    }) : null;
     if (this.options.height != null) {
       this._scroll.style.blockSize = typeof this.options.height === "number" ? `${this.options.height}px` : String(this.options.height);
     }
+    this._columnControls = this.options.columnVisibility ? this._createColumnControls() : null;
     if (this._editMode === false) {
-      root.replaceChildren(this._scroll);
+      root.replaceChildren(...[this._columnControls, this._scroll, this._rowMoveMessage].filter(Boolean));
     } else {
       root.dataset.editMode = this._editMode;
       this._editMessage = h("div", {
@@ -11551,7 +11689,7 @@ var Table = class extends Component {
         role: "status",
         ariaLive: "polite"
       });
-      root.replaceChildren(this._scroll, this._editMessage);
+      root.replaceChildren(...[this._columnControls, this._scroll, this._editMessage, this._rowMoveMessage].filter(Boolean));
     }
     this._renderColumns();
     this._renderHeader();
@@ -11559,6 +11697,34 @@ var Table = class extends Component {
     this._watchWidth();
     this.listen(this._tbody, "click", (event) => this._handleBodyClick(event));
     this.listen(this._tbody, "dblclick", (event) => this._handleBodyDoubleClick(event));
+    if (this.options.rowReorder) {
+      this.listen(this._tbody, "dragstart", (event) => this._handleRowDragStart(
+        /** @type {DragEvent} */
+        event
+      ));
+      this.listen(this._tbody, "dragover", (event) => this._handleRowDragOver(
+        /** @type {DragEvent} */
+        event
+      ));
+      this.listen(this._tbody, "drop", (event) => this._handleRowDrop(
+        /** @type {DragEvent} */
+        event
+      ));
+      this.listen(this._tbody, "dragend", () => this._clearRowDrag());
+      this.listen(this._tbody, "keydown", (event) => this._handleRowHandleKeydown(
+        /** @type {KeyboardEvent} */
+        event
+      ));
+    }
+    if (this._columnControls) {
+      this.listen(this._columnControls, "change", (event) => {
+        const input = (
+          /** @type {HTMLInputElement|null} */
+          event.target
+        );
+        if (input?.classList.contains("zx-table__column-toggle")) this.setColumnVisible(input.value, input.checked);
+      });
+    }
     if (this._editMode !== false) {
       this.listen(this._tbody, "keydown", (event) => this._handleEditKeydown(
         /** @type {KeyboardEvent} */
@@ -11674,6 +11840,81 @@ var Table = class extends Component {
   getData() {
     return [...this._data];
   }
+  /** Returns visible column IDs in caller order. @returns {string[]} */
+  getVisibleColumns() {
+    return this._visibleColumns().map((column) => column.id);
+  }
+  /** Returns hidden column IDs in caller order. @returns {string[]} */
+  getHiddenColumns() {
+    return this._columns.filter((column) => this._hiddenColumns.has(column.id)).map((column) => column.id);
+  }
+  /**
+   * Shows or hides one column. The final visible column cannot be hidden.
+   * @param {string} id Column ID.
+   * @param {boolean} [visible=true] Desired visibility.
+   * @param {{silent?:boolean}} [options={}] Event behavior.
+   * @returns {this}
+   */
+  setColumnVisible(id, visible = true, options = {}) {
+    const column = this._columns.find((candidate) => candidate.id === id);
+    if (!column) throw new RangeError(`Unknown table column: ${id}`);
+    const active = (
+      /** @type {HTMLElement|null} */
+      document.activeElement
+    );
+    const restoreFocus = active?.classList.contains("zx-table__column-toggle") && this._columnList?.contains(active) ? (
+      /** @type {HTMLInputElement} */
+      active.value
+    ) : null;
+    if (!visible && !this._hiddenColumns.has(id) && this._visibleColumns().length <= 1) {
+      this._renderColumnControls(restoreFocus);
+      return this;
+    }
+    const changed = visible ? this._hiddenColumns.delete(id) : !this._hiddenColumns.has(id);
+    if (!visible && changed) this._hiddenColumns.add(id);
+    if (!changed) return this;
+    this._renderColumns();
+    this._renderHeader();
+    this._renderBody();
+    this._renderColumnControls(restoreFocus);
+    if (!options.silent) this.emit("columnvisibilitychange", {
+      visible: this.getVisibleColumns(),
+      hidden: this.getHiddenColumns()
+    });
+    return this;
+  }
+  /** Toggles one column. @param {string} id @param {{silent?:boolean}} [options={}] @returns {this} */
+  toggleColumn(id, options = {}) {
+    return this.setColumnVisible(id, this._hiddenColumns.has(id), options);
+  }
+  /**
+   * Reorders one row relative to another and emits a cancelable `rowmove` before committing.
+   * Hierarchical rows may only move among siblings; an active local sort disables manual order.
+   * @param {unknown} id Moving row ID.
+   * @param {unknown} targetId Target row ID.
+   * @param {'before'|'after'} [position='before'] Target edge.
+   * @returns {this}
+   */
+  moveRow(id, targetId, position2 = "before") {
+    if (!this.options.rowReorder || this._sort && this.options.sortMode === "local") return this;
+    const row2 = this.getRow(id);
+    const target = this.getRow(targetId);
+    if (!row2 || !target || Object.is(id, targetId)) return this;
+    const next = reorderTableRows(this._data, this.options.rowId, id, targetId, position2, this._hierarchy?.parentId);
+    if (!next) return this;
+    const event = this.emit("rowmove", { row: row2, id, target, targetId, position: position2 });
+    if (event.defaultPrevented) return this;
+    this._data = next;
+    this._renderBody();
+    if (this._rowMoveMessage) {
+      const siblings = this._siblingIds(id);
+      const index = siblings.findIndex((candidate) => Object.is(candidate, id));
+      this._rowMoveMessage.textContent = `Moved row to position ${index + 1} of ${siblings.length}.`;
+    }
+    this._emitDataChange();
+    queueMicrotask(() => this._rowHandle(id)?.focus());
+    return this;
+  }
   /**
    * Removes all rows.
    * @returns {this}
@@ -11842,14 +12083,17 @@ var Table = class extends Component {
    */
   startEdit(rowId, columnId) {
     if (this._editMode === false) return this;
-    const column = this._columns.find((candidate) => candidate.id === columnId);
-    if (!column) return this;
+    const requested = this._columns.find((candidate) => candidate.id === columnId);
+    if (!requested) return this;
     const current = this._data.find((candidate) => Object.is(this._idFor(candidate), rowId));
-    if (current === void 0 || resolveEditable(column, current) === false) return this;
+    if (current === void 0) return this;
+    const column = this._editMode === "row" && this._hiddenColumns.has(requested.id) ? this._visibleColumns().find((candidate) => resolveEditable(candidate, current) !== false) ?? null : requested;
+    if (!column || resolveEditable(column, current) === false) return this;
+    const activeColumnId = column.id;
     if (this._edit) {
-      if (Object.is(this._edit.id, rowId) && this._edit.cells.has(columnId)) {
-        this._edit.columnId = columnId;
-        this._focusEditor(columnId);
+      if (Object.is(this._edit.id, rowId) && this._edit.cells.has(activeColumnId)) {
+        this._edit.columnId = activeColumnId;
+        this._focusEditor(activeColumnId);
         return this;
       }
       this.commitEdit();
@@ -11860,7 +12104,7 @@ var Table = class extends Component {
     const row2 = this._data[index];
     const tr = this._rowElements.get(rowId)?.[0];
     if (!tr) return this;
-    const targets = this._editMode === "row" ? this._columns.filter((candidate) => resolveEditable(candidate, row2) !== false) : [column];
+    const targets = this._editMode === "row" ? this._visibleColumns().filter((candidate) => resolveEditable(candidate, row2) !== false) : [column];
     const cells = /* @__PURE__ */ new Map();
     for (const target of targets) {
       const td = cellIn(tr, target.id);
@@ -11869,10 +12113,10 @@ var Table = class extends Component {
       if (entry) cells.set(target.id, entry);
     }
     if (cells.size === 0) return this;
-    this._edit = { id: rowId, columnId, row: row2, cells, tr };
+    this._edit = { id: rowId, columnId: activeColumnId, row: row2, cells, tr };
     tr.dataset.editing = "true";
-    this.emit("editstart", { row: row2, id: rowId, column, columnId, value: row2?.[columnId] });
-    this._focusEditor(columnId);
+    this.emit("editstart", { row: row2, id: rowId, column, columnId: activeColumnId, value: row2?.[activeColumnId] });
+    this._focusEditor(activeColumnId);
     return this;
   }
   /**
@@ -12127,16 +12371,197 @@ var Table = class extends Component {
     }
     super.destroy();
   }
+  /** @returns {TableColumn[]} */
+  _visibleColumns() {
+    return this._columns.filter((column) => !this._hiddenColumns.has(column.id));
+  }
+  /** @returns {HTMLElement} */
+  _createColumnControls() {
+    const list = h("div", { class: "zx-table__column-list" });
+    this._columnList = list;
+    const details = h(
+      "details",
+      { class: "zx-table__column-controls" },
+      h("summary", { class: "zx-button zx-button--sm" }, icon("fields", { size: 13 }), "Columns"),
+      list
+    );
+    this._renderColumnControls();
+    return details;
+  }
+  /** @param {string|null} [focusColumn=null] Column checkbox that keeps focus. @returns {void} */
+  _renderColumnControls(focusColumn = null) {
+    if (!this._columnList) return;
+    const visible = this._visibleColumns();
+    const current = [...this._columnList.querySelectorAll(".zx-table__column-toggle")];
+    const reusable = current.length === this._columns.length && current.every((control, index) => (
+      /** @type {HTMLInputElement} */
+      control.value === this._columns[index].id
+    ));
+    if (reusable) {
+      current.forEach((control, index) => {
+        const input = (
+          /** @type {HTMLInputElement} */
+          control
+        );
+        const checked = !this._hiddenColumns.has(this._columns[index].id);
+        input.checked = checked;
+        input.disabled = checked && visible.length === 1;
+      });
+      return;
+    }
+    this._columnList.replaceChildren(...this._columns.map((column) => {
+      const checked = !this._hiddenColumns.has(column.id);
+      return h(
+        "label",
+        { class: "zx-table__column-option" },
+        h("input", {
+          class: "zx-table__column-toggle",
+          type: "checkbox",
+          value: column.id,
+          checked,
+          disabled: checked && visible.length === 1
+        }),
+        h("span", {}, column.label)
+      );
+    }));
+    if (focusColumn !== null) {
+      const control = [...this._columnList.querySelectorAll(".zx-table__column-toggle")].find((candidate) => (
+        /** @type {HTMLInputElement} */
+        candidate.value === focusColumn
+      ));
+      queueMicrotask(() => {
+        if (control?.isConnected) control.focus();
+      });
+    }
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleRowDragStart(event) {
+    const handle = (
+      /** @type {Element|null} */
+      event.target?.closest?.(".zx-table__row-handle")
+    );
+    const rowElement = handle?.closest("tr[data-row]");
+    const meta = rowElement ? this._rowMeta.get(rowElement) : null;
+    if (!handle || !meta || this._sort && this.options.sortMode === "local") {
+      event.preventDefault();
+      return;
+    }
+    this._dragId = meta.id;
+    rowElement.dataset.dragging = "true";
+    event.dataTransfer?.setData("text/plain", "zx-table-row");
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleRowDragOver(event) {
+    if (this._dragId == null) return;
+    const rowElement = (
+      /** @type {Element|null} */
+      event.target?.closest?.("tr[data-row]")
+    );
+    const meta = rowElement ? this._rowMeta.get(rowElement) : null;
+    if (!meta || Object.is(meta.id, this._dragId) || !this._canMoveTogether(this._dragId, meta.id)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    this._clearDropMarkers();
+    const rectangle = rowElement.getBoundingClientRect();
+    rowElement.dataset.drop = event.clientY >= rectangle.top + rectangle.height / 2 ? "after" : "before";
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleRowDrop(event) {
+    if (this._dragId == null) return;
+    const rowElement = (
+      /** @type {Element|null} */
+      event.target?.closest?.("tr[data-row]")
+    );
+    const meta = rowElement ? this._rowMeta.get(rowElement) : null;
+    const position2 = rowElement?.dataset.drop === "after" ? "after" : "before";
+    if (meta && this._canMoveTogether(this._dragId, meta.id)) {
+      event.preventDefault();
+      this.moveRow(this._dragId, meta.id, position2);
+    }
+    this._clearRowDrag();
+  }
+  /** @param {KeyboardEvent} event @returns {void} */
+  _handleRowHandleKeydown(event) {
+    const handle = (
+      /** @type {Element|null} */
+      event.target?.closest?.(".zx-table__row-handle")
+    );
+    const rowElement = handle?.closest("tr[data-row]");
+    const meta = rowElement ? this._rowMeta.get(rowElement) : null;
+    if (!handle || !meta) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      this._grabbedId = Object.is(this._grabbedId, meta.id) ? null : meta.id;
+      handle.setAttribute("aria-pressed", String(this._grabbedId != null));
+      const status = this._rowMoveMessage ?? this._editMessage;
+      if (status) status.textContent = this._grabbedId == null ? "Row dropped" : "Row grabbed. Use the arrow keys to move it.";
+      return;
+    }
+    if (event.key === "Escape" && this._grabbedId != null) {
+      event.preventDefault();
+      this._grabbedId = null;
+      handle.setAttribute("aria-pressed", "false");
+      return;
+    }
+    if (!Object.is(this._grabbedId, meta.id) || !["ArrowUp", "ArrowDown"].includes(event.key)) return;
+    event.preventDefault();
+    const siblings = this._siblingIds(meta.id);
+    const index = siblings.findIndex((id) => Object.is(id, meta.id));
+    const targetId = siblings[index + (event.key === "ArrowUp" ? -1 : 1)];
+    if (targetId !== void 0) this.moveRow(meta.id, targetId, event.key === "ArrowUp" ? "before" : "after");
+  }
+  /** @param {unknown} id @returns {unknown[]} */
+  _siblingIds(id) {
+    const row2 = this.getRow(id);
+    if (!row2) return [];
+    const parent = this._hierarchy ? readRowValue(this._hierarchy.parentId, row2) : null;
+    return this._data.filter((candidate) => !this._hierarchy || sameHierarchyParent(readRowValue(this._hierarchy.parentId, candidate), parent)).map((candidate) => this._idFor(candidate));
+  }
+  /** @param {unknown} left @param {unknown} right @returns {boolean} */
+  _canMoveTogether(left, right) {
+    if (!this._hierarchy) return true;
+    const a = this.getRow(left);
+    const b = this.getRow(right);
+    return Boolean(a && b && sameHierarchyParent(
+      readRowValue(this._hierarchy.parentId, a),
+      readRowValue(this._hierarchy.parentId, b)
+    ));
+  }
+  /** @param {unknown} id @returns {HTMLElement|null} */
+  _rowHandle(id) {
+    return (
+      /** @type {HTMLElement|null} */
+      this._rowElements.get(id)?.[0]?.querySelector(".zx-table__row-handle") ?? null
+    );
+  }
+  /** @returns {void} */
+  _clearDropMarkers() {
+    for (const row2 of this._tbody.querySelectorAll("tr[data-drop]")) delete row2.dataset.drop;
+  }
+  /** @returns {void} */
+  _clearRowDrag() {
+    for (const row2 of this._tbody.querySelectorAll("tr[data-dragging]")) delete row2.dataset.dragging;
+    this._clearDropMarkers();
+    this._dragId = null;
+  }
+  /** @returns {string|null} */
+  _hierarchyColumn() {
+    if (!this._hierarchy) return null;
+    return this._visibleColumns().some((column) => column.id === this._hierarchy.column) ? this._hierarchy.column : this._visibleColumns()[0]?.id ?? null;
+  }
   /** @returns {void} */
   _renderColumns() {
     const fragment2 = document.createDocumentFragment();
+    if (this.options.rowReorder) fragment2.append(h("col", { class: "zx-table__reorder-column" }));
     if (this.options.selectable === "multi") {
       fragment2.append(h("col", { class: "zx-table__selection-column" }));
     }
-    const fractions = this._columns.map((column) => parseFraction(column.width));
+    const columns = this._visibleColumns();
+    const fractions = columns.map((column) => parseFraction(column.width));
     const total = fractions.reduce((sum, value) => sum + value, 0);
     this._table.dataset.layout = total > 0 ? "fixed" : "auto";
-    this._columns.forEach((column, index) => {
+    columns.forEach((column, index) => {
       const col = h("col");
       if (fractions[index] > 0) col.style.width = `${fractions[index] / total * 100}%`;
       else if (column.width && column.width !== "auto") col.style.width = String(column.width);
@@ -12148,6 +12573,11 @@ var Table = class extends Component {
   _renderHeader() {
     const row2 = h("tr", { class: "zx-table__header-row" });
     if (this._growStep) row2.setAttribute("aria-rowindex", "1");
+    if (this.options.rowReorder) row2.append(h("th", {
+      class: "zx-table__reorder-header",
+      scope: "col",
+      ariaLabel: "Row order"
+    }));
     if (this.options.selectable === "multi") {
       this._selectAll = h("input", {
         class: "zx-table__checkbox zx-table__select-all",
@@ -12173,7 +12603,7 @@ var Table = class extends Component {
       this._selectAll = null;
     }
     this._headers = /* @__PURE__ */ new Map();
-    for (const column of this._columns) {
+    for (const column of this._visibleColumns()) {
       const th = h("th", { scope: "col" });
       const align = column.align ?? (isNumericColumn(column) ? "end" : null);
       if (align) th.dataset.align = align;
@@ -12213,7 +12643,7 @@ var Table = class extends Component {
         { class: "zx-table__empty-row" },
         h("td", {
           class: "zx-table__empty",
-          colspan: this._columns.length + (this.options.selectable === "multi" ? 1 : 0)
+          colspan: this._visibleColumns().length + (this.options.selectable === "multi" ? 1 : 0) + (this.options.rowReorder ? 1 : 0)
         }, this._emptyContent())
       ));
     } else {
@@ -12222,6 +12652,7 @@ var Table = class extends Component {
       });
     }
     this._tbody.replaceChildren(fragment2);
+    this._table.setAttribute("aria-colcount", String(this._visibleColumns().length + (this.options.selectable === "multi" ? 1 : 0) + (this.options.rowReorder ? 1 : 0)));
     if (this._growStep) this._table.setAttribute("aria-rowcount", String(projected.length + 1));
     this._syncSelectAll();
     this._syncGrowing();
@@ -12265,6 +12696,19 @@ var Table = class extends Component {
     const elements = this._rowElements.get(id) ?? [];
     elements.push(tr);
     this._rowElements.set(id, elements);
+    if (this.options.rowReorder) {
+      const handle = h("button", {
+        class: "zx-table__row-handle",
+        type: "button",
+        draggable: true,
+        dataset: { rowHandle: "" },
+        ariaLabel: `Move row ${index + 1}`,
+        ariaPressed: String(Object.is(this._grabbedId, id)),
+        disabled: Boolean(this._sort && this.options.sortMode === "local"),
+        title: this._sort && this.options.sortMode === "local" ? "Clear sorting to reorder rows" : null
+      }, icon("drag", { size: 14 }));
+      tr.append(h("td", { class: "zx-table__reorder-cell" }, handle));
+    }
     if (this.options.selectable === "multi") {
       const checkbox = h("input", {
         class: "zx-table__checkbox zx-table__row-checkbox",
@@ -12274,7 +12718,7 @@ var Table = class extends Component {
       });
       tr.append(h("td", { class: "zx-table__selection-cell" }, checkbox));
     }
-    this._columns.forEach((column) => {
+    this._visibleColumns().forEach((column) => {
       const cell = (
         /** @type {HTMLTableCellElement} */
         h("td")
@@ -12310,7 +12754,7 @@ var Table = class extends Component {
     const content = h("span", { class: "zx-table__cell-content" });
     if (value && typeof value === "object" && typeof value.nodeType === "number") content.append(value);
     else if (value != null) content.append(document.createTextNode(String(value)));
-    if (!this._hierarchy || column.id !== this._hierarchy.column || !tree) {
+    if (!this._hierarchy || column.id !== this._hierarchyColumn() || !tree) {
       cell.replaceChildren(...content.childNodes);
       return;
     }
@@ -12341,6 +12785,7 @@ var Table = class extends Component {
     if (!rowElement || !this._tbody.contains(rowElement)) return;
     const meta = this._rowMeta.get(rowElement);
     if (!meta) return;
+    if (target.closest(".zx-table__row-handle")) return;
     if (this._edit) {
       this.commitEdit();
       if (this._edit) return;
@@ -12360,6 +12805,14 @@ var Table = class extends Component {
       );
       return;
     }
+    if (isInteractiveCellContent(target)) return;
+    if (this._editMode !== false && this._editTrigger === "single") {
+      const cell = target?.closest('td[data-editable="true"]');
+      if (cell && this._tbody.contains(cell)) {
+        this.startEdit(meta.id, String(cell.dataset.column));
+        return;
+      }
+    }
     this.emit("rowclick", { ...meta, event });
     if (this.options.selectable === "single" && !this._selected.has(meta.id)) {
       this._selected = /* @__PURE__ */ new Set([meta.id]);
@@ -12380,7 +12833,8 @@ var Table = class extends Component {
     if (!rowElement || !this._tbody.contains(rowElement)) return;
     const meta = this._rowMeta.get(rowElement);
     if (!meta) return;
-    if (this._editMode !== false) {
+    if (isInteractiveCellContent(target)) return;
+    if (this._editMode !== false && this._editTrigger === "double") {
       const cell = target?.closest('td[data-editable="true"]');
       if (cell && this._tbody.contains(cell)) {
         this.startEdit(meta.id, String(cell.dataset.column));
@@ -12682,13 +13136,14 @@ var Table = class extends Component {
    * @returns {{id: unknown, columnId: string, index: number}|null} Next cell, or null at the end.
    */
   _nextEditableCell(rowIndex, columnId, direction) {
-    const columnCount = this._columns.length;
+    const columns = this._visibleColumns();
+    const columnCount = columns.length;
     if (rowIndex < 0 || columnCount === 0) return null;
     const visible = this._visibleData();
     const startingId = this._idFor(this._data[rowIndex]);
     let row2 = visible.findIndex((candidate) => Object.is(this._idFor(candidate), startingId));
     if (row2 < 0) return null;
-    let column = this._columns.findIndex((candidate) => candidate.id === columnId);
+    let column = columns.findIndex((candidate) => candidate.id === columnId);
     const limit = visible.length * columnCount + columnCount;
     for (let step = 0; step < limit; step += 1) {
       column += direction;
@@ -12701,7 +13156,7 @@ var Table = class extends Component {
       }
       if (row2 < 0 || row2 >= visible.length) return null;
       const candidateRow = visible[row2];
-      const candidateColumn = this._columns[column];
+      const candidateColumn = columns[column];
       if (resolveEditable(candidateColumn, candidateRow) !== false) {
         return {
           id: this._idFor(candidateRow),
@@ -12944,6 +13399,53 @@ function sortHierarchyRows(rows, rowId, parentId, getValue, direction) {
   }
   return result;
 }
+function reorderTableRows(rows, rowId, id, targetId, position2 = "before", parentId = null) {
+  if (!Array.isArray(rows) || Object.is(id, targetId)) return null;
+  const from = rows.findIndex((row2) => Object.is(readRowValue(rowId, row2), id));
+  const target = rows.findIndex((row2) => Object.is(readRowValue(rowId, row2), targetId));
+  if (from < 0 || target < 0) return null;
+  if (parentId && !sameHierarchyParent(
+    readRowValue(parentId, rows[from]),
+    readRowValue(parentId, rows[target])
+  )) return null;
+  if (parentId) {
+    const forest = hierarchyForest(rows, rowId, parentId);
+    const movingNode = forest.nodes[from];
+    const targetNode = forest.nodes[target];
+    if (!movingNode || !targetNode || movingNode.parent !== targetNode.parent) return null;
+    const branchNodes = (root) => {
+      const result = [];
+      const stack2 = [root];
+      while (stack2.length) {
+        const node = (
+          /** @type {TableHierarchyNode} */
+          stack2.pop()
+        );
+        result.push(node);
+        for (let index = node.children.length - 1; index >= 0; index -= 1) stack2.push(node.children[index]);
+      }
+      return result;
+    };
+    const moving2 = new Set(branchNodes(movingNode).map((node) => node.index));
+    const targetBranch = new Set(branchNodes(targetNode).map((node) => node.index));
+    const block = rows.filter((_row, index) => moving2.has(index));
+    const remaining = rows.filter((_row, index) => !moving2.has(index));
+    const remainingSourceIndexes = rows.map((_row, index) => index).filter((index) => !moving2.has(index));
+    let insertion = remainingSourceIndexes.findIndex((index) => index === target);
+    if (position2 === "after") {
+      const targetPositions = remainingSourceIndexes.map((sourceIndex, index) => targetBranch.has(sourceIndex) ? index : -1).filter((index) => index >= 0);
+      insertion = Math.max(...targetPositions) + 1;
+    }
+    if (insertion < 0) return null;
+    remaining.splice(insertion, 0, ...block);
+    return remaining;
+  }
+  const next = [...rows];
+  const [moving] = next.splice(from, 1);
+  const adjustedTarget = next.findIndex((row2) => Object.is(readRowValue(rowId, row2), targetId));
+  next.splice(adjustedTarget + (position2 === "after" ? 1 : 0), 0, moving);
+  return next;
+}
 function resolveEditable(column, row2) {
   if (!column || typeof column !== "object") return false;
   if (typeof column.editor === "function") {
@@ -13024,7 +13526,8 @@ function hierarchyForest(rows, rowId, parentId) {
   for (const node of nodes) if (!byId.has(node.id)) byId.set(node.id, node);
   const parentOf = /* @__PURE__ */ new Map();
   for (const node of nodes) {
-    const parent = byId.get(readRowValue(parentId, node.row)) ?? null;
+    const parentValue = readRowValue(parentId, node.row);
+    const parent = parentValue == null ? null : byId.get(parentValue) ?? null;
     parentOf.set(node, parent === node ? null : parent);
   }
   for (const node of nodes) {
@@ -13053,6 +13556,9 @@ function hierarchyBranchIds(rows, rowId, parentId) {
 function readRowValue(accessor, row2) {
   return typeof accessor === "function" ? accessor(row2) : row2?.[accessor];
 }
+function sameHierarchyParent(left, right) {
+  return left == null && right == null || Object.is(left, right);
+}
 function normalizeHierarchy(option, columns) {
   if (!option || typeof option !== "object") return null;
   const parentId = option.parentId;
@@ -13072,6 +13578,23 @@ function normalizeEditMode(mode) {
 function isInsideEditor(target) {
   return Boolean(target?.closest?.(".zx-table__editor"));
 }
+function isInteractiveCellContent(target) {
+  const cell = target?.closest?.("td[data-column]");
+  const interactive = target?.closest?.([
+    "a[href]",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "summary",
+    '[contenteditable="true"]',
+    '[role="button"]',
+    '[role="link"]',
+    '[tabindex]:not([tabindex="-1"])',
+    "[data-zx-table-no-edit]"
+  ].join(","));
+  return Boolean(cell && interactive && interactive !== cell && cell.contains(interactive));
+}
 function deferToEditor(target) {
   if (target.closest("[popover]")) return true;
   return target.getAttribute?.("aria-expanded") === "true";
@@ -15560,11 +16083,11 @@ var Card = class extends Component {
       this.setFooter(this.options.footer);
       this.setLink(this.options.link);
       return root;
-    } catch (error) {
+    } catch (error2) {
       this._actionAbort?.abort();
       this._linkAbort?.abort();
       if (!created) restoreTarget(root, this._original);
-      throw error;
+      throw error2;
     }
   }
   /** Replaces the card title. @param {string} title Next title. @returns {this} */
@@ -15608,9 +16131,9 @@ var Card = class extends Component {
         if (onclick) control.addEventListener("click", onclick, { signal: nextAbort.signal });
         return control;
       });
-    } catch (error) {
+    } catch (error2) {
       nextAbort.abort();
-      throw error;
+      throw error2;
     }
     this._actionAbort?.abort();
     this._actionAbort = nextAbort;
@@ -19051,6 +19574,106 @@ function count(value) {
   return value.toLocaleString();
 }
 
+// src/components/app-icon/app-icon.js
+var AppIcon = class extends Component {
+  static cssName = "app-icon";
+  /** @type {Readonly<AppIconOptions>} */
+  static defaults = {
+    icon: null,
+    color: null,
+    size: 36,
+    iconSize: "52%",
+    label: null,
+    badge: null,
+    selected: false,
+    glass: "subtle",
+    class: []
+  };
+  /** @returns {HTMLElement} */
+  render() {
+    this._createdRoot = this.el === null;
+    const root = (
+      /** @type {HTMLElement} */
+      this.el ?? h("span")
+    );
+    this.el = root;
+    this._snapshot = this._createdRoot ? null : snapshotTarget(root);
+    this._state = { ...this.options };
+    this._appliedClasses = [];
+    this._sync();
+    return root;
+  }
+  /** Updates identity or presentation without replacing the root. @param {Partial<AppIconOptions>} values @returns {this} */
+  set(values = {}) {
+    if (!values || typeof values !== "object") return this;
+    Object.assign(this._state, values);
+    this._sync();
+    return this;
+  }
+  /** Restores an enhanced target. @returns {void} */
+  destroy() {
+    const root = this.el;
+    const snapshot10 = this._snapshot;
+    super.destroy();
+    if (!this._createdRoot && root) restoreTarget(root, snapshot10);
+  }
+  /** @returns {void} */
+  _sync() {
+    const state = this._state;
+    this.el.classList.remove(...this._appliedClasses);
+    this._appliedClasses = [state.class].flat().flatMap((value) => String(value ?? "").split(/\s+/)).filter(Boolean);
+    this.el.classList.add(...this._appliedClasses);
+    const size2 = cssLength2(state.size, "36px");
+    const glyphSize = cssLength2(state.iconSize, "52%");
+    this.el.style.setProperty("--zx-app-icon-size", size2);
+    this.el.style.setProperty("--zx-app-icon-glyph-size", glyphSize);
+    if (isCssColor(state.color)) this.el.style.setProperty("--zx-app-icon-color", String(state.color));
+    else this.el.style.removeProperty("--zx-app-icon-color");
+    this.el.dataset.glass = normalizeGlass(state.glass);
+    this.el.toggleAttribute("data-selected", Boolean(state.selected));
+    const label = state.label == null ? "" : String(state.label).trim();
+    if (label) {
+      this.el.setAttribute("role", "img");
+      this.el.setAttribute("aria-label", label);
+      this.el.removeAttribute("aria-hidden");
+    } else {
+      this.el.removeAttribute("role");
+      this.el.removeAttribute("aria-label");
+      this.el.setAttribute("aria-hidden", "true");
+    }
+    const visual = resolveVisual(state.icon);
+    const badge2 = state.badge == null || state.badge === "" ? null : h("span", {
+      class: "zx-app-icon__badge",
+      ariaHidden: "true"
+    }, String(state.badge));
+    this.el.replaceChildren(
+      h("span", { class: "zx-app-icon__shine", ariaHidden: "true" }),
+      h("span", { class: "zx-app-icon__glyph", ariaHidden: "true" }, visual),
+      badge2
+    );
+  }
+};
+function appIcon(options = {}) {
+  return new AppIcon(null, options).toElement();
+}
+function resolveVisual(value) {
+  const resolved = typeof value === "function" ? value() : value;
+  if (typeof resolved === "string") return icon(resolved, { size: "1em" });
+  return resolved && typeof resolved === "object" && typeof resolved.nodeType === "number" ? (
+    /** @type {Node} */
+    resolved
+  ) : null;
+}
+function cssLength2(value, fallback) {
+  if (typeof value === "number" && Number.isFinite(value)) return `${Math.max(1, value)}px`;
+  const text4 = String(value ?? "").trim();
+  return text4 && !/[;{}]/.test(text4) ? text4 : fallback;
+}
+function normalizeGlass(value) {
+  if (value === false || value === "none") return "none";
+  return value === "strong" ? "strong" : "subtle";
+}
+
 // src/components/launcher/launcher.js
 var Launcher = class extends Component {
   static cssName = "launcher";
@@ -19320,9 +19943,9 @@ var Launcher = class extends Component {
           itemOrder: item.itemOrder ?? (source.order === "source" ? itemOrder : void 0)
         })));
         this._renderResults();
-      } catch (error) {
+      } catch (error2) {
         if (request.signal.aborted || sequence !== this._requestSequence) return;
-        this.emit("error", { source, error });
+        this.emit("error", { source, error: error2 });
       }
     }));
     if (request.signal.aborted || sequence !== this._requestSequence) return;
@@ -20092,7 +20715,7 @@ var Tooltip = class extends Component {
     this.#content = this.options.content;
     this.#disabled = Boolean(this.options.disabled);
     this.#describedBy = resolved.getAttribute("aria-describedby");
-    this.el.style.setProperty("--zx-tooltip-max-inline-size", cssLength2(this.options.maxWidth));
+    this.el.style.setProperty("--zx-tooltip-max-inline-size", cssLength3(this.options.maxWidth));
     const trigger = TRIGGERS.has(this.options.trigger) ? this.options.trigger : "both";
     if (trigger === "manual") return;
     if (trigger === "hover" || trigger === "both") {
@@ -20350,7 +20973,7 @@ function appendToken(list, token) {
   if (!tokens.includes(token)) tokens.push(token);
   return tokens.join(" ");
 }
-function cssLength2(value) {
+function cssLength3(value) {
   return typeof value === "number" && Number.isFinite(value) ? `${value}px` : String(value);
 }
 function isFocusVisible(element) {
@@ -22851,7 +23474,7 @@ var Grid = class _Grid extends Table {
    * @param {GridOptions & import('../table/table.js').TableOptions} [options={}] Grid/Table options.
    */
   constructor(target = null, options = {}) {
-    super(target, options);
+    super(target, { editTrigger: "single", ...options });
   }
   /**
    * Creates an editable hierarchical billing-line grid.
@@ -22890,6 +23513,9 @@ function billingItemsConfig(options = {}) {
   return {
     rowId: fields.id,
     editMode: "cell",
+    editTrigger: "single",
+    rowReorder: true,
+    columnVisibility: true,
     hierarchy: { parentId: fields.parent, column: fields.item, expanded: true },
     responsive: "sm",
     ...tableOptions,
@@ -23121,8 +23747,8 @@ var Chart = class extends Component {
     return this;
   }
   /** Shows an error and destroys the current engine. @param {unknown} error @returns {this} */
-  setError(error) {
-    this._error = error ?? new Error(String(this.options.errorText));
+  setError(error2) {
+    this._error = error2 ?? new Error(String(this.options.errorText));
     this._hasError = true;
     this._loading = false;
     this._destroyHandle();
@@ -23141,8 +23767,8 @@ var Chart = class extends Component {
   resize() {
     try {
       this._handle?.resize?.();
-    } catch (error) {
-      this.setError(error);
+    } catch (error2) {
+      this.setError(error2);
     }
     return this;
   }
@@ -23195,8 +23821,8 @@ var Chart = class extends Component {
         this.emit("ready", { instance: this.getInstance() });
       }
       if (emitUpdate) this.emit("update", { data: this._data, type: this._type });
-    } catch (error) {
-      this.setError(error);
+    } catch (error2) {
+      this.setError(error2);
     }
   }
   /** @returns {ChartSpec} */
@@ -23438,8 +24064,8 @@ function themeChartOptions(root) {
     borderColor: borderColor || void 0
   };
 }
-function errorMessage(error, fallback) {
-  const message = error && typeof error === "object" && "message" in error ? String(error.message) : "";
+function errorMessage(error2, fallback) {
+  const message = error2 && typeof error2 === "object" && "message" in error2 ? String(error2.message) : "";
   return message.trim() ? message : String(fallback);
 }
 
@@ -24078,8 +24704,8 @@ var TreeView = class extends Component {
         node[this._childrenKey] = Array.isArray(children) ? children : [];
         if (node[this._childrenKey].length === 0) node.hasChildren = false;
         return true;
-      } catch (error) {
-        this.emit("error", { error, node, id });
+      } catch (error2) {
+        this.emit("error", { error: error2, node, id });
         return false;
       } finally {
         this._loading.delete(id);
@@ -24567,9 +25193,9 @@ var Finder = class extends Component {
         const children = await this.options.load(node);
         node[this._childrenKey] = Array.isArray(children) ? children : [];
         if (node[this._childrenKey].length === 0) node.hasChildren = false;
-      } catch (error) {
+      } catch (error2) {
         node[this._childrenKey] = [];
-        this.emit("error", { error, node, id });
+        this.emit("error", { error: error2, node, id });
       } finally {
         this._loading.delete(id);
       }
@@ -24999,6 +25625,821 @@ function restoreCustomElements(origins) {
   }
 }
 
+// src/components/filter/filter-model.js
+var filterOperators = Object.freeze([
+  op("contains", "contains", "single", ["text"]),
+  op("notContains", "does not contain", "single", ["text"]),
+  op("eq", "is", "single", ["text", "number", "money", "boolean", "enum", "status", "priority", "country", "currency", "unit", "entity", "date", "datetime"]),
+  op("neq", "is not", "single", ["text", "number", "money", "boolean", "enum", "status", "priority", "country", "currency", "unit", "entity", "date", "datetime"]),
+  op("startsWith", "starts with", "single", ["text"]),
+  op("endsWith", "ends with", "single", ["text"]),
+  op("lt", "is less than", "single", ["number", "money"]),
+  op("lte", "is at most", "single", ["number", "money"]),
+  op("gt", "is greater than", "single", ["number", "money"]),
+  op("gte", "is at least", "single", ["number", "money"]),
+  op("on", "is on", "single", ["date", "datetime"]),
+  op("notOn", "is not on", "single", ["date", "datetime"]),
+  op("before", "is before", "single", ["date", "datetime"]),
+  op("onOrBefore", "is on or before", "single", ["date", "datetime"]),
+  op("after", "is after", "single", ["date", "datetime"]),
+  op("onOrAfter", "is on or after", "single", ["date", "datetime"]),
+  op("between", "is between", "pair", ["number", "money", "date", "datetime"]),
+  op("notBetween", "is not between", "pair", ["number", "money", "date", "datetime"]),
+  op("withinLast", "is within the last", "pair", ["date", "datetime"]),
+  op("withinNext", "is within the next", "pair", ["date", "datetime"]),
+  op("anyOf", "is any of", "many", ["enum", "status", "priority", "country", "currency", "unit", "entity"]),
+  op("noneOf", "is none of", "many", ["enum", "status", "priority", "country", "currency", "unit", "entity"]),
+  op("containsAny", "contains any", "many", ["tags"]),
+  op("containsAll", "contains all", "many", ["tags"]),
+  op("containsNone", "contains none", "many", ["tags"]),
+  op("isEmpty", "is empty", "none", ["text", "number", "money", "date", "datetime", "boolean", "enum", "status", "priority", "country", "currency", "unit", "entity", "tags"]),
+  op("isNotEmpty", "is not empty", "none", ["text", "number", "money", "date", "datetime", "boolean", "enum", "status", "priority", "country", "currency", "unit", "entity", "tags"])
+]);
+function emptyFilterAst() {
+  return { version: 1, root: { kind: "group", id: uid("filter-root"), logic: "and", children: [] } };
+}
+function filterCondition(initial = {}) {
+  return {
+    kind: "condition",
+    id: String(initial.id || uid("filter-condition")),
+    field: String(initial.field ?? ""),
+    operator: String(initial.operator ?? ""),
+    value: cloneFilterValue(initial.value ?? null)
+  };
+}
+function cloneFilterValue(value) {
+  return cloneJson(value);
+}
+function filterGroup(logic = "and", children = []) {
+  return { kind: "group", id: uid("filter-group"), logic, children };
+}
+function parseFilterAst(value, limits = {}) {
+  const maxDepth = finiteLimit(limits.maxDepth, 3);
+  const maxConditions = finiteLimit(limits.maxConditions, 50);
+  if (!plainObject(value) || value.version !== 1 || !plainObject(value.root)) {
+    throw new TypeError("Filter AST must have version 1 and a root group");
+  }
+  const ids = /* @__PURE__ */ new Set();
+  let conditions = 0;
+  const visit = (raw2, depth, root2 = false) => {
+    if (!plainObject(raw2)) throw new TypeError("Filter nodes must be plain objects");
+    const id = String(raw2.id ?? "").trim();
+    if (!id || ids.has(id)) throw new TypeError("Filter node IDs must be non-empty and unique");
+    ids.add(id);
+    if (raw2.kind === "group") {
+      if (depth > maxDepth) throw new RangeError("Filter group depth exceeds maxDepth");
+      if (raw2.logic !== "and" && raw2.logic !== "or") throw new TypeError("Filter group logic must be and or or");
+      if (!Array.isArray(raw2.children)) throw new TypeError("Filter group children must be an array");
+      return {
+        kind: "group",
+        id,
+        logic: raw2.logic,
+        children: raw2.children.map((child) => visit(child, depth + 1, false))
+      };
+    }
+    if (root2 || raw2.kind !== "condition") throw new TypeError("Filter root must be a group");
+    conditions += 1;
+    if (conditions > maxConditions) throw new RangeError("Filter condition count exceeds maxConditions");
+    return {
+      kind: "condition",
+      id,
+      field: String(raw2.field ?? ""),
+      operator: String(raw2.operator ?? ""),
+      value: cloneJson(raw2.value)
+    };
+  };
+  const root = visit(value.root, 0, true);
+  if (root.kind !== "group") throw new TypeError("Filter root must be a group");
+  return (
+    /** @type {FilterAst} */
+    { version: 1, root }
+  );
+}
+function cloneFilterAst(value) {
+  return parseFilterAst(value, { maxDepth: Infinity, maxConditions: Infinity });
+}
+function stringifyFilterAst(value) {
+  return JSON.stringify(cloneFilterAst(value));
+}
+function validateFilterAst(ast, fields, operators = filterOperators) {
+  const errors = [];
+  const fieldMap = new Map((Array.isArray(fields) ? fields : []).map((field) => [String(field.id), field]));
+  const operatorMap = new Map((Array.isArray(operators) ? operators : []).map((operator) => [String(operator.id), operator]));
+  const visit = (node, root = false) => {
+    if (node.kind === "group") {
+      if (!root && node.children.length === 0) errors.push(error(node.id, "empty-group", "Nested groups need at least one condition"));
+      node.children.forEach((child) => visit(child));
+      return;
+    }
+    const field = fieldMap.get(node.field);
+    if (!field) errors.push(error(node.id, "unknown-field", node.field ? `Unavailable field: ${node.field}` : "Choose a field"));
+    const operator = operatorMap.get(node.operator);
+    if (!operator) {
+      errors.push(error(node.id, "unknown-operator", node.operator ? `Unavailable operator: ${node.operator}` : "Choose an operator"));
+      return;
+    }
+    if (field) {
+      const allowed = Array.isArray(field.operators) && field.operators.length ? field.operators : operators.filter((candidate) => candidate.types.includes(field.type)).map((candidate) => candidate.id);
+      if (!allowed.includes(operator.id) || !operator.types.includes(field.type)) {
+        errors.push(error(node.id, "operator-type", `${operator.label} is not available for ${field.label}`));
+      }
+    }
+    if (!validArity(operator.arity, node.value)) {
+      errors.push(error(node.id, "value", operator.arity === "pair" ? "Enter both values" : operator.arity === "many" ? "Choose at least one value" : operator.arity === "none" ? "This operator does not accept a value" : "Enter a value"));
+    }
+  };
+  visit(ast.root, true);
+  return { valid: errors.length === 0, errors };
+}
+function op(id, label, arity, types) {
+  return Object.freeze({ id, label, arity, types: Object.freeze(types) });
+}
+function error(nodeId, code, message) {
+  return { nodeId, code, message };
+}
+function validArity(arity, value) {
+  if (arity === "none") return value === null;
+  if (arity === "pair") return Array.isArray(value) && value.length === 2 && value.every(filled);
+  if (arity === "many") return Array.isArray(value) && value.length > 0 && value.every(filled);
+  return filled(value);
+}
+function filled(value) {
+  return value !== null && value !== void 0 && !(typeof value === "string" && value.trim() === "");
+}
+function cloneJson(value, seen = /* @__PURE__ */ new WeakSet()) {
+  if (value === null || typeof value === "string" || typeof value === "boolean") return value;
+  if (typeof value === "number") {
+    if (!Number.isFinite(value)) throw new TypeError("Filter values cannot contain non-finite numbers");
+    return value;
+  }
+  if (typeof value !== "object" || value instanceof Date || typeof value.nodeType === "number") {
+    throw new TypeError("Filter values must be JSON-safe");
+  }
+  if (seen.has(value)) throw new TypeError("Filter values cannot contain cycles");
+  seen.add(value);
+  if (Array.isArray(value)) {
+    const result2 = value.map((item) => cloneJson(item, seen));
+    seen.delete(value);
+    return result2;
+  }
+  if (!plainObject(value)) throw new TypeError("Filter values must be plain JSON objects");
+  const result = {};
+  for (const [key, item] of Object.entries(value)) {
+    Object.defineProperty(result, key, {
+      value: cloneJson(item, seen),
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  }
+  seen.delete(value);
+  return result;
+}
+function plainObject(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+function finiteLimit(value, fallback) {
+  if (value === Infinity) return Infinity;
+  const number2 = Number(value);
+  return Number.isFinite(number2) && number2 >= 0 ? Math.floor(number2) : fallback;
+}
+
+// src/components/filter/filter.js
+var Filter = class extends Component {
+  static cssName = "filter";
+  /** @type {Readonly<FilterOptions>} */
+  static defaults = {
+    fields: [],
+    value: null,
+    operators: [],
+    allowGroups: true,
+    maxDepth: 3,
+    maxConditions: 50,
+    autoApply: false,
+    readonly: false,
+    disabled: false,
+    applyLabel: "Apply filters",
+    clearLabel: "Clear"
+  };
+  /** @returns {HTMLElement} */
+  render() {
+    this._createdRoot = this.el === null;
+    const root = (
+      /** @type {HTMLElement} */
+      this.el ?? h("div")
+    );
+    this.el = root;
+    this._snapshot = this._createdRoot ? null : snapshotTarget(root);
+    this._fields = (Array.isArray(this.options.fields) ? this.options.fields : []).map((field) => ({ ...field }));
+    this._operators = mergeOperators(filterOperators, this.options.operators);
+    this._readonly = Boolean(this.options.readonly);
+    this._disabled = Boolean(this.options.disabled);
+    this._async = /* @__PURE__ */ new Map();
+    this._customEditors = [];
+    this._value = this.options.value == null ? emptyFilterAst() : parseFilterAst(this.options.value, this._limits());
+    this.listen(root, "change", (event) => this._handleChange(event));
+    this.listen(root, "input", (event) => this._handleInput(event));
+    this.listen(root, "click", (event) => this._handleClick(event));
+    this._render();
+    return root;
+  }
+  /** Returns a defensive AST copy. @returns {FilterAst} */
+  getValue() {
+    return cloneFilterAst(this._value);
+  }
+  /** Atomically replaces the AST. @param {unknown} value @param {{silent?:boolean}} [options={}] @returns {this} */
+  setValue(value, { silent = false } = {}) {
+    const parsed = parseFilterAst(value, this._limits());
+    this._abortAll();
+    this._value = parsed;
+    this._render();
+    if (!silent) this._changed("set", this._value.root.id);
+    return this;
+  }
+  /** Adds a condition to a group. @param {string|null} [parentId=null] @param {Record<string,unknown>} [initial={}] @returns {string|null} */
+  addCondition(parentId = null, initial = {}) {
+    if (!this._canMutate() || conditionCount(this._value.root) >= Number(this.options.maxConditions)) return null;
+    const parent = findGroup(this._value.root, parentId ?? this._value.root.id);
+    if (!parent) return null;
+    const first = this._fields[0];
+    const field = String(initial.field ?? first?.id ?? "");
+    const definition = this._field(field);
+    const node = filterCondition({
+      ...initial,
+      field,
+      operator: String(initial.operator ?? this._defaultOperator(definition) ?? "")
+    });
+    parent.children.push(node);
+    this._render();
+    this._changed("add", node.id);
+    this.focus(node.id);
+    return node.id;
+  }
+  /** Adds a nested group. @param {string|null} [parentId=null] @param {'and'|'or'} [logic='and'] @returns {string|null} */
+  addGroup(parentId = null, logic = "and") {
+    if (!this._canMutate() || !this.options.allowGroups) return null;
+    const parent = findGroup(this._value.root, parentId ?? this._value.root.id);
+    if (!parent || groupDepth(this._value.root, parent.id) >= Number(this.options.maxDepth)) return null;
+    const group = filterGroup(logic === "or" ? "or" : "and");
+    parent.children.push(group);
+    this._render();
+    this._changed("add", group.id);
+    this.focus(group.id);
+    return group.id;
+  }
+  /** Updates a node by stable ID. @param {string} id @param {Record<string,unknown>} patch @returns {this} */
+  update(id, patch = {}) {
+    if (!this._canMutate()) return this;
+    const node = findNode2(this._value.root, id);
+    if (!node) return this;
+    if (node.kind === "group") {
+      if (patch.logic === "and" || patch.logic === "or") node.logic = patch.logic;
+    } else {
+      if (Object.hasOwn(patch, "field")) node.field = String(patch.field ?? "");
+      if (Object.hasOwn(patch, "operator")) node.operator = String(patch.operator ?? "");
+      if (Object.hasOwn(patch, "value")) node.value = parseValueJson(patch.value);
+    }
+    this._abort(id);
+    this._render();
+    this._changed("update", id);
+    return this;
+  }
+  /** Removes a non-root node. @param {string} id @returns {this} */
+  remove(id) {
+    if (!this._canMutate() || id === this._value.root.id) return this;
+    const parent = findParent(this._value.root, id);
+    if (!parent) return this;
+    const index = parent.children.findIndex((child) => child.id === id);
+    const focusId = parent.children[index + 1]?.id ?? parent.children[index - 1]?.id ?? parent.id;
+    const removed = removeNode(this._value.root, id);
+    if (!removed) return this;
+    this._abortTree(removed);
+    this._render();
+    const label = removed.kind === "condition" ? this._field(removed.field)?.label ?? "Filter" : "Filter group";
+    this._announce(`${label} removed`);
+    this._changed("remove", id);
+    this.focus(focusId);
+    return this;
+  }
+  /** Moves a node into a group while preserving its identity. @param {string} id @param {string} parentId @param {number} index @returns {this} */
+  move(id, parentId, index) {
+    const node = findNode2(this._value.root, id);
+    const parent = findGroup(this._value.root, parentId);
+    const previous = findParent(this._value.root, id);
+    if (!this._canMutate() || id === this._value.root.id || !node || !parent || !previous || containsNode(node, parentId)) return this;
+    const previousIndex = previous.children.findIndex((child) => child.id === id);
+    const removed = previous.children.splice(previousIndex, 1)[0];
+    parent.children.splice(Math.max(0, Math.min(parent.children.length, Number(index) || 0)), 0, removed);
+    try {
+      parseFilterAst(this._value, this._limits());
+    } catch {
+      parent.children.splice(parent.children.indexOf(removed), 1);
+      previous.children.splice(previousIndex, 0, removed);
+      return this;
+    }
+    this._render();
+    this._changed("move", id);
+    return this;
+  }
+  /** Returns semantic validity and errors. @returns {{valid:boolean,errors:Array<Record<string,string>>}} */
+  validate() {
+    return validateFilterAst(this._value, this._fields, this._operators);
+  }
+  /** Applies only a valid AST. @returns {FilterAst|null} */
+  apply() {
+    if (this._disabled) return null;
+    const result = this.validate();
+    if (!result.valid) {
+      this.emit("invalid", { errors: result.errors });
+      this.focus(result.errors[0]?.nodeId);
+      return null;
+    }
+    const value = this.getValue();
+    this.emit("apply", { value });
+    return value;
+  }
+  /** Clears all conditions. @param {{silent?:boolean}} [options={}] @returns {this} */
+  clear({ silent = false } = {}) {
+    if (!this._canMutate()) return this;
+    this._abortAll();
+    this._value.root.children = [];
+    this._render();
+    if (!silent) this._changed("clear", this._value.root.id);
+    this.refs.add?.focus();
+    return this;
+  }
+  /** Focuses a condition's field or the Add button. @param {string|null} [id=null] @returns {this} */
+  focus(id = null) {
+    const selector = id ? `[data-node-id="${cssEscape(id)}"] :is([data-filter-field], [data-filter-logic], [data-filter-action="add"])` : '[data-filter-action="add"]';
+    queueMicrotask(() => (
+      /** @type {HTMLElement|null} */
+      this.el.querySelector(selector)?.focus()
+    ));
+    return this;
+  }
+  /** @param {boolean} readonly @returns {this} */
+  setReadonly(readonly) {
+    this._readonly = Boolean(readonly);
+    this._render();
+    return this;
+  }
+  /** @returns {this} */
+  enable() {
+    this._disabled = false;
+    this._render();
+    return this;
+  }
+  /** @returns {this} */
+  disable() {
+    this._disabled = true;
+    this._abortAll();
+    this._render();
+    return this;
+  }
+  /** @returns {void} */
+  destroy() {
+    this._abortAll();
+    this._destroyEditors();
+    const root = this.el;
+    const snapshot10 = this._snapshot;
+    super.destroy();
+    if (!this._createdRoot && root) restoreTarget(root, snapshot10);
+  }
+  /** @returns {void} */
+  _render() {
+    this._destroyEditors();
+    this._renderVersion = (this._renderVersion ?? 0) + 1;
+    const status = h("div", { ref: "status", class: "zx-filter__status", role: "status", ariaLive: "polite" });
+    const tree = this._renderGroup(this._value.root, 0, true);
+    const actions2 = h(
+      "div",
+      { class: "zx-filter__actions" },
+      actionButton("add", this._value.root.id, "plus", "Add filter", { ref: "add", disabled: this._blocked() }),
+      this.options.allowGroups ? actionButton("add-group", this._value.root.id, "folder", "Add group", { disabled: this._blocked() }) : null,
+      actionButton("clear", "", "x", String(this.options.clearLabel), { disabled: this._blocked() }),
+      actionButton("apply", "", "check", String(this.options.applyLabel), { class: "zx-button--primary", disabled: this._disabled })
+    );
+    this.el.replaceChildren(status, tree, actions2);
+    this.refs.status = status;
+    this.refs.add = /** @type {HTMLElement} */
+    this.el.querySelector('[data-filter-action="add"]');
+    this.el.toggleAttribute("data-readonly", this._readonly);
+    this.el.toggleAttribute("data-disabled", this._disabled);
+    const result = this.validate();
+    this.el.dataset.valid = String(result.valid);
+    for (const error2 of result.errors) this.el.querySelector(`[data-node-id="${cssEscape(error2.nodeId)}"]`)?.setAttribute("data-invalid", "");
+  }
+  /** @param {any} group @param {number} depth @param {boolean} root @returns {HTMLElement} */
+  _renderGroup(group, depth, root) {
+    const children = h(
+      "ol",
+      { class: "zx-filter__children" },
+      group.children.map((node) => node.kind === "group" ? this._renderGroup(node, depth + 1, false) : this._renderCondition(node))
+    );
+    const logic = h(
+      "select",
+      {
+        class: "zx-filter__logic",
+        dataset: { filterLogic: "", nodeId: group.id },
+        ariaLabel: root ? "Root filter logic" : "Group filter logic",
+        disabled: this._blocked()
+      },
+      h("option", { value: "and", selected: group.logic === "and" }, "Match all"),
+      h("option", { value: "or", selected: group.logic === "or" }, "Match any")
+    );
+    const legend = h("legend", { class: "zx-filter__legend" }, logic, h("span", {}, root ? "conditions" : "in this group"));
+    const controls = h(
+      "div",
+      { class: "zx-filter__group-actions" },
+      actionButton("add", group.id, "plus", "Add filter", { disabled: this._blocked() }),
+      this.options.allowGroups && depth < Number(this.options.maxDepth) ? actionButton("add-group", group.id, "folder", "Add subgroup", { disabled: this._blocked() }) : null,
+      root ? null : actionButton("remove", group.id, "trash", "Remove group", { disabled: this._blocked() })
+    );
+    return h(root ? "fieldset" : "li", {
+      class: "zx-filter__group",
+      dataset: { nodeId: group.id, depth: String(depth) }
+    }, root ? legend : h("fieldset", {}, legend, children, controls), root ? children : null, root ? controls : null);
+  }
+  /** @param {any} node @returns {HTMLElement} */
+  _renderCondition(node) {
+    const field = this._field(node.field);
+    const operators = this._operatorsFor(field);
+    const operator = this._operator(node.operator);
+    const fieldSelect = h(
+      "select",
+      {
+        class: "zx-filter__field",
+        dataset: { filterField: "", nodeId: node.id },
+        ariaLabel: "Filter field",
+        disabled: this._blocked()
+      },
+      h("option", { value: "", selected: !node.field }, "Choose a field\u2026"),
+      this._fields.map((candidate) => h("option", { value: candidate.id, selected: candidate.id === node.field }, candidate.label)),
+      node.field && !field ? h("option", { value: node.field, selected: true }, `Unavailable: ${node.field}`) : null
+    );
+    const operatorSelect = h(
+      "select",
+      {
+        class: "zx-filter__operator",
+        dataset: { filterOperator: "", nodeId: node.id },
+        ariaLabel: "Filter operator",
+        disabled: this._blocked()
+      },
+      h("option", { value: "", selected: !node.operator }, "Choose an operator\u2026"),
+      operators.map((candidate) => h("option", { value: candidate.id, selected: candidate.id === node.operator }, candidate.label)),
+      node.operator && !operators.some((candidate) => candidate.id === node.operator) ? h("option", { value: node.operator, selected: true }, `Unavailable: ${node.operator}`) : null
+    );
+    return h(
+      "li",
+      { class: "zx-filter__condition", dataset: { nodeId: node.id } },
+      fieldSelect,
+      operatorSelect,
+      this._renderValue(node, field, operator),
+      actionButton("remove", node.id, "trash", `Remove ${field?.label ?? "filter"}`, { disabled: this._blocked() })
+    );
+  }
+  /** @param {any} node @param {FilterField|null} field @param {any} operator @returns {HTMLElement} */
+  _renderValue(node, field, operator) {
+    const host = h("div", { class: "zx-filter__value" });
+    if (!field || !operator) return host;
+    if (operator.arity === "none") return h("div", { class: "zx-filter__value zx-filter__value--empty" }, "No value");
+    if (field.type === "custom" && typeof field.editor === "function") {
+      const renderVersion = this._renderVersion;
+      queueMicrotask(() => {
+        if (renderVersion !== this._renderVersion || !this.el.contains(host)) return;
+        const handle = field.editor(host, {
+          value: node.value,
+          field,
+          conditionId: node.id,
+          setValue: (value) => this._setNodeValue(node.id, parseValueJson(value))
+        });
+        if (handle && typeof handle.destroy === "function") this._customEditors.push(handle);
+      });
+      return host;
+    }
+    const values = operator.arity === "pair" ? Array.isArray(node.value) ? node.value : [null, null] : [node.value];
+    if (operator.arity === "many") {
+      const control = choiceSelect(field, node, values[0], true, this._blocked());
+      if (control) return h("div", { class: "zx-filter__value" }, control);
+      return h("div", { class: "zx-filter__value" }, valueInput(field, node.id, Array.isArray(node.value) ? node.value.join(", ") : "", 0, this._blocked(), true));
+    }
+    const controls = values.map((value, index) => choiceSelect(field, node, value, false, this._blocked(), index) ?? valueInput(field, node.id, value, index, this._blocked()));
+    return h("div", { class: "zx-filter__value", dataset: { arity: operator.arity } }, controls);
+  }
+  /** @param {Event} event @returns {void} */
+  _handleChange(event) {
+    if (!this._canMutate()) return;
+    const target = (
+      /** @type {HTMLInputElement|HTMLSelectElement|null} */
+      event.target
+    );
+    const id = target?.dataset.nodeId;
+    if (!target || !id) return;
+    if (target.dataset.filterField !== void 0) {
+      const node = findNode2(this._value.root, id);
+      if (node?.kind !== "condition") return;
+      node.field = target.value;
+      const field = this._field(node.field);
+      node.operator = this._defaultOperator(field) ?? "";
+      node.value = null;
+      this._abort(id);
+      this._render();
+      this._changed("update", id);
+      this.focus(id);
+    } else if (target.dataset.filterOperator !== void 0) {
+      const node = findNode2(this._value.root, id);
+      if (node?.kind !== "condition") return;
+      node.operator = target.value;
+      node.value = null;
+      this._abort(id);
+      this._render();
+      this._changed("update", id);
+      queueMicrotask(() => (
+        /** @type {HTMLElement|null} */
+        this.el.querySelector(`[data-node-id="${cssEscape(id)}"] [data-filter-value]`)?.focus()
+      ));
+    } else if (target.dataset.filterLogic !== void 0) {
+      const node = findNode2(this._value.root, id);
+      if (node?.kind === "group") node.logic = target.value === "or" ? "or" : "and";
+      this._changed("update", id);
+    } else if (target.dataset.filterValue !== void 0) this._valueInput(target);
+  }
+  /** @param {Event} event @returns {void} */
+  _handleInput(event) {
+    if (!this._canMutate()) return;
+    const target = (
+      /** @type {HTMLInputElement|null} */
+      event.target
+    );
+    if (!target || target.dataset.filterValue === void 0) return;
+    this._valueInput(target);
+    const id = target.dataset.nodeId;
+    const node = findNode2(this._value.root, id);
+    const field = node?.kind === "condition" ? this._field(node.field) : null;
+    if (field?.loadChoices) this._scheduleChoices(node.id, field, target.value);
+  }
+  /** @param {HTMLInputElement|HTMLSelectElement} target @returns {void} */
+  _valueInput(target) {
+    const node = findNode2(this._value.root, target.dataset.nodeId);
+    if (node?.kind !== "condition") return;
+    const operator = this._operator(node.operator);
+    const field = this._field(node.field);
+    if (!operator || !field) return;
+    let value;
+    if (target instanceof HTMLSelectElement && target.multiple) {
+      value = Array.from(target.selectedOptions, (option) => parseScalar(option.value, field.type));
+    } else if (operator.arity === "many") {
+      value = target.value.split(",").map((item) => item.trim()).filter(Boolean).map((item) => parseScalar(item, field.type));
+    } else if (operator.arity === "pair") {
+      const pair = Array.isArray(node.value) ? [...node.value] : [null, null];
+      pair[Number(target.dataset.valueIndex) || 0] = parseScalar(target.value, field.type);
+      value = pair;
+    } else value = parseScalar(target.value, field.type);
+    this._setNodeValue(
+      node.id,
+      /** @type {any} */
+      value
+    );
+  }
+  /** @param {MouseEvent} event @returns {void} */
+  _handleClick(event) {
+    const button2 = (
+      /** @type {HTMLElement|null} */
+      event.target?.closest?.("[data-filter-action]")
+    );
+    if (!button2 || !this.el.contains(button2)) return;
+    const action = button2.dataset.filterAction;
+    const id = button2.dataset.nodeId || null;
+    if (action === "add") this.addCondition(id);
+    else if (action === "add-group") this.addGroup(id);
+    else if (action === "remove" && id) this.remove(id);
+    else if (action === "clear") this.clear();
+    else if (action === "apply") this.apply();
+  }
+  /** @param {string} id @param {any} value @returns {void} */
+  _setNodeValue(id, value) {
+    const node = findNode2(this._value.root, id);
+    if (node?.kind !== "condition") return;
+    node.value = value;
+    const result = this.validate();
+    this.el.dataset.valid = String(result.valid);
+    const row2 = this.el.querySelector(`[data-node-id="${cssEscape(id)}"]`);
+    row2?.toggleAttribute("data-invalid", result.errors.some((candidate) => candidate.nodeId === id));
+    this._changed("update", id);
+  }
+  /** @param {string} reason @param {string} nodeId @returns {void} */
+  _changed(reason, nodeId) {
+    const result = this.validate();
+    const value = this.getValue();
+    this.emit("change", { value, valid: result.valid, errors: result.errors, reason, nodeId });
+    if (this.options.autoApply && result.valid) this.emit("apply", { value });
+  }
+  /** @param {string} id @param {FilterField} field @param {string} query @returns {void} */
+  _scheduleChoices(id, field, query) {
+    this._abort(id);
+    if (query.length < Number(field.minQuery ?? 0)) return;
+    const controller = new AbortController();
+    this._setAsyncBusy(id, true);
+    const entry = { controller, timer: setTimeout(async () => {
+      this.emit("query", { conditionId: id, fieldId: field.id, query });
+      try {
+        const choices = await field.loadChoices({ query, signal: controller.signal, conditionId: id, field });
+        if (controller.signal.aborted || this._async.get(id)?.controller !== controller) return;
+        const input = this.el.querySelector(`[data-node-id="${cssEscape(id)}"] [data-filter-value]`);
+        const listId = input?.getAttribute("list");
+        const list = listId ? this.el.querySelector(`#${cssEscape(listId)}`) : null;
+        if (list) list.replaceChildren(...(Array.isArray(choices) ? choices : []).map((choice) => h("option", { value: choice.value }, choice.label)));
+        this.emit("loaded", { conditionId: id, fieldId: field.id, query, choices });
+      } catch (error2) {
+        if (!controller.signal.aborted) this.emit("error", { conditionId: id, fieldId: field.id, query, error: error2 instanceof Error ? error2 : new Error(String(error2)) });
+      } finally {
+        if (this._async.get(id)?.controller === controller) {
+          this._async.delete(id);
+          this._setAsyncBusy(id, false);
+        }
+      }
+    }, Math.max(0, Number(field.debounce ?? 200))) };
+    this._async.set(id, entry);
+  }
+  /** @param {string} id @returns {void} */
+  _abort(id) {
+    const entry = this._async.get(id);
+    if (entry) {
+      clearTimeout(entry.timer);
+      entry.controller.abort();
+      this._async.delete(id);
+      this._setAsyncBusy(id, false);
+    }
+  }
+  /** @param {string} id @param {boolean} busy @returns {void} */
+  _setAsyncBusy(id, busy) {
+    const input = this.el.querySelector(`[data-node-id="${cssEscape(id)}"] [data-filter-value]`);
+    if (busy) input?.setAttribute("aria-busy", "true");
+    else input?.removeAttribute("aria-busy");
+  }
+  /** @param {any} node @returns {void} */
+  _abortTree(node) {
+    if (node.kind === "condition") this._abort(node.id);
+    else node.children.forEach((child) => this._abortTree(child));
+  }
+  /** @returns {void} */
+  _abortAll() {
+    for (const id of [...this._async.keys()]) this._abort(id);
+  }
+  /** @returns {void} */
+  _destroyEditors() {
+    for (const editor of this._customEditors ?? []) editor.destroy?.();
+    this._customEditors = [];
+  }
+  /** @returns {boolean} */
+  _blocked() {
+    return this._readonly || this._disabled;
+  }
+  /** @returns {boolean} */
+  _canMutate() {
+    return !this._blocked();
+  }
+  /** @returns {{maxDepth:number,maxConditions:number}} */
+  _limits() {
+    return { maxDepth: Number(this.options.maxDepth), maxConditions: Number(this.options.maxConditions) };
+  }
+  /** @param {string} id @returns {FilterField|null} */
+  _field(id) {
+    return this._fields.find((field) => field.id === id) ?? null;
+  }
+  /** @param {string} id @returns {any} */
+  _operator(id) {
+    return this._operators.find((operator) => operator.id === id) ?? null;
+  }
+  /** @param {FilterField|null} field @returns {any[]} */
+  _operatorsFor(field) {
+    if (!field) return [];
+    const ids = field.operators?.length ? field.operators : null;
+    return this._operators.filter((operator) => ids ? ids.includes(operator.id) : operator.types.includes(field.type));
+  }
+  /** @param {FilterField|null} field @returns {string|null} */
+  _defaultOperator(field) {
+    return field?.defaultOperator && this._operatorsFor(field).some((operator) => operator.id === field.defaultOperator) ? field.defaultOperator : this._operatorsFor(field)[0]?.id ?? null;
+  }
+  /** @param {string} text @returns {void} */
+  _announce(text4) {
+    if (this.refs.status) this.refs.status.textContent = text4;
+  }
+};
+function actionButton(action, id, iconName, label, props = {}) {
+  return h("button", { type: "button", class: ["zx-button", "zx-button--sm", props.class].filter(Boolean), ...props, dataset: { filterAction: action, nodeId: id } }, icon(iconName, { size: 13 }), h("span", {}, label));
+}
+function choiceSelect(field, node, value, multiple, disabled, index = 0) {
+  const choices = Array.isArray(field.choices) && field.choices.length ? field.choices : field.type === "boolean" ? [{ value: true, label: "True" }, { value: false, label: "False" }] : null;
+  if (!choices) return null;
+  const values = new Set(Array.isArray(value) ? value.map(String) : [String(value ?? "")]);
+  return (
+    /** @type {HTMLSelectElement} */
+    h(
+      "select",
+      {
+        dataset: { filterValue: "", nodeId: node.id, valueIndex: String(index) },
+        ariaLabel: `${field.label} value`,
+        multiple,
+        disabled
+      },
+      !multiple ? h("option", { value: "", selected: !values.has(String(value)) || value == null }, "Choose\u2026") : null,
+      choices.map((choice) => h("option", { value: choice.value, selected: values.has(String(choice.value)) }, choice.label))
+    )
+  );
+}
+function valueInput(field, id, value, index, disabled, many = false) {
+  const type = many ? "text" : ["number", "money"].includes(field.type) ? "number" : field.type === "date" ? "date" : field.type === "datetime" ? "datetime-local" : "text";
+  const listId = field.loadChoices ? `zx-filter-choices-${id}-${index}` : null;
+  const input = (
+    /** @type {HTMLInputElement} */
+    h("input", {
+      type,
+      value: value ?? "",
+      dataset: { filterValue: "", nodeId: id, valueIndex: String(index) },
+      ariaLabel: `${field.label} value${index ? ` ${index + 1}` : ""}`,
+      disabled,
+      placeholder: many ? "Comma-separated values" : "",
+      list: listId
+    })
+  );
+  return h(
+    "span",
+    { class: "zx-filter__value-control" },
+    input,
+    listId ? h("datalist", { id: listId }) : null
+  );
+}
+function parseScalar(value, type) {
+  if (value === "") return null;
+  if (["number", "money"].includes(type)) {
+    const number2 = Number(value);
+    return Number.isFinite(number2) ? number2 : null;
+  }
+  if (type === "boolean") return value === "true";
+  return value;
+}
+function parseValueJson(value) {
+  return cloneFilterValue(value === void 0 ? null : value);
+}
+function findNode2(root, id) {
+  if (!root || root.id === id) return root ?? null;
+  if (root.kind === "group") for (const child of root.children) {
+    const match = findNode2(child, id);
+    if (match) return match;
+  }
+  return null;
+}
+function findGroup(root, id) {
+  const node = findNode2(root, id);
+  return node?.kind === "group" ? node : null;
+}
+function findParent(root, id) {
+  if (root?.kind !== "group") return null;
+  if (root.children.some((child) => child.id === id)) return root;
+  for (const child of root.children) {
+    const parent = findParent(child, id);
+    if (parent) return parent;
+  }
+  return null;
+}
+function removeNode(root, id) {
+  if (root.kind !== "group") return null;
+  const index = root.children.findIndex((child) => child.id === id);
+  if (index >= 0) return root.children.splice(index, 1)[0];
+  for (const child of root.children) {
+    const found = removeNode(child, id);
+    if (found) return found;
+  }
+  return null;
+}
+function containsNode(node, id) {
+  return Boolean(node && findNode2(node, id));
+}
+function conditionCount(node) {
+  return node.kind === "condition" ? 1 : node.children.reduce((sum, child) => sum + conditionCount(child), 0);
+}
+function groupDepth(root, id, depth = 0) {
+  if (root.id === id) return depth;
+  if (root.kind === "group") for (const child of root.children) {
+    if (child.kind === "group") {
+      const found = groupDepth(child, id, depth + 1);
+      if (found >= 0) return found;
+    }
+  }
+  return -1;
+}
+function mergeOperators(base, extra) {
+  const map = new Map(base.map((item) => [item.id, { ...item, types: [...item.types] }]));
+  for (const item of Array.isArray(extra) ? extra : []) if (item?.id) map.set(String(item.id), { ...item, id: String(item.id), types: Array.isArray(item.types) ? [...item.types] : [] });
+  return [...map.values()];
+}
+function cssEscape(value) {
+  return globalThis.CSS?.escape ? CSS.escape(value) : String(value).replaceAll(/[^a-zA-Z0-9_-]/g, "\\$&");
+}
+
 // src/components/fieldset/fieldset.js
 var Fieldset = class extends Component {
   static cssName = "fieldset";
@@ -26166,8 +27607,8 @@ var Questionnaire = class extends Component {
       this._setBusy(true);
       try {
         message = await item.validate(answer, this.getAnswers());
-      } catch (error) {
-        message = error instanceof Error ? error.message : String(error);
+      } catch (error2) {
+        message = error2 instanceof Error ? error2.message : String(error2);
       } finally {
         if (!this._destroyed) this._setBusy(false);
       }
@@ -26305,10 +27746,10 @@ var Questionnaire = class extends Component {
   }
   /** @param {NormalizedItem} item @returns {void} */
   _paintError(item) {
-    const error = this._itemHost.querySelector(".zx-questionnaire__error");
-    if (error instanceof HTMLElement) {
-      error.textContent = this._error;
-      error.hidden = !this._error;
+    const error2 = this._itemHost.querySelector(".zx-questionnaire__error");
+    if (error2 instanceof HTMLElement) {
+      error2.textContent = this._error;
+      error2.hidden = !this._error;
     }
     if (this._error) this._itemHost.setAttribute("aria-invalid", "true");
     else this._itemHost.removeAttribute("aria-invalid");
@@ -26316,7 +27757,7 @@ var Questionnaire = class extends Component {
     if (field) {
       if (this._error) field.setHighlight(this._error, "danger");
       else field.clearHighlight();
-      if (error instanceof HTMLElement) error.hidden = true;
+      if (error2 instanceof HTMLElement) error2.hidden = true;
     }
   }
   /** @returns {void} */
@@ -26539,6 +27980,7 @@ function registerFieldAdapters() {
 registerFieldAdapters();
 export {
   AccountMenu,
+  AppIcon,
   AppSidebar,
   Avatar,
   Breadcrumb,
@@ -26562,6 +28004,7 @@ export {
   Field,
   FieldUpload,
   Fieldset,
+  Filter,
   Finder,
   Form,
   Grid,
@@ -26602,6 +28045,7 @@ export {
   __,
   addDays,
   addMonths,
+  appIcon,
   appendCompact,
   appendCompactChild,
   appendContent,
@@ -26621,6 +28065,7 @@ export {
   clampRange,
   clampSize,
   cloneChartValue,
+  cloneFilterAst,
   compactElement,
   configureIcons,
   copyButton,
@@ -26631,12 +28076,16 @@ export {
   defineElements,
   describe,
   downloadBlob,
+  emptyFilterAst,
   emptyState,
   escapeRegExp,
   faFamilies,
   faIconClasses,
   faNames,
   faStyles,
+  filterCondition,
+  filterGroup,
+  filterOperators,
   fireCompactEvent,
   focusTrap,
   formatCurrency,
@@ -26676,6 +28125,7 @@ export {
   paginationRange,
   parseCompactTag,
   parseDate,
+  parseFilterAst,
   parseIconSpec,
   parseNumber,
   parseRangeText,
@@ -26687,6 +28137,7 @@ export {
   rankLauncherItems,
   registerFieldAdapters,
   registerIcons,
+  reorderTableRows,
   resolveElement,
   resolveSize,
   rovingTabindex,
@@ -26703,6 +28154,7 @@ export {
   stack,
   stepPrecision,
   storage,
+  stringifyFilterAst,
   throttle,
   toArray,
   toCsv,
@@ -26714,5 +28166,6 @@ export {
   uniqueBy,
   useBuiltinIcons,
   useFontAwesome,
+  validateFilterAst,
   zeyosService
 };