@zeyos/zx 2.2.1 → 3.0.0

package/dist/zx-compat.esm.js

@@ -347,7 +347,7 @@ function parse(source) {
 }
 function installGlobals(host = globalThis) {
   installElementStorage(host);
-  host.__ = parse;
+  if (host.__ === void 0) host.__ = parse;
   const stringPrototype = host.String?.prototype;
   if (stringPrototype && typeof stringPrototype.htmlSpecialChars !== "function") {
     Object.defineProperty(stringPrototype, "htmlSpecialChars", {
@@ -2838,6 +2838,14 @@ var MonthPicker = class extends DatePicker {
   static cssName = "month-picker";
   /** @type {MonthPickerOptions} */
   static defaults = { value: null, min: null, max: null };
+  /**
+   * Creates a month picker with its narrower month-based option contract.
+   * @param {Element|string|null} target Existing element, selector, or null.
+   * @param {MonthPickerOptions} [options={}] Month-picker options.
+   */
+  constructor(target, options = {}) {
+    super(target, options);
+  }
   /** @returns {HTMLElement} */
   render() {
     const root = (
@@ -3057,7 +3065,13 @@ var PLACEMENTS = /* @__PURE__ */ new Set([
   "top-start",
   "top-end",
   "bottom",
-  "top"
+  "top",
+  "right-start",
+  "right-end",
+  "left-start",
+  "left-end",
+  "right",
+  "left"
 ]);
 function position(anchor, floating, options = {}) {
   if (!(anchor instanceof Element) || !(floating instanceof HTMLElement)) {
@@ -3085,13 +3099,15 @@ function position(anchor, floating, options = {}) {
     floating.style.inset = "auto";
     floating.style.margin = "0";
     floating.style.setProperty("position-anchor", anchorName);
-    floating.style.setProperty("position-area", positionArea(placement));
-    floating.style.setProperty("inset-area", positionArea(placement));
+    const area = positionArea(placement, getComputedStyle(anchor).direction === "rtl");
+    floating.style.setProperty("position-area", area);
+    floating.style.setProperty("inset-area", area);
     floating.style.setProperty(
       "position-try-fallbacks",
       flip ? "flip-block, flip-inline, flip-block flip-inline" : "none"
     );
-    floating.style.setProperty(placement.startsWith("top") ? "margin-block-end" : "margin-block-start", `${offset}px`);
+    const margin = placement.startsWith("top") ? "margin-bottom" : placement.startsWith("bottom") ? "margin-top" : placement.startsWith("left") ? "margin-right" : "margin-left";
+    floating.style.setProperty(margin, `${offset}px`);
     update = () => {
       if (matchWidth) floating.style.minWidth = `${anchor.getBoundingClientRect().width}px`;
     };
@@ -3135,14 +3151,20 @@ function position(anchor, floating, options = {}) {
     }
   };
 }
-function positionArea(placement) {
+function positionArea(placement, rtl) {
   return {
-    "bottom-start": "block-end span-inline-end",
-    "bottom-end": "block-end span-inline-start",
-    "top-start": "block-start span-inline-end",
-    "top-end": "block-start span-inline-start",
-    bottom: "block-end",
-    top: "block-start"
+    "bottom-start": rtl ? "bottom span-left" : "bottom span-right",
+    "bottom-end": rtl ? "bottom span-right" : "bottom span-left",
+    "top-start": rtl ? "top span-left" : "top span-right",
+    "top-end": rtl ? "top span-right" : "top span-left",
+    "right-start": "right span-bottom",
+    "right-end": "right span-top",
+    "left-start": "left span-bottom",
+    "left-end": "left span-top",
+    bottom: "bottom",
+    top: "top",
+    right: "right",
+    left: "left"
   }[placement];
 }
 function updateFallback(anchor, floating, { placement, offset, flip, matchWidth }) {
@@ -3152,26 +3174,54 @@ function updateFallback(anchor, floating, { placement, offset, flip, matchWidth
   const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
   const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
   let actualPlacement = placement;
-  const prefersBottom = placement.startsWith("bottom");
+  const side = placementSide(placement);
   const bottomY = anchorRect.bottom + offset;
   const topY = anchorRect.top - offset - floatingRect.height;
+  const rightX = anchorRect.right + offset;
+  const leftX = anchorRect.left - offset - floatingRect.width;
   if (flip) {
-    if (prefersBottom && bottomY + floatingRect.height > viewportHeight && topY >= 0) {
-      actualPlacement = /** @type {typeof placement} */
-      placement.replace("bottom", "top");
-    } else if (!prefersBottom && topY < 0 && bottomY + floatingRect.height <= viewportHeight) {
-      actualPlacement = /** @type {typeof placement} */
-      placement.replace("top", "bottom");
+    if (side === "bottom" && bottomY + floatingRect.height > viewportHeight && topY >= 0) {
+      actualPlacement = flipPlacement(placement, "bottom", "top");
+    } else if (side === "top" && topY < 0 && bottomY + floatingRect.height <= viewportHeight) {
+      actualPlacement = flipPlacement(placement, "top", "bottom");
+    } else if (side === "right" && rightX + floatingRect.width > viewportWidth && leftX >= 0) {
+      actualPlacement = flipPlacement(placement, "right", "left");
+    } else if (side === "left" && leftX < 0 && rightX + floatingRect.width <= viewportWidth) {
+      actualPlacement = flipPlacement(placement, "left", "right");
     }
   }
+  const actualSide = placementSide(actualPlacement);
   let left;
-  if (actualPlacement.endsWith("-end")) left = anchorRect.right - floatingRect.width;
-  else if (actualPlacement.endsWith("-start")) left = anchorRect.left;
-  else left = anchorRect.left + (anchorRect.width - floatingRect.width) / 2;
-  const top = actualPlacement.startsWith("bottom") ? bottomY : topY;
+  let top;
+  if (actualSide === "bottom" || actualSide === "top") {
+    const rtl = getComputedStyle(anchor).direction === "rtl";
+    if (actualPlacement.endsWith("-end")) {
+      left = rtl ? anchorRect.left : anchorRect.right - floatingRect.width;
+    } else if (actualPlacement.endsWith("-start")) {
+      left = rtl ? anchorRect.right - floatingRect.width : anchorRect.left;
+    } else left = anchorRect.left + (anchorRect.width - floatingRect.width) / 2;
+    top = actualSide === "bottom" ? bottomY : topY;
+  } else {
+    left = actualSide === "right" ? rightX : leftX;
+    if (actualPlacement.endsWith("-end")) top = anchorRect.bottom - floatingRect.height;
+    else if (actualPlacement.endsWith("-start")) top = anchorRect.top;
+    else top = anchorRect.top + (anchorRect.height - floatingRect.height) / 2;
+  }
   floating.style.left = `${Math.round(clamp(left, 0, Math.max(0, viewportWidth - floatingRect.width)))}px`;
   floating.style.top = `${Math.round(clamp(top, 0, Math.max(0, viewportHeight - floatingRect.height)))}px`;
 }
+function placementSide(placement) {
+  return (
+    /** @type {'top'|'bottom'|'left'|'right'} */
+    placement.split("-")[0]
+  );
+}
+function flipPlacement(placement, from, to) {
+  return (
+    /** @type {Placement} */
+    placement.replace(from, to)
+  );
+}
 function showPopover(element) {
   if (typeof element.showPopover !== "function") return;
   try {
@@ -4004,31 +4054,31 @@ var PLACEHOLDER_TOKENS = {
   "%Y": "YYYY",
   "%y": "YY"
 };
-function parseRangeText(text3, format, separator) {
+function parseRangeText(text3, format2, separator) {
   const source = String(text3 ?? "").trim();
   if (source === "") return { start: null, end: null };
   const raw2 = String(separator ?? " \u2013 ");
   const core = raw2.trim();
-  const strict = core !== "" && String(format).includes(core) && /^\s|\s$/.test(raw2);
+  const strict = core !== "" && String(format2).includes(core) && /^\s|\s$/.test(raw2);
   const lead = strict ? "\\s+" : "\\s*";
   const tail = strict ? "(?:\\s+|$)" : "\\s*";
   const parts = core === "" ? [source] : source.split(new RegExp(`${lead}${escapeRegExp(core)}${tail}`));
   if (parts.length > 2) return null;
-  const first = parseDate(parts[0].trim(), format);
+  const first = parseDate(parts[0].trim(), format2);
   if (!first) return null;
   if (parts.length === 1) return { start: first, end: new Date(first.getTime()) };
   if (parts[1].trim() === "") return { start: first, end: null };
-  const second = parseDate(parts[1].trim(), format);
+  const second = parseDate(parts[1].trim(), format2);
   if (!second) return null;
   return normalizeRange(first, second);
 }
-function formatRangeText(range, format, separator) {
+function formatRangeText(range, format2, separator) {
   const start = range?.start ?? null;
   const end = range?.end ?? null;
   if (!start && !end) return "";
-  if (!end) return formatDate(start, format);
-  if (!start) return formatDate(end, format);
-  return `${formatDate(start, format)}${separator}${formatDate(end, format)}`;
+  if (!end) return formatDate(start, format2);
+  if (!start) return formatDate(end, format2);
+  return `${formatDate(start, format2)}${separator}${formatDate(end, format2)}`;
 }
 var DateRangeBox = class extends Component {
   static cssName = "date-range-box";
@@ -4686,12 +4736,12 @@ var DateTimeBox = function DateTimeBox2(target, options = {}) {
 function validDate4(value) {
   return value instanceof Date && !Number.isNaN(value.getTime()) ? new Date(value.getTime()) : null;
 }
-function effectiveFormat(format, time) {
-  const value = String(format || "%d.%m.%Y");
+function effectiveFormat(format2, time) {
+  const value = String(format2 || "%d.%m.%Y");
   return time && !/%[HM]/.test(value) ? `${value} %H:%M` : value;
 }
-function placeholderFromFormat(format) {
-  return format.replace(/%[demYyHMS]/g, (token) => ({
+function placeholderFromFormat(format2) {
+  return format2.replace(/%[demYyHMS]/g, (token) => ({
     "%d": "DD",
     "%e": "D",
     "%m": "MM",
@@ -5118,18 +5168,34 @@ function registerFieldUploadAdapter() {
 }
 
 // src/components/multi-value-editor/multi-value-editor.js
+var REORDER = Object.freeze({
+  both: { drag: true, buttons: true },
+  buttons: { drag: false, buttons: true },
+  drag: { drag: true, buttons: false },
+  none: { drag: false, buttons: false }
+});
+var PARTS = Object.freeze({
+  value: ".zx-multi-value-editor__value",
+  handle: ".zx-multi-value-editor__handle",
+  up: '[data-action="up"]',
+  down: '[data-action="down"]'
+});
 var MultiValueEditor = class extends Component {
   static cssName = "multi-value-editor";
   /** @type {MultiValueEditorOptions} */
-  static defaults = { values: [], options: null, addLabel: "Add value" };
+  static defaults = { values: [], options: null, addLabel: "Add value", reorder: "both" };
   /** @returns {HTMLElement} */
   render() {
     const root = (
       /** @type {HTMLElement} */
       this.el ?? h("div")
     );
+    this.el = root;
     this._values = Array.isArray(this.options.values) ? this.options.values.map(String) : [];
     this._ownedNodes = [];
+    this._initialState = root.getAttribute("data-state");
+    this._dragIndex = -1;
+    this._armed = null;
     this._rows = h("div", { class: "zx-multi-value-editor__rows" });
     this._add = h("button", {
       class: "zx-btn zx-multi-value-editor__add",
@@ -5140,6 +5206,17 @@ var MultiValueEditor = class extends Component {
     root.append(this._rows, this._add);
     this.listen(root, "click", (event) => this._handleClick(event));
     this.listen(this._rows, "change", (event) => this._handleChange(event));
+    this.listen(this._rows, "keydown", (event) => this._handleKeydown(event));
+    if (this._reorder().drag) {
+      this.listen(this._rows, "pointerdown", (event) => this._handlePointerDown(event));
+      this.listen(this._rows, "dragstart", (event) => this._handleDragStart(event));
+      this.listen(this._rows, "dragover", (event) => this._handleDragOver(event));
+      this.listen(this._rows, "dragleave", (event) => this._handleDragLeave(event));
+      this.listen(this._rows, "drop", (event) => this._handleDrop(event));
+      this.listen(this._rows, "dragend", () => this._finishDrag());
+      this.listen(document, "pointerup", () => this._disarm());
+      this.listen(document, "pointercancel", () => this._disarm());
+    }
     this._renderRows();
     return root;
   }
@@ -5162,16 +5239,27 @@ var MultiValueEditor = class extends Component {
     if (!silent) this.emit("change", { values: this.getValues() });
     return this;
   }
-  /** @param {number} [focusIndex=-1] @returns {void} */
-  _renderRows(focusIndex = -1) {
+  /** @returns {{drag: boolean, buttons: boolean}} */
+  _reorder() {
+    return REORDER[this.options.reorder] ?? REORDER.both;
+  }
+  /**
+   * @param {number} [focusIndex=-1] Row to focus after the render, or -1 for none.
+   * @param {keyof PARTS} [focusPart='value'] Which control of that row takes focus.
+   * @returns {void}
+   */
+  _renderRows(focusIndex = -1, focusPart = "value") {
     const choices = normalizeOptions2(this.options.options);
     const useSelect = this.options.options !== null;
+    const { drag, buttons } = this._reorder();
+    const last = this._values.length - 1;
     const rows = this._values.map((value, index) => {
+      const entries = !useSelect || choices.some(([option]) => option === value) ? choices : [[value, value], ...choices];
       const control = useSelect ? h("select", {
         class: "zx-multi-value-editor__value",
         ariaLabel: `Value ${index + 1}`,
         dataset: { index }
-      }, choices.map(([optionValue, label]) => h("option", {
+      }, entries.map(([optionValue, label]) => h("option", {
         value: optionValue,
         selected: optionValue === value
       }, label))) : h("input", {
@@ -5184,40 +5272,52 @@ var MultiValueEditor = class extends Component {
       return h(
         "div",
         { class: "zx-multi-value-editor__row", dataset: { row: index } },
+        drag ? h("button", {
+          class: "zx-multi-value-editor__handle",
+          type: "button",
+          ariaLabel: `Reorder value ${index + 1}. Use the arrow keys to move it.`,
+          dataset: { action: "grab", index }
+        }, icon("drag", { size: 12 })) : null,
         control,
         h(
           "div",
           { class: "zx-multi-value-editor__controls" },
-          h("button", {
+          buttons ? h("button", {
             class: "zx-btn",
             type: "button",
-            disabled: index === 0,
+            // `aria-disabled` rather than `disabled`: the buttons re-render on every move, and a
+            // control that disables itself under the reader's finger drops focus to the document.
+            ariaDisabled: String(index === 0),
             ariaLabel: `Move value ${index + 1} up`,
             dataset: { action: "up", index }
-          }, "\u2191"),
-          h("button", {
+          }, icon("chevron-up", { size: 12 })) : null,
+          buttons ? h("button", {
             class: "zx-btn",
             type: "button",
-            disabled: index === this._values.length - 1,
+            ariaDisabled: String(index === last),
             ariaLabel: `Move value ${index + 1} down`,
             dataset: { action: "down", index }
-          }, "\u2193"),
+          }, icon("chevron-down", { size: 12 })) : null,
           h("button", {
             class: "zx-btn",
             type: "button",
             ariaLabel: `Remove value ${index + 1}`,
             dataset: { action: "remove", index }
-          }, "\xD7")
+          }, icon("x", { size: 12 }))
         )
       );
     });
     this._rows.replaceChildren(...rows);
-    if (focusIndex >= 0) rows[focusIndex]?.querySelector(".zx-multi-value-editor__value")?.focus();
+    if (focusIndex >= 0) {
+      const row = rows[Math.min(focusIndex, rows.length - 1)];
+      row?.querySelector(PARTS[focusPart] ?? PARTS.value)?.focus();
+    }
   }
   /** @param {MouseEvent} event @returns {void} */
   _handleClick(event) {
     const button2 = event.target instanceof Element ? event.target.closest("[data-action]") : null;
     if (!button2 || !this.el.contains(button2)) return;
+    if (button2.getAttribute("aria-disabled") === "true") return;
     const action = button2.dataset.action;
     const index = Number(button2.dataset.index);
     if (action === "add") {
@@ -5230,28 +5330,156 @@ var MultiValueEditor = class extends Component {
       this._renderRows(Math.min(index, this._values.length - 1));
       this._emitChange();
     } else if ((action === "up" || action === "down") && Number.isInteger(index)) {
-      const target = index + (action === "up" ? -1 : 1);
-      if (target < 0 || target >= this._values.length) return;
-      [this._values[index], this._values[target]] = [this._values[target], this._values[index]];
-      this._renderRows(target);
-      this._emitChange();
+      this._move(index, index + (action === "up" ? -1 : 1), action);
     }
   }
   /** @param {Event} event @returns {void} */
   _handleChange(event) {
     const control = event.target instanceof Element ? event.target.closest("[data-index]") : null;
-    if (!control) return;
+    if (!control || !("value" in control)) return;
     const index = Number(control.dataset.index);
     if (!Number.isInteger(index) || index < 0 || index >= this._values.length) return;
     this._values[index] = control.value;
     this._emitChange();
   }
+  /**
+   * The handle is the keyboard equivalent of dragging it, so `reorder: 'drag'` is still operable
+   * without a pointer.
+   * @param {KeyboardEvent} event
+   * @returns {void}
+   */
+  _handleKeydown(event) {
+    const handle = event.target instanceof Element ? event.target.closest(".zx-multi-value-editor__handle") : null;
+    if (!handle) return;
+    const index = Number(handle.dataset.index);
+    const target = event.key === "ArrowUp" ? index - 1 : event.key === "ArrowDown" ? index + 1 : event.key === "Home" ? 0 : event.key === "End" ? this._values.length - 1 : -1;
+    if (target < 0 || target >= this._values.length) return;
+    event.preventDefault();
+    this._move(index, target, "handle");
+  }
+  /**
+   * Arms the row for dragging. Only the handle does this, so text selection inside a row's input
+   * keeps working and a stray drag cannot reorder anything.
+   * @param {PointerEvent} event
+   * @returns {void}
+   */
+  _handlePointerDown(event) {
+    const handle = event.target instanceof Element ? event.target.closest(".zx-multi-value-editor__handle") : null;
+    this._disarm();
+    if (!handle || handle.disabled) return;
+    const row = (
+      /** @type {HTMLElement|null} */
+      handle.closest(".zx-multi-value-editor__row")
+    );
+    if (!row) return;
+    row.draggable = true;
+    this._armed = row;
+  }
+  /** @returns {void} */
+  _disarm() {
+    if (this._armed) this._armed.draggable = false;
+    this._armed = null;
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleDragStart(event) {
+    const row = event.target instanceof Element ? event.target.closest(".zx-multi-value-editor__row") : null;
+    if (!row || row !== this._armed) {
+      event.preventDefault();
+      return;
+    }
+    this._dragIndex = Number(row.dataset.row);
+    row.dataset.dragging = "true";
+    this.el.setAttribute("data-state", "dragging");
+    event.dataTransfer?.setData("text/plain", String(this._dragIndex));
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleDragOver(event) {
+    if (this._dragIndex < 0) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    this._showDrop(this._dropTarget(event.clientY));
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleDragLeave(event) {
+    const to = event.relatedTarget;
+    if (to instanceof Node && this._rows.contains(to)) return;
+    this._clearDrop();
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleDrop(event) {
+    if (this._dragIndex < 0) return;
+    event.preventDefault();
+    const from = this._dragIndex;
+    const slot = this._dropTarget(event.clientY);
+    this._finishDrag();
+    this._move(from, slot > from ? slot - 1 : slot, "handle");
+  }
+  /** @returns {void} */
+  _finishDrag() {
+    this._dragIndex = -1;
+    this._disarm();
+    this._clearDrop();
+    for (const row of this._rows.children) delete /** @type {HTMLElement} */
+    row.dataset.dragging;
+    if (this._initialState === null) this.el.removeAttribute("data-state");
+    else this.el.setAttribute("data-state", this._initialState);
+  }
+  /**
+   * Insertion slot (0…length) for a pointer at `clientY`.
+   * @param {number} clientY Pointer position.
+   * @returns {number}
+   */
+  _dropTarget(clientY) {
+    const rows = [...this._rows.children];
+    for (const [index, row] of rows.entries()) {
+      const box = row.getBoundingClientRect();
+      if (clientY < box.top + box.height / 2) return index;
+    }
+    return rows.length;
+  }
+  /** @param {number} slot Insertion slot to mark. @returns {void} */
+  _showDrop(slot) {
+    const rows = [...this._rows.children];
+    const inert = slot === this._dragIndex || slot === this._dragIndex + 1;
+    for (const [index, row] of rows.entries()) {
+      const cell = (
+        /** @type {HTMLElement} */
+        row
+      );
+      if (!inert && index === slot) cell.dataset.drop = "before";
+      else if (!inert && slot === rows.length && index === rows.length - 1) cell.dataset.drop = "after";
+      else delete cell.dataset.drop;
+    }
+  }
+  /** @returns {void} */
+  _clearDrop() {
+    for (const row of this._rows.children) delete /** @type {HTMLElement} */
+    row.dataset.drop;
+  }
+  /**
+   * @param {number} from Index to move.
+   * @param {number} to Destination index.
+   * @param {keyof PARTS} part Control of the moved row that takes focus.
+   * @returns {boolean} Whether anything moved.
+   */
+  _move(from, to, part) {
+    const size = this._values.length;
+    if (from === to || from < 0 || to < 0 || from >= size || to >= size) return false;
+    const [value] = this._values.splice(from, 1);
+    this._values.splice(to, 0, value);
+    this._renderRows(to, part);
+    this._emitChange();
+    return true;
+  }
   /** @returns {void} */
   _emitChange() {
     this.emit("change", { values: this.getValues() });
   }
   /** @returns {void} */
   destroy() {
+    if (this._initialState === null) this.el?.removeAttribute("data-state");
+    else this.el?.setAttribute("data-state", this._initialState);
     for (const node of this._ownedNodes ?? []) node.remove();
     super.destroy();
   }
@@ -6276,6 +6504,7 @@ var Select = class _Select extends Component {
   /** @type {SelectOptions} */
   static defaults = {
     items: [],
+    fixedItems: [],
     valueKey: "ID",
     labelKey: "name",
     renderItem: null,
@@ -6295,6 +6524,8 @@ var Select = class _Select extends Component {
   render() {
     this._items = [];
     this._visibleItems = [];
+    this._fixedItems = [];
+    this._visibleFixed = [];
     this._selected = null;
     this._optionEntries = [];
     this._activeIndex = -1;
@@ -6378,6 +6609,8 @@ var Select = class _Select extends Component {
     root.replaceChildren(control, panel);
     this._items = Array.isArray(this.options.items) ? this.options.items.slice() : [];
     this._visibleItems = this._items.slice();
+    this._fixedItems = Array.isArray(this.options.fixedItems) ? this.options.fixedItems.slice() : [];
+    this._visibleFixed = this._fixedItems.slice();
     this._disabled = Boolean(this.options.disabled);
     this._handleTypeahead = typeahead(
       () => this._optionEntries.filter((entry) => !entry.clear).map((entry) => entry.element),
@@ -6454,7 +6687,22 @@ var Select = class _Select extends Component {
     const selectedValue = this.value;
     this._items = Array.isArray(items) ? items.slice() : [];
     this._visibleItems = this._items.slice();
-    this._selected = selectedValue == null ? null : this._items.find((item) => Object.is(this._itemValue(item), selectedValue)) ?? null;
+    this._selected = selectedValue == null ? null : this._findItem(selectedValue);
+    this._syncInputValue();
+    this._renderOptions();
+    this._position?.update();
+    return this;
+  }
+  /**
+   * Replaces the pinned choices and preserves selection by ID when possible.
+   * @param {SelectItem[]} items New fixed items.
+   * @returns {this}
+   */
+  setFixedItems(items) {
+    const selectedValue = this.value;
+    this._fixedItems = Array.isArray(items) ? items.slice() : [];
+    this._visibleFixed = this._fixedItems.slice();
+    this._selected = selectedValue == null ? null : this._findItem(selectedValue);
     this._syncInputValue();
     this._renderOptions();
     this._position?.update();
@@ -6508,6 +6756,7 @@ var Select = class _Select extends Component {
     this.refs.input.removeAttribute("aria-activedescendant");
     this._activeIndex = -1;
     this._visibleItems = this._items.slice();
+    this._visibleFixed = this._fixedItems.slice();
     this._syncInputValue();
     this.emit("close", {});
     return this;
@@ -6563,6 +6812,38 @@ var Select = class _Select extends Component {
     select.set(requestedValue, { silent: true });
     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,
+   * `true` for public, or a group ID — so the control binds straight to the record field.
+   *
+   * @param {Element|string|null} target Component target.
+   * @param {SelectOptions & {groups?: SelectItem[]|((query: string) => Promise<SelectItem[]>|SelectItem[])}} [options={}]
+   *   Select overrides other than the fixed choices; `groups` holds the shareable groups, either as
+   *   an array (filtered locally) or as a loader function (queried remotely).
+   * @returns {Select}
+   */
+  static permission(target, options = {}) {
+    const { groups = [], value = true, valueKey = "ID", labelKey = "name", ...rest } = options;
+    const loader = typeof groups === "function" ? groups : null;
+    const shareable = loader ? [] : groups;
+    const choices = [{ ID: false, name: "Private" }, { ID: true, name: "Public" }];
+    const select = new _Select(target, {
+      filter: loader ?? "local",
+      ...rest,
+      value: null,
+      items: shareable,
+      fixedItems: [],
+      // The two choices carry their own ID and label, so a caller's group readers stay untouched.
+      valueKey: (item) => choices.includes(item) ? item.ID : readItem(item, valueKey),
+      labelKey: (item) => choices.includes(item) ? item.name : String(readItem(item, labelKey) ?? "")
+    });
+    choices[0].name = select._message("permission.private", "Private");
+    choices[1].name = select._message("permission.public", "Public");
+    select.setFixedItems(choices);
+    select.set(value, { silent: true });
+    return select;
+  }
   /** Cleans up the panel, pending async work, and enhanced target contents. @returns {void} */
   destroy() {
     this._cancelQuery();
@@ -6633,8 +6914,8 @@ var Select = class _Select extends Component {
     );
     if (!this._open) this.open();
     if (this.options.filter === "local") {
-      const keys = this.options.searchKeys ?? [this.options.labelKey];
-      this._visibleItems = matchItems(this._items, query, keys);
+      this._visibleFixed = this._matchFixed(query);
+      this._visibleItems = matchItems(this._items, query, this._searchKeys());
       this._renderOptions();
       this._setActive(this._optionEntries.length > 0 ? 0 : -1);
       this._position?.update();
@@ -6689,6 +6970,10 @@ var Select = class _Select extends Component {
     if (this.options.clearable) {
       this._appendOption(null, true, this.options.placeholder || 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) {
+      list.append(h("div", { class: "zx-select__separator", role: "presentation" }));
+    }
     for (const item of this._visibleItems) {
       if (this.options.groupKey) {
         const group = this._read(item, this.options.groupKey);
@@ -6702,7 +6987,7 @@ var Select = class _Select extends Component {
       }
       this._appendOption(item, false);
     }
-    if (this._visibleItems.length === 0 && !this._loading) {
+    if (this._visibleItems.length === 0 && this._visibleFixed.length === 0 && !this._loading) {
       list.append(h("div", {
         class: "zx-select__empty",
         role: "status"
@@ -6742,6 +7027,7 @@ var Select = class _Select extends Component {
     if (this._queryTimer !== null) clearTimeout(this._queryTimer);
     this._requestSequence += 1;
     const sequence = this._requestSequence;
+    this._visibleFixed = this._matchFixed(query);
     if (query.length < Math.max(0, Number(this.options.minQuery) || 0)) {
       this._setLoading(false);
       this._visibleItems = [];
@@ -6826,13 +7112,14 @@ var Select = class _Select extends Component {
   }
   /** @param {unknown} candidate @returns {SelectItem|null} */
   _findItem(candidate) {
-    const direct = this._items.find((item) => item === candidate);
+    const pool = this._fixedItems.length === 0 ? this._items : [...this._fixedItems, ...this._items];
+    const direct = pool.find((item) => item === candidate);
     if (direct !== void 0) return direct;
     const value = candidate !== null && typeof candidate === "object" ? this._itemValue(
       /** @type {SelectItem} */
       candidate
     ) : candidate;
-    return this._items.find((item) => Object.is(this._itemValue(item), value)) ?? null;
+    return pool.find((item) => Object.is(this._itemValue(item), value)) ?? null;
   }
   /** @param {SelectItem|null} item @returns {unknown} */
   _itemValue(item) {
@@ -6845,9 +7132,20 @@ var Select = class _Select extends Component {
   }
   /** @param {SelectItem|null} item @param {SelectValueReader|SelectLabelReader} reader @returns {unknown} */
   _read(item, reader) {
-    if (typeof reader === "function") return reader(item);
-    if (item === null || typeof item !== "object") return item;
-    return item[reader];
+    return readItem(item, reader);
+  }
+  /** @returns {Array<SelectValueReader|SelectLabelReader>} */
+  _searchKeys() {
+    return this.options.searchKeys ?? [this.options.labelKey];
+  }
+  /**
+   * Narrows the pinned choices. They are always matched here and never handed to a filter
+   * function: a fixed choice belongs to the control, not to whatever the remote source returns.
+   * @param {string} query Search text.
+   * @returns {SelectItem[]}
+   */
+  _matchFixed(query) {
+    return matchItems(this._fixedItems, query, this._searchKeys());
   }
   /** @returns {number} */
   _selectedEntryIndex() {
@@ -6870,6 +7168,11 @@ var Select = class _Select extends Component {
     return message === key ? fallback : message;
   }
 };
+function readItem(item, reader) {
+  if (typeof reader === "function") return reader(item);
+  if (item === null || typeof item !== "object") return item;
+  return item[reader];
+}
 function isPrintable(event) {
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
 }
@@ -8010,9 +8313,9 @@ var TagPicker = class extends Component {
 function normalizeLabel(value) {
   return String(value ?? "").trim().toLocaleLowerCase();
 }
-function sameSelection(a, b, read2) {
+function sameSelection(a, b, read) {
   if (a.length !== b.length) return false;
-  return a.every((item, index) => Object.is(read2(item), read2(b[index])));
+  return a.every((item, index) => Object.is(read(item), read(b[index])));
 }
 
 // src/components/tag-picker/field-adapter.js
@@ -8982,6 +9285,82 @@ function isFileList(value) {
   return typeof FileList === "function" && value instanceof FileList;
 }
 
+// src/core/format.js
+var MIN_DIGITS = 0;
+var MAX_DIGITS = 20;
+var DEFAULT_MAX_DIGITS = 3;
+var numberFormatters = /* @__PURE__ */ new Map();
+function formatNumber(value, options = {}) {
+  const number = toFiniteNumber(value);
+  if (number === null) return "";
+  const { locale = getLanguage(), decimals, minDecimals, maxDecimals, group = true } = options;
+  return format(locale, digitOptions({ decimals, minDecimals, maxDecimals, group }), number);
+}
+function formatCurrency(value, currency, options = {}) {
+  const number = toFiniteNumber(value);
+  if (number === null) return "";
+  const { locale = getLanguage(), decimals } = options;
+  const code = currencyCode(currency);
+  if (code === null) return formatNumber(number, { locale, decimals });
+  const digits = digitOptions({ decimals, group: true });
+  return format(locale, { ...digits, style: "currency", currency: code }, number);
+}
+function formatPercent(value, options = {}) {
+  const number = toFiniteNumber(value);
+  if (number === null) return "";
+  const { locale = getLanguage(), decimals = 0 } = options;
+  return format(locale, { ...digitOptions({ decimals, group: true }), style: "percent" }, number);
+}
+function format(locale, options, value) {
+  const key = `${locale}\0${JSON.stringify(options)}`;
+  let formatter = numberFormatters.get(key);
+  if (formatter === void 0) {
+    formatter = createNumberFormat(locale, options);
+    numberFormatters.set(key, formatter);
+  }
+  return formatter.format(value);
+}
+function createNumberFormat(locale, options) {
+  try {
+    return new Intl.NumberFormat(locale, options);
+  } catch {
+    try {
+      return new Intl.NumberFormat(void 0, options);
+    } catch {
+      return new Intl.NumberFormat();
+    }
+  }
+}
+function digitOptions({ decimals, minDecimals, maxDecimals, group = true }) {
+  const result = { useGrouping: group !== false };
+  const min = digitCount(minDecimals ?? decimals);
+  const max = digitCount(maxDecimals ?? decimals);
+  if (min !== null) result.minimumFractionDigits = min;
+  if (max !== null) {
+    result.maximumFractionDigits = max;
+    if (min !== null && min > max) result.minimumFractionDigits = max;
+  } else if (min !== null) {
+    result.maximumFractionDigits = Math.max(min, DEFAULT_MAX_DIGITS);
+  }
+  return result;
+}
+function digitCount(value) {
+  if (value == null) return null;
+  const number = Number(value);
+  if (!Number.isFinite(number)) return null;
+  return Math.min(MAX_DIGITS, Math.max(MIN_DIGITS, Math.round(number)));
+}
+function toFiniteNumber(value) {
+  if (value === null || value === void 0 || value === "") return null;
+  const number = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+function currencyCode(value) {
+  if (typeof value !== "string") return null;
+  const code = value.trim().toUpperCase();
+  return /^[A-Z]{3}$/.test(code) ? code : null;
+}
+
 // src/components/check-button/check-button.js
 var CheckButton = class extends Component {
   static cssName = "check-button";
@@ -9142,6 +9521,7 @@ var Modal = class extends Component {
       if (!this.options.closable || cancelEvent.defaultPrevented) event.preventDefault();
     });
     this.listen(this.el, "close", () => {
+      if (!this._isRealClose()) return;
       this.el.dataset.state = "closed";
       delete this.el.dataset.zxOverlayOrder;
       const result = this.#hasPendingResult ? this.#pendingResult : this.el.returnValue || void 0;
@@ -9155,6 +9535,37 @@ var Modal = class extends Component {
       this.close();
     });
   }
+  /**
+   * Element the owned dialog is appended to. Overridden by subclasses that live inside a host
+   * rather than at the document level.
+   *
+   * Called from `render()`, which the base constructor runs before any subclass field
+   * initializers, so an override may read `this.options` but must not touch instance state.
+   * @returns {Element}
+   */
+  mountTarget() {
+    return document.body;
+  }
+  /**
+   * Puts the dialog on screen. Overridden by subclasses that open non-modally.
+   * @returns {void}
+   */
+  _show() {
+    this.el.showModal();
+  }
+  /**
+   * Whether an incoming `close` event is a real dismissal.
+   *
+   * A dialog cannot move between the top layer and the page flow while it is open, so a subclass
+   * that re-hosts itself has to close and immediately reopen. `close` is dispatched in a queued
+   * task, not synchronously, so that stale event arrives once the dialog is already open again —
+   * late enough to clobber `data-state`, fire a `close` nobody asked for, and trip
+   * `destroyOnClose`. Returning false from an override drops it at the source instead.
+   * @returns {boolean}
+   */
+  _isRealClose() {
+    return true;
+  }
   /**
    * Creates the owned native dialog.
    * @returns {HTMLDialogElement}
@@ -9167,7 +9578,7 @@ var Modal = class extends Component {
       }, h("div", { class: "zx-modal__content", ref: "content" }))
     );
     dialog.dataset.state = "closed";
-    document.body.append(dialog);
+    this.mountTarget().append(dialog);
     return dialog;
   }
   /**
@@ -9180,7 +9591,7 @@ var Modal = class extends Component {
     this.el.dataset.zxOverlayOrder = String(nextOverlayOrder());
     this.el.returnValue = "";
     try {
-      this.el.showModal();
+      this._show();
     } catch (error) {
       delete this.el.dataset.zxOverlayOrder;
       throw error;
@@ -9295,7 +9706,7 @@ var Dialog = class _Dialog extends Modal {
    */
   constructor(_target = null, options = {}) {
     super(null, options);
-    this.#setSize(this.options.size);
+    this._applySize(this.options.size);
     this.#baseTitle = String(this.options.title ?? "");
     this.#applyTitle(this.#baseTitle);
     this.#baseButtons = copyButtons(this.options.buttons);
@@ -9345,7 +9756,7 @@ var Dialog = class _Dialog extends Modal {
       )
     );
     dialog.dataset.state = "closed";
-    document.body.append(dialog);
+    this.mountTarget().append(dialog);
     return dialog;
   }
   /**
@@ -9567,8 +9978,15 @@ var Dialog = class _Dialog extends Modal {
       dialog.open();
     });
   }
-  /** @param {'sm'|'md'|'lg'|number} size @returns {void} */
-  #setSize(size) {
+  /**
+   * Applies the dialog width. Subclasses that size themselves on a different axis override this.
+   *
+   * Called from the constructor before any subclass field initializers have run, so an override
+   * may only touch the DOM — reading an uninitialized private field here throws.
+   * @param {'sm'|'md'|'lg'|number} size Preset or pixel width.
+   * @returns {void}
+   */
+  _applySize(size) {
     const presets = { sm: 400, md: 600, lg: 840 };
     const width = typeof size === "number" && Number.isFinite(size) ? size : presets[size] ?? presets.md;
     this.el.style.inlineSize = `${Math.max(0, width)}px`;
@@ -9996,6 +10414,10 @@ var Tabbox = class extends Component {
       if (!tab || !tablist.contains(tab)) return;
       const record = this._recordForTab(tab);
       if (!record || record.definition.disabled) return;
+      if (event.target.closest?.(".zx-tabbox__close")) {
+        this._closeTab(record);
+        return;
+      }
       this._setFocused(record);
       this.openTab(record.definition.name);
     });
@@ -10045,8 +10467,9 @@ var Tabbox = class extends Component {
     children.push(title, badge);
     if (normalized.closable) {
       children.push(h("span", {
-        class: "zx-tabbox__close",
-        ariaHidden: "true"
+        class: "zx-tabbox__close zx-icon-btn",
+        ariaHidden: "true",
+        title: "Close"
       }, icon("x", { size: 14 })));
     }
     const tab = (
@@ -10220,13 +10643,23 @@ var Tabbox = class extends Component {
     }
     if (event.key === "Delete" && current.definition.closable) {
       event.preventDefault();
-      const index = this._tabs.indexOf(current);
-      if (!this._removeTab(current.definition.name, true)) return;
-      const remaining = this._tabs[Math.min(index, this._tabs.length - 1)] ?? this._tabs[index - 1];
-      const focusTarget = remaining && !remaining.definition.disabled ? remaining : this._active;
-      if (focusTarget) this._setFocused(focusTarget);
+      this._closeTab(current);
     }
   }
+  /**
+   * Closes a tab on a user gesture, keeping roving focus inside the tablist.
+   * @param {TabRecord} record Tab to close.
+   * @returns {void}
+   * @fires Tabbox#close
+   */
+  _closeTab(record) {
+    const index = this._tabs.indexOf(record);
+    const held = record.tab.contains(document.activeElement);
+    if (!this._removeTab(record.definition.name, true)) return;
+    const remaining = this._tabs[Math.min(index, this._tabs.length - 1)] ?? this._tabs[index - 1];
+    const focusTarget = remaining && !remaining.definition.disabled ? remaining : this._active;
+    if (focusTarget) this._setFocused(focusTarget, held);
+  }
   /** @param {string} name @param {boolean} emitClose @returns {boolean} */
   _removeTab(name, emitClose) {
     const record = this._find(name);
@@ -10373,7 +10806,8 @@ var Table = class extends Component {
     emptyText: null,
     rowClass: null,
     zebra: true,
-    editMode: false
+    editMode: false,
+    hierarchy: false
   };
   /**
    * Creates a table around a target or creates a new root when target is null.
@@ -10410,8 +10844,17 @@ var Table = class extends Component {
     this._rovingKey = null;
     this._rovingCell = null;
     this._rovingMatched = false;
+    this._hierarchy = normalizeHierarchy(this.options.hierarchy, this._columns);
+    this._expanded = initialExpanded(this._hierarchy?.expanded);
     if (this._sort && this.options.sortMode === "local") this._sortData();
+    if (this._hierarchy?.expanded === true) {
+      for (const id of hierarchyBranchIds(this._data, this.options.rowId, this._hierarchy.parentId)) {
+        this._expanded.add(id);
+      }
+    }
+    this._reconcileExpanded();
     this._table = h("table", { class: "zx-table__table" });
+    if (this._hierarchy) this._table.setAttribute("role", "treegrid");
     this._colgroup = h("colgroup", { class: "zx-table__columns" });
     this._thead = h("thead", { class: "zx-table__head" });
     this._tbody = h("tbody", { class: "zx-table__body" });
@@ -10480,6 +10923,7 @@ var Table = class extends Component {
     assertRows(rows);
     this._data = [...rows];
     if (this._sort && this.options.sortMode === "local") this._sortData();
+    this._reconcileExpanded();
     const selectionChanged = this._pruneSelection();
     this._renderBody();
     if (selectionChanged) this._emitSelectionChange();
@@ -10497,6 +10941,7 @@ var Table = class extends Component {
     assertRows(rows);
     this._data.push(...rows);
     if (this._sort && this.options.sortMode === "local") this._sortData();
+    this._reconcileExpanded();
     this._renderBody();
     this._emitDataChange();
     return this;
@@ -10516,6 +10961,7 @@ var Table = class extends Component {
     this._data[index] = row;
     if (wasSelected) this._selected.add(this._idFor(row));
     if (this._sort && this.options.sortMode === "local") this._sortData();
+    this._reconcileExpanded();
     this._renderBody();
     if (wasSelected && !Object.is(id, this._idFor(row))) this._emitSelectionChange();
     this._emitDataChange();
@@ -10533,6 +10979,7 @@ var Table = class extends Component {
     const index = this._data.findIndex((candidate) => Object.is(this._idFor(candidate), id));
     if (index < 0) return this;
     this._data.splice(index, 1);
+    this._reconcileExpanded();
     const selectionChanged = this._selected.delete(id);
     if (Object.is(this._selectionAnchorId, id)) this._selectionAnchorId = null;
     this._renderBody();
@@ -10548,7 +10995,10 @@ var Table = class extends Component {
   getRow(id) {
     return this._data.find((row) => Object.is(this._idFor(row), id)) ?? null;
   }
-  /** @returns {TableRow[]} Shallow copy of current rows in display order. */
+  /**
+   * Returns a shallow copy of the current rows in display order.
+   * @returns {TableRow[]} Current table rows.
+   */
   getData() {
     return [...this._data];
   }
@@ -10562,6 +11012,7 @@ var Table = class extends Component {
   empty() {
     const selectionChanged = this._selected.size > 0;
     this._data = [];
+    this._expanded.clear();
     this._selected.clear();
     this._selectionAnchorId = null;
     this._renderBody();
@@ -10596,7 +11047,10 @@ var Table = class extends Component {
     if (!options.silent) this.emit("sort", { id, dir: direction });
     return this;
   }
-  /** @returns {TableRow[]} Selected rows in current display order. */
+  /**
+   * Returns selected rows in current display order.
+   * @returns {TableRow[]} Selected rows.
+   */
   getSelection() {
     return this._data.filter((row) => this._selected.has(this._idFor(row)));
   }
@@ -10635,6 +11089,75 @@ var Table = class extends Component {
     this._emitSelectionChange();
     return this;
   }
+  /**
+   * Toggles one hierarchy branch. A leaf or an id absent from the table is a no-op.
+   * @param {unknown} id Row id.
+   * @param {{silent?: boolean}} [options={}] Event behavior.
+   * @returns {this}
+   * @fires Table#rowtoggle
+   */
+  toggleRow(id, options = {}) {
+    return this._expanded.has(id) ? this.collapseRow(id, options) : this.expandRow(id, options);
+  }
+  /**
+   * Expands one hierarchy branch.
+   * @param {unknown} id Row id.
+   * @param {{silent?: boolean}} [options={}] Event behavior.
+   * @returns {this}
+   * @fires Table#rowtoggle
+   */
+  expandRow(id, options = {}) {
+    return this._setRowExpanded(id, true, options);
+  }
+  /**
+   * Collapses one hierarchy branch without discarding its descendants or their expansion state.
+   * @param {unknown} id Row id.
+   * @param {{silent?: boolean}} [options={}] Event behavior.
+   * @returns {this}
+   * @fires Table#rowtoggle
+   */
+  collapseRow(id, options = {}) {
+    return this._setRowExpanded(id, false, options);
+  }
+  /**
+   * Expands every row that currently has children.
+   * @param {{silent?: boolean}} [options={}] Event behavior. When not silent, one `rowtoggle`
+   * event is emitted per branch whose state changed.
+   * @returns {this}
+   */
+  expandAll(options = {}) {
+    if (!this._hierarchy) return this;
+    const branchIds = hierarchyBranchIds(this._data, this.options.rowId, this._hierarchy.parentId);
+    const changed = branchIds.filter((id) => !this._expanded.has(id));
+    for (const id of changed) this._expanded.add(id);
+    if (changed.length) this._renderBody();
+    if (!options.silent) {
+      for (const id of changed) this._emitRowToggle(id, true);
+    }
+    return this;
+  }
+  /**
+   * Collapses every hierarchy branch.
+   * @param {{silent?: boolean}} [options={}] Event behavior.
+   * @returns {this}
+   */
+  collapseAll(options = {}) {
+    if (!this._hierarchy || this._expanded.size === 0) return this;
+    const changed = [...this._expanded];
+    this._expanded.clear();
+    this._renderBody();
+    if (!options.silent) {
+      for (const id of changed) this._emitRowToggle(id, false);
+    }
+    return this;
+  }
+  /**
+   * Returns expanded branch ids in current flat-data order.
+   * @returns {unknown[]} Expanded branch ids.
+   */
+  getExpanded() {
+    return this._data.map((row) => this._idFor(row)).filter((id) => this._expanded.has(id));
+  }
   /**
    * Opens the editor for a cell. No-op unless the table runs with `editMode` and the column
    * resolves to an editable type for that row. In `'row'` mode every editable cell of the row is
@@ -10742,11 +11265,17 @@ var Table = class extends Component {
     this._abortEdit({ focus: true });
     return this;
   }
-  /** @returns {boolean} Whether a cell or row is currently open for editing. */
+  /**
+   * Reports whether a cell or row is currently open for editing.
+   * @returns {boolean} Whether an edit is open.
+   */
   isEditing() {
     return this._edit !== null;
   }
-  /** @returns {{id: unknown, columnId: string}|null} Row id and focused column id, or null. */
+  /**
+   * Returns the row id and focused column id for the open edit.
+   * @returns {{id: unknown, columnId: string}|null} Editing location, or null.
+   */
   getEditing() {
     return this._edit ? { id: this._edit.id, columnId: this._edit.columnId } : null;
   }
@@ -10755,7 +11284,31 @@ var Table = class extends Component {
    * @returns {TableRow[]}
    */
   _visibleData() {
-    return this._rendered === Infinity ? this._data : this._data.slice(0, this._rendered);
+    return this._visibleEntries().map((entry) => entry.row);
+  }
+  /** @returns {TableHierarchyEntry[]} Rows visible after hierarchy expansion, before growing. */
+  _projectedData() {
+    if (!this._hierarchy) {
+      return this._data.map((row, index) => ({
+        row,
+        id: this._idFor(row),
+        index,
+        depth: 0,
+        hasChildren: false,
+        parentId: null
+      }));
+    }
+    return projectHierarchyRows(
+      this._data,
+      this.options.rowId,
+      this._hierarchy.parentId,
+      this._expanded
+    );
+  }
+  /** @returns {TableHierarchyEntry[]} Rows that currently have DOM entries. */
+  _visibleEntries() {
+    const projected = this._projectedData();
+    return this._rendered === Infinity ? projected : projected.slice(0, this._rendered);
   }
   /**
    * Renders the next batch of rows.
@@ -10767,10 +11320,11 @@ var Table = class extends Component {
     if (!this._growStep) return this;
     const step = Number(count) > 0 ? Math.trunc(Number(count)) : this._growStep;
     const before = this._rendered;
-    this._rendered = Math.min(this._data.length, this._rendered + step);
+    const total = this._projectedData().length;
+    this._rendered = Math.min(total, this._rendered + step);
     if (this._rendered === before) return this;
     this._renderBody();
-    this.emit("grow", { rendered: this._rendered, total: this._data.length });
+    this.emit("grow", { rendered: this._rendered, total });
     return this;
   }
   /**
@@ -10779,14 +11333,14 @@ var Table = class extends Component {
    * @fires Table#grow
    */
   showAll() {
-    return this.growBy(this._data.length);
+    return this.growBy(this._projectedData().length);
   }
   /**
    * How many rows are currently rendered.
    * @returns {number}
    */
   getRenderedCount() {
-    return Math.min(this._rendered, this._data.length);
+    return Math.min(this._rendered, this._projectedData().length);
   }
   /**
    * Keeps the "show more" control in step with what is rendered.
@@ -10798,7 +11352,7 @@ var Table = class extends Component {
    */
   _syncGrowing() {
     if (!this._growStep) return;
-    const remaining = this._data.length - this.getRenderedCount();
+    const remaining = this._projectedData().length - this.getRenderedCount();
     if (remaining <= 0) {
       this._more?.remove();
       this._more = null;
@@ -10869,10 +11423,11 @@ var Table = class extends Component {
    * @returns {void}
    */
   _applyStackedRoles(stacked) {
-    const parts = [[this._table, "table"], [this._thead, "rowgroup"], [this._tbody, "rowgroup"]];
+    const parts = [[this._table, this._hierarchy ? "treegrid" : "table"], [this._thead, "rowgroup"], [this._tbody, "rowgroup"]];
     for (const [element, role] of parts) {
       if (!element) continue;
       if (stacked) element.setAttribute("role", role);
+      else if (element === this._table && this._hierarchy) element.setAttribute("role", "treegrid");
       else element.removeAttribute("role");
     }
     for (const [selector, role] of [["tr", "row"], ["td", "cell"], ["th", "columnheader"]]) {
@@ -10949,7 +11504,8 @@ var Table = class extends Component {
     this._headers = /* @__PURE__ */ new Map();
     for (const column of this._columns) {
       const th = h("th", { scope: "col" });
-      if (column.align) th.dataset.align = column.align;
+      const align = column.align ?? (isNumericColumn(column) ? "end" : null);
+      if (align) th.dataset.align = align;
       if (column.headerTitle) th.title = column.headerTitle;
       if (column.sortable) {
         const button2 = h("button", {
@@ -10978,6 +11534,8 @@ var Table = class extends Component {
     this._rowElements = /* @__PURE__ */ new Map();
     this._rovingCell = null;
     this._rovingMatched = false;
+    const projected = this._projectedData();
+    this._hierarchyMeta = new Map(projected.map((entry) => [entry.id, entry]));
     if (this._data.length === 0) {
       fragment.append(h(
         "tr",
@@ -10988,10 +11546,12 @@ var Table = class extends Component {
         }, this._emptyContent())
       ));
     } else {
-      this._visibleData().forEach((row, index) => fragment.append(this._createRow(row, index)));
+      this._visibleEntries().forEach((entry, visibleIndex) => {
+        fragment.append(this._createRow(entry.row, entry.index, { ...entry, visibleIndex }));
+      });
     }
     this._tbody.replaceChildren(fragment);
-    if (this._growStep) this._table.setAttribute("aria-rowcount", String(this._data.length + 1));
+    if (this._growStep) this._table.setAttribute("aria-rowcount", String(projected.length + 1));
     this._syncSelectAll();
     this._syncGrowing();
     if (this._stacked) this._applyStackedRoles(true);
@@ -11010,18 +11570,27 @@ var Table = class extends Component {
     if (empty == null) return this.msg("table.empty");
     return typeof empty === "function" ? empty() : empty;
   }
-  /** @param {TableRow} row @param {number} index @returns {HTMLTableRowElement} */
-  _createRow(row, index) {
+  /**
+   * @param {TableRow} row
+   * @param {number} index
+   * @param {TableHierarchyEntry & {visibleIndex: number}} tree
+   * @returns {HTMLTableRowElement}
+   */
+  _createRow(row, index, tree) {
     const id = this._idFor(row);
     const tr = (
       /** @type {HTMLTableRowElement} */
       h("tr", { dataset: { row: "" } })
     );
-    if (this._growStep) tr.setAttribute("aria-rowindex", String(index + 2));
+    if (this._growStep) tr.setAttribute("aria-rowindex", String(tree.visibleIndex + 2));
     const rowClass = typeof this.options.rowClass === "function" ? this.options.rowClass(row) : "";
     if (rowClass) tr.classList.add(...String(rowClass).split(/\s+/).filter(Boolean));
     if (this.options.selectable !== false) tr.setAttribute("aria-selected", String(this._selected.has(id)));
-    this._rowMeta.set(tr, { row, id, index });
+    if (this._hierarchy) {
+      tr.setAttribute("aria-level", String(tree.depth + 1));
+      if (tree.hasChildren) tr.setAttribute("aria-expanded", String(this._expanded.has(id)));
+    }
+    this._rowMeta.set(tr, { row, id, index, visibleIndex: tree.visibleIndex });
     const elements = this._rowElements.get(id) ?? [];
     elements.push(tr);
     this._rowElements.set(id, elements);
@@ -11039,7 +11608,8 @@ var Table = class extends Component {
         /** @type {HTMLTableCellElement} */
         h("td")
       );
-      if (column.align) cell.dataset.align = column.align;
+      const align = column.align ?? (isNumericColumn(column) ? "end" : null);
+      if (align) cell.dataset.align = align;
       cell.dataset.label = column.label;
       if (column.popin === false) cell.dataset.popin = "false";
       if (this._editMode !== false) {
@@ -11050,7 +11620,7 @@ var Table = class extends Component {
           this._offerRovingCell(cell, id, column.id);
         }
       }
-      this._renderCellContent(cell, column, row, index);
+      this._renderCellContent(cell, column, row, index, tree);
       tr.append(cell);
     });
     return tr;
@@ -11061,13 +11631,33 @@ var Table = class extends Component {
    * @param {TableColumn} column Column definition.
    * @param {TableRow} row Row data.
    * @param {number} index Row index.
+   * @param {TableHierarchyEntry} [tree] Hierarchy metadata for the row.
    * @returns {void}
    */
-  _renderCellContent(cell, column, row, index) {
-    const value = typeof column.render === "function" ? column.render(row, index) : row?.[column.id];
-    if (value && typeof value === "object" && typeof value.nodeType === "number") cell.replaceChildren(value);
-    else if (value != null) cell.replaceChildren(document.createTextNode(String(value)));
-    else cell.replaceChildren();
+  _renderCellContent(cell, column, row, index, tree = this._hierarchyMeta?.get(this._idFor(row))) {
+    const value = formatTableCell(column, row, index);
+    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) {
+      cell.replaceChildren(...content.childNodes);
+      return;
+    }
+    const branch = h("span", { class: "zx-table__tree-cell" });
+    branch.style.setProperty("--zx-table-depth", String(tree.depth));
+    if (tree.hasChildren) {
+      const expanded = this._expanded.has(tree.id);
+      branch.append(h("button", {
+        class: "zx-table__tree-toggle",
+        type: "button",
+        ariaExpanded: String(expanded),
+        ariaLabel: `${expanded ? "Collapse" : "Expand"} row ${index + 1}`
+      }, icon(expanded ? "chevron-down" : "chevron-right", { size: 14 })));
+    } else {
+      branch.append(h("span", { class: "zx-table__tree-spacer", ariaHidden: "true" }));
+    }
+    branch.append(content);
+    cell.replaceChildren(branch);
   }
   /** @param {MouseEvent} event @returns {void} */
   _handleBodyClick(event) {
@@ -11080,7 +11670,15 @@ var Table = class extends Component {
     if (!rowElement || !this._tbody.contains(rowElement)) return;
     const meta = this._rowMeta.get(rowElement);
     if (!meta) return;
-    if (this._edit) this.commitEdit();
+    if (this._edit) {
+      this.commitEdit();
+      if (this._edit) return;
+    }
+    const disclosure = target.closest(".zx-table__tree-toggle");
+    if (disclosure) {
+      this.toggleRow(meta.id);
+      return;
+    }
     const checkbox = target.closest(".zx-table__row-checkbox");
     if (checkbox && this.options.selectable === "multi") {
       this._toggleMultiSelection(
@@ -11176,7 +11774,15 @@ var Table = class extends Component {
       return entry;
     }
     if (type === "number") {
-      const field = new NumberField(null, { ...props, value: value ?? null });
+      const locale = resolveColumnOption(column.locale, row);
+      const decimals = resolveColumnDecimals(column, row);
+      const suffix = column.type === "currency" ? resolveColumnOption(column.currency, row) : column.type === "unit" ? resolveColumnOption(column.unit, row) : null;
+      const inferred = {
+        ...locale != null && !Object.prototype.hasOwnProperty.call(props, "locale") ? { locale } : {},
+        ...decimals != null && !Object.prototype.hasOwnProperty.call(props, "precision") ? { precision: decimals } : {},
+        ...suffix != null && !Object.prototype.hasOwnProperty.call(props, "unit") ? { unit: String(suffix) } : {}
+      };
+      const field = new NumberField(null, { ...inferred, ...props, value: value ?? null });
       host.append(field.el);
       entry.component = field;
       entry.control = field.getInput();
@@ -11407,9 +12013,12 @@ var Table = class extends Component {
   _nextEditableCell(rowIndex, columnId, direction) {
     const columnCount = this._columns.length;
     if (rowIndex < 0 || columnCount === 0) return null;
-    let row = rowIndex;
+    const visible = this._visibleData();
+    const startingId = this._idFor(this._data[rowIndex]);
+    let row = visible.findIndex((candidate) => Object.is(this._idFor(candidate), startingId));
+    if (row < 0) return null;
     let column = this._columns.findIndex((candidate) => candidate.id === columnId);
-    const limit = this._data.length * columnCount + columnCount;
+    const limit = visible.length * columnCount + columnCount;
     for (let step = 0; step < limit; step += 1) {
       column += direction;
       if (column >= columnCount) {
@@ -11419,11 +12028,15 @@ var Table = class extends Component {
         row -= 1;
         column = columnCount - 1;
       }
-      if (row < 0 || row >= this._data.length) return null;
-      const candidateRow = this._data[row];
+      if (row < 0 || row >= visible.length) return null;
+      const candidateRow = visible[row];
       const candidateColumn = this._columns[column];
       if (resolveEditable(candidateColumn, candidateRow) !== false) {
-        return { id: this._idFor(candidateRow), columnId: candidateColumn.id, index: row };
+        return {
+          id: this._idFor(candidateRow),
+          columnId: candidateColumn.id,
+          index: this._data.indexOf(candidateRow)
+        };
       }
     }
     return null;
@@ -11490,14 +12103,16 @@ var Table = class extends Component {
     const message = this.msg(key);
     return message === key ? fallback : message;
   }
-  /** @param {{row: TableRow, id: unknown, index: number}} meta @param {boolean} checked @param {boolean} shiftKey @returns {void} */
+  /** @param {{row: TableRow, id: unknown, index: number, visibleIndex?: number}} meta @param {boolean} checked @param {boolean} shiftKey @returns {void} */
   _toggleMultiSelection(meta, checked, shiftKey) {
-    const anchorIndex = this._data.findIndex((row) => Object.is(this._idFor(row), this._selectionAnchorId));
+    const visible = this._visibleData();
+    const anchorIndex = visible.findIndex((row) => Object.is(this._idFor(row), this._selectionAnchorId));
     if (shiftKey && anchorIndex >= 0) {
-      const start = Math.min(anchorIndex, meta.index);
-      const end = Math.max(anchorIndex, meta.index);
+      const currentIndex = meta.visibleIndex ?? visible.findIndex((row) => Object.is(this._idFor(row), meta.id));
+      const start = Math.min(anchorIndex, currentIndex);
+      const end = Math.max(anchorIndex, currentIndex);
       for (let index = start; index <= end; index += 1) {
-        const id = this._idFor(this._data[index]);
+        const id = this._idFor(visible[index]);
         if (checked) this._selected.add(id);
         else this._selected.delete(id);
       }
@@ -11548,7 +12163,34 @@ var Table = class extends Component {
     const column = this._columns.find((candidate) => candidate.id === this._sort.id);
     if (!column) return;
     const getValue = typeof column.sortValue === "function" ? column.sortValue : (row) => row?.[column.id];
-    this._data = sortRows(this._data, getValue, this._sort.dir);
+    this._data = this._hierarchy ? sortHierarchyRows(this._data, this.options.rowId, this._hierarchy.parentId, getValue, this._sort.dir) : sortRows(this._data, getValue, this._sort.dir);
+  }
+  /** @param {unknown} id @param {boolean} expanded @param {{silent?: boolean}} options @returns {this} */
+  _setRowExpanded(id, expanded, options) {
+    if (!this._hierarchy) return this;
+    const branchIds = hierarchyBranchIds(this._data, this.options.rowId, this._hierarchy.parentId);
+    if (!branchIds.some((candidate) => Object.is(candidate, id))) return this;
+    if (this._expanded.has(id) === expanded) return this;
+    if (expanded) this._expanded.add(id);
+    else this._expanded.delete(id);
+    this._renderBody();
+    if (!options.silent) this._emitRowToggle(id, expanded);
+    return this;
+  }
+  /** @param {unknown} id @param {boolean} expanded @returns {void} */
+  _emitRowToggle(id, expanded) {
+    const row = this.getRow(id);
+    if (row) this.emit("rowtoggle", { row, id, expanded });
+  }
+  /** Keeps the reader's current expansion state limited to branches still present in the data. */
+  _reconcileExpanded() {
+    if (!this._hierarchy) {
+      this._expanded.clear();
+      return;
+    }
+    const branches = hierarchyBranchIds(this._data, this.options.rowId, this._hierarchy.parentId);
+    const valid = new Set(branches);
+    for (const id of this._expanded) if (!valid.has(id)) this._expanded.delete(id);
   }
   /** @returns {boolean} Whether selection changed. */
   _pruneSelection() {
@@ -11572,6 +12214,65 @@ var Table = class extends Component {
     this.emit("datachange", { rows: this.getData() });
   }
 };
+function formatTableCell(column, row, index = 0) {
+  if (typeof column?.render === "function") return column.render(row, index);
+  const value = row?.[column?.id];
+  const type = column?.type ?? "text";
+  if (type === "text") return value;
+  const locale = resolveColumnOption(column.locale, row);
+  const decimals = resolveColumnDecimals(column, row);
+  const options = {
+    ...locale != null ? { locale: String(locale) } : {},
+    ...decimals != null ? { decimals } : {}
+  };
+  if (type === "number") return formatNumber(value, options);
+  if (type === "currency") {
+    const currency = resolveColumnOption(column.currency, row);
+    return formatCurrency(value, currency == null ? null : String(currency), options);
+  }
+  if (type === "percent") return formatPercent(value, options);
+  if (type === "unit") {
+    const number = formatNumber(value, options);
+    const unit = resolveColumnOption(column.unit, row);
+    return number && unit != null && String(unit) !== "" ? `${number}\xA0${unit}` : number;
+  }
+  return value;
+}
+function projectHierarchyRows(rows, rowId, parentId, expanded = []) {
+  const forest = hierarchyForest(rows, rowId, parentId);
+  const open = expanded instanceof Set ? expanded : new Set(expanded);
+  const result = [];
+  const stack = forest.roots.slice().reverse().map((node) => ({ node, depth: 0 }));
+  while (stack.length) {
+    const { node, depth } = stack.pop();
+    result.push({
+      row: node.row,
+      id: node.id,
+      index: node.index,
+      depth,
+      hasChildren: node.children.length > 0,
+      parentId: node.parent?.id ?? null
+    });
+    if (!open.has(node.id)) continue;
+    for (let index = node.children.length - 1; index >= 0; index -= 1) {
+      stack.push({ node: node.children[index], depth: depth + 1 });
+    }
+  }
+  return result;
+}
+function sortHierarchyRows(rows, rowId, parentId, getValue, direction) {
+  const forest = hierarchyForest(rows, rowId, parentId);
+  const sorted = (nodes) => sortRows(nodes, (node) => getValue(node.row), direction);
+  const result = [];
+  const stack = sorted(forest.roots).reverse();
+  while (stack.length) {
+    const node = stack.pop();
+    result.push(node.row);
+    const children = sorted(node.children);
+    for (let index = children.length - 1; index >= 0; index -= 1) stack.push(children[index]);
+  }
+  return result;
+}
 function resolveEditable(column, row) {
   if (!column || typeof column !== "object") return false;
   if (typeof column.editor === "function") {
@@ -11579,7 +12280,7 @@ function resolveEditable(column, row) {
     return "custom";
   }
   const declared = typeof column.editable === "function" ? column.editable(row) : column.editable;
-  if (declared === true) return "text";
+  if (declared === true) return isNumericColumn(column) ? "number" : "text";
   if (typeof declared === "string" && EDITOR_TYPES.has(declared)) return (
     /** @type {TableEditorType} */
     declared
@@ -11628,6 +12329,71 @@ function firstValidationError(values, columns, row, fallbackMessage = "Invalid v
   }
   return null;
 }
+function resolveColumnOption(option, row) {
+  return typeof option === "function" ? option(row) : option;
+}
+function resolveColumnDecimals(column, row) {
+  const value = resolveColumnOption(column?.decimals, row);
+  if (value == null) return null;
+  const number = Number(value);
+  return Number.isFinite(number) ? Math.max(0, Math.trunc(number)) : null;
+}
+function isNumericColumn(column) {
+  return ["number", "currency", "percent", "unit"].includes(column?.type);
+}
+function hierarchyForest(rows, rowId, parentId) {
+  const nodes = (Array.isArray(rows) ? rows : []).map((row, index) => ({
+    row,
+    id: readRowValue(rowId, row),
+    index,
+    parent: null,
+    children: []
+  }));
+  const byId = /* @__PURE__ */ new Map();
+  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;
+    parentOf.set(node, parent === node ? null : parent);
+  }
+  for (const node of nodes) {
+    const seen = /* @__PURE__ */ new Set([node]);
+    let cursor = parentOf.get(node) ?? null;
+    while (cursor) {
+      if (seen.has(cursor)) {
+        parentOf.set(cursor, null);
+        break;
+      }
+      seen.add(cursor);
+      cursor = parentOf.get(cursor) ?? null;
+    }
+  }
+  const roots = [];
+  for (const node of nodes) {
+    node.parent = parentOf.get(node) ?? null;
+    if (node.parent) node.parent.children.push(node);
+    else roots.push(node);
+  }
+  return { roots, nodes };
+}
+function hierarchyBranchIds(rows, rowId, parentId) {
+  return hierarchyForest(rows, rowId, parentId).nodes.filter((node) => node.children.length > 0).map((node) => node.id);
+}
+function readRowValue(accessor, row) {
+  return typeof accessor === "function" ? accessor(row) : row?.[accessor];
+}
+function normalizeHierarchy(option, columns) {
+  if (!option || typeof option !== "object") return null;
+  const parentId = option.parentId;
+  if (typeof parentId !== "string" && typeof parentId !== "function") return null;
+  const requested = typeof option.column === "string" ? option.column : null;
+  const column = columns.some((candidate) => candidate.id === requested) ? requested : columns[0]?.id;
+  if (!column) return null;
+  return { ...option, parentId, column };
+}
+function initialExpanded(option) {
+  return new Set(Array.isArray(option) ? option : []);
+}
 function normalizeEditMode(mode) {
   if (mode === "cell" || mode === "row") return mode;
   return mode === true ? "cell" : false;
@@ -12094,6 +12860,29 @@ var MenuButton = class extends Component {
   isOpen() {
     return this.#dropdown.isOpen();
   }
+  /** Returns the trigger button. @returns {HTMLElement} */
+  getTrigger() {
+    return (
+      /** @type {HTMLElement} */
+      this.el
+    );
+  }
+  /** Returns the owned menu panel. @returns {HTMLElement} */
+  getPanel() {
+    return this.#panel;
+  }
+  /** Opens the menu and focuses its first enabled item. @returns {this} */
+  focusFirst() {
+    this.open();
+    this.#roving.focusFirst();
+    return this;
+  }
+  /** Opens the menu and focuses its last enabled item. @returns {this} */
+  focusLast() {
+    this.open();
+    this.#roving.focusLast();
+    return this;
+  }
   /**
    * Sets the visible trigger label.
    * @param {string} label Trigger label.
@@ -12153,7 +12942,8 @@ var MenuButton = class extends Component {
     const index = Number(element.getAttribute("data-menu-item"));
     const item = this.#items[index];
     if (!item || item === "-" || item.disabled) return;
-    this.emit("select", { value: item.value, item });
+    const selected = this.emit("select", { value: item.value, item });
+    if (selected.defaultPrevented) return;
     try {
       item.onselect?.(item.value, item, this);
     } finally {
@@ -13403,177 +14193,6 @@ function restore9(element, state) {
   element.replaceChildren(...state.children);
 }
 
-// src/components/permission/permission.js
-var Permission = class extends Component {
-  static cssName = "permission";
-  /** @type {PermissionOptions} */
-  static defaults = {
-    value: true,
-    groups: [],
-    groupsValueKey: "ID",
-    groupsLabelKey: "name"
-  };
-  /** @returns {HTMLElement} */
-  render() {
-    this._mode = "public";
-    this._groupValue = null;
-    this._groupSelect = null;
-    this._createdRoot = false;
-    this._originalChildren = [];
-    this._root = null;
-    this._originalState = null;
-    this._createdRoot = this.el === null;
-    const root = (
-      /** @type {HTMLElement} */
-      this.el ?? h("div")
-    );
-    this.el = root;
-    this._root = root;
-    if (!this._createdRoot) {
-      this._originalChildren = Array.from(root.childNodes);
-      this._originalState = root.getAttribute("data-state");
-    }
-    const name = uid("zx-permission");
-    const choices = h("div", {
-      class: "zx-permission__choices",
-      role: "radiogroup",
-      ariaLabel: this._message("permission.label", "Permission")
-    });
-    const privateChoice = this._choice(name, "private", this._message("permission.private", "Private"));
-    const publicChoice = this._choice(name, "public", this._message("permission.public", "Public"));
-    const groupChoice = this._choice(name, "group", this._message("permission.group", "Group"));
-    const groupHost = h("div", { ref: "groupHost", class: "zx-permission__groups" });
-    choices.append(privateChoice.label, publicChoice.label, groupChoice.label, groupHost);
-    root.replaceChildren(choices);
-    this.refs.private = privateChoice.input;
-    this.refs.public = publicChoice.input;
-    this.refs.group = groupChoice.input;
-    this._groupSelect = new Select(groupHost, {
-      items: Array.isArray(this.options.groups) ? this.options.groups : [],
-      valueKey: this.options.groupsValueKey,
-      labelKey: this.options.groupsLabelKey,
-      placeholder: this._message("permission.group", "Group")
-    });
-    this._groupSelect.refs.input.setAttribute(
-      "aria-label",
-      this._message("permission.group", "Group")
-    );
-    for (const input of [privateChoice.input, publicChoice.input, groupChoice.input]) {
-      this.listen(input, "change", () => {
-        if (!input.checked) return;
-        if (input.value === "group") this._selectGroupMode();
-        else this.set(input.value);
-      });
-    }
-    this.listen(groupHost, "zx-change", (event) => {
-      event.stopPropagation();
-      if (this._mode !== "group") return;
-      const previous = this.get();
-      this._groupValue = /** @type {CustomEvent} */
-      event.detail.value;
-      const value = this.get();
-      if (!Object.is(previous, value)) this.emit("change", { value });
-    });
-    this.set(this.options.value, { silent: true });
-    return root;
-  }
-  /** Returns the normalized permission value. @returns {'private'|'public'|unknown} */
-  get() {
-    if (this._mode === "private") return "private";
-    if (this._mode === "public") return "public";
-    return this._groupValue;
-  }
-  /**
-   * Sets a public, private, or group permission.
-   * @param {boolean|string|number|symbol|bigint|null} value Permission value.
-   * @param {{silent?: boolean}} [options={}] Update behavior.
-   * @returns {this}
-   * @fires Permission#change
-   */
-  set(value, { silent = false } = {}) {
-    const previous = this.get();
-    if (value === true || value === "public") {
-      this._mode = "public";
-    } else if (value === false || value === "private") {
-      this._mode = "private";
-    } else {
-      this._mode = "group";
-      this._groupValue = value;
-      this._groupSelect?.set(value, { silent: true });
-    }
-    this._sync();
-    const next = this.get();
-    if (!silent && !Object.is(previous, next)) this.emit("change", { value: next });
-    return this;
-  }
-  /** Destroys the embedded Select and restores an enhanced target. @returns {void} */
-  destroy() {
-    this._groupSelect?.destroy();
-    this._groupSelect = null;
-    if (!this._createdRoot && this.el) {
-      this.el.replaceChildren(...this._originalChildren);
-      if (this._originalState === null) this.el.removeAttribute("data-state");
-      else this.el.setAttribute("data-state", this._originalState);
-    }
-    super.destroy();
-  }
-  /** @returns {void} */
-  _selectGroupMode() {
-    const previous = this.get();
-    this._mode = "group";
-    if (this._groupValue == null) {
-      const first = Array.isArray(this.options.groups) ? this.options.groups[0] : null;
-      this._groupValue = first == null ? null : read(first, this.options.groupsValueKey);
-    }
-    this._groupSelect?.set(this._groupValue, { silent: true });
-    this._sync();
-    const next = this.get();
-    if (!Object.is(previous, next)) this.emit("change", { value: next });
-  }
-  /** @returns {void} */
-  _sync() {
-    this.refs.private.checked = this._mode === "private";
-    this.refs.public.checked = this._mode === "public";
-    this.refs.group.checked = this._mode === "group";
-    if (this._mode === "group") this._groupSelect?.enable();
-    else this._groupSelect?.disable();
-    this._root?.setAttribute("data-state", this._mode);
-  }
-  /**
-   * @param {string} name
-   * @param {'private'|'public'|'group'} value
-   * @param {string} text
-   * @returns {{label: HTMLLabelElement, input: HTMLInputElement}}
-   */
-  _choice(name, value, text3) {
-    const input = (
-      /** @type {HTMLInputElement} */
-      h("input", {
-        type: "radio",
-        name,
-        value
-      })
-    );
-    const label = (
-      /** @type {HTMLLabelElement} */
-      h("label", {
-        class: "zx-permission__choice"
-      }, input, h("span", {}, text3))
-    );
-    return { label, input };
-  }
-  /** @param {string} key @param {string} fallback @returns {string} */
-  _message(key, fallback) {
-    const message = this.msg(key);
-    return message === key ? fallback : message;
-  }
-};
-function read(item, reader) {
-  if (typeof reader === "function") return reader(item);
-  if (item === null || typeof item !== "object") return item;
-  return item[reader];
-}
-
 // src/components/data-filter/filter-core.js
 function normalizeText(value) {
   return String(value ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLocaleLowerCase();
@@ -15157,9 +15776,9 @@ function translateChecklistOptions(options = {}) {
   delete translated.onClick;
   return translated;
 }
-function translateDateboxFormat(format) {
-  if (typeof format === "string") return format.replaceAll("&nbsp;", " ");
-  const parts = Array.isArray(format) ? format : ["d", ".", "M", ".", "y"];
+function translateDateboxFormat(format2) {
+  if (typeof format2 === "string") return format2.replaceAll("&nbsp;", " ");
+  const parts = Array.isArray(format2) ? format2 : ["d", ".", "M", ".", "y"];
   const tokens = {
     d: "%d",
     m: "%m",
@@ -15347,26 +15966,39 @@ var Checklist2 = class extends ChecklistBase {
 var BootstrapChecklist = class extends ChecklistBase {
   static legacyName = "gx.bootstrap.Checklist";
 };
-var Permission2 = class extends GxWrapper {
+function toLegacyPermission(value) {
+  if (value === false) return "private";
+  if (value === true) return "public";
+  return value;
+}
+function fromLegacyPermission(value) {
+  if (value === false || value === "private") return false;
+  if (value === true || value === "public") return true;
+  return value;
+}
+var Permission = class extends GxWrapper {
   static legacyName = "gx.zeyos.Permission";
   /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
   constructor(display, options = {}) {
     super(options, { value: true, groups: [] });
-    const component = new Permission(display, {
-      value: options.value ?? true,
+    const component = Select.permission(display, {
+      value: fromLegacyPermission(options.value ?? true),
       groups: options.groups ?? options.data ?? [],
-      groupsValueKey: options.groupsValueKey ?? options.elementIndex ?? "ID",
-      groupsLabelKey: options.groupsLabelKey ?? options.elementLabel ?? "name"
+      valueKey: options.groupsValueKey ?? options.elementIndex ?? "ID",
+      labelKey: options.groupsLabelKey ?? options.elementLabel ?? "name"
+    });
+    this._attach(component, {
+      events: { change: { type: "change", args: (detail) => [toLegacyPermission(detail.value)] } },
+      setters: { value: "set" }
     });
-    this._attach(component, { events: { change: { type: "change", args: (detail) => [detail.value] } }, setters: { value: "set" } });
   }
   /** @returns {unknown} */
   get() {
-    return this._zx.get();
+    return toLegacyPermission(this._zx.value);
   }
   /** @param {unknown} value @param {boolean} [silent=false] @returns {this} */
   set(value, silent = false) {
-    this._zx.set(value, { silent });
+    this._zx.set(fromLegacyPermission(value), { silent });
     return this;
   }
 };
@@ -15599,11 +16231,11 @@ var Datebox2 = class extends GxWrapper {
   constructor(display, options = {}) {
     super(options, { timestamp: 0, unit: "milliseconds", format: ["d", ".", "M", ".", "y", " ", "h", ":", "i"] });
     const initial = options.timestamp == null || Number(options.timestamp) === 0 ? /* @__PURE__ */ new Date() : legacyDate(options.timestamp, options.unit ?? "milliseconds");
-    const format = translateDateboxFormat(options.format);
+    const format2 = translateDateboxFormat(options.format);
     const component = new Datebox(display, {
       value: initial,
-      format,
-      time: /%[HMS]/.test(format),
+      format: format2,
+      time: /%[HMS]/.test(format2),
       disabled: Boolean(options.disabled)
     });
     this._attach(component, {
@@ -15669,13 +16301,13 @@ var PickerBase = class extends GxWrapper {
     return this;
   }
   /** @param {string} [format] @returns {Date|number|string|null} */
-  get(format = this.options.return_format) {
+  get(format2 = this.options.return_format) {
     const date = this._readDate();
     if (!date) return null;
-    if (format == null) return date;
-    if (format === "%s" || format === "seconds") return Math.floor(date.getTime() / 1e3);
-    if (format === "date") return date;
-    return formatDate(date, String(format));
+    if (format2 == null) return date;
+    if (format2 === "%s" || format2 === "seconds") return Math.floor(date.getTime() / 1e3);
+    if (format2 === "date") return date;
+    return formatDate(date, String(format2));
   }
   /** @returns {number|null} */
   getSeconds() {
@@ -15688,8 +16320,8 @@ var PickerBase = class extends GxWrapper {
     return this;
   }
   /** @param {string} format @param {boolean} [enableTimePicker] @returns {this} */
-  setFormat(format, enableTimePicker) {
-    this.options.format = format;
+  setFormat(format2, enableTimePicker) {
+    this.options.format = format2;
     this.options.timePicker = enableTimePicker;
     return this;
   }
@@ -17154,7 +17786,7 @@ var gx = {
     SelectDyn,
     SelectPrio,
     Checklist: Checklist2,
-    Permission: Permission2,
+    Permission,
     Table: Table2,
     Tabbox: Tabbox2,
     Panel: Panel2,