@sylwellsoftware/fray 0.2.0 → 0.3.0

package/dist/experimental.js

@@ -1,1399 +0,0 @@
-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 w, j as c, c as x, a as b, i as U } from "./jsx-dev-runtime-DukiDpV9.js";
-import { Emitter as g, 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-CqDGmkBt.js";
-class E extends w {
-  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 g([], { 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 w {
-  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");
-    ye(e.items) ? (this.itemsEmitter = e.items, this.ownedItemsEmitter = null) : (this.ownedItemsEmitter = new g(e.items ?? [], {
-      owner: this,
-      purpose: "list items"
-    }), this.itemsEmitter = this.ownedItemsEmitter), this.items$ = this.itemsEmitter, this.ownedSelectedItemsEmitter = e.selectedItemsEmitter == null ? new g([], { 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__ */ b(
-      l,
-      {
-        className: I(this.props) || null,
-        children: [
-          s === m.Error ? /* @__PURE__ */ c("p", { role: "alert", "data-part": "error", children: we(i, "Unable to load items") }) : null,
-          n && e.length === 0 ? /* @__PURE__ */ b("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) : ge(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 ye(t) {
-  return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
-}
-function ge(t) {
-  if (t != null && (typeof t == "object" || typeof t == "function")) {
-    const r = Reflect.get(t, "label");
-    if (be(r)) return r;
-  }
-  return String(t);
-}
-function be(t) {
-  return t == null || typeof t == "string" || typeof t == "number";
-}
-function we(t, r) {
-  return t instanceof Error ? t.message : t == null ? r : String(t);
-}
-class T extends w {
-  constructor(e = {}) {
-    super(e);
-    o(this, "optionsEmitter");
-    this.optionsEmitter = ve(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: ke(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 y = X(p), S = Ie(p), C = n.get(y) ?? l;
-          return /* @__PURE__ */ c(
-            Ee,
-            {
-              label: S,
-              defaultValue: C,
-              symbols: a,
-              onChange: (q, v) => {
-                var R, M;
-                v == null || v.stopPropagation();
-                const k = new Map(n);
-                q === K.Neutral ? k.delete(y) : k.set(y, q), (M = (R = this.props).onChange) == null || M.call(R, k, v);
-              }
-            },
-            `${String(y)}:${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 ve(t) {
-  return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
-}
-function ke(t, r) {
-  return t instanceof Error ? t.message : t == null ? r : String(t);
-}
-class N extends w {
-  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__ */ b(
-      "th",
-      {
-        scope: "col",
-        "data-fray-component": "table-header-cell",
-        "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : "none",
-        children: [
-          this.props.sortable ? /* @__PURE__ */ b(
-            "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;
-            color: var(
-                --fray-table-header-color,
-                var(--fray-section-header-color, var(--fray-header-color))
-            );
-            background: var(
-                --fray-table-header-background,
-                var(--fray-section-header-background, var(--fray-header-background))
-            );
-            border-block-end: var(--fray-section-header-border, var(--fray-header-border));
-            box-shadow: var(--fray-section-header-shadow, var(--fray-header-shadow));
-        }
-
-        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;
-            color: inherit;
-            background: var(
-                --fray-table-header-button-background,
-                var(--fray-button-background)
-            );
-        }
-
-        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 w {
-  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 w {
-  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 g(null, {
-      owner: this,
-      purpose: "table sort"
-    }), this.filtersEmitter = new g({}, {
-      owner: this,
-      purpose: "table filters"
-    }), this.ownedSelectedItemsEmitter = e.selectedItemsEmitter == null ? new g([], { 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 g(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, y) => this.rowKey(p, y))
-    ), l = this.Host;
-    return /* @__PURE__ */ b(
-      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__ */ b("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, y;
-                  return (y = (p = this.query) == null ? void 0 : p.retry) == null ? void 0 : y.call(p, "table retry");
-                },
-                children: "Retry"
-              }
-            ) : null
-          ] }) : null,
-          /* @__PURE__ */ b("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, y) => this.renderRow(p, y, 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:nth-child(odd) {
-            background: var(--fray-table-row-background, transparent);
-        }
-
-        & tbody tr:nth-child(even) {
-            background: var(--fray-table-row-alt-background, transparent);
-        }
-
-        & tbody tr[data-fray-selectable-row]:hover {
-            background: var(--fray-row-hover-background, var(--button-background-hover));
-        }
-
-        & tbody tr[data-fray-selectable-row]:focus-visible {
-            outline: 2px solid var(--fray-color-focus, var(--ui-accent-color));
-            outline-offset: -2px;
-        }
-
-        & tbody tr[data-fray-selectable-row][aria-selected="true"] {
-            color: var(--fray-selection-color, var(--toggle-selected-text));
-            background: var(--fray-selection-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 w {
-  render() {
-    return this.props.children ?? [];
-  }
-}
-class A extends w {
-  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 g(s, {
-        owner: this,
-        purpose: "tree nodes"
-      }), this.nodesEmitter = this.ownedNodesEmitter;
-    }
-    this.ownedSelectedEmitter = e.selectedKeyEmitter == null ? new g(null, { owner: this, purpose: "selected tree key" }) : null, this.selectedKeyEmitter = e.selectedKeyEmitter ?? this.ownedSelectedEmitter, this.ownedExpandedEmitter = e.expandedKeysEmitter == null ? new g([], { 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 k, R, M;
-      const { node: u, depth: f, position: p, setSize: y } = d, S = (((k = u.children) == null ? void 0 : k.length) ?? 0) > 0, C = S && s.has(u.id), q = Object.is(u.id, n), v = ((M = (R = this.props).renderItem) == null ? void 0 : M.call(R, u, f)) ?? u.label;
-      return /* @__PURE__ */ b(
-        "div",
-        {
-          role: "treeitem",
-          "data-part": "item",
-          "data-index": h,
-          "data-depth": f,
-          "aria-level": f + 1,
-          "aria-posinset": p,
-          "aria-setsize": y,
-          "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: v })
-          ]
-        },
-        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 w {
-  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__ */ b(
-      "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__ */ b("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(--fray-panel-color, var(--ui-text-color));
-            background: var(--fray-panel-background, var(--panel-bg));
-            border: var(--fray-panel-border, var(--panel-border));
-            border-radius: var(--fray-panel-radius, var(--panel-radius));
-            box-shadow: var(--fray-dialog-shadow, var(--fray-panel-shadow));
-        }
-
-        dialog[data-fray-component="dialog"]::backdrop {
-            background: var(--fray-dialog-backdrop-background);
-        }
-
-        dialog[data-fray-component="dialog"] > [data-part] {
-            padding: var(--panel-padding, 0.75rem);
-        }
-
-        dialog[data-fray-component="dialog"] > [data-part="header"] {
-            color: var(
-                --fray-dialog-header-color,
-                var(--fray-section-header-color, var(--fray-header-color))
-            );
-            background: var(
-                --fray-dialog-header-background,
-                var(--fray-section-header-background, var(--fray-header-background))
-            );
-            border-block-end: var(
-                --fray-section-header-border,
-                var(--fray-header-border)
-            );
-        }
-
-        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