@scattered-light/loomiere-base-ui 0.6.1 → 0.7.1

package/dist/custom/collection/index.js

@@ -0,0 +1,1489 @@
+import { Input, Tabs, Checkbox, Menu } from '../../chunk-Y2CPBMFJ.js';
+import { useUnderWidth, Button, cn, Select, Combobox, isEmptyValue, formatPercent, formatNumber, sumMoney, fractionDigitsOf, formatMoney, minorToDecimal, EmptyState, selectableIds, pageFlat, hiddenSelectedCount, nextSort, searchMatches, treeVisibleIds, isoDate, toMinor, comparePresent, collatorFor, formatDate, moneySearchForms, searchHaystack } from '../../chunk-M7KJASGK.js';
+export { balanceOf, compareDecimal, countFacets, formatDate, formatMoney, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, selectableIds, sortRows, sumMoney, toMinor, treeVisibleIds } from '../../chunk-M7KJASGK.js';
+import * as React4 from 'react';
+import { useMemo, useRef, useState, useDeferredValue, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { tableFeatures, columnVisibilityFeature, columnOrderingFeature, rowExpandingFeature, columnGroupingFeature, rowSelectionFeature, rowPaginationFeature, columnFacetingFeature, globalFilteringFeature, columnFilteringFeature, rowSortingFeature, createFacetedUniqueValues, createFacetedRowModel, createPaginatedRowModel, createExpandedRowModel, createGroupedRowModel, createFilteredRowModel, createSortedRowModel, useTable } from '@tanstack/react-table';
+
+// src/custom/collection/columns.ts
+function headerLabel(column) {
+  return typeof column.header === "string" ? column.header : column.header.label;
+}
+function defineColumns(columns) {
+  if (process.env.NODE_ENV !== "production") {
+    const headers = columns.filter((column) => column.rowHeader);
+    if (headers.length !== 1) {
+      console.warn(`A collection should have exactly one rowHeader column so each row has a name. This one has ${headers.length}.`);
+    }
+    const tabs = columns.filter((column) => column.filter?.kind === "tabs");
+    if (tabs.length > 1) console.warn("Only one column can use a tabs filter. The toolbar shows the first.");
+  }
+  return columns;
+}
+function defaultAlign(column) {
+  if (column.align) return column.align;
+  const kind = column.kind ?? "text";
+  if (kind === "number" || kind === "money" || kind === "percent") return "end";
+  return "start";
+}
+function listSlot(column, columns) {
+  if (column.list) return column.list;
+  if (column.rowHeader) return "primary";
+  if (column.kind === "money") return "amount";
+  if (column.filter?.kind === "tabs") return "status";
+  if (column.cell && column.kind == null && column.id.toLowerCase().includes("status")) return "status";
+  const primary = columns.find((item) => item.rowHeader) ?? columns[0];
+  const secondary = columns.find((item) => item !== primary && item.searchable && (item.kind ?? "text") === "text" && !item.rowHeader);
+  if (column === secondary) return "secondary";
+  const meta = columns.filter((item) => item !== primary && item !== secondary && item.kind !== "money" && item.filter?.kind !== "tabs");
+  if (meta.slice(0, 3).includes(column)) return "meta";
+  return "hidden";
+}
+function currencyOf(column, row) {
+  if (typeof column.currency === "function") return column.currency(row);
+  return column.currency ?? "USD";
+}
+
+// src/custom/collection/format.ts
+function rowSearchText(row, columns, locale) {
+  const parts = [];
+  for (const column of columns) {
+    if (column.searchable == null || column.searchable === false) continue;
+    const value = column.value(row);
+    if (typeof column.searchable === "function") {
+      const extra = column.searchable(row);
+      parts.push(...Array.isArray(extra) ? extra : [extra]);
+    }
+    if (isEmptyValue(value)) continue;
+    if (column.kind === "money") {
+      parts.push(...moneySearchForms(value, currencyOf(column, row), locale, column.fractionDigits));
+    } else if (column.kind === "number" || column.kind === "percent") {
+      parts.push(String(value), formatNumber(value, locale, column.fractionDigits));
+    } else if (column.kind === "date") {
+      parts.push(String(value), formatDate(value, locale, column.dateFormat), isoDate(value));
+    } else {
+      parts.push(String(value));
+    }
+  }
+  return searchHaystack(parts);
+}
+function formattedValue(column, row, locale, hideCurrency = false) {
+  const value = column.value(row);
+  if (isEmptyValue(value)) return "";
+  if (column.kind === "money") {
+    const currency = currencyOf(column, row);
+    if (hideCurrency) {
+      const digits = column.fractionDigits ?? fractionDigitsOf(currency);
+      return formatNumber(value, locale, digits);
+    }
+    return formatMoney(value, {
+      locale,
+      currency,
+      fractionDigits: column.fractionDigits,
+      negative: column.negative
+    });
+  }
+  if (column.kind === "number") return formatNumber(value, locale, column.fractionDigits);
+  if (column.kind === "percent") return formatPercent(value, locale);
+  if (column.kind === "date") return formatDate(value, locale, column.dateFormat);
+  if (column.kind === "boolean") return value ? "Yes" : "No";
+  return String(value);
+}
+function columnSharesCurrency(column, rows) {
+  if (column.kind !== "money") return null;
+  const currencies = new Set(rows.map((row) => currencyOf(column, row)));
+  return currencies.size === 1 ? [...currencies][0] : null;
+}
+function displayHeader(column, rows) {
+  const label = headerLabel(column);
+  if (!column.showCurrencyInHeader) return label;
+  const currency = columnSharesCurrency(column, rows);
+  return currency ? `${label} (${currency})` : label;
+}
+function hideCurrencyInCells(column, rows) {
+  return Boolean(column.showCurrencyInHeader && columnSharesCurrency(column, rows));
+}
+function totalText(column, rows, locale) {
+  if (!column.total) return "";
+  if (column.total === "count") return String(rows.length);
+  if (typeof column.total === "function") return "";
+  if (column.kind === "number" || column.kind === "percent") {
+    let sum2 = 0;
+    for (const row of rows) {
+      const value = column.value(row);
+      if (isEmptyValue(value)) continue;
+      const numeric = typeof value === "number" ? value : Number(String(value).replace(/,/g, ""));
+      if (Number.isFinite(numeric)) sum2 += numeric;
+    }
+    return column.kind === "percent" ? formatPercent(sum2, locale) : formatNumber(sum2, locale, column.fractionDigits);
+  }
+  const values = rows.map((row) => ({ amount: column.value(row), currency: currencyOf(column, row) }));
+  const sum = sumMoney(values, column.fractionDigits);
+  if (sum.mixed) {
+    if (process.env.NODE_ENV !== "production") console.warn(`Column "${column.id}" has more than one currency, so it has no single total.`);
+    return "Mixed currencies";
+  }
+  const currency = sum.currency ?? (typeof column.currency === "string" ? column.currency : "USD");
+  const digits = column.fractionDigits ?? fractionDigitsOf(currency);
+  return formatMoney(minorToDecimal(sum.minor ?? 0n, digits), {
+    locale,
+    currency,
+    fractionDigits: digits,
+    negative: column.negative
+  });
+}
+function rowHeaderText(collection, row) {
+  const column = collection.columns.find((item) => item.id === collection.rowHeaderId);
+  if (!column) return collection.getRowId(row);
+  const value = column.value(row);
+  return value == null || value === "" ? "None" : String(value);
+}
+function levelName(collection, tableRow, text) {
+  if (!tableRow.depth) return text;
+  const parent = tableRow.getParentRow?.();
+  const parentText = parent ? rowHeaderText(collection, parent.original) : "";
+  return parentText ? `${text}, level ${tableRow.depth + 1}, in ${parentText}` : `${text}, level ${tableRow.depth + 1}`;
+}
+function CellValue({ column, row, locale, rows, view, selected, active }) {
+  const ctx = { view, selected, active };
+  if (column.cell) return /* @__PURE__ */ jsx(Fragment, { children: column.cell(row, ctx) });
+  const value = column.value(row);
+  if (value == null || value === "") {
+    return /* @__PURE__ */ jsxs("span", { "data-subtle": "", children: [
+      "\u2014",
+      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: " None" })
+    ] });
+  }
+  if (column.kind === "boolean") {
+    return /* @__PURE__ */ jsxs("span", { children: [
+      value ? /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "check" }) : null,
+      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: value ? "Yes" : "No" })
+    ] });
+  }
+  if (column.kind === "date") {
+    const text = formattedValue(column, row, locale);
+    return /* @__PURE__ */ jsx("time", { dateTime: isoDate(value), children: text });
+  }
+  const negative = column.kind === "money" && (toMinor(value, column.fractionDigits ?? 2) ?? 0n) < 0n;
+  return /* @__PURE__ */ jsx("span", { "data-negative": negative ? "" : void 0, children: formattedValue(column, row, locale, hideCurrencyInCells(column, rows)) });
+}
+function SelectBox({ checked, indeterminate, label, onChange }) {
+  return /* @__PURE__ */ jsx(
+    Checkbox.Root,
+    {
+      checked,
+      indeterminate,
+      onCheckedChange: (value) => onChange(value === true),
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined CheckboxIcon", "aria-hidden": "true", children: indeterminate ? "remove" : "check" }) })
+    }
+  );
+}
+function RowMenu({ label, actions }) {
+  return /* @__PURE__ */ jsxs(Menu.Root, { children: [
+    /* @__PURE__ */ jsx(Menu.Trigger, { className: "Button", "data-emphasis": "quiet", "data-icon-only": "", "aria-label": label, children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "more_horiz" }) }),
+    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Popup, { children: actions.map((action) => /* @__PURE__ */ jsx(Menu.Item, { disabled: action.disabled, "data-color": action.tone === "danger" ? "error" : void 0, onClick: action.onSelect, children: action.label }, action.label)) }) }) })
+  ] });
+}
+function useRovingRows(count, enabled) {
+  const [cursor, setCursor] = React4.useState(0);
+  const refs = React4.useRef([]);
+  React4.useEffect(() => {
+    if (cursor > count - 1) setCursor(Math.max(0, count - 1));
+  }, [count, cursor]);
+  const focusAt = (index) => {
+    const next = Math.min(Math.max(0, index), Math.max(0, count - 1));
+    setCursor(next);
+    refs.current[next]?.focus();
+  };
+  const onKeyDown = (event, index, toggle, activate, tree) => {
+    const target = event.target;
+    if (target.closest('input, textarea, select, [role="menu"], [role="listbox"]')) return;
+    const rtl = Boolean(target.closest('[dir="rtl"]'));
+    const openKey = rtl ? "ArrowLeft" : "ArrowRight";
+    const closeKey = rtl ? "ArrowRight" : "ArrowLeft";
+    if (tree && event.key === openKey && !tree.expanded) {
+      event.preventDefault();
+      tree.toggle();
+      return;
+    }
+    if (tree && event.key === closeKey && tree.expanded) {
+      event.preventDefault();
+      tree.toggle();
+      return;
+    }
+    if (!enabled) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusAt(index + 1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusAt(index - 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusAt(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusAt(count - 1);
+    } else if (event.key === " " && toggle) {
+      event.preventDefault();
+      toggle();
+    } else if (event.key === "Enter" && !(event.target instanceof HTMLAnchorElement) && activate) {
+      event.preventDefault();
+      activate();
+    }
+  };
+  return { cursor, refs, focusAt, onKeyDown };
+}
+function interactiveTarget(target) {
+  return target instanceof Element && Boolean(target.closest('a, button, input, textarea, select, label, [role="menu"], [role="menuitem"], [role="listbox"], [role="checkbox"], [role="option"], [data-no-activate]'));
+}
+function selectingText() {
+  const selection = typeof window === "undefined" ? null : window.getSelection();
+  return Boolean(selection && !selection.isCollapsed);
+}
+function EmptyRow({ colSpan, filtered, onClear, empty, title = "No results", description = "Nothing matches the current search or filters.", clearLabel = "Clear filters", emptyTitle = "Nothing here yet" }) {
+  return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { "data-empty": "", colSpan, children: filtered ? /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      size: "compact",
+      kind: "no-results",
+      title,
+      description,
+      actions: /* @__PURE__ */ jsx(Button, { emphasis: "standard", onClick: onClear, children: clearLabel })
+    }
+  ) : empty ?? /* @__PURE__ */ jsx(EmptyState, { size: "compact", kind: "start", title: emptyTitle }) }) });
+}
+function LoadingNote({ text }) {
+  const [live, setLive] = React4.useState("");
+  React4.useEffect(() => {
+    const frame = requestAnimationFrame(() => setLive(text));
+    return () => cancelAnimationFrame(frame);
+  }, [text]);
+  return /* @__PURE__ */ jsx("span", { className: "CollectionStatus visually-hidden", role: "status", children: live });
+}
+function alignOf(column) {
+  const align = defaultAlign(column);
+  return align === "start" ? void 0 : align;
+}
+function DataList({
+  collection,
+  label,
+  onRowActivate,
+  getRowHref,
+  activeRowId,
+  rowActions,
+  empty,
+  loading,
+  rowNavigation,
+  size = "sm",
+  className,
+  variant = "rows",
+  totals = "summary",
+  renderItemExtra
+}) {
+  const leaves = collection.pageEntries.filter((entry) => entry.kind === "leaf");
+  const navigate = rowNavigation ?? Boolean(onRowActivate || getRowHref);
+  const roving = useRovingRows(leaves.length, navigate);
+  React4.useEffect(() => {
+    collection.registerRowFocus(() => roving.focusAt(0));
+    return () => collection.registerRowFocus(null);
+  }, [collection, roving]);
+  React4.useLayoutEffect(() => {
+    if (!collection.focusAfterPage.current) return;
+    collection.focusAfterPage.current = false;
+    roving.focusAt(0);
+  }, [collection, collection.page, roving]);
+  const slots = slotMap(collection);
+  const filteredEmpty = collection.totalCount > 0 && collection.filteredCount === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("DataList", className),
+      "data-view": "list",
+      "data-size": size,
+      "data-variant": variant,
+      "data-filtered": collection.isFiltered ? "" : void 0,
+      "data-selecting": collection.selection.length ? "" : void 0,
+      "data-loading": loading ? "" : void 0,
+      "data-grouped": collection.grouping ? "" : void 0,
+      "aria-busy": loading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("ul", { role: "list", "aria-label": label, children: [
+          loading && collection.totalCount === 0 ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(LoadingNote, { text: collection.messages.loading }) }) : null,
+          !loading || collection.totalCount > 0 ? leaves.length === 0 ? /* @__PURE__ */ jsx("li", { children: filteredEmpty || collection.isFiltered ? /* @__PURE__ */ jsx(EmptyState, { size: "compact", kind: "no-results", title: collection.messages.noResults, description: collection.messages.noResultsDescription, actions: /* @__PURE__ */ jsx(Button, { emphasis: "standard", onClick: collection.clearFilters, children: collection.messages.clearFilters }) }) : empty ?? /* @__PURE__ */ jsx(EmptyState, { size: "compact", kind: "start", title: collection.messages.nothingHere }) }) : listItems({ collection, slots, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions, renderItemExtra }) : null
+        ] }),
+        totals === "summary" && Object.keys(collection.totals).length ? /* @__PURE__ */ jsxs("p", { className: "DataListSummary", children: [
+          collection.filteredCount,
+          " rows",
+          Object.entries(collection.totals).map(([id, text]) => /* @__PURE__ */ jsxs("span", { children: [
+            " \xB7 Total ",
+            text
+          ] }, id))
+        ] }) : null
+      ]
+    }
+  );
+}
+function listItems(args) {
+  const nodes = [];
+  let leafIndex = 0;
+  for (const entry of args.collection.pageEntries) {
+    if (entry.kind === "group") {
+      const row = entry.row;
+      const children = [];
+      const rest = args.collection.pageEntries.slice(args.collection.pageEntries.indexOf(entry) + 1);
+      for (const child of rest) {
+        if (child.kind === "group") break;
+        children.push(/* @__PURE__ */ jsx(ListRow, { entry: child, index: leafIndex, ...args }, child.row.id));
+        leafIndex += 1;
+      }
+      const selectable = (row.subRows ?? []).filter((child) => args.collection.canSelect?.(child.original));
+      const subtotal = args.slots.amount ? totalText(args.slots.amount, (row.subRows ?? []).map((child) => child.original), args.collection.locale) : "";
+      nodes.push(
+        /* @__PURE__ */ jsxs("li", { className: "DataListGroup", children: [
+          /* @__PURE__ */ jsxs("div", { className: "DataListGroupHeader", children: [
+            /* @__PURE__ */ jsxs("button", { type: "button", className: "CollectionGroupButton", "aria-expanded": row.getIsExpanded(), onClick: () => row.toggleExpanded(), children: [
+              /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: row.getIsExpanded() ? "expand_more" : "chevron_right" }),
+              String(row.groupingValue ?? ""),
+              entry.continued ? " (continued)" : "",
+              " \xB7 ",
+              selectable.length || (row.subRows?.length ?? 0)
+            ] }),
+            selectable.length && args.collection.canSelect ? /* @__PURE__ */ jsx(SelectBox, { checked: row.getIsAllSubRowsSelected?.() ?? false, indeterminate: Boolean(row.getIsSomeSelected?.() && !row.getIsAllSubRowsSelected?.()), label: `Select ${selectable.length} rows in ${row.groupingValue ?? "group"}`, onChange: () => row.toggleSelected?.() }) : null,
+            subtotal ? /* @__PURE__ */ jsx("span", { children: subtotal }) : null
+          ] }),
+          row.getIsExpanded() ? /* @__PURE__ */ jsx("ul", { role: "list", children }) : null
+        ] }, `g-${row.id}`)
+      );
+      continue;
+    }
+    if (entry.row.getParentRow?.()?.getIsGrouped?.()) continue;
+    nodes.push(
+      /* @__PURE__ */ jsx(ListRow, { entry, index: leafIndex, ...args }, entry.row.id)
+    );
+    leafIndex += 1;
+  }
+  return nodes;
+}
+function ListRow({ entry, index, collection, slots, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions, renderItemExtra }) {
+  const original = entry.row.original;
+  const selected = collection.selectionSet.has(entry.row.id);
+  const active = activeRowId === entry.row.id;
+  const name = rowHeaderText(collection, original);
+  const named = levelName(collection, entry.row, name);
+  const canSelect = collection.canSelect?.(original) ?? false;
+  const href = getRowHref?.(original);
+  const activate = () => onRowActivate?.(original);
+  const tabIndex = navigate ? roving.cursor === index ? 0 : -1 : void 0;
+  const onKeyDown = (event) => roving.onKeyDown(event, index, canSelect ? () => entry.row.toggleSelected?.(!selected) : void 0, href ? void 0 : activate);
+  const primary = href ? /* @__PURE__ */ jsx("a", { ref: (node) => {
+    roving.refs.current[index] = node;
+  }, href, tabIndex, "aria-label": named === name ? void 0 : named, onKeyDown, children: name }) : /* @__PURE__ */ jsx("button", { type: "button", className: "CollectionRowButton", ref: (node) => {
+    roving.refs.current[index] = node;
+  }, tabIndex, "aria-label": named === name ? void 0 : named, onKeyDown, onClick: () => {
+    roving.focusAt(index);
+    activate();
+  }, children: name });
+  return (
+    // The row is not a control. The primary button is. The checkbox carries selection.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+    /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "data-selected": selected ? "" : void 0,
+        "aria-current": active ? "true" : void 0,
+        onClick: (event) => {
+          if (interactiveTarget(event.target) || selectingText()) return;
+          if (event.target instanceof Element && event.target.closest(".DataListExtra, [data-actions]")) return;
+          if (href && !onRowActivate) {
+            event.currentTarget.querySelector("a")?.click();
+            return;
+          }
+          activate();
+        },
+        children: [
+          collection.canSelect ? canSelect ? /* @__PURE__ */ jsx(SelectBox, { checked: selected, label: `Select ${named}`, onChange: (checked) => entry.row.toggleSelected?.(checked) }) : /* @__PURE__ */ jsx("span", {}) : null,
+          /* @__PURE__ */ jsxs("div", { className: "DataListBody", children: [
+            /* @__PURE__ */ jsx("div", { className: "DataListPrimary", children: slots.primary ? primary : name }),
+            slots.secondary ? /* @__PURE__ */ jsx("div", { className: "DataListSecondary", "data-subtle": "", children: /* @__PURE__ */ jsx(CellValue, { column: slots.secondary, row: original, locale: collection.locale, rows: collection.filteredRows, view: "list", selected, active }) }) : null,
+            slots.meta.length ? /* @__PURE__ */ jsx("div", { className: "DataListMeta", "data-subtle": "", children: slots.meta.map((column) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(CellValue, { column, row: original, locale: collection.locale, rows: collection.filteredRows, view: "list", selected, active }) }, column.id)) }) : null,
+            renderItemExtra ? /* @__PURE__ */ jsx("div", { className: "DataListExtra", children: renderItemExtra(original) }) : null
+          ] }),
+          slots.amount ? /* @__PURE__ */ jsx("div", { className: "DataListAmount", "data-align": "end", children: /* @__PURE__ */ jsx(CellValue, { column: slots.amount, row: original, locale: collection.locale, rows: collection.filteredRows, view: "list", selected, active }) }) : null,
+          slots.status ? /* @__PURE__ */ jsx("div", { className: "DataListStatus", children: /* @__PURE__ */ jsx(CellValue, { column: slots.status, row: original, locale: collection.locale, rows: collection.filteredRows, view: "list", selected, active }) }) : null,
+          rowActions ? /* @__PURE__ */ jsx("span", { "data-actions": "", children: /* @__PURE__ */ jsx(RowMenu, { label: collection.messages.actionsFor(name), actions: rowActions(original) }) }) : null
+        ]
+      }
+    )
+  );
+}
+function slotMap(collection) {
+  const placed = collection.columns.map((column) => ({ column, slot: listSlot(column, collection.columns) }));
+  return {
+    primary: placed.find((item) => item.slot === "primary")?.column,
+    secondary: placed.find((item) => item.slot === "secondary")?.column,
+    amount: placed.find((item) => item.slot === "amount")?.column,
+    status: placed.find((item) => item.slot === "status")?.column,
+    meta: placed.filter((item) => item.slot === "meta").map((item) => item.column).slice(0, 3)
+  };
+}
+function DataTable({
+  collection,
+  label,
+  caption,
+  onRowActivate,
+  getRowHref,
+  activeRowId,
+  rowActions,
+  empty,
+  loading,
+  stickyHeader = true,
+  stickyRowHeader = false,
+  narrow = "scroll",
+  size = "sm",
+  rowNavigation,
+  className
+}) {
+  const narrowWidth = useUnderWidth("--sl-collection-narrow-width");
+  const asList = narrow === "list" && narrowWidth.under;
+  const columns = visibleColumns(collection);
+  const leaves = collection.pageEntries.filter((entry) => entry.kind === "leaf");
+  const navigate = rowNavigation ?? Boolean(onRowActivate || getRowHref);
+  const colSpan = columns.length + (collection.canSelect ? 1 : 0) + (rowActions ? 1 : 0);
+  const selectableIds2 = collection.filteredRows.filter((row) => collection.canSelect?.(row)).map((row) => collection.getRowId(row));
+  const selectedFiltered = selectableIds2.filter((id) => collection.selection.includes(id));
+  const allSelected = selectableIds2.length > 0 && selectedFiltered.length === selectableIds2.length;
+  const someSelected = selectedFiltered.length > 0 && !allSelected;
+  const view = asList ? /* @__PURE__ */ jsx(
+    DataList,
+    {
+      collection,
+      label,
+      onRowActivate,
+      getRowHref,
+      activeRowId,
+      rowActions,
+      empty,
+      loading,
+      size,
+      rowNavigation
+    }
+  ) : /* @__PURE__ */ jsx(
+    TableView,
+    {
+      collection,
+      columns,
+      label,
+      caption,
+      colSpan,
+      leaves,
+      navigate,
+      allSelected,
+      someSelected,
+      loading,
+      empty,
+      stickyHeader,
+      stickyRowHeader,
+      size,
+      className,
+      onRowActivate,
+      getRowHref,
+      activeRowId,
+      rowActions
+    }
+  );
+  return /* @__PURE__ */ jsx("div", { ref: narrowWidth.ref, className: cn("CollectionView", asList ? className : void 0), "data-narrow": narrowWidth.under ? "" : void 0, children: view });
+}
+function TableView({ collection, columns, label, caption, colSpan, leaves, navigate, allSelected, someSelected, loading, empty, stickyHeader, stickyRowHeader, size, className, onRowActivate, getRowHref, activeRowId, rowActions }) {
+  const roving = useRovingRows(leaves.length, navigate);
+  const scrollerRef = React4.useRef(null);
+  const [overflows, setOverflows] = React4.useState(false);
+  React4.useEffect(() => {
+    collection.registerRowFocus(() => roving.focusAt(0));
+    return () => collection.registerRowFocus(null);
+  }, [collection, roving]);
+  React4.useLayoutEffect(() => {
+    if (!collection.focusAfterPage.current) return;
+    collection.focusAfterPage.current = false;
+    roving.focusAt(0);
+  }, [collection, collection.page, roving]);
+  React4.useEffect(() => {
+    const node = scrollerRef.current;
+    if (!node) return;
+    const watch = () => {
+      const wide = node.scrollWidth > node.clientWidth + 1;
+      const tall = stickyHeader && node.scrollHeight > node.clientHeight + 1;
+      setOverflows(wide || tall);
+    };
+    const observer = new ResizeObserver(watch);
+    observer.observe(node);
+    watch();
+    return () => observer.disconnect();
+  }, [stickyHeader, leaves.length, columns.length]);
+  const filteredEmpty = collection.totalCount > 0 && collection.filteredCount === 0;
+  const text = collection.messages;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: scrollerRef,
+      className: cn("CollectionScroll", className),
+      tabIndex: overflows ? 0 : void 0,
+      role: overflows ? "region" : void 0,
+      "aria-label": overflows ? `${label}, scrollable` : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: "Table DataTable",
+            "aria-label": caption ? void 0 : label,
+            "aria-busy": loading || void 0,
+            "data-size": size,
+            "data-view": "table",
+            "data-sorted": collection.sort ? "" : void 0,
+            "data-filtered": collection.isFiltered ? "" : void 0,
+            "data-selecting": collection.selection.length ? "" : void 0,
+            "data-loading": loading ? "" : void 0,
+            "data-grouped": collection.grouping ? "" : void 0,
+            "data-sticky-header": stickyHeader ? "" : void 0,
+            "data-sticky-row-header": stickyRowHeader ? "" : void 0,
+            children: [
+              caption ? /* @__PURE__ */ jsx("caption", { children: caption }) : null,
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                collection.canSelect ? /* @__PURE__ */ jsx("th", { scope: "col", "data-width": "min", className: "CollectionSelectColumn", children: /* @__PURE__ */ jsx(
+                  SelectBox,
+                  {
+                    checked: allSelected,
+                    indeterminate: someSelected,
+                    label: text.selectAll(collection.filteredRows.filter((row) => collection.canSelect?.(row)).length),
+                    onChange: (checked) => checked ? collection.selectAllFiltered() : collection.clearFilteredSelection()
+                  }
+                ) }) : null,
+                columns.map((column) => {
+                  const sorted = collection.sort?.id === column.id ? collection.sort.desc ? "descending" : "ascending" : "none";
+                  return /* @__PURE__ */ jsx("th", { scope: "col", "aria-sort": column.sortable ? sorted : void 0, "data-align": alignOf(column), "data-width": column.width === "min" ? "min" : void 0, style: widthStyle(column.width), children: column.sortable ? /* @__PURE__ */ jsxs("button", { type: "button", className: "TableSortButton", onClick: () => collection.cycleSort(column.id), children: [
+                    displayHeader(column, collection.filteredRows),
+                    /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined TableSortIcon", "data-state": sorted, "aria-hidden": "true", children: sorted === "ascending" ? "arrow_upward" : sorted === "descending" ? "arrow_downward" : "swap_vert" })
+                  ] }) : displayHeader(column, collection.filteredRows) }, column.id);
+                }),
+                rowActions ? /* @__PURE__ */ jsx("th", { scope: "col", "data-width": "min", children: /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Actions" }) }) : null
+              ] }) }),
+              collection.pageEntries.some((entry) => entry.kind === "group") ? groupedBodies({ collection, columns, leaves, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions, colSpan, filteredEmpty, empty, loading }) : /* @__PURE__ */ jsx("tbody", { children: bodyRows({ collection, columns, leaves, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions, colSpan, filteredEmpty, empty, loading }) }),
+              Object.keys(collection.totals).length ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                collection.canSelect ? /* @__PURE__ */ jsx("td", {}) : null,
+                columns.map((column, index) => /* @__PURE__ */ jsxs("td", { "data-align": alignOf(column), children: [
+                  index === 0 ? text.total : typeof column.total === "function" ? column.total(collection.filteredRows) : collection.totals[column.id] ?? "",
+                  index === 0 && collection.isFiltered ? /* @__PURE__ */ jsxs("span", { className: "visually-hidden", children: [
+                    " of ",
+                    collection.filteredCount,
+                    " filtered rows"
+                  ] }) : null
+                ] }, column.id)),
+                rowActions ? /* @__PURE__ */ jsx("td", {}) : null
+              ] }) }) : null
+            ]
+          }
+        ),
+        loading && collection.totalCount === 0 ? /* @__PURE__ */ jsx(LoadingNote, { text: text.loading }) : null
+      ]
+    }
+  );
+}
+function bodyRows(args) {
+  if (args.loading && args.collection.totalCount === 0) return null;
+  if (args.leaves.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyRow, { colSpan: args.colSpan, filtered: args.filteredEmpty || args.collection.isFiltered, onClear: args.collection.clearFilters, empty: args.empty });
+  }
+  return args.leaves.map((entry, index) => /* @__PURE__ */ jsx(DataRow, { entry, index, ...args }, entry.row.id));
+}
+function groupedBodies(args) {
+  const groups = [];
+  let buffer = [];
+  let header = null;
+  let bodyKey = "rows";
+  const flush = () => {
+    if (!header && buffer.length === 0) return;
+    groups.push(
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        header,
+        buffer.map((item) => /* @__PURE__ */ jsx(DataRow, { entry: item, index: item.index, ...args }, item.row.id))
+      ] }, bodyKey)
+    );
+    header = null;
+    buffer = [];
+  };
+  let leafIndex = 0;
+  for (const entry of args.collection.pageEntries) {
+    if (entry.kind === "group") {
+      flush();
+      const row = entry.row;
+      bodyKey = row.id;
+      const selectable = (row.subRows ?? []).filter((child) => args.collection.canSelect?.(child.original));
+      const count = selectable.length;
+      const name = `${String(row.groupingValue ?? "group")}${entry.continued ? " (continued)" : ""}`;
+      const leaves = (row.subRows ?? []).map((child) => child.original);
+      header = /* @__PURE__ */ jsxs("tr", { "data-group": "", children: [
+        args.collection.canSelect ? /* @__PURE__ */ jsx("td", { "data-width": "min", children: count > 0 ? /* @__PURE__ */ jsx(
+          SelectBox,
+          {
+            checked: row.getIsAllSubRowsSelected?.() ?? false,
+            indeterminate: Boolean(row.getIsSomeSelected?.() && !row.getIsAllSubRowsSelected?.()),
+            label: `Select ${count} rows in ${row.groupingValue ?? "group"}`,
+            onChange: () => row.toggleSelected?.()
+          }
+        ) : null }) : null,
+        args.columns.map((column, index) => {
+          const subtotal = column.total ? typeof column.total === "function" ? column.total(leaves) : totalText(column, leaves, args.collection.locale) : "";
+          const label = `${name} \xB7 ${count}`;
+          if (index === 0) {
+            return /* @__PURE__ */ jsxs("th", { scope: "rowgroup", "data-align": alignOf(column), children: [
+              /* @__PURE__ */ jsxs("button", { type: "button", className: "CollectionGroupButton", "aria-expanded": row.getIsExpanded(), onClick: () => row.toggleExpanded(), children: [
+                /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: row.getIsExpanded() ? "expand_more" : "chevron_right" }),
+                label
+              ] }),
+              subtotal ? /* @__PURE__ */ jsx("span", { children: subtotal }) : null
+            ] }, column.id);
+          }
+          return /* @__PURE__ */ jsx("td", { "data-align": alignOf(column), children: subtotal }, column.id);
+        }),
+        args.rowActions ? /* @__PURE__ */ jsx("td", {}) : null
+      ] });
+      continue;
+    }
+    buffer.push({ row: entry.row, index: leafIndex });
+    leafIndex += 1;
+  }
+  flush();
+  if (!groups.length) return /* @__PURE__ */ jsx("tbody", { children: bodyRows(args) });
+  return groups;
+}
+function DataRow({ entry, index, collection, columns, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions }) {
+  const original = entry.row.original;
+  const id = entry.row.id;
+  const selected = collection.selectionSet.has(id);
+  const active = activeRowId === id;
+  const name = rowHeaderText(collection, original);
+  const named = levelName(collection, entry.row, name);
+  const canSelect = collection.canSelect?.(original) ?? false;
+  const href = getRowHref?.(original);
+  const activate = () => onRowActivate?.(original);
+  const toggle = canSelect ? () => entry.row.toggleSelected?.(!selected) : void 0;
+  const tabIndex = navigate ? roving.cursor === index ? 0 : -1 : void 0;
+  const parent = Boolean(entry.row.subRows?.length);
+  const onKeyDown = (event) => roving.onKeyDown(event, index, toggle, href ? void 0 : activate, parent ? { expanded: Boolean(entry.row.getIsExpanded?.()), toggle: () => entry.row.toggleExpanded?.() } : void 0);
+  const disclosure = parent ? /* @__PURE__ */ jsx("button", { type: "button", className: "CollectionGroupButton", "aria-expanded": entry.row.getIsExpanded(), "aria-label": `${entry.row.getIsExpanded() ? "Collapse" : "Expand"} ${name}`, onClick: (event) => {
+    event.stopPropagation();
+    entry.row.toggleExpanded?.();
+  }, children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: entry.row.getIsExpanded() ? "expand_more" : "chevron_right" }) }) : null;
+  const header = href ? /* @__PURE__ */ jsx("a", { ref: (node) => {
+    roving.refs.current[index] = node;
+  }, href, tabIndex, onKeyDown, onClick: () => roving.focusAt(index), children: name }) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "CollectionRowButton",
+      ref: (node) => {
+        roving.refs.current[index] = node;
+      },
+      tabIndex,
+      "aria-label": named === name ? void 0 : named,
+      onKeyDown,
+      onClick: () => {
+        roving.focusAt(index);
+        activate();
+      },
+      children: name
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      "aria-selected": selected || void 0,
+      "aria-current": active ? "true" : void 0,
+      "data-depth": entry.row.depth || void 0,
+      onClick: (event) => {
+        const target = event.target;
+        if (interactiveTarget(target) || selectingText()) return;
+        if (target instanceof Element && target.closest(".CollectionSelectColumn, [data-actions]")) return;
+        if (href && !onRowActivate) {
+          event.currentTarget.querySelector("a")?.click();
+          return;
+        }
+        activate();
+      },
+      children: [
+        collection.canSelect ? /* @__PURE__ */ jsx("td", { "data-width": "min", children: canSelect ? /* @__PURE__ */ jsx(SelectBox, { checked: selected, label: `Select ${named}`, onChange: (checked) => entry.row.toggleSelected?.(checked) }) : null }) : null,
+        columns.map((column) => {
+          const Tag = column.rowHeader ? "th" : "td";
+          return /* @__PURE__ */ jsx(Tag, { scope: column.rowHeader ? "row" : void 0, "data-align": alignOf(column), style: column.rowHeader ? { paddingInlineStart: `calc(var(--sl-table-cell-padding-inline) + var(--sl-collection-tree-indent) * ${entry.row.depth})` } : void 0, children: column.rowHeader ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            disclosure,
+            header
+          ] }) : /* @__PURE__ */ jsx(CellValue, { column, row: original, locale: collection.locale, rows: collection.filteredRows, view: "table", selected, active }) }, column.id);
+        }),
+        rowActions ? /* @__PURE__ */ jsx("td", { "data-width": "min", "data-actions": "", children: /* @__PURE__ */ jsx(RowMenu, { label: collection.messages.actionsFor(name), actions: rowActions(original) }) }) : null
+      ]
+    }
+  );
+}
+function visibleColumns(collection) {
+  const order = collection.columnOrder.length ? collection.columnOrder : collection.columns.map((column) => column.id);
+  return order.map((id) => collection.columns.find((column) => column.id === id)).filter((column) => Boolean(column && collection.columnVisibility[column.id] !== false));
+}
+function widthStyle(width) {
+  if (!width || width === "auto" || width === "min") return void 0;
+  return { width: `var(--sl-${width.replace(/\./g, "-")})` };
+}
+function CollectionPagination({
+  page,
+  pageCount,
+  pageSize,
+  total,
+  filtered,
+  onPageChange,
+  onPageSizeChange,
+  pageSizeOptions,
+  label,
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  rowsPerPageLabel = "Rows per page",
+  className
+}) {
+  const size = pageSize && pageSize > 0 ? pageSize : total;
+  const start = total === 0 ? 0 : (page - 1) * size + 1;
+  const end = Math.min(total, page * size);
+  return /* @__PURE__ */ jsxs("nav", { className: cn("CollectionPagination", className), "aria-label": `Pagination for ${label}`, children: [
+    /* @__PURE__ */ jsxs("p", { children: [
+      total === 0 ? "0" : `${start}\u2013${end}`,
+      " of ",
+      total,
+      filtered ? " filtered" : ""
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { emphasis: "quiet", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: [
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "chevron_left" }),
+      previousLabel
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { emphasis: "quiet", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: [
+      nextLabel,
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "chevron_right" })
+    ] }),
+    pageSizeOptions?.length && onPageSizeChange ? /* @__PURE__ */ jsxs(
+      Select.Root,
+      {
+        items: pageSizeOptions.map((option) => ({ value: String(option), label: `${option} per page` })),
+        value: String(pageSize ?? ""),
+        onValueChange: (value) => onPageSizeChange(Number(value)),
+        children: [
+          /* @__PURE__ */ jsxs(Select.Trigger, { "aria-label": rowsPerPageLabel, children: [
+            /* @__PURE__ */ jsx(Select.Value, {}),
+            /* @__PURE__ */ jsx(Select.Icon, { children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: "expand_more" }) })
+          ] }),
+          /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxs(Select.Item, { value: String(option), children: [
+            option,
+            " per page"
+          ] }, option)) }) }) }) })
+        ]
+      }
+    ) : null
+  ] });
+}
+var COMBOBOX_AT = 12;
+function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, className }) {
+  const tabs = collection.columns.find((column) => column.filter?.kind === "tabs");
+  const selects = collection.columns.filter((column) => column.filter && column.filter.kind !== "tabs");
+  const searchable = collection.columns.some((column) => column.searchable);
+  if (process.env.NODE_ENV !== "production" && searchable && !searchLabel) {
+    console.warn("CollectionToolbar needs searchLabel when a column is searchable.");
+  }
+  const [announced, setAnnounced] = React4.useState("");
+  const seenSelection = React4.useRef(false);
+  React4.useEffect(() => {
+    const first = !seenSelection.current;
+    seenSelection.current = true;
+    if (first && collection.selection.length === 0) return;
+    setAnnounced("");
+    const timer = window.setTimeout(() => {
+      if (!collection.selection.length) {
+        setAnnounced(collection.messages.selectionCleared);
+        return;
+      }
+      const hidden = collection.hiddenSelectedCount ? `, ${collection.messages.hiddenByFilters(collection.hiddenSelectedCount)}` : "";
+      setAnnounced(`${collection.messages.selected(collection.selection.length)}${hidden}`);
+    }, 200);
+    return () => window.clearTimeout(timer);
+  }, [collection.selection, collection.hiddenSelectedCount, collection.messages]);
+  const selecting = collection.selection.length > 0;
+  const narrow = useUnderWidth("--sl-collection-narrow-width");
+  return /* @__PURE__ */ jsxs("div", { ref: narrow.ref, className: cn("CollectionToolbar", className), "data-selecting": selecting ? "" : void 0, "data-narrow": narrow.under ? "" : void 0, children: [
+    tabs ? /* @__PURE__ */ jsx(ToolbarTabs, { collection, column: tabs }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "CollectionToolbarMain", children: [
+      searchable ? /* @__PURE__ */ jsx(
+        SearchField,
+        {
+          label: searchLabel ?? "Search",
+          visible: searchLabelVisible,
+          value: collection.search,
+          onChange: collection.setSearch,
+          clearLabel: collection.messages.clearSearch
+        }
+      ) : null,
+      selecting ? /* @__PURE__ */ jsxs("div", { className: "CollectionSelectionBar", role: "region", "aria-label": "Selection", children: [
+        /* @__PURE__ */ jsxs("p", { className: "CollectionCount", children: [
+          collection.messages.selected(collection.selection.length),
+          collection.hiddenSelectedCount > 0 ? /* @__PURE__ */ jsxs("span", { children: [
+            " \xB7 ",
+            collection.messages.hiddenByFilters(collection.hiddenSelectedCount)
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "CollectionToolbarActions", children: bulkActions }),
+        /* @__PURE__ */ jsx(Button, { emphasis: "quiet", onClick: collection.clearSelection, children: "Clear selection" })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "CollectionToolbarTrailing", children: [
+        selects.map((column) => /* @__PURE__ */ jsx(FilterControl, { collection, column }, column.id)),
+        groupOptions?.length ? /* @__PURE__ */ jsx(
+          FilterSelect,
+          {
+            label: "Group by",
+            value: collection.grouping ?? "",
+            options: [{ value: "", label: "No grouping" }, ...groupOptions],
+            onChange: (value) => collection.setGrouping(typeof value === "string" && value ? value : null)
+          }
+        ) : null,
+        showSort ? /* @__PURE__ */ jsx(SortControl, { collection }) : null,
+        actions ? /* @__PURE__ */ jsx("div", { className: "CollectionToolbarActions", children: actions }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "visually-hidden", "aria-live": "polite", children: announced })
+  ] });
+}
+function ToolbarTabs({ collection, column }) {
+  const counts = collection.facetCounts(column.id);
+  const options = column.filter?.options ?? [...counts.keys()].filter((value2) => value2 !== "").sort().map((value2) => ({ value: value2, label: value2 }));
+  const allCount = [...counts.values()].reduce((sum, count) => sum + count, 0);
+  const current = collection.filters[column.id];
+  const value = current == null || current === "" ? "" : String(current);
+  return /* @__PURE__ */ jsx(Tabs.Root, { value, onValueChange: (next) => collection.setFilter(column.id, next === "" ? void 0 : next), children: /* @__PURE__ */ jsx(Tabs.List, { children: options.map((option) => {
+    const count = option.value === "" || option.all ? allCount : counts.get(option.value) ?? 0;
+    const tabValue = option.all ? "" : option.value;
+    return /* @__PURE__ */ jsxs(Tabs.Tab, { value: tabValue, children: [
+      option.label,
+      " ",
+      count
+    ] }, tabValue || "all");
+  }) }) });
+}
+function SearchField({ label, visible, value, onChange, clearLabel = "Clear search" }) {
+  const id = React4.useId();
+  const input = React4.useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: "CollectionSearch", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: visible ? void 0 : "visually-hidden", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "CollectionSearchField", "data-filled": value ? "" : void 0, children: [
+      /* @__PURE__ */ jsx("span", { className: "CollectionSearchIcon material-symbols-outlined", "aria-hidden": "true", children: "search" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: input,
+          id,
+          type: "search",
+          value,
+          onChange: (event) => onChange(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Escape" && value) {
+              event.preventDefault();
+              onChange("");
+            }
+          }
+        }
+      ),
+      value ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "CollectionSearchClear",
+          "aria-label": clearLabel,
+          onClick: () => {
+            onChange("");
+            input.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "close" })
+        }
+      ) : null
+    ] })
+  ] });
+}
+function FilterControl({ collection, column }) {
+  const counts = collection.facetCounts(column.id);
+  const options = column.filter?.options ?? [...counts.keys()].filter((value) => value !== "").sort().map((value) => ({ value, label: value }));
+  const label = column.filter?.label ?? headerLabel(column);
+  if (column.filter?.kind === "boolean") {
+    const value = collection.filters[column.id];
+    return /* @__PURE__ */ jsx(
+      FilterSelect,
+      {
+        label,
+        value: value == null || value === "" ? "" : String(value),
+        options: [{ value: "", label: "Any" }, { value: "true", label: "Yes" }, { value: "false", label: "No" }],
+        onChange: (next) => collection.setFilter(column.id, next === "" || Array.isArray(next) ? void 0 : next === "true")
+      }
+    );
+  }
+  if (column.filter?.kind === "multi-select") {
+    const selected = Array.isArray(collection.filters[column.id]) ? collection.filters[column.id] : [];
+    return /* @__PURE__ */ jsx(
+      FilterSelect,
+      {
+        label,
+        multiple: true,
+        value: selected,
+        options,
+        onChange: (next) => {
+          const values = Array.isArray(next) ? next : [];
+          collection.setFilter(column.id, values.length ? values : void 0);
+        }
+      }
+    );
+  }
+  if (options.length > COMBOBOX_AT) {
+    return /* @__PURE__ */ jsx(
+      ComboboxField,
+      {
+        label,
+        value: String(collection.filters[column.id] ?? ""),
+        options,
+        onChange: (next) => collection.setFilter(column.id, next || void 0)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    FilterSelect,
+    {
+      label,
+      value: String(collection.filters[column.id] ?? ""),
+      options: [{ value: "", label: "Any" }, ...options],
+      onChange: (next) => collection.setFilter(column.id, next || void 0)
+    }
+  );
+}
+function FilterSelect({ label, value, options, onChange, multiple }) {
+  const labelId = React4.useId();
+  const valueId = React4.useId();
+  const items = options.map((option) => ({ value: option.value, label: option.label }));
+  const chosen = Array.isArray(value) ? value.length ? `${value.length} selected` : "Any" : options.find((option) => option.value === value)?.label ?? "Any";
+  return /* @__PURE__ */ jsxs(Select.Root, { items, multiple, value: multiple ? value : value, onValueChange: (next) => onChange(multiple ? Array.isArray(next) ? next.map(String) : [] : next == null ? "" : String(next)), children: [
+    /* @__PURE__ */ jsxs(Select.Trigger, { "aria-labelledby": `${labelId} ${valueId}`, children: [
+      /* @__PURE__ */ jsx("span", { id: labelId, className: "visually-hidden", children: label }),
+      /* @__PURE__ */ jsxs("span", { id: valueId, children: [
+        label,
+        ": ",
+        chosen
+      ] }),
+      /* @__PURE__ */ jsx(Select.Icon, { children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", children: "expand_more" }) })
+    ] }),
+    /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: items.map((item) => /* @__PURE__ */ jsx(Select.Item, { value: item.value, children: item.label }, item.value || "any")) }) }) }) })
+  ] });
+}
+function ComboboxField({ label, value, options, onChange }) {
+  const id = React4.useId();
+  return /* @__PURE__ */ jsxs(Combobox.Root, { items: options.map((option) => option.label), value: options.find((option) => option.value === value)?.label ?? null, onValueChange: (next) => {
+    const match = options.find((option) => option.label === next);
+    onChange(match?.value ?? "");
+  }, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "visually-hidden", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "ComboboxInputWrapper", children: /* @__PURE__ */ jsx(Combobox.Input, { id, placeholder: label, "aria-label": label }) }),
+    /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Popup, { children: [
+      /* @__PURE__ */ jsx(Combobox.Empty, { children: "No matches" }),
+      /* @__PURE__ */ jsx(Combobox.List, { children: (item) => /* @__PURE__ */ jsx(Combobox.Item, { value: item, children: item }, item) })
+    ] }) }) })
+  ] });
+}
+function SortControl({ collection }) {
+  const columns = collection.columns.filter((column) => column.sortable);
+  return /* @__PURE__ */ jsxs("div", { className: "CollectionSort", children: [
+    /* @__PURE__ */ jsx(
+      FilterSelect,
+      {
+        label: "Sort",
+        value: collection.sort?.id ?? "",
+        options: columns.map((column) => ({ value: column.id, label: headerLabel(column) })),
+        onChange: (id) => {
+          const next = typeof id === "string" ? id : "";
+          collection.setSort(next ? { id: next, desc: collection.sort?.id === next ? collection.sort.desc : false } : null);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        emphasis: "quiet",
+        "aria-pressed": Boolean(collection.sort?.desc),
+        "aria-label": collection.sort?.desc ? "Sort direction, descending" : "Sort direction, ascending",
+        disabled: !collection.sort,
+        onClick: () => collection.sort && collection.setSort({ ...collection.sort, desc: !collection.sort.desc }),
+        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: collection.sort?.desc ? "arrow_downward" : "arrow_upward" })
+      }
+    )
+  ] });
+}
+function ToolbarClear({ collection }) {
+  if (!collection.isFiltered) return null;
+  return /* @__PURE__ */ jsx(Button, { emphasis: "quiet", onClick: collection.clearFilters, children: collection.messages.clearFilters });
+}
+function ToolbarActions({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "CollectionToolbarActions", children });
+}
+function ToolbarSelection({ collection, children }) {
+  if (!collection.selection.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "CollectionSelectionBar", role: "region", "aria-label": "Selection", children: [
+    /* @__PURE__ */ jsx("p", { className: "CollectionCount", children: collection.messages.selected(collection.selection.length) }),
+    children,
+    /* @__PURE__ */ jsx(Button, { emphasis: "quiet", onClick: collection.clearSelection, children: "Clear selection" })
+  ] });
+}
+function ToolbarRoot({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("CollectionToolbar", className), children });
+}
+var CollectionToolbar = Object.assign(CollectionToolbarImpl, {
+  Root: ToolbarRoot,
+  Tabs: ToolbarTabs,
+  Search: SearchField,
+  Filter: FilterControl,
+  Sort: SortControl,
+  Clear: ToolbarClear,
+  Actions: ToolbarActions,
+  SelectionBar: ToolbarSelection
+});
+var collectionFeatures = tableFeatures({
+  rowSortingFeature,
+  columnFilteringFeature,
+  globalFilteringFeature,
+  columnFacetingFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  columnGroupingFeature,
+  rowExpandingFeature,
+  columnOrderingFeature,
+  columnVisibilityFeature,
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
+  groupedRowModel: createGroupedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues()
+});
+function toColumnDefs(columns) {
+  return columns.map((column) => ({
+    id: column.id,
+    accessorFn: (row) => {
+      const value = column.value(row);
+      return isEmptyValue(value) ? void 0 : value;
+    },
+    header: headerLabel(column),
+    enableSorting: Boolean(column.sortable),
+    sortUndefined: "last",
+    // A tie returns 0. TanStack multiplies the result by -1 when descending, so an index tie would reverse, and it already falls back to the row index.
+    sortFn: ((rowA, rowB, columnId) => {
+      const locale = rowA.table.options.meta?.locale ?? "en";
+      return comparePresent(rowA.getValue(columnId), rowB.getValue(columnId), column.kind ?? "text", collatorFor(locale));
+    }),
+    enableGlobalFilter: column.searchable != null && column.searchable !== false,
+    enableColumnFilter: Boolean(column.filter),
+    enableGrouping: true,
+    enableHiding: true,
+    filterFn: column.filter ? filterFor() : void 0,
+    meta: column,
+    ...column.tanstack
+  }));
+}
+function filterFor(column) {
+  const fn = (row, columnId, filterValue) => {
+    if (filterValue == null || filterValue === "" || Array.isArray(filterValue) && filterValue.length === 0) return true;
+    const value = String(row.getValue(columnId) ?? "");
+    if (Array.isArray(filterValue)) return filterValue.map(String).includes(value);
+    if (typeof filterValue === "boolean") return String(Boolean(row.getValue(columnId))) === String(filterValue) || value === String(filterValue);
+    return value === String(filterValue);
+  };
+  fn.autoRemove = (filterValue) => filterValue == null || filterValue === "" || Array.isArray(filterValue) && filterValue.length === 0;
+  return fn;
+}
+function collectionTableOptions(input) {
+  const columns = input.columns;
+  const locale = input.locale;
+  const searchKey = `${locale}\0${columns.map((column) => column.id).join("\0")}`;
+  const searchCache = /* @__PURE__ */ new WeakMap();
+  const textOf = (row) => {
+    const cached = searchCache.get(row);
+    if (cached?.key === searchKey) return cached.text;
+    const text = rowSearchText(row, columns, locale);
+    searchCache.set(row, { key: searchKey, text });
+    return text;
+  };
+  let treeCacheQuery = "\0";
+  let treeCache = /* @__PURE__ */ new Set();
+  const globalFilterFn = (row, _columnId, query) => {
+    const text = String(query ?? "");
+    if (!input.getSubRows) return searchMatches(text, textOf(row.original));
+    if (treeCacheQuery !== text) {
+      treeCacheQuery = text;
+      treeCache = treeVisibleIds(
+        input.rows,
+        input.getRowId,
+        (item) => input.getSubRows?.(item),
+        (item) => searchMatches(text, textOf(item))
+      );
+    }
+    return treeCache.has(input.getRowId(row.original));
+  };
+  return {
+    features: collectionFeatures,
+    data: input.rows,
+    columns: toColumnDefs(columns),
+    getRowId: (row) => input.getRowId(row),
+    getSubRows: input.getSubRows,
+    // A column filter on a tree keeps the parents of a matching child, the same way search does.
+    filterFromLeafRows: Boolean(input.getSubRows),
+    getColumnCanGlobalFilter: (column) => {
+      const meta = column.columnDef.meta;
+      return meta?.searchable != null && meta.searchable !== false;
+    },
+    enableRowSelection: input.canSelect ? (row) => input.canSelect(row.original) : false,
+    enableMultiRowSelection: true,
+    enableSubRowSelection: true,
+    globalFilterFn,
+    meta: { locale, columns },
+    state: input.state,
+    initialState: input.initialState,
+    onGlobalFilterChange: input.onStateChange?.globalFilter,
+    onSortingChange: input.onStateChange?.sorting,
+    onColumnFiltersChange: input.onStateChange?.columnFilters,
+    onPaginationChange: input.onStateChange?.pagination,
+    onRowSelectionChange: input.onStateChange?.rowSelection,
+    onGroupingChange: input.onStateChange?.grouping,
+    onExpandedChange: input.onStateChange?.expanded,
+    onColumnOrderChange: input.onStateChange?.columnOrder,
+    onColumnVisibilityChange: input.onStateChange?.columnVisibility,
+    autoResetPageIndex: false,
+    // Resetting expanded would close every group on the first data change. Groups start open.
+    autoResetExpanded: false
+  };
+}
+
+// src/custom/collection/use-collection.ts
+var defaultMessages = {
+  selectAll: (count) => `Select all ${count} filtered rows`,
+  actionsFor: (name) => `Actions for ${name}`,
+  total: "Total",
+  selected: (count) => `${count} selected`,
+  hiddenByFilters: (count) => `${count} hidden by filters`,
+  noResults: "No results",
+  noResultsDescription: "Nothing matches the current search or filters.",
+  clearFilters: "Clear filters",
+  clearSearch: "Clear search",
+  nothingHere: "Nothing here yet",
+  previous: "Previous",
+  next: "Next",
+  rowsPerPage: "Rows per page",
+  selectionCleared: "Selection cleared",
+  loading: "Loading"
+};
+function readStored(storage, key, columnIds, pageSizeOptions) {
+  if (!storage || !key) return {};
+  try {
+    const raw = storage.getItem(`loomiere:collection:${key}`);
+    const stored = raw ? JSON.parse(raw) : {};
+    if (stored.sort && !columnIds.has(stored.sort.id)) stored.sort = null;
+    if (stored.filters) {
+      stored.filters = Object.fromEntries(Object.entries(stored.filters).filter(([id]) => columnIds.has(id)));
+    }
+    if (stored.grouping && !columnIds.has(stored.grouping)) stored.grouping = null;
+    if (stored.pageSize != null && pageSizeOptions?.length && !pageSizeOptions.includes(stored.pageSize)) stored.pageSize = void 0;
+    return stored;
+  } catch {
+    return {};
+  }
+}
+function withTabDefaults(columns, filters) {
+  const next = { ...filters };
+  for (const column of columns) {
+    if (column.filter?.kind !== "tabs") continue;
+    const current = next[column.id];
+    if (current != null && current !== "") continue;
+    const options = column.filter.options ?? [];
+    if (options.some((option) => option.value === "" || option.all)) continue;
+    if (options[0]) next[column.id] = options[0].value;
+  }
+  return next;
+}
+function filtersToList(filters) {
+  return Object.entries(filters).filter(([, value]) => value != null && value !== "" && !(Array.isArray(value) && value.length === 0)).map(([id, value]) => ({ id, value }));
+}
+function selectionRecord(ids) {
+  const record = {};
+  for (const id of ids) record[id] = true;
+  return record;
+}
+function useCollection(options) {
+  const storage = options.storage ?? (typeof sessionStorage === "undefined" ? void 0 : sessionStorage);
+  const columnIds = useMemo(() => new Set(options.columns.map((column) => column.id)), [options.columns]);
+  const stored = useRef(readStored(storage, options.stateKey, columnIds, options.pageSizeOptions)).current;
+  const locale = options.locale || (typeof document === "undefined" ? "en" : document.documentElement.lang) || "en";
+  const messages = { ...defaultMessages, ...options.messages };
+  const initialSort = options.initialSort ?? null;
+  const initialFilters = withTabDefaults(options.columns, options.initialFilters ?? {});
+  const initialGrouping = options.groupBy ?? null;
+  const initialVisibility = Object.fromEntries(options.columns.map((column) => [column.id, !column.hidden]));
+  const initialOrder = options.columns.map((column) => column.id);
+  const [searchState, setSearchState] = useState(stored.search ?? "");
+  const [sortState, setSortState] = useState(stored.sort ?? initialSort);
+  const [filterState, setFilterState] = useState(stored.filters ?? initialFilters);
+  const [selectionState, setSelectionState] = useState([]);
+  const [pageState, setPageState] = useState(1);
+  const [pageSizeState, setPageSizeState] = useState(stored.pageSize ?? options.pageSize);
+  const [groupingState, setGroupingState] = useState(stored.grouping ?? initialGrouping);
+  const [orderState, setOrderState] = useState(initialOrder);
+  const [visibilityState, setVisibilityState] = useState(initialVisibility);
+  const [expanded, setExpanded] = useState(options.defaultExpanded === false ? {} : true);
+  const expandedBeforeSearch = useRef(null);
+  const focusAfterPage = useRef(false);
+  const search = options.search ?? searchState;
+  const sort = options.sort === void 0 ? sortState : options.sort;
+  const filters = options.filters ?? filterState;
+  const selection = options.selection ?? selectionState;
+  const page = options.page ?? pageState;
+  const grouping = options.grouping === void 0 ? groupingState : options.grouping;
+  const columnOrder = options.columnOrder ?? orderState;
+  const columnVisibility = options.columnVisibility ?? visibilityState;
+  const pageSize = pageSizeState;
+  const deferredSearch = useDeferredValue(search);
+  const focusRef = useRef(null);
+  const rowsRef = useRef(options.rows);
+  const idOf = options.getRowId;
+  const updatePage = (value) => {
+    options.onPageChange?.(value);
+    if (options.page === void 0) setPageState(value);
+  };
+  const setSearch = (value) => {
+    options.onSearchChange?.(value);
+    if (options.search === void 0) setSearchState(value);
+    updatePage(1);
+  };
+  const setSort = (value) => {
+    options.onSortChange?.(value);
+    if (options.sort === void 0) setSortState(value);
+  };
+  const setFilters = (value) => {
+    options.onFiltersChange?.(value);
+    if (options.filters === void 0) setFilterState(value);
+    updatePage(1);
+  };
+  const setSelection = (ids) => {
+    options.onSelectionChange?.(ids);
+    if (options.selection === void 0) setSelectionState(ids);
+  };
+  const setGrouping = (value) => {
+    options.onGroupingChange?.(value);
+    if (options.grouping === void 0) setGroupingState(value);
+  };
+  const tableOptions = collectionTableOptions({
+    rows: options.rows,
+    columns: options.columns,
+    getRowId: idOf,
+    getSubRows: options.getSubRows,
+    locale,
+    canSelect: options.canSelect,
+    state: {
+      globalFilter: deferredSearch,
+      sorting: sort ? [{ id: sort.id, desc: sort.desc }] : [],
+      columnFilters: filtersToList(filters),
+      pagination: { pageIndex: 0, pageSize: Number.POSITIVE_INFINITY },
+      rowSelection: selectionRecord(selection),
+      grouping: grouping ? [grouping] : [],
+      expanded,
+      columnOrder,
+      columnVisibility
+    },
+    initialState: {
+      sorting: initialSort ? [{ id: initialSort.id, desc: initialSort.desc }] : [],
+      columnFilters: filtersToList(initialFilters),
+      grouping: initialGrouping ? [initialGrouping] : [],
+      columnVisibility: initialVisibility,
+      columnOrder: initialOrder
+    },
+    onStateChange: {
+      rowSelection: (updater) => {
+        const current = selectionRecord(selection);
+        const next = typeof updater === "function" ? updater(current) : updater;
+        setSelection(Object.keys(next).filter((id) => next[id]));
+      },
+      expanded: (updater) => {
+        setExpanded((current) => typeof updater === "function" ? updater(current) : updater);
+      }
+    }
+  });
+  const table = useTable(tableOptions);
+  useEffect(() => {
+    if (!options.getSubRows) return;
+    if (deferredSearch) {
+      if (expandedBeforeSearch.current == null) expandedBeforeSearch.current = expanded;
+      setExpanded(true);
+      return;
+    }
+    if (expandedBeforeSearch.current != null) {
+      setExpanded(expandedBeforeSearch.current);
+      expandedBeforeSearch.current = null;
+    }
+  }, [deferredSearch, options.getSubRows]);
+  useEffect(() => {
+    if (options.clearSelectionOnRowsChange && rowsRef.current !== options.rows) {
+      rowsRef.current = options.rows;
+      setSelection([]);
+      return;
+    }
+    rowsRef.current = options.rows;
+    const kept = selectableIds(selection, options.rows, idOf, options.canSelect, options.getSubRows);
+    if (kept.length !== selection.length) setSelection(kept);
+  }, [options.rows, options.clearSelectionOnRowsChange, options.canSelect, options.getSubRows]);
+  useEffect(() => {
+    if (!options.stateKey || !storage) return;
+    try {
+      storage.setItem(
+        `loomiere:collection:${options.stateKey}`,
+        JSON.stringify({ search, sort, filters, pageSize, grouping })
+      );
+    } catch {
+    }
+  }, [options.stateKey, storage, search, sort, filters, pageSize, grouping]);
+  const filteredModel = table.getFilteredRowModel();
+  const filteredLeaves = filteredModel.flatRows.filter((row) => !row.getIsGrouped?.() && !(options.getSubRows && row.subRows?.length));
+  const filteredRows = filteredLeaves.map((row) => row.original);
+  const filteredIds = new Set(filteredLeaves.map((row) => row.id));
+  const topRows = table.getRowModel().rows;
+  const flat = flattenVisible(topRows);
+  const paged = pageFlat(flat, page - 1, pageSize && pageSize > 0 ? pageSize : flat.filter((entry) => entry.kind === "leaf").length || 1);
+  const totals = useMemo(() => {
+    const rows = filteredModel.flatRows.filter((row) => !row.getIsGrouped?.() && !(options.getSubRows && row.subRows?.length)).map((row) => row.original);
+    const result = {};
+    for (const column of options.columns) {
+      if (!column.total) continue;
+      result[column.id] = totalText(column, rows, locale);
+    }
+    return result;
+  }, [options.columns, options.getSubRows, filteredModel, locale]);
+  const byId = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const walk = (rows) => {
+      for (const row of rows) {
+        map.set(idOf(row), row);
+        const children = options.getSubRows?.(row);
+        if (children) walk(children);
+      }
+    };
+    walk(options.rows);
+    return map;
+  }, [options.rows, options.getSubRows, idOf]);
+  const isFiltered = Boolean(search) || !sameFilters(filters, initialFilters);
+  return {
+    table,
+    columns: options.columns,
+    getRowId: idOf,
+    locale,
+    search,
+    setSearch,
+    sort,
+    setSort,
+    cycleSort: (columnId) => setSort(nextSort(sort, columnId, initialSort)),
+    filters,
+    setFilter: (columnId, value) => setFilters({ ...filters, [columnId]: value }),
+    clearFilters: () => {
+      setSearch("");
+      setFilters({ ...initialFilters });
+    },
+    facetCounts: (columnId) => {
+      const column = table.getColumn(columnId);
+      const counts = column?.getFacetedUniqueValues?.() ?? /* @__PURE__ */ new Map();
+      const mapped = /* @__PURE__ */ new Map();
+      for (const [key, count] of counts) mapped.set(key == null ? "" : String(key), count);
+      return mapped;
+    },
+    selection,
+    selectedRows: selection.map((id) => byId.get(id)).filter((row) => row != null),
+    selectAllFiltered: () => table.toggleAllRowsSelected(true),
+    clearSelection: () => setSelection([]),
+    clearFilteredSelection: () => setSelection(selection.filter((id) => !filteredIds.has(id))),
+    selectionSet: new Set(selection),
+    messages,
+    hiddenSelectedCount: hiddenSelectedCount(selection, filteredIds),
+    filteredRows,
+    filteredCount: filteredRows.length,
+    totalCount: options.rows.length,
+    totals,
+    page: paged.bounds.pageIndex + 1,
+    pageCount: pageSize ? paged.bounds.pageCount : 1,
+    setPage: (value) => {
+      focusAfterPage.current = true;
+      updatePage(value);
+    },
+    pageSize,
+    setPageSize: (size) => {
+      setPageSizeState(size);
+      updatePage(1);
+    },
+    isFiltered,
+    reset: () => {
+      setSearch("");
+      setSort(initialSort);
+      setFilters({ ...initialFilters });
+      setGrouping(initialGrouping);
+      setPageSizeState(options.pageSize);
+      setExpanded(options.defaultExpanded === false ? {} : true);
+      expandedBeforeSearch.current = null;
+      updatePage(1);
+      setOrderState(initialOrder);
+      setVisibilityState(initialVisibility);
+      options.onColumnOrderChange?.(initialOrder);
+      options.onColumnVisibilityChange?.(initialVisibility);
+    },
+    grouping,
+    setGrouping,
+    columnOrder,
+    setColumnOrder: (order) => {
+      options.onColumnOrderChange?.(order);
+      if (options.columnOrder === void 0) setOrderState(order);
+    },
+    columnVisibility,
+    setColumnVisibility: (visibility) => {
+      options.onColumnVisibilityChange?.(visibility);
+      if (options.columnVisibility === void 0) setVisibilityState(visibility);
+    },
+    canSelect: options.canSelect,
+    pageEntries: paged.entries,
+    rowHeaderId: options.columns.find((column) => column.rowHeader)?.id,
+    registerRowFocus: (focus) => {
+      focusRef.current = focus;
+    },
+    focusFirstRow: () => focusRef.current?.(),
+    focusAfterPage
+  };
+}
+function sameFilters(a, b) {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const key of keys) if (String(a[key] ?? "") !== String(b[key] ?? "")) return false;
+  return true;
+}
+function flattenVisible(rows, groupId, nested = false) {
+  const out = [];
+  for (const row of rows) {
+    if (!nested && !row.getIsGrouped?.() && row.getParentRow?.()) continue;
+    if (row.getIsGrouped?.()) {
+      out.push({ kind: "group", row, groupId: row.id });
+      if (row.getIsExpanded()) out.push(...flattenVisible(row.subRows, row.id, true));
+    } else {
+      out.push({ kind: "leaf", row, groupId });
+      if (row.subRows?.length && row.getIsExpanded?.()) out.push(...flattenVisible(row.subRows, groupId, true));
+    }
+  }
+  return out;
+}
+
+export { CollectionPagination, CollectionToolbar, DataList, DataTable, collectionTableOptions, defineColumns, headerLabel, totalText, useCollection };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map