@sylwellsoftware/fray 0.1.0-alpha.1

package/dist/experimental.js

@@ -0,0 +1,1361 @@
+var ie = Object.defineProperty;
+var ne = (t, r, e) => r in t ? ie(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
+var o = (t, r, e) => ne(t, typeof r != "symbol" ? r + "" : r, e);
+import { C as b, j as c, c as x, a as w, i as U } from "./jsx-dev-runtime-CarwHDyL.js";
+import { Emitter as y, FetchState as m, DerivedEmitter as oe, QueryArg as V, LiveQuery as ae, RestQueryHandler as le } from "@sylwellsoftware/glue";
+import { c as I, C as F, F as K, i as W, a as de, b as ce, B as Q } from "./button-BRDkmR1C.js";
+class E extends b {
+  render() {
+    const r = he(this.props.width ?? 65), e = this.Host;
+    return /* @__PURE__ */ c(e, { style: { width: `${r}%` }, "aria-hidden": "true" });
+  }
+}
+o(E, "hostName", "placeholder"), o(E, "standaloneHostName", "loading-placeholder"), o(E, "baseStyles", [
+  ["&::after", ["after", "working"]]
+]), o(E, "css", x`
+        & {
+            display: block;
+            min-width: 3rem;
+            height: 1em;
+            overflow: hidden;
+            background: currentColor;
+            border-radius: var(--ui-border-radius);
+            opacity: 0.18;
+            position: relative;
+        }
+
+        @keyframes fray-placeholder-progress {
+            from { background-position: 0 0; }
+            to { background-position: 2rem 0; }
+        }
+    `);
+function he(t) {
+  const r = Number(t);
+  if (!Number.isFinite(r)) throw new TypeError("Placeholder width must be numeric");
+  return Math.min(100, Math.max(10, r));
+}
+class J {
+  constructor({
+    getItems: r,
+    getKey: e = z,
+    selectedItemsEmitter: s,
+    owner: i = null
+  }) {
+    o(this, "getItems");
+    o(this, "getKey");
+    o(this, "selectedItemsEmitter");
+    o(this, "selectedItems$");
+    o(this, "ownsSelectedItemsEmitter");
+    o(this, "rows", []);
+    o(this, "rowCleanups", []);
+    o(this, "activeIndex", 0);
+    o(this, "anchorIndex", null);
+    o(this, "dragStartIndex", null);
+    o(this, "dragOriginEvent", null);
+    o(this, "dragMoved", !1);
+    o(this, "dragCleanup", null);
+    o(this, "suppressNextClick", !1);
+    o(this, "suppressClickTimer", null);
+    o(this, "destroyed", !1);
+    o(this, "ownedSelectedItemsEmitter");
+    if (typeof r != "function")
+      throw new TypeError("Selection handler getItems must be a function");
+    if (typeof e != "function")
+      throw new TypeError("Selection handler getKey must be a function");
+    this.getItems = r, this.getKey = e, this.ownedSelectedItemsEmitter = s == null ? new y([], { owner: i, purpose: "selected items" }) : null, this.selectedItemsEmitter = s ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.ownsSelectedItemsEmitter = this.ownedSelectedItemsEmitter != null;
+  }
+  rowsUpdated(r) {
+    this.destroyed || (this.releaseRows(), this.rows = Array.from(r ?? []), this.rows.forEach((e, s) => this.wireRow(e, s)), this.activeIndex = fe(this.activeIndex, this.rows.length), this.reconcileSelectedItems(), this.syncRows());
+  }
+  wireRow(r, e) {
+    const s = (l) => this.handleClick(e, l), i = (l) => this.handleKeyDown(e, l), n = (l) => this.handleMouseDown(e, l, r), a = (l) => this.handleMouseEnter(e, l);
+    r.addEventListener("click", s), r.addEventListener("keydown", i), r.addEventListener("mousedown", n), r.addEventListener("mouseenter", a), this.rowCleanups.push(() => {
+      r.removeEventListener("click", s), r.removeEventListener("keydown", i), r.removeEventListener("mousedown", n), r.removeEventListener("mouseenter", a);
+    });
+  }
+  handleClick(r, e) {
+    var s;
+    if (e.preventDefault(), this.suppressNextClick) {
+      this.clearClickSuppression();
+      return;
+    }
+    this.activeIndex = r, this.selectIndex(r, e), (s = this.rows[r]) == null || s.focus();
+  }
+  handleMouseDown(r, e, s) {
+    if (e.button !== 0 || !this.supportsDragSelection()) return;
+    this.finishDrag(!1), this.clearClickSuppression(), this.dragStartIndex = r, this.dragOriginEvent = e, this.dragMoved = !1;
+    const i = s.ownerDocument, n = () => this.finishDrag(this.dragMoved);
+    i.addEventListener("mouseup", n), this.dragCleanup = () => i.removeEventListener("mouseup", n);
+  }
+  handleMouseEnter(r, e) {
+    var s;
+    this.dragStartIndex != null && (r === this.dragStartIndex && !this.dragMoved || r === this.activeIndex && this.dragMoved || (e.preventDefault(), this.dragMoved = !0, this.activeIndex = r, this.selectDragRange(this.dragStartIndex, r, this.dragOriginEvent ?? e), (s = this.rows[r]) == null || s.focus()));
+  }
+  handleKeyDown(r, e) {
+    var n;
+    const s = this.rows.length - 1;
+    let i;
+    if (e.key === "ArrowDown") i = Math.min(r + 1, s);
+    else if (e.key === "ArrowUp") i = Math.max(r - 1, 0);
+    else if (e.key === "Home") i = 0;
+    else if (e.key === "End") i = s;
+    else if (e.key === " " || e.key === "Enter") {
+      e.preventDefault(), this.activeIndex = r, this.selectIndex(r, e);
+      return;
+    } else return;
+    e.preventDefault(), this.activeIndex = i, this.onKeyboardMove(i, e), this.syncRows(), (n = this.rows[i]) == null || n.focus();
+  }
+  onKeyboardMove(r, e) {
+    this.selectIndex(r, e);
+  }
+  supportsDragSelection() {
+    return !1;
+  }
+  selectDragRange(r, e, s) {
+  }
+  selectIndex(r, e) {
+  }
+  setSelectedItems(r, e = "selection changed") {
+    this.selectedItemsEmitter.set(r, e), this.syncRows();
+  }
+  getSelectedItems() {
+    return this.selectedItemsEmitter.get() ?? [];
+  }
+  getSelectedItemsEmitter() {
+    return this.selectedItemsEmitter;
+  }
+  reconcileSelectedItems() {
+    const r = this.getSelectedItems();
+    if (r.length === 0) return;
+    const e = new Set(r.map((i, n) => this.getKey(i, n))), s = this.getItems().filter((i, n) => e.has(this.getKey(i, n)));
+    (s.length !== r.length || s.some((i, n) => !Object.is(i, r[n]))) && this.selectedItemsEmitter.set([...s], "selection reconciled with rows");
+  }
+  syncRows() {
+    const r = new Set(this.getSelectedItems().map((s, i) => this.getKey(s, i))), e = this.getItems();
+    this.rows.forEach((s, i) => {
+      const n = e[i], a = n !== void 0 && r.has(this.getKey(n, i));
+      s.classList.toggle("selected", a), s.setAttribute("aria-selected", String(a)), s.tabIndex = i === this.activeIndex ? 0 : -1;
+    });
+  }
+  releaseRows() {
+    for (const r of this.rowCleanups.splice(0)) r();
+    this.rows = [];
+  }
+  finishDrag(r) {
+    var e;
+    (e = this.dragCleanup) == null || e.call(this), this.dragCleanup = null, this.dragStartIndex = null, this.dragOriginEvent = null, this.dragMoved = !1, r && (this.suppressNextClick = !0, this.suppressClickTimer != null && clearTimeout(this.suppressClickTimer), this.suppressClickTimer = setTimeout(() => this.clearClickSuppression(), 0));
+  }
+  clearClickSuppression() {
+    this.suppressNextClick = !1, this.suppressClickTimer != null && clearTimeout(this.suppressClickTimer), this.suppressClickTimer = null;
+  }
+  destroy() {
+    var r;
+    this.destroyed || (this.destroyed = !0, this.finishDrag(!1), this.clearClickSuppression(), this.releaseRows(), (r = this.ownedSelectedItemsEmitter) == null || r.dispose());
+  }
+}
+class ue extends J {
+  selectIndex(r) {
+    const e = this.getItems()[r];
+    e !== void 0 && (this.anchorIndex = r, this.setSelectedItems([e], "single selection changed"));
+  }
+}
+class pe extends J {
+  selectIndex(r, e) {
+    const s = this.getItems(), i = s[r];
+    if (i !== void 0) {
+      if (e.shiftKey && this.anchorIndex != null) {
+        const n = Math.min(this.anchorIndex, r), a = Math.max(this.anchorIndex, r), l = s.slice(n, a + 1), d = L(e) ? P(this.getSelectedItems(), l, this.getKey) : [...l];
+        this.setSelectedItems(d, "range selection changed");
+        return;
+      }
+      if (L(e) || "key" in e && e.key === " ") {
+        const n = this.getSelectedItems(), a = this.getKey(i, r), d = n.some((h, u) => Object.is(this.getKey(h, u), a)) ? n.filter((h, u) => !Object.is(this.getKey(h, u), a)) : [...n, i];
+        this.anchorIndex = r, this.setSelectedItems(d, "multi selection toggled");
+        return;
+      }
+      this.anchorIndex = r, this.setSelectedItems([i], "multi selection changed");
+    }
+  }
+  onKeyboardMove(r, e) {
+    e.shiftKey && this.selectIndex(r, e);
+  }
+  supportsDragSelection() {
+    return !0;
+  }
+  selectDragRange(r, e, s) {
+    const i = this.getItems(), n = Math.min(r, e), a = Math.max(r, e), l = i.slice(n, a + 1), d = L(s) ? P(this.getSelectedItems(), l, this.getKey) : [...l];
+    this.anchorIndex = r, this.setSelectedItems(d, "drag selection changed");
+  }
+}
+function Y(t) {
+  return t.multiSelect ? new pe(t) : new ue(t);
+}
+function z(t, r) {
+  if (t != null && typeof t == "object") {
+    const e = Reflect.get(t, "id");
+    if (e != null) return e;
+  }
+  if (typeof t == "string" || typeof t == "number") return t;
+  throw new TypeError(
+    `Selection item at index ${r} needs an id or an explicit itemKey/rowKey`
+  );
+}
+function L(t) {
+  return !!(t.ctrlKey || t.metaKey);
+}
+function fe(t, r) {
+  return r <= 0 ? 0 : Math.min(Math.max(t, 0), r - 1);
+}
+function P(t, r, e) {
+  const s = [...t], i = new Set(t.map((n, a) => e(n, a)));
+  for (const n of r) {
+    const a = e(n, s.length);
+    i.has(a) || (i.add(a), s.push(n));
+  }
+  return s;
+}
+class D extends b {
+  constructor(e = {}) {
+    super(e);
+    o(this, "itemsEmitter");
+    o(this, "items$");
+    o(this, "selectedItemsEmitter");
+    o(this, "selectedItems$");
+    o(this, "getItemKey");
+    o(this, "selectionHandler");
+    o(this, "ownedItemsEmitter");
+    o(this, "ownedSelectedItemsEmitter");
+    ge(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new y(e.items ?? [], {
+      owner: this,
+      purpose: "list items"
+    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.ownedSelectedItemsEmitter = e.selectedItemsEmitter == null ? new y([], { owner: this, purpose: "selected list items" }) : null, this.selectedItemsEmitter = e.selectedItemsEmitter ?? this.ownedSelectedItemsEmitter, this.selectedItems$ = this.selectedItemsEmitter, this.getItemKey = me(e.itemKey), this.selectionHandler = Y({
+      owner: this,
+      multiSelect: e.multiSelect ?? !1,
+      selectedItemsEmitter: this.selectedItemsEmitter,
+      getItems: () => this.itemsEmitter.get(),
+      getKey: this.getItemKey
+    });
+  }
+  initialize() {
+    this.watch(this.itemsEmitter, this.selectedItemsEmitter);
+  }
+  render() {
+    const e = this.itemsEmitter.get();
+    if (!Array.isArray(e)) throw new TypeError("ListView items must be an array");
+    const s = this.itemsEmitter.getFetchState(), i = this.itemsEmitter.getError(), n = s === m.Initial || s === m.Loading, a = new Set(this.selectedItemsEmitter.get().map((d, h) => this.getItemKey(d, h))), l = this.Host;
+    return /* @__PURE__ */ w(
+      l,
+      {
+        className: I(this.props) || null,
+        children: [
+          s === m.Error ? /* @__PURE__ */ c("p", { role: "alert", "data-part": "error", children: be(i, "Unable to load items") }) : null,
+          n && e.length === 0 ? /* @__PURE__ */ w("div", { role: "status", "data-part": "loading", children: [
+            /* @__PURE__ */ c("span", { children: "Loading items…" }),
+            Array.from({ length: this.props.placeholderCount ?? 5 }, (d, h) => /* @__PURE__ */ c("div", { "data-part": "placeholder-row", children: /* @__PURE__ */ c(E, { width: 45 + h * 7 }) }, `placeholder-${h}`))
+          ] }) : null,
+          s === m.Ready && e.length === 0 ? /* @__PURE__ */ c("p", { role: "status", "data-part": "empty", children: "No items" }) : null,
+          e.length > 0 ? /* @__PURE__ */ c(
+            "div",
+            {
+              role: "listbox",
+              "data-part": "list",
+              "aria-label": this.props.label ?? "Items",
+              "aria-busy": n ? "true" : null,
+              "aria-multiselectable": this.props.multiSelect ? "true" : null,
+              children: e.map((d, h) => {
+                const u = this.getItemKey(d, h), f = a.has(u), p = this.props.renderItem ? this.props.renderItem(d, h) : ye(d);
+                return /* @__PURE__ */ c(
+                  "div",
+                  {
+                    role: "option",
+                    "data-part": "row",
+                    "data-fray-selectable-row": "",
+                    "data-index": h,
+                    "aria-selected": String(f),
+                    tabIndex: h === 0 ? 0 : -1,
+                    children: p
+                  },
+                  String(u)
+                );
+              })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  afterUpdate(e) {
+    const s = e instanceof Element ? e.querySelectorAll("[data-fray-selectable-row]") : [];
+    this.selectionHandler.rowsUpdated(s);
+  }
+  getSelectedItems() {
+    return this.selectionHandler.getSelectedItems();
+  }
+  getSelectedItemsEmitter() {
+    return this.selectedItemsEmitter;
+  }
+  onDestroy() {
+    var e, s;
+    this.selectionHandler.destroy(), (e = this.ownedItemsEmitter) == null || e.dispose(), (s = this.ownedSelectedItemsEmitter) == null || s.dispose();
+  }
+}
+o(D, "dependencies", [E]), o(D, "hostName", "list-view"), o(D, "standaloneHostName", "list-view"), o(D, "baseStyles", [
+  ["&", "inputlike"],
+  ['& > [data-part="list"] > [data-part="row"]', "inputline"]
+]), o(D, "css", x`
+        & {
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+            min-height: 0;
+        }
+
+        & > [data-part="list"],
+        & > [data-part="loading"] {
+            display: flex;
+            flex-direction: column;
+        }
+
+        & > [data-part="list"] > [data-part="row"] {
+            cursor: default;
+            user-select: none;
+        }
+
+        & > [data-part="list"] > [data-part="row"]:hover,
+        & > [data-part="list"] > [data-part="row"]:focus-visible {
+            background: var(--button-background-hover);
+            outline: 2px solid var(--ui-accent-color);
+            outline-offset: -2px;
+        }
+
+        & > [data-part="list"] > [data-part="row"][aria-selected="true"] {
+            color: var(--toggle-selected-text);
+            background: var(--toggle-selected-bg);
+        }
+
+        & > [data-part="empty"],
+        & > [data-part="error"] {
+            margin: 0;
+            padding: var(--ui-padding);
+        }
+
+        & > [data-part="error"] {
+            color: var(--error-color);
+        }
+    `);
+function me(t) {
+  if (t == null) return z;
+  if (typeof t == "function") return t;
+  if (typeof t == "string" && t.length > 0)
+    return (r, e) => {
+      if (r == null || typeof r != "object" && typeof r != "function")
+        throw new TypeError(`ListView item at index ${e} lacks ${t}`);
+      const s = Reflect.get(r, t);
+      if (s == null)
+        throw new TypeError(`ListView item at index ${e} lacks ${t}`);
+      return s;
+    };
+  throw new TypeError("ListView itemKey must be a function or property name");
+}
+function ge(t) {
+  return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
+}
+function ye(t) {
+  if (t != null && (typeof t == "object" || typeof t == "function")) {
+    const r = Reflect.get(t, "label");
+    if (we(r)) return r;
+  }
+  return String(t);
+}
+function we(t) {
+  return t == null || typeof t == "string" || typeof t == "number";
+}
+function be(t, r) {
+  return t instanceof Error ? t.message : t == null ? r : String(t);
+}
+class T extends b {
+  constructor(e = {}) {
+    super(e);
+    o(this, "optionsEmitter");
+    this.optionsEmitter = ke(e.options) ? e.options : null;
+  }
+  initialize() {
+    this.optionsEmitter && this.watch(this.optionsEmitter);
+  }
+  render() {
+    var h, u, f;
+    const e = ((h = this.optionsEmitter) == null ? void 0 : h.get()) ?? (Array.isArray(this.props.options) ? this.props.options : []);
+    if (!Array.isArray(e))
+      throw new TypeError("FilterPanel options must be an array or emitter of arrays");
+    const s = ((u = this.optionsEmitter) == null ? void 0 : u.getFetchState()) ?? m.Ready, i = (f = this.optionsEmitter) == null ? void 0 : f.getError(), n = Se(this.props.filters), a = this.props.filterModes ?? F.symbols, l = this.props.defaultSemanticState ?? K.Neutral, d = this.Host;
+    return s === m.Error ? /* @__PURE__ */ c(
+      d,
+      {
+        className: I(this.props) || null,
+        role: "alert",
+        "data-state": "error",
+        children: ve(i, "Unable to load filter options")
+      }
+    ) : (s === m.Initial || s === m.Loading) && e.length === 0 ? /* @__PURE__ */ c(
+      d,
+      {
+        className: I(this.props) || null,
+        role: "status",
+        "data-state": "loading",
+        children: "Loading filter options…"
+      }
+    ) : /* @__PURE__ */ c(
+      d,
+      {
+        className: I(this.props) || null,
+        role: "group",
+        "aria-label": this.props.label ?? "Filter options",
+        children: e.length === 0 ? /* @__PURE__ */ c("span", { children: "No filter options" }) : e.map((p) => {
+          const g = X(p), S = Ie(p), C = n.get(g) ?? l;
+          return /* @__PURE__ */ c(
+            Ee,
+            {
+              label: S,
+              defaultValue: C,
+              symbols: a,
+              onChange: (q, k) => {
+                var R, M;
+                k == null || k.stopPropagation();
+                const v = new Map(n);
+                q === K.Neutral ? v.delete(g) : v.set(g, q), (M = (R = this.props).onChange) == null || M.call(R, v, k);
+              }
+            },
+            `${String(g)}:${String(C)}`
+          );
+        })
+      }
+    );
+  }
+}
+o(T, "dependencies", [F]), o(T, "hostName", "filter-panel"), o(T, "standaloneHostName", "filter-panel"), o(T, "css", x`
+        & {
+            position: absolute;
+            z-index: 1000;
+            inset-block-start: 100%;
+            inset-inline-end: 0;
+            display: flex;
+            min-width: 12rem;
+            padding: var(--ui-padding);
+            flex-flow: column nowrap;
+            align-items: stretch;
+            color: var(--panel-color);
+            background: var(--panel-bg);
+            border: var(--panel-border);
+            border-radius: var(--panel-radius);
+            box-shadow: var(--panel-shadow);
+        }
+    `);
+const Ee = F;
+function Se(t) {
+  if (t == null) return /* @__PURE__ */ new Map();
+  if (t instanceof Map) return new Map(t);
+  if (Array.isArray(t)) return new Map(t);
+  throw new TypeError("FilterPanel filters must be a Map or tuple array");
+}
+function X(t) {
+  if (typeof t == "string" || typeof t == "number") return t;
+  if (t != null && typeof t == "object") {
+    const r = Reflect.get(t, "value");
+    if (typeof r == "string" || typeof r == "number") return r;
+  }
+  throw new TypeError("Filter options must be strings, numbers, or value/label objects");
+}
+function Ie(t) {
+  if (t != null && typeof t == "object") {
+    const r = Reflect.get(t, "label");
+    if (r != null) return xe(r) ? r : String(r);
+  }
+  return String(X(t));
+}
+function xe(t) {
+  return typeof t == "string" || typeof t == "number";
+}
+function ke(t) {
+  return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
+}
+function ve(t, r) {
+  return t instanceof Error ? t.message : t == null ? r : String(t);
+}
+class N extends b {
+  constructor() {
+    super(...arguments);
+    o(this, "filterVisible", !1);
+    o(this, "onGlobalClick", (e) => {
+      this.filterVisible && this.dom instanceof Node && e.target instanceof Node && !this.dom.contains(e.target) && (this.filterVisible = !1, this.update());
+    });
+  }
+  initialize() {
+    this.watch(this.props.sortEmitter, this.props.filtersEmitter), this.props.filterOptions != null && this.listen(document, "click", this.onGlobalClick);
+  }
+  toggleSort() {
+    if (!this.props.sortable) return;
+    const e = this.props.sortEmitter.get();
+    let s;
+    (e == null ? void 0 : e.field) !== this.props.field ? s = { field: this.props.field, direction: "asc" } : e.direction === "asc" ? s = { field: this.props.field, direction: "desc" } : s = null, this.props.sortEmitter.set(s, "table sort changed");
+  }
+  toggleFilterPanel(e) {
+    e.stopPropagation(), this.filterVisible = !this.filterVisible, this.update();
+  }
+  updateFilters(e, s) {
+    var n, a;
+    const i = { ...this.props.filtersEmitter.get() };
+    e.size === 0 ? delete i[this.props.field] : i[this.props.field] = [...e.entries()], this.props.filtersEmitter.set(i, "table filters changed"), (a = (n = this.props).onFilterChange) == null || a.call(n, i, s);
+  }
+  render() {
+    const e = this.props.sortEmitter.get(), s = (e == null ? void 0 : e.field) === this.props.field ? e.direction : null, i = new Map(
+      (this.props.filtersEmitter.get()[this.props.field] ?? []).filter(Te)
+    ), n = this.props.label ?? String(this.props.field), a = `Filter ${String(n)}`;
+    let l = null;
+    return this.filterVisible && this.props.filterOptions != null && (l = /* @__PURE__ */ c(
+      T,
+      {
+        label: a,
+        options: this.props.filterOptions,
+        filters: i,
+        onChange: (d, h) => this.updateFilters(d, h),
+        ...this.props.filterModes == null ? {} : { filterModes: this.props.filterModes },
+        ...this.props.defaultSemanticState == null ? {} : { defaultSemanticState: this.props.defaultSemanticState }
+      },
+      "filter-panel"
+    )), /* @__PURE__ */ w(
+      "th",
+      {
+        scope: "col",
+        "data-fray-component": "table-header-cell",
+        "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : "none",
+        children: [
+          this.props.sortable ? /* @__PURE__ */ w(
+            "button",
+            {
+              type: "button",
+              "data-part": "sort",
+              onClick: () => this.toggleSort(),
+              children: [
+                n,
+                s === "asc" ? " ▲" : s === "desc" ? " ▼" : ""
+              ]
+            }
+          ) : /* @__PURE__ */ c("span", { "data-part": "label", children: n }),
+          this.props.filterOptions == null ? null : /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              "data-part": "filter-toggle",
+              "aria-label": a,
+              "aria-expanded": String(this.filterVisible),
+              onClick: (d) => this.toggleFilterPanel(d),
+              children: "Filter"
+            }
+          ),
+          l
+        ]
+      }
+    );
+  }
+}
+o(N, "dependencies", [T]), o(N, "baseStyles", [
+  ['th[data-fray-component="table-header-cell"]', "noselect"],
+  ['th[data-fray-component="table-header-cell"] > [data-part="sort"]', ["uiline", "button"]],
+  ['th[data-fray-component="table-header-cell"] > [data-part="filter-toggle"]', ["uiline", "button"]]
+]), o(N, "css", x`
+        th[data-fray-component="table-header-cell"] {
+            position: relative;
+            text-align: start;
+        }
+
+        th[data-fray-component="table-header-cell"] > [data-part="sort"],
+        th[data-fray-component="table-header-cell"] > [data-part="filter-toggle"] {
+            width: auto;
+            font-family: inherit;
+        }
+
+        th[data-fray-component="table-header-cell"] > [data-part="filter-toggle"] {
+            margin-inline-start: var(--ui-padding-h);
+            font-size: 0.75em;
+        }
+    `);
+function Te(t) {
+  return typeof t[0] == "string" || typeof t[0] == "number";
+}
+class H extends b {
+  render() {
+    return /* @__PURE__ */ c("thead", { "data-fray-component": "table-header", children: /* @__PURE__ */ c("tr", { children: this.props.columns.map((r) => /* @__PURE__ */ c(
+      N,
+      {
+        field: r.field,
+        sortEmitter: this.props.sortEmitter,
+        filtersEmitter: this.props.filtersEmitter,
+        ...r.label == null ? {} : { label: r.label },
+        ...r.sortable == null ? {} : { sortable: r.sortable },
+        ...r.filterOptions == null ? {} : { filterOptions: r.filterOptions },
+        ...this.props.filterModes == null ? {} : { filterModes: this.props.filterModes },
+        ...this.props.defaultSemanticState == null ? {} : { defaultSemanticState: this.props.defaultSemanticState },
+        ...this.props.onFilterChange == null ? {} : { onFilterChange: this.props.onFilterChange }
+      },
+      String(r.field)
+    )) }) });
+  }
+}
+o(H, "dependencies", [N]);
+function Ke(t, { sort: r = null, filters: e = {} } = {}) {
+  qe(t), r != null && (Z(r), t.searchParams.set("sort", `${r.field}:${r.direction}`));
+  for (const [s, i] of Object.entries(e))
+    for (const [n, a] of i) {
+      if (!De(a))
+        throw new TypeError(`Unknown filter mode for ${s}: ${String(a)}`);
+      t.searchParams.append(
+        "filter",
+        `${s}:${a}:${JSON.stringify(n)}`
+      );
+    }
+  return t;
+}
+function Ce(t, r, e) {
+  if (!Array.isArray(t)) throw new TypeError("Local table data must be an array");
+  const s = t.filter((n) => Re(n, e));
+  if (r == null) return s;
+  Z(r);
+  const i = r.direction === "asc" ? 1 : -1;
+  return [...s].sort((n, a) => Ne($(n, r.field), $(a, r.field)) * i);
+}
+function Re(t, r) {
+  for (const [e, s] of Object.entries(r)) {
+    const i = $(t, e);
+    if (s.filter(([, d]) => d === K.Deny).some(([d]) => Object.is(d, i))) return !1;
+    const a = s.filter(([, d]) => d === K.Require);
+    if (a.length > 0 && !a.some(([d]) => Object.is(d, i))) return !1;
+    const l = s.filter(([, d]) => d === K.Prefer);
+    if (l.length > 0 && !l.some(([d]) => Object.is(d, i))) return !1;
+  }
+  return !0;
+}
+function Z(t) {
+  if (t == null || typeof t != "object" || typeof Reflect.get(t, "field") != "string" || !Me(Reflect.get(t, "direction")))
+    throw new TypeError("Table sort must contain a field and asc/desc direction");
+}
+function Me(t) {
+  return t === "asc" || t === "desc";
+}
+function De(t) {
+  return Object.values(K).some((r) => r === t);
+}
+function Ne(t, r) {
+  return Object.is(t, r) ? 0 : t == null ? -1 : r == null ? 1 : typeof t == "number" && typeof r == "number" ? t - r : String(t).localeCompare(String(r));
+}
+function $(t, r) {
+  if (!(t == null || typeof t != "object" && typeof t != "function"))
+    return Reflect.get(t, r);
+}
+function qe(t) {
+  if (t == null || typeof t != "object" && typeof t != "function" || typeof Reflect.get(t, "toString") != "function")
+    throw new TypeError("Table serializer requires a URL");
+  const r = Reflect.get(t, "searchParams");
+  if (r == null || typeof Reflect.get(r, "set") != "function" || typeof Reflect.get(r, "append") != "function")
+    throw new TypeError("Table serializer requires URL search parameters");
+}
+class j extends b {
+  constructor(e) {
+    super(e);
+    o(this, "columns");
+    o(this, "rowKey");
+    o(this, "sortEmitter");
+    o(this, "filtersEmitter");
+    o(this, "selectedItemsEmitter");
+    o(this, "selectionHandler");
+    o(this, "query", null);
+    o(this, "dataSource", null);
+    o(this, "ownedSelectedItemsEmitter");
+    o(this, "ownedDataSource", null);
+    o(this, "ownsQuery", !1);
+    o(this, "queryArgs", []);
+    if (e.mode !== "local" && e.mode !== "remote")
+      throw new TypeError("DataTable mode must be local or remote");
+    this.columns = Oe(e.columns), this.rowKey = je(e.rowKey), this.sortEmitter = new y(null, {
+      owner: this,
+      purpose: "table sort"
+    }), this.filtersEmitter = new y({}, {
+      owner: this,
+      purpose: "table filters"
+    }), this.ownedSelectedItemsEmitter = e.selectedItemsEmitter == null ? new y([], { owner: this, purpose: "selected table rows" }) : null, this.selectedItemsEmitter = e.selectedItemsEmitter ?? this.ownedSelectedItemsEmitter, this.selectionHandler = Y({
+      owner: this,
+      multiSelect: e.multiSelect ?? !1,
+      selectedItemsEmitter: this.selectedItemsEmitter,
+      getItems: () => {
+        var s;
+        return ((s = this.query) == null ? void 0 : s.get()) ?? [];
+      },
+      getKey: this.rowKey
+    });
+  }
+  initialize() {
+    this.query = this.props.mode === "local" ? this.createLocalQuery() : this.createRemoteQuery(), this.watch(this.query, this.selectedItemsEmitter);
+  }
+  createLocalQuery() {
+    const e = this.props.data ?? [];
+    let s;
+    return ee(e) ? s = e : (this.ownedDataSource = new y(e, {
+      owner: this,
+      purpose: "local table data"
+    }), s = this.ownedDataSource), this.dataSource = s, this.ownsQuery = !0, new oe(
+      [s, this.sortEmitter, this.filtersEmitter],
+      ([i, n, a]) => Ce(i, n, a),
+      { owner: this, purpose: "local table view" }
+    );
+  }
+  createRemoteQuery() {
+    if (this.props.query != null)
+      return Ae(this.props.query), this.props.query;
+    const e = this.props.queryHandler ?? this.createRestHandler();
+    if (e == null || typeof e.fetch != "function")
+      throw new TypeError("Remote DataTable requires query, queryHandler, or queryUrl");
+    const s = new V("sort", this.sortEmitter, {
+      owner: this,
+      purpose: "remote table sort argument"
+    }), i = new V("filters", this.filtersEmitter, {
+      owner: this,
+      purpose: "remote table filters argument"
+    });
+    this.queryArgs.push(s, i), this.ownsQuery = !0;
+    const n = { sort: s, filters: i };
+    return new ae({
+      handler: e,
+      args: n,
+      owner: this,
+      purpose: "remote table query",
+      keepPreviousValue: !0
+    });
+  }
+  createRestHandler() {
+    if (this.props.queryUrl == null) return null;
+    const e = {
+      url: this.props.queryUrl,
+      serialize: this.props.serializeQuery ?? Ke
+    };
+    return this.props.baseUrl != null && (e.baseUrl = this.props.baseUrl), this.props.fetch != null && (e.fetch = this.props.fetch), new le(e);
+  }
+  render() {
+    var d, h, u, f;
+    const e = ((d = this.query) == null ? void 0 : d.get()) ?? [];
+    if (!Array.isArray(e)) throw new TypeError("DataTable query value must be an array");
+    const s = ((h = this.query) == null ? void 0 : h.getFetchState()) ?? m.Initial, i = (u = this.query) == null ? void 0 : u.getError(), n = s === m.Initial || s === m.Loading, a = new Set(
+      this.selectedItemsEmitter.get().map((p, g) => this.rowKey(p, g))
+    ), l = this.Host;
+    return /* @__PURE__ */ w(
+      l,
+      {
+        className: I(this.props) || null,
+        "data-loading": n ? "" : null,
+        "data-error": s === m.Error ? "" : null,
+        children: [
+          n ? /* @__PURE__ */ c("p", { role: "status", "data-part": "status", children: "Loading rows…" }) : null,
+          s === m.Error ? /* @__PURE__ */ w("div", { "data-part": "error", role: "alert", children: [
+            /* @__PURE__ */ c("span", { children: Fe(i, "Unable to load rows") }),
+            typeof ((f = this.query) == null ? void 0 : f.retry) == "function" ? /* @__PURE__ */ c(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  var p, g;
+                  return (g = (p = this.query) == null ? void 0 : p.retry) == null ? void 0 : g.call(p, "table retry");
+                },
+                children: "Retry"
+              }
+            ) : null
+          ] }) : null,
+          /* @__PURE__ */ w("table", { "data-part": "table", "aria-busy": n ? "true" : null, children: [
+            this.props.caption == null ? null : /* @__PURE__ */ c("caption", { children: this.props.caption }),
+            /* @__PURE__ */ c(
+              H,
+              {
+                columns: this.columns,
+                sortEmitter: this.sortEmitter,
+                filtersEmitter: this.filtersEmitter,
+                ...this.props.filterModes == null ? {} : { filterModes: this.props.filterModes },
+                ...this.props.defaultSemanticState == null ? {} : { defaultSemanticState: this.props.defaultSemanticState },
+                ...this.props.onFilterChange == null ? {} : { onFilterChange: this.props.onFilterChange }
+              },
+              "header"
+            ),
+            /* @__PURE__ */ c("tbody", { children: e.length > 0 ? e.map((p, g) => this.renderRow(p, g, a)) : n ? this.renderPlaceholders() : s === m.Error ? null : /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", { colSpan: this.columns.length, children: this.props.emptyMessage ?? "No rows" }) }, "empty") })
+          ] })
+        ]
+      }
+    );
+  }
+  renderRow(e, s, i) {
+    const n = this.rowKey(e, s), a = i.has(n);
+    return /* @__PURE__ */ c(
+      "tr",
+      {
+        "data-fray-selectable-row": "",
+        "data-index": s,
+        "aria-selected": String(a),
+        tabIndex: s === 0 ? 0 : -1,
+        children: this.columns.map((l) => /* @__PURE__ */ c("td", { children: l.render ? l.render(e, s) : Le(e[l.field]) }, String(l.field)))
+      },
+      String(n)
+    );
+  }
+  renderPlaceholders() {
+    const e = this.props.placeholderCount ?? 5;
+    return Array.from({ length: e }, (s, i) => /* @__PURE__ */ c("tr", { children: this.columns.map((n, a) => /* @__PURE__ */ c("td", { children: /* @__PURE__ */ c(
+      E,
+      {
+        width: 45 + (i + a) % 6 * 8
+      }
+    ) }, String(n.field))) }, `placeholder-${i}`));
+  }
+  afterUpdate(e) {
+    const s = e instanceof Element ? e.querySelectorAll("tbody [data-fray-selectable-row]") : [];
+    this.selectionHandler.rowsUpdated(s);
+  }
+  getSelectedRows() {
+    return this.selectionHandler.getSelectedItems();
+  }
+  getSelectedRowsEmitter() {
+    return this.selectedItemsEmitter;
+  }
+  onDestroy() {
+    var e, s, i, n;
+    this.selectionHandler.destroy(), this.ownsQuery && ((s = (e = this.query) == null ? void 0 : e.dispose) == null || s.call(e));
+    for (const a of this.queryArgs) a.dispose();
+    (i = this.ownedDataSource) == null || i.dispose(), (n = this.ownedSelectedItemsEmitter) == null || n.dispose(), this.sortEmitter.dispose(), this.filtersEmitter.dispose();
+  }
+}
+o(j, "dependencies", [E, H]), o(j, "hostName", "data-table"), o(j, "standaloneHostName", "data-table"), o(j, "css", x`
+        & {
+            overflow: auto;
+            color: var(--ui-text-color);
+        }
+
+        & > table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        & th,
+        & td {
+            padding: var(--ui-padding-v) var(--ui-padding-h);
+            text-align: start;
+        }
+
+        & tbody tr[data-fray-selectable-row] {
+            cursor: default;
+            user-select: none;
+        }
+
+        & tbody tr[data-fray-selectable-row]:focus-visible {
+            outline: 2px solid var(--ui-accent-color);
+            outline-offset: -2px;
+        }
+
+        & tbody tr[data-fray-selectable-row][aria-selected="true"] {
+            color: var(--toggle-selected-text);
+            background: var(--toggle-selected-bg);
+        }
+
+        & > [data-part="error"] {
+            color: var(--error-color);
+        }
+    `);
+function Oe(t) {
+  if (!Array.isArray(t) || t.length === 0)
+    throw new TypeError("DataTable columns must be a non-empty array");
+  const r = /* @__PURE__ */ new Set();
+  return t.map((e) => {
+    if (e == null || typeof e != "object")
+      throw new TypeError("Every DataTable column requires a field");
+    const s = Reflect.get(e, "field");
+    if (typeof s != "string" || s.length === 0)
+      throw new TypeError("Every DataTable column requires a field");
+    if (r.has(s)) throw new Error(`Duplicate DataTable column: ${s}`);
+    r.add(s);
+    const i = Reflect.get(e, "render");
+    if (i != null && typeof i != "function")
+      throw new TypeError(`DataTable column ${s} render must be a function`);
+    return e;
+  });
+}
+function je(t) {
+  if (t == null) return z;
+  if (typeof t == "function") return t;
+  if (typeof t == "string" && t.length > 0)
+    return (r, e) => {
+      const s = r[t];
+      if (s == null)
+        throw new TypeError(`DataTable row at index ${e} lacks ${t}`);
+      return s;
+    };
+  throw new TypeError("DataTable rowKey must be a function or property name");
+}
+function ee(t) {
+  return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function" && typeof Reflect.get(t, "getFetchState") == "function" && typeof Reflect.get(t, "getError") == "function";
+}
+function Ae(t) {
+  if (!ee(t))
+    throw new TypeError("DataTable query must be an emitter");
+}
+function Le(t) {
+  return t == null || typeof t == "string" || typeof t == "number" ? t : String(t);
+}
+function Fe(t, r) {
+  return t instanceof Error ? t.message : t == null ? r : String(t);
+}
+class te extends b {
+  render() {
+    return this.props.children ?? [];
+  }
+}
+class A extends b {
+  constructor(e) {
+    super(e);
+    o(this, "nodesEmitter");
+    o(this, "selectedKeyEmitter");
+    o(this, "expandedKeysEmitter");
+    o(this, "ownedNodesEmitter");
+    o(this, "ownedSelectedEmitter");
+    o(this, "ownedExpandedEmitter");
+    o(this, "focusedKey", null);
+    o(this, "typeahead", "");
+    o(this, "typeaheadTimer", null);
+    if (ze(e.nodes))
+      this.nodesEmitter = e.nodes, this.ownedNodesEmitter = null;
+    else {
+      const s = e.nodes ?? re(e.children);
+      this.ownedNodesEmitter = new y(s, {
+        owner: this,
+        purpose: "tree nodes"
+      }), this.nodesEmitter = this.ownedNodesEmitter;
+    }
+    this.ownedSelectedEmitter = e.selectedKeyEmitter == null ? new y(null, { owner: this, purpose: "selected tree key" }) : null, this.selectedKeyEmitter = e.selectedKeyEmitter ?? this.ownedSelectedEmitter, this.ownedExpandedEmitter = e.expandedKeysEmitter == null ? new y([], { owner: this, purpose: "expanded tree keys" }) : null, this.expandedKeysEmitter = e.expandedKeysEmitter ?? this.ownedExpandedEmitter;
+  }
+  initialize() {
+    this.reconcile(this.nodesEmitter.get()), this.watch(this.nodesEmitter, this.selectedKeyEmitter, this.expandedKeysEmitter), this.onCleanup(this.nodesEmitter.subscribe(({ value: e }) => this.reconcile(e), {
+      emitCurrent: !1
+    }));
+  }
+  render() {
+    const e = this.nodesEmitter.get();
+    B(e);
+    const s = new Set(this.expandedKeysEmitter.get()), i = _(e, s), n = this.selectedKeyEmitter.get(), a = i.find(({ node: d }) => Object.is(d.id, this.focusedKey)) ?? i.find(({ node: d }) => Object.is(d.id, n)) ?? i[0] ?? null;
+    this.focusedKey = (a == null ? void 0 : a.node.id) ?? null;
+    const l = this.Host;
+    return /* @__PURE__ */ c(l, { className: I(this.props) || null, children: i.length === 0 ? /* @__PURE__ */ c("p", { role: "status", "data-part": "empty", children: "No tree items" }) : /* @__PURE__ */ c("div", { role: "tree", "aria-label": this.props.label, "data-part": "tree", children: i.map((d, h) => {
+      var v, R, M;
+      const { node: u, depth: f, position: p, setSize: g } = d, S = (((v = u.children) == null ? void 0 : v.length) ?? 0) > 0, C = S && s.has(u.id), q = Object.is(u.id, n), k = ((M = (R = this.props).renderItem) == null ? void 0 : M.call(R, u, f)) ?? u.label;
+      return /* @__PURE__ */ w(
+        "div",
+        {
+          role: "treeitem",
+          "data-part": "item",
+          "data-index": h,
+          "data-depth": f,
+          "aria-level": f + 1,
+          "aria-posinset": p,
+          "aria-setsize": g,
+          "aria-expanded": S ? String(C) : null,
+          "aria-selected": String(q),
+          tabIndex: Object.is(u.id, a == null ? void 0 : a.node.id) ? 0 : -1,
+          style: { "--tree-depth": f },
+          onClick: (O) => {
+            if (this.focusedKey = u.id, Ue(O.target) && S) {
+              this.toggleExpanded(u.id), this.focusRow(u.id);
+              return;
+            }
+            this.selectNode(u, O);
+          },
+          onFocus: () => this.focusedKey = u.id,
+          onKeyDown: (O) => this.handleKeyDown(O, h, i),
+          children: [
+            /* @__PURE__ */ c(
+              "span",
+              {
+                "data-part": "expander",
+                "data-expandable": S ? "" : null,
+                "aria-hidden": "true",
+                children: S ? C ? "▾" : "▸" : "•"
+              }
+            ),
+            /* @__PURE__ */ c("span", { "data-part": "label", children: k })
+          ]
+        },
+        u.id
+      );
+    }) }) });
+  }
+  onDestroy() {
+    var e, s, i;
+    this.typeaheadTimer != null && clearTimeout(this.typeaheadTimer), (e = this.ownedNodesEmitter) == null || e.dispose(), (s = this.ownedSelectedEmitter) == null || s.dispose(), (i = this.ownedExpandedEmitter) == null || i.dispose();
+  }
+  reconcile(e) {
+    B(e);
+    const s = new Set(se(e).map(({ node: l }) => l.id)), i = this.selectedKeyEmitter.get();
+    this.ownedSelectedEmitter != null && i != null && !s.has(i) && this.selectedKeyEmitter.set(null, "selected tree item removed");
+    const n = this.expandedKeysEmitter.get(), a = n.filter((l) => s.has(l));
+    this.ownedExpandedEmitter != null && !$e(n, a) && this.expandedKeysEmitter.set(a, "removed tree expansions reconciled"), this.focusedKey != null && !s.has(this.focusedKey) && (this.focusedKey = null);
+  }
+  selectNode(e, s) {
+    this.selectedKeyEmitter.set(e.id, "tree item selected"), W(this.props.onSelect, e, s), this.focusRow(e.id);
+  }
+  toggleExpanded(e) {
+    const s = this.expandedKeysEmitter.get(), i = s.some((n) => Object.is(n, e));
+    this.expandedKeysEmitter.set(
+      i ? s.filter((n) => !Object.is(n, e)) : [...s, e],
+      i ? "tree item collapsed" : "tree item expanded"
+    );
+  }
+  handleKeyDown(e, s, i) {
+    var a, l, d, h;
+    const n = i[s];
+    if (n != null) {
+      if (e.key === "ArrowDown") return this.move(e, (a = i[s + 1]) == null ? void 0 : a.node.id);
+      if (e.key === "ArrowUp") return this.move(e, (l = i[s - 1]) == null ? void 0 : l.node.id);
+      if (e.key === "Home") return this.move(e, (d = i[0]) == null ? void 0 : d.node.id);
+      if (e.key === "End") return this.move(e, (h = i.at(-1)) == null ? void 0 : h.node.id);
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        const u = n.node.children ?? [];
+        if (u.length === 0) return;
+        this.expandedKeysEmitter.get().some((p) => Object.is(p, n.node.id)) ? this.focusRow(u[0].id) : this.toggleExpanded(n.node.id);
+        return;
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault(), this.expandedKeysEmitter.get().some((f) => Object.is(f, n.node.id)) ? this.toggleExpanded(n.node.id) : n.parentId != null && this.focusRow(n.parentId);
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault(), this.selectNode(n.node, e);
+        return;
+      }
+      e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && this.handleTypeahead(e, i, s);
+    }
+  }
+  move(e, s) {
+    s !== void 0 && (e.preventDefault(), this.focusRow(s));
+  }
+  focusRow(e) {
+    var i;
+    this.focusedKey = e;
+    const s = this.dom instanceof Element ? [...this.dom.querySelectorAll('[role="treeitem"]')] : [];
+    for (const n of s) {
+      const a = Number(n.dataset.index), l = _(
+        this.nodesEmitter.get(),
+        new Set(this.expandedKeysEmitter.get())
+      ), d = Object.is((i = l[a]) == null ? void 0 : i.node.id, e);
+      n.tabIndex = d ? 0 : -1, d && n.focus();
+    }
+  }
+  handleTypeahead(e, s, i) {
+    e.preventDefault(), this.typeaheadTimer != null && clearTimeout(this.typeaheadTimer), this.typeahead += e.key.toLocaleLowerCase(), this.typeaheadTimer = setTimeout(() => {
+      this.typeahead = "", this.typeaheadTimer = null;
+    }, 650);
+    const a = [...s.slice(i + 1), ...s.slice(0, i + 1)].find(({ node: l }) => He(l).toLocaleLowerCase().startsWith(this.typeahead));
+    a != null && this.focusRow(a.node.id);
+  }
+}
+o(A, "dependencies", [te]), o(A, "hostName", "tree-view"), o(A, "standaloneHostName", "tree-view"), o(A, "css", x`
+        & {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            overflow: auto;
+        }
+
+        & > [data-part="tree"] {
+            display: grid;
+            align-content: start;
+        }
+
+        & [data-part="item"] {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.35rem;
+            min-width: 0;
+            padding: 0.38rem 0.5rem;
+            padding-inline-start: calc(0.5rem + var(--tree-depth) * 1.1rem);
+            cursor: default;
+            user-select: none;
+        }
+
+        & [data-part="item"]:hover {
+            background: var(--button-background-hover);
+        }
+
+        & [data-part="item"]:focus-visible {
+            outline: 2px solid var(--ui-accent-color);
+            outline-offset: -2px;
+        }
+
+        & [data-part="item"][aria-selected="true"] {
+            color: var(--toggle-selected-text);
+            background: var(--toggle-selected-bg);
+        }
+
+        & [data-part="expander"] {
+            flex: 0 0 1rem;
+            text-align: center;
+        }
+
+        & [data-part="expander"][data-expandable] {
+            cursor: pointer;
+        }
+
+        & [data-part="label"] {
+            min-width: 0;
+            overflow-wrap: anywhere;
+        }
+
+        & > [data-part="empty"] {
+            margin: 0;
+            padding: var(--ui-padding, 0.75rem);
+        }
+
+        @media (forced-colors: active) {
+            & [data-part="item"][aria-selected="true"] {
+                outline: 2px solid Highlight;
+                forced-color-adjust: auto;
+            }
+        }
+    `);
+function re(t) {
+  return (Array.isArray(t) ? t : t == null ? [] : [t]).filter((e) => U(e) && e.type === te).map((e) => {
+    if (!U(e)) throw new TypeError("TreeView children must be TreeItem nodes");
+    const s = e.props;
+    return {
+      id: s.id,
+      label: s.label,
+      ...s.textValue == null ? {} : { textValue: s.textValue },
+      ...s.value === void 0 ? {} : { value: s.value },
+      children: re(s.children)
+    };
+  });
+}
+function _(t, r) {
+  const e = [], s = (i, n, a) => {
+    i.forEach((l, d) => {
+      var h;
+      e.push({ node: l, depth: n, parentId: a, position: d + 1, setSize: i.length }), (((h = l.children) == null ? void 0 : h.length) ?? 0) > 0 && r.has(l.id) && s(l.children ?? [], n + 1, l.id);
+    });
+  };
+  return s(t, 0, null), e;
+}
+function se(t) {
+  const r = /* @__PURE__ */ new Set(), e = [], s = (i, n, a) => {
+    i.forEach((l, d) => {
+      if (r.has(l.id)) throw new Error(`Duplicate tree item id: ${String(l.id)}`);
+      r.add(l.id), e.push({ node: l, depth: n, parentId: a, position: d + 1, setSize: i.length }), s(l.children ?? [], n + 1, l.id);
+    });
+  };
+  return s(t, 0, null), e;
+}
+function B(t) {
+  if (!Array.isArray(t)) throw new TypeError("TreeView nodes must be an array");
+  for (const { node: r } of se(t)) {
+    if (r == null || typeof r != "object" || r.id == null)
+      throw new TypeError("Each tree node requires an id");
+    if (!Array.isArray(r.children ?? []))
+      throw new TypeError(`Tree node ${String(r.id)} children must be an array`);
+  }
+}
+function He(t) {
+  return t.textValue != null ? t.textValue : typeof t.label == "string" || typeof t.label == "number" ? String(t.label) : String(t.id);
+}
+function $e(t, r) {
+  return t.length === r.length && t.every((e, s) => Object.is(e, r[s]));
+}
+function ze(t) {
+  return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
+}
+function Ue(t) {
+  return t instanceof Element && t.closest('[data-part="expander"]') != null;
+}
+class G extends b {
+  constructor(e) {
+    super(e);
+    o(this, "openEmitter");
+    o(this, "dialogId");
+    o(this, "titleId");
+    o(this, "descriptionId");
+    o(this, "dialogElement", null);
+    o(this, "restoreFocusTo", null);
+    o(this, "synchronizedOpen", !1);
+    this.openEmitter = de(this, e, !1, "dialog open state"), this.dialogId = ce("dialog", e.id), this.titleId = `${this.dialogId}-title`, this.descriptionId = `${this.dialogId}-description`;
+  }
+  initialize() {
+    this.watch(this.openEmitter);
+  }
+  render() {
+    const {
+      title: e,
+      description: s,
+      actions: i,
+      closeLabel: n = "Close",
+      showCloseButton: a = !0,
+      children: l = []
+    } = this.props;
+    return /* @__PURE__ */ w(
+      "dialog",
+      {
+        id: this.dialogId,
+        className: I(this.props) || void 0,
+        "data-fray-component": "dialog",
+        "aria-labelledby": this.titleId,
+        "aria-describedby": s == null ? null : this.descriptionId,
+        "aria-modal": "true",
+        ref: (d) => this.dialogElement = d,
+        children: [
+          /* @__PURE__ */ c("header", { "data-part": "header", children: /* @__PURE__ */ c("h2", { id: this.titleId, children: e }) }),
+          s == null ? null : /* @__PURE__ */ c("p", { id: this.descriptionId, "data-part": "description", children: s }),
+          /* @__PURE__ */ c("div", { "data-part": "content", children: l }),
+          i == null && !a ? null : /* @__PURE__ */ w("footer", { "data-part": "actions", children: [
+            i,
+            a ? /* @__PURE__ */ c(
+              Q,
+              {
+                label: n,
+                onClick: () => this.requestClose()
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+  afterMount() {
+    const e = this.dialogElement;
+    e != null && (this.listen(e, "cancel", (s) => {
+      s.preventDefault(), this.requestClose();
+    }), this.listen(e, "close", () => {
+      this.openEmitter.get() && this.openEmitter.set(!1, "native dialog closed"), this.finishClose();
+    }), this.syncOpenState());
+  }
+  afterUpdate() {
+    this.syncOpenState();
+  }
+  close() {
+    this.requestClose();
+  }
+  onDestroy() {
+    const e = this.dialogElement;
+    (e == null ? void 0 : e.open) === !0 && typeof e.close == "function" && e.close(), this.finishClose(), this.dialogElement = null;
+  }
+  requestClose() {
+    this.openEmitter.get() && this.openEmitter.set(!1, "dialog close requested");
+  }
+  syncOpenState() {
+    const e = this.dialogElement;
+    if (e == null) return;
+    const s = this.openEmitter.get();
+    if (s && !this.synchronizedOpen) {
+      const i = document.activeElement;
+      this.restoreFocusTo = i instanceof HTMLElement ? i : null, Ve(e), this.synchronizedOpen = !0, Qe(e, this.props.initialFocusRef);
+      return;
+    }
+    !s && this.synchronizedOpen && (e.open && typeof e.close == "function" ? e.close() : e.removeAttribute("open"), this.finishClose());
+  }
+  finishClose() {
+    if (!this.synchronizedOpen && this.restoreFocusTo == null) return;
+    this.synchronizedOpen = !1;
+    const e = this.restoreFocusTo;
+    this.restoreFocusTo = null, (e == null ? void 0 : e.isConnected) === !0 && e.focus(), W(this.props.onClose);
+  }
+}
+o(G, "dependencies", [Q]), o(G, "css", x`
+        dialog[data-fray-component="dialog"] {
+            width: min(38rem, calc(100vw - 2rem));
+            max-height: min(42rem, calc(100dvh - 2rem));
+            padding: 0;
+            color: var(--ui-text-color);
+            background: var(--panel-bg);
+            border: 1px solid var(--ui-border-color);
+            border-radius: var(--panel-radius, var(--ui-border-radius));
+            box-shadow: 0 1.25rem 4rem rgb(0 0 0 / 35%);
+        }
+
+        dialog[data-fray-component="dialog"]::backdrop {
+            background: rgb(0 0 0 / 55%);
+        }
+
+        dialog[data-fray-component="dialog"] > [data-part] {
+            padding: var(--panel-padding, 0.75rem);
+        }
+
+        dialog[data-fray-component="dialog"] > [data-part="header"] {
+            border-block-end: 1px solid var(--ui-border-color);
+        }
+
+        dialog[data-fray-component="dialog"] > [data-part="header"] h2,
+        dialog[data-fray-component="dialog"] > [data-part="description"] {
+            margin: 0;
+        }
+
+        dialog[data-fray-component="dialog"] > [data-part="content"] {
+            overflow: auto;
+        }
+
+        dialog[data-fray-component="dialog"] > [data-part="actions"] {
+            display: flex;
+            justify-content: flex-end;
+            gap: var(--spacing-small, 0.5rem);
+            border-block-start: 1px solid var(--ui-border-color);
+        }
+
+        @media (prefers-reduced-motion: no-preference) {
+            dialog[data-fray-component="dialog"][open] {
+                animation: fray-dialog-enter 120ms ease-out;
+            }
+        }
+
+        @keyframes fray-dialog-enter {
+            from {
+                transform: translateY(0.4rem);
+            }
+        }
+
+        @media (forced-colors: active) {
+            dialog[data-fray-component="dialog"] {
+                border: 2px solid CanvasText;
+            }
+        }
+    `);
+function Ve(t) {
+  if (!t.open) {
+    if (typeof t.showModal == "function") {
+      t.showModal();
+      return;
+    }
+    t.setAttribute("open", "");
+  }
+}
+function Qe(t, r) {
+  const s = (r == null || typeof r == "function" ? null : r.current) ?? t.querySelector(
+    '[autofocus], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  s == null || s.focus();
+}
+export {
+  J as BaseSelectionHandler,
+  j as DataTable,
+  G as Dialog,
+  T as FilterPanel,
+  D as ListView,
+  pe as MultiSelectionHandler,
+  E as Placeholder,
+  ue as SingleSelectionHandler,
+  H as TableHeader,
+  N as TableHeaderCell,
+  te as TreeItem,
+  A as TreeView,
+  Ce as applyLocalTableState,
+  Z as assertSort,
+  Y as createSelectionHandler,
+  z as defaultItemKey,
+  Ke as serializeTableQuery
+};
+//# sourceMappingURL=experimental.js.map